@atlaskit/media-file-preview 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/media-file-preview
 
+## 0.4.0
+
+### Minor Changes
+
+- [#70446](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70446) [`48eae199c6fa`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/48eae199c6fa) - Breaking: return ref object ssrReliabilityRef is replaced by object ssrReliability
+
+### Patch Changes
+
+- [#70446](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70446) [`0ff07ca94009`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0ff07ca94009) - Better support for onImageError callback
+
+## 0.3.1
+
+### Patch Changes
+
+- [#70361](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70361) [`6bcee8c57dac`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6bcee8c57dac) - Support for files failed to process
+
 ## 0.3.0
 
 ### Minor Changes

package/dist/cjs/analytics.js

@@ -1,11 +1,15 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getRenderErrorFailReason = exports.getRenderErrorErrorReason = exports.getRenderErrorErrorDetail = exports.getErrorTraceContext = exports.extractErrorInfo = void 0;
+exports.getRenderErrorFailReason = exports.getRenderErrorErrorReason = exports.getRenderErrorErrorDetail = exports.getErrorTraceContext = exports.extractErrorInfo = exports.createFailedSSRObject = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _mediaClient = require("@atlaskit/media-client");
 var _errors = require("./errors");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(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; }
 var getErrorTraceContext = exports.getErrorTraceContext = function getErrorTraceContext(error) {
   if ((0, _errors.isMediaFilePreviewError)(error) && !!error.secondaryError) {
     if ((0, _mediaClient.isRequestError)(error.secondaryError)) {
@@ -47,4 +51,9 @@ var extractErrorInfo = exports.extractErrorInfo = function extractErrorInfo(erro
     errorDetail: getRenderErrorErrorDetail(error),
     metadataTraceContext: metadataTraceContext !== null && metadataTraceContext !== void 0 ? metadataTraceContext : getErrorTraceContext(error)
   };
+};
+var createFailedSSRObject = exports.createFailedSSRObject = function createFailedSSRObject(preview, metadataTraceContext) {
+  return _objectSpread({
+    status: 'fail'
+  }, extractErrorInfo(new _errors.ImageLoadError(preview.source), metadataTraceContext));
 };

package/dist/cjs/errors.js

@@ -95,6 +95,11 @@ var getImageLoadPrimaryReason = function getImageLoadPrimaryReason(source) {
       return 'local-uri';
     case 'remote':
       return 'remote-uri';
+    case 'ssr-client':
+      return 'ssr-client-uri';
+    case 'ssr-server':
+    case 'ssr-data':
+      return 'ssr-server-uri';
     // This fail reason will come from a bug, most likely.
     default:
       return "unknown-uri";

package/dist/cjs/getPreview/getPreview.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isSSRPreview = exports.isSSRDataPreview = exports.isSSRClientPreview = exports.isLocalPreview = exports.getSSRPreview = exports.getAndCacheRemotePreview = exports.getAndCacheLocalPreview = void 0;
+exports.isSSRPreview = exports.isSSRDataPreview = exports.isSSRClientPreview = exports.isRemotePreview = 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"));
@@ -58,6 +58,10 @@ var isLocalPreview = exports.isLocalPreview = function isLocalPreview(preview) {
   var localSources = ['local', 'cache-local'];
   return localSources.includes(preview.source);
 };
+var isRemotePreview = exports.isRemotePreview = function isRemotePreview(preview) {
+  var remoteSources = ['remote', 'cache-remote'];
+  return remoteSources.includes(preview.source);
+};
 var isSSRClientPreview = exports.isSSRClientPreview = function isSSRClientPreview(preview) {
   return preview.source === 'ssr-client';
 };

package/dist/cjs/getPreview/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "isLocalPreview", {
     return _getPreview.isLocalPreview;
   }
 });
+Object.defineProperty(exports, "isRemotePreview", {
+  enumerable: true,
+  get: function get() {
+    return _getPreview.isRemotePreview;
+  }
+});
 Object.defineProperty(exports, "isSSRClientPreview", {
   enumerable: true,
   get: function get() {

package/dist/cjs/useFilePreview.js

@@ -49,7 +49,14 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     isBannedLocalPreview = _useState8[0],
     setIsBannedLocalPreview = _useState8[1];
   var wasResolvedUpfrontPreviewRef = (0, _react.useRef)(false);
-  var ssrReliabilityRef = (0, _react.useRef)(initialSsrReliability);
+  var ssrReliabilityRef = (0, _react.useRef)({
+    server: {
+      status: 'unknown'
+    },
+    client: {
+      status: 'unknown'
+    }
+  });
   var requestDimensions = (0, _react.useMemo)(function () {
     return dimensions ? (0, _helpers.createRequestDimensions)(dimensions) : undefined;
   }, [dimensions]);
@@ -114,10 +121,13 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
   }, [identifier]);
   (0, _react.useEffect)(function () {
     if (status !== 'error') {
-      if (!preview && (!fileState || fileState.status === 'processing' || fileState.status === 'uploading')) {
-        setStatus('loading');
-      } else {
+      if (preview || fileState && fileState.status === 'processed' && !(0, _mediaClient.isImageRepresentationReady)(fileState)) {
         setStatus('complete');
+      } else if (!preview && fileState && fileState.status === 'failed-processing' && !(0, _mediaClient.isImageRepresentationReady)(fileState)) {
+        setStatus('error');
+        setError(new _errors.MediaFilePreviewError('failed-processing'));
+      } else {
+        setStatus('loading');
       }
     }
   }, [preview, status, fileState]);
@@ -197,44 +207,40 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
   // RETURN
   //----------------------------------------------------------------
 
-  var onImageError = (0, _react.useCallback)(function (newPreview) {
-    if (newPreview) {
-      var failedSSRObject = _objectSpread({
-        status: 'fail'
-      }, (0, _analytics.extractErrorInfo)(new _errors.ImageLoadError(newPreview.source)));
-      if ((0, _getPreview.isSSRClientPreview)(newPreview)) {
-        ssrReliabilityRef.current.client = failedSSRObject;
-      }
-
-      /*
-      If the preview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
-      */
+  var onImageError = (0, _react.useCallback)(function (failedPreview) {
+    if (!failedPreview) {
+      return;
+    }
+    if ((0, _getPreview.isSSRClientPreview)(failedPreview)) {
+      ssrReliabilityRef.current.client = (0, _analytics.createFailedSSRObject)(failedPreview, traceContext);
+    }
 
-      if ((0, _getPreview.isSSRDataPreview)(newPreview)) {
-        ssrReliabilityRef.current.server = failedSSRObject;
-        ssrReliabilityRef.current.client = failedSSRObject;
-      }
+    // If the preview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
+    if ((0, _getPreview.isSSRDataPreview)(failedPreview)) {
+      ssrReliabilityRef.current.server = (0, _analytics.createFailedSSRObject)(failedPreview, traceContext);
+      ssrReliabilityRef.current.client = (0, _analytics.createFailedSSRObject)(failedPreview, traceContext);
     }
 
     // If the dataURI has been replaced, we can dismiss this error
-    if ((newPreview === null || newPreview === void 0 ? void 0 : newPreview.dataURI) !== (preview === null || preview === void 0 ? void 0 : preview.dataURI)) {
+    if (failedPreview.dataURI !== (preview === null || preview === void 0 ? void 0 : preview.dataURI)) {
       return;
     }
-    var error = new _errors.ImageLoadError(newPreview === null || newPreview === void 0 ? void 0 : newPreview.source);
-    var isLocal = newPreview && (0, _getPreview.isLocalPreview)(newPreview);
-    var isSSR = newPreview && ((0, _getPreview.isSSRClientPreview)(newPreview) || (0, _getPreview.isSSRDataPreview)(newPreview));
-    if (isLocal || isSSR) {
+    var isLocal = (0, _getPreview.isLocalPreview)(failedPreview);
+    var isRemote = (0, _getPreview.isRemotePreview)(failedPreview);
+    if (isLocal || isRemote) {
+      var _error = new _errors.ImageLoadError(failedPreview === null || failedPreview === void 0 ? void 0 : failedPreview.source);
+      _getPreview.mediaFilePreviewCache.remove(identifier.id, resizeMode);
       if (isLocal) {
         setIsBannedLocalPreview(true);
-        setNonCriticalError(error);
       }
-      _getPreview.mediaFilePreviewCache.remove(identifier.id, resizeMode);
+      if (isRemote) {
+        setStatus('error');
+        setError(_error);
+      }
+      // Should be set after the status
       setPreview(undefined);
-    } else {
-      setStatus('error');
-      setError(error);
     }
-  }, [identifier.id, preview === null || preview === void 0 ? void 0 : preview.dataURI, resizeMode]);
+  }, [identifier.id, preview === null || preview === void 0 ? void 0 : preview.dataURI, resizeMode, traceContext]);
   var onImageLoad = (0, _react.useCallback)(function (newPreview) {
     if (newPreview) {
       if ((0, _getPreview.isSSRClientPreview)(newPreview) && ssrReliabilityRef.current.client.status === 'unknown') {
@@ -276,17 +282,9 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     status: status,
     error: error,
     nonCriticalError: nonCriticalError,
-    ssrReliabilityRef: ssrReliabilityRef,
+    ssrReliability: ssrReliabilityRef.current,
     onImageError: onImageError,
     onImageLoad: onImageLoad,
     getSsrScriptProps: getSsrScriptProps
   };
-};
-var initialSsrReliability = {
-  server: {
-    status: 'unknown'
-  },
-  client: {
-    status: 'unknown'
-  }
 };

package/dist/es2019/analytics.js

@@ -1,5 +1,5 @@
 import { getMediaClientErrorReason, isRequestError } from '@atlaskit/media-client';
-import { getFileStateErrorReason, isMediaFilePreviewError, isMediaFileStateError } from './errors';
+import { getFileStateErrorReason, ImageLoadError, isMediaFilePreviewError, isMediaFileStateError } from './errors';
 export const getErrorTraceContext = error => {
   if (isMediaFilePreviewError(error) && !!error.secondaryError) {
     if (isRequestError(error.secondaryError)) {
@@ -41,4 +41,8 @@ export const extractErrorInfo = (error, metadataTraceContext) => {
     errorDetail: getRenderErrorErrorDetail(error),
     metadataTraceContext: metadataTraceContext !== null && metadataTraceContext !== void 0 ? metadataTraceContext : getErrorTraceContext(error)
   };
-};
+};
+export const createFailedSSRObject = (preview, metadataTraceContext) => ({
+  status: 'fail',
+  ...extractErrorInfo(new ImageLoadError(preview.source), metadataTraceContext)
+});

package/dist/es2019/errors.js

@@ -52,6 +52,11 @@ const getImageLoadPrimaryReason = source => {
       return 'local-uri';
     case 'remote':
       return 'remote-uri';
+    case 'ssr-client':
+      return 'ssr-client-uri';
+    case 'ssr-server':
+    case 'ssr-data':
+      return 'ssr-server-uri';
     // This fail reason will come from a bug, most likely.
     default:
       return `unknown-uri`;

package/dist/es2019/getPreview/getPreview.js

@@ -48,6 +48,10 @@ export const isLocalPreview = preview => {
   const localSources = ['local', 'cache-local'];
   return localSources.includes(preview.source);
 };
+export const isRemotePreview = preview => {
+  const remoteSources = ['remote', 'cache-remote'];
+  return remoteSources.includes(preview.source);
+};
 export const isSSRClientPreview = preview => preview.source === 'ssr-client';
 export const isSSRDataPreview = preview => preview.source === 'ssr-data';
 export const isSSRPreview = preview => {

package/dist/es2019/getPreview/index.js

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

package/dist/es2019/useFilePreview.js

@@ -2,9 +2,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { isImageRepresentationReady } from '@atlaskit/media-client';
 import { useFileState, useMediaClient } from '@atlaskit/media-client-react';
 import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
-import { extractErrorInfo } from './analytics';
-import { ensureMediaFilePreviewError, ImageLoadError } from './errors';
-import { getAndCacheLocalPreview, getAndCacheRemotePreview, getSSRPreview, isLocalPreview, isSSRClientPreview, isSSRDataPreview, isSSRPreview, isSupportedLocalPreview, mediaFilePreviewCache } from './getPreview';
+import { createFailedSSRObject, extractErrorInfo } from './analytics';
+import { ensureMediaFilePreviewError, ImageLoadError, MediaFilePreviewError } from './errors';
+import { getAndCacheLocalPreview, getAndCacheRemotePreview, getSSRPreview, isLocalPreview, isRemotePreview, isSSRClientPreview, isSSRDataPreview, isSSRPreview, isSupportedLocalPreview, mediaFilePreviewCache } from './getPreview';
 import { generateScriptProps, getSSRData } from './globalScope';
 import { createRequestDimensions, isBigger, useCurrentValueRef } from './helpers';
 export const useFilePreview = ({
@@ -26,7 +26,14 @@ export const useFilePreview = ({
   const [nonCriticalError, setNonCriticalError] = useState();
   const [isBannedLocalPreview, setIsBannedLocalPreview] = useState(false);
   const wasResolvedUpfrontPreviewRef = useRef(false);
-  const ssrReliabilityRef = useRef(initialSsrReliability);
+  const ssrReliabilityRef = useRef({
+    server: {
+      status: 'unknown'
+    },
+    client: {
+      status: 'unknown'
+    }
+  });
   const requestDimensions = useMemo(() => dimensions ? createRequestDimensions(dimensions) : undefined, [dimensions]);
   const requestDimensionsRef = useCurrentValueRef(requestDimensions);
   const imageURLParams = {
@@ -91,10 +98,13 @@ export const useFilePreview = ({
   }, [identifier]);
   useEffect(() => {
     if (status !== 'error') {
-      if (!preview && (!fileState || fileState.status === 'processing' || fileState.status === 'uploading')) {
-        setStatus('loading');
-      } else {
+      if (preview || fileState && fileState.status === 'processed' && !isImageRepresentationReady(fileState)) {
         setStatus('complete');
+      } else if (!preview && fileState && fileState.status === 'failed-processing' && !isImageRepresentationReady(fileState)) {
+        setStatus('error');
+        setError(new MediaFilePreviewError('failed-processing'));
+      } else {
+        setStatus('loading');
       }
     }
   }, [preview, status, fileState]);
@@ -176,45 +186,40 @@ export const useFilePreview = ({
   // RETURN
   //----------------------------------------------------------------
 
-  const onImageError = useCallback(newPreview => {
-    if (newPreview) {
-      const failedSSRObject = {
-        status: 'fail',
-        ...extractErrorInfo(new ImageLoadError(newPreview.source))
-      };
-      if (isSSRClientPreview(newPreview)) {
-        ssrReliabilityRef.current.client = failedSSRObject;
-      }
-
-      /*
-      If the preview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
-      */
+  const onImageError = useCallback(failedPreview => {
+    if (!failedPreview) {
+      return;
+    }
+    if (isSSRClientPreview(failedPreview)) {
+      ssrReliabilityRef.current.client = createFailedSSRObject(failedPreview, traceContext);
+    }
 
-      if (isSSRDataPreview(newPreview)) {
-        ssrReliabilityRef.current.server = failedSSRObject;
-        ssrReliabilityRef.current.client = failedSSRObject;
-      }
+    // If the preview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
+    if (isSSRDataPreview(failedPreview)) {
+      ssrReliabilityRef.current.server = createFailedSSRObject(failedPreview, traceContext);
+      ssrReliabilityRef.current.client = createFailedSSRObject(failedPreview, traceContext);
     }
 
     // If the dataURI has been replaced, we can dismiss this error
-    if ((newPreview === null || newPreview === void 0 ? void 0 : newPreview.dataURI) !== (preview === null || preview === void 0 ? void 0 : preview.dataURI)) {
+    if (failedPreview.dataURI !== (preview === null || preview === void 0 ? void 0 : preview.dataURI)) {
       return;
     }
-    const error = new ImageLoadError(newPreview === null || newPreview === void 0 ? void 0 : newPreview.source);
-    const isLocal = newPreview && isLocalPreview(newPreview);
-    const isSSR = newPreview && (isSSRClientPreview(newPreview) || isSSRDataPreview(newPreview));
-    if (isLocal || isSSR) {
+    const isLocal = isLocalPreview(failedPreview);
+    const isRemote = isRemotePreview(failedPreview);
+    if (isLocal || isRemote) {
+      const error = new ImageLoadError(failedPreview === null || failedPreview === void 0 ? void 0 : failedPreview.source);
+      mediaFilePreviewCache.remove(identifier.id, resizeMode);
       if (isLocal) {
         setIsBannedLocalPreview(true);
-        setNonCriticalError(error);
       }
-      mediaFilePreviewCache.remove(identifier.id, resizeMode);
+      if (isRemote) {
+        setStatus('error');
+        setError(error);
+      }
+      // Should be set after the status
       setPreview(undefined);
-    } else {
-      setStatus('error');
-      setError(error);
     }
-  }, [identifier.id, preview === null || preview === void 0 ? void 0 : preview.dataURI, resizeMode]);
+  }, [identifier.id, preview === null || preview === void 0 ? void 0 : preview.dataURI, resizeMode, traceContext]);
   const onImageLoad = useCallback(newPreview => {
     if (newPreview) {
       if (isSSRClientPreview(newPreview) && ssrReliabilityRef.current.client.status === 'unknown') {
@@ -256,17 +261,9 @@ export const useFilePreview = ({
     status,
     error,
     nonCriticalError,
-    ssrReliabilityRef,
+    ssrReliability: ssrReliabilityRef.current,
     onImageError,
     onImageLoad,
     getSsrScriptProps
   };
-};
-const initialSsrReliability = {
-  server: {
-    status: 'unknown'
-  },
-  client: {
-    status: 'unknown'
-  }
 };

package/dist/esm/analytics.js

@@ -1,5 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { getMediaClientErrorReason, isRequestError } from '@atlaskit/media-client';
-import { getFileStateErrorReason, isMediaFilePreviewError, isMediaFileStateError } from './errors';
+import { getFileStateErrorReason, ImageLoadError, isMediaFilePreviewError, isMediaFileStateError } from './errors';
 export var getErrorTraceContext = function getErrorTraceContext(error) {
   if (isMediaFilePreviewError(error) && !!error.secondaryError) {
     if (isRequestError(error.secondaryError)) {
@@ -41,4 +44,9 @@ export var extractErrorInfo = function extractErrorInfo(error, metadataTraceCont
     errorDetail: getRenderErrorErrorDetail(error),
     metadataTraceContext: metadataTraceContext !== null && metadataTraceContext !== void 0 ? metadataTraceContext : getErrorTraceContext(error)
   };
+};
+export var createFailedSSRObject = function createFailedSSRObject(preview, metadataTraceContext) {
+  return _objectSpread({
+    status: 'fail'
+  }, extractErrorInfo(new ImageLoadError(preview.source), metadataTraceContext));
 };

package/dist/esm/errors.js

@@ -85,6 +85,11 @@ var getImageLoadPrimaryReason = function getImageLoadPrimaryReason(source) {
       return 'local-uri';
     case 'remote':
       return 'remote-uri';
+    case 'ssr-client':
+      return 'ssr-client-uri';
+    case 'ssr-server':
+    case 'ssr-data':
+      return 'ssr-server-uri';
     // This fail reason will come from a bug, most likely.
     default:
       return "unknown-uri";

package/dist/esm/getPreview/getPreview.js

@@ -51,6 +51,10 @@ export var isLocalPreview = function isLocalPreview(preview) {
   var localSources = ['local', 'cache-local'];
   return localSources.includes(preview.source);
 };
+export var isRemotePreview = function isRemotePreview(preview) {
+  var remoteSources = ['remote', 'cache-remote'];
+  return remoteSources.includes(preview.source);
+};
 export var isSSRClientPreview = function isSSRClientPreview(preview) {
   return preview.source === 'ssr-client';
 };

package/dist/esm/getPreview/index.js

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

package/dist/esm/useFilePreview.js

@@ -6,9 +6,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { isImageRepresentationReady } from '@atlaskit/media-client';
 import { useFileState, useMediaClient } from '@atlaskit/media-client-react';
 import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
-import { extractErrorInfo } from './analytics';
-import { ensureMediaFilePreviewError, ImageLoadError } from './errors';
-import { getAndCacheLocalPreview, getAndCacheRemotePreview, getSSRPreview, isLocalPreview, isSSRClientPreview, isSSRDataPreview, isSSRPreview, isSupportedLocalPreview, mediaFilePreviewCache } from './getPreview';
+import { createFailedSSRObject, extractErrorInfo } from './analytics';
+import { ensureMediaFilePreviewError, ImageLoadError, MediaFilePreviewError } from './errors';
+import { getAndCacheLocalPreview, getAndCacheRemotePreview, getSSRPreview, isLocalPreview, isRemotePreview, isSSRClientPreview, isSSRDataPreview, isSSRPreview, isSupportedLocalPreview, mediaFilePreviewCache } from './getPreview';
 import { generateScriptProps, getSSRData } from './globalScope';
 import { createRequestDimensions, isBigger, useCurrentValueRef } from './helpers';
 export var useFilePreview = function useFilePreview(_ref) {
@@ -42,7 +42,14 @@ export var useFilePreview = function useFilePreview(_ref) {
     isBannedLocalPreview = _useState8[0],
     setIsBannedLocalPreview = _useState8[1];
   var wasResolvedUpfrontPreviewRef = useRef(false);
-  var ssrReliabilityRef = useRef(initialSsrReliability);
+  var ssrReliabilityRef = useRef({
+    server: {
+      status: 'unknown'
+    },
+    client: {
+      status: 'unknown'
+    }
+  });
   var requestDimensions = useMemo(function () {
     return dimensions ? createRequestDimensions(dimensions) : undefined;
   }, [dimensions]);
@@ -107,10 +114,13 @@ export var useFilePreview = function useFilePreview(_ref) {
   }, [identifier]);
   useEffect(function () {
     if (status !== 'error') {
-      if (!preview && (!fileState || fileState.status === 'processing' || fileState.status === 'uploading')) {
-        setStatus('loading');
-      } else {
+      if (preview || fileState && fileState.status === 'processed' && !isImageRepresentationReady(fileState)) {
         setStatus('complete');
+      } else if (!preview && fileState && fileState.status === 'failed-processing' && !isImageRepresentationReady(fileState)) {
+        setStatus('error');
+        setError(new MediaFilePreviewError('failed-processing'));
+      } else {
+        setStatus('loading');
       }
     }
   }, [preview, status, fileState]);
@@ -190,44 +200,40 @@ export var useFilePreview = function useFilePreview(_ref) {
   // RETURN
   //----------------------------------------------------------------
 
-  var onImageError = useCallback(function (newPreview) {
-    if (newPreview) {
-      var failedSSRObject = _objectSpread({
-        status: 'fail'
-      }, extractErrorInfo(new ImageLoadError(newPreview.source)));
-      if (isSSRClientPreview(newPreview)) {
-        ssrReliabilityRef.current.client = failedSSRObject;
-      }
-
-      /*
-      If the preview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
-      */
+  var onImageError = useCallback(function (failedPreview) {
+    if (!failedPreview) {
+      return;
+    }
+    if (isSSRClientPreview(failedPreview)) {
+      ssrReliabilityRef.current.client = createFailedSSRObject(failedPreview, traceContext);
+    }
 
-      if (isSSRDataPreview(newPreview)) {
-        ssrReliabilityRef.current.server = failedSSRObject;
-        ssrReliabilityRef.current.client = failedSSRObject;
-      }
+    // If the preview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
+    if (isSSRDataPreview(failedPreview)) {
+      ssrReliabilityRef.current.server = createFailedSSRObject(failedPreview, traceContext);
+      ssrReliabilityRef.current.client = createFailedSSRObject(failedPreview, traceContext);
     }
 
     // If the dataURI has been replaced, we can dismiss this error
-    if ((newPreview === null || newPreview === void 0 ? void 0 : newPreview.dataURI) !== (preview === null || preview === void 0 ? void 0 : preview.dataURI)) {
+    if (failedPreview.dataURI !== (preview === null || preview === void 0 ? void 0 : preview.dataURI)) {
       return;
     }
-    var error = new ImageLoadError(newPreview === null || newPreview === void 0 ? void 0 : newPreview.source);
-    var isLocal = newPreview && isLocalPreview(newPreview);
-    var isSSR = newPreview && (isSSRClientPreview(newPreview) || isSSRDataPreview(newPreview));
-    if (isLocal || isSSR) {
+    var isLocal = isLocalPreview(failedPreview);
+    var isRemote = isRemotePreview(failedPreview);
+    if (isLocal || isRemote) {
+      var _error = new ImageLoadError(failedPreview === null || failedPreview === void 0 ? void 0 : failedPreview.source);
+      mediaFilePreviewCache.remove(identifier.id, resizeMode);
       if (isLocal) {
         setIsBannedLocalPreview(true);
-        setNonCriticalError(error);
       }
-      mediaFilePreviewCache.remove(identifier.id, resizeMode);
+      if (isRemote) {
+        setStatus('error');
+        setError(_error);
+      }
+      // Should be set after the status
       setPreview(undefined);
-    } else {
-      setStatus('error');
-      setError(error);
     }
-  }, [identifier.id, preview === null || preview === void 0 ? void 0 : preview.dataURI, resizeMode]);
+  }, [identifier.id, preview === null || preview === void 0 ? void 0 : preview.dataURI, resizeMode, traceContext]);
   var onImageLoad = useCallback(function (newPreview) {
     if (newPreview) {
       if (isSSRClientPreview(newPreview) && ssrReliabilityRef.current.client.status === 'unknown') {
@@ -269,17 +275,9 @@ export var useFilePreview = function useFilePreview(_ref) {
     status: status,
     error: error,
     nonCriticalError: nonCriticalError,
-    ssrReliabilityRef: ssrReliabilityRef,
+    ssrReliability: ssrReliabilityRef.current,
     onImageError: onImageError,
     onImageLoad: onImageLoad,
     getSsrScriptProps: getSsrScriptProps
   };
-};
-var initialSsrReliability = {
-  server: {
-    status: 'unknown'
-  },
-  client: {
-    status: 'unknown'
-  }
 };

package/dist/types/analytics.d.ts

@@ -1,6 +1,7 @@
 import { MediaClientErrorReason } from '@atlaskit/media-client';
 import { MediaTraceContext, SuccessAttributes } from '@atlaskit/media-common';
 import { MediaFilePreviewError, MediaFilePreviewErrorPrimaryReason } from './errors';
+import { MediaFilePreview } from './types';
 export type FailedErrorFailReason = MediaFilePreviewErrorPrimaryReason | 'nativeError';
 export type MediaFilePreviewErrorInfo = {
     failReason: FailedErrorFailReason;
@@ -25,4 +26,5 @@ export declare const getRenderErrorFailReason: (error: MediaFilePreviewError) =>
 export declare const getRenderErrorErrorReason: (error: MediaFilePreviewError) => MediaClientErrorReason | 'nativeError';
 export declare const getRenderErrorErrorDetail: (error: MediaFilePreviewError) => string;
 export declare const extractErrorInfo: (error: MediaFilePreviewError, metadataTraceContext?: MediaTraceContext) => MediaFilePreviewErrorInfo;
+export declare const createFailedSSRObject: (preview: MediaFilePreview, metadataTraceContext?: MediaTraceContext) => SSRStatusFail;
 export {};

package/dist/types/errors.d.ts

@@ -5,8 +5,8 @@ import { MediaFilePreview } from './types';
  * Primary reason is logged through Data Portal.
  * Make sure all the values are whitelisted in Measure -> Event Regitry -> "mediaCardRender failed" event
  */
-export type MediaFilePreviewErrorPrimaryReason = 'upload' | 'metadata-fetch' | 'error-file-state' | RemotePreviewPrimaryReason | LocalPreviewPrimaryReason | ImageLoadPrimaryReason | SsrPreviewPrimaryReason | 'missing-error-data' | 'preview-fetch';
-export type ImageLoadPrimaryReason = 'cache-remote-uri' | 'cache-local-uri' | 'local-uri' | 'remote-uri' | 'external-uri' | 'unknown-uri';
+export type MediaFilePreviewErrorPrimaryReason = 'upload' | 'metadata-fetch' | 'error-file-state' | 'failed-processing' | RemotePreviewPrimaryReason | LocalPreviewPrimaryReason | ImageLoadPrimaryReason | SsrPreviewPrimaryReason | 'missing-error-data' | 'preview-fetch';
+export type ImageLoadPrimaryReason = 'cache-remote-uri' | 'cache-local-uri' | 'local-uri' | 'remote-uri' | 'external-uri' | 'ssr-client-uri' | 'ssr-server-uri' | 'unknown-uri';
 export type RemotePreviewPrimaryReason = 'remote-preview-fetch' | 'remote-preview-not-ready' | 'remote-preview-fetch-ssr';
 export type LocalPreviewPrimaryReason = 'local-preview-get' | 'local-preview-unsupported' | 'local-preview-rejected' | 'local-preview-image' | 'local-preview-video';
 export type SsrPreviewPrimaryReason = 'ssr-client-uri' | 'ssr-client-load' | 'ssr-server-uri' | 'ssr-server-load';

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

@@ -3,6 +3,7 @@ import { MediaTraceContext, SSR } from '@atlaskit/media-common';
 import { MediaFilePreview, MediaFilePreviewDimensions } from '../types';
 export declare const getSSRPreview: (ssr: SSR, mediaClient: MediaClient, id: string, params: MediaStoreGetFileImageParams, mediaBlobUrlAttrs?: MediaBlobUrlAttrs) => MediaFilePreview;
 export declare const isLocalPreview: (preview: MediaFilePreview) => boolean;
+export declare const isRemotePreview: (preview: MediaFilePreview) => boolean;
 export declare const isSSRClientPreview: (preview: MediaFilePreview) => boolean;
 export declare const isSSRDataPreview: (preview: MediaFilePreview) => boolean;
 export declare const isSSRPreview: (preview: MediaFilePreview) => boolean;

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

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

package/dist/types/useFilePreview.d.ts

@@ -32,8 +32,8 @@ export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions,
     status: MediaFilePreviewStatus;
     error: MediaFilePreviewError | undefined;
     nonCriticalError: MediaFilePreviewError | undefined;
-    ssrReliabilityRef: import("react").MutableRefObject<SSRStatus>;
-    onImageError: (newPreview?: MediaFilePreview) => void;
+    ssrReliability: SSRStatus;
+    onImageError: (failedPreview?: MediaFilePreview) => void;
     onImageLoad: (newPreview?: MediaFilePreview) => void;
     getSsrScriptProps: (() => import("react").ScriptHTMLAttributes<HTMLScriptElement>) | undefined;
 };

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

@@ -1,6 +1,7 @@
 import { MediaClientErrorReason } from '@atlaskit/media-client';
 import { MediaTraceContext, SuccessAttributes } from '@atlaskit/media-common';
 import { MediaFilePreviewError, MediaFilePreviewErrorPrimaryReason } from './errors';
+import { MediaFilePreview } from './types';
 export type FailedErrorFailReason = MediaFilePreviewErrorPrimaryReason | 'nativeError';
 export type MediaFilePreviewErrorInfo = {
     failReason: FailedErrorFailReason;
@@ -25,4 +26,5 @@ export declare const getRenderErrorFailReason: (error: MediaFilePreviewError) =>
 export declare const getRenderErrorErrorReason: (error: MediaFilePreviewError) => MediaClientErrorReason | 'nativeError';
 export declare const getRenderErrorErrorDetail: (error: MediaFilePreviewError) => string;
 export declare const extractErrorInfo: (error: MediaFilePreviewError, metadataTraceContext?: MediaTraceContext) => MediaFilePreviewErrorInfo;
+export declare const createFailedSSRObject: (preview: MediaFilePreview, metadataTraceContext?: MediaTraceContext) => SSRStatusFail;
 export {};

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

@@ -5,8 +5,8 @@ import { MediaFilePreview } from './types';
  * Primary reason is logged through Data Portal.
  * Make sure all the values are whitelisted in Measure -> Event Regitry -> "mediaCardRender failed" event
  */
-export type MediaFilePreviewErrorPrimaryReason = 'upload' | 'metadata-fetch' | 'error-file-state' | RemotePreviewPrimaryReason | LocalPreviewPrimaryReason | ImageLoadPrimaryReason | SsrPreviewPrimaryReason | 'missing-error-data' | 'preview-fetch';
-export type ImageLoadPrimaryReason = 'cache-remote-uri' | 'cache-local-uri' | 'local-uri' | 'remote-uri' | 'external-uri' | 'unknown-uri';
+export type MediaFilePreviewErrorPrimaryReason = 'upload' | 'metadata-fetch' | 'error-file-state' | 'failed-processing' | RemotePreviewPrimaryReason | LocalPreviewPrimaryReason | ImageLoadPrimaryReason | SsrPreviewPrimaryReason | 'missing-error-data' | 'preview-fetch';
+export type ImageLoadPrimaryReason = 'cache-remote-uri' | 'cache-local-uri' | 'local-uri' | 'remote-uri' | 'external-uri' | 'ssr-client-uri' | 'ssr-server-uri' | 'unknown-uri';
 export type RemotePreviewPrimaryReason = 'remote-preview-fetch' | 'remote-preview-not-ready' | 'remote-preview-fetch-ssr';
 export type LocalPreviewPrimaryReason = 'local-preview-get' | 'local-preview-unsupported' | 'local-preview-rejected' | 'local-preview-image' | 'local-preview-video';
 export type SsrPreviewPrimaryReason = 'ssr-client-uri' | 'ssr-client-load' | 'ssr-server-uri' | 'ssr-server-load';

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

@@ -3,6 +3,7 @@ import { MediaTraceContext, SSR } from '@atlaskit/media-common';
 import { MediaFilePreview, MediaFilePreviewDimensions } from '../types';
 export declare const getSSRPreview: (ssr: SSR, mediaClient: MediaClient, id: string, params: MediaStoreGetFileImageParams, mediaBlobUrlAttrs?: MediaBlobUrlAttrs) => MediaFilePreview;
 export declare const isLocalPreview: (preview: MediaFilePreview) => boolean;
+export declare const isRemotePreview: (preview: MediaFilePreview) => boolean;
 export declare const isSSRClientPreview: (preview: MediaFilePreview) => boolean;
 export declare const isSSRDataPreview: (preview: MediaFilePreview) => boolean;
 export declare const isSSRPreview: (preview: MediaFilePreview) => boolean;

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

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

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

@@ -32,8 +32,8 @@ export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions,
     status: MediaFilePreviewStatus;
     error: MediaFilePreviewError | undefined;
     nonCriticalError: MediaFilePreviewError | undefined;
-    ssrReliabilityRef: import("react").MutableRefObject<SSRStatus>;
-    onImageError: (newPreview?: MediaFilePreview) => void;
+    ssrReliability: SSRStatus;
+    onImageError: (failedPreview?: MediaFilePreview) => void;
     onImageLoad: (newPreview?: MediaFilePreview) => void;
     getSsrScriptProps: (() => import("react").ScriptHTMLAttributes<HTMLScriptElement>) | undefined;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-file-preview",
-  "version": "0.3.0",
+  "version": "0.4.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",