@atlaskit/media-card 74.5.1 → 74.6.0

package/dist/cjs/card/card.js

@@ -1,110 +1,66 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CardBase = exports.Card = void 0;
-
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _analyticsNext = require("@atlaskit/analytics-next");
-
 var _mediaCommon = require("@atlaskit/media-common");
-
 var _download = _interopRequireDefault(require("@atlaskit/icon/glyph/download"));
-
 var _mediaClient2 = require("@atlaskit/media-client");
-
 var _mediaViewer = require("@atlaskit/media-viewer");
-
 var _reactIntlNext = require("react-intl-next");
-
 var _cardView = require("./cardView");
-
 var _viewportDetector = require("../utils/viewportDetector");
-
 var _getDataURIDimension = require("../utils/getDataURIDimension");
-
 var _getCardPreview = require("./getCardPreview");
-
 var _metadata = require("../utils/metadata");
-
 var _inlinePlayerLazy = require("./inlinePlayerLazy");
-
 var _analytics = require("../utils/analytics");
-
 var _errors = require("../errors");
-
 var _cardAnalytics = require("./cardAnalytics");
-
 var _document = _interopRequireDefault(require("../utils/document"));
-
 var _globalScope = require("../utils/globalScope");
-
 var _cardState = require("./cardState");
-
 var _dimensionComparer = require("../utils/dimensionComparer");
-
 var _getMediaCardCursor = require("../utils/getMediaCardCursor");
-
 var _ufoExperiences = require("../utils/ufoExperiences");
-
 var _generateUniqueId = require("../utils/generateUniqueId");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 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; }
-
 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.1";
-
+var packageVersion = "74.6.0";
 var CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
-
   var _super = _createSuper(CardBase);
-
   // An internalOccurrenceKey is a randomly generated value to differentiate various instances
   // of Cards regardless of whether it shares the same file (either internal or external)
+
   // We initialise timeElapsedTillCommenced
   // to avoid extra branching on a possibly undefined value.
+
   // Generate unique traceId for file
+
   function CardBase(props) {
     var _this;
-
     (0, _classCallCheck2.default)(this, CardBase);
     _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "internalOccurrenceKey", (0, _generateUniqueId.generateUniqueId)());
@@ -136,17 +92,15 @@ var CardBase = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getMediaBlobUrlAttrs", function (identifier, fileState) {
       var id = identifier.id,
-          collection = identifier.collectionName;
+        collection = identifier.collectionName;
       var _this$props = _this.props,
-          originalDimensions = _this$props.originalDimensions,
-          contextId = _this$props.contextId,
-          alt = _this$props.alt;
-
+        originalDimensions = _this$props.originalDimensions,
+        contextId = _this$props.contextId,
+        alt = _this$props.alt;
       var _getFileDetails = (0, _metadata.getFileDetails)(identifier, fileState),
-          mimeType = _getFileDetails.mimeType,
-          name = _getFileDetails.name,
-          size = _getFileDetails.size;
-
+        mimeType = _getFileDetails.mimeType,
+        name = _getFileDetails.name,
+        size = _getFileDetails.size;
       return contextId ? _objectSpread(_objectSpread({
         id: id,
         collection: collection,
@@ -162,10 +116,10 @@ var CardBase = /*#__PURE__*/function (_Component) {
       var isBannedLocalPreview = _this.state.isBannedLocalPreview;
       var id = identifier.id;
       var _this$props2 = _this.props,
-          _this$props2$dimensio = _this$props2.dimensions,
-          dimensions = _this$props2$dimensio === void 0 ? {} : _this$props2$dimensio,
-          mediaClient = _this$props2.mediaClient,
-          createAnalyticsEvent = _this$props2.createAnalyticsEvent;
+        _this$props2$dimensio = _this$props2.dimensions,
+        dimensions = _this$props2$dimensio === void 0 ? {} : _this$props2$dimensio,
+        mediaClient = _this$props2.mediaClient,
+        createAnalyticsEvent = _this$props2.createAnalyticsEvent;
       return {
         mediaClient: mediaClient,
         id: id,
@@ -181,11 +135,8 @@ 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 () {// No need to log this error.
+      _this.fetchAndCacheRemotePreview(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
@@ -193,76 +144,116 @@ 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'
-
                 if ((0, _errors.isLocalPreviewError)(wrappedError)) {
                   // This error should already been logged inside the getCardPreview. No need to log it here.
                   _this.safeSetState({
@@ -274,23 +265,20 @@ var CardBase = /*#__PURE__*/function (_Component) {
                     error: wrappedError
                   });
                 }
-
               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 () {
       var _assertThisInitialize = (0, _assertThisInitialized2.default)(_this),
-          timeElapsedTillCommenced = _assertThisInitialize.timeElapsedTillCommenced;
-
+        timeElapsedTillCommenced = _assertThisInitialize.timeElapsedTillCommenced;
       var timeElapsedTillEvent = performance.now();
       var durationSinceCommenced = timeElapsedTillCommenced && timeElapsedTillEvent - timeElapsedTillCommenced;
       return {
@@ -305,15 +293,14 @@ var CardBase = /*#__PURE__*/function (_Component) {
         var failedSSRObject = _objectSpread({
           status: 'fail'
         }, (0, _analytics.extractErrorInfo)(new _errors.ImageLoadError(cardPreview.source)));
-
         if ((0, _getCardPreview.isSSRClientPreview)(cardPreview)) {
           _this.ssrReliability.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 ((0, _getCardPreview.isSSRDataPreview)(cardPreview)) {
           _this.ssrReliability.server = failedSSRObject;
           _this.ssrReliability.client = failedSSRObject;
@@ -322,34 +309,27 @@ var CardBase = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageError", function (cardPreview) {
       _this.logSSRImageError(cardPreview);
-
-      var currentPreview = _this.state.cardPreview; // If the dataURI has been replaced, we can dismiss this error
-
+      var currentPreview = _this.state.cardPreview;
+      // If the dataURI has been replaced, we can dismiss this error
       if ((cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI) !== (currentPreview === null || currentPreview === void 0 ? void 0 : currentPreview.dataURI)) {
         return;
       }
-
       var error = new _errors.ImageLoadError(cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source);
       var isLocal = cardPreview && (0, _getCardPreview.isLocalPreview)(cardPreview);
       var isSSR = cardPreview && ((0, _getCardPreview.isSSRClientPreview)(cardPreview) || (0, _getCardPreview.isSSRDataPreview)(cardPreview));
-
       if (isLocal || isSSR) {
         var updateState = {
           cardPreview: undefined
         };
-
         if (isLocal) {
           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);
       } else {
         _this.safeSetState({
@@ -365,11 +345,11 @@ var CardBase = /*#__PURE__*/function (_Component) {
             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 ((0, _getCardPreview.isSSRDataPreview)(cardPreview) && _this.ssrReliability.server.status === 'unknown') {
           _this.ssrReliability.server = {
             status: 'success'
@@ -379,13 +359,11 @@ var CardBase = /*#__PURE__*/function (_Component) {
           };
         }
       }
-
-      var currentPreview = _this.state.cardPreview; // If the dataURI has been replaced, we can dismiss this callback
-
+      var currentPreview = _this.state.cardPreview;
+      // If the dataURI has been replaced, we can dismiss this callback
       if ((cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI) !== (currentPreview === null || currentPreview === void 0 ? void 0 : currentPreview.dataURI)) {
         return;
       }
-
       _this.safeSetState({
         previewDidRender: true
       });
@@ -420,7 +398,6 @@ var CardBase = /*#__PURE__*/function (_Component) {
       if (_this.subscription) {
         _this.subscription.unsubscribe();
       }
-
       if (_this.hasBeenMounted) {
         // TODO MEX-788: add test for "do not remove the card preview when unsubscribing".
         _this.setState({
@@ -429,23 +406,18 @@ 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;
-
+        metadata = _assertThisInitialize2.metadata;
       _this.onClick(event, analyticsEvent);
-
       if (!metadata) {
         return;
       }
-
       var isVideo = metadata && metadata.mediaType === 'video';
-
       if (useInlinePlayer && isVideo && !!cardPreview) {
         _this.setState({
           isPlayingFile: true,
@@ -453,7 +425,6 @@ var CardBase = /*#__PURE__*/function (_Component) {
         });
       } else if (shouldOpenMediaViewer) {
         var mediaViewerSelectedItem;
-
         if ((0, _mediaClient2.isFileIdentifier)(identifier)) {
           mediaViewerSelectedItem = {
             id: identifier.id,
@@ -468,7 +439,6 @@ var CardBase = /*#__PURE__*/function (_Component) {
             name: identifier.name
           };
         }
-
         _this.setState({
           mediaViewerSelectedItem: mediaViewerSelectedItem
         });
@@ -485,20 +455,18 @@ 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;
-
+        shouldAutoplay = _this$state.shouldAutoplay,
+        cardPreview = _this$state.cardPreview;
       var card = _this.renderCard(false, 'loading', false);
-
       return /*#__PURE__*/_react.default.createElement(_react.Suspense, {
         fallback: card
       }, /*#__PURE__*/_react.default.createElement(_inlinePlayerLazy.InlinePlayerLazy, {
@@ -524,7 +492,6 @@ var CardBase = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDisplayImage", function () {
       var identifier = _this.props.identifier;
       var payloadPart;
-
       if ((0, _mediaClient2.isFileIdentifier)(identifier)) {
         payloadPart = {
           fileId: identifier.id,
@@ -536,24 +503,21 @@ var CardBase = /*#__PURE__*/function (_Component) {
           isUserCollection: false
         };
       }
-
       _mediaClient2.globalMediaEventEmitter.emit('media-viewed', _objectSpread({
         viewingLevel: 'minimal'
       }, payloadPart));
     });
     (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;
       }
-
       var collectionName = (0, _mediaClient2.isFileIdentifier)(identifier) ? identifier.collectionName || '' : '';
       var dataSource = mediaViewerDataSource || {
         list: []
@@ -572,49 +536,46 @@ 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,
-          progress = _this$state2.progress,
-          cardPreview = _this$state2.cardPreview,
-          error = _this$state2.error,
-          cardRef = _this$state2.cardRef,
-          isCardVisible = _this$state2.isCardVisible;
-
+        status = _this$state2.status,
+        progress = _this$state2.progress,
+        cardPreview = _this$state2.cardPreview,
+        error = _this$state2.error,
+        cardRef = _this$state2.cardRef,
+        isCardVisible = _this$state2.isCardVisible;
       var _assertThisInitialize3 = (0, _assertThisInitialized2.default)(_this),
-          metadata = _assertThisInitialize3.metadata;
-
+        metadata = _assertThisInitialize3.metadata;
       var _assertThisInitialize4 = (0, _assertThisInitialized2.default)(_this),
-          onCardViewClick = _assertThisInitialize4.onCardViewClick,
-          onDisplayImage = _assertThisInitialize4.onDisplayImage,
-          actions = _assertThisInitialize4.actions,
-          onMouseEnter = _assertThisInitialize4.onMouseEnter;
+        onCardViewClick = _assertThisInitialize4.onCardViewClick,
+        onDisplayImage = _assertThisInitialize4.onDisplayImage,
+        actions = _assertThisInitialize4.actions,
+        onMouseEnter = _assertThisInitialize4.onMouseEnter;
+      var isLazyWithOverride = izLazyOverride === undefined ? isLazy : izLazyOverride;
 
-      var isLazyWithOverride = izLazyOverride === undefined ? isLazy : izLazyOverride; // Card can be artificially turned visible before entering the viewport
+      // Card can be artificially turned visible before entering the viewport
       // For example, when we have the image in cache
-
-      var nativeLazyLoad = isLazyWithOverride && !isCardVisible; // Force Media Image to always display img for SSR
-
+      var nativeLazyLoad = isLazyWithOverride && !isCardVisible;
+      // Force Media Image to always display img for SSR
       var forceSyncDisplay = !!ssr;
       var mediaCardCursor = (0, _getMediaCardCursor.getMediaCardCursor)(!!useInlinePlayer, !!shouldOpenMediaViewer, status === 'error' || status === 'failed-processing', !!_this.state.cardPreview, metadata.mediaType);
-
       var card = /*#__PURE__*/_react.default.createElement(_cardView.CardView, {
         status: cardStatusOverride || status,
         error: error,
@@ -644,7 +605,6 @@ var CardBase = /*#__PURE__*/function (_Component) {
         forceSyncDisplay: forceSyncDisplay,
         mediaCardCursor: mediaCardCursor
       });
-
       return isLazyWithOverride ? /*#__PURE__*/_react.default.createElement(_viewportDetector.ViewportDetector, {
         cardEl: cardRef,
         onVisible: _this.onCardInViewport
@@ -652,10 +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;
@@ -673,10 +632,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClick", function (event, analyticsEvent) {
       var onClick = _this.props.onClick;
-
       var _assertThisInitialize5 = (0, _assertThisInitialized2.default)(_this),
-          metadata = _assertThisInitialize5.metadata;
-
+        metadata = _assertThisInitialize5.metadata;
       if (onClick) {
         var cardEvent = {
           event: event,
@@ -687,10 +644,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseEnter", function (event) {
       var onMouseEnter = _this.props.onMouseEnter;
-
       var _assertThisInitialize6 = (0, _assertThisInitialized2.default)(_this),
-          metadata = _assertThisInitialize6.metadata;
-
+        metadata = _assertThisInitialize6.metadata;
       if (onMouseEnter) {
         var cardEvent = {
           event: event,
@@ -700,51 +655,22 @@ 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();
-
       _status = 'loading-preview';
       var dataURI = _identifier.dataURI;
       _cardPreview = {
@@ -752,14 +678,13 @@ var CardBase = /*#__PURE__*/function (_Component) {
         orientation: 1,
         source: 'external'
       };
-    } // If cardPreview is available from local cache or external, `isCardVisible`
+    }
+
+    // If cardPreview is available from local cache or external, `isCardVisible`
     // should be true to avoid flickers during re-mount of the component
     // should not be visible for SSR preview, otherwise we'll fire the metadata fetch from
     // outside the viewport
-
-
     var _isCardVisible = !_this.props.isLazy || !!_cardPreview && !(0, _getCardPreview.isSSRPreview)(_cardPreview);
-
     _this.state = {
       status: _status,
       isCardVisible: _isCardVisible,
@@ -769,80 +694,114 @@ 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;
-
       this.hasBeenMounted = true;
       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;
-
+        isCardVisible = _this$state3.isCardVisible,
+        cardPreview = _this$state3.cardPreview;
+      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;
-
         if ((0, _getCardPreview.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,
           this.setCacheSSRPreview(identifier);
         }
-
         if ((0, _getCardPreview.isSSRDataPreview)(cardPreview) && (0, _dimensionComparer.isBigger)((_this$ssrData3 = this.ssrData) === null || _this$ssrData3 === void 0 ? void 0 : _this$ssrData3.dimensions, dimensions)) {
           // If dimensions from Server have changed and are bigger,
           // we need to refetch
           this.refetchSSRPreview(identifier);
         }
-      } // we add a listener for each of the cards on the page
+      }
+      // we add a listener for each of the cards on the page
       // and then check if the triggered listener is from the card
       // that contains a div in current window.getSelection()
       // won't work in IE11
-
-
       (_getDocument = (0, _document.default)()) === null || _getDocument === void 0 ? void 0 : _getDocument.addEventListener('copy', this.fireCopiedEvent);
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       var prevMediaClient = prevProps.mediaClient,
-          prevIdentifier = prevProps.identifier,
-          prevDimensions = prevProps.dimensions;
+        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 _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;
       var _this$state4 = this.state,
-          isCardVisible = _this$state4.isCardVisible,
-          cardPreview = _this$state4.cardPreview,
-          status = _this$state4.status,
-          fileState = _this$state4.fileState,
-          isBannedLocalPreview = _this$state4.isBannedLocalPreview,
-          previewDidRender = _this$state4.previewDidRender,
-          isPlayingFile = _this$state4.isPlayingFile;
+        isCardVisible = _this$state4.isCardVisible,
+        cardPreview = _this$state4.cardPreview,
+        status = _this$state4.status,
+        fileState = _this$state4.fileState,
+        isBannedLocalPreview = _this$state4.isBannedLocalPreview,
+        previewDidRender = _this$state4.previewDidRender,
+        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 isNewMediaClient = prevMediaClient !== mediaClient;
       var fileImageMode = (0, _mediaClient2.imageResizeModeToFileImageMode)(resizeMode);
       this.updateFileStateFlag(fileState);
-
       if ((0, _mediaClient2.isExternalImageIdentifier)(identifier) && isDifferent) {
         this.fireCommencedEvent();
         var dataURI = identifier.dataURI;
@@ -856,20 +815,19 @@ var CardBase = /*#__PURE__*/function (_Component) {
           isCardVisible: true
         });
       }
-
       if ((0, _mediaClient2.isFileIdentifier)(identifier) && (turnedVisible || !!this.subscription && (isNewMediaClient || isDifferent))) {
         this.updateStateForIdentifier(identifier);
       }
-
       if (this.state.status !== prevState.status) {
         this.fireOperationalEvent();
-
         if (this.state.status === 'complete' || this.fileAttributes.fileMediatype === 'video' && !!cardPreview && this.state.status === 'processing') {
           this.fireScreenEvent();
         }
       }
-
-      if ((0, _mediaClient2.isFileIdentifier)(identifier) && fileState && (0, _getCardPreview.shouldResolvePreview)({
+      if ((0, _mediaClient2.isFileIdentifier)(identifier) && turnedVisible && !cardPreview && !wasResolvedUpfrontPreview) {
+        // This is a one-off call, only meant to happen when turnedVisible = true (only once in the component's lifecycle)
+        this.resolveUpfrontPreview(identifier);
+      } else if ((0, _mediaClient2.isFileIdentifier)(identifier) && fileState && (0, _getCardPreview.shouldResolvePreview)({
         status: status,
         fileState: fileState,
         prevDimensions: prevDimensions,
@@ -878,28 +836,26 @@ var CardBase = /*#__PURE__*/function (_Component) {
         fileImageMode: fileImageMode,
         featureFlags: featureFlags,
         hasCardPreview: !!cardPreview,
-        isBannedLocalPreview: isBannedLocalPreview
+        isBannedLocalPreview: isBannedLocalPreview,
+        wasResolvedUpfrontPreview: wasResolvedUpfrontPreview
       })) {
         this.resolvePreview(identifier, fileState);
       }
-
       if (turnedVisible && this.props.ssr && !!cardPreview && (0, _getCardPreview.isSSRClientPreview)(cardPreview) && (0, _mediaClient2.isFileIdentifier)(identifier)) {
         // Since the SSR preview brings the token in the query params,
         // We need to fetch the remote preview to be able to cache it,
         this.setCacheSSRPreview(identifier);
       }
-
-      if (previewDidRender && // We should't complete if status is uploading
+      if (previewDidRender &&
+      // We should't complete if status is uploading
       ['loading-preview', 'processing'].includes(status)) {
         this.safeSetState({
           status: 'complete'
         });
         this.unsubscribe();
       }
-
       var isVideo = this.fileAttributes.fileMediatype === 'video';
       var videoAvailableToPlay = fileState && (0, _mediaClient2.isProcessedFileState)(fileState);
-
       if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && videoAvailableToPlay && (0, _mediaCommon.getMediaFeatureFlag)('timestampOnVideo', this.props.featureFlags)) {
         this.setState({
           isPlayingFile: true
@@ -910,7 +866,6 @@ var CardBase = /*#__PURE__*/function (_Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       var _getDocument2;
-
       this.hasBeenMounted = false;
       this.unsubscribe();
       (_getDocument2 = (0, _document.default)()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.removeEventListener('copy', this.fireCopiedEvent);
@@ -927,9 +882,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
       if (!fileState) {
         return;
       }
-
       var status = fileState.status;
-
       if (status === 'processing') {
         this.fileStateFlags.wasStatusProcessing = true;
       } else if (status === 'uploading') {
@@ -940,12 +893,11 @@ var CardBase = /*#__PURE__*/function (_Component) {
     key: "subscribeInternalFile",
     value: function subscribeInternalFile(identifier) {
       var _this2 = this;
-
       var mediaClient = this.props.mediaClient;
       var isBannedLocalPreview = this.state.isBannedLocalPreview;
       var id = identifier.id,
-          collectionName = identifier.collectionName,
-          occurrenceKey = identifier.occurrenceKey;
+        collectionName = identifier.collectionName,
+        occurrenceKey = identifier.occurrenceKey;
       this.unsubscribe();
       this.subscription = mediaClient.file.getFileState(id, {
         collectionName: collectionName,
@@ -954,13 +906,11 @@ var CardBase = /*#__PURE__*/function (_Component) {
         next: function next(fileState) {
           var featureFlags = _this2.props.featureFlags;
           var newState = (0, _cardState.getCardStateFromFileState)(fileState, isBannedLocalPreview, featureFlags);
-
           _this2.safeSetState(newState);
         },
         error: function error(e) {
           var errorReason = _this2.state.status === 'uploading' ? 'upload' : 'metadata-fetch';
           var error = new _errors.MediaCardError(errorReason, e);
-
           _this2.safeSetState({
             error: error,
             status: 'error'
@@ -972,10 +922,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
@@ -985,23 +933,21 @@ var CardBase = /*#__PURE__*/function (_Component) {
     key: "metadata",
     get: function get() {
       var _this$state5;
-
       return (0, _metadata.getFileDetails)(this.props.identifier, (_this$state5 = this.state) === null || _this$state5 === void 0 ? void 0 : _this$state5.fileState);
     }
   }, {
     key: "fileAttributes",
     get: function get() {
       var _this$state6, _this$state6$fileStat;
-
       return (0, _analytics.getFileAttributes)(this.metadata, (_this$state6 = this.state) === null || _this$state6 === void 0 ? void 0 : (_this$state6$fileStat = _this$state6.fileState) === null || _this$state6$fileStat === void 0 ? void 0 : _this$state6$fileStat.status);
     }
   }, {
     key: "fireOperationalEvent",
     value: function fireOperationalEvent() {
       var _this$state7 = this.state,
-          status = _this$state7.status,
-          error = _this$state7.error,
-          fileState = _this$state7.fileState;
+        status = _this$state7.status,
+        error = _this$state7.error,
+        fileState = _this$state7.fileState;
       var createAnalyticsEvent = this.props.createAnalyticsEvent;
       createAnalyticsEvent && (0, _cardAnalytics.fireOperationalEvent)(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error, this.traceContext, fileState === null || fileState === void 0 ? void 0 : fileState.metadataTraceContext);
       (0, _ufoExperiences.completeUfoExperience)(this.internalOccurrenceKey, status, this.fileAttributes, this.fileStateFlags, this.ssrReliability, error);
@@ -1022,15 +968,13 @@ 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)) {
         var downloadAction = {
           label: 'Download',
@@ -1050,11 +994,9 @@ var CardBase = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this$state8 = this.state,
-          isPlayingFile = _this$state8.isPlayingFile,
-          mediaViewerSelectedItem = _this$state8.mediaViewerSelectedItem;
-
+        isPlayingFile = _this$state8.isPlayingFile,
+        mediaViewerSelectedItem = _this$state8.mediaViewerSelectedItem;
       var innerContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isPlayingFile ? this.renderInlinePlayer() : this.renderCard(), mediaViewerSelectedItem ? this.renderMediaViewer() : null, this.storeSSRData());
-
       return this.props.intl ? innerContent : /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
         locale: "en"
       }, innerContent);
@@ -1062,7 +1004,6 @@ var CardBase = /*#__PURE__*/function (_Component) {
   }]);
   return CardBase;
 }(_react.Component);
-
 exports.CardBase = CardBase;
 (0, _defineProperty2.default)(CardBase, "defaultProps", {
   appearance: 'auto',