@atlaskit/media-card 72.0.0 → 73.1.1

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

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CardActionsDropdownMenu = void 0;
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -33,6 +35,8 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _analytics = require("../analytics");
 
+var _excluded = ["triggerRef"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -103,16 +107,21 @@ var CardActionsDropdownMenu = /*#__PURE__*/function (_Component) {
 
       if (actions.length > 0) {
         return /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
-          "data-testid": "media-card-actions-menu",
+          testId: "media-card-actions-menu",
           onOpenChange: onOpenChange,
-          trigger: /*#__PURE__*/_react.default.createElement(CardActionButtonWithAnalytics, {
-            variant: triggerVariant,
-            style: {
-              color: triggerColor
-            }
-          }, /*#__PURE__*/_react.default.createElement(_more.default, {
-            label: "more"
-          }))
+          trigger: function trigger(_ref) {
+            var triggerRef = _ref.triggerRef,
+                providedProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+            return /*#__PURE__*/_react.default.createElement(CardActionButtonWithAnalytics, (0, _extends2.default)({
+              variant: triggerVariant,
+              style: {
+                color: triggerColor
+              },
+              ref: triggerRef
+            }, providedProps), /*#__PURE__*/_react.default.createElement(_more.default, {
+              label: "more"
+            }));
+          }
         }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, null, actions.map(createDropdownItemWithAnalytics)));
       } else {
         return null;

package/dist/cjs/utils/cardActions/index.js

@@ -3,34 +3,34 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "CardActionIconButton", {
   enumerable: true,
   get: function get() {
-    return _cardActionsView.CardActionsView;
+    return _cardActionIconButton.CardActionIconButton;
   }
 });
-Object.defineProperty(exports, "CardActionsView", {
+Object.defineProperty(exports, "CardActionIconButtonVariant", {
   enumerable: true,
   get: function get() {
-    return _cardActionsView.CardActionsView;
+    return _styled.CardActionIconButtonVariant;
   }
 });
-Object.defineProperty(exports, "CardActionIconButton", {
+Object.defineProperty(exports, "CardActionsDropdownMenu", {
   enumerable: true,
   get: function get() {
-    return _cardActionIconButton.CardActionIconButton;
+    return _cardActionsDropdownMenu.CardActionsDropdownMenu;
   }
 });
-Object.defineProperty(exports, "CardActionsDropdownMenu", {
+Object.defineProperty(exports, "CardActionsView", {
   enumerable: true,
   get: function get() {
-    return _cardActionsDropdownMenu.CardActionsDropdownMenu;
+    return _cardActionsView.CardActionsView;
   }
 });
-Object.defineProperty(exports, "CardActionIconButtonVariant", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _styled.CardActionIconButtonVariant;
+    return _cardActionsView.CardActionsView;
   }
 });
 

package/dist/cjs/utils/cardActions/styled.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CardActionButton = exports.CardActionIconButtonVariant = exports.Wrapper = void 0;
+exports.Wrapper = exports.CardActionIconButtonVariant = exports.CardActionButton = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

package/dist/cjs/utils/cardDimensions.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getDefaultCardDimensions = exports.getCardMaxWidth = exports.getCardMinWidth = exports.getCardMaxHeight = exports.maxSquareCardDimensions = exports.maxHorizontalCardDimensions = exports.maxImageCardDimensions = exports.minHorizontalCardDimensions = exports.minSquareCardDimensions = exports.minImageCardDimensions = exports.minSmallCardDimensions = exports.defaultSquareCardDimensions = exports.defaultHorizontalCardDimensions = exports.defaultImageCardDimensions = exports.defaultSmallCardDimensions = void 0;
+exports.minSquareCardDimensions = exports.minSmallCardDimensions = exports.minImageCardDimensions = exports.minHorizontalCardDimensions = exports.maxSquareCardDimensions = exports.maxImageCardDimensions = exports.maxHorizontalCardDimensions = exports.getDefaultCardDimensions = exports.getCardMinWidth = exports.getCardMaxWidth = exports.getCardMaxHeight = exports.defaultSquareCardDimensions = exports.defaultSmallCardDimensions = exports.defaultImageCardDimensions = exports.defaultHorizontalCardDimensions = void 0;
 // Default dimensions
 var defaultSmallCardDimensions = {
   width: '100%',

package/dist/cjs/utils/getErrorMessage.js

@@ -9,12 +9,12 @@ exports.getErrorMessage = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _mediaUi = require("@atlaskit/media-ui");
 
 var getErrorMessage = function getErrorMessage(status) {
-  return status === 'error' && /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.failed_to_load);
+  return status === 'error' && /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.failed_to_load);
 };
 
 exports.getErrorMessage = getErrorMessage;

package/dist/cjs/utils/index.js

@@ -5,6 +5,24 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "CardActionIconButton", {
+  enumerable: true,
+  get: function get() {
+    return _cardActions.CardActionIconButton;
+  }
+});
+Object.defineProperty(exports, "CardActionsDropdownMenu", {
+  enumerable: true,
+  get: function get() {
+    return _cardActions.CardActionsDropdownMenu;
+  }
+});
+Object.defineProperty(exports, "CardActionsView", {
+  enumerable: true,
+  get: function get() {
+    return _cardActions.CardActionsView;
+  }
+});
 Object.defineProperty(exports, "ErrorIcon", {
   enumerable: true,
   get: function get() {
@@ -17,34 +35,34 @@ Object.defineProperty(exports, "FileIcon", {
     return _fileIcon.FileIcon;
   }
 });
-Object.defineProperty(exports, "CardActionIconButton", {
+Object.defineProperty(exports, "breakpointSize", {
   enumerable: true,
   get: function get() {
-    return _cardActions.CardActionIconButton;
+    return _breakpoint.breakpointSize;
   }
 });
-Object.defineProperty(exports, "CardActionsDropdownMenu", {
+Object.defineProperty(exports, "breakpointStyles", {
   enumerable: true,
   get: function get() {
-    return _cardActions.CardActionsDropdownMenu;
+    return _breakpoint.breakpointStyles;
   }
 });
-Object.defineProperty(exports, "CardActionsView", {
+Object.defineProperty(exports, "cardBreakpointSizes", {
   enumerable: true,
   get: function get() {
-    return _cardActions.CardActionsView;
+    return _breakpoint.cardBreakpointSizes;
   }
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "containsPixelUnit", {
   enumerable: true,
   get: function get() {
-    return _cardActions.default;
+    return _containsPixelUnit.containsPixelUnit;
   }
 });
-Object.defineProperty(exports, "isRetina", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _isRetina.isRetina;
+    return _cardActions.default;
   }
 });
 Object.defineProperty(exports, "defaultHorizontalCardDimensions", {
@@ -95,6 +113,24 @@ Object.defineProperty(exports, "getDefaultCardDimensions", {
     return _cardDimensions.getDefaultCardDimensions;
   }
 });
+Object.defineProperty(exports, "getElementDimension", {
+  enumerable: true,
+  get: function get() {
+    return _getElementDimension.getElementDimension;
+  }
+});
+Object.defineProperty(exports, "isRetina", {
+  enumerable: true,
+  get: function get() {
+    return _isRetina.isRetina;
+  }
+});
+Object.defineProperty(exports, "isValidPercentageUnit", {
+  enumerable: true,
+  get: function get() {
+    return _isValidPercentageUnit.isValidPercentageUnit;
+  }
+});
 Object.defineProperty(exports, "maxHorizontalCardDimensions", {
   enumerable: true,
   get: function get() {
@@ -137,42 +173,6 @@ Object.defineProperty(exports, "minSquareCardDimensions", {
     return _cardDimensions.minSquareCardDimensions;
   }
 });
-Object.defineProperty(exports, "breakpointSize", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.breakpointSize;
-  }
-});
-Object.defineProperty(exports, "breakpointStyles", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.breakpointStyles;
-  }
-});
-Object.defineProperty(exports, "cardBreakpointSizes", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.cardBreakpointSizes;
-  }
-});
-Object.defineProperty(exports, "isValidPercentageUnit", {
-  enumerable: true,
-  get: function get() {
-    return _isValidPercentageUnit.isValidPercentageUnit;
-  }
-});
-Object.defineProperty(exports, "getElementDimension", {
-  enumerable: true,
-  get: function get() {
-    return _getElementDimension.getElementDimension;
-  }
-});
-Object.defineProperty(exports, "containsPixelUnit", {
-  enumerable: true,
-  get: function get() {
-    return _containsPixelUnit.containsPixelUnit;
-  }
-});
 
 var _errorIcon = require("./errorIcon");
 

package/dist/cjs/utils/lightCards/styled.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AnimatedWrapper = exports.Wrapper = exports.blinkLoadingAnimation = void 0;
+exports.blinkLoadingAnimation = exports.Wrapper = exports.AnimatedWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

package/dist/cjs/utils/objectURLCache.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createObjectURLCache = exports.ObjectURLCache = exports.PREVIEW_CACHE_LRU_SIZE = void 0;
+exports.createObjectURLCache = exports.PREVIEW_CACHE_LRU_SIZE = exports.ObjectURLCache = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

package/dist/cjs/utils/viewportDetector.js

@@ -5,12 +5,10 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ViewportDetector = exports.createViewportDetector = void 0;
+exports.ViewportDetector = exports.ViewportAnchor = exports.ABS_VIEWPORT_ANCHOR_OFFSET_TOP = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _lazyContent = require("./lazyContent");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -21,6 +19,29 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
+/**
+ * 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.
+ */
+var ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900; //px
+
+exports.ABS_VIEWPORT_ANCHOR_OFFSET_TOP = ABS_VIEWPORT_ANCHOR_OFFSET_TOP;
+var ViewportAnchor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  if (typeof IntersectionObserver === 'undefined') {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    className: "media-card-viewport-anchor",
+    style: {
+      position: 'absolute',
+      top: "".concat(props.offsetTop, "px")
+    }
+  });
+});
+exports.ViewportAnchor = ViewportAnchor;
+
 var createIntersectionObserverCallback = function createIntersectionObserverCallback(onVisible) {
   return function (entries, observer) {
     var _iterator = _createForOfIteratorHelper(entries),
@@ -44,36 +65,42 @@ var createIntersectionObserverCallback = function createIntersectionObserverCall
   };
 };
 
-var Observer = function Observer(_ref) {
+var ViewportObserver = function ViewportObserver(_ref) {
   var onVisible = _ref.onVisible,
+      cardEl = _ref.cardEl,
       children = _ref.children,
-      targetRef = _ref.targetRef;
+      preAnchorRef = _ref.preAnchorRef,
+      postAnchorRef = _ref.postAnchorRef;
   (0, _react.useEffect)(function () {
     // IntersectionObserver uses root and target elements to detect intersections, defaulting root to the viewport
     var 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 function () {
       intersectionObserver.disconnect();
     };
-  }, [targetRef, onVisible]);
+  }, [cardEl, preAnchorRef, postAnchorRef, onVisible]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
 };
 
-var createViewportDetector = function createViewportDetector(isIntersectionObserverSupported) {
-  return function (_ref2) {
-    var children = _ref2.children,
-        targetRef = _ref2.targetRef,
-        onVisible = _ref2.onVisible;
-    return isIntersectionObserverSupported ? /*#__PURE__*/_react.default.createElement(Observer, {
-      targetRef: targetRef,
-      onVisible: onVisible
-    }, children) : /*#__PURE__*/_react.default.createElement(_lazyContent.LazyContent, {
-      placeholder: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children),
-      onRender: onVisible
-    }, children);
-  };
+var ViewportDetector = function ViewportDetector(_ref2) {
+  var cardEl = _ref2.cardEl,
+      preAnchorRef = _ref2.preAnchorRef,
+      postAnchorRef = _ref2.postAnchorRef,
+      onVisible = _ref2.onVisible,
+      children = _ref2.children;
+
+  if (typeof IntersectionObserver === 'undefined') {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+  }
+
+  return /*#__PURE__*/_react.default.createElement(ViewportObserver, {
+    cardEl: cardEl,
+    preAnchorRef: preAnchorRef,
+    postAnchorRef: postAnchorRef,
+    onVisible: onVisible
+  }, children);
 };
 
-exports.createViewportDetector = createViewportDetector;
-var ViewportDetector = createViewportDetector(typeof IntersectionObserver !== 'undefined');
 exports.ViewportDetector = ViewportDetector;

package/dist/cjs/version.json

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

package/dist/es2019/errors.js

@@ -27,6 +27,14 @@ export class RemotePreviewError extends MediaCardError {
     this.secondaryError = secondaryError;
   }
 
+}
+export class SsrPreviewError extends MediaCardError {
+  constructor(primaryReason, secondaryError) {
+    super(primaryReason, secondaryError);
+    this.primaryReason = primaryReason;
+    this.secondaryError = secondaryError;
+  }
+
 }
 export const getImageLoadPrimaryReason = source => {
   switch (source) {
@@ -68,4 +76,4 @@ export function isImageLoadError(err) {
 // We can use this helper to ensure that the error handled is the type of MediaCardError if unsure
 
 export const ensureMediaCardError = (primaryReason, error) => isMediaCardError(error) ? error : new MediaCardError(primaryReason, error);
-export const isUploadError = error => error.primaryReason === 'upload';
+export const isUploadError = error => error && error.primaryReason === 'upload';

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

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

package/dist/es2019/root/card/cardLoader.js

@@ -1,59 +1,53 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useContext } from 'react';
+import { useMemoizeFeatureFlags } from '@atlaskit/media-common';
+import Loadable from 'react-loadable';
 import { CardLoading } from '../..';
-export default class CardLoader extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+const MediaCardContext = /*#__PURE__*/React.createContext({});
 
-    _defineProperty(this, "state", {
-      Card: CardLoader.Card,
-      MediaCardErrorBoundary: CardLoader.MediaCardErrorBoundary
-    });
-  }
+const CardLoadingWithContext = () => {
+  const props = useContext(MediaCardContext);
+  return /*#__PURE__*/React.createElement(CardLoading, props);
+};
 
-  async componentDidMount() {
-    if (!this.state.Card) {
-      try {
-        const [mediaClient, cardModule, mediaCardErrorBoundaryModule] = await Promise.all([import(
-        /* webpackChunkName: "@atlaskit-internal_media-client" */
-        '@atlaskit/media-client'), import(
-        /* webpackChunkName: "@atlaskit-internal_media-card" */
-        './index'), import(
-        /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */
-        '../media-card-analytics-error-boundary')]);
-        CardLoader.Card = mediaClient.withMediaClient(cardModule.Card, this.props.featureFlags);
-        CardLoader.MediaCardErrorBoundary = mediaCardErrorBoundaryModule.default;
-        this.setState({
-          Card: CardLoader.Card,
-          MediaCardErrorBoundary: CardLoader.MediaCardErrorBoundary
-        });
-      } catch (error) {// TODO [MS-2278]: Add operational error to catch async import error
-      }
-    }
-  }
+const MediaCard = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_media-card" */
+  './index').then(mod => mod.Card),
+  loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null)
+});
+const MediaCardErrorBoundary = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */
+  '../media-card-analytics-error-boundary').then(mod => mod.default),
+  loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null)
+});
+const MediaCardWithMediaClient = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_media-client" */
+  '@atlaskit/media-client'),
+  loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null),
+  render: (loaded, props) => /*#__PURE__*/React.createElement(CardWithMediaClient, _extends({}, props, {
+    withMediaClient: loaded.withMediaClient
+  }))
+});
 
-  render() {
-    const {
-      dimensions,
-      testId,
-      featureFlags
-    } = this.props;
-    const {
-      Card,
-      MediaCardErrorBoundary
-    } = this.state;
+const CardWithMediaClient = props => {
+  const {
+    withMediaClient,
+    featureFlags
+  } = props;
+  const memoizedFeatureFlags = useMemoizeFeatureFlags(featureFlags);
+  const Card = React.useMemo(() => {
+    return withMediaClient(MediaCard, memoizedFeatureFlags);
+  }, [withMediaClient, memoizedFeatureFlags]);
+  return /*#__PURE__*/React.createElement(MediaCardErrorBoundary, null, /*#__PURE__*/React.createElement(Card, props));
+};
 
-    if (!Card || !MediaCardErrorBoundary) {
-      return /*#__PURE__*/React.createElement(CardLoading, {
-        testId: testId,
-        dimensions: dimensions,
-        featureFlags: featureFlags
-      });
-    }
+const CardLoader = props => {
+  return /*#__PURE__*/React.createElement(MediaCardContext.Provider, {
+    value: props
+  }, /*#__PURE__*/React.createElement(MediaCardWithMediaClient, props));
+};
 
-    return /*#__PURE__*/React.createElement(MediaCardErrorBoundary, null, /*#__PURE__*/React.createElement(Card, this.props));
-  }
-
-}
-
-_defineProperty(CardLoader, "displayName", 'AsyncCard');
+export default CardLoader;

package/dist/es2019/root/card/getCardPreview/filePreviewStatus.js

@@ -31,5 +31,8 @@ export const isPreviewableStatus = (cardStatus, {
   hasPreview,
   isSupportedByBrowser
 }) => {
-  return hasPreview && isPreviewable && (cardStatus === 'complete' || cardStatus === 'loading-preview' || cardStatus === 'uploading' || cardStatus === 'processing' && isSupportedByBrowser);
+  return hasPreview && isPreviewable && (cardStatus === 'complete' || cardStatus === 'loading-preview' || cardStatus === 'uploading' || // For Video, we can have local or remote preview while processing.
+  // Then, we only want to show the thumbnail if the file is supported by the browser,
+  // this way we prevent playing unsupported videos that are not procesed
+  cardStatus === 'processing' && isSupportedByBrowser);
 };

package/dist/es2019/root/card/getCardPreview/index.js

@@ -2,7 +2,7 @@ import { isPreviewableFileState, addFileAttrsToUrl } from '@atlaskit/media-clien
 import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
 import cardPreviewCache from './cache';
 import { getCardPreviewFromFilePreview, getCardPreviewFromBackend } from './helpers';
-import { MediaCardError, isUnsupportedLocalPreviewError } from '../../../errors';
+import { MediaCardError, SsrPreviewError, isUnsupportedLocalPreviewError } from '../../../errors';
 import { isBigger } from '../../../utils/dimensionComparer';
 import { extractFilePreviewStatus, isPreviewableStatus } from './filePreviewStatus';
 export { getCardPreviewFromFilePreview, getCardPreviewFromBackend, isSupportedLocalPreview } from './helpers';
@@ -28,6 +28,14 @@ const extendAndCachePreview = (id, dimensions, preview, mediaBlobUrlAttrs) => {
       source = 'cache-remote';
       break;
 
+    case 'ssr-server':
+      source = 'cache-ssr-server';
+      break;
+
+    case 'ssr-client':
+      source = 'cache-ssr-client';
+      break;
+
     default:
       source = preview.source;
   } // We want to embed some meta context into dataURI for Copy/Paste to work.
@@ -111,8 +119,7 @@ export const getCardPreview = async ({
     throw new MediaCardError('remote-preview-not-ready');
   }
 
-  const remotePreview = await getCardPreviewFromBackend(mediaClient, id, imageUrlParams);
-  return extendAndCachePreview(id, dimensions, remotePreview, mediaBlobUrlAttrs);
+  return fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs);
 };
 export const shouldResolvePreview = ({
   status,
@@ -126,4 +133,39 @@ export const shouldResolvePreview = ({
   const statusIsPreviewable = isPreviewableStatus(status, extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags));
   const dimensionsAreBigger = isBigger(prevDimensions, dimensions);
   return statusIsPreviewable && (!hasCardPreview || dimensionsAreBigger);
+};
+export const getSSRCardPreview = (ssr, mediaClient, id, params, mediaBlobUrlAttrs) => {
+  let dataURI;
+
+  try {
+    const rawDataURI = mediaClient.getImageUrlSync(id, params); // We want to embed some meta context into dataURI for Copy/Paste to work.
+
+    dataURI = mediaBlobUrlAttrs ? addFileAttrsToUrl(rawDataURI, mediaBlobUrlAttrs) : rawDataURI;
+    const source = ssr === 'client' ? 'ssr-client' : 'ssr-server';
+    return {
+      dataURI,
+      source,
+      orientation: 1
+    };
+  } catch (e) {
+    const reason = ssr === 'server' ? 'ssr-server-uri' : 'ssr-client-uri';
+    throw new SsrPreviewError(reason, e);
+  }
+};
+export const isLocalPreview = preview => {
+  const localSources = ['local', 'cache-local'];
+  return localSources.includes(preview.source);
+};
+export const isSSRPreview = preview => isSSRClientPreview(preview) || isSSRServerPreview(preview);
+export const isSSRServerPreview = preview => {
+  const ssrClientSources = ['ssr-server', 'cache-ssr-server'];
+  return ssrClientSources.includes(preview.source);
+};
+export const isSSRClientPreview = preview => {
+  const ssrClientSources = ['ssr-client', 'cache-ssr-client'];
+  return ssrClientSources.includes(preview.source);
+};
+export const fetchAndCacheRemotePreview = async (mediaClient, id, dimensions, params, mediaBlobUrlAttrs) => {
+  const remotePreview = await getCardPreviewFromBackend(mediaClient, id, params);
+  return extendAndCachePreview(id, dimensions, remotePreview, mediaBlobUrlAttrs);
 };