@atlaskit/media-card 77.4.4 → 77.4.6

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

@@ -1,40 +1,32 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 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) { _defineProperty(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; }
 import DownloadIcon from '@atlaskit/icon/glyph/download';
-import { RECENTS_COLLECTION, addFileAttrsToUrl, globalMediaEventEmitter, imageResizeModeToFileImageMode, isFileIdentifier, isImageRepresentationReady } from '@atlaskit/media-client';
+import { RECENTS_COLLECTION, globalMediaEventEmitter, isImageRepresentationReady } from '@atlaskit/media-client';
 import { MediaFileStateError, useFileState } from '@atlaskit/media-client-react';
-import { getMediaTypeFromMimeType, getRandomHex, isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
-import { getOrientation } from '@atlaskit/media-ui';
+import { getRandomHex, isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
 import { MediaViewer } from '@atlaskit/media-viewer';
-import React, { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { Suspense, useEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { ImageLoadError, LocalPreviewError, MediaCardError, ensureMediaCardError, isLocalPreviewError, isUnsupportedLocalPreviewError } from '../../errors';
-import { extractErrorInfo } from '../../utils/analytics';
-import { isBigger } from '../../utils/dimensionComparer';
+import { MediaCardError } from '../../errors';
 import getDocument from '../../utils/document';
 import { generateUniqueId } from '../../utils/generateUniqueId';
 import { getRequestedDimensions } from '../../utils/getDataURIDimension';
 import { getMediaCardCursor } from '../../utils/getMediaCardCursor';
-import { getSSRData, StoreSSRDataScript } from '../../utils/globalScope';
 import { getFileDetails } from '../../utils/metadata';
 import { abortUfoExperience, completeUfoExperience, startUfoExperience } from '../../utils/ufoExperiences';
 import { useCurrentValueRef } from '../../utils/useCurrentValueRef';
 import { usePrevious } from '../../utils/usePrevious';
 import { videoIsPlayable } from '../../utils/videoIsPlayable';
-import { takeSnapshot } from '../../utils/videoSnapshot';
 import { ViewportDetector } from '../../utils/viewportDetector';
 import { fireCommencedEvent, fireCopiedEvent, fireNonCriticalErrorEvent, fireOperationalEvent, fireScreenEvent } from '../cardAnalytics';
-import { fetchAndCacheRemotePreview, getCardPreviewFromCache, getSSRCardPreview, isLocalPreview, isSSRClientPreview, isSSRDataPreview, isSSRPreview, removeCardPreviewFromCache, shouldResolvePreview } from '../getCardPreview';
-import cardPreviewCache from '../getCardPreview/cache';
+import { isSSRPreview } from '../getCardPreview';
 import { CardViewV2 } from './cardViewV2';
 import { InlinePlayerLazyV2 } from './inlinePlayerLazyV2';
+import { useFilePreview } from './useFilePreview';
 export var FileCard = function FileCard(_ref) {
-  var _ssrReliabilityRef$cu;
   var _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'auto' : _ref$appearance,
     _ref$resizeMode = _ref.resizeMode,
@@ -68,102 +60,26 @@ export var FileCard = function FileCard(_ref) {
     onMouseEnter = _ref.onMouseEnter,
     createAnalyticsEvent = _ref.createAnalyticsEvent;
   //----------------------------------------------------------------//
-  //---------------- State Initializer Functions -------------------//
+  //------------ State, Refs & Initial Values ----------------------//
   //----------------------------------------------------------------//
 
-  var ssrDataRef = useRef();
-  var ssrReliabilityRef = useRef({
-    server: {
-      status: 'unknown'
-    },
-    client: {
-      status: 'unknown'
-    }
-  });
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     cardElement = _useState2[0],
     setCardElement = _useState2[1];
-  var imageURLParams = useMemo(function () {
-    return _objectSpread(_objectSpread({
-      collection: identifier.collectionName,
-      mode: resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode
-    }, getRequestedDimensions({
-      dimensions: dimensions,
-      element: cardElement
-    })), {}, {
-      allowAnimated: true
-    });
-  }, [cardElement, dimensions, identifier.collectionName, resizeMode]);
-  var getMediaBlobUrlAttrs = useCallback(function (fileState) {
-    var id = identifier.id,
-      collection = identifier.collectionName;
-    var _getFileDetails = 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 || 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 = 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 getSSRCardPreview(ssr, mediaClient, identifier.id, imageURLParams, getMediaBlobUrlAttrs(fileStateValue));
-      } catch (e) {
-        ssrReliabilityRef.current[ssr] = _objectSpread({
-          status: 'fail'
-        }, extractErrorInfo(e));
-      }
-    } else {
-      return {
-        dataURI: ssrDataRef.current.dataURI,
-        source: 'ssr-data'
-      };
-    }
-  };
-  var cardPreviewInitializer = function cardPreviewInitializer() {
-    var cardPreview;
-    var id = identifier.id;
-    var fileImageMode = imageResizeModeToFileImageMode(resizeMode);
-    cardPreview = getCardPreviewFromCache(id, fileImageMode);
-    if (!cardPreview && ssr) {
-      cardPreview = getSSRPreview(ssr, identifier, mediaClient);
-    }
-    return cardPreview;
-  };
-  var _useState3 = useState(cardPreviewInitializer),
+  var requestedDimensions = useMemo(function () {
+    return (
+      // requested dimensions is eventually an expensive operation if the dimensions are a percentage
+      getRequestedDimensions({
+        dimensions: dimensions,
+        element: cardElement
+      })
+    );
+  }, [dimensions, cardElement]);
+  var _useState3 = useState(!isLazy),
     _useState4 = _slicedToArray(_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 = useState(function () {
-      return !isLazy || cardPreview && !isSSRPreview(cardPreview);
-    }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isCardVisible = _useState6[0],
-    setIsCardVisible = _useState6[1];
+    isCardVisible = _useState4[0],
+    setIsCardVisible = _useState4[1];
   var _useFileState = useFileState(identifier.id, {
       skipRemote: !isCardVisible,
       collectionName: identifier.collectionName,
@@ -200,35 +116,79 @@ export var FileCard = function FileCard(_ref) {
       traceId: getRandomHex(8)
     };
   }, []);
-  var _useState7 = useState('loading'),
+  var _useState5 = useState('loading'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    status = _useState6[0],
+    setStatus = _useState6[1];
+  var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    status = _useState8[0],
-    setStatus = _useState8[1];
+    isPlayingFile = _useState8[0],
+    setIsPlayingFile = _useState8[1];
   var _useState9 = useState(false),
     _useState10 = _slicedToArray(_useState9, 2),
-    isPlayingFile = _useState10[0],
-    setIsPlayingFile = _useState10[1];
+    shouldAutoplay = _useState10[0],
+    setShouldAutoplay = _useState10[1];
+
+  // CXP-2723 TODO: remove isBannedLocalPreview
   var _useState11 = useState(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    shouldAutoplay = _useState12[0],
-    setShouldAutoplay = _useState12[1];
+    isBannedLocalPreview = _useState12[0],
+    setIsBannedLocalPreview = _useState12[1];
   var _useState13 = useState(false),
     _useState14 = _slicedToArray(_useState13, 2),
-    isBannedLocalPreview = _useState14[0],
-    setIsBannedLocalPreview = _useState14[1];
-  var _useState15 = 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 = useMemo(function () {
+    var id = identifier.id,
+      collection = identifier.collectionName;
+    var _getFileDetails = 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 = 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 = useState(),
     _useState16 = _slicedToArray(_useState15, 2),
-    previewDidRender = _useState16[0],
-    setPreviewDidRender = _useState16[1];
-  var _useState17 = useState(),
+    error = _useState16[0],
+    setError = _useState16[1];
+
+  // CXP-2723 TODO: TEMPORARY VARIABLES
+  var finalError = error || previewError;
+  var finalStatus = finalError ? 'error' : status;
+  var _useState17 = useState(null),
     _useState18 = _slicedToArray(_useState17, 2),
-    error = _useState18[0],
-    setError = _useState18[1];
-  var wasResolvedUpfrontPreviewRef = useRef(false);
-  var _useState19 = useState(null),
-    _useState20 = _slicedToArray(_useState19, 2),
-    mediaViewerSelectedItem = _useState20[0],
-    setMediaViewerSelectedItem = _useState20[1];
+    mediaViewerSelectedItem = _useState18[0],
+    setMediaViewerSelectedItem = _useState18[1];
   var uploadProgressRef = useRef();
   var metadata = useMemo(function () {
     var getProcessingStatusFromFileState = function getProcessingStatusFromFileState(status) {
@@ -267,7 +227,7 @@ export var FileCard = function FileCard(_ref) {
     };
   }, [fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.status, metadata.id, metadata.mediaType, metadata.mimeType, metadata.size]);
   var computedActions = useMemo(function () {
-    if (status === 'failed-processing' || shouldEnableDownloadButton) {
+    if (finalStatus === 'failed-processing' || shouldEnableDownloadButton) {
       var downloadAction = {
         label: 'Download',
         icon: /*#__PURE__*/React.createElement(DownloadIcon, {
@@ -281,7 +241,7 @@ export var 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  ------------------------------//
@@ -296,12 +256,17 @@ export var FileCard = function FileCard(_ref) {
         durationSinceCommenced: durationSinceCommenced
       }
     };
-    createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliabilityRef.current, error, traceContext, fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.metadataTraceContext);
-    completeUfoExperience(internalOccurrenceKey, status, fileAttributes, fileStateFlagsRef.current, ssrReliabilityRef.current, error);
+    createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, finalStatus, fileAttributes, performanceAttributes, ssrReliabilityRef.current, finalError, traceContext, fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.metadataTraceContext);
+    completeUfoExperience(internalOccurrenceKey, finalStatus, fileAttributes, fileStateFlagsRef.current, ssrReliabilityRef.current, finalError);
   });
   var fireNonCriticalErrorEventRef = useCurrentValueRef(function (error) {
-    createAnalyticsEvent && fireNonCriticalErrorEvent(createAnalyticsEvent, status, fileAttributes, ssrReliabilityRef.current, error, traceContext, fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.metadataTraceContext);
+    createAnalyticsEvent && fireNonCriticalErrorEvent(createAnalyticsEvent, finalStatus, fileAttributes, ssrReliabilityRef.current, error, traceContext, fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.metadataTraceContext);
   });
+  useEffect(function () {
+    if (nonCriticalError) {
+      fireNonCriticalErrorEventRef.current(nonCriticalError);
+    }
+  }, [nonCriticalError, fireNonCriticalErrorEventRef]);
   var fireScreenEventRef = useCurrentValueRef(function () {
     createAnalyticsEvent && fireScreenEvent(createAnalyticsEvent, fileAttributes);
   });
@@ -327,72 +292,10 @@ export var FileCard = function FileCard(_ref) {
   //----------------------------------------------------------------//
 
   var onImageError = function onImageError(newCardPreview) {
-    if (newCardPreview) {
-      var failedSSRObject = _objectSpread({
-        status: 'fail'
-      }, extractErrorInfo(new ImageLoadError(newCardPreview.source)));
-      if (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 (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 ImageLoadError(newCardPreview === null || newCardPreview === void 0 ? void 0 : newCardPreview.source);
-    var isLocal = newCardPreview && isLocalPreview(newCardPreview);
-    var isSSR = newCardPreview && (isSSRClientPreview(newCardPreview) || isSSRDataPreview(newCardPreview));
-    if (isLocal || isSSR) {
-      if (isLocal) {
-        setIsBannedLocalPreview(true);
-        fireNonCriticalErrorEventRef.current && fireNonCriticalErrorEventRef.current(error);
-      }
-      var fileImageMode = imageResizeModeToFileImageMode(resizeMode);
-      isFileIdentifier(identifier) && 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 (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 (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) {
@@ -410,7 +313,7 @@ export var 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) {
@@ -423,264 +326,6 @@ export var FileCard = function FileCard(_ref) {
     }
   };
 
-  //----------------------------------------------------------------//
-  //---------------------- Helper Functions  -----------------------//
-  //----------------------------------------------------------------//
-
-  var fetchRemotePreviewRef = useCurrentValueRef(function (identifier) {
-    return fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, getMediaBlobUrlAttrs(fileStateValue));
-  });
-  var resolvePreviewRef = useCurrentValueRef( /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.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 _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            filePreview = isBannedLocalPreview ? undefined : fileState.status !== 'error' && 'mimeType' in fileState && isMimeTypeSupportedByBrowser(fileState.mimeType) ? fileState.preview : undefined;
-            isRemotePreviewReady = isImageRepresentationReady(fileState);
-            _context.prev = 2;
-            mode = imageURLParams.mode;
-            cachedPreview = cardPreviewCache.get(identifier.id, mode);
-            dimensionsAreBigger = 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 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 = 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 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 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 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 LocalPreviewError('local-preview-video', _context.t3 instanceof Error ? _context.t3 : undefined);
-          case 52:
-            return _context.abrupt("break", 54);
-          case 53:
-            throw new LocalPreviewError('local-preview-unsupported');
-          case 54:
-            _context.next = 57;
-            break;
-          case 56:
-            throw new 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 ? addFileAttrsToUrl(preview.dataURI, mediaBlobUrlAttrs) : preview.dataURI; // We store new cardPreview into cache
-            cardPreviewCache.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 (!isUnsupportedLocalPreviewError(_context.t5) || 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 MediaCardError('remote-preview-not-ready');
-          case 84:
-            _context.next = 86;
-            return 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 = 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 (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 = usePrevious(cardPreview);
-  var dimensionsRef = useCurrentValueRef(dimensions);
-  useEffect(function () {
-    var resolveUpfrontPreview = /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(identifier) {
-        var requestedDimensions, newCardPreview, areValidRequestedDimensions;
-        return _regeneratorRuntime.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 = !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 && isSSRClientPreview(prevCardPreview);
-    if ((isCardVisible || hadSSRCardPreview) && !cardPreview && !wasResolvedUpfrontPreviewRef.current) {
-      resolveUpfrontPreview(identifier);
-    }
-  }, [cardPreview, dimensions, dimensionsRef, fetchRemotePreviewRef, identifier, isCardVisible, prevCardPreview, ssr]);
-
   //----------------------------------------------------------------//
   //------------------------ handle fireCopiedEvent   --------------//
   //----------------------------------------------------------------//
@@ -718,64 +363,19 @@ export var FileCard = function FileCard(_ref) {
   //---------------- fetch and resolve card preview ----------------//
   //----------------------------------------------------------------//
 
-  var prevDimensions = usePrevious(dimensions);
+  var prevStatus = usePrevious(finalStatus);
   var prevIsCardVisible = usePrevious(isCardVisible);
-  var prevStatus = usePrevious(status);
   useEffect(function () {
-    if (prevStatus !== undefined && status !== prevStatus) {
+    if (prevStatus !== undefined && finalStatus !== prevStatus) {
       fireOperationalEventRef.current();
     }
-  }, [fireOperationalEventRef, prevStatus, status]);
+  }, [fireOperationalEventRef, prevStatus, finalStatus]);
   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 && isSSRDataPreview(cardPreview) && 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 = ensureMediaCardError('remote-preview-fetch-ssr', e, true);
-        fireNonCriticalErrorEventRef.current(wrappedError);
-      });
-    }
-    if (fileStateValue && shouldResolvePreview({
-      status: status,
-      fileState: fileStateValue,
-      prevDimensions: prevDimensions,
-      dimensions: dimensions,
-      hasCardPreview: !!cardPreview,
-      isBannedLocalPreview: isBannedLocalPreview,
-      wasResolvedUpfrontPreview: wasResolvedUpfrontPreviewRef.current
-    })) {
-      resolvePreviewRef.current(identifier, fileStateValue);
-    }
-    if (turnedVisible && ssr && !!cardPreview && 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 --------------------------//
@@ -784,12 +384,12 @@ export var FileCard = function FileCard(_ref) {
   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 ----------------------//
@@ -806,22 +406,22 @@ export var 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 ------------------------------//
   //----------------------------------------------------------------//
 
   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 -------------------------//
@@ -841,7 +441,7 @@ export var FileCard = function FileCard(_ref) {
   var updateFileStateRef = 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') {
@@ -849,7 +449,9 @@ export var 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 && isMimeTypeSupportedByBrowser(fileState.mimeType);
+        var hasLocalPreview = !isBannedLocalPreview && isPreviewableFileState &&
+        // CXP-2723 TODO: isPreviewableFileState is most likely redundant
+        isSupportedLocalPreview && !!fileState.mimeType && isMimeTypeSupportedByBrowser(fileState.mimeType);
         var hasRemotePreview = isImageRepresentationReady(fileState);
         var hasPreview = hasLocalPreview || hasRemotePreview;
         var newStatus;
@@ -874,7 +476,7 @@ export var FileCard = function FileCard(_ref) {
         uploadProgressRef.current = newProgress;
       } else {
         var e = new 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 MediaCardError(errorReason, e));
         setStatus('error');
       }
@@ -895,15 +497,18 @@ export var 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 && isSSRPreview(cardPreview);
     // Force Media Image to always display img for SSR
     var forceSyncDisplay = !!ssr;
-    var mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, status === 'error' || status === 'failed-processing', !!cardPreview, metadata.mediaType);
+    var mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, finalStatus === 'error' || finalStatus === 'failed-processing', !!cardPreview, metadata.mediaType);
     var card = /*#__PURE__*/React.createElement(CardViewV2, {
-      status: cardStatusOverride || status,
-      error: error,
+      status: cardStatusOverride || finalStatus,
+      error: finalError,
       mediaItemType: mediaItemType,
       metadata: metadata,
       cardPreview: cardPreview,
@@ -966,7 +571,9 @@ export var FileCard = function FileCard(_ref) {
     identifier: identifier,
     autoplay: !!shouldAutoplay,
     onFullscreenChange: onFullscreenChange,
-    onError: function onError() {
+    onError: function onError(e) {
+      setError(new MediaCardError('error-file-state', e));
+      setStatus('error');
       setIsPlayingFile(false);
     },
     onClick: onCardClick,
@@ -984,13 +591,5 @@ export var FileCard = function FileCard(_ref) {
     },
     contextId: contextId,
     featureFlags: featureFlags
-  }), document.body) : null, ssr === 'server' && /*#__PURE__*/React.createElement(StoreSSRDataScript, {
-    identifier: identifier,
-    dataURI: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI,
-    dimensions: 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.createElement(StoreSSRDataScript, null));
 };