@atlaskit/media-card 77.6.3 → 77.6.5

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

@@ -2,11 +2,11 @@ import { imageResizeModeToFileImageMode, isImageRepresentationReady } from '@atl
 import { MediaFileStateError, useFileState, useMediaClient } from '@atlaskit/media-client-react';
 import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ensureMediaFilePreviewError, ImageLoadError, isLocalPreviewError, isUnsupportedLocalPreviewError, MediaFilePreviewError } from './errors';
+import { ensureMediaFilePreviewError, ImageLoadError, MediaFilePreviewError } from './errors';
 import { extractErrorInfo } from './analytics';
-import { isBigger, createRequestDimensions, useCurrentValueRef, usePrevious } from './helpers';
+import { isBigger, createRequestDimensions, useCurrentValueRef } from './helpers';
 import { generateScriptProps, getSSRData } from './globalScope';
-import { getAndCacheRemotePreview, getSSRPreview, isLocalPreview, isSSRClientPreview, isSSRDataPreview, isPreviewableStatus, extractFilePreviewStatus, mediaFilePreviewCache, getAndCacheLocalPreview } from './getPreview';
+import { getAndCacheRemotePreview, getSSRPreview, isLocalPreview, isSSRClientPreview, isSSRDataPreview, mediaFilePreviewCache, getAndCacheLocalPreview, isSupportedLocalPreview } from './getPreview';
 export const useFilePreview = ({
   resizeMode = 'crop',
   identifier,
@@ -26,7 +26,6 @@ export const useFilePreview = ({
   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,
@@ -70,7 +69,6 @@ export const useFilePreview = ({
     }
   };
   const [preview, setPreview] = useState(previewInitializer);
-  const prevPreview = usePrevious(preview);
   const {
     fileState
   } = useFileState(identifier.id, {
@@ -163,7 +161,7 @@ export const useFilePreview = ({
         // https://product-fabric.atlassian.net/browse/MEX-1071
       });
     }
-  }, [preview, identifier, skipRemote, ssr, getAndCacheRemotePreviewRef]);
+  }, [getAndCacheRemotePreviewRef, preview, skipRemote, ssr]);
 
   //----------------------------------------------------------------
   // Refetch SRR Preview if dimensions from Server have changed and are bigger,
@@ -176,117 +174,62 @@ export const useFilePreview = ({
         setNonCriticalError(wrappedError);
       });
     }
-  }, [getAndCacheRemotePreviewRef, identifier, preview, requestDimensions, skipRemote]);
+  }, [getAndCacheRemotePreviewRef, preview, requestDimensions, skipRemote]);
 
   //----------------------------------------------------------------
   // Upfront Preview
   //----------------------------------------------------------------
   useEffect(() => {
-    const resolveUpfrontPreview = async () => {
+    if (!preview && !wasResolvedUpfrontPreviewRef.current && !skipRemote) {
       // 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);
-
+      const fetchedDimensions = {
+        ...requestDimensions
+      };
+      getAndCacheRemotePreviewRef.current().then(newPreview => {
         // 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) {
+        if (!isBigger(fetchedDimensions, requestDimensionsRef.current)) {
           setPreview(newPreview);
         }
-      } catch (e) {
+      }).catch(() => {
         // 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]);
+  }, [getAndCacheRemotePreviewRef, preview, requestDimensions, requestDimensionsRef, skipRemote]);
 
   //----------------------------------------------------------------
-  // Fetch Preview
+  // Cache, Local & Remote 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);
-    try {
-      const mode = imageURLParams.mode;
-      const cachedPreview = mediaFilePreviewCache.get(identifier.id, mode);
-      const dimensionsAreBigger = isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, requestDimensions);
-      if (cachedPreview && !dimensionsAreBigger) {
-        return cachedPreview;
-      }
-      try {
-        if (filePreview) {
-          const localPreview = await getAndCacheLocalPreview(identifier.id, filePreview, requestDimensions || {}, mode, mediaBlobUrlAttrs);
-          setPreview(localPreview);
-          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) {
-          // CXP-2723 TODO: We might have to wrap this error in MediaCardError
-          setNonCriticalError(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 MediaFilePreviewError('remote-preview-not-ready');
-      }
-      const remotePreview = await getAndCacheRemotePreviewRef.current();
-      setPreview(remotePreview);
-      return;
-    } catch (e) {
-      const wrappedError = ensureMediaFilePreviewError('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.
+  useEffect(() => {
+    const cachedPreview = mediaFilePreviewCache.get(identifier.id, imageURLParams.mode);
+
+    // Cached Preview ----------------------------------------------------------------
+    if (!preview && cachedPreview && !isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, requestDimensions)) {
+      setPreview(cachedPreview);
+    }
+    // Local Preview ----------------------------------------------------------------
+    else if (!preview && !isBannedLocalPreview && !!fileState && 'preview' in fileState && !!fileState.preview && isSupportedLocalPreview(fileState.mediaType) && isMimeTypeSupportedByBrowser(fileState.mimeType)) {
+      // Local preview is available only if it's supported by browser and supported by Media Card (isSupportedLocalPreview)
+      // For example, SVGs are mime type NOT supported by browser but media type supported by Media Card (image)
+      // Then, local Preview NOT available
+
+      getAndCacheLocalPreview(identifier.id, fileState.preview, requestDimensions || {}, imageURLParams.mode, mediaBlobUrlAttrs).then(setPreview).catch(e => {
         setIsBannedLocalPreview(true);
-      } else {
-        if (!['complete', 'error', 'failed-processing'].includes(status)) {
-          setStatus('error');
-          setError(wrappedError);
-        }
-      }
+        // CXP-2723 TODO: We might have to wrap this error in MediaCardError
+        setNonCriticalError(e);
+      });
     }
-  });
-  useEffect(() => {
-    if (fileState && wasResolvedUpfrontPreviewRef.current && isPreviewableStatus(status, extractFilePreviewStatus(fileState, isBannedLocalPreview)) && (!preview || isBigger(prevRequestDimensions, requestDimensions))) {
-      resolvePreviewRef.current(identifier, fileState);
+    // Remote Preview ----------------------------------------------------------------
+    else if ((!preview || isBigger(preview.dimensions, requestDimensions)) && !skipRemote && wasResolvedUpfrontPreviewRef.current && !!fileState && isImageRepresentationReady(fileState)) {
+      getAndCacheRemotePreviewRef.current().then(setPreview).catch(e => {
+        setStatus('error');
+        setError(ensureMediaFilePreviewError('preview-fetch', e));
+      });
     }
-  }, [fileState, identifier, isBannedLocalPreview, prevRequestDimensions, preview, requestDimensions, resolvePreviewRef, status]);
+  }, [fileState, getAndCacheRemotePreviewRef, identifier.id, imageURLParams.mode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote]);
 
   //----------------------------------------------------------------
   // RETURN

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.3",
+      packageName: "77.6.5",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/inline/mediaInlineCard.js

@@ -1,15 +1,15 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { FileFetcherError } from '@atlaskit/media-client';
-import { injectIntl, IntlProvider, createIntl } from 'react-intl-next';
-import { MediaInlineCardLoadedView, MediaInlineCardLoadingView, MediaInlineCardErroredView, messages } from '@atlaskit/media-ui';
+import { MediaInlineCardErroredView, MediaInlineCardLoadedView, MediaInlineCardLoadingView, messages } from '@atlaskit/media-ui';
+import { formatDate } from '@atlaskit/media-ui/formatDate';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import { MediaViewer } from '@atlaskit/media-viewer';
 import Tooltip from '@atlaskit/tooltip';
-import { formatDate } from '@atlaskit/media-ui/formatDate';
-import { fireMediaCardEvent } from '../utils/analytics';
-import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { createIntl, injectIntl, IntlProvider } from 'react-intl-next';
 import { MediaCardError } from '../errors';
+import { fireMediaCardEvent } from '../utils/analytics';
 import { getErrorStatusPayload, getFailedProcessingStatusPayload, getSucceededStatusPayload } from './mediaInlineCardAnalytics';
 // UI component which renders an inline link in the appropiate state based on a media file
 export const MediaInlineCardInternal = ({
@@ -86,7 +86,7 @@ export const MediaInlineCardInternal = ({
       }
     });
     return () => {
-      subscription.unsubscribe();
+      subscription === null || subscription === void 0 ? void 0 : subscription.unsubscribe();
     };
   }, [identifier.collectionName, identifier.id, mediaClient.file]);
   if (subscribeError) {

package/dist/es2019/utils/ufoExperiences.js

@@ -4,7 +4,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.6.3";
+const packageVersion = "77.6.5";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {

package/dist/esm/card/card.js

@@ -40,7 +40,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.6.3";
+var packageVersion = "77.6.5";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);

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

@@ -83,7 +83,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.6.3";
+var packageVersion = "77.6.5";
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

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

@@ -9,7 +9,7 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.6.3";
+var packageVersion = "77.6.5";
 export var CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

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

@@ -318,8 +318,12 @@ export var FileCard = function FileCard(_ref) {
     if (!metadata) {
       return;
     }
-    var isVideo = metadata && metadata.mediaType === 'video';
-    if (useInlinePlayer && isVideo && !!preview && finalStatus !== 'error') {
+    var isVideo = metadata.mediaType === 'video';
+    var isBrowserSupported = metadata.mimeType && isMimeTypeSupportedByBrowser(metadata.mimeType);
+
+    // TODO: this should be handled by Inline Player
+    var isPlayable = !!fileState && (fileState.status === 'processed' || isBrowserSupported && ['processing', 'uploading'].includes(fileState.status));
+    if (useInlinePlayer && isVideo && isPlayable && finalStatus !== 'error') {
       setIsPlayingFile(true);
       setShouldAutoplay(true);
     } else if (shouldOpenMediaViewer) {

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

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

package/dist/esm/card/v2/useFilePreview/helpers.js

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from 'react';
+import { useRef } from 'react';
 
 /**
  * Checks if at least one of next dimensions is bigger than current
@@ -47,11 +47,4 @@ export function useCurrentValueRef(value) {
   var ref = useRef(value);
   ref.current = value;
   return ref;
-}
-export function usePrevious(value) {
-  var ref = useRef();
-  useEffect(function () {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
 }

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

@@ -1,18 +1,16 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 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 { imageResizeModeToFileImageMode, isImageRepresentationReady } from '@atlaskit/media-client';
 import { MediaFileStateError, useFileState, useMediaClient } from '@atlaskit/media-client-react';
 import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ensureMediaFilePreviewError, ImageLoadError, isLocalPreviewError, isUnsupportedLocalPreviewError, MediaFilePreviewError } from './errors';
+import { ensureMediaFilePreviewError, ImageLoadError, MediaFilePreviewError } from './errors';
 import { extractErrorInfo } from './analytics';
-import { isBigger, createRequestDimensions, useCurrentValueRef, usePrevious } from './helpers';
+import { isBigger, createRequestDimensions, useCurrentValueRef } from './helpers';
 import { generateScriptProps, getSSRData } from './globalScope';
-import { getAndCacheRemotePreview, getSSRPreview, isLocalPreview, isSSRClientPreview, isSSRDataPreview, isPreviewableStatus, extractFilePreviewStatus, mediaFilePreviewCache, getAndCacheLocalPreview } from './getPreview';
+import { getAndCacheRemotePreview, getSSRPreview, isLocalPreview, isSSRClientPreview, isSSRDataPreview, mediaFilePreviewCache, getAndCacheLocalPreview, isSupportedLocalPreview } from './getPreview';
 export var useFilePreview = function useFilePreview(_ref) {
   var _ref$resizeMode = _ref.resizeMode,
     resizeMode = _ref$resizeMode === void 0 ? 'crop' : _ref$resizeMode,
@@ -46,7 +44,6 @@ export var useFilePreview = function useFilePreview(_ref) {
     return dimensions ? createRequestDimensions(dimensions) : undefined;
   }, [dimensions]);
   var requestDimensionsRef = useCurrentValueRef(requestDimensions);
-  var prevRequestDimensions = usePrevious(requestDimensions);
   var imageURLParams = useMemo(function () {
     return _objectSpread(_objectSpread({
       collection: identifier.collectionName,
@@ -91,7 +88,6 @@ export var useFilePreview = function useFilePreview(_ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     preview = _useState10[0],
     setPreview = _useState10[1];
-  var prevPreview = usePrevious(preview);
   var _useFileState = useFileState(identifier.id, {
       skipRemote: skipRemote,
       collectionName: identifier.collectionName,
@@ -117,8 +113,8 @@ export var useFilePreview = function useFilePreview(_ref) {
         var mediaType = 'mediaType' in fileState ? fileState.mediaType : undefined;
         var isPreviewable = !!mediaType && ['audio', 'video', 'image', 'doc'].indexOf(mediaType) > -1;
         var isPreviewableFileState = !!fileState.preview;
-        var isSupportedLocalPreview = mediaType === 'image' || mediaType === 'video';
-        var hasLocalPreview = !isBannedLocalPreview && isPreviewableFileState && isSupportedLocalPreview && !!fileState.mimeType && isMimeTypeSupportedByBrowser(fileState.mimeType);
+        var _isSupportedLocalPreview = mediaType === 'image' || mediaType === 'video';
+        var hasLocalPreview = !isBannedLocalPreview && isPreviewableFileState && _isSupportedLocalPreview && !!fileState.mimeType && isMimeTypeSupportedByBrowser(fileState.mimeType);
         var hasRemotePreview = isImageRepresentationReady(fileState);
         var hasPreview = hasLocalPreview || hasRemotePreview;
         var newStatus;
@@ -183,7 +179,7 @@ export var useFilePreview = function useFilePreview(_ref) {
         // https://product-fabric.atlassian.net/browse/MEX-1071
       });
     }
-  }, [preview, identifier, skipRemote, ssr, getAndCacheRemotePreviewRef]);
+  }, [getAndCacheRemotePreviewRef, preview, skipRemote, ssr]);
 
   //----------------------------------------------------------------
   // Refetch SRR Preview if dimensions from Server have changed and are bigger,
@@ -196,161 +192,60 @@ export var useFilePreview = function useFilePreview(_ref) {
         setNonCriticalError(wrappedError);
       });
     }
-  }, [getAndCacheRemotePreviewRef, identifier, preview, requestDimensions, skipRemote]);
+  }, [getAndCacheRemotePreviewRef, preview, requestDimensions, skipRemote]);
 
   //----------------------------------------------------------------
   // Upfront Preview
   //----------------------------------------------------------------
   useEffect(function () {
-    var resolveUpfrontPreview = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var fetchedDimensions, newPreview, areValidFetchedDimensions;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.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;
-              _context.prev = 1;
-              fetchedDimensions = _objectSpread({}, requestDimensions);
-              _context.next = 5;
-              return getAndCacheRemotePreviewRef.current();
-            case 5:
-              newPreview = _context.sent;
-              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);
-              }
-              _context.next = 12;
-              break;
-            case 10:
-              _context.prev = 10;
-              _context.t0 = _context["catch"](1);
-            case 12:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, null, [[1, 10]]);
-      }));
-      return function resolveUpfrontPreview() {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-
-    // CXP-2723 TODO: `hadSSRPreview` is most likely redundant
-    var hadSSRPreview = ssr === 'client' && !!prevPreview && isSSRClientPreview(prevPreview);
-    if (!preview && !wasResolvedUpfrontPreviewRef.current && (!skipRemote || hadSSRPreview)) {
-      resolveUpfrontPreview();
+    if (!preview && !wasResolvedUpfrontPreviewRef.current && !skipRemote) {
+      // 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;
+      var fetchedDimensions = _objectSpread({}, requestDimensions);
+      getAndCacheRemotePreviewRef.current().then(function (newPreview) {
+        // 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 (!isBigger(fetchedDimensions, requestDimensionsRef.current)) {
+          setPreview(newPreview);
+        }
+      }).catch(function () {
+        // NO need to log error. If this call fails, a refetch will happen after
+      });
     }
-  }, [preview, requestDimensions, requestDimensionsRef, getAndCacheRemotePreviewRef, identifier, skipRemote, prevPreview, ssr]);
+  }, [getAndCacheRemotePreviewRef, preview, requestDimensions, requestDimensionsRef, skipRemote]);
 
   //----------------------------------------------------------------
-  // Fetch Preview
+  // Cache, Local & Remote Preview
   //----------------------------------------------------------------
 
-  var resolvePreviewRef = useCurrentValueRef( /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(identifier, fileState) {
-      var filePreview, isRemotePreviewReady, mode, cachedPreview, dimensionsAreBigger, localPreview, remotePreview, wrappedError;
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            filePreview = isBannedLocalPreview ? undefined : fileState.status !== 'error' && 'mimeType' in fileState && isMimeTypeSupportedByBrowser(fileState.mimeType) ? fileState.preview : undefined;
-            isRemotePreviewReady = isImageRepresentationReady(fileState);
-            _context2.prev = 2;
-            mode = imageURLParams.mode;
-            cachedPreview = mediaFilePreviewCache.get(identifier.id, mode);
-            dimensionsAreBigger = isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, requestDimensions);
-            if (!(cachedPreview && !dimensionsAreBigger)) {
-              _context2.next = 8;
-              break;
-            }
-            return _context2.abrupt("return", cachedPreview);
-          case 8:
-            _context2.prev = 8;
-            if (!filePreview) {
-              _context2.next = 15;
-              break;
-            }
-            _context2.next = 12;
-            return getAndCacheLocalPreview(identifier.id, filePreview, requestDimensions || {}, mode, mediaBlobUrlAttrs);
-          case 12:
-            localPreview = _context2.sent;
-            setPreview(localPreview);
-            return _context2.abrupt("return");
-          case 15:
-            _context2.next = 22;
-            break;
-          case 17:
-            _context2.prev = 17;
-            _context2.t0 = _context2["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(_context2.t0) || isUnsupportedLocalPreviewError(_context2.t0) && !isRemotePreviewReady) {
-              // CXP-2723 TODO: We might have to wrap this error in MediaCardError
-              setNonCriticalError(_context2.t0);
-            }
-            /**
-             * No matter the reason why the local preview failed, we break the process
-             * if there is no remote preview available
-             */
-            if (isRemotePreviewReady) {
-              _context2.next = 22;
-              break;
-            }
-            throw _context2.t0;
-          case 22:
-            if (isRemotePreviewReady) {
-              _context2.next = 24;
-              break;
-            }
-            throw new MediaFilePreviewError('remote-preview-not-ready');
-          case 24:
-            _context2.next = 26;
-            return getAndCacheRemotePreviewRef.current();
-          case 26:
-            remotePreview = _context2.sent;
-            setPreview(remotePreview);
-            return _context2.abrupt("return");
-          case 31:
-            _context2.prev = 31;
-            _context2.t1 = _context2["catch"](2);
-            wrappedError = ensureMediaFilePreviewError('preview-fetch', _context2.t1); //  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 35:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2, null, [[2, 31], [8, 17]]);
-    }));
-    return function (_x, _x2) {
-      return _ref3.apply(this, arguments);
-    };
-  }());
   useEffect(function () {
-    if (fileState && wasResolvedUpfrontPreviewRef.current && isPreviewableStatus(status, extractFilePreviewStatus(fileState, isBannedLocalPreview)) && (!preview || isBigger(prevRequestDimensions, requestDimensions))) {
-      resolvePreviewRef.current(identifier, fileState);
+    var cachedPreview = mediaFilePreviewCache.get(identifier.id, imageURLParams.mode);
+
+    // Cached Preview ----------------------------------------------------------------
+    if (!preview && cachedPreview && !isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, requestDimensions)) {
+      setPreview(cachedPreview);
+    }
+    // Local Preview ----------------------------------------------------------------
+    else if (!preview && !isBannedLocalPreview && !!fileState && 'preview' in fileState && !!fileState.preview && isSupportedLocalPreview(fileState.mediaType) && isMimeTypeSupportedByBrowser(fileState.mimeType)) {
+      // Local preview is available only if it's supported by browser and supported by Media Card (isSupportedLocalPreview)
+      // For example, SVGs are mime type NOT supported by browser but media type supported by Media Card (image)
+      // Then, local Preview NOT available
+
+      getAndCacheLocalPreview(identifier.id, fileState.preview, requestDimensions || {}, imageURLParams.mode, mediaBlobUrlAttrs).then(setPreview).catch(function (e) {
+        setIsBannedLocalPreview(true);
+        // CXP-2723 TODO: We might have to wrap this error in MediaCardError
+        setNonCriticalError(e);
+      });
+    }
+    // Remote Preview ----------------------------------------------------------------
+    else if ((!preview || isBigger(preview.dimensions, requestDimensions)) && !skipRemote && wasResolvedUpfrontPreviewRef.current && !!fileState && isImageRepresentationReady(fileState)) {
+      getAndCacheRemotePreviewRef.current().then(setPreview).catch(function (e) {
+        setStatus('error');
+        setError(ensureMediaFilePreviewError('preview-fetch', e));
+      });
     }
-  }, [fileState, identifier, isBannedLocalPreview, prevRequestDimensions, preview, requestDimensions, resolvePreviewRef, status]);
+  }, [fileState, getAndCacheRemotePreviewRef, identifier.id, imageURLParams.mode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote]);
 
   //----------------------------------------------------------------
   // RETURN

package/dist/esm/inline/loader.js

@@ -103,7 +103,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "77.6.3",
+        packageName: "77.6.5",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/inline/mediaInlineCard.js

@@ -1,16 +1,16 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { FileFetcherError } from '@atlaskit/media-client';
-import { injectIntl, IntlProvider, createIntl } from 'react-intl-next';
-import { MediaInlineCardLoadedView, MediaInlineCardLoadingView, MediaInlineCardErroredView, messages } from '@atlaskit/media-ui';
+import { MediaInlineCardErroredView, MediaInlineCardLoadedView, MediaInlineCardLoadingView, messages } from '@atlaskit/media-ui';
+import { formatDate } from '@atlaskit/media-ui/formatDate';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import { MediaViewer } from '@atlaskit/media-viewer';
 import Tooltip from '@atlaskit/tooltip';
-import { formatDate } from '@atlaskit/media-ui/formatDate';
-import { fireMediaCardEvent } from '../utils/analytics';
-import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { createIntl, injectIntl, IntlProvider } from 'react-intl-next';
 import { MediaCardError } from '../errors';
+import { fireMediaCardEvent } from '../utils/analytics';
 import { getErrorStatusPayload, getFailedProcessingStatusPayload, getSucceededStatusPayload } from './mediaInlineCardAnalytics';
 // UI component which renders an inline link in the appropiate state based on a media file
 export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
@@ -104,7 +104,7 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
       }
     });
     return function () {
-      subscription.unsubscribe();
+      subscription === null || subscription === void 0 || subscription.unsubscribe();
     };
   }, [identifier.collectionName, identifier.id, mediaClient.file]);
   if (subscribeError) {

package/dist/esm/utils/ufoExperiences.js

@@ -7,7 +7,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.6.3";
+var packageVersion = "77.6.5";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {