@atlaskit/media-card 77.6.1 → 77.6.3

package/dist/cjs/card/v2/useFilePreview/useFilePreview.js

@@ -52,6 +52,8 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
   var requestDimensions = (0, _react.useMemo)(function () {
     return dimensions ? (0, _helpers.createRequestDimensions)(dimensions) : undefined;
   }, [dimensions]);
+  var requestDimensionsRef = (0, _helpers.useCurrentValueRef)(requestDimensions);
+  var prevRequestDimensions = (0, _helpers.usePrevious)(requestDimensions);
   var imageURLParams = (0, _react.useMemo)(function () {
     return _objectSpread(_objectSpread({
       collection: identifier.collectionName,
@@ -60,97 +62,235 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
       allowAnimated: true
     });
   }, [requestDimensions, identifier.collectionName, resizeMode]);
-  var getSSRPreview = function getSSRPreview(ssr, identifier, mediaClient) {
-    var ssrData = (0, _globalScope.getSSRData)(identifier);
-    if (ssrData !== null && ssrData !== void 0 && ssrData.error) {
-      ssrReliabilityRef.current.server = _objectSpread({
-        status: 'fail'
-      }, ssrData.error);
+  var previewInitializer = function previewInitializer() {
+    var fileImageMode = (0, _mediaClient.imageResizeModeToFileImageMode)(resizeMode);
+    var preview = _getPreview.mediaFilePreviewCache.get(identifier.id, fileImageMode);
+    if (preview) {
+      return preview;
     }
-    if (!(ssrData !== null && ssrData !== void 0 && ssrData.dataURI)) {
-      try {
-        return (0, _getPreview.getSSRCardPreview)(ssr, mediaClient, identifier.id, imageURLParams, mediaBlobUrlAttrs);
-      } catch (e) {
-        ssrReliabilityRef.current[ssr] = _objectSpread({
+    if (ssr) {
+      var ssrData = (0, _globalScope.getSSRData)(identifier);
+      if (ssrData !== null && ssrData !== void 0 && ssrData.error) {
+        ssrReliabilityRef.current.server = _objectSpread({
           status: 'fail'
-        }, (0, _analytics.extractErrorInfo)(e));
+        }, ssrData.error);
+      }
+      if (!(ssrData !== null && ssrData !== void 0 && ssrData.dataURI)) {
+        try {
+          return (0, _getPreview.getSSRPreview)(ssr, mediaClient, identifier.id, imageURLParams, mediaBlobUrlAttrs);
+        } catch (e) {
+          ssrReliabilityRef.current[ssr] = _objectSpread({
+            status: 'fail'
+          }, (0, _analytics.extractErrorInfo)(e));
+        }
+      } else {
+        var _dimensions = ssrData.dimensions,
+          dataURI = ssrData.dataURI;
+        return {
+          dataURI: dataURI,
+          dimensions: _dimensions,
+          source: 'ssr-data'
+        };
       }
-    } else {
-      var _dimensions = ssrData.dimensions,
-        dataURI = ssrData.dataURI;
-      return {
-        dataURI: dataURI,
-        dimensions: _dimensions,
-        source: 'ssr-data'
-      };
-    }
-  };
-  var cardPreviewInitializer = function cardPreviewInitializer() {
-    var cardPreview;
-    var id = identifier.id;
-    var fileImageMode = (0, _mediaClient.imageResizeModeToFileImageMode)(resizeMode);
-    cardPreview = _getPreview.mediaFilePreviewCache.get(id, fileImageMode);
-    if (!cardPreview && ssr) {
-      cardPreview = getSSRPreview(ssr, identifier, mediaClient);
     }
-    return cardPreview;
   };
-  var _useState9 = (0, _react.useState)(cardPreviewInitializer),
+  var _useState9 = (0, _react.useState)(previewInitializer),
     _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    cardPreview = _useState10[0],
-    setCardPreview = _useState10[1];
+    preview = _useState10[0],
+    setPreview = _useState10[1];
+  var prevPreview = (0, _helpers.usePrevious)(preview);
   var _useFileState = (0, _mediaClientReact.useFileState)(identifier.id, {
       skipRemote: skipRemote,
       collectionName: identifier.collectionName,
       occurrenceKey: identifier.occurrenceKey
     }),
     fileState = _useFileState.fileState;
+
+  //----------------------------------------------------------------
+  // Update status
+  //----------------------------------------------------------------
+
+  // TOOD: make a full hook reset (remount) on New identifier or client
   (0, _react.useEffect)(function () {
     setStatus('loading');
   }, [identifier]);
+  var updateFileStateRef = (0, _helpers.useCurrentValueRef)(function () {
+    if (fileState) {
+      // do not update the status if the status is final
+      if (['complete', 'error', 'failed-processing'].includes(status)) {
+        return;
+      }
+      if (fileState.status !== 'error') {
+        var mediaType = 'mediaType' in fileState ? fileState.mediaType : undefined;
+        var isPreviewable = !!mediaType && ['audio', 'video', 'image', 'doc'].indexOf(mediaType) > -1;
+        var isPreviewableFileState = !!fileState.preview;
+        var isSupportedLocalPreview = mediaType === 'image' || mediaType === 'video';
+        var hasLocalPreview = !isBannedLocalPreview && isPreviewableFileState && isSupportedLocalPreview && !!fileState.mimeType && (0, _mediaCommon.isMimeTypeSupportedByBrowser)(fileState.mimeType);
+        var hasRemotePreview = (0, _mediaClient.isImageRepresentationReady)(fileState);
+        var hasPreview = hasLocalPreview || hasRemotePreview;
+        var newStatus;
+        switch (fileState.status) {
+          case 'uploading':
+          case 'failed-processing':
+          case 'processing':
+            newStatus = fileState.status;
+            break;
+          case 'processed':
+            if (!isPreviewable || !hasPreview) {
+              newStatus = 'complete';
+              break;
+            }
+            newStatus = 'loading-preview';
+            break;
+          default:
+            newStatus = 'loading';
+        }
+        setStatus(newStatus);
+      } else {
+        var e = new _mediaClientReact.MediaFileStateError(fileState.id, fileState.reason, fileState.message, fileState.details);
+        var errorReason = status === 'uploading' ? 'upload' : 'metadata-fetch';
+        setError(new _errors.MediaFilePreviewError(errorReason, e));
+        setStatus('error');
+      }
+    }
+  });
+  (0, _react.useEffect)(function () {
+    updateFileStateRef.current();
+  }, [fileState, updateFileStateRef]);
+  (0, _react.useEffect)(function () {
+    if (previewDidRender &&
+    // We should't complete if status is uploading
+    ['loading-preview', 'processing'].includes(status)) {
+      setStatus('complete');
+      // TODO MEX-788: add test for "do not remove the preview when unsubscribing".
+      setIsBannedLocalPreview(false); // CXP-2723 TODO: we might be able to remove this??
+    }
+  }, [previewDidRender, status]);
 
-  //----------------------------------------------------------------//
-  //---------------------- Helper Functions  -----------------------//
-  //----------------------------------------------------------------//
+  // CXP-2723 TODO: Create test cases for banning local preview after status is complete
 
-  var fetchRemotePreviewRef = (0, _helpers.useCurrentValueRef)(function (identifier) {
+  //----------------------------------------------------------------
+  // Preview Fetch Helper
+  //----------------------------------------------------------------
+  var getAndCacheRemotePreviewRef = (0, _helpers.useCurrentValueRef)(function () {
     return (0, _getPreview.getAndCacheRemotePreview)(mediaClient, identifier.id, requestDimensions || {}, imageURLParams, mediaBlobUrlAttrs, traceContext);
   });
+
+  //----------------------------------------------------------------
+  // Cache SSR Preview
+  //----------------------------------------------------------------
+  (0, _react.useEffect)(function () {
+    if (!skipRemote && ssr && !!preview && (0, _getPreview.isSSRClientPreview)(preview)) {
+      // Since the SSR preview brings the token in the query params,
+      // We need to fetch the remote preview to be able to cache it,
+      getAndCacheRemotePreviewRef.current().catch(function () {
+        // No need to log this error.
+        // If preview fails, it will be refetched later
+        //TODO: test this catch
+        // https://product-fabric.atlassian.net/browse/MEX-1071
+      });
+    }
+  }, [preview, identifier, skipRemote, ssr, getAndCacheRemotePreviewRef]);
+
+  //----------------------------------------------------------------
+  // Refetch SRR Preview if dimensions from Server have changed and are bigger,
+  //----------------------------------------------------------------
+  (0, _react.useEffect)(function () {
+    // CXP-2813 TODO: This is called too many times if the refetch failed. Should be called only once
+    if (preview && !skipRemote && (0, _getPreview.isSSRDataPreview)(preview) && (0, _helpers.isBigger)(preview.dimensions, requestDimensions)) {
+      getAndCacheRemotePreviewRef.current().then(setPreview).catch(function (e) {
+        var wrappedError = (0, _errors.ensureMediaFilePreviewError)('remote-preview-fetch-ssr', e, true);
+        setNonCriticalError(wrappedError);
+      });
+    }
+  }, [getAndCacheRemotePreviewRef, identifier, preview, requestDimensions, skipRemote]);
+
+  //----------------------------------------------------------------
+  // Upfront Preview
+  //----------------------------------------------------------------
+  (0, _react.useEffect)(function () {
+    var resolveUpfrontPreview = /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var fetchedDimensions, newPreview, areValidFetchedDimensions;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              // 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;
+              _context.prev = 1;
+              fetchedDimensions = _objectSpread({}, requestDimensions);
+              _context.next = 5;
+              return getAndCacheRemotePreviewRef.current();
+            case 5:
+              newPreview = _context.sent;
+              areValidFetchedDimensions = !(0, _helpers.isBigger)(fetchedDimensions, requestDimensionsRef.current); // If there are new and bigger dimensions in the props, and the upfront preview is still resolving,
+              // the fetched preview is no longer valid, and thus, we dismiss it
+              if (areValidFetchedDimensions) {
+                setPreview(newPreview);
+              }
+              _context.next = 12;
+              break;
+            case 10:
+              _context.prev = 10;
+              _context.t0 = _context["catch"](1);
+            case 12:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[1, 10]]);
+      }));
+      return function resolveUpfrontPreview() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+
+    // CXP-2723 TODO: `hadSSRPreview` is most likely redundant
+    var hadSSRPreview = ssr === 'client' && !!prevPreview && (0, _getPreview.isSSRClientPreview)(prevPreview);
+    if (!preview && !wasResolvedUpfrontPreviewRef.current && (!skipRemote || hadSSRPreview)) {
+      resolveUpfrontPreview();
+    }
+  }, [preview, requestDimensions, requestDimensionsRef, getAndCacheRemotePreviewRef, identifier, skipRemote, prevPreview, ssr]);
+
+  //----------------------------------------------------------------
+  // Fetch Preview
+  //----------------------------------------------------------------
+
   var resolvePreviewRef = (0, _helpers.useCurrentValueRef)( /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(identifier, fileState) {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(identifier, fileState) {
       var filePreview, isRemotePreviewReady, mode, cachedPreview, dimensionsAreBigger, localPreview, remotePreview, wrappedError;
-      return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
           case 0:
             filePreview = isBannedLocalPreview ? undefined : fileState.status !== 'error' && 'mimeType' in fileState && (0, _mediaCommon.isMimeTypeSupportedByBrowser)(fileState.mimeType) ? fileState.preview : undefined;
             isRemotePreviewReady = (0, _mediaClient.isImageRepresentationReady)(fileState);
-            _context.prev = 2;
+            _context2.prev = 2;
             mode = imageURLParams.mode;
             cachedPreview = _getPreview.mediaFilePreviewCache.get(identifier.id, mode);
             dimensionsAreBigger = (0, _helpers.isBigger)(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, requestDimensions);
             if (!(cachedPreview && !dimensionsAreBigger)) {
-              _context.next = 8;
+              _context2.next = 8;
               break;
             }
-            return _context.abrupt("return", cachedPreview);
+            return _context2.abrupt("return", cachedPreview);
           case 8:
-            _context.prev = 8;
+            _context2.prev = 8;
             if (!filePreview) {
-              _context.next = 15;
+              _context2.next = 15;
               break;
             }
-            _context.next = 12;
+            _context2.next = 12;
             return (0, _getPreview.getAndCacheLocalPreview)(identifier.id, filePreview, requestDimensions || {}, mode, mediaBlobUrlAttrs);
           case 12:
-            localPreview = _context.sent;
-            setCardPreview(localPreview);
-            return _context.abrupt("return");
+            localPreview = _context2.sent;
+            setPreview(localPreview);
+            return _context2.abrupt("return");
           case 15:
-            _context.next = 22;
+            _context2.next = 22;
             break;
           case 17:
-            _context.prev = 17;
-            _context.t0 = _context["catch"](8);
+            _context2.prev = 17;
+            _context2.t0 = _context2["catch"](8);
             /**
              * We report the error if:
              * - local preview is supported and fails
@@ -161,36 +301,36 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
              *   i.e. local preview is available and not supported,
              *   but we are after the remote preview instead.
              */
-            if (!(0, _errors.isUnsupportedLocalPreviewError)(_context.t0) || (0, _errors.isUnsupportedLocalPreviewError)(_context.t0) && !isRemotePreviewReady) {
+            if (!(0, _errors.isUnsupportedLocalPreviewError)(_context2.t0) || (0, _errors.isUnsupportedLocalPreviewError)(_context2.t0) && !isRemotePreviewReady) {
               // CXP-2723 TODO: We might have to wrap this error in MediaCardError
-              setNonCriticalError(_context.t0);
+              setNonCriticalError(_context2.t0);
             }
             /**
              * No matter the reason why the local preview failed, we break the process
              * if there is no remote preview available
              */
             if (isRemotePreviewReady) {
-              _context.next = 22;
+              _context2.next = 22;
               break;
             }
-            throw _context.t0;
+            throw _context2.t0;
           case 22:
             if (isRemotePreviewReady) {
-              _context.next = 24;
+              _context2.next = 24;
               break;
             }
             throw new _errors.MediaFilePreviewError('remote-preview-not-ready');
           case 24:
-            _context.next = 26;
-            return fetchRemotePreviewRef.current(identifier);
+            _context2.next = 26;
+            return getAndCacheRemotePreviewRef.current();
           case 26:
-            remotePreview = _context.sent;
-            setCardPreview(remotePreview);
-            return _context.abrupt("return");
+            remotePreview = _context2.sent;
+            setPreview(remotePreview);
+            return _context2.abrupt("return");
           case 31:
-            _context.prev = 31;
-            _context.t1 = _context["catch"](2);
-            wrappedError = (0, _errors.ensureMediaFilePreviewError)('preview-fetch', _context.t1); //  If remote preview fails, we set status 'error'
+            _context2.prev = 31;
+            _context2.t1 = _context2["catch"](2);
+            wrappedError = (0, _errors.ensureMediaFilePreviewError)('preview-fetch', _context2.t1); //  If remote preview fails, we set status 'error'
             //  If local preview fails (i.e, no remote preview available),
             //  we can stay in the same status until there is a remote preview available
             //  If it's any other error we set status 'error'
@@ -205,187 +345,50 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
             }
           case 35:
           case "end":
-            return _context.stop();
+            return _context2.stop();
         }
-      }, _callee, null, [[2, 31], [8, 17]]);
+      }, _callee2, null, [[2, 31], [8, 17]]);
     }));
     return function (_x, _x2) {
-      return _ref2.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }());
-
-  //----------------------------------------------------------------//
-  //------------ resolveUpfrontPreview useEffect -------------------//
-  //----------------------------------------------------------------//
-  var prevCardPreview = (0, _helpers.usePrevious)(cardPreview);
-  var requestDimensionsRef = (0, _helpers.useCurrentValueRef)(requestDimensions);
-  (0, _react.useEffect)(function () {
-    var resolveUpfrontPreview = /*#__PURE__*/function () {
-      var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(identifier) {
-        var fetchedDimensions, newCardPreview, areValidFetchedDimensions;
-        return _regenerator.default.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              // 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;
-              _context2.prev = 1;
-              fetchedDimensions = _objectSpread({}, requestDimensions);
-              _context2.next = 5;
-              return fetchRemotePreviewRef.current(identifier);
-            case 5:
-              newCardPreview = _context2.sent;
-              areValidFetchedDimensions = !(0, _helpers.isBigger)(fetchedDimensions, requestDimensionsRef.current); // If there are new and bigger dimensions in the props, and the upfront preview is still resolving,
-              // the fetched preview is no longer valid, and thus, we dismiss it
-              if (areValidFetchedDimensions) {
-                setCardPreview(newCardPreview);
-              }
-              _context2.next = 12;
-              break;
-            case 10:
-              _context2.prev = 10;
-              _context2.t0 = _context2["catch"](1);
-            case 12:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2, null, [[1, 10]]);
-      }));
-      return function resolveUpfrontPreview(_x3) {
-        return _ref3.apply(this, arguments);
-      };
-    }();
-    var hadSSRCardPreview = ssr === 'client' && !!prevCardPreview && (0, _getPreview.isSSRClientPreview)(prevCardPreview);
-
-    // CXP-2723 TODO: `hadSSRCardPreview` is most likely redundant
-    if (!wasResolvedUpfrontPreviewRef.current && (!skipRemote || hadSSRCardPreview) && !cardPreview) {
-      resolveUpfrontPreview(identifier);
-    }
-  }, [cardPreview, requestDimensions, requestDimensionsRef, fetchRemotePreviewRef, identifier, skipRemote, prevCardPreview, ssr]);
-
-  //----------------------------------------------------------------//
-  //---------------- fetch and resolve card preview ----------------//
-  //----------------------------------------------------------------//
-
-  var prevRequestDimensions = (0, _helpers.usePrevious)(requestDimensions);
   (0, _react.useEffect)(function () {
-    // CXP-2813 TODO: This is called too many times if the refetch failed. Should be called only once
-    if (cardPreview && !skipRemote && (0, _getPreview.isSSRDataPreview)(cardPreview) && (0, _helpers.isBigger)(cardPreview.dimensions, requestDimensions)) {
-      // refetchSRRPreview: If dimensions from Server have changed and are bigger,
-      // we need to refetch
-      fetchRemotePreviewRef.current(identifier).then(setCardPreview).catch(function (e) {
-        var wrappedError = (0, _errors.ensureMediaFilePreviewError)('remote-preview-fetch-ssr', e, true);
-        setNonCriticalError(wrappedError);
-      });
-    }
-    // CXP-2723 TODO: The above and below preview fetch logic seem very similar and could be revisted
-    // Both compare dimensions, but the above is only for SSR in order to refetchSRRPreview and
-    // will swallow any errors. Below logic only applies when there is no card preview or the dimensions
-    // are bigger.
-    if (fileState && wasResolvedUpfrontPreviewRef.current && (0, _getPreview.isPreviewableStatus)(status, (0, _getPreview.extractFilePreviewStatus)(fileState, isBannedLocalPreview)) && (!cardPreview || (0, _helpers.isBigger)(prevRequestDimensions, requestDimensions))) {
+    if (fileState && wasResolvedUpfrontPreviewRef.current && (0, _getPreview.isPreviewableStatus)(status, (0, _getPreview.extractFilePreviewStatus)(fileState, isBannedLocalPreview)) && (!preview || (0, _helpers.isBigger)(prevRequestDimensions, requestDimensions))) {
       resolvePreviewRef.current(identifier, fileState);
     }
-    if (!skipRemote && ssr && !!cardPreview && (0, _getPreview.isSSRClientPreview)(cardPreview)) {
-      // Since the SSR preview brings the token in the query params,
-      // We need to fetch the remote preview to be able to cache it,
-      fetchRemotePreviewRef.current(identifier).catch(function () {
-        // No need to log this error.
-        // If preview fails, it will be refetched later
-        //TODO: test this catch
-        // https://product-fabric.atlassian.net/browse/MEX-1071
-      });
-    }
-  }, [cardPreview, requestDimensions, fetchRemotePreviewRef, fileState, identifier, isBannedLocalPreview, prevRequestDimensions, resolvePreviewRef, skipRemote, ssr, status]);
-
-  //----------------------------------------------------------------//
-  //----------------- set complete status --------------------------//
-  //----------------------------------------------------------------//
+  }, [fileState, identifier, isBannedLocalPreview, prevRequestDimensions, preview, requestDimensions, resolvePreviewRef, status]);
 
-  (0, _react.useEffect)(function () {
-    if (previewDidRender &&
-    // We should't complete if status is uploading
-    ['loading-preview', 'processing'].includes(status)) {
-      setStatus('complete');
-      // TODO MEX-788: add test for "do not remove the card preview when unsubscribing".
-      setIsBannedLocalPreview(false); // CXP-2723 TODO: we might be able to remove this??
-    }
-  }, [previewDidRender, status]);
-
-  // CXP-2723 TODO: Create test cases for banning local preview after status is complete
-
-  //----------------------------------------------------------------//
-  //------------------ Subscribe to file state ---------------------//
-  //----------------------------------------------------------------//
+  //----------------------------------------------------------------
+  // RETURN
+  //----------------------------------------------------------------
 
-  var updateFileStateRef = (0, _helpers.useCurrentValueRef)(function () {
-    if (fileState) {
-      // do not update the card status if the status is final
-      if (['complete', 'error', 'failed-processing'].includes(status)) {
-        return;
-      }
-      if (fileState.status !== 'error') {
-        var mediaType = 'mediaType' in fileState ? fileState.mediaType : undefined;
-        var isPreviewable = !!mediaType && ['audio', 'video', 'image', 'doc'].indexOf(mediaType) > -1;
-        var isPreviewableFileState = !!fileState.preview;
-        var isSupportedLocalPreview = mediaType === 'image' || mediaType === 'video';
-        var hasLocalPreview = !isBannedLocalPreview && isPreviewableFileState && isSupportedLocalPreview && !!fileState.mimeType && (0, _mediaCommon.isMimeTypeSupportedByBrowser)(fileState.mimeType);
-        var hasRemotePreview = (0, _mediaClient.isImageRepresentationReady)(fileState);
-        var hasPreview = hasLocalPreview || hasRemotePreview;
-        var newStatus;
-        switch (fileState.status) {
-          case 'uploading':
-          case 'failed-processing':
-          case 'processing':
-            newStatus = fileState.status;
-            break;
-          case 'processed':
-            if (!isPreviewable || !hasPreview) {
-              newStatus = 'complete';
-              break;
-            }
-            newStatus = 'loading-preview';
-            break;
-          default:
-            newStatus = 'loading';
-        }
-        setStatus(newStatus);
-      } else {
-        var e = new _mediaClientReact.MediaFileStateError(fileState.id, fileState.reason, fileState.message, fileState.details);
-        var errorReason = status === 'uploading' ? 'upload' : 'metadata-fetch';
-        setError(new _errors.MediaFilePreviewError(errorReason, e));
-        setStatus('error');
-      }
-    }
-  });
-  (0, _react.useEffect)(function () {
-    updateFileStateRef.current();
-  }, [fileState, updateFileStateRef]);
-  var onImageError = function onImageError(newCardPreview) {
-    if (newCardPreview) {
+  var onImageError = (0, _react.useCallback)(function (newPreview) {
+    if (newPreview) {
       var failedSSRObject = _objectSpread({
         status: 'fail'
-      }, (0, _analytics.extractErrorInfo)(new _errors.ImageLoadError(newCardPreview.source)));
-      if ((0, _getPreview.isSSRClientPreview)(newCardPreview)) {
+      }, (0, _analytics.extractErrorInfo)(new _errors.ImageLoadError(newPreview.source)));
+      if ((0, _getPreview.isSSRClientPreview)(newPreview)) {
         ssrReliabilityRef.current.client = failedSSRObject;
       }
 
       /*
-        If the cardPreview 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 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)(newCardPreview)) {
+      if ((0, _getPreview.isSSRDataPreview)(newPreview)) {
         ssrReliabilityRef.current.server = failedSSRObject;
         ssrReliabilityRef.current.client = failedSSRObject;
       }
     }
 
     // If the dataURI has been replaced, we can dismiss this error
-    if ((newCardPreview === null || newCardPreview === void 0 ? void 0 : newCardPreview.dataURI) !== (cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI)) {
+    if ((newPreview === null || newPreview === void 0 ? void 0 : newPreview.dataURI) !== (preview === null || preview === void 0 ? void 0 : preview.dataURI)) {
       return;
     }
-    var error = new _errors.ImageLoadError(newCardPreview === null || newCardPreview === void 0 ? void 0 : newCardPreview.source);
-    var isLocal = newCardPreview && (0, _getPreview.isLocalPreview)(newCardPreview);
-    var isSSR = newCardPreview && ((0, _getPreview.isSSRClientPreview)(newCardPreview) || (0, _getPreview.isSSRDataPreview)(newCardPreview));
+    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) {
       if (isLocal) {
         setIsBannedLocalPreview(true);
@@ -393,27 +396,27 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
       }
       var fileImageMode = (0, _mediaClient.imageResizeModeToFileImageMode)(resizeMode);
       _getPreview.mediaFilePreviewCache.remove(identifier.id, fileImageMode);
-      setCardPreview(undefined);
+      setPreview(undefined);
     } else {
       if (!['complete', 'error', 'failed-processing'].includes(status)) {
         setStatus('error');
         setError(error);
       }
     }
-  };
-  var onImageLoad = function onImageLoad(newCardPreview) {
-    if (newCardPreview) {
-      if ((0, _getPreview.isSSRClientPreview)(newCardPreview) && ssrReliabilityRef.current.client.status === 'unknown') {
+  }, [identifier.id, preview === null || preview === void 0 ? void 0 : preview.dataURI, resizeMode, status]);
+  var onImageLoad = (0, _react.useCallback)(function (newPreview) {
+    if (newPreview) {
+      if ((0, _getPreview.isSSRClientPreview)(newPreview) && ssrReliabilityRef.current.client.status === 'unknown') {
         ssrReliabilityRef.current.client = {
           status: 'success'
         };
       }
 
       /*
-        If the image loads successfully and it comes from server (global scope / ssrData), it means that we have reused it in client and the success counts for both: server & client.
+      If the image loads successfully and it comes from server (global scope / ssrData), it means that we have reused it in client and the success counts for both: server & client.
       */
 
-      if ((0, _getPreview.isSSRDataPreview)(newCardPreview) && ssrReliabilityRef.current.server.status === 'unknown') {
+      if ((0, _getPreview.isSSRDataPreview)(newPreview) && ssrReliabilityRef.current.server.status === 'unknown') {
         ssrReliabilityRef.current.server = {
           status: 'success'
         };
@@ -424,25 +427,21 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     }
 
     // If the dataURI has been replaced, we can dismiss this callback
-    if ((newCardPreview === null || newCardPreview === void 0 ? void 0 : newCardPreview.dataURI) !== (cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI)) {
+    if ((newPreview === null || newPreview === void 0 ? void 0 : newPreview.dataURI) !== (preview === null || preview === void 0 ? void 0 : preview.dataURI)) {
       return;
     }
-  };
-
-  //----------------------------------------------------------------//
-  // RETURN
-  //----------------------------------------------------------------//
+  }, [preview === null || preview === void 0 ? void 0 : preview.dataURI]);
 
   // FOR SSR
   var getScriptProps = function getScriptProps() {
     var _ssrReliabilityRef$cu;
-    return (0, _globalScope.generateScriptProps)(identifier, cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI, requestDimensions, ((_ssrReliabilityRef$cu = ssrReliabilityRef.current.server) === null || _ssrReliabilityRef$cu === void 0 ? void 0 : _ssrReliabilityRef$cu.status) === 'fail' ? ssrReliabilityRef.current.server : undefined);
+    return (0, _globalScope.generateScriptProps)(identifier, preview === null || preview === void 0 ? void 0 : preview.dataURI, requestDimensions, ((_ssrReliabilityRef$cu = ssrReliabilityRef.current.server) === null || _ssrReliabilityRef$cu === void 0 ? void 0 : _ssrReliabilityRef$cu.status) === 'fail' ? ssrReliabilityRef.current.server : undefined);
   };
 
   // CXP-2723 TODO: should consider simplifying our analytics, and how
   // we might get rid of ssrReliabiltyRef from our hook
   return {
-    cardPreview: cardPreview,
+    preview: preview,
     error: error,
     nonCriticalError: nonCriticalError,
     ssrReliabilityRef: ssrReliabilityRef,

package/dist/cjs/inline/loader.js

@@ -119,7 +119,7 @@ var MediaInlineCardLoader = exports.default = /*#__PURE__*/function (_React$Pure
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "77.6.1",
+        packageName: "77.6.3",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/inline/mediaInlineCard.js

@@ -134,13 +134,6 @@ var MediaInlineCardInternal = exports.MediaInlineCardInternal = function MediaIn
       isSelected: isSelected
     });
   }
-  if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'failed-processing') {
-    !isFailedEventSent && fireFailedOperationalEvent(undefined, 'failed-processing');
-    return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
-      message: (intl || defaultIntl).formatMessage(_mediaUi.messages.couldnt_load_file),
-      isSelected: isSelected
-    });
-  }
 
   // Empty file handling
   if (fileState && !fileState.name) {
@@ -163,6 +156,11 @@ var MediaInlineCardInternal = exports.MediaInlineCardInternal = function MediaIn
       isSelected: isSelected
     });
   }
+
+  // Failed to process should still display the loaded view and enable Media Client to download
+  if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'failed-processing') {
+    !isFailedEventSent && fireFailedOperationalEvent(undefined, 'failed-processing');
+  }
   var mediaType = fileState.mediaType,
     name = fileState.name,
     mimeType = fileState.mimeType;