@atlaskit/media-file-preview 0.4.1 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/media-file-preview
 
+## 0.5.0
+
+### Minor Changes
+
+- [#73279](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/73279) [`cdad00f21119`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cdad00f21119) - Create useMediaImage hook
+
+## 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

package/dist/cjs/index.js

@@ -9,4 +9,11 @@ Object.defineProperty(exports, "useFilePreview", {
     return _useFilePreview.useFilePreview;
   }
 });
-var _useFilePreview = require("./useFilePreview");
+Object.defineProperty(exports, "useMediaImage", {
+  enumerable: true,
+  get: function get() {
+    return _useMediaImage.useMediaImage;
+  }
+});
+var _useFilePreview = require("./useFilePreview");
+var _useMediaImage = require("./useMediaImage");

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'
@@ -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/cjs/useMediaImage.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMediaImage = void 0;
+var _react = require("react");
+var _useFilePreview2 = require("./useFilePreview");
+var useMediaImage = exports.useMediaImage = function useMediaImage(_ref) {
+  var identifier = _ref.identifier,
+    resizeMode = _ref.resizeMode,
+    dimensions = _ref.dimensions,
+    ssr = _ref.ssr,
+    mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs,
+    traceContext = _ref.traceContext,
+    skipRemote = _ref.skipRemote,
+    allowAnimated = _ref.allowAnimated,
+    upscale = _ref.upscale,
+    maxAge = _ref.maxAge,
+    onLoadCallback = _ref.onLoad,
+    onErrorCallback = _ref.onError;
+  var _useFilePreview = (0, _useFilePreview2.useFilePreview)({
+      identifier: identifier,
+      resizeMode: resizeMode,
+      dimensions: dimensions,
+      ssr: ssr,
+      mediaBlobUrlAttrs: mediaBlobUrlAttrs,
+      traceContext: traceContext,
+      skipRemote: skipRemote,
+      allowAnimated: allowAnimated,
+      upscale: upscale,
+      maxAge: maxAge
+    }),
+    preview = _useFilePreview.preview,
+    status = _useFilePreview.status,
+    error = _useFilePreview.error,
+    onImageError = _useFilePreview.onImageError,
+    onImageLoad = _useFilePreview.onImageLoad,
+    getSsrScriptProps = _useFilePreview.getSsrScriptProps;
+  var onLoad = (0, _react.useCallback)(function () {
+    onLoadCallback && onLoadCallback();
+    onImageLoad(preview);
+  }, [onImageLoad, onLoadCallback, preview]);
+  var onError = (0, _react.useCallback)(function () {
+    onErrorCallback && onErrorCallback();
+    onImageError(preview);
+  }, [onErrorCallback, onImageError, preview]);
+  var getImgProps = (0, _react.useCallback)(function () {
+    return {
+      src: preview === null || preview === void 0 ? void 0 : preview.dataURI,
+      onLoad: onLoad,
+      onError: onError,
+      'data-test-file-id': identifier.id,
+      'data-test-collection': identifier.collectionName,
+      'data-test-preview-source': preview === null || preview === void 0 ? void 0 : preview.source
+    };
+  }, [identifier.collectionName, identifier.id, onError, onLoad, preview === null || preview === void 0 ? void 0 : preview.dataURI, preview === null || preview === void 0 ? void 0 : preview.source]);
+  return {
+    status: status,
+    error: error,
+    getImgProps: getImgProps,
+    getSsrScriptProps: getSsrScriptProps
+  };
+};

package/dist/es2019/index.js

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

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'
@@ -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/es2019/useMediaImage.js

@@ -0,0 +1,58 @@
+import { useCallback } from 'react';
+import { useFilePreview } from './useFilePreview';
+export const useMediaImage = ({
+  identifier,
+  resizeMode,
+  dimensions,
+  ssr,
+  mediaBlobUrlAttrs,
+  traceContext,
+  skipRemote,
+  allowAnimated,
+  upscale,
+  maxAge,
+  onLoad: onLoadCallback,
+  onError: onErrorCallback
+}) => {
+  const {
+    preview,
+    status,
+    error,
+    onImageError,
+    onImageLoad,
+    getSsrScriptProps
+  } = useFilePreview({
+    identifier,
+    resizeMode,
+    dimensions,
+    ssr,
+    mediaBlobUrlAttrs,
+    traceContext,
+    skipRemote,
+    allowAnimated,
+    upscale,
+    maxAge
+  });
+  const onLoad = useCallback(() => {
+    onLoadCallback && onLoadCallback();
+    onImageLoad(preview);
+  }, [onImageLoad, onLoadCallback, preview]);
+  const onError = useCallback(() => {
+    onErrorCallback && onErrorCallback();
+    onImageError(preview);
+  }, [onErrorCallback, onImageError, preview]);
+  const getImgProps = useCallback(() => ({
+    src: preview === null || preview === void 0 ? void 0 : preview.dataURI,
+    onLoad,
+    onError,
+    'data-test-file-id': identifier.id,
+    'data-test-collection': identifier.collectionName,
+    'data-test-preview-source': preview === null || preview === void 0 ? void 0 : preview.source
+  }), [identifier.collectionName, identifier.id, onError, onLoad, preview === null || preview === void 0 ? void 0 : preview.dataURI, preview === null || preview === void 0 ? void 0 : preview.source]);
+  return {
+    status,
+    error,
+    getImgProps,
+    getSsrScriptProps
+  };
+};

package/dist/esm/index.js

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

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'
@@ -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/dist/esm/useMediaImage.js

@@ -0,0 +1,58 @@
+import { useCallback } from 'react';
+import { useFilePreview } from './useFilePreview';
+export var useMediaImage = function useMediaImage(_ref) {
+  var identifier = _ref.identifier,
+    resizeMode = _ref.resizeMode,
+    dimensions = _ref.dimensions,
+    ssr = _ref.ssr,
+    mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs,
+    traceContext = _ref.traceContext,
+    skipRemote = _ref.skipRemote,
+    allowAnimated = _ref.allowAnimated,
+    upscale = _ref.upscale,
+    maxAge = _ref.maxAge,
+    onLoadCallback = _ref.onLoad,
+    onErrorCallback = _ref.onError;
+  var _useFilePreview = useFilePreview({
+      identifier: identifier,
+      resizeMode: resizeMode,
+      dimensions: dimensions,
+      ssr: ssr,
+      mediaBlobUrlAttrs: mediaBlobUrlAttrs,
+      traceContext: traceContext,
+      skipRemote: skipRemote,
+      allowAnimated: allowAnimated,
+      upscale: upscale,
+      maxAge: maxAge
+    }),
+    preview = _useFilePreview.preview,
+    status = _useFilePreview.status,
+    error = _useFilePreview.error,
+    onImageError = _useFilePreview.onImageError,
+    onImageLoad = _useFilePreview.onImageLoad,
+    getSsrScriptProps = _useFilePreview.getSsrScriptProps;
+  var onLoad = useCallback(function () {
+    onLoadCallback && onLoadCallback();
+    onImageLoad(preview);
+  }, [onImageLoad, onLoadCallback, preview]);
+  var onError = useCallback(function () {
+    onErrorCallback && onErrorCallback();
+    onImageError(preview);
+  }, [onErrorCallback, onImageError, preview]);
+  var getImgProps = useCallback(function () {
+    return {
+      src: preview === null || preview === void 0 ? void 0 : preview.dataURI,
+      onLoad: onLoad,
+      onError: onError,
+      'data-test-file-id': identifier.id,
+      'data-test-collection': identifier.collectionName,
+      'data-test-preview-source': preview === null || preview === void 0 ? void 0 : preview.source
+    };
+  }, [identifier.collectionName, identifier.id, onError, onLoad, preview === null || preview === void 0 ? void 0 : preview.dataURI, preview === null || preview === void 0 ? void 0 : preview.source]);
+  return {
+    status: status,
+    error: error,
+    getImgProps: getImgProps,
+    getSsrScriptProps: getSsrScriptProps
+  };
+};

package/dist/types/index.d.ts

@@ -1,2 +1,5 @@
 export { useFilePreview } from './useFilePreview';
+export type { UseFilePreviewParams } from './useFilePreview';
+export { useMediaImage } from './useMediaImage';
+export type { UseMediaImageParams } from './useMediaImage';
 export type { MediaFilePreview } from './types';

package/dist/types/useMediaImage.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { FileIdentifier, MediaBlobUrlAttrs, MediaStoreGetFileImageParams } from '@atlaskit/media-client';
+import { MediaTraceContext, SSR } from '@atlaskit/media-common';
+import { MediaFilePreviewDimensions } from './types';
+export interface UseMediaImageParams {
+    /** Instance of file identifier. */
+    readonly identifier: FileIdentifier;
+    /** 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" */
+    readonly ssr?: SSR;
+    /** Attributes to attach to the created Blob Url */
+    readonly mediaBlobUrlAttrs?: MediaBlobUrlAttrs;
+    /** Trace context to be passed to the backend requests */
+    readonly traceContext?: MediaTraceContext;
+    /** 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;
+    /** On image load and on error callback from the parent. We are keeping the name same to streamline the customer experience when using these properties back to their image components */
+    readonly onLoad?: () => void;
+    readonly onError?: () => void;
+}
+export declare const useMediaImage: ({ identifier, resizeMode, dimensions, ssr, mediaBlobUrlAttrs, traceContext, skipRemote, allowAnimated, upscale, maxAge, onLoad: onLoadCallback, onError: onErrorCallback, }: UseMediaImageParams) => {
+    status: import("./types").MediaFilePreviewStatus;
+    error: import("./errors").MediaFilePreviewError | undefined;
+    getImgProps: () => {
+        src: string | undefined;
+        onLoad: () => void;
+        onError: () => void;
+        'data-test-file-id': string;
+        'data-test-collection': string | undefined;
+        'data-test-preview-source': import("./types").MediaFilePreviewSource | undefined;
+    };
+    getSsrScriptProps: (() => import("react").ScriptHTMLAttributes<HTMLScriptElement>) | undefined;
+};

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

@@ -1,2 +1,5 @@
 export { useFilePreview } from './useFilePreview';
+export type { UseFilePreviewParams } from './useFilePreview';
+export { useMediaImage } from './useMediaImage';
+export type { UseMediaImageParams } from './useMediaImage';
 export type { MediaFilePreview } from './types';

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

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { FileIdentifier, MediaBlobUrlAttrs, MediaStoreGetFileImageParams } from '@atlaskit/media-client';
+import { MediaTraceContext, SSR } from '@atlaskit/media-common';
+import { MediaFilePreviewDimensions } from './types';
+export interface UseMediaImageParams {
+    /** Instance of file identifier. */
+    readonly identifier: FileIdentifier;
+    /** 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" */
+    readonly ssr?: SSR;
+    /** Attributes to attach to the created Blob Url */
+    readonly mediaBlobUrlAttrs?: MediaBlobUrlAttrs;
+    /** Trace context to be passed to the backend requests */
+    readonly traceContext?: MediaTraceContext;
+    /** 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;
+    /** On image load and on error callback from the parent. We are keeping the name same to streamline the customer experience when using these properties back to their image components */
+    readonly onLoad?: () => void;
+    readonly onError?: () => void;
+}
+export declare const useMediaImage: ({ identifier, resizeMode, dimensions, ssr, mediaBlobUrlAttrs, traceContext, skipRemote, allowAnimated, upscale, maxAge, onLoad: onLoadCallback, onError: onErrorCallback, }: UseMediaImageParams) => {
+    status: import("./types").MediaFilePreviewStatus;
+    error: import("./errors").MediaFilePreviewError | undefined;
+    getImgProps: () => {
+        src: string | undefined;
+        onLoad: () => void;
+        onError: () => void;
+        'data-test-file-id': string;
+        'data-test-collection': string | undefined;
+        'data-test-preview-source': import("./types").MediaFilePreviewSource | undefined;
+    };
+    getSsrScriptProps: (() => import("react").ScriptHTMLAttributes<HTMLScriptElement>) | undefined;
+};

package/example-helpers/TerminalTextDisplay.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+import React, { ReactNode } from 'react';
+
+type TerminalTextDisplayProps = {
+  children: ReactNode;
+};
+
+export const TerminalTextDisplay: React.FC<TerminalTextDisplayProps> = ({
+  children,
+}): React.ReactElement | null => (
+  <div
+    style={{
+      backgroundColor: '#000000',
+      color: '#33FF00',
+      borderRadius: 5,
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      padding: 20,
+      fontFamily: 'Courier New, monospace',
+      lineHeight: '1.4',
+      maxWidth: 600,
+      width: '100%',
+      fontSize: '1.1em',
+      whiteSpace: 'pre-wrap',
+      overflow: 'auto',
+    }}
+  >
+    {children}
+  </div>
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-file-preview",
-  "version": "0.4.1",
+  "version": "0.5.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",
@@ -35,10 +35,10 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/media-client": "^26.1.0",
+    "@atlaskit/media-client": "^26.2.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"