@atlaskit/media-card 74.5.2 → 74.6.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/media-card
 
+## 74.6.1
+
+### Patch Changes
+
+- [`489f7b32ff6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/489f7b32ff6) - Fixed broken SSR error handling logic when the preview url fails to load
+
+## 74.6.0
+
+### Minor Changes
+
+- [`dbd7cd19fe6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dbd7cd19fe6) - Media Card now fetch the preview immediately after mounting, without waiting for file state to be ready
+
+### Patch Changes
+
+- [`337bec022b4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/337bec022b4) - Fixes logic for upfront preview
+- Updated dependencies
+
 ## 74.5.2
 
 ### Patch Changes

package/dist/cjs/card/card.js

@@ -47,7 +47,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.5.2";
+var packageVersion = "74.6.1";
 var CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
   var _super = _createSuper(CardBase);
@@ -135,11 +135,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
-      (0, _getCardPreview.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
@@ -148,60 +144,113 @@ var CardBase = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "refetchSSRPreview", /*#__PURE__*/function () {
       var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(identifier) {
-        var _this$props4, mediaClient, _this$props4$dimensio, dimensions, cardPreview, wrappedError;
+        var cardPreview, wrappedError;
         return _regenerator.default.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 (0, _getCardPreview.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 = (0, _errors.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);
       };
     }());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resolvePreview", /*#__PURE__*/function () {
-      var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(identifier, fileState) {
-        var params, cardPreview, wrappedError;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resolveUpfrontPreview", /*#__PURE__*/function () {
+      var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(identifier) {
+        var requestedDimensions, cardPreview, currentDimensions, areValidRequestedDimensions;
         return _regenerator.default.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 (0, _getCardPreview.getCardPreview)(params);
+                return _this.fetchAndCacheRemotePreview(identifier);
               case 4:
                 cardPreview = _context2.sent;
+                currentDimensions = _this.props.dimensions;
+                areValidRequestedDimensions = !(0, _dimensionComparer.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);
+      };
+    }());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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 (0, _getCardPreview.fetchAndCacheRemotePreview)(mediaClient, identifier.id, dimensions, _this.getImageURLParams(identifier), _this.getMediaBlobUrlAttrs(identifier));
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resolvePreview", /*#__PURE__*/function () {
+      var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(identifier, fileState) {
+        var params, cardPreview, wrappedError;
+        return _regenerator.default.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 (0, _getCardPreview.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 = (0, _errors.ensureMediaCardError)('preview-fetch', _context2.t0); //  If remote preview fails, we set status 'error'
+                _context3.prev = 8;
+                _context3.t0 = _context3["catch"](0);
+                wrappedError = (0, _errors.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'
@@ -218,13 +267,13 @@ 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);
       };
     }());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getPerformanceAttributes", function () {
@@ -276,9 +325,9 @@ 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 = (0, _mediaClient2.imageResizeModeToFileImageMode)(resizeMode);
         (0, _mediaClient2.isFileIdentifier)(identifier) && (0, _getCardPreview.removeCardPreviewFromCache)(identifier.id, fileImageMode);
         _this.safeSetState(updateState);
@@ -357,10 +406,10 @@ var CardBase = /*#__PURE__*/function (_Component) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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 = (0, _assertThisInitialized2.default)(_this),
         metadata = _assertThisInitialize2.metadata;
@@ -406,14 +455,14 @@ var CardBase = /*#__PURE__*/function (_Component) {
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
@@ -460,12 +509,12 @@ var CardBase = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
       }
@@ -487,23 +536,23 @@ 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,
@@ -563,9 +612,9 @@ var CardBase = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
@@ -608,37 +657,17 @@ 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 ((0, _mediaClient2.isFileIdentifier)(_identifier)) {
       var id = _identifier.id;
       var fileImageMode = (0, _mediaClient2.imageResizeModeToFileImageMode)(_resizeMode);
       _cardPreview = (0, _getCardPreview.getCardPreviewFromCache)(id, fileImageMode);
       if (!_cardPreview && _ssr) {
-        var _this$ssrData, _this$ssrData2;
-        _this.ssrData = (0, _globalScope.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 = (0, _getCardPreview.getSSRCardPreview)(_ssr, _mediaClient, _identifier.id, _this.getImageURLParams(_identifier), _this.getMediaBlobUrlAttrs(_identifier));
-          } catch (e) {
-            _this.ssrReliability[_ssr] = _objectSpread({
-              status: 'fail'
-            }, (0, _analytics.extractErrorInfo)(e));
-          }
-        } else {
-          _cardPreview = {
-            dataURI: _this.ssrData.dataURI,
-            source: 'ssr-data'
-          };
-        }
+        _cardPreview = _this.getSSRPreview(_ssr, _identifier, _mediaClient);
       }
     } else if ((0, _mediaClient2.isExternalImageIdentifier)(_identifier)) {
       _this.fireCommencedEvent();
@@ -665,11 +694,37 @@ var CardBase = /*#__PURE__*/function (_Component) {
       cardRef: null,
       isBannedLocalPreview: false,
       previewDidRender: false,
-      error: _error
+      error: _error,
+      wasResolvedUpfrontPreview: false
     };
     return _this;
   }
   (0, _createClass2.default)(CardBase, [{
+    key: "getSSRPreview",
+    value: function getSSRPreview(ssr, identifier, mediaClient) {
+      var _this$ssrData, _this$ssrData2;
+      this.ssrData = (0, _globalScope.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 (0, _getCardPreview.getSSRCardPreview)(ssr, mediaClient, identifier.id, this.getImageURLParams(identifier), this.getMediaBlobUrlAttrs(identifier));
+        } catch (e) {
+          this.ssrReliability[ssr] = _objectSpread({
+            status: 'fail'
+          }, (0, _analytics.extractErrorInfo)(e));
+        }
+      } else {
+        return {
+          dataURI: this.ssrData.dataURI,
+          source: 'ssr-data'
+        };
+      }
+    }
+  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _getDocument;
@@ -677,12 +732,15 @@ 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 && (0, _mediaClient2.isFileIdentifier)(identifier)) {
         this.updateStateForIdentifier(identifier);
+        if (!cardPreview) {
+          this.resolveUpfrontPreview(identifier);
+        }
       }
       if (isCardVisible && !!ssr && !!cardPreview && (0, _mediaClient2.isFileIdentifier)(identifier)) {
         var _this$ssrData3;
@@ -709,15 +767,17 @@ 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,
@@ -725,9 +785,23 @@ 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 = (0, _mediaClient2.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 && (0, _getCardPreview.isSSRClientPreview)(prevCardPreview) && !cardPreview;
       var isNewMediaClient = prevMediaClient !== mediaClient;
       var fileImageMode = (0, _mediaClient2.imageResizeModeToFileImageMode)(resizeMode);
       this.updateFileStateFlag(fileState);
@@ -753,7 +827,12 @@ var CardBase = /*#__PURE__*/function (_Component) {
           this.fireScreenEvent();
         }
       }
-      if ((0, _mediaClient2.isFileIdentifier)(identifier) && fileState && (0, _getCardPreview.shouldResolvePreview)({
+      if ((0, _mediaClient2.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 ((0, _mediaClient2.isFileIdentifier)(identifier) && fileState && (0, _getCardPreview.shouldResolvePreview)({
         status: status,
         fileState: fileState,
         prevDimensions: prevDimensions,
@@ -762,7 +841,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
         fileImageMode: fileImageMode,
         featureFlags: featureFlags,
         hasCardPreview: !!cardPreview,
-        isBannedLocalPreview: isBannedLocalPreview
+        isBannedLocalPreview: isBannedLocalPreview,
+        wasResolvedUpfrontPreview: wasResolvedUpfrontPreview
       })) {
         this.resolvePreview(identifier, fileState);
       }
@@ -847,8 +927,8 @@ 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 (0, _getDataURIDimension.getRequestedDimensions)({
         dimensions: dimensions,
         element: element
@@ -893,11 +973,11 @@ 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 ((0, _mediaClient2.isFileIdentifier)(identifier) && (status === 'failed-processing' || shouldEnableDownloadButton)) {

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

@@ -205,10 +205,12 @@ 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 = (0, _filePreviewStatus.isPreviewableStatus)(status, (0, _filePreviewStatus.extractFilePreviewStatus)(fileState, isBannedLocalPreview, featureFlags));
   var dimensionsAreBigger = (0, _dimensionComparer.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);
 };
 exports.shouldResolvePreview = shouldResolvePreview;
 var getSSRCardPreview = function getSSRCardPreview(ssr, mediaClient, id, params, mediaBlobUrlAttrs) {

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

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

package/dist/cjs/inline/mediaInlineAnalyticsErrorBoundary.js

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

package/dist/cjs/utils/ufoExperiences.js

@@ -13,7 +13,7 @@ var _mediaClient = require("@atlaskit/media-client");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 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/cjs/version.json

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