@atlaskit/media-card 77.4.4 → 77.4.6

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

@@ -1,31 +1,26 @@
 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 const FileCard = ({
   appearance = 'auto',
   resizeMode = 'crop',
@@ -56,98 +51,18 @@ export const FileCard = ({
   onMouseEnter,
   createAnalyticsEvent
 }) => {
-  var _ssrReliabilityRef$cu;
   //----------------------------------------------------------------//
-  //---------------- State Initializer Functions -------------------//
+  //------------ State, Refs & Initial Values ----------------------//
   //----------------------------------------------------------------//
 
-  const ssrDataRef = useRef();
-  const ssrReliabilityRef = useRef({
-    server: {
-      status: 'unknown'
-    },
-    client: {
-      status: 'unknown'
-    }
-  });
   const [cardElement, setCardElement] = useState(null);
-  const imageURLParams = useMemo(() => ({
-    collection: identifier.collectionName,
-    mode: resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode,
-    ...getRequestedDimensions({
-      dimensions,
-      element: cardElement
-    }),
-    allowAnimated: true
-  }), [cardElement, dimensions, identifier.collectionName, resizeMode]);
-  const getMediaBlobUrlAttrs = useCallback(fileState => {
-    const {
-      id,
-      collectionName: collection
-    } = identifier;
-    const {
-      mimeType,
-      name,
-      size
-    } = getFileDetails(identifier, fileState);
-    return contextId ? {
-      id,
-      collection,
-      contextId,
-      mimeType,
-      name,
-      size,
-      ...(originalDimensions || getRequestedDimensions({
-        dimensions,
-        element: cardElement
-      })),
-      alt
-    } : undefined;
-  }, [alt, cardElement, contextId, dimensions, identifier, originalDimensions]);
-  const 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 = {
-        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] = {
-          status: 'fail',
-          ...extractErrorInfo(e)
-        };
-      }
-    } else {
-      return {
-        dataURI: ssrDataRef.current.dataURI,
-        source: 'ssr-data'
-      };
-    }
-  };
-  const cardPreviewInitializer = () => {
-    let cardPreview;
-    const {
-      id
-    } = identifier;
-    const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
-    cardPreview = getCardPreviewFromCache(id, fileImageMode);
-    if (!cardPreview && ssr) {
-      cardPreview = getSSRPreview(ssr, identifier, mediaClient);
-    }
-    return cardPreview;
-  };
-  const [cardPreview, setCardPreview] = useState(cardPreviewInitializer);
-
-  // 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
-  const [isCardVisible, setIsCardVisible] = useState(() => !isLazy || cardPreview && !isSSRPreview(cardPreview));
+  const requestedDimensions = useMemo(() =>
+  // requested dimensions is eventually an expensive operation if the dimensions are a percentage
+  getRequestedDimensions({
+    dimensions,
+    element: cardElement
+  }), [dimensions, cardElement]);
+  const [isCardVisible, setIsCardVisible] = useState(!isLazy);
   const {
     fileState
   } = useFileState(identifier.id, {
@@ -182,10 +97,58 @@ export const FileCard = ({
   const [status, setStatus] = useState('loading');
   const [isPlayingFile, setIsPlayingFile] = useState(false);
   const [shouldAutoplay, setShouldAutoplay] = useState(false);
+
+  // CXP-2723 TODO: remove isBannedLocalPreview
   const [isBannedLocalPreview, setIsBannedLocalPreview] = useState(false);
   const [previewDidRender, setPreviewDidRender] = useState(false);
+
+  // CXP-2723 TODO: Do we have tests to validate the use of the below attributes
+  const mediaBlobUrlAttrs = useMemo(() => {
+    const {
+      id,
+      collectionName: collection
+    } = identifier;
+    const {
+      mimeType,
+      name,
+      size
+    } = getFileDetails(identifier, fileStateValue);
+    return contextId ? {
+      id,
+      collection,
+      contextId,
+      mimeType,
+      name,
+      size,
+      ...(originalDimensions || requestedDimensions),
+      alt
+    } : undefined;
+  }, [alt, requestedDimensions, contextId, fileStateValue, identifier, originalDimensions]);
+  const {
+    cardPreview,
+    error: previewError,
+    nonCriticalError,
+    ssrReliabilityRef,
+    onImageError: onImageErrorBase,
+    onImageLoad: onImageLoadBase,
+    StoreSSRDataScript
+  } = useFilePreview({
+    mediaBlobUrlAttrs,
+    resizeMode,
+    identifier,
+    ssr,
+    mediaClient,
+    dimensions,
+    requestedDimensions,
+    traceContext,
+    previewDidRender,
+    skipRemote: !isCardVisible
+  });
   const [error, setError] = useState();
-  const wasResolvedUpfrontPreviewRef = useRef(false);
+
+  // CXP-2723 TODO: TEMPORARY VARIABLES
+  const finalError = error || previewError;
+  const finalStatus = finalError ? 'error' : status;
   const [mediaViewerSelectedItem, setMediaViewerSelectedItem] = useState(null);
   const uploadProgressRef = useRef();
   const metadata = useMemo(() => {
@@ -225,7 +188,7 @@ export const FileCard = ({
     };
   }, [fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.status, metadata.id, metadata.mediaType, metadata.mimeType, metadata.size]);
   const computedActions = useMemo(() => {
-    if (status === 'failed-processing' || shouldEnableDownloadButton) {
+    if (finalStatus === 'failed-processing' || shouldEnableDownloadButton) {
       const downloadAction = {
         label: 'Download',
         icon: /*#__PURE__*/React.createElement(DownloadIcon, {
@@ -237,7 +200,7 @@ export const FileCard = ({
     } 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  ------------------------------//
@@ -252,12 +215,17 @@ export const FileCard = ({
         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);
   });
   const fireNonCriticalErrorEventRef = useCurrentValueRef(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(() => {
+    if (nonCriticalError) {
+      fireNonCriticalErrorEventRef.current(nonCriticalError);
+    }
+  }, [nonCriticalError, fireNonCriticalErrorEventRef]);
   const fireScreenEventRef = useCurrentValueRef(() => {
     createAnalyticsEvent && fireScreenEvent(createAnalyticsEvent, fileAttributes);
   });
@@ -283,73 +251,10 @@ export const FileCard = ({
   //----------------------------------------------------------------//
 
   const onImageError = newCardPreview => {
-    if (newCardPreview) {
-      const failedSSRObject = {
-        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;
-    }
-    const error = new ImageLoadError(newCardPreview === null || newCardPreview === void 0 ? void 0 : newCardPreview.source);
-    const isLocal = newCardPreview && isLocalPreview(newCardPreview);
-    const isSSR = newCardPreview && (isSSRClientPreview(newCardPreview) || isSSRDataPreview(newCardPreview));
-    if (isLocal || isSSR) {
-      if (isLocal) {
-        setIsBannedLocalPreview(true);
-        fireNonCriticalErrorEventRef.current && fireNonCriticalErrorEventRef.current(error);
-      }
-      const 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);
   };
   const 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);
   };
   const onCardClick = (event, analyticsEvent) => {
@@ -367,7 +272,7 @@ export const FileCard = ({
       return;
     }
     const isVideo = metadata && metadata.mediaType === 'video';
-    if (useInlinePlayer && isVideo && !!cardPreview) {
+    if (useInlinePlayer && isVideo && !!cardPreview && finalStatus !== 'error') {
       setIsPlayingFile(true);
       setShouldAutoplay(true);
     } else if (shouldOpenMediaViewer) {
@@ -380,196 +285,6 @@ export const FileCard = ({
     }
   };
 
-  //----------------------------------------------------------------//
-  //---------------------- Helper Functions  -----------------------//
-  //----------------------------------------------------------------//
-
-  const fetchRemotePreviewRef = useCurrentValueRef(identifier => {
-    return fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, getMediaBlobUrlAttrs(fileStateValue));
-  });
-  const resolvePreviewRef = useCurrentValueRef(async (identifier, fileState) => {
-    const filePreview = isBannedLocalPreview ? undefined : fileState.status !== 'error' && 'mimeType' in fileState && isMimeTypeSupportedByBrowser(fileState.mimeType) ? fileState.preview : undefined;
-    const isRemotePreviewReady = isImageRepresentationReady(fileState);
-    try {
-      const mode = imageURLParams.mode;
-      const cachedPreview = cardPreviewCache.get(identifier.id, mode);
-      const dimensionsAreBigger = isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, dimensions);
-      if (cachedPreview && !dimensionsAreBigger) {
-        return cachedPreview;
-      }
-      let localPreview;
-      try {
-        if (filePreview) {
-          let value;
-          try {
-            const resolvedFilePreview = await filePreview;
-            value = resolvedFilePreview.value;
-          } catch (e) {
-            throw new LocalPreviewError('local-preview-rejected', e instanceof Error ? e : undefined);
-          }
-          if (typeof value === 'string') {
-            localPreview = {
-              dataURI: value,
-              orientation: 1,
-              source: 'local'
-            };
-          } else if (value instanceof Blob) {
-            const {
-              type
-            } = value;
-            const mediaType = getMediaTypeFromMimeType(type);
-            switch (mediaType) {
-              case 'image':
-                try {
-                  const orientation = await getOrientation(value);
-                  const dataURI = URL.createObjectURL(value);
-                  localPreview = {
-                    dataURI,
-                    orientation,
-                    source: 'local'
-                  };
-                } catch (e) {
-                  throw new LocalPreviewError('local-preview-image', e instanceof Error ? e : undefined);
-                }
-                break;
-              case 'video':
-                try {
-                  const dataURI = await takeSnapshot(value);
-                  localPreview = {
-                    dataURI,
-                    orientation: 1,
-                    source: 'local'
-                  };
-                } catch (e) {
-                  throw new LocalPreviewError('local-preview-video', e instanceof Error ? e : undefined);
-                }
-                break;
-              default:
-                throw new LocalPreviewError('local-preview-unsupported');
-            }
-          } else {
-            throw new LocalPreviewError('local-preview-unsupported');
-          }
-          const preview = {
-            ...localPreview,
-            dimensions
-          };
-          let source;
-          switch (preview.source) {
-            case 'local':
-              source = 'cache-local';
-              break;
-            case 'remote':
-              source = 'cache-remote';
-              break;
-            case 'ssr-server':
-              source = 'cache-ssr-server';
-              break;
-            case 'ssr-client':
-              source = 'cache-ssr-client';
-              break;
-            default:
-              source = preview.source;
-          }
-          // We want to embed some meta context into dataURI for Copy/Paste to work.
-          const mediaBlobUrlAttrs = getMediaBlobUrlAttrs(fileStateValue);
-          const dataURI = mediaBlobUrlAttrs ? addFileAttrsToUrl(preview.dataURI, mediaBlobUrlAttrs) : preview.dataURI;
-          // We store new cardPreview into cache
-          cardPreviewCache.set(identifier.id, mode, {
-            ...preview,
-            source,
-            dataURI
-          });
-          setCardPreview({
-            ...preview,
-            dataURI
-          });
-          return;
-        }
-      } catch (e) {
-        /**
-         * 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(e) || isUnsupportedLocalPreviewError(e) && !isRemotePreviewReady) {
-          fireNonCriticalErrorEventRef.current && fireNonCriticalErrorEventRef.current(e);
-        }
-        /**
-         * No matter the reason why the local preview failed, we break the process
-         * if there is no remote preview available
-         */
-        if (!isRemotePreviewReady) {
-          throw e;
-        }
-      }
-      if (!isRemotePreviewReady) {
-        /**
-         * We throw this in case this function has been called
-         * without checking isRemotePreviewReady first.
-         * If remote preview is not ready, the call to getCardPreviewFromBackend
-         * will generate a console error due to a 404 code
-         */
-        throw new MediaCardError('remote-preview-not-ready');
-      }
-      const remotePreview = await fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, getMediaBlobUrlAttrs(fileStateValue), traceContext);
-      setCardPreview(remotePreview);
-      return;
-    } catch (e) {
-      const wrappedError = ensureMediaCardError('preview-fetch', e);
-      //  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);
-        }
-      }
-    }
-  });
-
-  //----------------------------------------------------------------//
-  //------------ resolveUpfrontPreview useEffect -------------------//
-  //----------------------------------------------------------------//
-  const prevCardPreview = usePrevious(cardPreview);
-  const dimensionsRef = useCurrentValueRef(dimensions);
-  useEffect(() => {
-    const resolveUpfrontPreview = async identifier => {
-      // 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;
-      try {
-        const requestedDimensions = {
-          ...dimensions
-        };
-        const newCardPreview = await fetchRemotePreviewRef.current(identifier);
-        const 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);
-        }
-      } catch (e) {
-        // NO need to log error. If this call fails, a refetch will happen after
-      }
-    };
-    const hadSSRCardPreview = ssr === 'client' && !!prevCardPreview && isSSRClientPreview(prevCardPreview);
-    if ((isCardVisible || hadSSRCardPreview) && !cardPreview && !wasResolvedUpfrontPreviewRef.current) {
-      resolveUpfrontPreview(identifier);
-    }
-  }, [cardPreview, dimensions, dimensionsRef, fetchRemotePreviewRef, identifier, isCardVisible, prevCardPreview, ssr]);
-
   //----------------------------------------------------------------//
   //------------------------ handle fireCopiedEvent   --------------//
   //----------------------------------------------------------------//
@@ -607,64 +322,19 @@ export const FileCard = ({
   //---------------- fetch and resolve card preview ----------------//
   //----------------------------------------------------------------//
 
-  const prevDimensions = usePrevious(dimensions);
+  const prevStatus = usePrevious(finalStatus);
   const prevIsCardVisible = usePrevious(isCardVisible);
-  const prevStatus = usePrevious(status);
   useEffect(() => {
-    if (prevStatus !== undefined && status !== prevStatus) {
+    if (prevStatus !== undefined && finalStatus !== prevStatus) {
       fireOperationalEventRef.current();
     }
-  }, [fireOperationalEventRef, prevStatus, status]);
+  }, [fireOperationalEventRef, prevStatus, finalStatus]);
   useEffect(() => {
-    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)
-     * ----------------------------------------------------
-     */
-
     const 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(e => {
-        const wrappedError = ensureMediaCardError('remote-preview-fetch-ssr', e, true);
-        fireNonCriticalErrorEventRef.current(wrappedError);
-      });
-    }
-    if (fileStateValue && shouldResolvePreview({
-      status,
-      fileState: fileStateValue,
-      prevDimensions,
-      dimensions,
-      hasCardPreview: !!cardPreview,
-      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(() => {
-        // 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 --------------------------//
@@ -673,12 +343,12 @@ export const FileCard = ({
   useEffect(() => {
     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 ----------------------//
@@ -696,22 +366,22 @@ export const FileCard = ({
      * 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(() => {
-    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 -------------------------//
@@ -731,7 +401,7 @@ export const FileCard = ({
   const updateFileStateRef = useCurrentValueRef(() => {
     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') {
@@ -739,7 +409,9 @@ export const FileCard = ({
         const isPreviewable = !!mediaType && ['audio', 'video', 'image', 'doc'].indexOf(mediaType) > -1;
         const isPreviewableFileState = !!fileState.preview;
         const isSupportedLocalPreview = mediaType === 'image' || mediaType === 'video';
-        const hasLocalPreview = !isBannedLocalPreview && isPreviewableFileState && isSupportedLocalPreview && !!fileState.mimeType && isMimeTypeSupportedByBrowser(fileState.mimeType);
+        const hasLocalPreview = !isBannedLocalPreview && isPreviewableFileState &&
+        // CXP-2723 TODO: isPreviewableFileState is most likely redundant
+        isSupportedLocalPreview && !!fileState.mimeType && isMimeTypeSupportedByBrowser(fileState.mimeType);
         const hasRemotePreview = isImageRepresentationReady(fileState);
         const hasPreview = hasLocalPreview || hasRemotePreview;
         let newStatus;
@@ -764,7 +436,7 @@ export const FileCard = ({
         uploadProgressRef.current = newProgress;
       } else {
         const e = new MediaFileStateError(fileState.id, fileState.reason, fileState.message, fileState.details);
-        const errorReason = status === 'uploading' ? 'upload' : 'metadata-fetch';
+        const errorReason = finalStatus === 'uploading' ? 'upload' : 'metadata-fetch';
         setError(new MediaCardError(errorReason, e));
         setStatus('error');
       }
@@ -784,15 +456,18 @@ export const FileCard = ({
     } = identifier;
     const isLazyWithOverride = izLazyOverride === undefined ? isLazy : izLazyOverride;
 
-    // Card can be artificially turned visible before entering the viewport
-    // For example, when we have the image in cache
-    const 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
+    const nativeLazyLoad = isLazyWithOverride && !isCardVisible && cardPreview && isSSRPreview(cardPreview);
     // Force Media Image to always display img for SSR
     const forceSyncDisplay = !!ssr;
-    const mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, status === 'error' || status === 'failed-processing', !!cardPreview, metadata.mediaType);
+    const mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, finalStatus === 'error' || finalStatus === 'failed-processing', !!cardPreview, metadata.mediaType);
     const card = /*#__PURE__*/React.createElement(CardViewV2, {
-      status: cardStatusOverride || status,
-      error: error,
+      status: cardStatusOverride || finalStatus,
+      error: finalError,
       mediaItemType: mediaItemType,
       metadata: metadata,
       cardPreview: cardPreview,
@@ -856,7 +531,9 @@ export const FileCard = ({
     identifier: identifier,
     autoplay: !!shouldAutoplay,
     onFullscreenChange: onFullscreenChange,
-    onError: () => {
+    onError: e => {
+      setError(new MediaCardError('error-file-state', e));
+      setStatus('error');
       setIsPlayingFile(false);
     },
     onClick: onCardClick,
@@ -874,13 +551,5 @@ export const FileCard = ({
     },
     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,
-      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));
 };