@atlaskit/media-card 74.5.2 → 74.6.1

package/dist/esm/card/card.js

@@ -39,7 +39,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.5.2";
+var packageVersion = "74.6.1";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);
@@ -127,11 +127,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       };
     });
     _defineProperty(_assertThisInitialized(_this), "setCacheSSRPreview", function (identifier) {
-      var _this$props3 = _this.props,
-        mediaClient = _this$props3.mediaClient,
-        _this$props3$dimensio = _this$props3.dimensions,
-        dimensions = _this$props3$dimensio === void 0 ? {} : _this$props3$dimensio;
-      fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions, _this.getImageURLParams(identifier), _this.getMediaBlobUrlAttrs(identifier)).catch(function () {
+      _this.fetchAndCacheRemotePreview(identifier).catch(function () {
         // No need to log this error.
         // If preview fails, it will be refetched later
         //TODO: test this catch
@@ -140,60 +136,113 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "refetchSSRPreview", /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(identifier) {
-        var _this$props4, mediaClient, _this$props4$dimensio, dimensions, cardPreview, wrappedError;
+        var cardPreview, wrappedError;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                _this$props4 = _this.props, mediaClient = _this$props4.mediaClient, _this$props4$dimensio = _this$props4.dimensions, dimensions = _this$props4$dimensio === void 0 ? {} : _this$props4$dimensio;
-                _context.prev = 1;
-                _context.next = 4;
-                return fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions, _this.getImageURLParams(identifier), _this.getMediaBlobUrlAttrs(identifier));
-              case 4:
+                _context.prev = 0;
+                _context.next = 3;
+                return _this.fetchAndCacheRemotePreview(identifier);
+              case 3:
                 cardPreview = _context.sent;
                 _this.safeSetState({
                   cardPreview: cardPreview
                 });
-                _context.next = 12;
+                _context.next = 11;
                 break;
-              case 8:
-                _context.prev = 8;
-                _context.t0 = _context["catch"](1);
+              case 7:
+                _context.prev = 7;
+                _context.t0 = _context["catch"](0);
                 wrappedError = ensureMediaCardError('remote-preview-fetch-ssr', _context.t0, true);
                 _this.fireNonCriticalErrorEvent(wrappedError);
-              case 12:
+              case 11:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee, null, [[1, 8]]);
+        }, _callee, null, [[0, 7]]);
       }));
       return function (_x) {
         return _ref2.apply(this, arguments);
       };
     }());
-    _defineProperty(_assertThisInitialized(_this), "resolvePreview", /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(identifier, fileState) {
-        var params, cardPreview, wrappedError;
+    _defineProperty(_assertThisInitialized(_this), "resolveUpfrontPreview", /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(identifier) {
+        var requestedDimensions, cardPreview, currentDimensions, areValidRequestedDimensions;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.next) {
               case 0:
-                _context2.prev = 0;
-                params = _this.getCardPreviewParams(identifier, fileState);
+                requestedDimensions = _objectSpread({}, _this.props.dimensions);
+                _context2.prev = 1;
                 _context2.next = 4;
-                return getCardPreview(params);
+                return _this.fetchAndCacheRemotePreview(identifier);
               case 4:
                 cardPreview = _context2.sent;
+                currentDimensions = _this.props.dimensions;
+                areValidRequestedDimensions = !isBigger(requestedDimensions, currentDimensions); // 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 and set the flag wasResolvedUpfrontPreview = true
+                // to trigger a normal preview fetch.
+                if (areValidRequestedDimensions) {
+                  _this.safeSetState({
+                    cardPreview: cardPreview,
+                    wasResolvedUpfrontPreview: true
+                  });
+                } else {
+                  _this.safeSetState({
+                    wasResolvedUpfrontPreview: true
+                  });
+                }
+                _context2.next = 13;
+                break;
+              case 10:
+                _context2.prev = 10;
+                _context2.t0 = _context2["catch"](1);
+                _this.safeSetState({
+                  wasResolvedUpfrontPreview: true
+                });
+                // NO need to log error. If this call fails, a refetch will happen after
+              case 13:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, null, [[1, 10]]);
+      }));
+      return function (_x2) {
+        return _ref3.apply(this, arguments);
+      };
+    }());
+    _defineProperty(_assertThisInitialized(_this), "fetchAndCacheRemotePreview", function (identifier) {
+      var _this$props3 = _this.props,
+        mediaClient = _this$props3.mediaClient,
+        _this$props3$dimensio = _this$props3.dimensions,
+        dimensions = _this$props3$dimensio === void 0 ? {} : _this$props3$dimensio;
+      return fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions, _this.getImageURLParams(identifier), _this.getMediaBlobUrlAttrs(identifier));
+    });
+    _defineProperty(_assertThisInitialized(_this), "resolvePreview", /*#__PURE__*/function () {
+      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(identifier, fileState) {
+        var params, cardPreview, wrappedError;
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                _context3.prev = 0;
+                params = _this.getCardPreviewParams(identifier, fileState);
+                _context3.next = 4;
+                return getCardPreview(params);
+              case 4:
+                cardPreview = _context3.sent;
                 _this.safeSetState({
                   cardPreview: cardPreview
                 });
-                _context2.next = 12;
+                _context3.next = 12;
                 break;
               case 8:
-                _context2.prev = 8;
-                _context2.t0 = _context2["catch"](0);
-                wrappedError = ensureMediaCardError('preview-fetch', _context2.t0); //  If remote preview fails, we set status 'error'
+                _context3.prev = 8;
+                _context3.t0 = _context3["catch"](0);
+                wrappedError = ensureMediaCardError('preview-fetch', _context3.t0); //  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'
@@ -210,13 +259,13 @@ export var CardBase = /*#__PURE__*/function (_Component) {
                 }
               case 12:
               case "end":
-                return _context2.stop();
+                return _context3.stop();
             }
           }
-        }, _callee2, null, [[0, 8]]);
+        }, _callee3, null, [[0, 8]]);
       }));
-      return function (_x2, _x3) {
-        return _ref3.apply(this, arguments);
+      return function (_x3, _x4) {
+        return _ref4.apply(this, arguments);
       };
     }());
     _defineProperty(_assertThisInitialized(_this), "getPerformanceAttributes", function () {
@@ -268,9 +317,9 @@ export var CardBase = /*#__PURE__*/function (_Component) {
           updateState.isBannedLocalPreview = true;
           _this.fireNonCriticalErrorEvent(error);
         }
-        var _this$props5 = _this.props,
-          identifier = _this$props5.identifier,
-          resizeMode = _this$props5.resizeMode;
+        var _this$props4 = _this.props,
+          identifier = _this$props4.identifier,
+          resizeMode = _this$props4.resizeMode;
         var fileImageMode = imageResizeModeToFileImageMode(resizeMode);
         isFileIdentifier(identifier) && removeCardPreviewFromCache(identifier.id, fileImageMode);
         _this.safeSetState(updateState);
@@ -349,10 +398,10 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       }
     });
     _defineProperty(_assertThisInitialized(_this), "onCardViewClick", function (event, analyticsEvent) {
-      var _this$props6 = _this.props,
-        identifier = _this$props6.identifier,
-        useInlinePlayer = _this$props6.useInlinePlayer,
-        shouldOpenMediaViewer = _this$props6.shouldOpenMediaViewer;
+      var _this$props5 = _this.props,
+        identifier = _this$props5.identifier,
+        useInlinePlayer = _this$props5.useInlinePlayer,
+        shouldOpenMediaViewer = _this$props5.shouldOpenMediaViewer;
       var cardPreview = _this.state.cardPreview;
       var _assertThisInitialize2 = _assertThisInitialized(_this),
         metadata = _assertThisInitialize2.metadata;
@@ -398,14 +447,14 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       });
     });
     _defineProperty(_assertThisInitialized(_this), "renderInlinePlayer", function () {
-      var _this$props7 = _this.props,
-        identifier = _this$props7.identifier,
-        mediaClient = _this$props7.mediaClient,
-        dimensions = _this$props7.dimensions,
-        selected = _this$props7.selected,
-        testId = _this$props7.testId,
-        originalDimensions = _this$props7.originalDimensions,
-        onFullscreenChange = _this$props7.onFullscreenChange;
+      var _this$props6 = _this.props,
+        identifier = _this$props6.identifier,
+        mediaClient = _this$props6.mediaClient,
+        dimensions = _this$props6.dimensions,
+        selected = _this$props6.selected,
+        testId = _this$props6.testId,
+        originalDimensions = _this$props6.originalDimensions,
+        onFullscreenChange = _this$props6.onFullscreenChange;
       var _this$state = _this.state,
         shouldAutoplay = _this$state.shouldAutoplay,
         cardPreview = _this$state.cardPreview;
@@ -452,12 +501,12 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "renderMediaViewer", function () {
       var mediaViewerSelectedItem = _this.state.mediaViewerSelectedItem;
-      var _this$props8 = _this.props,
-        mediaClient = _this$props8.mediaClient,
-        identifier = _this$props8.identifier,
-        mediaViewerDataSource = _this$props8.mediaViewerDataSource,
-        contextId = _this$props8.contextId,
-        featureFlags = _this$props8.featureFlags;
+      var _this$props7 = _this.props,
+        mediaClient = _this$props7.mediaClient,
+        identifier = _this$props7.identifier,
+        mediaViewerDataSource = _this$props7.mediaViewerDataSource,
+        contextId = _this$props7.contextId,
+        featureFlags = _this$props7.featureFlags;
       if (!mediaViewerSelectedItem) {
         return;
       }
@@ -479,23 +528,23 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       var withCallbacks = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
       var cardStatusOverride = arguments.length > 1 ? arguments[1] : undefined;
       var izLazyOverride = arguments.length > 2 ? arguments[2] : undefined;
-      var _this$props9 = _this.props,
-        identifier = _this$props9.identifier,
-        isLazy = _this$props9.isLazy,
-        appearance = _this$props9.appearance,
-        resizeMode = _this$props9.resizeMode,
-        dimensions = _this$props9.dimensions,
-        selectable = _this$props9.selectable,
-        selected = _this$props9.selected,
-        disableOverlay = _this$props9.disableOverlay,
-        alt = _this$props9.alt,
-        testId = _this$props9.testId,
-        featureFlags = _this$props9.featureFlags,
-        titleBoxBgColor = _this$props9.titleBoxBgColor,
-        titleBoxIcon = _this$props9.titleBoxIcon,
-        ssr = _this$props9.ssr,
-        useInlinePlayer = _this$props9.useInlinePlayer,
-        shouldOpenMediaViewer = _this$props9.shouldOpenMediaViewer;
+      var _this$props8 = _this.props,
+        identifier = _this$props8.identifier,
+        isLazy = _this$props8.isLazy,
+        appearance = _this$props8.appearance,
+        resizeMode = _this$props8.resizeMode,
+        dimensions = _this$props8.dimensions,
+        selectable = _this$props8.selectable,
+        selected = _this$props8.selected,
+        disableOverlay = _this$props8.disableOverlay,
+        alt = _this$props8.alt,
+        testId = _this$props8.testId,
+        featureFlags = _this$props8.featureFlags,
+        titleBoxBgColor = _this$props8.titleBoxBgColor,
+        titleBoxIcon = _this$props8.titleBoxIcon,
+        ssr = _this$props8.ssr,
+        useInlinePlayer = _this$props8.useInlinePlayer,
+        shouldOpenMediaViewer = _this$props8.shouldOpenMediaViewer;
       var mediaItemType = identifier.mediaItemType;
       var _this$state2 = _this.state,
         status = _this$state2.status,
@@ -555,9 +604,9 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "storeSSRData", function () {
       var _this$ssrReliability$;
-      var _this$props10 = _this.props,
-        ssr = _this$props10.ssr,
-        identifier = _this$props10.identifier;
+      var _this$props9 = _this.props,
+        ssr = _this$props9.ssr,
+        identifier = _this$props9.identifier;
       var _this$state$cardPrevi = _this.state.cardPreview;
       _this$state$cardPrevi = _this$state$cardPrevi === void 0 ? {} : _this$state$cardPrevi;
       var dataURI = _this$state$cardPrevi.dataURI;
@@ -600,37 +649,17 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     var _status = 'loading';
     var _cardPreview;
     var _error;
-    var _this$props11 = _this.props,
-      _identifier = _this$props11.identifier,
-      _resizeMode = _this$props11.resizeMode,
-      _ssr = _this$props11.ssr,
-      _mediaClient = _this$props11.mediaClient;
+    var _this$props10 = _this.props,
+      _identifier = _this$props10.identifier,
+      _resizeMode = _this$props10.resizeMode,
+      _ssr = _this$props10.ssr,
+      _mediaClient = _this$props10.mediaClient;
     if (isFileIdentifier(_identifier)) {
       var id = _identifier.id;
       var fileImageMode = imageResizeModeToFileImageMode(_resizeMode);
       _cardPreview = getCardPreviewFromCache(id, fileImageMode);
       if (!_cardPreview && _ssr) {
-        var _this$ssrData, _this$ssrData2;
-        _this.ssrData = getSSRData(_identifier);
-        if ((_this$ssrData = _this.ssrData) !== null && _this$ssrData !== void 0 && _this$ssrData.error) {
-          _this.ssrReliability.server = _objectSpread({
-            status: 'fail'
-          }, _this.ssrData.error);
-        }
-        if (!((_this$ssrData2 = _this.ssrData) !== null && _this$ssrData2 !== void 0 && _this$ssrData2.dataURI)) {
-          try {
-            _cardPreview = getSSRCardPreview(_ssr, _mediaClient, _identifier.id, _this.getImageURLParams(_identifier), _this.getMediaBlobUrlAttrs(_identifier));
-          } catch (e) {
-            _this.ssrReliability[_ssr] = _objectSpread({
-              status: 'fail'
-            }, extractErrorInfo(e));
-          }
-        } else {
-          _cardPreview = {
-            dataURI: _this.ssrData.dataURI,
-            source: 'ssr-data'
-          };
-        }
+        _cardPreview = _this.getSSRPreview(_ssr, _identifier, _mediaClient);
       }
     } else if (isExternalImageIdentifier(_identifier)) {
       _this.fireCommencedEvent();
@@ -657,11 +686,37 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       cardRef: null,
       isBannedLocalPreview: false,
       previewDidRender: false,
-      error: _error
+      error: _error,
+      wasResolvedUpfrontPreview: false
     };
     return _this;
   }
   _createClass(CardBase, [{
+    key: "getSSRPreview",
+    value: function getSSRPreview(ssr, identifier, mediaClient) {
+      var _this$ssrData, _this$ssrData2;
+      this.ssrData = getSSRData(identifier);
+      if ((_this$ssrData = this.ssrData) !== null && _this$ssrData !== void 0 && _this$ssrData.error) {
+        this.ssrReliability.server = _objectSpread({
+          status: 'fail'
+        }, this.ssrData.error);
+      }
+      if (!((_this$ssrData2 = this.ssrData) !== null && _this$ssrData2 !== void 0 && _this$ssrData2.dataURI)) {
+        try {
+          return getSSRCardPreview(ssr, mediaClient, identifier.id, this.getImageURLParams(identifier), this.getMediaBlobUrlAttrs(identifier));
+        } catch (e) {
+          this.ssrReliability[ssr] = _objectSpread({
+            status: 'fail'
+          }, extractErrorInfo(e));
+        }
+      } else {
+        return {
+          dataURI: this.ssrData.dataURI,
+          source: 'ssr-data'
+        };
+      }
+    }
+  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _getDocument;
@@ -669,12 +724,15 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       var _this$state3 = this.state,
         isCardVisible = _this$state3.isCardVisible,
         cardPreview = _this$state3.cardPreview;
-      var _this$props12 = this.props,
-        identifier = _this$props12.identifier,
-        ssr = _this$props12.ssr,
-        dimensions = _this$props12.dimensions;
+      var _this$props11 = this.props,
+        identifier = _this$props11.identifier,
+        ssr = _this$props11.ssr,
+        dimensions = _this$props11.dimensions;
       if (isCardVisible && isFileIdentifier(identifier)) {
         this.updateStateForIdentifier(identifier);
+        if (!cardPreview) {
+          this.resolveUpfrontPreview(identifier);
+        }
       }
       if (isCardVisible && !!ssr && !!cardPreview && isFileIdentifier(identifier)) {
         var _this$ssrData3;
@@ -701,15 +759,17 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       var prevMediaClient = prevProps.mediaClient,
         prevIdentifier = prevProps.identifier,
         prevDimensions = prevProps.dimensions;
-      var prevIsCardVisible = prevState.isCardVisible;
-      var _this$props13 = this.props,
-        mediaClient = _this$props13.mediaClient,
-        identifier = _this$props13.identifier,
-        dimensions = _this$props13.dimensions,
-        featureFlags = _this$props13.featureFlags,
-        useInlinePlayer = _this$props13.useInlinePlayer,
-        disableOverlay = _this$props13.disableOverlay,
-        resizeMode = _this$props13.resizeMode;
+      var prevIsCardVisible = prevState.isCardVisible,
+        prevCardPreview = prevState.cardPreview;
+      var _this$props12 = this.props,
+        mediaClient = _this$props12.mediaClient,
+        identifier = _this$props12.identifier,
+        dimensions = _this$props12.dimensions,
+        featureFlags = _this$props12.featureFlags,
+        useInlinePlayer = _this$props12.useInlinePlayer,
+        disableOverlay = _this$props12.disableOverlay,
+        resizeMode = _this$props12.resizeMode,
+        ssr = _this$props12.ssr;
       var _this$state4 = this.state,
         isCardVisible = _this$state4.isCardVisible,
         cardPreview = _this$state4.cardPreview,
@@ -717,9 +777,23 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         fileState = _this$state4.fileState,
         isBannedLocalPreview = _this$state4.isBannedLocalPreview,
         previewDidRender = _this$state4.previewDidRender,
-        isPlayingFile = _this$state4.isPlayingFile;
+        isPlayingFile = _this$state4.isPlayingFile,
+        wasResolvedUpfrontPreview = _this$state4.wasResolvedUpfrontPreview;
       var isDifferent = isDifferentIdentifier(prevIdentifier, identifier);
+      /**
+       * Variable turnedVisible should only be true when media card
+       * was invisible in the previous state and is visible in the current one
+       *
+       * prevIsCardVisible | isCardVisible |  turnedVisible
+       * ----------------------------------------------------
+       *       false       |    false      |      false
+       *       false       |    true       |      true
+       *       true        |    true       |      false
+       *       true        |    false      |      false       (unreachable case)
+       * ----------------------------------------------------
+       */
       var turnedVisible = !prevIsCardVisible && isCardVisible;
+      var hadSSRCardPreview = !!prevCardPreview && isSSRClientPreview(prevCardPreview) && !cardPreview;
       var isNewMediaClient = prevMediaClient !== mediaClient;
       var fileImageMode = imageResizeModeToFileImageMode(resizeMode);
       this.updateFileStateFlag(fileState);
@@ -745,7 +819,12 @@ export var CardBase = /*#__PURE__*/function (_Component) {
           this.fireScreenEvent();
         }
       }
-      if (isFileIdentifier(identifier) && fileState && shouldResolvePreview({
+      if (isFileIdentifier(identifier) && (turnedVisible || ssr === 'client' && hadSSRCardPreview) && !cardPreview && !wasResolvedUpfrontPreview) {
+        // This is a one-off call, only meant to happen once in the component's lifecycle. Mainly when either:
+        // - turnedVisible = true
+        // - ssr = client and has no preview (the dataURI failed to load in the previous state, most likely because of an initial auth issue)
+        this.resolveUpfrontPreview(identifier);
+      } else if (isFileIdentifier(identifier) && fileState && shouldResolvePreview({
         status: status,
         fileState: fileState,
         prevDimensions: prevDimensions,
@@ -754,7 +833,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         fileImageMode: fileImageMode,
         featureFlags: featureFlags,
         hasCardPreview: !!cardPreview,
-        isBannedLocalPreview: isBannedLocalPreview
+        isBannedLocalPreview: isBannedLocalPreview,
+        wasResolvedUpfrontPreview: wasResolvedUpfrontPreview
       })) {
         this.resolvePreview(identifier, fileState);
       }
@@ -839,8 +919,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     key: "requestedDimensions",
     get: function get() {
       var dimensions = this.props.dimensions;
-      var _ref4 = this.state || {},
-        element = _ref4.cardRef;
+      var _ref5 = this.state || {},
+        element = _ref5.cardRef;
       return getRequestedDimensions({
         dimensions: dimensions,
         element: element
@@ -885,11 +965,11 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     key: "actions",
     get: function get() {
       var _this3 = this;
-      var _this$props14 = this.props,
-        _this$props14$actions = _this$props14.actions,
-        actions = _this$props14$actions === void 0 ? [] : _this$props14$actions,
-        identifier = _this$props14.identifier,
-        shouldEnableDownloadButton = _this$props14.shouldEnableDownloadButton;
+      var _this$props13 = this.props,
+        _this$props13$actions = _this$props13.actions,
+        actions = _this$props13$actions === void 0 ? [] : _this$props13$actions,
+        identifier = _this$props13.identifier,
+        shouldEnableDownloadButton = _this$props13.shouldEnableDownloadButton;
       var status = this.state.status;
       var metadata = this.metadata;
       if (isFileIdentifier(identifier) && (status === 'failed-processing' || shouldEnableDownloadButton)) {

package/dist/esm/card/getCardPreview/index.js

@@ -170,10 +170,12 @@ export var shouldResolvePreview = function shouldResolvePreview(_ref3) {
     fileImageMode = _ref3.fileImageMode,
     hasCardPreview = _ref3.hasCardPreview,
     isBannedLocalPreview = _ref3.isBannedLocalPreview,
-    featureFlags = _ref3.featureFlags;
+    featureFlags = _ref3.featureFlags,
+    wasResolvedUpfrontPreview = _ref3.wasResolvedUpfrontPreview;
   var statusIsPreviewable = isPreviewableStatus(status, extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags));
   var dimensionsAreBigger = isBigger(prevDimensions, dimensions);
-  return statusIsPreviewable && (!hasCardPreview || dimensionsAreBigger);
+  // We should not fetch the preview if the upfront one hasn't been resolved yet (it could be resolving now), even if there are new dimensions.
+  return wasResolvedUpfrontPreview && statusIsPreviewable && (!hasCardPreview || dimensionsAreBigger);
 };
 export var getSSRCardPreview = function getSSRCardPreview(ssr, mediaClient, id, params, mediaBlobUrlAttrs) {
   var dataURI;

package/dist/esm/card/media-card-analytics-error-boundary.js

@@ -83,7 +83,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.5.2";
+var packageVersion = "74.6.1";
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/esm/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -70,7 +70,7 @@ var WrappedMediaInlineAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Com
 }(React.Component);
 _defineProperty(WrappedMediaInlineAnalyticsErrorBoundary, "displayName", 'MediaInlineAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.5.2";
+var packageVersion = "74.6.1";
 var MediaInlineAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/esm/utils/ufoExperiences.js

@@ -6,7 +6,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata, LOGGED_FEATURE_FLAG_KE
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.5.2";
+var packageVersion = "74.6.1";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "74.5.2",
+	"version": "74.6.1",
 	"sideEffects": false
 }

package/dist/types/card/card.d.ts

@@ -16,6 +16,7 @@ export declare class CardBase extends Component<CardBaseProps, CardState> {
     private traceContext;
     static defaultProps: Partial<CardProps>;
     constructor(props: CardBaseProps);
+    private getSSRPreview;
     componentDidMount(): void;
     componentDidUpdate(prevProps: CardProps, prevState: CardState): void;
     componentWillUnmount(): void;
@@ -25,6 +26,8 @@ export declare class CardBase extends Component<CardBaseProps, CardState> {
     private getCardPreviewParams;
     private setCacheSSRPreview;
     private refetchSSRPreview;
+    private resolveUpfrontPreview;
+    private fetchAndCacheRemotePreview;
     private resolvePreview;
     updateFileStateFlag(fileState?: FileState): void;
     subscribeInternalFile(identifier: FileIdentifier): void;

package/dist/types/card/getCardPreview/index.d.ts

@@ -38,7 +38,7 @@ export declare type CardPreviewParams = {
  * hence the use of the optional callback onLocalPreviewError
  */
 export declare const getCardPreview: ({ mediaClient, id, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, createAnalyticsEvent, featureFlags, traceContext, }: CardPreviewParams) => Promise<CardPreview>;
-export declare const shouldResolvePreview: ({ status, fileState, prevDimensions, dimensions, identifier, fileImageMode, hasCardPreview, isBannedLocalPreview, featureFlags, }: {
+export declare const shouldResolvePreview: ({ status, fileState, prevDimensions, dimensions, identifier, fileImageMode, hasCardPreview, isBannedLocalPreview, featureFlags, wasResolvedUpfrontPreview, }: {
     status: CardStatus;
     fileState: FileState;
     prevDimensions?: CardDimensions | undefined;
@@ -48,6 +48,7 @@ export declare const shouldResolvePreview: ({ status, fileState, prevDimensions,
     hasCardPreview: boolean;
     isBannedLocalPreview: boolean;
     featureFlags?: MediaFeatureFlags | undefined;
+    wasResolvedUpfrontPreview: boolean;
 }) => boolean;
 export declare const getSSRCardPreview: (ssr: SSR, mediaClient: MediaClient, id: string, params: MediaStoreGetFileImageParams, mediaBlobUrlAttrs?: MediaBlobUrlAttrs | undefined) => CardPreview;
 export declare const isLocalPreview: (preview: CardPreview) => boolean;

package/dist/types/types.d.ts

@@ -96,4 +96,5 @@ export interface CardState {
     cardRef: HTMLDivElement | null;
     isBannedLocalPreview: boolean;
     previewDidRender: boolean;
+    wasResolvedUpfrontPreview: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "74.5.2",
+  "version": "74.6.1",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,8 +28,8 @@
     }
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/dropdown-menu": "^11.5.0",
+    "@atlaskit/analytics-next": "^9.0.0",
+    "@atlaskit/dropdown-menu": "^11.6.0",
     "@atlaskit/editor-shared-styles": "^2.3.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/media-client": "^20.0.0",
@@ -38,7 +38,7 @@
     "@atlaskit/media-viewer": "^47.4.0",
     "@atlaskit/spinner": "^15.3.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^1.0.0",
+    "@atlaskit/tokens": "^1.2.0",
     "@atlaskit/tooltip": "^17.6.0",
     "@atlaskit/ufo": "^0.1.0",
     "@babel/runtime": "^7.0.0",
@@ -89,7 +89,9 @@
   },
   "techstack": {
     "@repo/internal": {
-      "theming": "tokens"
+      "design-tokens": [
+        "color"
+      ]
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"

package/report.api.md

@@ -185,6 +185,8 @@ export interface CardState {
   shouldAutoplay?: boolean;
   // (undocumented)
   status: CardStatus;
+  // (undocumented)
+  wasResolvedUpfrontPreview: boolean;
 }
 
 // @public (undocumented)