@atlaskit/media-card 77.4.4 → 77.4.6

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

@@ -0,0 +1,592 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFilePreview = 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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _mediaClient = require("@atlaskit/media-client");
+var _mediaClientReact = require("@atlaskit/media-client-react");
+var _mediaCommon = require("@atlaskit/media-common");
+var _mediaUi = require("@atlaskit/media-ui");
+var _errors = require("../../errors");
+var _analytics = require("../../utils/analytics");
+var _dimensionComparer = require("../../utils/dimensionComparer");
+var _globalScope = require("../../utils/globalScope");
+var _useCurrentValueRef = require("../../utils/useCurrentValueRef");
+var _usePrevious = require("../../utils/usePrevious");
+var _videoSnapshot = require("../../utils/videoSnapshot");
+var _getCardPreview = require("../getCardPreview");
+var _cache = _interopRequireDefault(require("../getCardPreview/cache"));
+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; }
+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 useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
+  var _ref$resizeMode = _ref.resizeMode,
+    resizeMode = _ref$resizeMode === void 0 ? 'crop' : _ref$resizeMode,
+    identifier = _ref.identifier,
+    ssr = _ref.ssr,
+    mediaClient = _ref.mediaClient,
+    dimensions = _ref.dimensions,
+    requestedDimensions = _ref.requestedDimensions,
+    traceContext = _ref.traceContext,
+    previewDidRender = _ref.previewDidRender,
+    skipRemote = _ref.skipRemote,
+    mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs;
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    error = _useState2[0],
+    setError = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    nonCriticalError = _useState4[0],
+    setNonCriticalError = _useState4[1];
+  //----------------------------------------------------------------//
+  //---------------- State Initializer Functions -------------------//
+  //----------------------------------------------------------------//
+
+  var ssrDataRef = (0, _react.useRef)();
+  var ssrReliabilityRef = (0, _react.useRef)({
+    server: {
+      status: 'unknown'
+    },
+    client: {
+      status: 'unknown'
+    }
+  });
+  var imageURLParams = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({
+      collection: identifier.collectionName,
+      mode: resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode
+    }, requestedDimensions), {}, {
+      allowAnimated: true
+    });
+  }, [requestedDimensions, identifier.collectionName, resizeMode]);
+  var getSSRPreview = function getSSRPreview(ssr, identifier, mediaClient) {
+    var _ssrDataRef$current, _ssrDataRef$current2;
+    ssrDataRef.current = (0, _globalScope.getSSRData)(identifier);
+    if ((_ssrDataRef$current = ssrDataRef.current) !== null && _ssrDataRef$current !== void 0 && _ssrDataRef$current.error) {
+      ssrReliabilityRef.current.server = _objectSpread({
+        status: 'fail'
+      }, ssrDataRef.current.error);
+    }
+    if (!((_ssrDataRef$current2 = ssrDataRef.current) !== null && _ssrDataRef$current2 !== void 0 && _ssrDataRef$current2.dataURI)) {
+      try {
+        return (0, _getCardPreview.getSSRCardPreview)(ssr, mediaClient, identifier.id, imageURLParams, mediaBlobUrlAttrs);
+      } catch (e) {
+        ssrReliabilityRef.current[ssr] = _objectSpread({
+          status: 'fail'
+        }, (0, _analytics.extractErrorInfo)(e));
+      }
+    } else {
+      return {
+        dataURI: ssrDataRef.current.dataURI,
+        source: 'ssr-data'
+      };
+    }
+  };
+  var cardPreviewInitializer = function cardPreviewInitializer() {
+    var cardPreview;
+    var id = identifier.id;
+    var fileImageMode = (0, _mediaClient.imageResizeModeToFileImageMode)(resizeMode);
+    cardPreview = (0, _getCardPreview.getCardPreviewFromCache)(id, fileImageMode);
+    if (!cardPreview && ssr) {
+      cardPreview = getSSRPreview(ssr, identifier, mediaClient);
+    }
+    return cardPreview;
+  };
+  var _useState5 = (0, _react.useState)(cardPreviewInitializer),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    cardPreview = _useState6[0],
+    setCardPreview = _useState6[1];
+  var _useFileState = (0, _mediaClientReact.useFileState)(identifier.id, {
+      skipRemote: skipRemote,
+      collectionName: identifier.collectionName,
+      occurrenceKey: identifier.occurrenceKey
+    }),
+    fileState = _useFileState.fileState;
+
+  //----------------------------------------------------------------//
+  //------------ State, Refs & Initial Values ----------------------//
+  //----------------------------------------------------------------//
+
+  var _useState7 = (0, _react.useState)('loading'),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    status = _useState8[0],
+    setStatus = _useState8[1];
+  (0, _react.useEffect)(function () {
+    setStatus('loading');
+  }, [identifier]);
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    isBannedLocalPreview = _useState10[0],
+    setIsBannedLocalPreview = _useState10[1];
+  var wasResolvedUpfrontPreviewRef = (0, _react.useRef)(false);
+
+  //----------------------------------------------------------------//
+  //---------------------- Helper Functions  -----------------------//
+  //----------------------------------------------------------------//
+
+  var fetchRemotePreviewRef = (0, _useCurrentValueRef.useCurrentValueRef)(function (identifier) {
+    return (0, _getCardPreview.fetchAndCacheRemotePreview)(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, mediaBlobUrlAttrs);
+  });
+  var resolvePreviewRef = (0, _useCurrentValueRef.useCurrentValueRef)( /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(identifier, fileState) {
+      var filePreview, isRemotePreviewReady, mode, cachedPreview, dimensionsAreBigger, localPreview, value, resolvedFilePreview, _value, type, mediaType, orientation, _dataURI, _dataURI2, preview, source, dataURI, remotePreview, wrappedError;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            filePreview = isBannedLocalPreview ? undefined : fileState.status !== 'error' && 'mimeType' in fileState && (0, _mediaCommon.isMimeTypeSupportedByBrowser)(fileState.mimeType) ? fileState.preview : undefined;
+            isRemotePreviewReady = (0, _mediaClient.isImageRepresentationReady)(fileState);
+            _context.prev = 2;
+            mode = imageURLParams.mode;
+            cachedPreview = _cache.default.get(identifier.id, mode);
+            dimensionsAreBigger = (0, _dimensionComparer.isBigger)(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, dimensions);
+            if (!(cachedPreview && !dimensionsAreBigger)) {
+              _context.next = 8;
+              break;
+            }
+            return _context.abrupt("return", cachedPreview);
+          case 8:
+            _context.prev = 8;
+            if (!filePreview) {
+              _context.next = 74;
+              break;
+            }
+            _context.prev = 10;
+            _context.next = 13;
+            return filePreview;
+          case 13:
+            resolvedFilePreview = _context.sent;
+            value = resolvedFilePreview.value;
+            _context.next = 20;
+            break;
+          case 17:
+            _context.prev = 17;
+            _context.t0 = _context["catch"](10);
+            throw new _errors.LocalPreviewError('local-preview-rejected', _context.t0 instanceof Error ? _context.t0 : undefined);
+          case 20:
+            if (!(typeof value === 'string')) {
+              _context.next = 24;
+              break;
+            }
+            localPreview = {
+              dataURI: value,
+              orientation: 1,
+              source: 'local'
+            };
+            _context.next = 57;
+            break;
+          case 24:
+            if (!(value instanceof Blob)) {
+              _context.next = 56;
+              break;
+            }
+            _value = value, type = _value.type;
+            mediaType = (0, _mediaCommon.getMediaTypeFromMimeType)(type);
+            _context.t1 = mediaType;
+            _context.next = _context.t1 === 'image' ? 30 : _context.t1 === 'video' ? 42 : 53;
+            break;
+          case 30:
+            _context.prev = 30;
+            _context.next = 33;
+            return (0, _mediaUi.getOrientation)(value);
+          case 33:
+            orientation = _context.sent;
+            _dataURI = URL.createObjectURL(value);
+            localPreview = {
+              dataURI: _dataURI,
+              orientation: orientation,
+              source: 'local'
+            };
+            _context.next = 41;
+            break;
+          case 38:
+            _context.prev = 38;
+            _context.t2 = _context["catch"](30);
+            throw new _errors.LocalPreviewError('local-preview-image', _context.t2 instanceof Error ? _context.t2 : undefined);
+          case 41:
+            return _context.abrupt("break", 54);
+          case 42:
+            _context.prev = 42;
+            _context.next = 45;
+            return (0, _videoSnapshot.takeSnapshot)(value);
+          case 45:
+            _dataURI2 = _context.sent;
+            localPreview = {
+              dataURI: _dataURI2,
+              orientation: 1,
+              source: 'local'
+            };
+            _context.next = 52;
+            break;
+          case 49:
+            _context.prev = 49;
+            _context.t3 = _context["catch"](42);
+            throw new _errors.LocalPreviewError('local-preview-video', _context.t3 instanceof Error ? _context.t3 : undefined);
+          case 52:
+            return _context.abrupt("break", 54);
+          case 53:
+            throw new _errors.LocalPreviewError('local-preview-unsupported');
+          case 54:
+            _context.next = 57;
+            break;
+          case 56:
+            throw new _errors.LocalPreviewError('local-preview-unsupported');
+          case 57:
+            preview = _objectSpread(_objectSpread({}, localPreview), {}, {
+              dimensions: dimensions
+            });
+            _context.t4 = preview.source;
+            _context.next = _context.t4 === 'local' ? 61 : _context.t4 === 'remote' ? 63 : _context.t4 === 'ssr-server' ? 65 : _context.t4 === 'ssr-client' ? 67 : 69;
+            break;
+          case 61:
+            source = 'cache-local';
+            return _context.abrupt("break", 70);
+          case 63:
+            source = 'cache-remote';
+            return _context.abrupt("break", 70);
+          case 65:
+            source = 'cache-ssr-server';
+            return _context.abrupt("break", 70);
+          case 67:
+            source = 'cache-ssr-client';
+            return _context.abrupt("break", 70);
+          case 69:
+            source = preview.source;
+          case 70:
+            // We want to embed some meta context into dataURI for Copy/Paste to work.
+            dataURI = mediaBlobUrlAttrs ? (0, _mediaClient.addFileAttrsToUrl)(preview.dataURI, mediaBlobUrlAttrs) : preview.dataURI; // We store new cardPreview into cache
+            _cache.default.set(identifier.id, mode, _objectSpread(_objectSpread({}, preview), {}, {
+              source: source,
+              dataURI: dataURI
+            }));
+            setCardPreview(_objectSpread(_objectSpread({}, preview), {}, {
+              dataURI: dataURI
+            }));
+            return _context.abrupt("return");
+          case 74:
+            _context.next = 81;
+            break;
+          case 76:
+            _context.prev = 76;
+            _context.t5 = _context["catch"](8);
+            /**
+             * We report the error if:
+             * - local preview is supported and fails
+             * - local preview is unsupported and remote preview is NOT READY
+             *   i.e. the function was called for "no reason".
+             * We DON'T report the error if:
+             * - local preview is unsupported and remote preview IS READY
+             *   i.e. local preview is available and not supported,
+             *   but we are after the remote preview instead.
+             */
+            if (!(0, _errors.isUnsupportedLocalPreviewError)(_context.t5) || (0, _errors.isUnsupportedLocalPreviewError)(_context.t5) && !isRemotePreviewReady) {
+              // CXP-2723 TODO: We might have to wrap this error in MediaCardError
+              setNonCriticalError(_context.t5);
+            }
+            /**
+             * No matter the reason why the local preview failed, we break the process
+             * if there is no remote preview available
+             */
+            if (isRemotePreviewReady) {
+              _context.next = 81;
+              break;
+            }
+            throw _context.t5;
+          case 81:
+            if (isRemotePreviewReady) {
+              _context.next = 83;
+              break;
+            }
+            throw new _errors.MediaCardError('remote-preview-not-ready');
+          case 83:
+            _context.next = 85;
+            return (0, _getCardPreview.fetchAndCacheRemotePreview)(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, mediaBlobUrlAttrs, traceContext);
+          case 85:
+            remotePreview = _context.sent;
+            setCardPreview(remotePreview);
+            return _context.abrupt("return");
+          case 90:
+            _context.prev = 90;
+            _context.t6 = _context["catch"](2);
+            wrappedError = (0, _errors.ensureMediaCardError)('preview-fetch', _context.t6); //  If remote preview fails, we set status 'error'
+            //  If local preview fails (i.e, no remote preview available),
+            //  we can stay in the same status until there is a remote preview available
+            //  If it's any other error we set status 'error'
+            if ((0, _errors.isLocalPreviewError)(wrappedError)) {
+              // This error should already been logged inside the getCardPreview. No need to log it here.
+              setIsBannedLocalPreview(true);
+            } else {
+              if (!['complete', 'error', 'failed-processing'].includes(status)) {
+                setStatus('error');
+                setError(wrappedError);
+              }
+            }
+          case 94:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 90], [8, 76], [10, 17], [30, 38], [42, 49]]);
+    }));
+    return function (_x, _x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }());
+
+  //----------------------------------------------------------------//
+  //------------ resolveUpfrontPreview useEffect -------------------//
+  //----------------------------------------------------------------//
+  var prevCardPreview = (0, _usePrevious.usePrevious)(cardPreview);
+  var dimensionsRef = (0, _useCurrentValueRef.useCurrentValueRef)(dimensions);
+  (0, _react.useEffect)(function () {
+    var resolveUpfrontPreview = /*#__PURE__*/function () {
+      var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(identifier) {
+        var fetchedDimensions, newCardPreview, areValidFetchedDimensions;
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              // We block any possible future call to this method regardless of the outcome (success or fail)
+              // If it fails, the normal preview fetch should occur after the file state is fetched anyways
+              wasResolvedUpfrontPreviewRef.current = true;
+              _context2.prev = 1;
+              fetchedDimensions = _objectSpread({}, dimensions);
+              _context2.next = 5;
+              return fetchRemotePreviewRef.current(identifier);
+            case 5:
+              newCardPreview = _context2.sent;
+              areValidFetchedDimensions = !(0, _dimensionComparer.isBigger)(fetchedDimensions, dimensionsRef.current); // If there are new and bigger dimensions in the props, and the upfront preview is still resolving,
+              // the fetched preview is no longer valid, and thus, we dismiss it
+              if (areValidFetchedDimensions) {
+                setCardPreview(newCardPreview);
+              }
+              _context2.next = 12;
+              break;
+            case 10:
+              _context2.prev = 10;
+              _context2.t0 = _context2["catch"](1);
+            case 12:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, null, [[1, 10]]);
+      }));
+      return function resolveUpfrontPreview(_x3) {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    var hadSSRCardPreview = ssr === 'client' && !!prevCardPreview && (0, _getCardPreview.isSSRClientPreview)(prevCardPreview);
+
+    // CXP-2723 TODO: `hadSSRCardPreview` is most likely redundant
+    if (!wasResolvedUpfrontPreviewRef.current && (!skipRemote || hadSSRCardPreview) && !cardPreview) {
+      resolveUpfrontPreview(identifier);
+    }
+  }, [cardPreview, dimensions, dimensionsRef, fetchRemotePreviewRef, identifier, skipRemote, prevCardPreview, ssr]);
+
+  //----------------------------------------------------------------//
+  //---------------- fetch and resolve card preview ----------------//
+  //----------------------------------------------------------------//
+
+  var prevDimensions = (0, _usePrevious.usePrevious)(dimensions);
+  (0, _react.useEffect)(function () {
+    var _ssrDataRef$current3;
+    if (cardPreview && !skipRemote && (0, _getCardPreview.isSSRDataPreview)(cardPreview) && (0, _dimensionComparer.isBigger)((_ssrDataRef$current3 = ssrDataRef.current) === null || _ssrDataRef$current3 === void 0 ? void 0 : _ssrDataRef$current3.dimensions, dimensions)) {
+      // refetchSRRPreview: If dimensions from Server have changed and are bigger,
+      // we need to refetch
+      fetchRemotePreviewRef.current(identifier).then(setCardPreview).catch(function (e) {
+        var wrappedError = (0, _errors.ensureMediaCardError)('remote-preview-fetch-ssr', e, true);
+        setNonCriticalError(wrappedError);
+      });
+    }
+    // CXP-2723 TODO: The above and below preview fetch logic seem very similar and could be revisted
+    // Both compare dimensions, but the above is only for SSR in order to refetchSRRPreview and
+    // will swallow any errors. Below logic only applies when there is no card preview or the dimensions
+    // are bigger.
+    if (fileState && (0, _getCardPreview.shouldResolvePreview)({
+      status: status,
+      fileState: fileState,
+      prevDimensions: prevDimensions,
+      dimensions: dimensions,
+      hasCardPreview: !!cardPreview,
+      isBannedLocalPreview: isBannedLocalPreview,
+      wasResolvedUpfrontPreview: wasResolvedUpfrontPreviewRef.current
+    })) {
+      resolvePreviewRef.current(identifier, fileState);
+    }
+    if (!skipRemote && ssr && !!cardPreview && (0, _getCardPreview.isSSRClientPreview)(cardPreview)) {
+      // Since the SSR preview brings the token in the query params,
+      // We need to fetch the remote preview to be able to cache it,
+      fetchRemotePreviewRef.current(identifier).catch(function () {
+        // No need to log this error.
+        // If preview fails, it will be refetched later
+        //TODO: test this catch
+        // https://product-fabric.atlassian.net/browse/MEX-1071
+      });
+    }
+  }, [cardPreview, dimensions, fetchRemotePreviewRef, fileState, identifier, isBannedLocalPreview, prevDimensions, resolvePreviewRef, skipRemote, ssr, status]);
+
+  //----------------------------------------------------------------//
+  //----------------- set complete status --------------------------//
+  //----------------------------------------------------------------//
+
+  (0, _react.useEffect)(function () {
+    if (previewDidRender &&
+    // We should't complete if status is uploading
+    ['loading-preview', 'processing'].includes(status)) {
+      setStatus('complete');
+      // TODO MEX-788: add test for "do not remove the card preview when unsubscribing".
+      setIsBannedLocalPreview(false); // CXP-2723 TODO: we might be able to remove this??
+    }
+  }, [previewDidRender, status]);
+
+  // CXP-2723 TODO: Create test cases for banning local preview after status is complete
+
+  //----------------------------------------------------------------//
+  //------------------ Subscribe to file state ---------------------//
+  //----------------------------------------------------------------//
+
+  var updateFileStateRef = (0, _useCurrentValueRef.useCurrentValueRef)(function () {
+    if (fileState) {
+      // do not update the card status if the status is final
+      if (['complete', 'error', 'failed-processing'].includes(status)) {
+        return;
+      }
+      if (fileState.status !== 'error') {
+        var mediaType = 'mediaType' in fileState ? fileState.mediaType : undefined;
+        var isPreviewable = !!mediaType && ['audio', 'video', 'image', 'doc'].indexOf(mediaType) > -1;
+        var isPreviewableFileState = !!fileState.preview;
+        var isSupportedLocalPreview = mediaType === 'image' || mediaType === 'video';
+        var hasLocalPreview = !isBannedLocalPreview && isPreviewableFileState && isSupportedLocalPreview && !!fileState.mimeType && (0, _mediaCommon.isMimeTypeSupportedByBrowser)(fileState.mimeType);
+        var hasRemotePreview = (0, _mediaClient.isImageRepresentationReady)(fileState);
+        var hasPreview = hasLocalPreview || hasRemotePreview;
+        var newStatus;
+        switch (fileState.status) {
+          case 'uploading':
+          case 'failed-processing':
+          case 'processing':
+            newStatus = fileState.status;
+            break;
+          case 'processed':
+            if (!isPreviewable || !hasPreview) {
+              newStatus = 'complete';
+              break;
+            }
+            newStatus = 'loading-preview';
+            break;
+          default:
+            newStatus = 'loading';
+        }
+        setStatus(newStatus);
+      } else {
+        var e = new _mediaClientReact.MediaFileStateError(fileState.id, fileState.reason, fileState.message, fileState.details);
+        var errorReason = status === 'uploading' ? 'upload' : 'metadata-fetch';
+        setError(new _errors.MediaCardError(errorReason, e));
+        setStatus('error');
+      }
+    }
+  });
+  (0, _react.useEffect)(function () {
+    updateFileStateRef.current();
+  }, [fileState, updateFileStateRef]);
+  var onImageError = function onImageError(newCardPreview) {
+    if (newCardPreview) {
+      var failedSSRObject = _objectSpread({
+        status: 'fail'
+      }, (0, _analytics.extractErrorInfo)(new _errors.ImageLoadError(newCardPreview.source)));
+      if ((0, _getCardPreview.isSSRClientPreview)(newCardPreview)) {
+        ssrReliabilityRef.current.client = failedSSRObject;
+      }
+
+      /*
+        If the cardPreview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
+      */
+
+      if ((0, _getCardPreview.isSSRDataPreview)(newCardPreview)) {
+        ssrReliabilityRef.current.server = failedSSRObject;
+        ssrReliabilityRef.current.client = failedSSRObject;
+      }
+    }
+
+    // If the dataURI has been replaced, we can dismiss this error
+    if ((newCardPreview === null || newCardPreview === void 0 ? void 0 : newCardPreview.dataURI) !== (cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI)) {
+      return;
+    }
+    var error = new _errors.ImageLoadError(newCardPreview === null || newCardPreview === void 0 ? void 0 : newCardPreview.source);
+    var isLocal = newCardPreview && (0, _getCardPreview.isLocalPreview)(newCardPreview);
+    var isSSR = newCardPreview && ((0, _getCardPreview.isSSRClientPreview)(newCardPreview) || (0, _getCardPreview.isSSRDataPreview)(newCardPreview));
+    if (isLocal || isSSR) {
+      if (isLocal) {
+        setIsBannedLocalPreview(true);
+        setNonCriticalError(error);
+      }
+      var fileImageMode = (0, _mediaClient.imageResizeModeToFileImageMode)(resizeMode);
+      (0, _getCardPreview.removeCardPreviewFromCache)(identifier.id, fileImageMode);
+      setCardPreview(undefined);
+    } else {
+      if (!['complete', 'error', 'failed-processing'].includes(status)) {
+        setStatus('error');
+        setError(error);
+      }
+    }
+  };
+  var onImageLoad = function onImageLoad(newCardPreview) {
+    if (newCardPreview) {
+      if ((0, _getCardPreview.isSSRClientPreview)(newCardPreview) && ssrReliabilityRef.current.client.status === 'unknown') {
+        ssrReliabilityRef.current.client = {
+          status: 'success'
+        };
+      }
+
+      /*
+        If the image loads successfully and it comes from server (global scope / ssrData), it means that we have reused it in client and the success counts for both: server & client.
+      */
+
+      if ((0, _getCardPreview.isSSRDataPreview)(newCardPreview) && ssrReliabilityRef.current.server.status === 'unknown') {
+        ssrReliabilityRef.current.server = {
+          status: 'success'
+        };
+        ssrReliabilityRef.current.client = {
+          status: 'success'
+        };
+      }
+    }
+
+    // If the dataURI has been replaced, we can dismiss this callback
+    if ((newCardPreview === null || newCardPreview === void 0 ? void 0 : newCardPreview.dataURI) !== (cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI)) {
+      return;
+    }
+  };
+
+  //----------------------------------------------------------------//
+  // RETURN
+  //----------------------------------------------------------------//
+
+  var StoreSSRDataScriptComponent = function StoreSSRDataScriptComponent() {
+    var _ssrReliabilityRef$cu;
+    return /*#__PURE__*/_react.default.createElement(_globalScope.StoreSSRDataScript, {
+      identifier: identifier,
+      dataURI: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI,
+      dimensions: requestedDimensions,
+      error: ((_ssrReliabilityRef$cu = ssrReliabilityRef.current.server) === null || _ssrReliabilityRef$cu === void 0 ? void 0 : _ssrReliabilityRef$cu.status) === 'fail' ? ssrReliabilityRef.current.server : undefined
+    });
+  };
+
+  // CXP-2723 TODO: should consider simplifying our analytics, and how
+  // we might get rid of ssrReliabiltyRef from our hook
+  return {
+    cardPreview: cardPreview,
+    error: error,
+    nonCriticalError: nonCriticalError,
+    ssrReliabilityRef: ssrReliabilityRef,
+    onImageError: onImageError,
+    onImageLoad: onImageLoad,
+    StoreSSRDataScript: StoreSSRDataScriptComponent
+  };
+};

package/dist/cjs/inline/loader.js

@@ -119,7 +119,7 @@ var MediaInlineCardLoader = exports.default = /*#__PURE__*/function (_React$Pure
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "77.4.4",
+        packageName: "77.4.6",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/utils/ufoExperiences.js

@@ -14,7 +14,7 @@ var _mediaClient = require("@atlaskit/media-client");
 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 packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.4";
+var packageVersion = "77.4.6";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/es2019/card/card.js

@@ -27,7 +27,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.4.4";
+const packageVersion = "77.4.6";
 export class CardBase extends Component {
   constructor(props) {
     super(props);
@@ -347,6 +347,7 @@ export class CardBase extends Component {
         shouldOpenMediaViewer
       } = this.props;
       const {
+        status,
         cardPreview
       } = this.state;
       const {
@@ -357,7 +358,7 @@ export class CardBase extends Component {
         return;
       }
       const isVideo = metadata && metadata.mediaType === 'video';
-      if (useInlinePlayer && isVideo && !!cardPreview) {
+      if (useInlinePlayer && isVideo && !!cardPreview && status !== 'error') {
         this.setState({
           isPlayingFile: true,
           shouldAutoplay: true
@@ -383,8 +384,10 @@ export class CardBase extends Component {
         });
       }
     });
-    _defineProperty(this, "onInlinePlayerError", () => {
+    _defineProperty(this, "onInlinePlayerError", e => {
       this.setState({
+        error: new MediaCardError('error-file-state', e),
+        status: 'error',
         isPlayingFile: false
       });
     });
@@ -834,7 +837,7 @@ export class CardBase extends Component {
       mimeType
     } = getFileDetails(identifier, fileState);
     const isVideoPlayable = videoIsPlayable(isBannedLocalPreview, fileState, mimeType);
-    if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable) {
+    if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable && status !== 'error') {
       this.setState({
         isPlayingFile: true
       });

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

@@ -28,6 +28,8 @@ export const extractFilePreviewStatus = (fileState, isBannedLocalPreview) => {
     isSupportedByBrowser
   };
 };
+
+// CXP-2723 TODO: Review this in relation to removing status from the hook
 export const isPreviewableStatus = (cardStatus, {
   isPreviewable,
   hasPreview,