@atlaskit/media-card 77.4.4 → 77.4.6

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

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FileCard = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -15,36 +13,30 @@ var _download = _interopRequireDefault(require("@atlaskit/icon/glyph/download"))
 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 _mediaViewer = require("@atlaskit/media-viewer");
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _errors = require("../../errors");
-var _analytics = require("../../utils/analytics");
-var _dimensionComparer = require("../../utils/dimensionComparer");
 var _document = _interopRequireDefault(require("../../utils/document"));
 var _generateUniqueId = require("../../utils/generateUniqueId");
 var _getDataURIDimension = require("../../utils/getDataURIDimension");
 var _getMediaCardCursor = require("../../utils/getMediaCardCursor");
-var _globalScope = require("../../utils/globalScope");
 var _metadata = require("../../utils/metadata");
 var _ufoExperiences = require("../../utils/ufoExperiences");
 var _useCurrentValueRef = require("../../utils/useCurrentValueRef");
 var _usePrevious = require("../../utils/usePrevious");
 var _videoIsPlayable = require("../../utils/videoIsPlayable");
-var _videoSnapshot = require("../../utils/videoSnapshot");
 var _viewportDetector = require("../../utils/viewportDetector");
 var _cardAnalytics = require("../cardAnalytics");
 var _getCardPreview = require("../getCardPreview");
-var _cache = _interopRequireDefault(require("../getCardPreview/cache"));
 var _cardViewV = require("./cardViewV2");
 var _inlinePlayerLazyV = require("./inlinePlayerLazyV2");
+var _useFilePreview2 = require("./useFilePreview");
 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 FileCard = exports.FileCard = function FileCard(_ref) {
-  var _ssrReliabilityRef$cu;
   var _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'auto' : _ref$appearance,
     _ref$resizeMode = _ref.resizeMode,
@@ -78,102 +70,26 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     onMouseEnter = _ref.onMouseEnter,
     createAnalyticsEvent = _ref.createAnalyticsEvent;
   //----------------------------------------------------------------//
-  //---------------- State Initializer Functions -------------------//
+  //------------ State, Refs & Initial Values ----------------------//
   //----------------------------------------------------------------//
 
-  var ssrDataRef = (0, _react.useRef)();
-  var ssrReliabilityRef = (0, _react.useRef)({
-    server: {
-      status: 'unknown'
-    },
-    client: {
-      status: 'unknown'
-    }
-  });
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     cardElement = _useState2[0],
     setCardElement = _useState2[1];
-  var imageURLParams = (0, _react.useMemo)(function () {
-    return _objectSpread(_objectSpread({
-      collection: identifier.collectionName,
-      mode: resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode
-    }, (0, _getDataURIDimension.getRequestedDimensions)({
-      dimensions: dimensions,
-      element: cardElement
-    })), {}, {
-      allowAnimated: true
-    });
-  }, [cardElement, dimensions, identifier.collectionName, resizeMode]);
-  var getMediaBlobUrlAttrs = (0, _react.useCallback)(function (fileState) {
-    var id = identifier.id,
-      collection = identifier.collectionName;
-    var _getFileDetails = (0, _metadata.getFileDetails)(identifier, fileState),
-      mimeType = _getFileDetails.mimeType,
-      name = _getFileDetails.name,
-      size = _getFileDetails.size;
-    return contextId ? _objectSpread(_objectSpread({
-      id: id,
-      collection: collection,
-      contextId: contextId,
-      mimeType: mimeType,
-      name: name,
-      size: size
-    }, originalDimensions || (0, _getDataURIDimension.getRequestedDimensions)({
-      dimensions: dimensions,
-      element: cardElement
-    })), {}, {
-      alt: alt
-    }) : undefined;
-  }, [alt, cardElement, contextId, dimensions, identifier, originalDimensions]);
-  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, getMediaBlobUrlAttrs(fileStateValue));
-      } 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 _useState3 = (0, _react.useState)(cardPreviewInitializer),
+  var requestedDimensions = (0, _react.useMemo)(function () {
+    return (
+      // requested dimensions is eventually an expensive operation if the dimensions are a percentage
+      (0, _getDataURIDimension.getRequestedDimensions)({
+        dimensions: dimensions,
+        element: cardElement
+      })
+    );
+  }, [dimensions, cardElement]);
+  var _useState3 = (0, _react.useState)(!isLazy),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    cardPreview = _useState4[0],
-    setCardPreview = _useState4[1];
-
-  // If cardPreview is available from local cache or external, `isCardVisible`
-  // should be true to avoid flickers during re-mount of the component
-  // should not be visible for SSR preview, otherwise we'll fire the metadata fetch from
-  // outside the viewport
-  var _useState5 = (0, _react.useState)(function () {
-      return !isLazy || cardPreview && !(0, _getCardPreview.isSSRPreview)(cardPreview);
-    }),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    isCardVisible = _useState6[0],
-    setIsCardVisible = _useState6[1];
+    isCardVisible = _useState4[0],
+    setIsCardVisible = _useState4[1];
   var _useFileState = (0, _mediaClientReact.useFileState)(identifier.id, {
       skipRemote: !isCardVisible,
       collectionName: identifier.collectionName,
@@ -210,35 +126,79 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       traceId: (0, _mediaCommon.getRandomHex)(8)
     };
   }, []);
-  var _useState7 = (0, _react.useState)('loading'),
+  var _useState5 = (0, _react.useState)('loading'),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    status = _useState6[0],
+    setStatus = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    status = _useState8[0],
-    setStatus = _useState8[1];
+    isPlayingFile = _useState8[0],
+    setIsPlayingFile = _useState8[1];
   var _useState9 = (0, _react.useState)(false),
     _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    isPlayingFile = _useState10[0],
-    setIsPlayingFile = _useState10[1];
+    shouldAutoplay = _useState10[0],
+    setShouldAutoplay = _useState10[1];
+
+  // CXP-2723 TODO: remove isBannedLocalPreview
   var _useState11 = (0, _react.useState)(false),
     _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    shouldAutoplay = _useState12[0],
-    setShouldAutoplay = _useState12[1];
+    isBannedLocalPreview = _useState12[0],
+    setIsBannedLocalPreview = _useState12[1];
   var _useState13 = (0, _react.useState)(false),
     _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-    isBannedLocalPreview = _useState14[0],
-    setIsBannedLocalPreview = _useState14[1];
-  var _useState15 = (0, _react.useState)(false),
+    previewDidRender = _useState14[0],
+    setPreviewDidRender = _useState14[1];
+
+  // CXP-2723 TODO: Do we have tests to validate the use of the below attributes
+  var mediaBlobUrlAttrs = (0, _react.useMemo)(function () {
+    var id = identifier.id,
+      collection = identifier.collectionName;
+    var _getFileDetails = (0, _metadata.getFileDetails)(identifier, fileStateValue),
+      mimeType = _getFileDetails.mimeType,
+      name = _getFileDetails.name,
+      size = _getFileDetails.size;
+    return contextId ? _objectSpread(_objectSpread({
+      id: id,
+      collection: collection,
+      contextId: contextId,
+      mimeType: mimeType,
+      name: name,
+      size: size
+    }, originalDimensions || requestedDimensions), {}, {
+      alt: alt
+    }) : undefined;
+  }, [alt, requestedDimensions, contextId, fileStateValue, identifier, originalDimensions]);
+  var _useFilePreview = (0, _useFilePreview2.useFilePreview)({
+      mediaBlobUrlAttrs: mediaBlobUrlAttrs,
+      resizeMode: resizeMode,
+      identifier: identifier,
+      ssr: ssr,
+      mediaClient: mediaClient,
+      dimensions: dimensions,
+      requestedDimensions: requestedDimensions,
+      traceContext: traceContext,
+      previewDidRender: previewDidRender,
+      skipRemote: !isCardVisible
+    }),
+    cardPreview = _useFilePreview.cardPreview,
+    previewError = _useFilePreview.error,
+    nonCriticalError = _useFilePreview.nonCriticalError,
+    ssrReliabilityRef = _useFilePreview.ssrReliabilityRef,
+    onImageErrorBase = _useFilePreview.onImageError,
+    onImageLoadBase = _useFilePreview.onImageLoad,
+    StoreSSRDataScript = _useFilePreview.StoreSSRDataScript;
+  var _useState15 = (0, _react.useState)(),
     _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-    previewDidRender = _useState16[0],
-    setPreviewDidRender = _useState16[1];
-  var _useState17 = (0, _react.useState)(),
+    error = _useState16[0],
+    setError = _useState16[1];
+
+  // CXP-2723 TODO: TEMPORARY VARIABLES
+  var finalError = error || previewError;
+  var finalStatus = finalError ? 'error' : status;
+  var _useState17 = (0, _react.useState)(null),
     _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-    error = _useState18[0],
-    setError = _useState18[1];
-  var wasResolvedUpfrontPreviewRef = (0, _react.useRef)(false);
-  var _useState19 = (0, _react.useState)(null),
-    _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-    mediaViewerSelectedItem = _useState20[0],
-    setMediaViewerSelectedItem = _useState20[1];
+    mediaViewerSelectedItem = _useState18[0],
+    setMediaViewerSelectedItem = _useState18[1];
   var uploadProgressRef = (0, _react.useRef)();
   var metadata = (0, _react.useMemo)(function () {
     var getProcessingStatusFromFileState = function getProcessingStatusFromFileState(status) {
@@ -277,7 +237,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     };
   }, [fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.status, metadata.id, metadata.mediaType, metadata.mimeType, metadata.size]);
   var computedActions = (0, _react.useMemo)(function () {
-    if (status === 'failed-processing' || shouldEnableDownloadButton) {
+    if (finalStatus === 'failed-processing' || shouldEnableDownloadButton) {
       var downloadAction = {
         label: 'Download',
         icon: /*#__PURE__*/_react.default.createElement(_download.default, {
@@ -291,7 +251,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     } else {
       return actions;
     }
-  }, [actions, identifier.collectionName, identifier.id, mediaClient.file, metadata.name, shouldEnableDownloadButton, status]);
+  }, [actions, identifier.collectionName, identifier.id, mediaClient.file, metadata.name, shouldEnableDownloadButton, finalStatus]);
 
   //----------------------------------------------------------------//
   //---------------------- Analytics  ------------------------------//
@@ -306,12 +266,17 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
         durationSinceCommenced: durationSinceCommenced
       }
     };
-    createAnalyticsEvent && (0, _cardAnalytics.fireOperationalEvent)(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliabilityRef.current, error, traceContext, fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.metadataTraceContext);
-    (0, _ufoExperiences.completeUfoExperience)(internalOccurrenceKey, status, fileAttributes, fileStateFlagsRef.current, ssrReliabilityRef.current, error);
+    createAnalyticsEvent && (0, _cardAnalytics.fireOperationalEvent)(createAnalyticsEvent, finalStatus, fileAttributes, performanceAttributes, ssrReliabilityRef.current, finalError, traceContext, fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.metadataTraceContext);
+    (0, _ufoExperiences.completeUfoExperience)(internalOccurrenceKey, finalStatus, fileAttributes, fileStateFlagsRef.current, ssrReliabilityRef.current, finalError);
   });
   var fireNonCriticalErrorEventRef = (0, _useCurrentValueRef.useCurrentValueRef)(function (error) {
-    createAnalyticsEvent && (0, _cardAnalytics.fireNonCriticalErrorEvent)(createAnalyticsEvent, status, fileAttributes, ssrReliabilityRef.current, error, traceContext, fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.metadataTraceContext);
+    createAnalyticsEvent && (0, _cardAnalytics.fireNonCriticalErrorEvent)(createAnalyticsEvent, finalStatus, fileAttributes, ssrReliabilityRef.current, error, traceContext, fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.metadataTraceContext);
   });
+  (0, _react.useEffect)(function () {
+    if (nonCriticalError) {
+      fireNonCriticalErrorEventRef.current(nonCriticalError);
+    }
+  }, [nonCriticalError, fireNonCriticalErrorEventRef]);
   var fireScreenEventRef = (0, _useCurrentValueRef.useCurrentValueRef)(function () {
     createAnalyticsEvent && (0, _cardAnalytics.fireScreenEvent)(createAnalyticsEvent, fileAttributes);
   });
@@ -337,72 +302,10 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
   //----------------------------------------------------------------//
 
   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);
-        fireNonCriticalErrorEventRef.current && fireNonCriticalErrorEventRef.current(error);
-      }
-      var fileImageMode = (0, _mediaClient.imageResizeModeToFileImageMode)(resizeMode);
-      (0, _mediaClient.isFileIdentifier)(identifier) && (0, _getCardPreview.removeCardPreviewFromCache)(identifier.id, fileImageMode);
-      setCardPreview(undefined);
-    } else {
-      if (!['complete', 'error', 'failed-processing'].includes(status)) {
-        setStatus('error');
-        setError(error);
-      }
-    }
+    onImageErrorBase(newCardPreview);
   };
   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;
-    }
+    onImageLoadBase(newCardPreview);
     setPreviewDidRender(true);
   };
   var onCardClick = function onCardClick(event, analyticsEvent) {
@@ -420,7 +323,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       return;
     }
     var isVideo = metadata && metadata.mediaType === 'video';
-    if (useInlinePlayer && isVideo && !!cardPreview) {
+    if (useInlinePlayer && isVideo && !!cardPreview && finalStatus !== 'error') {
       setIsPlayingFile(true);
       setShouldAutoplay(true);
     } else if (shouldOpenMediaViewer) {
@@ -433,264 +336,6 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     }
   };
 
-  //----------------------------------------------------------------//
-  //---------------------- Helper Functions  -----------------------//
-  //----------------------------------------------------------------//
-
-  var fetchRemotePreviewRef = (0, _useCurrentValueRef.useCurrentValueRef)(function (identifier) {
-    return (0, _getCardPreview.fetchAndCacheRemotePreview)(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, getMediaBlobUrlAttrs(fileStateValue));
-  });
-  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, mediaBlobUrlAttrs, 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 = 75;
-              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.
-            mediaBlobUrlAttrs = getMediaBlobUrlAttrs(fileStateValue);
-            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 75:
-            _context.next = 82;
-            break;
-          case 77:
-            _context.prev = 77;
-            _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) {
-              fireNonCriticalErrorEventRef.current && fireNonCriticalErrorEventRef.current(_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 = 82;
-              break;
-            }
-            throw _context.t5;
-          case 82:
-            if (isRemotePreviewReady) {
-              _context.next = 84;
-              break;
-            }
-            throw new _errors.MediaCardError('remote-preview-not-ready');
-          case 84:
-            _context.next = 86;
-            return (0, _getCardPreview.fetchAndCacheRemotePreview)(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, getMediaBlobUrlAttrs(fileStateValue), traceContext);
-          case 86:
-            remotePreview = _context.sent;
-            setCardPreview(remotePreview);
-            return _context.abrupt("return");
-          case 91:
-            _context.prev = 91;
-            _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 95:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[2, 91], [8, 77], [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 requestedDimensions, newCardPreview, areValidRequestedDimensions;
-        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;
-              requestedDimensions = _objectSpread({}, dimensions);
-              _context2.next = 5;
-              return fetchRemotePreviewRef.current(identifier);
-            case 5:
-              newCardPreview = _context2.sent;
-              areValidRequestedDimensions = !(0, _dimensionComparer.isBigger)(requestedDimensions, 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 (areValidRequestedDimensions) {
-                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);
-    if ((isCardVisible || hadSSRCardPreview) && !cardPreview && !wasResolvedUpfrontPreviewRef.current) {
-      resolveUpfrontPreview(identifier);
-    }
-  }, [cardPreview, dimensions, dimensionsRef, fetchRemotePreviewRef, identifier, isCardVisible, prevCardPreview, ssr]);
-
   //----------------------------------------------------------------//
   //------------------------ handle fireCopiedEvent   --------------//
   //----------------------------------------------------------------//
@@ -728,64 +373,19 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
   //---------------- fetch and resolve card preview ----------------//
   //----------------------------------------------------------------//
 
-  var prevDimensions = (0, _usePrevious.usePrevious)(dimensions);
+  var prevStatus = (0, _usePrevious.usePrevious)(finalStatus);
   var prevIsCardVisible = (0, _usePrevious.usePrevious)(isCardVisible);
-  var prevStatus = (0, _usePrevious.usePrevious)(status);
   (0, _react.useEffect)(function () {
-    if (prevStatus !== undefined && status !== prevStatus) {
+    if (prevStatus !== undefined && finalStatus !== prevStatus) {
       fireOperationalEventRef.current();
     }
-  }, [fireOperationalEventRef, prevStatus, status]);
+  }, [fireOperationalEventRef, prevStatus, finalStatus]);
   (0, _react.useEffect)(function () {
-    var _ssrDataRef$current3;
-    /**
-     * Variable turnedVisible should only be true when media card
-     * was invisible in the previous state and is visible in the current one
-     *
-     * prevIsCardVisible | isCardVisible |  turnedVisible
-     * ----------------------------------------------------
-     *       false       |    false      |      false
-     *       false       |    true       |      true
-     *       true        |    true       |      false
-     *       true        |    false      |      false       (unreachable case)
-     * ----------------------------------------------------
-     */
-
     var turnedVisible = !prevIsCardVisible && isCardVisible;
     if (turnedVisible) {
       fireCommencedEventRef.current();
     }
-    if (cardPreview && turnedVisible && (0, _getCardPreview.isSSRDataPreview)(cardPreview) && (0, _dimensionComparer.isBigger)((_ssrDataRef$current3 = ssrDataRef.current) === null || _ssrDataRef$current3 === void 0 ? void 0 : _ssrDataRef$current3.dimensions, dimensions)) {
-      // If dimensions from Server have changed and are bigger,
-      // we need to refetch
-      // refetchSRRPreview
-      fetchRemotePreviewRef.current(identifier).then(setCardPreview).catch(function (e) {
-        var wrappedError = (0, _errors.ensureMediaCardError)('remote-preview-fetch-ssr', e, true);
-        fireNonCriticalErrorEventRef.current(wrappedError);
-      });
-    }
-    if (fileStateValue && (0, _getCardPreview.shouldResolvePreview)({
-      status: status,
-      fileState: fileStateValue,
-      prevDimensions: prevDimensions,
-      dimensions: dimensions,
-      hasCardPreview: !!cardPreview,
-      isBannedLocalPreview: isBannedLocalPreview,
-      wasResolvedUpfrontPreview: wasResolvedUpfrontPreviewRef.current
-    })) {
-      resolvePreviewRef.current(identifier, fileStateValue);
-    }
-    if (turnedVisible && 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, fileStateValue, fireCommencedEventRef, fireNonCriticalErrorEventRef, identifier, isBannedLocalPreview, isCardVisible, prevDimensions, prevIsCardVisible, resolvePreviewRef, ssr, status]);
+  }, [fireCommencedEventRef, isCardVisible, prevIsCardVisible]);
 
   //----------------------------------------------------------------//
   //----------------- set complete status --------------------------//
@@ -794,12 +394,12 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
   (0, _react.useEffect)(function () {
     if (previewDidRender &&
     // We should't complete if status is uploading
-    ['loading-preview', 'processing'].includes(status)) {
+    ['loading-preview', 'processing'].includes(finalStatus)) {
       setStatus('complete');
       // TODO MEX-788: add test for "do not remove the card preview when unsubscribing".
       setIsBannedLocalPreview(false);
     }
-  }, [previewDidRender, status]);
+  }, [previewDidRender, finalStatus]);
 
   //----------------------------------------------------------------//
   //----------------- set isPlayingFile state ----------------------//
@@ -816,22 +416,22 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
      * in order to avoid race conditions of the ViewportDector being unmounted before
      * it is able to set isCardVisible to true.
      */
-    isCardVisible && isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable) {
+    isCardVisible && isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable && finalStatus !== 'error') {
       setIsPlayingFile(true);
     }
-  }, [isCardVisible, disableOverlay, fileAttributes.fileMediatype, fileStateValue, identifier, isBannedLocalPreview, isPlayingFile, useInlinePlayer]);
+  }, [isCardVisible, disableOverlay, fileAttributes.fileMediatype, fileStateValue, identifier, isBannedLocalPreview, isPlayingFile, finalStatus, useInlinePlayer]);
 
   //----------------------------------------------------------------//
   //----------------- fireScreenEvent ------------------------------//
   //----------------------------------------------------------------//
 
   (0, _react.useEffect)(function () {
-    if (prevStatus !== undefined && status !== prevStatus) {
-      if (status === 'complete' || fileAttributes.fileMediatype === 'video' && !!cardPreview && status === 'processing') {
+    if (prevStatus !== undefined && finalStatus !== prevStatus) {
+      if (finalStatus === 'complete' || fileAttributes.fileMediatype === 'video' && !!cardPreview && finalStatus === 'processing') {
         fireScreenEventRef.current();
       }
     }
-  }, [status, prevStatus, fileAttributes, cardPreview, fireScreenEventRef]);
+  }, [finalStatus, prevStatus, fileAttributes, cardPreview, fireScreenEventRef]);
 
   //----------------------------------------------------------------//
   //----------------- abort UFO experience -------------------------//
@@ -851,7 +451,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
   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)) {
+      if (['complete', 'error', 'failed-processing'].includes(finalStatus)) {
         return;
       }
       if (fileState.status !== 'error') {
@@ -859,7 +459,9 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
         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 hasLocalPreview = !isBannedLocalPreview && isPreviewableFileState &&
+        // CXP-2723 TODO: isPreviewableFileState is most likely redundant
+        isSupportedLocalPreview && !!fileState.mimeType && (0, _mediaCommon.isMimeTypeSupportedByBrowser)(fileState.mimeType);
         var hasRemotePreview = (0, _mediaClient.isImageRepresentationReady)(fileState);
         var hasPreview = hasLocalPreview || hasRemotePreview;
         var newStatus;
@@ -884,7 +486,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
         uploadProgressRef.current = newProgress;
       } else {
         var e = new _mediaClientReact.MediaFileStateError(fileState.id, fileState.reason, fileState.message, fileState.details);
-        var errorReason = status === 'uploading' ? 'upload' : 'metadata-fetch';
+        var errorReason = finalStatus === 'uploading' ? 'upload' : 'metadata-fetch';
         setError(new _errors.MediaCardError(errorReason, e));
         setStatus('error');
       }
@@ -905,15 +507,18 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     var mediaItemType = identifier.mediaItemType;
     var isLazyWithOverride = izLazyOverride === undefined ? isLazy : izLazyOverride;
 
-    // Card can be artificially turned visible before entering the viewport
-    // For example, when we have the image in cache
-    var nativeLazyLoad = isLazyWithOverride && !isCardVisible;
+    // We should natively lazy load an SSR preview when card is not visible,
+    // otherwise we'll fire the metadata fetch from outside the viewport
+    // Side note: We should not lazy load if the cardPreview is available from local cache,
+    // in order to avoid flickers during re-mount of the component
+    // CXP-2723 TODO: Create test cases for the above scenarios
+    var nativeLazyLoad = isLazyWithOverride && !isCardVisible && cardPreview && (0, _getCardPreview.isSSRPreview)(cardPreview);
     // Force Media Image to always display img for SSR
     var forceSyncDisplay = !!ssr;
-    var mediaCardCursor = (0, _getMediaCardCursor.getMediaCardCursor)(!!useInlinePlayer, !!shouldOpenMediaViewer, status === 'error' || status === 'failed-processing', !!cardPreview, metadata.mediaType);
+    var mediaCardCursor = (0, _getMediaCardCursor.getMediaCardCursor)(!!useInlinePlayer, !!shouldOpenMediaViewer, finalStatus === 'error' || finalStatus === 'failed-processing', !!cardPreview, metadata.mediaType);
     var card = /*#__PURE__*/_react.default.createElement(_cardViewV.CardViewV2, {
-      status: cardStatusOverride || status,
-      error: error,
+      status: cardStatusOverride || finalStatus,
+      error: finalError,
       mediaItemType: mediaItemType,
       metadata: metadata,
       cardPreview: cardPreview,
@@ -976,7 +581,9 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     identifier: identifier,
     autoplay: !!shouldAutoplay,
     onFullscreenChange: onFullscreenChange,
-    onError: function onError() {
+    onError: function onError(e) {
+      setError(new _errors.MediaCardError('error-file-state', e));
+      setStatus('error');
       setIsPlayingFile(false);
     },
     onClick: onCardClick,
@@ -994,13 +601,5 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     },
     contextId: contextId,
     featureFlags: featureFlags
-  }), document.body) : null, ssr === 'server' && /*#__PURE__*/_react.default.createElement(_globalScope.StoreSSRDataScript, {
-    identifier: identifier,
-    dataURI: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI,
-    dimensions: (0, _getDataURIDimension.getRequestedDimensions)({
-      dimensions: dimensions,
-      element: cardElement
-    }),
-    error: ((_ssrReliabilityRef$cu = ssrReliabilityRef.current.server) === null || _ssrReliabilityRef$cu === void 0 ? void 0 : _ssrReliabilityRef$cu.status) === 'fail' ? ssrReliabilityRef.current.server : undefined
-  }));
+  }), document.body) : null, ssr === 'server' && /*#__PURE__*/_react.default.createElement(StoreSSRDataScript, null));
 };