@atlaskit/media-card 71.0.0 → 73.1.0

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,60 @@ 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) {
+    case 'cache-remote':
+      return 'cache-remote-uri';
+
+    case 'cache-local':
+      return 'cache-local-uri';
+
+    case 'external':
+      return 'external-uri';
+
+    case 'local':
+      return 'local-uri';
+
+    case 'remote':
+      return 'remote-uri';
+    // This fail reason will come from a bug, most likely.
+
+    default:
+      return "unknown-uri";
+  }
+};
+export var ImageLoadError = /*#__PURE__*/function (_MediaCardError4) {
+  _inherits(ImageLoadError, _MediaCardError4);
+
+  var _super5 = _createSuper(ImageLoadError);
+
+  function ImageLoadError(source) {
+    _classCallCheck(this, ImageLoadError);
+
+    return _super5.call(this, getImageLoadPrimaryReason(source));
+  }
+
+  return _createClass(ImageLoadError);
 }(MediaCardError);
 export function isMediaCardError(err) {
   return err instanceof MediaCardError;
@@ -81,9 +135,15 @@ export var isRemotePreviewError = function isRemotePreviewError(err) {
 };
 export var isUnsupportedLocalPreviewError = function isUnsupportedLocalPreviewError(err) {
   return isMediaCardError(err) && err.primaryReason === 'local-preview-unsupported';
-}; // In a try/catch statement, the error caught is the type of any.
+};
+export function isImageLoadError(err) {
+  return err instanceof ImageLoadError;
+} // In a try/catch statement, the error caught is the type of any.
 // We can use this helper to ensure that the error handled is the type of MediaCardError if unsure
 
 export var ensureMediaCardError = function ensureMediaCardError(primaryReason, error) {
   return isMediaCardError(error) ? error : new MediaCardError(primaryReason, error);
+};
+export var isUploadError = function isUploadError(error) {
+  return error && error.primaryReason === 'upload';
 };

package/dist/esm/files/cardImageView/index.js

@@ -20,20 +20,17 @@ import { CardLoading } from '../../utils/lightCards/cardLoading';
 import { shouldDisplayImageThumbnail } from '../../utils/shouldDisplayImageThumbnail';
 import { ProgressBar } from '../../utils/progressBar';
 import CardActions from '../../utils/cardActions';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { fireMediaCardEvent, RenderEventAction, getRenderSucceededEventPayload, getRenderFailedFileUriPayload, getRenderFailedExternalUriPayload } from '../../utils/analytics';
-import { withFileAttributes } from '../../utils/fileAttributesContext';
 export var fileCardImageViewSelector = 'media-file-card-view';
 export var fileCardImageViewSelectedSelector = 'media-file-card-view-selected';
-export var FileCardImageViewBase = /*#__PURE__*/function (_Component) {
-  _inherits(FileCardImageViewBase, _Component);
+export var FileCardImageView = /*#__PURE__*/function (_Component) {
+  _inherits(FileCardImageView, _Component);
 
-  var _super = _createSuper(FileCardImageViewBase);
+  var _super = _createSuper(FileCardImageView);
 
-  function FileCardImageViewBase() {
+  function FileCardImageView() {
     var _this;
 
-    _classCallCheck(this, FileCardImageViewBase);
+    _classCallCheck(this, FileCardImageView);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -159,60 +156,18 @@ export var FileCardImageViewBase = /*#__PURE__*/function (_Component) {
       })));
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onImageLoad", function () {
-      var _this$props6 = _this.props,
-          createAnalyticsEvent = _this$props6.createAnalyticsEvent,
-          fileAttributes = _this$props6.fileAttributes,
-          timeElapsedTillCommenced = _this$props6.timeElapsedTillCommenced;
-
-      if (fileAttributes && _this.shouldFireEvent(RenderEventAction.SUCCEEDED)) {
-        var timeElapsedTillSucceeded = performance.now();
-        var durationSinceCommenced = timeElapsedTillCommenced && timeElapsedTillSucceeded - timeElapsedTillCommenced;
-        var performanceAttributes = {
-          overall: {
-            durationSincePageStart: timeElapsedTillSucceeded,
-            durationSinceCommenced: durationSinceCommenced
-          }
-        };
-        fireMediaCardEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes), createAnalyticsEvent);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onImageError", function () {
-      var fileAttributes = _this.props.fileAttributes;
-
-      if (fileAttributes && _this.shouldFireEvent(RenderEventAction.FAILED)) {
-        var _this$props7 = _this.props,
-            createAnalyticsEvent = _this$props7.createAnalyticsEvent,
-            mediaItemType = _this$props7.mediaItemType,
-            timeElapsedTillCommenced = _this$props7.timeElapsedTillCommenced;
-        var timeElapsedTillFailed = performance.now();
-        var durationSinceCommenced = timeElapsedTillCommenced && timeElapsedTillFailed - timeElapsedTillCommenced;
-        var performanceAttributes = {
-          overall: {
-            durationSincePageStart: timeElapsedTillFailed,
-            durationSinceCommenced: durationSinceCommenced
-          }
-        };
-
-        if (mediaItemType === 'file') {
-          fireMediaCardEvent(getRenderFailedFileUriPayload(fileAttributes, performanceAttributes), createAnalyticsEvent);
-        } else if (mediaItemType === 'external-image') {
-          fireMediaCardEvent(getRenderFailedExternalUriPayload(fileAttributes, performanceAttributes), createAnalyticsEvent);
-        }
-      }
-    });
-
     _defineProperty(_assertThisInitialized(_this), "renderMediaImage", function () {
-      var _this$props8 = _this.props,
-          status = _this$props8.status,
-          mediaItemType = _this$props8.mediaItemType,
-          dataURI = _this$props8.dataURI,
-          mediaType = _this$props8.mediaType,
-          mimeType = _this$props8.mimeType,
-          previewOrientation = _this$props8.previewOrientation,
-          onDisplayImage = _this$props8.onDisplayImage,
-          alt = _this$props8.alt;
+      var _this$props6 = _this.props,
+          status = _this$props6.status,
+          mediaItemType = _this$props6.mediaItemType,
+          dataURI = _this$props6.dataURI,
+          mediaType = _this$props6.mediaType,
+          mimeType = _this$props6.mimeType,
+          previewOrientation = _this$props6.previewOrientation,
+          onDisplayImage = _this$props6.onDisplayImage,
+          alt = _this$props6.alt,
+          onImageLoad = _this$props6.onImageLoad,
+          onImageError = _this$props6.onImageError;
 
       if (!shouldDisplayImageThumbnail(status, mediaItemType, dataURI, mediaType, mimeType)) {
         return null;
@@ -229,21 +184,17 @@ export var FileCardImageViewBase = /*#__PURE__*/function (_Component) {
         crop: _this.isCropped,
         stretch: _this.isStretched,
         previewOrientation: previewOrientation,
-        onImageLoad: _this.onImageLoad,
-        onImageError: _this.onImageError
+        onImageLoad: onImageLoad,
+        onImageError: onImageError
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "shouldFireEvent", function (action) {
-      return !_this.lastAnalyticsAction || _this.lastAnalyticsAction !== action;
-    });
-
     _defineProperty(_assertThisInitialized(_this), "renderProgressBar", function () {
-      var _this$props9 = _this.props,
-          mediaName = _this$props9.mediaName,
-          progress = _this$props9.progress,
-          actions = _this$props9.actions,
-          status = _this$props9.status;
+      var _this$props7 = _this.props,
+          mediaName = _this$props7.mediaName,
+          progress = _this$props7.progress,
+          actions = _this$props7.actions,
+          status = _this$props7.status;
 
       if (status !== 'uploading') {
         return null;
@@ -262,10 +213,10 @@ export var FileCardImageViewBase = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderSuccessCardContents", function () {
-      var _this$props10 = _this.props,
-          disableOverlay = _this$props10.disableOverlay,
-          selectable = _this$props10.selectable,
-          status = _this$props10.status;
+      var _this$props8 = _this.props,
+          disableOverlay = _this$props8.disableOverlay,
+          selectable = _this$props8.selectable,
+          status = _this$props8.status;
       var overlay = null;
 
       if (!disableOverlay) {
@@ -286,15 +237,15 @@ export var FileCardImageViewBase = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderSuccessCardOverlay", function () {
-      var _this$props11 = _this.props,
-          status = _this$props11.status,
-          mediaName = _this$props11.mediaName,
-          mediaType = _this$props11.mediaType,
-          fileSize = _this$props11.fileSize,
-          dataURI = _this$props11.dataURI,
-          selectable = _this$props11.selectable,
-          selected = _this$props11.selected,
-          actions = _this$props11.actions;
+      var _this$props9 = _this.props,
+          status = _this$props9.status,
+          mediaName = _this$props9.mediaName,
+          mediaType = _this$props9.mediaType,
+          fileSize = _this$props9.fileSize,
+          dataURI = _this$props9.dataURI,
+          selectable = _this$props9.selectable,
+          selected = _this$props9.selected,
+          actions = _this$props9.actions;
       var isPersistent = mediaType === 'doc' || !dataURI;
       return /*#__PURE__*/React.createElement(CardOverlay, {
         cardStatus: status,
@@ -311,17 +262,17 @@ export var FileCardImageViewBase = /*#__PURE__*/function (_Component) {
     return _this;
   }
 
-  _createClass(FileCardImageViewBase, [{
+  _createClass(FileCardImageView, [{
     key: "render",
     value: function render() {
-      var _this$props12 = this.props,
-          disableOverlay = _this$props12.disableOverlay,
-          selectable = _this$props12.selectable,
-          selected = _this$props12.selected,
-          mediaType = _this$props12.mediaType,
-          progress = _this$props12.progress,
-          status = _this$props12.status,
-          mediaName = _this$props12.mediaName;
+      var _this$props10 = this.props,
+          disableOverlay = _this$props10.disableOverlay,
+          selectable = _this$props10.selectable,
+          selected = _this$props10.selected,
+          mediaType = _this$props10.mediaType,
+          progress = _this$props10.progress,
+          status = _this$props10.status,
+          mediaName = _this$props10.mediaName;
       return /*#__PURE__*/React.createElement(Wrapper, {
         "data-testid": "media-file-card-view",
         "data-test-media-name": mediaName,
@@ -338,9 +289,9 @@ export var FileCardImageViewBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "isFileCardImageReadyForDisplay",
     get: function get() {
-      var _this$props13 = this.props,
-          dataURI = _this$props13.dataURI,
-          status = _this$props13.status;
+      var _this$props11 = this.props,
+          dataURI = _this$props11.dataURI,
+          status = _this$props11.status;
       return !!dataURI || !['loading', 'processing', 'loading-preview'].includes(status);
     }
   }, {
@@ -357,12 +308,10 @@ export var FileCardImageViewBase = /*#__PURE__*/function (_Component) {
     }
   }]);
 
-  return FileCardImageViewBase;
+  return FileCardImageView;
 }(Component);
 
-_defineProperty(FileCardImageViewBase, "defaultProps", {
+_defineProperty(FileCardImageView, "defaultProps", {
   resizeMode: 'crop',
   disableOverlay: false
-});
-
-export var FileCardImageView = withAnalyticsEvents()(withFileAttributes(FileCardImageViewBase));
+});

package/dist/esm/files/index.js

@@ -1 +1 @@
-export { FileCardImageView, FileCardImageViewBase } from './cardImageView';
+export { FileCardImageView } from './cardImageView';

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

@@ -1,25 +1,13 @@
 import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
-export var relevantFeatureFlagNames = ['newCardExperience', 'poll_intervalMs', 'poll_maxAttempts', 'poll_backoffFactor', 'poll_maxIntervalMs', 'captions'];
-export var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes) {
-  var _ref = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {},
-      cardPreview = _ref.cardPreview,
-      error = _ref.error;
-
+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);
   };
 
   switch (status) {
     case 'complete':
-      /**
-       * A Card that is considered Complete and has no preview,
-       * reflects an expected behaviour, and thus a legitimate
-       * success case to be logged.
-       */
-      if (!(cardPreview !== null && cardPreview !== void 0 && cardPreview.dataURI)) {
-        fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes));
-      }
-
+      fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes));
       break;
 
     case 'failed-processing':

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

@@ -1,129 +1,69 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-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 '../..';
-
-var CardLoader = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(CardLoader, _React$PureComponent);
-
-  var _super = _createSuper(CardLoader);
-
-  function CardLoader() {
-    var _this;
-
-    _classCallCheck(this, CardLoader);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      Card: CardLoader.Card,
-      MediaCardErrorBoundary: CardLoader.MediaCardErrorBoundary
+var MediaCardContext = /*#__PURE__*/React.createContext({});
+
+var CardLoadingWithContext = function CardLoadingWithContext() {
+  var props = useContext(MediaCardContext);
+  return /*#__PURE__*/React.createElement(CardLoading, props);
+};
+
+var MediaCard = Loadable({
+  loader: function loader() {
+    return import(
+    /* webpackChunkName: "@atlaskit-internal_media-card" */
+    './index').then(function (mod) {
+      return mod.Card;
     });
-
-    return _this;
+  },
+  loading: function loading() {
+    return /*#__PURE__*/React.createElement(CardLoadingWithContext, null);
   }
-
-  _createClass(CardLoader, [{
-    key: "componentDidMount",
-    value: function () {
-      var _componentDidMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var _yield$Promise$all, _yield$Promise$all2, mediaClient, cardModule, mediaCardErrorBoundaryModule;
-
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                if (this.state.Card) {
-                  _context.next = 16;
-                  break;
-                }
-
-                _context.prev = 1;
-                _context.next = 4;
-                return 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')]);
-
-              case 4:
-                _yield$Promise$all = _context.sent;
-                _yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 3);
-                mediaClient = _yield$Promise$all2[0];
-                cardModule = _yield$Promise$all2[1];
-                mediaCardErrorBoundaryModule = _yield$Promise$all2[2];
-                CardLoader.Card = mediaClient.withMediaClient(cardModule.Card, this.props.featureFlags);
-                CardLoader.MediaCardErrorBoundary = mediaCardErrorBoundaryModule.default;
-                this.setState({
-                  Card: CardLoader.Card,
-                  MediaCardErrorBoundary: CardLoader.MediaCardErrorBoundary
-                });
-                _context.next = 16;
-                break;
-
-              case 14:
-                _context.prev = 14;
-                _context.t0 = _context["catch"](1);
-
-              case 16:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, this, [[1, 14]]);
-      }));
-
-      function componentDidMount() {
-        return _componentDidMount.apply(this, arguments);
-      }
-
-      return componentDidMount;
-    }()
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          dimensions = _this$props.dimensions,
-          testId = _this$props.testId,
-          featureFlags = _this$props.featureFlags;
-      var _this$state = this.state,
-          Card = _this$state.Card,
-          MediaCardErrorBoundary = _this$state.MediaCardErrorBoundary;
-
-      if (!Card || !MediaCardErrorBoundary) {
-        return /*#__PURE__*/React.createElement(CardLoading, {
-          testId: testId,
-          dimensions: dimensions,
-          featureFlags: featureFlags
-        });
-      }
-
-      return /*#__PURE__*/React.createElement(MediaCardErrorBoundary, null, /*#__PURE__*/React.createElement(Card, this.props));
-    }
-  }]);
-
-  return CardLoader;
-}(React.PureComponent);
-
-_defineProperty(CardLoader, "displayName", 'AsyncCard');
-
-export { CardLoader as default };
+});
+var MediaCardErrorBoundary = Loadable({
+  loader: function loader() {
+    return import(
+    /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */
+    '../media-card-analytics-error-boundary').then(function (mod) {
+      return mod.default;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/React.createElement(CardLoadingWithContext, null);
+  }
+});
+var MediaCardWithMediaClient = Loadable({
+  loader: function loader() {
+    return import(
+    /* webpackChunkName: "@atlaskit-internal_media-client" */
+    '@atlaskit/media-client');
+  },
+  loading: function loading() {
+    return /*#__PURE__*/React.createElement(CardLoadingWithContext, null);
+  },
+  render: function render(loaded, props) {
+    return /*#__PURE__*/React.createElement(CardWithMediaClient, _extends({}, props, {
+      withMediaClient: loaded.withMediaClient
+    }));
+  }
+});
+
+var CardWithMediaClient = function CardWithMediaClient(props) {
+  var withMediaClient = props.withMediaClient,
+      featureFlags = props.featureFlags;
+  var memoizedFeatureFlags = useMemoizeFeatureFlags(featureFlags);
+  var Card = React.useMemo(function () {
+    return withMediaClient(MediaCard, memoizedFeatureFlags);
+  }, [withMediaClient, memoizedFeatureFlags]);
+  return /*#__PURE__*/React.createElement(MediaCardErrorBoundary, null, /*#__PURE__*/React.createElement(Card, props));
+};
+
+var CardLoader = function CardLoader(props) {
+  return /*#__PURE__*/React.createElement(MediaCardContext.Provider, {
+    value: props
+  }, /*#__PURE__*/React.createElement(MediaCardWithMediaClient, props));
+};
+
+export default CardLoader;

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

@@ -0,0 +1,32 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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 = 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; }
+
+import { isErrorFileState } from '@atlaskit/media-client';
+import { MediaCardError } from '../../errors';
+import { getCardStatus, isFinalCardStatus } from './getCardStatus';
+import { extractFilePreviewStatus } from './getCardPreview';
+export var createStateUpdater = function createStateUpdater(newState) {
+  return function (prevState) {
+    // Only override if previous status is non-final
+    // or new status is 'complete'
+    if (isFinalCardStatus(prevState.status) && newState.status !== 'complete') {
+      return prevState;
+    }
+
+    return _objectSpread(_objectSpread({}, prevState), newState);
+  };
+};
+export var getCardStateFromFileState = function getCardStateFromFileState(fileState, isBannedLocalPreview, featureFlags) {
+  var status = getCardStatus(fileState.status, extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags));
+  var error = status === 'error' && isErrorFileState(fileState) ? new MediaCardError('error-file-state', new Error(fileState.message)) : undefined;
+  var progress = status === 'uploading' && fileState.status === 'uploading' ? fileState.progress : 1;
+  return {
+    fileState: fileState,
+    status: status,
+    progress: progress,
+    error: error
+  };
+};

package/dist/esm/root/card/getCardPreview/cache.js

@@ -1,3 +1,4 @@
+import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { createObjectURLCache } from '../../../utils/objectURLCache';
@@ -6,7 +7,7 @@ import { createObjectURLCache } from '../../../utils/objectURLCache';
 export var getCacheKey = function getCacheKey(id, dimensions) {
   return [id, dimensions.height, dimensions.width].join('-');
 };
-export var CardPreviewCacheImpl = function CardPreviewCacheImpl(previewCache) {
+export var CardPreviewCacheImpl = /*#__PURE__*/_createClass(function CardPreviewCacheImpl(previewCache) {
   var _this = this;
 
   _classCallCheck(this, CardPreviewCacheImpl);
@@ -22,6 +23,12 @@ export var CardPreviewCacheImpl = function CardPreviewCacheImpl(previewCache) {
     _this.previewCache.set(cacheKey, cardPreview);
   });
 
+  _defineProperty(this, "remove", function (id, dimensions) {
+    var cacheKey = getCacheKey(id, dimensions);
+
+    _this.previewCache.remove(cacheKey);
+  });
+
   this.previewCache = previewCache;
-};
+});
 export default new CardPreviewCacheImpl(createObjectURLCache());