@atlaskit/media-card 77.5.0 → 77.5.1

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

@@ -0,0 +1,43 @@
+import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
+import { isPreviewableFileState, isPreviewableType, isImageRepresentationReady } from '@atlaskit/media-client';
+import { isSupportedLocalPreview } from './helpers';
+
+// TODO: align these checks with helpers from Media Client
+// https://product-fabric.atlassian.net/browse/BMPT-1300
+export const extractFilePreviewStatus = (fileState, isBannedLocalPreview) => {
+  const hasFilesize = 'size' in fileState && !!fileState.size;
+  const {
+    mediaType
+  } = 'mediaType' in fileState && fileState || {};
+  const {
+    mimeType
+  } = 'mimeType' in fileState && fileState || {};
+  const isPreviewable = !!mediaType && isPreviewableType(mediaType);
+
+  // 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
+  const hasLocalPreview = !isBannedLocalPreview && isPreviewableFileState(fileState) && isSupportedLocalPreview(mediaType) && !!mimeType && isMimeTypeSupportedByBrowser(mimeType);
+  const hasRemotePreview = isImageRepresentationReady(fileState);
+  const hasPreview = hasLocalPreview || hasRemotePreview;
+  const isSupportedByBrowser = !!mimeType && isMimeTypeSupportedByBrowser(mimeType);
+  return {
+    hasFilesize,
+    isPreviewable,
+    hasPreview,
+    isSupportedByBrowser
+  };
+};
+
+// CXP-2723 TODO: Review this in relation to removing status from the hook
+export const isPreviewableStatus = (cardStatus, {
+  isPreviewable,
+  hasPreview,
+  isSupportedByBrowser
+}) => {
+  return hasPreview && isPreviewable && (cardStatus === 'complete' || cardStatus === 'loading-preview' || cardStatus === 'uploading' ||
+  // For Video, we can have local or remote preview while processing.
+  // Then, we only want to show the thumbnail if the file is supported by the browser,
+  // this way we prevent playing unsupported videos that are not procesed
+  cardStatus === 'processing' && isSupportedByBrowser);
+};

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

@@ -0,0 +1,75 @@
+import { addFileAttrsToUrl } from '@atlaskit/media-client';
+import { mediaFilePreviewCache } from './cache';
+import { getLocalPreview, getRemotePreview } from './helpers';
+import { SsrPreviewError } from '../errors';
+const extendAndCachePreview = (id, mode, preview, mediaBlobUrlAttrs) => {
+  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 dataURI = mediaBlobUrlAttrs ? addFileAttrsToUrl(preview.dataURI, mediaBlobUrlAttrs) : preview.dataURI;
+  // We store new cardPreview into cache
+  mediaFilePreviewCache.set(id, mode, {
+    ...preview,
+    source,
+    dataURI
+  });
+  return {
+    ...preview,
+    dataURI
+  };
+};
+export const getSSRCardPreview = (ssr, mediaClient, id, params, mediaBlobUrlAttrs) => {
+  let dataURI;
+  try {
+    const rawDataURI = mediaClient.getImageUrlSync(id, params);
+    // We want to embed some meta context into dataURI for Copy/Paste to work.
+    dataURI = mediaBlobUrlAttrs ? addFileAttrsToUrl(rawDataURI, mediaBlobUrlAttrs) : rawDataURI;
+    const source = ssr === 'client' ? 'ssr-client' : 'ssr-server';
+    return {
+      dataURI,
+      source,
+      orientation: 1
+    };
+  } catch (e) {
+    const reason = ssr === 'server' ? 'ssr-server-uri' : 'ssr-client-uri';
+    throw new SsrPreviewError(reason, e instanceof Error ? e : undefined);
+  }
+};
+export const isLocalPreview = preview => {
+  const localSources = ['local', 'cache-local'];
+  return localSources.includes(preview.source);
+};
+export const isSSRClientPreview = preview => {
+  const ssrClientSources = ['ssr-client', 'cache-ssr-client'];
+  return ssrClientSources.includes(preview.source);
+};
+export const isSSRDataPreview = preview => preview.source === 'ssr-data';
+export const getAndCacheRemotePreview = async (mediaClient, id, dimensions, params, mediaBlobUrlAttrs, traceContext) => {
+  const remotePreview = await getRemotePreview(mediaClient, id, params, traceContext);
+  return extendAndCachePreview(id, params.mode, {
+    ...remotePreview,
+    dimensions
+  }, mediaBlobUrlAttrs);
+};
+export const getAndCacheLocalPreview = async (id, filePreview, dimensions, mode, mediaBlobUrlAttrs) => {
+  const localPreview = await getLocalPreview(filePreview);
+  return extendAndCachePreview(id, mode, {
+    ...localPreview,
+    dimensions
+  }, mediaBlobUrlAttrs);
+};

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

@@ -0,0 +1,76 @@
+import { takeSnapshot } from './videoSnapshot';
+import { getMediaTypeFromMimeType } from '@atlaskit/media-common';
+import { getOrientation } from '@atlaskit/media-ui';
+import { LocalPreviewError, RemotePreviewError } from '../errors';
+/**
+ * This method tells the support for the media
+ * types covered in getCardPreviewFromFilePreview
+ */
+export const isSupportedLocalPreview = mediaType => mediaType === 'image' || mediaType === 'video';
+const getImageLocalPreview = async value => {
+  try {
+    const orientation = await getOrientation(value);
+    const dataURI = URL.createObjectURL(value);
+    return {
+      dataURI,
+      orientation,
+      source: 'local'
+    };
+  } catch (e) {
+    throw new LocalPreviewError('local-preview-image', e instanceof Error ? e : undefined);
+  }
+};
+const getVideoLocalPreview = async value => {
+  try {
+    const dataURI = await takeSnapshot(value);
+    return {
+      dataURI,
+      orientation: 1,
+      source: 'local'
+    };
+  } catch (e) {
+    throw new LocalPreviewError('local-preview-video', e instanceof Error ? e : undefined);
+  }
+};
+export const getLocalPreview = async 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') {
+    return {
+      dataURI: value,
+      orientation: 1,
+      source: 'local'
+    };
+  } else if (value instanceof Blob) {
+    const {
+      type
+    } = value;
+    const mediaType = getMediaTypeFromMimeType(type);
+    switch (mediaType) {
+      case 'image':
+        return getImageLocalPreview(value);
+      case 'video':
+        return getVideoLocalPreview(value);
+      default:
+        throw new LocalPreviewError('local-preview-unsupported');
+    }
+  }
+  throw new LocalPreviewError('local-preview-unsupported');
+};
+export const getRemotePreview = async (mediaClient, id, params, traceContext) => {
+  try {
+    const blob = await mediaClient.getImage(id, params, undefined, undefined, traceContext);
+    return {
+      dataURI: URL.createObjectURL(blob),
+      orientation: 1,
+      source: 'remote'
+    };
+  } catch (e) {
+    throw new RemotePreviewError('remote-preview-fetch', e instanceof Error ? e : undefined);
+  }
+};

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

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

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

@@ -0,0 +1,44 @@
+import { LRUMap } from 'lru_map';
+import { EventEmitter2 } from 'eventemitter2';
+export const PREVIEW_CACHE_LRU_SIZE = 50;
+class ExtendedLRUCache extends LRUMap {
+  constructor(limit) {
+    super(limit);
+    this.eventEmitter = new EventEmitter2();
+  }
+  shift() {
+    const entry = super.shift();
+    this.eventEmitter.emit('shift', entry);
+    return entry;
+  }
+  on(event, callback) {
+    this.eventEmitter.on(event, callback);
+  }
+}
+export class ObjectURLCache {
+  constructor(size) {
+    this.cache = new ExtendedLRUCache(size);
+    this.cache.on('shift', entry => {
+      if (entry && entry[1].dataURI) {
+        URL.revokeObjectURL(entry[1].dataURI);
+      }
+    });
+  }
+  has(key) {
+    return !!this.cache.find(key);
+  }
+  get(key) {
+    return this.cache.get(key);
+  }
+  set(key, value) {
+    this.cache.set(key, value);
+  }
+  remove(key) {
+    const removed = this.cache.delete(key);
+    removed && URL.revokeObjectURL(removed.dataURI);
+  }
+  clear() {
+    this.cache.clear();
+  }
+}
+export const createObjectURLCache = () => new ObjectURLCache(PREVIEW_CACHE_LRU_SIZE);

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

@@ -0,0 +1,36 @@
+export const takeSnapshot = async blob => {
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(blob);
+    const video = document.createElement('video');
+    video.preload = 'metadata';
+    video.src = url;
+    video.muted = true;
+    video.play().catch(() => {
+      return reject(new Error('failed to play video'));
+    });
+    video.addEventListener('timeupdate', function timeUpdateHandler() {
+      video.removeEventListener('timeupdate', timeUpdateHandler);
+      video.pause();
+      URL.revokeObjectURL(url);
+      //create canvas to draw our first frame on.
+
+      if (!video.videoWidth && !video.videoHeight) {
+        return reject(new Error('error retrieving video dimensions'));
+      }
+      const canvas = document.createElement('canvas');
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      const context = canvas.getContext('2d');
+      if (!context) {
+        return reject(new Error('error creating canvas context'));
+      }
+      context.drawImage(video, 0, 0, canvas.width, canvas.height);
+      const dataURL = canvas.toDataURL('image/jpeg', 0.85);
+      resolve(dataURL);
+    });
+    video.addEventListener('error', () => {
+      reject(new Error('failed to load video'));
+      URL.revokeObjectURL(url);
+    });
+  });
+};

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

@@ -0,0 +1,8 @@
+import { getMediaCardSSR, getKey } from './globalScope';
+export const getSSRData = identifier => {
+  const mediaCardSsr = getMediaCardSSR();
+  if (!mediaCardSsr) {
+    return;
+  }
+  return mediaCardSsr[getKey(identifier)];
+};

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

@@ -0,0 +1,48 @@
+import { printFunctionCall, printScript } from './printScript';
+// ----- WARNING -----
+// This is a very sensitive fraction of code.
+// Any changes to this file must be tested directly in product before merging.
+// The scripts printed here might differ from what we observe in our internal tests
+// due to minimification, for example.
+export const GLOBAL_MEDIA_CARD_SSR = 'mediaCardSsr';
+export const GLOBAL_MEDIA_NAMESPACE = '__MEDIA_INTERNAL';
+export function getMediaGlobalScope(globalScope = window) {
+  // Must match GLOBAL_MEDIA_NAMESPACE. Can't reference the constant from here.
+  const namespace = '__MEDIA_INTERNAL';
+  if (!globalScope[namespace]) {
+    globalScope[namespace] = {};
+  }
+  return globalScope[namespace];
+}
+export function getMediaCardSSR(globalScope = window) {
+  const globalMedia = getMediaGlobalScope(globalScope);
+  // Must match GLOBAL_MEDIA_CARD_SSR. Can't reference the constant from here.
+  const key = 'mediaCardSsr';
+  if (!globalMedia[key]) {
+    globalMedia[key] = {};
+  }
+  return globalMedia[key];
+}
+const dashed = param => param ? `-${param}` : '';
+export const getKey = ({
+  id,
+  collectionName,
+  occurrenceKey
+}) => `${id}${dashed(collectionName)}${dashed(occurrenceKey)}`;
+export const storeDataURI = (key, dataURI, dimensions, error, globalScope = window) => {
+  const mediaCardSsr = getMediaCardSSR(globalScope);
+  mediaCardSsr[key] = {
+    dataURI,
+    dimensions,
+    error
+  };
+};
+const generateScript = (identifier, dataURI, dimensions, error) => {
+  const functionCall = printFunctionCall(storeDataURI, getKey(identifier), dataURI, dimensions, error);
+  return printScript([getMediaCardSSR.toString(), getMediaGlobalScope.toString(), functionCall]);
+};
+export const generateScriptProps = (identifier, dataURI, dimensions, error) => ({
+  dangerouslySetInnerHTML: {
+    __html: generateScript(identifier, dataURI, dimensions, error)
+  }
+});

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

@@ -0,0 +1,2 @@
+export { GLOBAL_MEDIA_NAMESPACE, GLOBAL_MEDIA_CARD_SSR, generateScriptProps, getKey } from './globalScope';
+export { getSSRData } from './getSSRData';

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

@@ -0,0 +1,16 @@
+const printParam = param => {
+  if (typeof param === 'string') {
+    return `'${param}'`;
+  } else if (typeof param === 'object') {
+    return JSON.stringify(param);
+  } else if (param === undefined) {
+    return 'undefined';
+  }
+  return param;
+};
+const printParams = args => args.map(arg => printParam(arg)).join(',');
+export const printFunctionCall = (fn, ...args) => `(${fn.toString()})(${printParams(args)});`;
+export const printScript = statements => `(function(){
+  ${statements.join(';')}
+})();
+`;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,61 @@
+import { useRef, useEffect } from 'react';
+
+/**
+ * Checks if at least one of next dimensions is bigger than current
+ * If a single dimension is undefined, returns false
+ */
+export const isBigger = (current, next) => {
+  const {
+    width: currentWidth,
+    height: currentHeight
+  } = current || {};
+  const {
+    width: nextWidth,
+    height: nextHeight
+  } = next || {};
+  if (!!currentWidth && !!currentHeight && !!nextWidth && !!nextHeight) {
+    const nextIsWider = currentWidth < nextWidth;
+    const nextIsHigher = currentHeight < nextHeight;
+    return nextIsHigher || nextIsWider;
+  } else {
+    return false;
+  }
+};
+
+/** Verifies if the current screen is retina display */
+function isRetina() {
+  const mediaQuery = '(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)';
+  return window.devicePixelRatio > 1 || window.matchMedia && window.matchMedia(mediaQuery).matches;
+}
+export const createRequestDimensions = dimensions => {
+  if (!dimensions) {
+    return;
+  }
+  const retinaFactor = isRetina() ? 2 : 1;
+  const {
+    width,
+    height
+  } = dimensions;
+  const result = {};
+  if (width) {
+    result.width = width * retinaFactor;
+  }
+  if (height) {
+    result.height = height * retinaFactor;
+  }
+  return result;
+};
+
+/** Stores the provided value in a   */
+export function useCurrentValueRef(value) {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+}
+export function usePrevious(value) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}

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

@@ -0,0 +1 @@
+export { useFilePreview } from './useFilePreview';

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

@@ -0,0 +1 @@
+export {};

package/dist/es2019/card/v2/{useFilePreview.js → useFilePreview/useFilePreview.js}

@@ -1,18 +1,12 @@
-import { addFileAttrsToUrl, imageResizeModeToFileImageMode, isImageRepresentationReady } from '@atlaskit/media-client';
+import { imageResizeModeToFileImageMode, isImageRepresentationReady } from '@atlaskit/media-client';
 import { MediaFileStateError, useFileState, useMediaClient } from '@atlaskit/media-client-react';
-import { getMediaTypeFromMimeType, isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
-import { getOrientation } from '@atlaskit/media-ui';
+import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { ensureMediaCardError, ImageLoadError, isLocalPreviewError, isUnsupportedLocalPreviewError, LocalPreviewError, MediaCardError } from '../../errors';
-import { extractErrorInfo } from '../../utils/analytics';
-import { isBigger } from '../../utils/dimensionComparer';
-import { isRetina } from '../../utils/isRetina';
-import { generateScriptProps, getSSRData } from '../../utils/globalScope';
-import { useCurrentValueRef } from '../../utils/useCurrentValueRef';
-import { usePrevious } from '../../utils/usePrevious';
-import { takeSnapshot } from '../../utils/videoSnapshot';
-import { fetchAndCacheRemotePreview, getCardPreviewFromCache, getSSRCardPreview, isLocalPreview, isSSRClientPreview, isSSRDataPreview, removeCardPreviewFromCache, shouldResolvePreview } from '../getCardPreview';
-import cardPreviewCache from '../getCardPreview/cache';
+import { ensureMediaFilePreviewError, ImageLoadError, isLocalPreviewError, isUnsupportedLocalPreviewError, MediaFilePreviewError } from './errors';
+import { extractErrorInfo } from '../../../utils/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';
 export const useFilePreview = ({
   resizeMode = 'crop',
   identifier,
@@ -72,7 +66,7 @@ export const useFilePreview = ({
       id
     } = identifier;
     const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
-    cardPreview = getCardPreviewFromCache(id, fileImageMode);
+    cardPreview = mediaFilePreviewCache.get(id, fileImageMode);
     if (!cardPreview && ssr) {
       cardPreview = getSSRPreview(ssr, identifier, mediaClient);
     }
@@ -95,104 +89,22 @@ export const useFilePreview = ({
   //----------------------------------------------------------------//
 
   const fetchRemotePreviewRef = useCurrentValueRef(identifier => {
-    return fetchAndCacheRemotePreview(mediaClient, identifier.id, requestDimensions || {}, imageURLParams, mediaBlobUrlAttrs, traceContext);
+    return getAndCacheRemotePreview(mediaClient, identifier.id, requestDimensions || {}, imageURLParams, mediaBlobUrlAttrs, traceContext);
   });
   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 cachedPreview = mediaFilePreviewCache.get(identifier.id, mode);
       const dimensionsAreBigger = isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, requestDimensions);
       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: requestDimensions
-          };
-          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 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
-          });
+          const localPreview = await getAndCacheLocalPreview(identifier.id, filePreview, requestDimensions || {}, mode, mediaBlobUrlAttrs);
+          setCardPreview(localPreview);
           return;
         }
       } catch (e) {
@@ -225,13 +137,13 @@ export const useFilePreview = ({
          * 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');
+        throw new MediaFilePreviewError('remote-preview-not-ready');
       }
       const remotePreview = await fetchRemotePreviewRef.current(identifier);
       setCardPreview(remotePreview);
       return;
     } catch (e) {
-      const wrappedError = ensureMediaCardError('preview-fetch', 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
@@ -293,7 +205,7 @@ export const useFilePreview = ({
       // refetchSRRPreview: If dimensions from Server have changed and are bigger,
       // we need to refetch
       fetchRemotePreviewRef.current(identifier).then(setCardPreview).catch(e => {
-        const wrappedError = ensureMediaCardError('remote-preview-fetch-ssr', e, true);
+        const wrappedError = ensureMediaFilePreviewError('remote-preview-fetch-ssr', e, true);
         setNonCriticalError(wrappedError);
       });
     }
@@ -301,15 +213,7 @@ export const useFilePreview = ({
     // 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 && shouldResolvePreview({
-      status,
-      fileState: fileState,
-      prevDimensions: prevRequestDimensions,
-      dimensions: requestDimensions,
-      hasCardPreview: !!cardPreview,
-      isBannedLocalPreview,
-      wasResolvedUpfrontPreview: wasResolvedUpfrontPreviewRef.current
-    })) {
+    if (fileState && wasResolvedUpfrontPreviewRef.current && isPreviewableStatus(status, extractFilePreviewStatus(fileState, isBannedLocalPreview)) && (!cardPreview || isBigger(prevRequestDimensions, requestDimensions))) {
       resolvePreviewRef.current(identifier, fileState);
     }
     if (!skipRemote && ssr && !!cardPreview && isSSRClientPreview(cardPreview)) {
@@ -379,7 +283,7 @@ export const useFilePreview = ({
       } else {
         const e = new MediaFileStateError(fileState.id, fileState.reason, fileState.message, fileState.details);
         const errorReason = status === 'uploading' ? 'upload' : 'metadata-fetch';
-        setError(new MediaCardError(errorReason, e));
+        setError(new MediaFilePreviewError(errorReason, e));
         setStatus('error');
       }
     }
@@ -420,7 +324,7 @@ export const useFilePreview = ({
         setNonCriticalError(error);
       }
       const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
-      removeCardPreviewFromCache(identifier.id, fileImageMode);
+      mediaFilePreviewCache.remove(identifier.id, fileImageMode);
       setCardPreview(undefined);
     } else {
       if (!['complete', 'error', 'failed-processing'].includes(status)) {
@@ -479,24 +383,6 @@ export const useFilePreview = ({
     getScriptProps
   };
 };
-const createRequestDimensions = dimensions => {
-  if (!dimensions) {
-    return;
-  }
-  const retinaFactor = isRetina() ? 2 : 1;
-  const {
-    width,
-    height
-  } = dimensions;
-  const result = {};
-  if (width) {
-    result.width = width * retinaFactor;
-  }
-  if (height) {
-    result.height = height * retinaFactor;
-  }
-  return result;
-};
 const initialSsrReliability = {
   server: {
     status: 'unknown'

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