@atlaskit/media-file-preview 0.1.0 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/media-file-preview
 
+## 0.2.1
+
+### Patch Changes
+
+- [#69372](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69372) [`d719e8e81e2c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d719e8e81e2c) - Fixed status for processed files with no 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

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,7 +25,6 @@ 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,
     _ref$allowAnimated = _ref.allowAnimated,
@@ -113,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 && (!fileState || fileState.status === 'processing' || fileState.status === 'uploading')) {
+        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, fileState]);
 
   //----------------------------------------------------------------
   // Preview Fetch Helper
@@ -175,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;
@@ -249,13 +177,21 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
       });
     }
     // 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, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote]);
+  }, [error, nonCriticalError, fileState, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote]);
 
   //----------------------------------------------------------------
   // RETURN
@@ -295,12 +231,10 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
       _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') {
@@ -339,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 { isImageRepresentationReady } from '@atlaskit/media-client';
-import { MediaFileStateError, useFileState, useMediaClient } from '@atlaskit/media-client-react';
+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,7 +13,6 @@ export const useFilePreview = ({
   ssr,
   dimensions,
   traceContext,
-  previewDidRender,
   skipRemote,
   mediaBlobUrlAttrs,
   allowAnimated = true,
@@ -89,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 && (!fileState || fileState.status === 'processing' || fileState.status === 'uploading')) {
+        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, fileState]);
 
   //----------------------------------------------------------------
   // Preview Fetch Helper
@@ -151,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;
@@ -227,13 +155,21 @@ export const useFilePreview = ({
       });
     }
     // 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, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote]);
+  }, [error, nonCriticalError, fileState, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote]);
 
   //----------------------------------------------------------------
   // RETURN
@@ -274,12 +210,10 @@ export const useFilePreview = ({
       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') {
@@ -318,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

@@ -4,11 +4,11 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 { isImageRepresentationReady } from '@atlaskit/media-client';
-import { MediaFileStateError, useFileState, useMediaClient } from '@atlaskit/media-client-react';
+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,7 +18,6 @@ export var useFilePreview = function useFilePreview(_ref) {
     ssr = _ref.ssr,
     dimensions = _ref.dimensions,
     traceContext = _ref.traceContext,
-    previewDidRender = _ref.previewDidRender,
     skipRemote = _ref.skipRemote,
     mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs,
     _ref$allowAnimated = _ref.allowAnimated,
@@ -106,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 && (!fileState || fileState.status === 'processing' || fileState.status === 'uploading')) {
+        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, fileState]);
 
   //----------------------------------------------------------------
   // Preview Fetch Helper
@@ -168,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;
@@ -242,13 +170,21 @@ export var useFilePreview = function useFilePreview(_ref) {
       });
     }
     // 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, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote]);
+  }, [error, nonCriticalError, fileState, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote]);
 
   //----------------------------------------------------------------
   // RETURN
@@ -288,12 +224,10 @@ export var useFilePreview = function useFilePreview(_ref) {
       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') {
@@ -332,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/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

@@ -3,7 +3,7 @@ import { FileIdentifier, MediaBlobUrlAttrs, MediaStoreGetFileImageParams } from
 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;
@@ -17,8 +17,6 @@ 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 */
@@ -29,8 +27,9 @@ export interface UseFilePreviewParams {
      */
     readonly maxAge?: number;
 }
-export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, traceContext, previewDidRender, skipRemote, mediaBlobUrlAttrs, allowAnimated, upscale, maxAge, }: 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/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

@@ -3,7 +3,7 @@ import { FileIdentifier, MediaBlobUrlAttrs, MediaStoreGetFileImageParams } from
 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;
@@ -17,8 +17,6 @@ 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 */
@@ -29,8 +27,9 @@ export interface UseFilePreviewParams {
      */
     readonly maxAge?: number;
 }
-export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, traceContext, previewDidRender, skipRemote, mediaBlobUrlAttrs, allowAnimated, upscale, maxAge, }: 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.1.0",
+  "version": "0.2.1",
   "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,11 +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": "*",
     "@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"