@atlaskit/media-card 72.0.0 → 73.1.1

package/dist/es2019/root/inlinePlayer.js

@@ -7,6 +7,10 @@ import { CustomMediaPlayer, InactivityDetector } from '@atlaskit/media-ui';
 import { InlinePlayerWrapper } from './styled';
 import { defaultImageCardDimensions } from '..';
 import { CardLoading } from '../utils/lightCards/cardLoading';
+import { ProgressBar } from './ui/progressBar/progressBar';
+import { calcBreakpointSize } from './ui/styled';
+import { isValidPercentageUnit } from '../utils/isValidPercentageUnit';
+import { getElementDimension } from '../utils/getElementDimension';
 export const inlinePlayerClassName = 'media-card-inline-player';
 export const getPreferredVideoArtifact = fileState => {
   if (fileState.status === 'processed' || fileState.status === 'processing') {
@@ -29,6 +33,8 @@ export class InlinePlayerBase extends Component {
 
     _defineProperty(this, "state", {});
 
+    _defineProperty(this, "divRef", /*#__PURE__*/React.createRef());
+
     _defineProperty(this, "setFileSrc", fileSrc => {
       this.setState({
         fileSrc
@@ -93,9 +99,31 @@ export class InlinePlayerBase extends Component {
         viewingLevel: 'full'
       });
     });
+
+    _defineProperty(this, "saveElementWidth", () => {
+      const {
+        dimensions
+      } = this.props;
+
+      if (!dimensions) {
+        return;
+      }
+
+      const {
+        width
+      } = dimensions;
+
+      if (width && isValidPercentageUnit(width) && !!this.divRef.current) {
+        const elementWidth = getElementDimension(this.divRef.current, 'width');
+        this.setState({
+          elementWidth
+        });
+      }
+    });
   }
 
   componentDidMount() {
+    this.saveElementWidth();
     const {
       mediaClient,
       identifier
@@ -110,6 +138,17 @@ export class InlinePlayerBase extends Component {
       collectionName
     }).subscribe({
       next: async fileState => {
+        if (fileState.status === 'uploading') {
+          this.setState({
+            isUploading: true,
+            progress: fileState.progress
+          });
+        } else {
+          this.setState({
+            isUploading: false
+          });
+        }
+
         const {
           fileSrc: existingFileSrc
         } = this.state; // we want to reuse the existing fileSrc to prevent re renders
@@ -163,6 +202,11 @@ export class InlinePlayerBase extends Component {
     this.revoke();
   }
 
+  get breakpoint() {
+    const width = this.state.elementWidth || (this.props.dimensions ? this.props.dimensions.width : '') || defaultImageCardDimensions.width;
+    return calcBreakpointSize(parseInt(`${width}`, 10));
+  }
+
   render() {
     const {
       onClick,
@@ -171,10 +215,13 @@ export class InlinePlayerBase extends Component {
       selected,
       testId,
       identifier,
-      forwardRef
+      forwardRef,
+      autoplay
     } = this.props;
     const {
-      fileSrc
+      fileSrc,
+      isUploading,
+      progress
     } = this.state;
 
     if (!fileSrc) {
@@ -195,7 +242,7 @@ export class InlinePlayerBase extends Component {
       type: "video",
       src: fileSrc,
       fileId: identifier.id,
-      isAutoPlay: true,
+      isAutoPlay: autoplay,
       isHDAvailable: false,
       onDownloadClick: this.onDownloadClick,
       onFirstPlay: this.onFirstPlay,
@@ -204,7 +251,12 @@ export class InlinePlayerBase extends Component {
       },
       originalDimensions: originalDimensions,
       showControls: checkMouseMovement
-    })));
+    })), isUploading ? /*#__PURE__*/React.createElement(ProgressBar, {
+      progress: progress,
+      breakpoint: this.breakpoint,
+      positionBottom: true,
+      showOnTop: true
+    }) : null);
   }
 
 }

package/dist/es2019/root/styled.js

@@ -42,4 +42,5 @@ export const InlinePlayerWrapper = styled.div`
     height: 100%;
   }
 `;
-InlinePlayerWrapper.displayName = 'InlinePlayerWrapper';
+InlinePlayerWrapper.displayName = 'InlinePlayerWrapper';
+export const FormattedMessageWrapper = styled.span``;

package/dist/es2019/root/ui/common.js

@@ -1,4 +1,10 @@
-import { Breakpoint } from './Breakpoint';
+export let Breakpoint;
+
+(function (Breakpoint) {
+  Breakpoint["SMALL"] = "small";
+  Breakpoint["LARGE"] = "large";
+})(Breakpoint || (Breakpoint = {}));
+
 export const responsiveSettings = {
   [Breakpoint.SMALL]: {
     fontSize: 11,

package/dist/es2019/root/ui/iconMessage/index.js

@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { IconMessageWrapper } from './styled';
 import { messages } from '@atlaskit/media-ui';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessageWrapper } from '../../styled';
 export const IconMessage = ({
   messageDescriptor,
   animated = false,
@@ -11,7 +12,7 @@ export const IconMessage = ({
   return /*#__PURE__*/React.createElement(IconMessageWrapper, {
     animated: animated,
     reducedFont: reducedFont
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messageDescriptor));
+  }, /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messageDescriptor)));
 };
 export const CreatingPreview = ({
   disableAnimation

package/dist/es2019/root/ui/imageRenderer/imageRenderer.js

@@ -10,7 +10,9 @@ export const ImageRenderer = ({
   onImageLoad,
   onImageError,
   onDisplayImage,
-  mediaType
+  mediaType,
+  nativeLazyLoad,
+  forceSyncDisplay
 }) => {
   useEffect(() => {
     // TODO: trigger accordingly with the succeeded event. This could be a breaking change
@@ -23,6 +25,8 @@ export const ImageRenderer = ({
     alt: alt,
     previewOrientation: previewOrientation,
     onImageLoad: onImageLoad,
-    onImageError: onImageError
+    onImageError: onImageError,
+    loading: nativeLazyLoad ? 'lazy' : undefined,
+    forceSyncDisplay: forceSyncDisplay
   }, resizeModeToMediaImageProps(resizeMode)));
 };

package/dist/es2019/root/ui/loadingRateLimited/loadingRateLimited.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import { errorIcon } from '@atlaskit/media-ui/errorIcon';
 import { WarningIconWrapper, LoadingRateLimitedContainer, CouldntLoadWrapper, ErrorWrapper, LoadingRateLimitedTextWrapper } from './styled';
+import { FormattedMessageWrapper } from '../../styled';
 import { messages } from '@atlaskit/media-ui';
-import { FormattedMessage } from 'react-intl';
-import { Breakpoint } from '../Breakpoint';
+import { FormattedMessage } from 'react-intl-next';
+import { Breakpoint } from '../common';
 export const LoadingRateLimited = ({
   breakpoint = Breakpoint.SMALL,
   positionBottom = true
@@ -11,5 +12,5 @@ export const LoadingRateLimited = ({
   return /*#__PURE__*/React.createElement(LoadingRateLimitedContainer, null, /*#__PURE__*/React.createElement(WarningIconWrapper, null, errorIcon), /*#__PURE__*/React.createElement(LoadingRateLimitedTextWrapper, {
     breakpoint: breakpoint,
     positionBottom: positionBottom
-  }, /*#__PURE__*/React.createElement(CouldntLoadWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.couldnt_load_file)), /*#__PURE__*/React.createElement(ErrorWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.error_429))));
+  }, /*#__PURE__*/React.createElement(CouldntLoadWrapper, null, /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.couldnt_load_file))), /*#__PURE__*/React.createElement(ErrorWrapper, null, /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.error_429)))));
 };

package/dist/es2019/root/ui/loadingRateLimited/styled.js

@@ -31,7 +31,7 @@ export const LoadingRateLimitedTextWrapper = styled.div`
     display: block;
     width:100%;
     text-align:center;
-    ${generateResponsiveStyles(breakpoint, positionBottom, 1)}
+    ${generateResponsiveStyles(breakpoint, positionBottom, false, 1)}
   `}
 `;
 LoadingRateLimitedTextWrapper.displayName = 'LoadingRateLimitedTextWrapper';

package/dist/es2019/root/ui/progressBar/progressBar.js

@@ -1,15 +1,17 @@
 import React from 'react';
 import { StyledBar } from './styled';
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint } from '../common';
 export const ProgressBar = ({
   progress,
   breakpoint = Breakpoint.SMALL,
-  positionBottom = false
+  positionBottom = false,
+  showOnTop = false
 }) => {
   const normalizedProgress = Math.min(1, Math.max(0, progress || 0)) * 100;
   return /*#__PURE__*/React.createElement(StyledBar, {
     progress: normalizedProgress,
     breakpoint: breakpoint,
-    positionBottom: positionBottom
+    positionBottom: positionBottom,
+    showOnTop: showOnTop
   });
 };

package/dist/es2019/root/ui/progressBar/styled.js

@@ -2,8 +2,7 @@ import styled from 'styled-components';
 import { borderRadius } from '@atlaskit/media-ui';
 import { rgba } from '../../../styles/mixins';
 import { N0, N400 } from '@atlaskit/theme/colors';
-import { getTitleBoxHeight, responsiveSettings } from '../common';
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint, getTitleBoxHeight, responsiveSettings } from '../common';
 const height = 3;
 const padding = 1;
 const width = 95; // %
@@ -16,19 +15,20 @@ const smallSizeSettings = {
 const largeSizeSettings = {
   marginBottom: 12
 };
-export function generateResponsiveStyles(breakpoint, positionBottom, multiplier = 1) {
+export function generateResponsiveStyles(breakpoint, positionBottom, showOnTop, multiplier = 1) {
   const setting = breakpoint === Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
   const marginPositionBottom = responsiveSettings[breakpoint].titleBox.verticalPadding;
   const marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : getTitleBoxHeight(breakpoint));
   return `
-    bottom: ${marginBottom}px
+    ${showOnTop ? 'top' : 'bottom'}: ${marginBottom}px
   `;
 }
 export const StyledBar = styled.div`
   ${({
   progress,
   breakpoint,
-  positionBottom
+  positionBottom,
+  showOnTop
 }) => `
     ${borderRadius}
     overflow: hidden;
@@ -38,6 +38,7 @@ export const StyledBar = styled.div`
     background-color: ${rgba(N0, 0.8)};
     height: ${height + padding * 2}px;
     padding: ${padding}px;
+    box-sizing: border-box;
 
     ::before {
       content: '';
@@ -48,7 +49,7 @@ export const StyledBar = styled.div`
       display: block;
     }
 
-    ${generateResponsiveStyles(breakpoint, positionBottom)}
+    ${generateResponsiveStyles(breakpoint, positionBottom, showOnTop)}
 `}
 `;
 StyledBar.displayName = 'StyledProgressBar';

package/dist/es2019/root/ui/styled.js

@@ -1,11 +1,30 @@
 import styled from 'styled-components';
 import { getCSSUnitValue } from '../../utils/getCSSUnitValue';
 import { getDefaultCardDimensions } from '../../utils/cardDimensions';
+import { fontFamily } from '@atlaskit/theme/constants';
+import { borderRadius } from '@atlaskit/media-ui';
+import { N20, N60A } from '@atlaskit/theme/colors';
+import { akEditorSelectedBoxShadow } from '@atlaskit/editor-shared-styles/consts';
 import { hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
+import { transition } from '../../styles';
 import { tickBoxClassName, tickboxFixedStyles } from './tickBox/styled';
+import { fixedBlanketStyles, blanketClassName } from './blanket/styled';
 import { fixedActionBarStyles, actionsBarClassName } from './actionsBar/styled';
 import { fixedPlayButtonStyles, playButtonClassName } from './playButton/styled';
-import { SSRFileExperienceWrapper } from './styledSSR';
+import { Breakpoint, responsiveSettings } from './common';
+const breakpointSizes = [[Breakpoint.SMALL, 599], [Breakpoint.LARGE, Infinity]];
+export const calcBreakpointSize = (wrapperWidth = 0) => {
+  const [breakpoint] = breakpointSizes.find(([_breakpoint, limit]) => wrapperWidth <= limit) || [Breakpoint.SMALL];
+  return breakpoint;
+};
+
+const generateResponsiveStyles = (breakpoint = Breakpoint.SMALL) => {
+  const setting = responsiveSettings[breakpoint];
+  return `
+    font-size: ${setting.fontSize}px;
+    line-height: ${setting.lineHeight}px;
+  `;
+};
 
 const getWrapperDimensions = (dimensions, appearance) => {
   const {
@@ -22,8 +41,19 @@ const getWrapperDimensions = (dimensions, appearance) => {
     height: ${getCSSUnitValue(height || defaultHeight)};
     max-height: 100%;
   `;
+}; // This is a trick to simulate the blue border without affecting the dimensions.
+// CSS outline has no 'radius', therefore we can't achieve the same effect with it
+
+
+const getWrapperShadow = (disableOverlay, selected) => {
+  const withOverlayShadow = !disableOverlay ? `0 1px 1px ${N60A}, 0 0 1px 0 ${N60A}` : '';
+  const selectedShadow = selected ? akEditorSelectedBoxShadow : '';
+  const shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
+  return shadow ? `box-shadow: ${shadow};` : '';
 };
 
+const getCursorStyle = shouldUsePointerCursor => `cursor: ${shouldUsePointerCursor ? 'pointer' : 'default'};`;
+
 const getClickablePlayButtonStyles = isPlayButtonClickable => {
   if (!isPlayButtonClickable) {
     return '';
@@ -48,26 +78,57 @@ const getSelectableTickBoxStyles = isTickBoxSelectable => {
   `;
 };
 
-export const NewFileExperienceWrapper = styled(SSRFileExperienceWrapper)`
+export const NewFileExperienceWrapper = styled.div`
   ${({
+  breakpoint,
   dimensions,
   appearance,
+  shouldUsePointerCursor,
+  disableOverlay,
+  displayBackground,
+  selected,
   isPlayButtonClickable,
   isTickBoxSelectable,
   shouldDisplayTooltip
 }) => `
+    ${transition()}
+    box-sizing: border-box;
+    * {
+      box-sizing: border-box;
+    }
+    position: relative;
+    font-family: ${fontFamily()};
+    ${getWrapperDimensions(dimensions, appearance)}
+    ${displayBackground ? `background-color: ${N20};` : ''}
+    ${borderRadius}
+    ${getCursorStyle(shouldUsePointerCursor)}
+    ${getWrapperShadow(disableOverlay, selected)}
+    ${generateResponsiveStyles(breakpoint)}
     ${hideNativeBrowserTextSelectionStyles}
 
     /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */
     ${getClickablePlayButtonStyles(isPlayButtonClickable)}
     ${getSelectableTickBoxStyles(isTickBoxSelectable)}
+    &:hover .${blanketClassName} {
+      ${fixedBlanketStyles}
+    }
 
     &:hover .${actionsBarClassName} {
       ${fixedActionBarStyles}
     }
 
     /* Tooltip does not support percentage dimensions. We enforce them here */
-    ${shouldDisplayTooltip ? `> div { ${getWrapperDimensions(dimensions, appearance)} }` : ''}
+    ${shouldDisplayTooltip ? `> div { width: 100%; height: 100% }` : ''}
 `}
 `;
-NewFileExperienceWrapper.displayName = 'NewFileExperienceWrapper';
+NewFileExperienceWrapper.displayName = 'NewFileExperienceWrapper';
+export const CardImageContainer = styled.div`
+  display: flex;
+  position: relative;
+  max-width: 100%;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  ${borderRadius}
+`;

package/dist/es2019/root/ui/titleBox/failedTitleBox.js

@@ -3,7 +3,8 @@ import { TitleBoxWrapper, ErrorMessageWrapper } from './styled';
 import EditorWarningIcon from '@atlaskit/icon/glyph/editor/warning';
 import { messages } from '@atlaskit/media-ui';
 import { R300 } from '@atlaskit/theme/colors';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessageWrapper } from '../../styled';
 export const FailedTitleBox = ({
   breakpoint,
   customMessage = messages.failed_to_load
@@ -14,5 +15,5 @@ export const FailedTitleBox = ({
     label: 'Warning',
     size: 'small',
     primaryColor: R300
-  }), /*#__PURE__*/React.createElement(FormattedMessage, customMessage)));
+  }), /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, customMessage))));
 };

package/dist/es2019/root/ui/titleBox/styled.js

@@ -1,6 +1,5 @@
 import styled from 'styled-components';
-import { responsiveSettings, getTitleBoxHeight } from '../common';
-import { Breakpoint } from '../Breakpoint';
+import { responsiveSettings, getTitleBoxHeight, Breakpoint } from '../common';
 import { N0 } from '@atlaskit/theme/colors';
 import { rgba } from '../../../styles/mixins';
 

package/dist/es2019/root/ui/titleBox/titleBox.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import LockFilledIcon from '@atlaskit/icon/glyph/lock-filled';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { TitleBoxWrapper, TitleBoxHeader, TitleBoxFooter, TitleBoxIcon } from './styled';
 import { Truncate } from '@atlaskit/media-ui/truncateText';
 import { formatDate } from '@atlaskit/media-ui/formatDate';

package/dist/es2019/utils/cardActions/cardActionsDropdownMenu.js

@@ -57,14 +57,18 @@ export class CardActionsDropdownMenu extends Component {
 
     if (actions.length > 0) {
       return /*#__PURE__*/React.createElement(DropdownMenu, {
-        "data-testid": "media-card-actions-menu",
+        testId: "media-card-actions-menu",
         onOpenChange: onOpenChange,
-        trigger: /*#__PURE__*/React.createElement(CardActionButtonWithAnalytics, {
+        trigger: ({
+          triggerRef,
+          ...providedProps
+        }) => /*#__PURE__*/React.createElement(CardActionButtonWithAnalytics, _extends({
           variant: triggerVariant,
           style: {
             color: triggerColor
-          }
-        }, /*#__PURE__*/React.createElement(MoreIcon, {
+          },
+          ref: triggerRef
+        }, providedProps), /*#__PURE__*/React.createElement(MoreIcon, {
           label: "more"
         }))
       }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, actions.map(createDropdownItemWithAnalytics)));

package/dist/es2019/utils/getErrorMessage.js

@@ -1,4 +1,4 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui';
 export const getErrorMessage = status => status === 'error' && /*#__PURE__*/React.createElement(FormattedMessage, messages.failed_to_load);

package/dist/es2019/utils/viewportDetector.js

@@ -1,5 +1,25 @@
-import React, { useEffect } from 'react';
-import { LazyContent } from './lazyContent';
+import React, { useEffect, forwardRef } from 'react';
+/**
+ * As IntersectionObserver::rootMargin doesn't work within IFrames, we use an empty div + dynamic offsetTop to eagerly detect cards entering viewport.
+ * Using this approach, we can lazy load cards ABS_VIEWPORT_ANCHOR_OFFSET_TOP px before they enter viewport.
+ */
+
+export const ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900; //px
+
+export const ViewportAnchor = /*#__PURE__*/forwardRef((props, ref) => {
+  if (typeof IntersectionObserver === 'undefined') {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: "media-card-viewport-anchor",
+    style: {
+      position: 'absolute',
+      top: `${props.offsetTop}px`
+    }
+  });
+});
 
 const createIntersectionObserverCallback = onVisible => (entries, observer) => {
   for (let entry of entries) {
@@ -11,31 +31,41 @@ const createIntersectionObserverCallback = onVisible => (entries, observer) => {
   }
 };
 
-const Observer = ({
+const ViewportObserver = ({
   onVisible,
+  cardEl,
   children,
-  targetRef
+  preAnchorRef,
+  postAnchorRef
 }) => {
   useEffect(() => {
     // IntersectionObserver uses root and target elements to detect intersections, defaulting root to the viewport
     const intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisible));
-    targetRef && intersectionObserver.observe(targetRef);
+    (preAnchorRef === null || preAnchorRef === void 0 ? void 0 : preAnchorRef.current) && intersectionObserver.observe(preAnchorRef.current);
+    (postAnchorRef === null || postAnchorRef === void 0 ? void 0 : postAnchorRef.current) && intersectionObserver.observe(postAnchorRef.current);
+    cardEl && intersectionObserver.observe(cardEl);
     return () => {
       intersectionObserver.disconnect();
     };
-  }, [targetRef, onVisible]);
+  }, [cardEl, preAnchorRef, postAnchorRef, onVisible]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 };
 
-export const createViewportDetector = isIntersectionObserverSupported => ({
-  children,
-  targetRef,
-  onVisible
-}) => isIntersectionObserverSupported ? /*#__PURE__*/React.createElement(Observer, {
-  targetRef: targetRef,
-  onVisible: onVisible
-}, children) : /*#__PURE__*/React.createElement(LazyContent, {
-  placeholder: /*#__PURE__*/React.createElement(React.Fragment, null, children),
-  onRender: onVisible
-}, children);
-export const ViewportDetector = createViewportDetector(typeof IntersectionObserver !== 'undefined');
+export const ViewportDetector = ({
+  cardEl,
+  preAnchorRef,
+  postAnchorRef,
+  onVisible,
+  children
+}) => {
+  if (typeof IntersectionObserver === 'undefined') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }
+
+  return /*#__PURE__*/React.createElement(ViewportObserver, {
+    cardEl: cardEl,
+    preAnchorRef: preAnchorRef,
+    postAnchorRef: postAnchorRef,
+    onVisible: onVisible
+  }, children);
+};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "72.0.0",
+	"version": "73.1.1",
 	"sideEffects": false
 }

package/dist/esm/actions.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 export function attachDetailsToActions(actions, details) {
   return actions.map(function (action) {

package/dist/esm/errors.js

@@ -1,3 +1,4 @@
+import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/inherits";
@@ -32,7 +33,7 @@ export var MediaCardError = /*#__PURE__*/function (_Error) {
     return _this;
   }
 
-  return MediaCardError;
+  return _createClass(MediaCardError);
 }( /*#__PURE__*/_wrapNativeSuper(Error));
 export var LocalPreviewError = /*#__PURE__*/function (_MediaCardError) {
   _inherits(LocalPreviewError, _MediaCardError);
@@ -50,7 +51,7 @@ export var LocalPreviewError = /*#__PURE__*/function (_MediaCardError) {
     return _this2;
   }
 
-  return LocalPreviewError;
+  return _createClass(LocalPreviewError);
 }(MediaCardError);
 export var RemotePreviewError = /*#__PURE__*/function (_MediaCardError2) {
   _inherits(RemotePreviewError, _MediaCardError2);
@@ -68,7 +69,25 @@ export var RemotePreviewError = /*#__PURE__*/function (_MediaCardError2) {
     return _this3;
   }
 
-  return RemotePreviewError;
+  return _createClass(RemotePreviewError);
+}(MediaCardError);
+export var SsrPreviewError = /*#__PURE__*/function (_MediaCardError3) {
+  _inherits(SsrPreviewError, _MediaCardError3);
+
+  var _super4 = _createSuper(SsrPreviewError);
+
+  function SsrPreviewError(primaryReason, secondaryError) {
+    var _this4;
+
+    _classCallCheck(this, SsrPreviewError);
+
+    _this4 = _super4.call(this, primaryReason, secondaryError);
+    _this4.primaryReason = primaryReason;
+    _this4.secondaryError = secondaryError;
+    return _this4;
+  }
+
+  return _createClass(SsrPreviewError);
 }(MediaCardError);
 export var getImageLoadPrimaryReason = function getImageLoadPrimaryReason(source) {
   switch (source) {
@@ -92,18 +111,18 @@ export var getImageLoadPrimaryReason = function getImageLoadPrimaryReason(source
       return "unknown-uri";
   }
 };
-export var ImageLoadError = /*#__PURE__*/function (_MediaCardError3) {
-  _inherits(ImageLoadError, _MediaCardError3);
+export var ImageLoadError = /*#__PURE__*/function (_MediaCardError4) {
+  _inherits(ImageLoadError, _MediaCardError4);
 
-  var _super4 = _createSuper(ImageLoadError);
+  var _super5 = _createSuper(ImageLoadError);
 
   function ImageLoadError(source) {
     _classCallCheck(this, ImageLoadError);
 
-    return _super4.call(this, getImageLoadPrimaryReason(source));
+    return _super5.call(this, getImageLoadPrimaryReason(source));
   }
 
-  return ImageLoadError;
+  return _createClass(ImageLoadError);
 }(MediaCardError);
 export function isMediaCardError(err) {
   return err instanceof MediaCardError;
@@ -126,5 +145,5 @@ export var ensureMediaCardError = function ensureMediaCardError(primaryReason, e
   return isMediaCardError(error) ? error : new MediaCardError(primaryReason, error);
 };
 export var isUploadError = function isUploadError(error) {
-  return error.primaryReason === 'upload';
+  return error && error.primaryReason === 'upload';
 };

package/dist/esm/root/card/cardAnalytics.js

@@ -1,5 +1,5 @@
 import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
-export var relevantFeatureFlagNames = ['newCardExperience', 'captions'];
+export var relevantFeatureFlagNames = ['newCardExperience', 'captions', 'timestampOnVideo'];
 export var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, error) {
   var fireEvent = function fireEvent(payload) {
     return fireMediaCardEvent(payload, createAnalyticsEvent);