@atlaskit/media-file-preview 0.0.1 → 0.2.0

package/CHANGELOG.md

@@ -1 +1,13 @@
 # @atlaskit/media-file-preview
+
+## 0.2.0
+
+### Minor Changes
+
+- [#65817](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65817) [`de45ff7a33a9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/de45ff7a33a9) - Breaking: removed previewDidRender property
+
+## 0.1.0
+
+### Minor Changes
+
+- [#65749](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65749) [`cf9674e67f0c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cf9674e67f0c) - Breaking: updated prop types

package/dist/cjs/getPreview/getPreview.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isSSRDataPreview = exports.isSSRClientPreview = exports.isLocalPreview = exports.getSSRPreview = exports.getAndCacheRemotePreview = exports.getAndCacheLocalPreview = void 0;
+exports.isSSRPreview = exports.isSSRDataPreview = exports.isSSRClientPreview = exports.isLocalPreview = exports.getSSRPreview = exports.getAndCacheRemotePreview = exports.getAndCacheLocalPreview = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -23,12 +23,6 @@ var extendAndCachePreview = function extendAndCachePreview(id, mode, preview, me
     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;
   }
@@ -65,12 +59,15 @@ var isLocalPreview = exports.isLocalPreview = function isLocalPreview(preview) {
   return localSources.includes(preview.source);
 };
 var isSSRClientPreview = exports.isSSRClientPreview = function isSSRClientPreview(preview) {
-  var ssrClientSources = ['ssr-client', 'cache-ssr-client'];
-  return ssrClientSources.includes(preview.source);
+  return preview.source === 'ssr-client';
 };
 var isSSRDataPreview = exports.isSSRDataPreview = function isSSRDataPreview(preview) {
   return preview.source === 'ssr-data';
 };
+var isSSRPreview = exports.isSSRPreview = function isSSRPreview(preview) {
+  var ssrClientSources = ['ssr-client', 'ssr-server', 'ssr-data'];
+  return ssrClientSources.includes(preview.source);
+};
 var getAndCacheRemotePreview = exports.getAndCacheRemotePreview = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(mediaClient, id, dimensions, params, mediaBlobUrlAttrs, traceContext) {
     var remotePreview;

package/dist/cjs/getPreview/index.js

@@ -39,6 +39,12 @@ Object.defineProperty(exports, "isSSRDataPreview", {
     return _getPreview.isSSRDataPreview;
   }
 });
+Object.defineProperty(exports, "isSSRPreview", {
+  enumerable: true,
+  get: function get() {
+    return _getPreview.isSSRPreview;
+  }
+});
 Object.defineProperty(exports, "isSupportedLocalPreview", {
   enumerable: true,
   get: function get() {

package/dist/cjs/useFilePreview.js

@@ -25,9 +25,12 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     ssr = _ref.ssr,
     dimensions = _ref.dimensions,
     traceContext = _ref.traceContext,
-    previewDidRender = _ref.previewDidRender,
     skipRemote = _ref.skipRemote,
-    mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs;
+    mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs,
+    _ref$allowAnimated = _ref.allowAnimated,
+    allowAnimated = _ref$allowAnimated === void 0 ? true : _ref$allowAnimated,
+    upscale = _ref.upscale,
+    maxAge = _ref.maxAge;
   var mediaClient = (0, _mediaClientReact.useMediaClient)();
   var _useState = (0, _react.useState)('loading'),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -51,17 +54,16 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     return dimensions ? (0, _helpers.createRequestDimensions)(dimensions) : undefined;
   }, [dimensions]);
   var requestDimensionsRef = (0, _helpers.useCurrentValueRef)(requestDimensions);
-  var imageURLParams = (0, _react.useMemo)(function () {
-    return _objectSpread(_objectSpread({
-      collection: identifier.collectionName,
-      mode: resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode
-    }, requestDimensions), {}, {
-      allowAnimated: true
-    });
-  }, [requestDimensions, identifier.collectionName, resizeMode]);
+  var imageURLParams = _objectSpread(_objectSpread({
+    collection: identifier.collectionName,
+    mode: resizeMode
+  }, requestDimensions), {}, {
+    allowAnimated: allowAnimated,
+    upscale: upscale,
+    'max-age': maxAge
+  });
   var previewInitializer = function previewInitializer() {
-    var fileImageMode = (0, _mediaClient.imageResizeModeToFileImageMode)(resizeMode);
-    var preview = _getPreview.mediaFilePreviewCache.get(identifier.id, fileImageMode);
+    var preview = _getPreview.mediaFilePreviewCache.get(identifier.id, resizeMode);
     if (preview) {
       return preview;
     }
@@ -110,60 +112,15 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
   (0, _react.useEffect)(function () {
     setStatus('loading');
   }, [identifier]);
-  var updateFileStateRef = (0, _helpers.useCurrentValueRef)(function () {
-    if (fileState) {
-      // do not update the status if the status is final
-      if (['complete', 'error', 'failed-processing'].includes(status)) {
-        return;
-      }
-      if (fileState.status !== 'error') {
-        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 && (0, _mediaCommon.isMimeTypeSupportedByBrowser)(fileState.mimeType);
-        var hasRemotePreview = (0, _mediaClient.isImageRepresentationReady)(fileState);
-        var hasPreview = hasLocalPreview || hasRemotePreview;
-        var 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);
+  (0, _react.useEffect)(function () {
+    if (status !== 'error') {
+      if (!preview) {
+        setStatus('loading');
       } else {
-        var e = new _mediaClientReact.MediaFileStateError(fileState.id, fileState.reason, fileState.message, fileState.details);
-        var errorReason = status === 'uploading' ? 'upload' : 'metadata-fetch';
-        setError(new _errors.MediaFilePreviewError(errorReason, e));
-        setStatus('error');
+        setStatus('complete');
       }
     }
-  });
-  (0, _react.useEffect)(function () {
-    updateFileStateRef.current();
-  }, [fileState, updateFileStateRef]);
-  (0, _react.useEffect)(function () {
-    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]);
-
-  // CXP-2723 TODO: Create test cases for banning local preview after status is complete
+  }, [preview, status]);
 
   //----------------------------------------------------------------
   // Preview Fetch Helper
@@ -172,40 +129,14 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     return (0, _getPreview.getAndCacheRemotePreview)(mediaClient, identifier.id, requestDimensions || {}, imageURLParams, mediaBlobUrlAttrs, traceContext);
   });
 
-  //----------------------------------------------------------------
-  // Cache SSR Preview
-  //----------------------------------------------------------------
-  (0, _react.useEffect)(function () {
-    if (!skipRemote && ssr && !!preview && (0, _getPreview.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(function () {
-        // No need to log this error.
-        // If preview fails, it will be refetched later
-        //TODO: test this catch
-        // https://product-fabric.atlassian.net/browse/MEX-1071
-      });
-    }
-  }, [getAndCacheRemotePreviewRef, preview, skipRemote, ssr]);
-
-  //----------------------------------------------------------------
-  // Refetch SRR Preview if dimensions from Server have changed and are bigger,
-  //----------------------------------------------------------------
-  (0, _react.useEffect)(function () {
-    // CXP-2813 TODO: This is called too many times if the refetch failed. Should be called only once
-    if (preview && !skipRemote && (0, _getPreview.isSSRDataPreview)(preview) && (0, _helpers.isBigger)(preview.dimensions, requestDimensions)) {
-      getAndCacheRemotePreviewRef.current().then(setPreview).catch(function (e) {
-        var wrappedError = (0, _errors.ensureMediaFilePreviewError)('remote-preview-fetch-ssr', e, true);
-        setNonCriticalError(wrappedError);
-      });
-    }
-  }, [getAndCacheRemotePreviewRef, preview, requestDimensions, skipRemote]);
-
   //----------------------------------------------------------------
   // Upfront Preview
   //----------------------------------------------------------------
   (0, _react.useEffect)(function () {
-    if (!preview && !wasResolvedUpfrontPreviewRef.current && !skipRemote) {
+    // Only fetch upfront (no file state) if there is no preview in the state already
+    if (preview) {
+      wasResolvedUpfrontPreviewRef.current = true;
+    } else 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;
@@ -227,7 +158,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
   //----------------------------------------------------------------
 
   (0, _react.useEffect)(function () {
-    var cachedPreview = _getPreview.mediaFilePreviewCache.get(identifier.id, imageURLParams.mode);
+    var cachedPreview = _getPreview.mediaFilePreviewCache.get(identifier.id, resizeMode);
 
     // Cached Preview ----------------------------------------------------------------
     if (!preview && cachedPreview && !(0, _helpers.isBigger)(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, requestDimensions)) {
@@ -239,20 +170,28 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
       // For example, SVGs are mime type NOT supported by browser but media type supported by Media Card (image)
       // Then, local Preview NOT available
 
-      (0, _getPreview.getAndCacheLocalPreview)(identifier.id, fileState.preview, requestDimensions || {}, imageURLParams.mode, mediaBlobUrlAttrs).then(setPreview).catch(function (e) {
+      (0, _getPreview.getAndCacheLocalPreview)(identifier.id, fileState.preview, requestDimensions || {}, resizeMode, 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 || (0, _helpers.isBigger)(preview.dimensions, requestDimensions)) && !skipRemote && wasResolvedUpfrontPreviewRef.current && !!fileState && (0, _mediaClient.isImageRepresentationReady)(fileState)) {
+    else if (!error && !nonCriticalError && (!preview || (0, _helpers.isBigger)(preview.dimensions, requestDimensions) ||
+    // We always refetch SSR preview to be able to browser-cache a version without the token in the query parameters
+    (0, _getPreview.isSSRPreview)(preview)) && !skipRemote && wasResolvedUpfrontPreviewRef.current && !!fileState && (0, _mediaClient.isImageRepresentationReady)(fileState)) {
       getAndCacheRemotePreviewRef.current().then(setPreview).catch(function (e) {
-        setStatus('error');
-        setError((0, _errors.ensureMediaFilePreviewError)('preview-fetch', e));
+        var wrappedError = (0, _errors.ensureMediaFilePreviewError)('preview-fetch', e);
+        if (!preview) {
+          setStatus('error');
+          setError(wrappedError);
+        } else {
+          // If there is already a preview, we consider it a non-critical error
+          setNonCriticalError(wrappedError);
+        }
       });
     }
-  }, [fileState, getAndCacheRemotePreviewRef, identifier.id, imageURLParams.mode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote]);
+  }, [error, nonCriticalError, fileState, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote]);
 
   //----------------------------------------------------------------
   // RETURN
@@ -289,16 +228,13 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
         setIsBannedLocalPreview(true);
         setNonCriticalError(error);
       }
-      var fileImageMode = (0, _mediaClient.imageResizeModeToFileImageMode)(resizeMode);
-      _getPreview.mediaFilePreviewCache.remove(identifier.id, fileImageMode);
+      _getPreview.mediaFilePreviewCache.remove(identifier.id, resizeMode);
       setPreview(undefined);
     } else {
-      if (!['complete', 'error', 'failed-processing'].includes(status)) {
-        setStatus('error');
-        setError(error);
-      }
+      setStatus('error');
+      setError(error);
     }
-  }, [identifier.id, preview === null || preview === void 0 ? void 0 : preview.dataURI, resizeMode, status]);
+  }, [identifier.id, preview === null || preview === void 0 ? void 0 : preview.dataURI, resizeMode]);
   var onImageLoad = (0, _react.useCallback)(function (newPreview) {
     if (newPreview) {
       if ((0, _getPreview.isSSRClientPreview)(newPreview) && ssrReliabilityRef.current.client.status === 'unknown') {
@@ -337,6 +273,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
   // we might get rid of ssrReliabiltyRef from our hook
   return {
     preview: preview,
+    status: status,
     error: error,
     nonCriticalError: nonCriticalError,
     ssrReliabilityRef: ssrReliabilityRef,

package/dist/es2019/getPreview/getPreview.js

@@ -11,12 +11,6 @@ const extendAndCachePreview = (id, mode, preview, mediaBlobUrlAttrs) => {
     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;
   }
@@ -54,11 +48,12 @@ 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'];
+export const isSSRClientPreview = preview => preview.source === 'ssr-client';
+export const isSSRDataPreview = preview => preview.source === 'ssr-data';
+export const isSSRPreview = preview => {
+  const ssrClientSources = ['ssr-client', 'ssr-server', 'ssr-data'];
   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, {

package/dist/es2019/getPreview/index.js

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

package/dist/es2019/useFilePreview.js

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { imageResizeModeToFileImageMode, isImageRepresentationReady } from '@atlaskit/media-client';
-import { MediaFileStateError, useFileState, useMediaClient } from '@atlaskit/media-client-react';
+import { isImageRepresentationReady } from '@atlaskit/media-client';
+import { useFileState, useMediaClient } from '@atlaskit/media-client-react';
 import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
 import { extractErrorInfo } from './analytics';
-import { ensureMediaFilePreviewError, ImageLoadError, MediaFilePreviewError } from './errors';
-import { getAndCacheLocalPreview, getAndCacheRemotePreview, getSSRPreview, isLocalPreview, isSSRClientPreview, isSSRDataPreview, isSupportedLocalPreview, mediaFilePreviewCache } from './getPreview';
+import { ensureMediaFilePreviewError, ImageLoadError } from './errors';
+import { getAndCacheLocalPreview, getAndCacheRemotePreview, getSSRPreview, isLocalPreview, isSSRClientPreview, isSSRDataPreview, isSSRPreview, isSupportedLocalPreview, mediaFilePreviewCache } from './getPreview';
 import { generateScriptProps, getSSRData } from './globalScope';
 import { createRequestDimensions, isBigger, useCurrentValueRef } from './helpers';
 export const useFilePreview = ({
@@ -13,9 +13,11 @@ export const useFilePreview = ({
   ssr,
   dimensions,
   traceContext,
-  previewDidRender,
   skipRemote,
-  mediaBlobUrlAttrs
+  mediaBlobUrlAttrs,
+  allowAnimated = true,
+  upscale,
+  maxAge
 }) => {
   const mediaClient = useMediaClient();
   const [status, setStatus] = useState('loading');
@@ -26,15 +28,16 @@ export const useFilePreview = ({
   const ssrReliabilityRef = useRef(initialSsrReliability);
   const requestDimensions = useMemo(() => dimensions ? createRequestDimensions(dimensions) : undefined, [dimensions]);
   const requestDimensionsRef = useCurrentValueRef(requestDimensions);
-  const imageURLParams = useMemo(() => ({
+  const imageURLParams = {
     collection: identifier.collectionName,
-    mode: resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode,
+    mode: resizeMode,
     ...requestDimensions,
-    allowAnimated: true
-  }), [requestDimensions, identifier.collectionName, resizeMode]);
+    allowAnimated,
+    upscale,
+    'max-age': maxAge
+  };
   const previewInitializer = () => {
-    const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
-    const preview = mediaFilePreviewCache.get(identifier.id, fileImageMode);
+    const preview = mediaFilePreviewCache.get(identifier.id, resizeMode);
     if (preview) {
       return preview;
     }
@@ -85,60 +88,15 @@ export const useFilePreview = ({
   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);
+  useEffect(() => {
+    if (status !== 'error') {
+      if (!preview) {
+        setStatus('loading');
       } 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');
+        setStatus('complete');
       }
     }
-  });
-  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]);
-
-  // CXP-2723 TODO: Create test cases for banning local preview after status is complete
+  }, [preview, status]);
 
   //----------------------------------------------------------------
   // Preview Fetch Helper
@@ -147,40 +105,14 @@ export const useFilePreview = ({
     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
-      });
-    }
-  }, [getAndCacheRemotePreviewRef, preview, skipRemote, ssr]);
-
-  //----------------------------------------------------------------
-  // 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, preview, requestDimensions, skipRemote]);
-
   //----------------------------------------------------------------
   // Upfront Preview
   //----------------------------------------------------------------
   useEffect(() => {
-    if (!preview && !wasResolvedUpfrontPreviewRef.current && !skipRemote) {
+    // Only fetch upfront (no file state) if there is no preview in the state already
+    if (preview) {
+      wasResolvedUpfrontPreviewRef.current = true;
+    } else 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;
@@ -204,7 +136,7 @@ export const useFilePreview = ({
   //----------------------------------------------------------------
 
   useEffect(() => {
-    const cachedPreview = mediaFilePreviewCache.get(identifier.id, imageURLParams.mode);
+    const cachedPreview = mediaFilePreviewCache.get(identifier.id, resizeMode);
 
     // Cached Preview ----------------------------------------------------------------
     if (!preview && cachedPreview && !isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, requestDimensions)) {
@@ -216,20 +148,28 @@ export const useFilePreview = ({
       // 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 => {
+      getAndCacheLocalPreview(identifier.id, fileState.preview, requestDimensions || {}, resizeMode, mediaBlobUrlAttrs).then(setPreview).catch(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)) {
+    else if (!error && !nonCriticalError && (!preview || isBigger(preview.dimensions, requestDimensions) ||
+    // We always refetch SSR preview to be able to browser-cache a version without the token in the query parameters
+    isSSRPreview(preview)) && !skipRemote && wasResolvedUpfrontPreviewRef.current && !!fileState && isImageRepresentationReady(fileState)) {
       getAndCacheRemotePreviewRef.current().then(setPreview).catch(e => {
-        setStatus('error');
-        setError(ensureMediaFilePreviewError('preview-fetch', e));
+        const wrappedError = ensureMediaFilePreviewError('preview-fetch', e);
+        if (!preview) {
+          setStatus('error');
+          setError(wrappedError);
+        } else {
+          // If there is already a preview, we consider it a non-critical error
+          setNonCriticalError(wrappedError);
+        }
       });
     }
-  }, [fileState, getAndCacheRemotePreviewRef, identifier.id, imageURLParams.mode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote]);
+  }, [error, nonCriticalError, fileState, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote]);
 
   //----------------------------------------------------------------
   // RETURN
@@ -267,16 +207,13 @@ export const useFilePreview = ({
         setIsBannedLocalPreview(true);
         setNonCriticalError(error);
       }
-      const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
-      mediaFilePreviewCache.remove(identifier.id, fileImageMode);
+      mediaFilePreviewCache.remove(identifier.id, resizeMode);
       setPreview(undefined);
     } else {
-      if (!['complete', 'error', 'failed-processing'].includes(status)) {
-        setStatus('error');
-        setError(error);
-      }
+      setStatus('error');
+      setError(error);
     }
-  }, [identifier.id, preview === null || preview === void 0 ? void 0 : preview.dataURI, resizeMode, status]);
+  }, [identifier.id, preview === null || preview === void 0 ? void 0 : preview.dataURI, resizeMode]);
   const onImageLoad = useCallback(newPreview => {
     if (newPreview) {
       if (isSSRClientPreview(newPreview) && ssrReliabilityRef.current.client.status === 'unknown') {
@@ -315,6 +252,7 @@ export const useFilePreview = ({
   // we might get rid of ssrReliabiltyRef from our hook
   return {
     preview,
+    status,
     error,
     nonCriticalError,
     ssrReliabilityRef,

package/dist/esm/getPreview/getPreview.js

@@ -16,12 +16,6 @@ var extendAndCachePreview = function extendAndCachePreview(id, mode, preview, me
     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;
   }
@@ -58,12 +52,15 @@ export var isLocalPreview = function isLocalPreview(preview) {
   return localSources.includes(preview.source);
 };
 export var isSSRClientPreview = function isSSRClientPreview(preview) {
-  var ssrClientSources = ['ssr-client', 'cache-ssr-client'];
-  return ssrClientSources.includes(preview.source);
+  return preview.source === 'ssr-client';
 };
 export var isSSRDataPreview = function isSSRDataPreview(preview) {
   return preview.source === 'ssr-data';
 };
+export var isSSRPreview = function isSSRPreview(preview) {
+  var ssrClientSources = ['ssr-client', 'ssr-server', 'ssr-data'];
+  return ssrClientSources.includes(preview.source);
+};
 export var getAndCacheRemotePreview = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(mediaClient, id, dimensions, params, mediaBlobUrlAttrs, traceContext) {
     var remotePreview;

package/dist/esm/getPreview/index.js

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

package/dist/esm/useFilePreview.js

@@ -3,12 +3,12 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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 { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { imageResizeModeToFileImageMode, isImageRepresentationReady } from '@atlaskit/media-client';
-import { MediaFileStateError, useFileState, useMediaClient } from '@atlaskit/media-client-react';
+import { isImageRepresentationReady } from '@atlaskit/media-client';
+import { useFileState, useMediaClient } from '@atlaskit/media-client-react';
 import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
 import { extractErrorInfo } from './analytics';
-import { ensureMediaFilePreviewError, ImageLoadError, MediaFilePreviewError } from './errors';
-import { getAndCacheLocalPreview, getAndCacheRemotePreview, getSSRPreview, isLocalPreview, isSSRClientPreview, isSSRDataPreview, isSupportedLocalPreview, mediaFilePreviewCache } from './getPreview';
+import { ensureMediaFilePreviewError, ImageLoadError } from './errors';
+import { getAndCacheLocalPreview, getAndCacheRemotePreview, getSSRPreview, isLocalPreview, isSSRClientPreview, isSSRDataPreview, isSSRPreview, isSupportedLocalPreview, mediaFilePreviewCache } from './getPreview';
 import { generateScriptProps, getSSRData } from './globalScope';
 import { createRequestDimensions, isBigger, useCurrentValueRef } from './helpers';
 export var useFilePreview = function useFilePreview(_ref) {
@@ -18,9 +18,12 @@ export var useFilePreview = function useFilePreview(_ref) {
     ssr = _ref.ssr,
     dimensions = _ref.dimensions,
     traceContext = _ref.traceContext,
-    previewDidRender = _ref.previewDidRender,
     skipRemote = _ref.skipRemote,
-    mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs;
+    mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs,
+    _ref$allowAnimated = _ref.allowAnimated,
+    allowAnimated = _ref$allowAnimated === void 0 ? true : _ref$allowAnimated,
+    upscale = _ref.upscale,
+    maxAge = _ref.maxAge;
   var mediaClient = useMediaClient();
   var _useState = useState('loading'),
     _useState2 = _slicedToArray(_useState, 2),
@@ -44,17 +47,16 @@ export var useFilePreview = function useFilePreview(_ref) {
     return dimensions ? createRequestDimensions(dimensions) : undefined;
   }, [dimensions]);
   var requestDimensionsRef = useCurrentValueRef(requestDimensions);
-  var imageURLParams = useMemo(function () {
-    return _objectSpread(_objectSpread({
-      collection: identifier.collectionName,
-      mode: resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode
-    }, requestDimensions), {}, {
-      allowAnimated: true
-    });
-  }, [requestDimensions, identifier.collectionName, resizeMode]);
+  var imageURLParams = _objectSpread(_objectSpread({
+    collection: identifier.collectionName,
+    mode: resizeMode
+  }, requestDimensions), {}, {
+    allowAnimated: allowAnimated,
+    upscale: upscale,
+    'max-age': maxAge
+  });
   var previewInitializer = function previewInitializer() {
-    var fileImageMode = imageResizeModeToFileImageMode(resizeMode);
-    var preview = mediaFilePreviewCache.get(identifier.id, fileImageMode);
+    var preview = mediaFilePreviewCache.get(identifier.id, resizeMode);
     if (preview) {
       return preview;
     }
@@ -103,60 +105,15 @@ export var useFilePreview = function useFilePreview(_ref) {
   useEffect(function () {
     setStatus('loading');
   }, [identifier]);
-  var updateFileStateRef = useCurrentValueRef(function () {
-    if (fileState) {
-      // do not update the status if the status is final
-      if (['complete', 'error', 'failed-processing'].includes(status)) {
-        return;
-      }
-      if (fileState.status !== 'error') {
-        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 hasRemotePreview = isImageRepresentationReady(fileState);
-        var hasPreview = hasLocalPreview || hasRemotePreview;
-        var 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);
+  useEffect(function () {
+    if (status !== 'error') {
+      if (!preview) {
+        setStatus('loading');
       } else {
-        var e = new MediaFileStateError(fileState.id, fileState.reason, fileState.message, fileState.details);
-        var errorReason = status === 'uploading' ? 'upload' : 'metadata-fetch';
-        setError(new MediaFilePreviewError(errorReason, e));
-        setStatus('error');
+        setStatus('complete');
       }
     }
-  });
-  useEffect(function () {
-    updateFileStateRef.current();
-  }, [fileState, updateFileStateRef]);
-  useEffect(function () {
-    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]);
-
-  // CXP-2723 TODO: Create test cases for banning local preview after status is complete
+  }, [preview, status]);
 
   //----------------------------------------------------------------
   // Preview Fetch Helper
@@ -165,40 +122,14 @@ export var useFilePreview = function useFilePreview(_ref) {
     return getAndCacheRemotePreview(mediaClient, identifier.id, requestDimensions || {}, imageURLParams, mediaBlobUrlAttrs, traceContext);
   });
 
-  //----------------------------------------------------------------
-  // Cache SSR Preview
-  //----------------------------------------------------------------
-  useEffect(function () {
-    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(function () {
-        // No need to log this error.
-        // If preview fails, it will be refetched later
-        //TODO: test this catch
-        // https://product-fabric.atlassian.net/browse/MEX-1071
-      });
-    }
-  }, [getAndCacheRemotePreviewRef, preview, skipRemote, ssr]);
-
-  //----------------------------------------------------------------
-  // Refetch SRR Preview if dimensions from Server have changed and are bigger,
-  //----------------------------------------------------------------
-  useEffect(function () {
-    // 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(function (e) {
-        var wrappedError = ensureMediaFilePreviewError('remote-preview-fetch-ssr', e, true);
-        setNonCriticalError(wrappedError);
-      });
-    }
-  }, [getAndCacheRemotePreviewRef, preview, requestDimensions, skipRemote]);
-
   //----------------------------------------------------------------
   // Upfront Preview
   //----------------------------------------------------------------
   useEffect(function () {
-    if (!preview && !wasResolvedUpfrontPreviewRef.current && !skipRemote) {
+    // Only fetch upfront (no file state) if there is no preview in the state already
+    if (preview) {
+      wasResolvedUpfrontPreviewRef.current = true;
+    } else 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;
@@ -220,7 +151,7 @@ export var useFilePreview = function useFilePreview(_ref) {
   //----------------------------------------------------------------
 
   useEffect(function () {
-    var cachedPreview = mediaFilePreviewCache.get(identifier.id, imageURLParams.mode);
+    var cachedPreview = mediaFilePreviewCache.get(identifier.id, resizeMode);
 
     // Cached Preview ----------------------------------------------------------------
     if (!preview && cachedPreview && !isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, requestDimensions)) {
@@ -232,20 +163,28 @@ export var useFilePreview = function useFilePreview(_ref) {
       // 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) {
+      getAndCacheLocalPreview(identifier.id, fileState.preview, requestDimensions || {}, resizeMode, 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)) {
+    else if (!error && !nonCriticalError && (!preview || isBigger(preview.dimensions, requestDimensions) ||
+    // We always refetch SSR preview to be able to browser-cache a version without the token in the query parameters
+    isSSRPreview(preview)) && !skipRemote && wasResolvedUpfrontPreviewRef.current && !!fileState && isImageRepresentationReady(fileState)) {
       getAndCacheRemotePreviewRef.current().then(setPreview).catch(function (e) {
-        setStatus('error');
-        setError(ensureMediaFilePreviewError('preview-fetch', e));
+        var wrappedError = ensureMediaFilePreviewError('preview-fetch', e);
+        if (!preview) {
+          setStatus('error');
+          setError(wrappedError);
+        } else {
+          // If there is already a preview, we consider it a non-critical error
+          setNonCriticalError(wrappedError);
+        }
       });
     }
-  }, [fileState, getAndCacheRemotePreviewRef, identifier.id, imageURLParams.mode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote]);
+  }, [error, nonCriticalError, fileState, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote]);
 
   //----------------------------------------------------------------
   // RETURN
@@ -282,16 +221,13 @@ export var useFilePreview = function useFilePreview(_ref) {
         setIsBannedLocalPreview(true);
         setNonCriticalError(error);
       }
-      var fileImageMode = imageResizeModeToFileImageMode(resizeMode);
-      mediaFilePreviewCache.remove(identifier.id, fileImageMode);
+      mediaFilePreviewCache.remove(identifier.id, resizeMode);
       setPreview(undefined);
     } else {
-      if (!['complete', 'error', 'failed-processing'].includes(status)) {
-        setStatus('error');
-        setError(error);
-      }
+      setStatus('error');
+      setError(error);
     }
-  }, [identifier.id, preview === null || preview === void 0 ? void 0 : preview.dataURI, resizeMode, status]);
+  }, [identifier.id, preview === null || preview === void 0 ? void 0 : preview.dataURI, resizeMode]);
   var onImageLoad = useCallback(function (newPreview) {
     if (newPreview) {
       if (isSSRClientPreview(newPreview) && ssrReliabilityRef.current.client.status === 'unknown') {
@@ -330,6 +266,7 @@ export var useFilePreview = function useFilePreview(_ref) {
   // we might get rid of ssrReliabiltyRef from our hook
   return {
     preview: preview,
+    status: status,
     error: error,
     nonCriticalError: nonCriticalError,
     ssrReliabilityRef: ssrReliabilityRef,

package/dist/types/getPreview/cache.d.ts

@@ -1,7 +1,7 @@
-import { ImageResizeMode } from '@atlaskit/media-client';
+import { MediaStoreGetFileImageParams } from '@atlaskit/media-client';
 import { MediaFilePreview } from '../types';
 import { ObjectURLCache } from './objectURLCache';
-type Mode = ImageResizeMode | undefined;
+type Mode = MediaStoreGetFileImageParams['mode'] | undefined;
 export declare const getCacheKey: (id: string, mode: Mode) => string;
 export interface MediaFilePreviewCache {
     get(id: string, mode: Mode): MediaFilePreview | undefined;

package/dist/types/getPreview/getPreview.d.ts

@@ -5,5 +5,6 @@ export declare const getSSRPreview: (ssr: SSR, mediaClient: MediaClient, id: str
 export declare const isLocalPreview: (preview: MediaFilePreview) => boolean;
 export declare const isSSRClientPreview: (preview: MediaFilePreview) => boolean;
 export declare const isSSRDataPreview: (preview: MediaFilePreview) => boolean;
+export declare const isSSRPreview: (preview: MediaFilePreview) => boolean;
 export declare const getAndCacheRemotePreview: (mediaClient: MediaClient, id: string, dimensions: MediaFilePreviewDimensions, params: MediaStoreGetFileImageParams, mediaBlobUrlAttrs?: MediaBlobUrlAttrs, traceContext?: MediaTraceContext) => Promise<MediaFilePreview>;
 export declare const getAndCacheLocalPreview: (id: string, filePreview: FilePreview | Promise<FilePreview>, dimensions: MediaFilePreviewDimensions, mode: MediaStoreGetFileImageParams['mode'], mediaBlobUrlAttrs?: MediaBlobUrlAttrs) => Promise<MediaFilePreview>;

package/dist/types/getPreview/index.d.ts

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

package/dist/types/types.d.ts

@@ -1,4 +1,4 @@
-export type MediaFilePreviewSource = 'local' | 'remote' | 'ssr-server' | 'ssr-client' | 'ssr-data' | 'cache-local' | 'cache-remote' | 'cache-ssr-client' | 'cache-ssr-server' | 'external';
+export type MediaFilePreviewSource = 'local' | 'remote' | 'ssr-server' | 'ssr-client' | 'ssr-data' | 'cache-local' | 'cache-remote' | 'external';
 export type MediaFilePreviewDimensions = {
     width?: number;
     height?: number;
@@ -9,4 +9,4 @@ export interface MediaFilePreview {
     dimensions?: MediaFilePreviewDimensions;
     source: MediaFilePreviewSource;
 }
-export type MediaFilePreviewStatus = 'uploading' | 'loading' | 'processing' | 'loading-preview' | 'complete' | 'error' | 'failed-processing';
+export type MediaFilePreviewStatus = 'loading' | 'complete' | 'error';

package/dist/types/useFilePreview.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
-import { FileIdentifier, ImageResizeMode, MediaBlobUrlAttrs } from '@atlaskit/media-client';
+import { FileIdentifier, MediaBlobUrlAttrs, MediaStoreGetFileImageParams } from '@atlaskit/media-client';
 import { MediaTraceContext, SSR } from '@atlaskit/media-common';
 import { SSRStatus } from './analytics';
 import { MediaFilePreviewError } from './errors';
-import { MediaFilePreview, MediaFilePreviewDimensions } from './types';
+import { MediaFilePreview, MediaFilePreviewDimensions, MediaFilePreviewStatus } from './types';
 export interface UseFilePreviewParams {
     /** Instance of file identifier. */
     readonly identifier: FileIdentifier;
-    /** Resize the media to 'crop' | 'fit' | 'full-fit' | 'stretchy-fit' */
-    readonly resizeMode?: ImageResizeMode;
+    /** Resize the media to 'crop' | 'fit' | 'full-fit' */
+    readonly resizeMode?: MediaStoreGetFileImageParams['mode'];
     /** Dimensions to be requested to the server. Will be scaled x2 in Retina Displays */
     readonly dimensions?: MediaFilePreviewDimensions;
     /** Server-Side-Rendering modes are "server" and "client" */
@@ -17,13 +17,19 @@ export interface UseFilePreviewParams {
     readonly mediaBlobUrlAttrs?: MediaBlobUrlAttrs;
     /** Trace context to be passed to the backend requests */
     readonly traceContext?: MediaTraceContext;
-    /** Notify the hook that the preview successfully rendered */
-    readonly previewDidRender?: boolean;
     /** Do not fetch a remote preview. Helpful for lazy loading */
     readonly skipRemote?: boolean;
+    /** Define whether an animated image is acceptable to return */
+    readonly allowAnimated?: boolean;
+    /** Define the upscale strategy for this image. */
+    readonly upscale?: boolean;
+    /** Make the client receive the response with the given max-age cache control header. Minimum: 0, maximum: 9223372036854776000.
+     */
+    readonly maxAge?: number;
 }
-export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, traceContext, previewDidRender, skipRemote, mediaBlobUrlAttrs, }: UseFilePreviewParams) => {
+export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, traceContext, skipRemote, mediaBlobUrlAttrs, allowAnimated, upscale, maxAge, }: UseFilePreviewParams) => {
     preview: MediaFilePreview | undefined;
+    status: MediaFilePreviewStatus;
     error: MediaFilePreviewError | undefined;
     nonCriticalError: MediaFilePreviewError | undefined;
     ssrReliabilityRef: import("react").MutableRefObject<SSRStatus>;

package/dist/types-ts4.5/getPreview/cache.d.ts

@@ -1,7 +1,7 @@
-import { ImageResizeMode } from '@atlaskit/media-client';
+import { MediaStoreGetFileImageParams } from '@atlaskit/media-client';
 import { MediaFilePreview } from '../types';
 import { ObjectURLCache } from './objectURLCache';
-type Mode = ImageResizeMode | undefined;
+type Mode = MediaStoreGetFileImageParams['mode'] | undefined;
 export declare const getCacheKey: (id: string, mode: Mode) => string;
 export interface MediaFilePreviewCache {
     get(id: string, mode: Mode): MediaFilePreview | undefined;

package/dist/types-ts4.5/getPreview/getPreview.d.ts

@@ -5,5 +5,6 @@ export declare const getSSRPreview: (ssr: SSR, mediaClient: MediaClient, id: str
 export declare const isLocalPreview: (preview: MediaFilePreview) => boolean;
 export declare const isSSRClientPreview: (preview: MediaFilePreview) => boolean;
 export declare const isSSRDataPreview: (preview: MediaFilePreview) => boolean;
+export declare const isSSRPreview: (preview: MediaFilePreview) => boolean;
 export declare const getAndCacheRemotePreview: (mediaClient: MediaClient, id: string, dimensions: MediaFilePreviewDimensions, params: MediaStoreGetFileImageParams, mediaBlobUrlAttrs?: MediaBlobUrlAttrs, traceContext?: MediaTraceContext) => Promise<MediaFilePreview>;
 export declare const getAndCacheLocalPreview: (id: string, filePreview: FilePreview | Promise<FilePreview>, dimensions: MediaFilePreviewDimensions, mode: MediaStoreGetFileImageParams['mode'], mediaBlobUrlAttrs?: MediaBlobUrlAttrs) => Promise<MediaFilePreview>;

package/dist/types-ts4.5/getPreview/index.d.ts

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

package/dist/types-ts4.5/types.d.ts

@@ -1,4 +1,4 @@
-export type MediaFilePreviewSource = 'local' | 'remote' | 'ssr-server' | 'ssr-client' | 'ssr-data' | 'cache-local' | 'cache-remote' | 'cache-ssr-client' | 'cache-ssr-server' | 'external';
+export type MediaFilePreviewSource = 'local' | 'remote' | 'ssr-server' | 'ssr-client' | 'ssr-data' | 'cache-local' | 'cache-remote' | 'external';
 export type MediaFilePreviewDimensions = {
     width?: number;
     height?: number;
@@ -9,4 +9,4 @@ export interface MediaFilePreview {
     dimensions?: MediaFilePreviewDimensions;
     source: MediaFilePreviewSource;
 }
-export type MediaFilePreviewStatus = 'uploading' | 'loading' | 'processing' | 'loading-preview' | 'complete' | 'error' | 'failed-processing';
+export type MediaFilePreviewStatus = 'loading' | 'complete' | 'error';

package/dist/types-ts4.5/useFilePreview.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
-import { FileIdentifier, ImageResizeMode, MediaBlobUrlAttrs } from '@atlaskit/media-client';
+import { FileIdentifier, MediaBlobUrlAttrs, MediaStoreGetFileImageParams } from '@atlaskit/media-client';
 import { MediaTraceContext, SSR } from '@atlaskit/media-common';
 import { SSRStatus } from './analytics';
 import { MediaFilePreviewError } from './errors';
-import { MediaFilePreview, MediaFilePreviewDimensions } from './types';
+import { MediaFilePreview, MediaFilePreviewDimensions, MediaFilePreviewStatus } from './types';
 export interface UseFilePreviewParams {
     /** Instance of file identifier. */
     readonly identifier: FileIdentifier;
-    /** Resize the media to 'crop' | 'fit' | 'full-fit' | 'stretchy-fit' */
-    readonly resizeMode?: ImageResizeMode;
+    /** Resize the media to 'crop' | 'fit' | 'full-fit' */
+    readonly resizeMode?: MediaStoreGetFileImageParams['mode'];
     /** Dimensions to be requested to the server. Will be scaled x2 in Retina Displays */
     readonly dimensions?: MediaFilePreviewDimensions;
     /** Server-Side-Rendering modes are "server" and "client" */
@@ -17,13 +17,19 @@ export interface UseFilePreviewParams {
     readonly mediaBlobUrlAttrs?: MediaBlobUrlAttrs;
     /** Trace context to be passed to the backend requests */
     readonly traceContext?: MediaTraceContext;
-    /** Notify the hook that the preview successfully rendered */
-    readonly previewDidRender?: boolean;
     /** Do not fetch a remote preview. Helpful for lazy loading */
     readonly skipRemote?: boolean;
+    /** Define whether an animated image is acceptable to return */
+    readonly allowAnimated?: boolean;
+    /** Define the upscale strategy for this image. */
+    readonly upscale?: boolean;
+    /** Make the client receive the response with the given max-age cache control header. Minimum: 0, maximum: 9223372036854776000.
+     */
+    readonly maxAge?: number;
 }
-export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, traceContext, previewDidRender, skipRemote, mediaBlobUrlAttrs, }: UseFilePreviewParams) => {
+export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, traceContext, skipRemote, mediaBlobUrlAttrs, allowAnimated, upscale, maxAge, }: UseFilePreviewParams) => {
     preview: MediaFilePreview | undefined;
+    status: MediaFilePreviewStatus;
     error: MediaFilePreviewError | undefined;
     nonCriticalError: MediaFilePreviewError | undefined;
     ssrReliabilityRef: import("react").MutableRefObject<SSRStatus>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-file-preview",
-  "version": "0.0.1",
+  "version": "0.2.0",
   "description": "A React Hook to fetch and render file previews. It's overloaded with fancy features like SSR, lazy loading, memory cache and local preview.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -16,7 +16,7 @@
       "category": "Components"
     }
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
@@ -49,12 +49,14 @@
   "devDependencies": {
     "@af/integration-testing": "*",
     "@af/visual-regression": "*",
+    "@atlaskit/media-state": "^1.0.3",
+    "@atlaskit/media-test-data": "^1.1.1",
     "@atlaskit/section-message": "^6.4.17",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
-    "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "react-dom": "^16.8.0",
     "typescript": "~4.9.5",
     "wait-for-expect": "^1.2.0"