@atlaskit/media-card 77.6.1 → 77.6.3

package/dist/cjs/utils/ufoExperiences.js

@@ -14,7 +14,7 @@ var _mediaClient = require("@atlaskit/media-client");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.6.1";
+var packageVersion = "77.6.3";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/es2019/card/card.js

@@ -27,7 +27,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.6.1";
+const packageVersion = "77.6.3";
 export class CardBase extends Component {
   constructor(props) {
     super(props);

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

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.6.1";
+const packageVersion = "77.6.3";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

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

@@ -7,7 +7,7 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.6.1";
+const packageVersion = "77.6.3";
 export const CardV2Base = ({
   identifier,
   ...otherProps

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

@@ -133,7 +133,7 @@ export const FileCard = ({
     } : undefined;
   }, [alt, previewDimensions, contextId, fileStateValue, identifier, originalDimensions]);
   const {
-    cardPreview,
+    preview,
     error: previewError,
     nonCriticalError,
     ssrReliabilityRef,
@@ -278,7 +278,7 @@ export const FileCard = ({
       return;
     }
     const isVideo = metadata && metadata.mediaType === 'video';
-    if (useInlinePlayer && isVideo && !!cardPreview && finalStatus !== 'error') {
+    if (useInlinePlayer && isVideo && !!preview && finalStatus !== 'error') {
       setIsPlayingFile(true);
       setShouldAutoplay(true);
     } else if (shouldOpenMediaViewer) {
@@ -383,11 +383,11 @@ export const FileCard = ({
 
   useEffect(() => {
     if (prevStatus !== undefined && finalStatus !== prevStatus) {
-      if (finalStatus === 'complete' || fileAttributes.fileMediatype === 'video' && !!cardPreview && finalStatus === 'processing') {
+      if (finalStatus === 'complete' || fileAttributes.fileMediatype === 'video' && !!preview && finalStatus === 'processing') {
         fireScreenEventRef.current();
       }
     }
-  }, [finalStatus, prevStatus, fileAttributes, cardPreview, fireScreenEventRef]);
+  }, [finalStatus, prevStatus, fileAttributes, preview, fireScreenEventRef]);
 
   //----------------------------------------------------------------//
   //----------------- abort UFO experience -------------------------//
@@ -467,16 +467,16 @@ export const FileCard = ({
     // 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);
+    const nativeLazyLoad = isLazyWithOverride && !isCardVisible && preview && isSSRPreview(preview);
     // Force Media Image to always display img for SSR
     const forceSyncDisplay = !!ssr;
-    const mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, finalStatus === 'error' || finalStatus === 'failed-processing', !!cardPreview, metadata.mediaType);
+    const mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, finalStatus === 'error' || finalStatus === 'failed-processing', !!preview, metadata.mediaType);
     const card = /*#__PURE__*/React.createElement(LoadedCardView, {
       status: cardStatusOverride || finalStatus,
       error: finalError,
       mediaItemType: mediaItemType,
       metadata: metadata,
-      cardPreview: cardPreview,
+      cardPreview: preview,
       alt: alt,
       resizeMode: resizeMode,
       dimensions: cardDimensions,
@@ -544,7 +544,7 @@ export const FileCard = ({
     selected: selected,
     ref: setCardElement,
     testId: testId,
-    cardPreview: cardPreview
+    cardPreview: preview
   })) : renderCard(), mediaViewerSelectedItem ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
     collectionName: collectionName,
     items: mediaViewerItems || [],

package/dist/es2019/card/v2/useFilePreview/getPreview/getPreview.js

@@ -33,7 +33,7 @@ const extendAndCachePreview = (id, mode, preview, mediaBlobUrlAttrs) => {
     dataURI
   };
 };
-export const getSSRCardPreview = (ssr, mediaClient, id, params, mediaBlobUrlAttrs) => {
+export const getSSRPreview = (ssr, mediaClient, id, params, mediaBlobUrlAttrs) => {
   let dataURI;
   try {
     const rawDataURI = mediaClient.getImageUrlSync(id, params);

package/dist/es2019/card/v2/useFilePreview/getPreview/index.js

@@ -1,3 +1,3 @@
 export { mediaFilePreviewCache } from './cache';
 export { isPreviewableStatus, extractFilePreviewStatus } from './filePreviewStatus';
-export { getSSRCardPreview, isLocalPreview, isSSRClientPreview, isSSRDataPreview, getAndCacheRemotePreview, getAndCacheLocalPreview } from './getPreview';
+export { getSSRPreview, isLocalPreview, isSSRClientPreview, isSSRDataPreview, getAndCacheRemotePreview, getAndCacheLocalPreview } from './getPreview';

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

@@ -1,12 +1,12 @@
 import { imageResizeModeToFileImageMode, isImageRepresentationReady } from '@atlaskit/media-client';
 import { MediaFileStateError, useFileState, useMediaClient } from '@atlaskit/media-client-react';
 import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ensureMediaFilePreviewError, ImageLoadError, isLocalPreviewError, isUnsupportedLocalPreviewError, MediaFilePreviewError } from './errors';
 import { extractErrorInfo } from './analytics';
 import { isBigger, createRequestDimensions, useCurrentValueRef, usePrevious } from './helpers';
 import { generateScriptProps, getSSRData } from './globalScope';
-import { getAndCacheRemotePreview, getSSRCardPreview, isLocalPreview, isSSRClientPreview, isSSRDataPreview, isPreviewableStatus, extractFilePreviewStatus, mediaFilePreviewCache, getAndCacheLocalPreview } from './getPreview';
+import { getAndCacheRemotePreview, getSSRPreview, isLocalPreview, isSSRClientPreview, isSSRDataPreview, isPreviewableStatus, extractFilePreviewStatus, mediaFilePreviewCache, getAndCacheLocalPreview } from './getPreview';
 export const useFilePreview = ({
   resizeMode = 'crop',
   identifier,
@@ -25,54 +25,52 @@ export const useFilePreview = ({
   const wasResolvedUpfrontPreviewRef = useRef(false);
   const ssrReliabilityRef = useRef(initialSsrReliability);
   const requestDimensions = useMemo(() => dimensions ? createRequestDimensions(dimensions) : undefined, [dimensions]);
+  const requestDimensionsRef = useCurrentValueRef(requestDimensions);
+  const prevRequestDimensions = usePrevious(requestDimensions);
   const imageURLParams = useMemo(() => ({
     collection: identifier.collectionName,
     mode: resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode,
     ...requestDimensions,
     allowAnimated: true
   }), [requestDimensions, identifier.collectionName, resizeMode]);
-  const getSSRPreview = (ssr, identifier, mediaClient) => {
-    const ssrData = getSSRData(identifier);
-    if (ssrData !== null && ssrData !== void 0 && ssrData.error) {
-      ssrReliabilityRef.current.server = {
-        status: 'fail',
-        ...ssrData.error
-      };
+  const previewInitializer = () => {
+    const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
+    const preview = mediaFilePreviewCache.get(identifier.id, fileImageMode);
+    if (preview) {
+      return preview;
     }
-    if (!(ssrData !== null && ssrData !== void 0 && ssrData.dataURI)) {
-      try {
-        return getSSRCardPreview(ssr, mediaClient, identifier.id, imageURLParams, mediaBlobUrlAttrs);
-      } catch (e) {
-        ssrReliabilityRef.current[ssr] = {
+    if (ssr) {
+      const ssrData = getSSRData(identifier);
+      if (ssrData !== null && ssrData !== void 0 && ssrData.error) {
+        ssrReliabilityRef.current.server = {
           status: 'fail',
-          ...extractErrorInfo(e)
+          ...ssrData.error
+        };
+      }
+      if (!(ssrData !== null && ssrData !== void 0 && ssrData.dataURI)) {
+        try {
+          return getSSRPreview(ssr, mediaClient, identifier.id, imageURLParams, mediaBlobUrlAttrs);
+        } catch (e) {
+          ssrReliabilityRef.current[ssr] = {
+            status: 'fail',
+            ...extractErrorInfo(e)
+          };
+        }
+      } else {
+        const {
+          dimensions,
+          dataURI
+        } = ssrData;
+        return {
+          dataURI,
+          dimensions,
+          source: 'ssr-data'
         };
       }
-    } else {
-      const {
-        dimensions,
-        dataURI
-      } = ssrData;
-      return {
-        dataURI,
-        dimensions,
-        source: 'ssr-data'
-      };
-    }
-  };
-  const cardPreviewInitializer = () => {
-    let cardPreview;
-    const {
-      id
-    } = identifier;
-    const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
-    cardPreview = mediaFilePreviewCache.get(id, fileImageMode);
-    if (!cardPreview && ssr) {
-      cardPreview = getSSRPreview(ssr, identifier, mediaClient);
     }
-    return cardPreview;
   };
-  const [cardPreview, setCardPreview] = useState(cardPreviewInitializer);
+  const [preview, setPreview] = useState(previewInitializer);
+  const prevPreview = usePrevious(preview);
   const {
     fileState
   } = useFileState(identifier.id, {
@@ -80,17 +78,142 @@ export const useFilePreview = ({
     collectionName: identifier.collectionName,
     occurrenceKey: identifier.occurrenceKey
   });
+
+  //----------------------------------------------------------------
+  // Update status
+  //----------------------------------------------------------------
+
+  // TOOD: make a full hook reset (remount) on New identifier or client
   useEffect(() => {
     setStatus('loading');
   }, [identifier]);
+  const updateFileStateRef = useCurrentValueRef(() => {
+    if (fileState) {
+      // do not update the status if the status is final
+      if (['complete', 'error', 'failed-processing'].includes(status)) {
+        return;
+      }
+      if (fileState.status !== 'error') {
+        const mediaType = 'mediaType' in fileState ? fileState.mediaType : undefined;
+        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 hasRemotePreview = isImageRepresentationReady(fileState);
+        const hasPreview = hasLocalPreview || hasRemotePreview;
+        let newStatus;
+        switch (fileState.status) {
+          case 'uploading':
+          case 'failed-processing':
+          case 'processing':
+            newStatus = fileState.status;
+            break;
+          case 'processed':
+            if (!isPreviewable || !hasPreview) {
+              newStatus = 'complete';
+              break;
+            }
+            newStatus = 'loading-preview';
+            break;
+          default:
+            newStatus = 'loading';
+        }
+        setStatus(newStatus);
+      } else {
+        const e = new MediaFileStateError(fileState.id, fileState.reason, fileState.message, fileState.details);
+        const errorReason = status === 'uploading' ? 'upload' : 'metadata-fetch';
+        setError(new MediaFilePreviewError(errorReason, e));
+        setStatus('error');
+      }
+    }
+  });
+  useEffect(() => {
+    updateFileStateRef.current();
+  }, [fileState, updateFileStateRef]);
+  useEffect(() => {
+    if (previewDidRender &&
+    // We should't complete if status is uploading
+    ['loading-preview', 'processing'].includes(status)) {
+      setStatus('complete');
+      // TODO MEX-788: add test for "do not remove the preview when unsubscribing".
+      setIsBannedLocalPreview(false); // CXP-2723 TODO: we might be able to remove this??
+    }
+  }, [previewDidRender, status]);
 
-  //----------------------------------------------------------------//
-  //---------------------- Helper Functions  -----------------------//
-  //----------------------------------------------------------------//
+  // CXP-2723 TODO: Create test cases for banning local preview after status is complete
 
-  const fetchRemotePreviewRef = useCurrentValueRef(identifier => {
+  //----------------------------------------------------------------
+  // Preview Fetch Helper
+  //----------------------------------------------------------------
+  const getAndCacheRemotePreviewRef = useCurrentValueRef(() => {
     return getAndCacheRemotePreview(mediaClient, identifier.id, requestDimensions || {}, imageURLParams, mediaBlobUrlAttrs, traceContext);
   });
+
+  //----------------------------------------------------------------
+  // Cache SSR Preview
+  //----------------------------------------------------------------
+  useEffect(() => {
+    if (!skipRemote && ssr && !!preview && isSSRClientPreview(preview)) {
+      // Since the SSR preview brings the token in the query params,
+      // We need to fetch the remote preview to be able to cache it,
+      getAndCacheRemotePreviewRef.current().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
+      });
+    }
+  }, [preview, identifier, skipRemote, ssr, getAndCacheRemotePreviewRef]);
+
+  //----------------------------------------------------------------
+  // Refetch SRR Preview if dimensions from Server have changed and are bigger,
+  //----------------------------------------------------------------
+  useEffect(() => {
+    // CXP-2813 TODO: This is called too many times if the refetch failed. Should be called only once
+    if (preview && !skipRemote && isSSRDataPreview(preview) && isBigger(preview.dimensions, requestDimensions)) {
+      getAndCacheRemotePreviewRef.current().then(setPreview).catch(e => {
+        const wrappedError = ensureMediaFilePreviewError('remote-preview-fetch-ssr', e, true);
+        setNonCriticalError(wrappedError);
+      });
+    }
+  }, [getAndCacheRemotePreviewRef, identifier, preview, requestDimensions, skipRemote]);
+
+  //----------------------------------------------------------------
+  // Upfront Preview
+  //----------------------------------------------------------------
+  useEffect(() => {
+    const resolveUpfrontPreview = async () => {
+      // 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 fetchedDimensions = {
+          ...requestDimensions
+        };
+        const newPreview = await getAndCacheRemotePreviewRef.current();
+        const areValidFetchedDimensions = !isBigger(fetchedDimensions, requestDimensionsRef.current);
+
+        // If there are new and bigger dimensions in the props, and the upfront preview is still resolving,
+        // the fetched preview is no longer valid, and thus, we dismiss it
+        if (areValidFetchedDimensions) {
+          setPreview(newPreview);
+        }
+      } catch (e) {
+        // NO need to log error. If this call fails, a refetch will happen after
+      }
+    };
+
+    // CXP-2723 TODO: `hadSSRPreview` is most likely redundant
+    const hadSSRPreview = ssr === 'client' && !!prevPreview && isSSRClientPreview(prevPreview);
+    if (!preview && !wasResolvedUpfrontPreviewRef.current && (!skipRemote || hadSSRPreview)) {
+      resolveUpfrontPreview();
+    }
+  }, [preview, requestDimensions, requestDimensionsRef, getAndCacheRemotePreviewRef, identifier, skipRemote, prevPreview, ssr]);
+
+  //----------------------------------------------------------------
+  // Fetch Preview
+  //----------------------------------------------------------------
+
   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);
@@ -104,7 +227,7 @@ export const useFilePreview = ({
       try {
         if (filePreview) {
           const localPreview = await getAndCacheLocalPreview(identifier.id, filePreview, requestDimensions || {}, mode, mediaBlobUrlAttrs);
-          setCardPreview(localPreview);
+          setPreview(localPreview);
           return;
         }
       } catch (e) {
@@ -139,8 +262,8 @@ export const useFilePreview = ({
          */
         throw new MediaFilePreviewError('remote-preview-not-ready');
       }
-      const remotePreview = await fetchRemotePreviewRef.current(identifier);
-      setCardPreview(remotePreview);
+      const remotePreview = await getAndCacheRemotePreviewRef.current();
+      setPreview(remotePreview);
       return;
     } catch (e) {
       const wrappedError = ensureMediaFilePreviewError('preview-fetch', e);
@@ -159,165 +282,43 @@ export const useFilePreview = ({
       }
     }
   });
-
-  //----------------------------------------------------------------//
-  //------------ resolveUpfrontPreview useEffect -------------------//
-  //----------------------------------------------------------------//
-  const prevCardPreview = usePrevious(cardPreview);
-  const requestDimensionsRef = useCurrentValueRef(requestDimensions);
-  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 fetchedDimensions = {
-          ...requestDimensions
-        };
-        const newCardPreview = await fetchRemotePreviewRef.current(identifier);
-        const areValidFetchedDimensions = !isBigger(fetchedDimensions, requestDimensionsRef.current);
-
-        // If there are new and bigger dimensions in the props, and the upfront preview is still resolving,
-        // the fetched preview is no longer valid, and thus, we dismiss it
-        if (areValidFetchedDimensions) {
-          setCardPreview(newCardPreview);
-        }
-      } catch (e) {
-        // NO need to log error. If this call fails, a refetch will happen after
-      }
-    };
-    const hadSSRCardPreview = ssr === 'client' && !!prevCardPreview && isSSRClientPreview(prevCardPreview);
-
-    // CXP-2723 TODO: `hadSSRCardPreview` is most likely redundant
-    if (!wasResolvedUpfrontPreviewRef.current && (!skipRemote || hadSSRCardPreview) && !cardPreview) {
-      resolveUpfrontPreview(identifier);
-    }
-  }, [cardPreview, requestDimensions, requestDimensionsRef, fetchRemotePreviewRef, identifier, skipRemote, prevCardPreview, ssr]);
-
-  //----------------------------------------------------------------//
-  //---------------- fetch and resolve card preview ----------------//
-  //----------------------------------------------------------------//
-
-  const prevRequestDimensions = usePrevious(requestDimensions);
   useEffect(() => {
-    // CXP-2813 TODO: This is called too many times if the refetch failed. Should be called only once
-    if (cardPreview && !skipRemote && isSSRDataPreview(cardPreview) && isBigger(cardPreview.dimensions, requestDimensions)) {
-      // refetchSRRPreview: If dimensions from Server have changed and are bigger,
-      // we need to refetch
-      fetchRemotePreviewRef.current(identifier).then(setCardPreview).catch(e => {
-        const wrappedError = ensureMediaFilePreviewError('remote-preview-fetch-ssr', e, true);
-        setNonCriticalError(wrappedError);
-      });
-    }
-    // CXP-2723 TODO: The above and below preview fetch logic seem very similar and could be revisted
-    // Both compare dimensions, but the above is only for SSR in order to refetchSRRPreview and
-    // will swallow any errors. Below logic only applies when there is no card preview or the dimensions
-    // are bigger.
-    if (fileState && wasResolvedUpfrontPreviewRef.current && isPreviewableStatus(status, extractFilePreviewStatus(fileState, isBannedLocalPreview)) && (!cardPreview || isBigger(prevRequestDimensions, requestDimensions))) {
+    if (fileState && wasResolvedUpfrontPreviewRef.current && isPreviewableStatus(status, extractFilePreviewStatus(fileState, isBannedLocalPreview)) && (!preview || isBigger(prevRequestDimensions, requestDimensions))) {
       resolvePreviewRef.current(identifier, fileState);
     }
-    if (!skipRemote && 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, requestDimensions, fetchRemotePreviewRef, fileState, identifier, isBannedLocalPreview, prevRequestDimensions, resolvePreviewRef, skipRemote, ssr, status]);
-
-  //----------------------------------------------------------------//
-  //----------------- set complete status --------------------------//
-  //----------------------------------------------------------------//
+  }, [fileState, identifier, isBannedLocalPreview, prevRequestDimensions, preview, requestDimensions, resolvePreviewRef, status]);
 
-  useEffect(() => {
-    if (previewDidRender &&
-    // We should't complete if status is uploading
-    ['loading-preview', 'processing'].includes(status)) {
-      setStatus('complete');
-      // TODO MEX-788: add test for "do not remove the card preview when unsubscribing".
-      setIsBannedLocalPreview(false); // CXP-2723 TODO: we might be able to remove this??
-    }
-  }, [previewDidRender, status]);
-
-  // CXP-2723 TODO: Create test cases for banning local preview after status is complete
-
-  //----------------------------------------------------------------//
-  //------------------ Subscribe to file state ---------------------//
-  //----------------------------------------------------------------//
+  //----------------------------------------------------------------
+  // RETURN
+  //----------------------------------------------------------------
 
-  const updateFileStateRef = useCurrentValueRef(() => {
-    if (fileState) {
-      // do not update the card status if the status is final
-      if (['complete', 'error', 'failed-processing'].includes(status)) {
-        return;
-      }
-      if (fileState.status !== 'error') {
-        const mediaType = 'mediaType' in fileState ? fileState.mediaType : undefined;
-        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 hasRemotePreview = isImageRepresentationReady(fileState);
-        const hasPreview = hasLocalPreview || hasRemotePreview;
-        let newStatus;
-        switch (fileState.status) {
-          case 'uploading':
-          case 'failed-processing':
-          case 'processing':
-            newStatus = fileState.status;
-            break;
-          case 'processed':
-            if (!isPreviewable || !hasPreview) {
-              newStatus = 'complete';
-              break;
-            }
-            newStatus = 'loading-preview';
-            break;
-          default:
-            newStatus = 'loading';
-        }
-        setStatus(newStatus);
-      } else {
-        const e = new MediaFileStateError(fileState.id, fileState.reason, fileState.message, fileState.details);
-        const errorReason = status === 'uploading' ? 'upload' : 'metadata-fetch';
-        setError(new MediaFilePreviewError(errorReason, e));
-        setStatus('error');
-      }
-    }
-  });
-  useEffect(() => {
-    updateFileStateRef.current();
-  }, [fileState, updateFileStateRef]);
-  const onImageError = newCardPreview => {
-    if (newCardPreview) {
+  const onImageError = useCallback(newPreview => {
+    if (newPreview) {
       const failedSSRObject = {
         status: 'fail',
-        ...extractErrorInfo(new ImageLoadError(newCardPreview.source))
+        ...extractErrorInfo(new ImageLoadError(newPreview.source))
       };
-      if (isSSRClientPreview(newCardPreview)) {
+      if (isSSRClientPreview(newPreview)) {
         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 the preview 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)) {
+      if (isSSRDataPreview(newPreview)) {
         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)) {
+    if ((newPreview === null || newPreview === void 0 ? void 0 : newPreview.dataURI) !== (preview === null || preview === void 0 ? void 0 : preview.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));
+    const error = new ImageLoadError(newPreview === null || newPreview === void 0 ? void 0 : newPreview.source);
+    const isLocal = newPreview && isLocalPreview(newPreview);
+    const isSSR = newPreview && (isSSRClientPreview(newPreview) || isSSRDataPreview(newPreview));
     if (isLocal || isSSR) {
       if (isLocal) {
         setIsBannedLocalPreview(true);
@@ -325,27 +326,27 @@ export const useFilePreview = ({
       }
       const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
       mediaFilePreviewCache.remove(identifier.id, fileImageMode);
-      setCardPreview(undefined);
+      setPreview(undefined);
     } else {
       if (!['complete', 'error', 'failed-processing'].includes(status)) {
         setStatus('error');
         setError(error);
       }
     }
-  };
-  const onImageLoad = newCardPreview => {
-    if (newCardPreview) {
-      if (isSSRClientPreview(newCardPreview) && ssrReliabilityRef.current.client.status === 'unknown') {
+  }, [identifier.id, preview === null || preview === void 0 ? void 0 : preview.dataURI, resizeMode, status]);
+  const onImageLoad = useCallback(newPreview => {
+    if (newPreview) {
+      if (isSSRClientPreview(newPreview) && 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 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') {
+      if (isSSRDataPreview(newPreview) && ssrReliabilityRef.current.server.status === 'unknown') {
         ssrReliabilityRef.current.server = {
           status: 'success'
         };
@@ -356,25 +357,21 @@ export const useFilePreview = ({
     }
 
     // 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)) {
+    if ((newPreview === null || newPreview === void 0 ? void 0 : newPreview.dataURI) !== (preview === null || preview === void 0 ? void 0 : preview.dataURI)) {
       return;
     }
-  };
-
-  //----------------------------------------------------------------//
-  // RETURN
-  //----------------------------------------------------------------//
+  }, [preview === null || preview === void 0 ? void 0 : preview.dataURI]);
 
   // FOR SSR
   const getScriptProps = () => {
     var _ssrReliabilityRef$cu;
-    return generateScriptProps(identifier, cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI, requestDimensions, ((_ssrReliabilityRef$cu = ssrReliabilityRef.current.server) === null || _ssrReliabilityRef$cu === void 0 ? void 0 : _ssrReliabilityRef$cu.status) === 'fail' ? ssrReliabilityRef.current.server : undefined);
+    return generateScriptProps(identifier, preview === null || preview === void 0 ? void 0 : preview.dataURI, requestDimensions, ((_ssrReliabilityRef$cu = ssrReliabilityRef.current.server) === null || _ssrReliabilityRef$cu === void 0 ? void 0 : _ssrReliabilityRef$cu.status) === 'fail' ? ssrReliabilityRef.current.server : undefined);
   };
 
   // CXP-2723 TODO: should consider simplifying our analytics, and how
   // we might get rid of ssrReliabiltyRef from our hook
   return {
-    cardPreview,
+    preview,
     error,
     nonCriticalError,
     ssrReliabilityRef,

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "77.6.1",
+      packageName: "77.6.3",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };