@atlaskit/media-file-preview 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/media-file-preview
 
+## 0.4.2
+
+### Patch Changes
+
+- [#71793](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/71793) [`26115be71855`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/26115be71855) - Added support for Error File State
+
+## 0.4.1
+
+### Patch Changes
+
+- [#71409](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/71409) [`5c76dfba92dd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5c76dfba92dd) - Pass trace context to global scope error
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/cjs/useFilePreview.js

@@ -48,7 +48,10 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     isBannedLocalPreview = _useState8[0],
     setIsBannedLocalPreview = _useState8[1];
-  var wasResolvedUpfrontPreviewRef = (0, _react.useRef)(false);
+  var _useState9 = (0, _react.useState)('not-resolved'),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    upfrontPreviewStatus = _useState10[0],
+    setUpfrontPreviewStatus = _useState10[1];
   var ssrReliabilityRef = (0, _react.useRef)({
     server: {
       status: 'unknown'
@@ -87,7 +90,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
         } catch (e) {
           ssrReliabilityRef.current[ssr] = _objectSpread({
             status: 'fail'
-          }, (0, _analytics.extractErrorInfo)(e));
+          }, (0, _analytics.extractErrorInfo)(e, traceContext));
         }
       } else {
         var _dimensions = ssrData.dimensions,
@@ -100,10 +103,15 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
       }
     }
   };
-  var _useState9 = (0, _react.useState)(previewInitializer),
-    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    preview = _useState10[0],
-    setPreview = _useState10[1];
+  var _useState11 = (0, _react.useState)(previewInitializer),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    preview = _useState12[0],
+    setPreview = _useState12[1];
+
+  //----------------------------------------------------------------
+  // FILE STATE
+  //----------------------------------------------------------------
+
   var _useFileState = (0, _mediaClientReact.useFileState)(identifier.id, {
       skipRemote: skipRemote,
       collectionName: identifier.collectionName,
@@ -111,6 +119,18 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     }),
     fileState = _useFileState.fileState;
 
+  // Derived from File State
+  var fileStatus = fileState === null || fileState === void 0 ? void 0 : fileState.status;
+  var isBackendPreviewReady = !!fileState && (0, _mediaClient.isImageRepresentationReady)(fileState);
+  var fileStateErrorMessage = (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'error' ? fileState.message : undefined;
+  var _ref2 = fileState && (fileState === null || fileState === void 0 ? void 0 : fileState.status) !== 'error' ? fileState : {},
+    _ref2$preview = _ref2.preview,
+    localBinary = _ref2$preview === void 0 ? undefined : _ref2$preview,
+    _ref2$mediaType = _ref2.mediaType,
+    mediaType = _ref2$mediaType === void 0 ? undefined : _ref2$mediaType,
+    _ref2$mimeType = _ref2.mimeType,
+    mimeType = _ref2$mimeType === void 0 ? undefined : _ref2$mimeType;
+
   //----------------------------------------------------------------
   // Update status
   //----------------------------------------------------------------
@@ -121,16 +141,19 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
   }, [identifier]);
   (0, _react.useEffect)(function () {
     if (status !== 'error') {
-      if (preview || fileState && fileState.status === 'processed' && !(0, _mediaClient.isImageRepresentationReady)(fileState)) {
+      if (preview || fileStatus === 'processed' && !isBackendPreviewReady) {
         setStatus('complete');
-      } else if (!preview && fileState && fileState.status === 'failed-processing' && !(0, _mediaClient.isImageRepresentationReady)(fileState)) {
+      } else if (!preview && fileStatus === 'failed-processing' && !isBackendPreviewReady) {
         setStatus('error');
         setError(new _errors.MediaFilePreviewError('failed-processing'));
+      } else if (!preview && fileStatus === 'error' && upfrontPreviewStatus === 'resolved') {
+        setStatus('error');
+        setError(new _errors.MediaFilePreviewError('metadata-fetch', new Error(fileStateErrorMessage)));
       } else {
         setStatus('loading');
       }
     }
-  }, [preview, status, fileState]);
+  }, [preview, status, fileStatus, isBackendPreviewReady, fileStateErrorMessage, upfrontPreviewStatus]);
 
   //----------------------------------------------------------------
   // Preview Fetch Helper
@@ -145,11 +168,11 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
   (0, _react.useEffect)(function () {
     // 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) {
+      setUpfrontPreviewStatus('resolved');
+    } else if (!preview && upfrontPreviewStatus === 'not-resolved' && !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;
+      setUpfrontPreviewStatus('resolving');
       var fetchedDimensions = _objectSpread({}, requestDimensions);
       getAndCacheRemotePreviewRef.current().then(function (newPreview) {
         // If there are new and bigger dimensions in the props, and the upfront preview is still resolving,
@@ -159,9 +182,11 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
         }
       }).catch(function () {
         // NO need to log error. If this call fails, a refetch will happen after
+      }).finally(function () {
+        setUpfrontPreviewStatus('resolved');
       });
     }
-  }, [getAndCacheRemotePreviewRef, preview, requestDimensions, requestDimensionsRef, skipRemote]);
+  }, [getAndCacheRemotePreviewRef, preview, requestDimensions, requestDimensionsRef, skipRemote, upfrontPreviewStatus]);
 
   //----------------------------------------------------------------
   // Cache, Local & Remote Preview
@@ -175,12 +200,12 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
       setPreview(cachedPreview);
     }
     // Local Preview ----------------------------------------------------------------
-    else if (!preview && !isBannedLocalPreview && !!fileState && 'preview' in fileState && !!fileState.preview && (0, _getPreview.isSupportedLocalPreview)(fileState.mediaType) && (0, _mediaCommon.isMimeTypeSupportedByBrowser)(fileState.mimeType)) {
+    else if (!preview && !isBannedLocalPreview && localBinary && (0, _getPreview.isSupportedLocalPreview)(mediaType) && (0, _mediaCommon.isMimeTypeSupportedByBrowser)(mimeType || '')) {
       // Local preview is available only if it's supported by browser and supported by Media Card (isSupportedLocalPreview)
       // For example, SVGs are mime type NOT supported by browser but media type supported by Media Card (image)
       // Then, local Preview NOT available
 
-      (0, _getPreview.getAndCacheLocalPreview)(identifier.id, fileState.preview, requestDimensions || {}, resizeMode, mediaBlobUrlAttrs).then(setPreview).catch(function (e) {
+      (0, _getPreview.getAndCacheLocalPreview)(identifier.id, localBinary, requestDimensions || {}, resizeMode, mediaBlobUrlAttrs).then(setPreview).catch(function (e) {
         setIsBannedLocalPreview(true);
         // CXP-2723 TODO: We might have to wrap this error in MediaCardError
         setNonCriticalError(e);
@@ -189,7 +214,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     // Remote Preview ----------------------------------------------------------------
     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)) {
+    (0, _getPreview.isSSRPreview)(preview)) && !skipRemote && upfrontPreviewStatus !== 'not-resolved' && isBackendPreviewReady) {
       getAndCacheRemotePreviewRef.current().then(setPreview).catch(function (e) {
         var wrappedError = (0, _errors.ensureMediaFilePreviewError)('preview-fetch', e);
         if (!preview) {
@@ -201,7 +226,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
         }
       });
     }
-  }, [error, nonCriticalError, fileState, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote]);
+  }, [error, nonCriticalError, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote, isBackendPreviewReady, localBinary, mediaType, mimeType, upfrontPreviewStatus]);
 
   //----------------------------------------------------------------
   // RETURN
@@ -237,7 +262,6 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
         setStatus('error');
         setError(_error);
       }
-      // Should be set after the status
       setPreview(undefined);
     }
   }, [identifier.id, preview === null || preview === void 0 ? void 0 : preview.dataURI, resizeMode, traceContext]);

package/dist/es2019/useFilePreview.js

@@ -25,7 +25,7 @@ export const useFilePreview = ({
   const [error, setError] = useState();
   const [nonCriticalError, setNonCriticalError] = useState();
   const [isBannedLocalPreview, setIsBannedLocalPreview] = useState(false);
-  const wasResolvedUpfrontPreviewRef = useRef(false);
+  const [upfrontPreviewStatus, setUpfrontPreviewStatus] = useState('not-resolved');
   const ssrReliabilityRef = useRef({
     server: {
       status: 'unknown'
@@ -63,7 +63,7 @@ export const useFilePreview = ({
         } catch (e) {
           ssrReliabilityRef.current[ssr] = {
             status: 'fail',
-            ...extractErrorInfo(e)
+            ...extractErrorInfo(e, traceContext)
           };
         }
       } else {
@@ -80,6 +80,11 @@ export const useFilePreview = ({
     }
   };
   const [preview, setPreview] = useState(previewInitializer);
+
+  //----------------------------------------------------------------
+  // FILE STATE
+  //----------------------------------------------------------------
+
   const {
     fileState
   } = useFileState(identifier.id, {
@@ -88,6 +93,16 @@ export const useFilePreview = ({
     occurrenceKey: identifier.occurrenceKey
   });
 
+  // Derived from File State
+  const fileStatus = fileState === null || fileState === void 0 ? void 0 : fileState.status;
+  const isBackendPreviewReady = !!fileState && isImageRepresentationReady(fileState);
+  const fileStateErrorMessage = (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'error' ? fileState.message : undefined;
+  const {
+    preview: localBinary = undefined,
+    mediaType = undefined,
+    mimeType = undefined
+  } = fileState && (fileState === null || fileState === void 0 ? void 0 : fileState.status) !== 'error' ? fileState : {};
+
   //----------------------------------------------------------------
   // Update status
   //----------------------------------------------------------------
@@ -98,16 +113,19 @@ export const useFilePreview = ({
   }, [identifier]);
   useEffect(() => {
     if (status !== 'error') {
-      if (preview || fileState && fileState.status === 'processed' && !isImageRepresentationReady(fileState)) {
+      if (preview || fileStatus === 'processed' && !isBackendPreviewReady) {
         setStatus('complete');
-      } else if (!preview && fileState && fileState.status === 'failed-processing' && !isImageRepresentationReady(fileState)) {
+      } else if (!preview && fileStatus === 'failed-processing' && !isBackendPreviewReady) {
         setStatus('error');
         setError(new MediaFilePreviewError('failed-processing'));
+      } else if (!preview && fileStatus === 'error' && upfrontPreviewStatus === 'resolved') {
+        setStatus('error');
+        setError(new MediaFilePreviewError('metadata-fetch', new Error(fileStateErrorMessage)));
       } else {
         setStatus('loading');
       }
     }
-  }, [preview, status, fileState]);
+  }, [preview, status, fileStatus, isBackendPreviewReady, fileStateErrorMessage, upfrontPreviewStatus]);
 
   //----------------------------------------------------------------
   // Preview Fetch Helper
@@ -122,11 +140,11 @@ export const useFilePreview = ({
   useEffect(() => {
     // 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) {
+      setUpfrontPreviewStatus('resolved');
+    } else if (!preview && upfrontPreviewStatus === 'not-resolved' && !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;
+      setUpfrontPreviewStatus('resolving');
       const fetchedDimensions = {
         ...requestDimensions
       };
@@ -138,9 +156,11 @@ export const useFilePreview = ({
         }
       }).catch(() => {
         // NO need to log error. If this call fails, a refetch will happen after
+      }).finally(() => {
+        setUpfrontPreviewStatus('resolved');
       });
     }
-  }, [getAndCacheRemotePreviewRef, preview, requestDimensions, requestDimensionsRef, skipRemote]);
+  }, [getAndCacheRemotePreviewRef, preview, requestDimensions, requestDimensionsRef, skipRemote, upfrontPreviewStatus]);
 
   //----------------------------------------------------------------
   // Cache, Local & Remote Preview
@@ -154,12 +174,12 @@ export const useFilePreview = ({
       setPreview(cachedPreview);
     }
     // Local Preview ----------------------------------------------------------------
-    else if (!preview && !isBannedLocalPreview && !!fileState && 'preview' in fileState && !!fileState.preview && isSupportedLocalPreview(fileState.mediaType) && isMimeTypeSupportedByBrowser(fileState.mimeType)) {
+    else if (!preview && !isBannedLocalPreview && localBinary && isSupportedLocalPreview(mediaType) && isMimeTypeSupportedByBrowser(mimeType || '')) {
       // Local preview is available only if it's supported by browser and supported by Media Card (isSupportedLocalPreview)
       // For example, SVGs are mime type NOT supported by browser but media type supported by Media Card (image)
       // Then, local Preview NOT available
 
-      getAndCacheLocalPreview(identifier.id, fileState.preview, requestDimensions || {}, resizeMode, mediaBlobUrlAttrs).then(setPreview).catch(e => {
+      getAndCacheLocalPreview(identifier.id, localBinary, requestDimensions || {}, resizeMode, mediaBlobUrlAttrs).then(setPreview).catch(e => {
         setIsBannedLocalPreview(true);
         // CXP-2723 TODO: We might have to wrap this error in MediaCardError
         setNonCriticalError(e);
@@ -168,7 +188,7 @@ export const useFilePreview = ({
     // Remote Preview ----------------------------------------------------------------
     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)) {
+    isSSRPreview(preview)) && !skipRemote && upfrontPreviewStatus !== 'not-resolved' && isBackendPreviewReady) {
       getAndCacheRemotePreviewRef.current().then(setPreview).catch(e => {
         const wrappedError = ensureMediaFilePreviewError('preview-fetch', e);
         if (!preview) {
@@ -180,7 +200,7 @@ export const useFilePreview = ({
         }
       });
     }
-  }, [error, nonCriticalError, fileState, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote]);
+  }, [error, nonCriticalError, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote, isBackendPreviewReady, localBinary, mediaType, mimeType, upfrontPreviewStatus]);
 
   //----------------------------------------------------------------
   // RETURN
@@ -216,7 +236,6 @@ export const useFilePreview = ({
         setStatus('error');
         setError(error);
       }
-      // Should be set after the status
       setPreview(undefined);
     }
   }, [identifier.id, preview === null || preview === void 0 ? void 0 : preview.dataURI, resizeMode, traceContext]);

package/dist/esm/useFilePreview.js

@@ -41,7 +41,10 @@ export var useFilePreview = function useFilePreview(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     isBannedLocalPreview = _useState8[0],
     setIsBannedLocalPreview = _useState8[1];
-  var wasResolvedUpfrontPreviewRef = useRef(false);
+  var _useState9 = useState('not-resolved'),
+    _useState10 = _slicedToArray(_useState9, 2),
+    upfrontPreviewStatus = _useState10[0],
+    setUpfrontPreviewStatus = _useState10[1];
   var ssrReliabilityRef = useRef({
     server: {
       status: 'unknown'
@@ -80,7 +83,7 @@ export var useFilePreview = function useFilePreview(_ref) {
         } catch (e) {
           ssrReliabilityRef.current[ssr] = _objectSpread({
             status: 'fail'
-          }, extractErrorInfo(e));
+          }, extractErrorInfo(e, traceContext));
         }
       } else {
         var _dimensions = ssrData.dimensions,
@@ -93,10 +96,15 @@ export var useFilePreview = function useFilePreview(_ref) {
       }
     }
   };
-  var _useState9 = useState(previewInitializer),
-    _useState10 = _slicedToArray(_useState9, 2),
-    preview = _useState10[0],
-    setPreview = _useState10[1];
+  var _useState11 = useState(previewInitializer),
+    _useState12 = _slicedToArray(_useState11, 2),
+    preview = _useState12[0],
+    setPreview = _useState12[1];
+
+  //----------------------------------------------------------------
+  // FILE STATE
+  //----------------------------------------------------------------
+
   var _useFileState = useFileState(identifier.id, {
       skipRemote: skipRemote,
       collectionName: identifier.collectionName,
@@ -104,6 +112,18 @@ export var useFilePreview = function useFilePreview(_ref) {
     }),
     fileState = _useFileState.fileState;
 
+  // Derived from File State
+  var fileStatus = fileState === null || fileState === void 0 ? void 0 : fileState.status;
+  var isBackendPreviewReady = !!fileState && isImageRepresentationReady(fileState);
+  var fileStateErrorMessage = (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'error' ? fileState.message : undefined;
+  var _ref2 = fileState && (fileState === null || fileState === void 0 ? void 0 : fileState.status) !== 'error' ? fileState : {},
+    _ref2$preview = _ref2.preview,
+    localBinary = _ref2$preview === void 0 ? undefined : _ref2$preview,
+    _ref2$mediaType = _ref2.mediaType,
+    mediaType = _ref2$mediaType === void 0 ? undefined : _ref2$mediaType,
+    _ref2$mimeType = _ref2.mimeType,
+    mimeType = _ref2$mimeType === void 0 ? undefined : _ref2$mimeType;
+
   //----------------------------------------------------------------
   // Update status
   //----------------------------------------------------------------
@@ -114,16 +134,19 @@ export var useFilePreview = function useFilePreview(_ref) {
   }, [identifier]);
   useEffect(function () {
     if (status !== 'error') {
-      if (preview || fileState && fileState.status === 'processed' && !isImageRepresentationReady(fileState)) {
+      if (preview || fileStatus === 'processed' && !isBackendPreviewReady) {
         setStatus('complete');
-      } else if (!preview && fileState && fileState.status === 'failed-processing' && !isImageRepresentationReady(fileState)) {
+      } else if (!preview && fileStatus === 'failed-processing' && !isBackendPreviewReady) {
         setStatus('error');
         setError(new MediaFilePreviewError('failed-processing'));
+      } else if (!preview && fileStatus === 'error' && upfrontPreviewStatus === 'resolved') {
+        setStatus('error');
+        setError(new MediaFilePreviewError('metadata-fetch', new Error(fileStateErrorMessage)));
       } else {
         setStatus('loading');
       }
     }
-  }, [preview, status, fileState]);
+  }, [preview, status, fileStatus, isBackendPreviewReady, fileStateErrorMessage, upfrontPreviewStatus]);
 
   //----------------------------------------------------------------
   // Preview Fetch Helper
@@ -138,11 +161,11 @@ export var useFilePreview = function useFilePreview(_ref) {
   useEffect(function () {
     // 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) {
+      setUpfrontPreviewStatus('resolved');
+    } else if (!preview && upfrontPreviewStatus === 'not-resolved' && !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;
+      setUpfrontPreviewStatus('resolving');
       var fetchedDimensions = _objectSpread({}, requestDimensions);
       getAndCacheRemotePreviewRef.current().then(function (newPreview) {
         // If there are new and bigger dimensions in the props, and the upfront preview is still resolving,
@@ -152,9 +175,11 @@ export var useFilePreview = function useFilePreview(_ref) {
         }
       }).catch(function () {
         // NO need to log error. If this call fails, a refetch will happen after
+      }).finally(function () {
+        setUpfrontPreviewStatus('resolved');
       });
     }
-  }, [getAndCacheRemotePreviewRef, preview, requestDimensions, requestDimensionsRef, skipRemote]);
+  }, [getAndCacheRemotePreviewRef, preview, requestDimensions, requestDimensionsRef, skipRemote, upfrontPreviewStatus]);
 
   //----------------------------------------------------------------
   // Cache, Local & Remote Preview
@@ -168,12 +193,12 @@ export var useFilePreview = function useFilePreview(_ref) {
       setPreview(cachedPreview);
     }
     // Local Preview ----------------------------------------------------------------
-    else if (!preview && !isBannedLocalPreview && !!fileState && 'preview' in fileState && !!fileState.preview && isSupportedLocalPreview(fileState.mediaType) && isMimeTypeSupportedByBrowser(fileState.mimeType)) {
+    else if (!preview && !isBannedLocalPreview && localBinary && isSupportedLocalPreview(mediaType) && isMimeTypeSupportedByBrowser(mimeType || '')) {
       // Local preview is available only if it's supported by browser and supported by Media Card (isSupportedLocalPreview)
       // For example, SVGs are mime type NOT supported by browser but media type supported by Media Card (image)
       // Then, local Preview NOT available
 
-      getAndCacheLocalPreview(identifier.id, fileState.preview, requestDimensions || {}, resizeMode, mediaBlobUrlAttrs).then(setPreview).catch(function (e) {
+      getAndCacheLocalPreview(identifier.id, localBinary, requestDimensions || {}, resizeMode, mediaBlobUrlAttrs).then(setPreview).catch(function (e) {
         setIsBannedLocalPreview(true);
         // CXP-2723 TODO: We might have to wrap this error in MediaCardError
         setNonCriticalError(e);
@@ -182,7 +207,7 @@ export var useFilePreview = function useFilePreview(_ref) {
     // Remote Preview ----------------------------------------------------------------
     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)) {
+    isSSRPreview(preview)) && !skipRemote && upfrontPreviewStatus !== 'not-resolved' && isBackendPreviewReady) {
       getAndCacheRemotePreviewRef.current().then(setPreview).catch(function (e) {
         var wrappedError = ensureMediaFilePreviewError('preview-fetch', e);
         if (!preview) {
@@ -194,7 +219,7 @@ export var useFilePreview = function useFilePreview(_ref) {
         }
       });
     }
-  }, [error, nonCriticalError, fileState, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote]);
+  }, [error, nonCriticalError, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote, isBackendPreviewReady, localBinary, mediaType, mimeType, upfrontPreviewStatus]);
 
   //----------------------------------------------------------------
   // RETURN
@@ -230,7 +255,6 @@ export var useFilePreview = function useFilePreview(_ref) {
         setStatus('error');
         setError(_error);
       }
-      // Should be set after the status
       setPreview(undefined);
     }
   }, [identifier.id, preview === null || preview === void 0 ? void 0 : preview.dataURI, resizeMode, traceContext]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-file-preview",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "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",
@@ -38,7 +38,7 @@
     "@atlaskit/media-client": "^26.1.0",
     "@atlaskit/media-client-react": "^2.0.1",
     "@atlaskit/media-common": "^11.0.0",
-    "@atlaskit/media-ui": "^25.0.12",
+    "@atlaskit/media-ui": "^25.1.0",
     "@babel/runtime": "^7.0.0",
     "eventemitter2": "^4.1.0",
     "lru_map": "^0.4.1"