@atlaskit/media-card 77.4.10 → 77.5.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/media-card
 
+## 77.5.1
+
+### Patch Changes
+
+- [#59746](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59746) [`8412c1b3563d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8412c1b3563d) - isolated dependencies of usePreviewHook (not includes analytics)
+
+## 77.5.0
+
+### Minor Changes
+
+- [#59081](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59081) [`ddeb216a6c03`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ddeb216a6c03) - remove extra react loadable breakdown as it is unnecessary
+
 ## 77.4.10
 
 ### Patch Changes

package/dist/cjs/card/card.js

@@ -49,7 +49,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.10";
+var packageVersion = "77.5.1";
 var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
   var _super = _createSuper(CardBase);

package/dist/cjs/card/cardLoader.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
 var _cardLoading = require("../utils/lightCards/cardLoading");
@@ -17,61 +16,18 @@ var CardLoadingWithContext = function CardLoadingWithContext() {
   var props = (0, _react.useContext)(MediaCardContext);
   return /*#__PURE__*/_react.default.createElement(_cardLoading.CardLoading, props);
 };
-var MediaCard = (0, _reactLoadable.default)({
-  loader: function loader() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-card" */'./card'));
-    }).then(function (mod) {
-      return mod.Card;
-    });
-  },
-  loading: function loading() {
-    return /*#__PURE__*/_react.default.createElement(CardLoadingWithContext, null);
-  }
-});
-var MediaCardErrorBoundary = (0, _reactLoadable.default)({
-  loader: function loader() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */'./media-card-analytics-error-boundary'));
-    }).then(function (mod) {
-      return mod.default;
-    });
-  },
-  loading: function loading() {
-    return /*#__PURE__*/_react.default.createElement(CardLoadingWithContext, null);
-  }
-});
 var MediaCardWithMediaClient = (0, _reactLoadable.default)({
   loader: function loader() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-client-react" */'@atlaskit/media-client-react'));
+      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-card-with-media-client" */'./cardWithMediaClient'));
+    }).then(function (mod) {
+      return mod.CardWithMediaClient;
     });
   },
   loading: function loading() {
     return /*#__PURE__*/_react.default.createElement(CardLoadingWithContext, null);
-  },
-  render: function render(loaded, props) {
-    return /*#__PURE__*/_react.default.createElement(CardWithMediaClient, (0, _extends2.default)({}, props, {
-      withMediaClient: loaded.withMediaClient
-    }));
   }
 });
-var CardWithMediaClient = function CardWithMediaClient(props) {
-  var withMediaClient = props.withMediaClient,
-    dimensions = props.dimensions,
-    onClick = props.onClick;
-  var Card = _react.default.useMemo(function () {
-    return withMediaClient(MediaCard);
-  }, [withMediaClient]);
-  return (
-    /*#__PURE__*/
-    // onClick is passed into MediaCardErrorBoundary so MediaGroup items can get the toolbar menu in Editor
-    _react.default.createElement(MediaCardErrorBoundary, {
-      dimensions: dimensions,
-      onClick: onClick
-    }, /*#__PURE__*/_react.default.createElement(Card, props))
-  );
-};
 var CardLoader = function CardLoader(props) {
   return /*#__PURE__*/_react.default.createElement(MediaCardContext.Provider, {
     value: props

package/dist/cjs/card/cardWithMediaClient.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardWithMediaClient = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _mediaClientReact = require("@atlaskit/media-client-react");
+var _card = require("./card");
+var _mediaCardAnalyticsErrorBoundary = _interopRequireDefault(require("./media-card-analytics-error-boundary"));
+var CardWithMediaClient = exports.CardWithMediaClient = function CardWithMediaClient(props) {
+  var dimensions = props.dimensions,
+    onClick = props.onClick;
+  var Card = _react.default.useMemo(function () {
+    return (0, _mediaClientReact.withMediaClient)(_card.Card);
+  }, []);
+  return (
+    /*#__PURE__*/
+    // onClick is passed into MediaCardErrorBoundary so MediaGroup items can get the toolbar menu in Editor
+    _react.default.createElement(_mediaCardAnalyticsErrorBoundary.default, {
+      dimensions: dimensions,
+      onClick: onClick
+    }, /*#__PURE__*/_react.default.createElement(Card, props))
+  );
+};

package/dist/cjs/card/media-card-analytics-error-boundary.js

@@ -90,7 +90,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.10";
+var packageVersion = "77.5.1";
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/cjs/card/v2/cardV2.js

@@ -16,7 +16,7 @@ var _externalImageCard = require("./externalImageCard");
 var _fileCard = require("./fileCard");
 var _excluded = ["identifier"];
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.10";
+var packageVersion = "77.5.1";
 var CardV2Base = exports.CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/cjs/card/v2/cardV2Loader.js

@@ -6,13 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
 var _cardLoading = require("../../utils/lightCards/cardLoading");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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 || (0, _typeof2.default)(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; }
 var MediaCardContext = /*#__PURE__*/_react.default.createContext({});
@@ -20,63 +16,16 @@ var CardLoadingWithContext = function CardLoadingWithContext() {
   var props = (0, _react.useContext)(MediaCardContext);
   return /*#__PURE__*/_react.default.createElement(_cardLoading.CardLoading, props);
 };
-var MediaV2Card = (0, _reactLoadable.default)({
-  loader: function loader() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-card-v2" */'./cardV2'));
-    }).then(function (mod) {
-      return mod.CardV2;
-    });
-  },
-  loading: function loading() {
-    return /*#__PURE__*/_react.default.createElement(CardLoadingWithContext, null);
-  }
-});
-var MediaCardErrorBoundary = (0, _reactLoadable.default)({
-  loader: function loader() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */'../media-card-analytics-error-boundary'));
-    }).then(function (mod) {
-      return mod.default;
-    });
-  },
-  loading: function loading() {
-    return /*#__PURE__*/_react.default.createElement(CardLoadingWithContext, null);
-  }
-});
-var CardWithMediaClient = function CardWithMediaClient(props) {
-  var dimensions = props.dimensions,
-    onClick = props.onClick,
-    withMediaClient = props.withMediaClient,
-    featureFlags = props.featureFlags;
-  var Card = _react.default.useMemo(function () {
-    return withMediaClient(MediaV2Card);
-  }, [withMediaClient]);
-  var featureFlagsWithMediaCardV2 = _react.default.useMemo(function () {
-    return _objectSpread(_objectSpread({}, featureFlags), {}, {
-      mediaCardV2: true //used for analytics - internal use only
-    });
-  }, [featureFlags]);
-  return /*#__PURE__*/_react.default.createElement(MediaCardErrorBoundary, {
-    dimensions: dimensions,
-    onClick: onClick
-  }, /*#__PURE__*/_react.default.createElement(Card, (0, _extends2.default)({}, props, {
-    featureFlags: featureFlagsWithMediaCardV2
-  })));
-};
 var MediaCardWithMediaClientProvider = (0, _reactLoadable.default)({
   loader: function loader() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-client-react" */'@atlaskit/media-client-react'));
+      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-card-with-media-client-v2" */'./cardWithMediaClientV2'));
+    }).then(function (mod) {
+      return mod.CardWithMediaClientV2;
     });
   },
   loading: function loading() {
     return /*#__PURE__*/_react.default.createElement(CardLoadingWithContext, null);
-  },
-  render: function render(loaded, props) {
-    return /*#__PURE__*/_react.default.createElement(CardWithMediaClient, (0, _extends2.default)({}, props, {
-      withMediaClient: loaded.withMediaClient
-    }));
   }
 });
 var CardLoader = function CardLoader(props) {

package/dist/cjs/card/v2/cardViewV2.js

@@ -84,18 +84,19 @@ var CardViewV2Base = exports.CardViewV2Base = function CardViewV2Base(_ref) {
     if (prevCardPreview.dataURI !== (cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI)) {
       return;
     }
-
     /*
       We render the icon & icon message always, even if there is cardPreview available.
-       If the image fails to load/render, the icon will remain, i.e. the user won't see a change until the root card decides to chage status to error.
-       If the image renders successfully, we switch this variable to hide the icon & icon message behind the thumbnail in case the image has transparency.
-       It is less likely that root component replaces a suceeded cardPreview for a failed one than the opposite case. Therefore we prefer to hide the icon instead show when the image fails, for a smoother transition
+      If the image fails to load/render, the icon will remain, i.e. the user won't see a change until the root card decides to chage status to error.
+      If the image renders successfully, we switch this variable to hide the icon & icon message behind the thumbnail in case the image has transparency.
+      It is less likely that root component replaces a suceeded cardPreview for a failed one than the opposite case. Therefore we prefer to hide the icon instead show when the image fails, for a smoother transition
     */
-
     setDidImageRender(true);
     onImageLoad === null || onImageLoad === void 0 || onImageLoad(cardPreview);
   };
-  var handleOnImageError = function handleOnImageError(cardPreview) {
+  var handleOnImageError = function handleOnImageError(prevCardPreview) {
+    if (prevCardPreview.dataURI !== (cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI)) {
+      return;
+    }
     setDidImageRender(false);
     onImageError === null || onImageError === void 0 || onImageError(cardPreview);
   };

package/dist/cjs/card/v2/cardWithMediaClientV2.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardWithMediaClientV2 = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _mediaClientReact = require("@atlaskit/media-client-react");
+var _mediaCardAnalyticsErrorBoundary = _interopRequireDefault(require("../media-card-analytics-error-boundary"));
+var _cardV = require("./cardV2");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var CardWithMediaClientV2 = exports.CardWithMediaClientV2 = function CardWithMediaClientV2(props) {
+  var dimensions = props.dimensions,
+    onClick = props.onClick,
+    featureFlags = props.featureFlags;
+  var Card = _react.default.useMemo(function () {
+    return (0, _mediaClientReact.withMediaClient)(_cardV.CardV2);
+  }, []);
+  var featureFlagsWithMediaCardV2 = _react.default.useMemo(function () {
+    return _objectSpread(_objectSpread({}, featureFlags), {}, {
+      mediaCardV2: true //used for analytics - internal use only
+    });
+  }, [featureFlags]);
+  return /*#__PURE__*/_react.default.createElement(_mediaCardAnalyticsErrorBoundary.default, {
+    dimensions: dimensions,
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement(Card, (0, _extends2.default)({}, props, {
+    featureFlags: featureFlagsWithMediaCardV2
+  })));
+};

package/dist/cjs/card/v2/useFilePreview/errors.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isLocalPreviewError = exports.ensureMediaFilePreviewError = exports.SsrPreviewError = exports.RemotePreviewError = exports.MediaFilePreviewError = exports.LocalPreviewError = exports.ImageLoadError = void 0;
+exports.isMediaFilePreviewError = isMediaFilePreviewError;
+exports.isUnsupportedLocalPreviewError = exports.isRemotePreviewError = void 0;
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _wrapNativeSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/wrapNativeSuper"));
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+/**
+ * Primary reason is logged through Data Portal.
+ * Make sure all the values are whitelisted in Measure -> Event Regitry -> "mediaCardRender failed" event
+ */
+var MediaFilePreviewError = exports.MediaFilePreviewError = /*#__PURE__*/function (_Error) {
+  (0, _inherits2.default)(MediaFilePreviewError, _Error);
+  var _super = _createSuper(MediaFilePreviewError);
+  function MediaFilePreviewError(primaryReason, secondaryError) {
+    var _this;
+    (0, _classCallCheck2.default)(this, MediaFilePreviewError);
+    _this = _super.call(this, primaryReason);
+    // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-2.html#support-for-newtarget
+    _this.primaryReason = primaryReason;
+    _this.secondaryError = secondaryError;
+    Object.setPrototypeOf((0, _assertThisInitialized2.default)(_this), (this instanceof MediaFilePreviewError ? this.constructor : void 0).prototype);
+
+    // https://v8.dev/docs/stack-trace-api
+    if ('captureStackTrace' in Error) {
+      Error.captureStackTrace((0, _assertThisInitialized2.default)(_this), this instanceof MediaFilePreviewError ? this.constructor : void 0);
+    }
+    return _this;
+  }
+  return (0, _createClass2.default)(MediaFilePreviewError);
+}( /*#__PURE__*/(0, _wrapNativeSuper2.default)(Error));
+var LocalPreviewError = exports.LocalPreviewError = /*#__PURE__*/function (_MediaFilePreviewErro) {
+  (0, _inherits2.default)(LocalPreviewError, _MediaFilePreviewErro);
+  var _super2 = _createSuper(LocalPreviewError);
+  function LocalPreviewError(primaryReason, secondaryError) {
+    var _this2;
+    (0, _classCallCheck2.default)(this, LocalPreviewError);
+    _this2 = _super2.call(this, primaryReason, secondaryError);
+    _this2.primaryReason = primaryReason;
+    _this2.secondaryError = secondaryError;
+    return _this2;
+  }
+  return (0, _createClass2.default)(LocalPreviewError);
+}(MediaFilePreviewError);
+var RemotePreviewError = exports.RemotePreviewError = /*#__PURE__*/function (_MediaFilePreviewErro2) {
+  (0, _inherits2.default)(RemotePreviewError, _MediaFilePreviewErro2);
+  var _super3 = _createSuper(RemotePreviewError);
+  function RemotePreviewError(primaryReason, secondaryError) {
+    var _this3;
+    (0, _classCallCheck2.default)(this, RemotePreviewError);
+    _this3 = _super3.call(this, primaryReason, secondaryError);
+    _this3.primaryReason = primaryReason;
+    _this3.secondaryError = secondaryError;
+    return _this3;
+  }
+  return (0, _createClass2.default)(RemotePreviewError);
+}(MediaFilePreviewError);
+var SsrPreviewError = exports.SsrPreviewError = /*#__PURE__*/function (_MediaFilePreviewErro3) {
+  (0, _inherits2.default)(SsrPreviewError, _MediaFilePreviewErro3);
+  var _super4 = _createSuper(SsrPreviewError);
+  function SsrPreviewError(primaryReason, secondaryError) {
+    var _this4;
+    (0, _classCallCheck2.default)(this, SsrPreviewError);
+    _this4 = _super4.call(this, primaryReason, secondaryError);
+    _this4.primaryReason = primaryReason;
+    _this4.secondaryError = secondaryError;
+    return _this4;
+  }
+  return (0, _createClass2.default)(SsrPreviewError);
+}(MediaFilePreviewError);
+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";
+  }
+};
+var ImageLoadError = exports.ImageLoadError = /*#__PURE__*/function (_MediaFilePreviewErro4) {
+  (0, _inherits2.default)(ImageLoadError, _MediaFilePreviewErro4);
+  var _super5 = _createSuper(ImageLoadError);
+  function ImageLoadError(source) {
+    (0, _classCallCheck2.default)(this, ImageLoadError);
+    return _super5.call(this, getImageLoadPrimaryReason(source));
+  }
+  return (0, _createClass2.default)(ImageLoadError);
+}(MediaFilePreviewError);
+function isMediaFilePreviewError(err) {
+  return err instanceof MediaFilePreviewError;
+}
+var isLocalPreviewError = exports.isLocalPreviewError = function isLocalPreviewError(err) {
+  return err instanceof LocalPreviewError;
+};
+var isRemotePreviewError = exports.isRemotePreviewError = function isRemotePreviewError(err) {
+  return err instanceof RemotePreviewError;
+};
+var isUnsupportedLocalPreviewError = exports.isUnsupportedLocalPreviewError = function isUnsupportedLocalPreviewError(err) {
+  return isMediaFilePreviewError(err) && err.primaryReason === 'local-preview-unsupported';
+};
+
+// In a try/catch statement, the error caught is the type of unknown.
+// We can use this helper to ensure that the error handled is the type of MediaFilePreviewError if unsure
+// If updatePrimaryReason is true, if it's a MediaFilePreviewError already, it will update it's primary reason
+var ensureMediaFilePreviewError = exports.ensureMediaFilePreviewError = function ensureMediaFilePreviewError(primaryReason, error, updatePrimaryReason) {
+  if (isMediaFilePreviewError(error)) {
+    if (updatePrimaryReason && error.primaryReason !== primaryReason) {
+      return new MediaFilePreviewError(primaryReason, error.secondaryError);
+    }
+    return error;
+  }
+  return new MediaFilePreviewError(primaryReason, error);
+};

package/dist/cjs/card/v2/useFilePreview/getPreview/cache.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mediaFilePreviewCache = exports.getCacheKey = exports.CardPreviewCacheImpl = void 0;
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectURLCache = require("./objectURLCache");
+// Dimensions are used to create a key.
+// Cache is invalidated when different dimensions are provided.
+
+var getCacheKey = exports.getCacheKey = function getCacheKey(id, mode) {
+  var resizeMode = mode || 'crop';
+  return [id, resizeMode].join('-');
+};
+var CardPreviewCacheImpl = exports.CardPreviewCacheImpl = /*#__PURE__*/(0, _createClass2.default)(function CardPreviewCacheImpl(previewCache) {
+  var _this = this;
+  (0, _classCallCheck2.default)(this, CardPreviewCacheImpl);
+  (0, _defineProperty2.default)(this, "get", function (id, mode) {
+    var cacheKey = getCacheKey(id, mode);
+    return _this.previewCache.get(cacheKey);
+  });
+  (0, _defineProperty2.default)(this, "set", function (id, mode, cardPreview) {
+    var cacheKey = getCacheKey(id, mode);
+    _this.previewCache.set(cacheKey, cardPreview);
+  });
+  (0, _defineProperty2.default)(this, "remove", function (id, mode) {
+    var cacheKey = getCacheKey(id, mode);
+    _this.previewCache.remove(cacheKey);
+  });
+  (0, _defineProperty2.default)(this, "clear", function () {
+    _this.previewCache.clear();
+  });
+  this.previewCache = previewCache;
+});
+var mediaFilePreviewCache = exports.mediaFilePreviewCache = new CardPreviewCacheImpl((0, _objectURLCache.createObjectURLCache)());

package/dist/cjs/card/v2/useFilePreview/getPreview/filePreviewStatus.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isPreviewableStatus = exports.extractFilePreviewStatus = void 0;
+var _mediaCommon = require("@atlaskit/media-common");
+var _mediaClient = require("@atlaskit/media-client");
+var _helpers = require("./helpers");
+// TODO: align these checks with helpers from Media Client
+// https://product-fabric.atlassian.net/browse/BMPT-1300
+var extractFilePreviewStatus = exports.extractFilePreviewStatus = function extractFilePreviewStatus(fileState, isBannedLocalPreview) {
+  var hasFilesize = 'size' in fileState && !!fileState.size;
+  var _ref = 'mediaType' in fileState && fileState || {},
+    mediaType = _ref.mediaType;
+  var _ref2 = 'mimeType' in fileState && fileState || {},
+    mimeType = _ref2.mimeType;
+  var isPreviewable = !!mediaType && (0, _mediaClient.isPreviewableType)(mediaType);
+
+  // Local preview is available only if it's supported by browser and supported by Media Card (isSupportedLocalPreview)
+  // For example, SVGs are mime type NOT supported by browser but media type supported by Media Card (image)
+  // Then, local Preview NOT available
+  var hasLocalPreview = !isBannedLocalPreview && (0, _mediaClient.isPreviewableFileState)(fileState) && (0, _helpers.isSupportedLocalPreview)(mediaType) && !!mimeType && (0, _mediaCommon.isMimeTypeSupportedByBrowser)(mimeType);
+  var hasRemotePreview = (0, _mediaClient.isImageRepresentationReady)(fileState);
+  var hasPreview = hasLocalPreview || hasRemotePreview;
+  var isSupportedByBrowser = !!mimeType && (0, _mediaCommon.isMimeTypeSupportedByBrowser)(mimeType);
+  return {
+    hasFilesize: hasFilesize,
+    isPreviewable: isPreviewable,
+    hasPreview: hasPreview,
+    isSupportedByBrowser: isSupportedByBrowser
+  };
+};
+
+// CXP-2723 TODO: Review this in relation to removing status from the hook
+var isPreviewableStatus = exports.isPreviewableStatus = function isPreviewableStatus(cardStatus, _ref3) {
+  var isPreviewable = _ref3.isPreviewable,
+    hasPreview = _ref3.hasPreview,
+    isSupportedByBrowser = _ref3.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/cjs/card/v2/useFilePreview/getPreview/getPreview.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isSSRDataPreview = exports.isSSRClientPreview = exports.isLocalPreview = exports.getSSRCardPreview = exports.getAndCacheRemotePreview = exports.getAndCacheLocalPreview = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _mediaClient = require("@atlaskit/media-client");
+var _cache = require("./cache");
+var _helpers = require("./helpers");
+var _errors = require("../errors");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var extendAndCachePreview = function extendAndCachePreview(id, mode, preview, mediaBlobUrlAttrs) {
+  var source;
+  switch (preview.source) {
+    case 'local':
+      source = 'cache-local';
+      break;
+    case 'remote':
+      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.
+  var dataURI = mediaBlobUrlAttrs ? (0, _mediaClient.addFileAttrsToUrl)(preview.dataURI, mediaBlobUrlAttrs) : preview.dataURI;
+  // We store new cardPreview into cache
+  _cache.mediaFilePreviewCache.set(id, mode, _objectSpread(_objectSpread({}, preview), {}, {
+    source: source,
+    dataURI: dataURI
+  }));
+  return _objectSpread(_objectSpread({}, preview), {}, {
+    dataURI: dataURI
+  });
+};
+var getSSRCardPreview = exports.getSSRCardPreview = function getSSRCardPreview(ssr, mediaClient, id, params, mediaBlobUrlAttrs) {
+  var dataURI;
+  try {
+    var rawDataURI = mediaClient.getImageUrlSync(id, params);
+    // We want to embed some meta context into dataURI for Copy/Paste to work.
+    dataURI = mediaBlobUrlAttrs ? (0, _mediaClient.addFileAttrsToUrl)(rawDataURI, mediaBlobUrlAttrs) : rawDataURI;
+    var source = ssr === 'client' ? 'ssr-client' : 'ssr-server';
+    return {
+      dataURI: dataURI,
+      source: source,
+      orientation: 1
+    };
+  } catch (e) {
+    var reason = ssr === 'server' ? 'ssr-server-uri' : 'ssr-client-uri';
+    throw new _errors.SsrPreviewError(reason, e instanceof Error ? e : undefined);
+  }
+};
+var isLocalPreview = exports.isLocalPreview = function isLocalPreview(preview) {
+  var localSources = ['local', 'cache-local'];
+  return localSources.includes(preview.source);
+};
+var isSSRClientPreview = exports.isSSRClientPreview = function isSSRClientPreview(preview) {
+  var ssrClientSources = ['ssr-client', 'cache-ssr-client'];
+  return ssrClientSources.includes(preview.source);
+};
+var isSSRDataPreview = exports.isSSRDataPreview = function isSSRDataPreview(preview) {
+  return preview.source === 'ssr-data';
+};
+var getAndCacheRemotePreview = exports.getAndCacheRemotePreview = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(mediaClient, id, dimensions, params, mediaBlobUrlAttrs, traceContext) {
+    var remotePreview;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return (0, _helpers.getRemotePreview)(mediaClient, id, params, traceContext);
+        case 2:
+          remotePreview = _context.sent;
+          return _context.abrupt("return", extendAndCachePreview(id, params.mode, _objectSpread(_objectSpread({}, remotePreview), {}, {
+            dimensions: dimensions
+          }), mediaBlobUrlAttrs));
+        case 4:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function getAndCacheRemotePreview(_x, _x2, _x3, _x4, _x5, _x6) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var getAndCacheLocalPreview = exports.getAndCacheLocalPreview = /*#__PURE__*/function () {
+  var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(id, filePreview, dimensions, mode, mediaBlobUrlAttrs) {
+    var localPreview;
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.next = 2;
+          return (0, _helpers.getLocalPreview)(filePreview);
+        case 2:
+          localPreview = _context2.sent;
+          return _context2.abrupt("return", extendAndCachePreview(id, mode, _objectSpread(_objectSpread({}, localPreview), {}, {
+            dimensions: dimensions
+          }), mediaBlobUrlAttrs));
+        case 4:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return function getAndCacheLocalPreview(_x7, _x8, _x9, _x10, _x11) {
+    return _ref2.apply(this, arguments);
+  };
+}();