@atlaskit/media-card 73.1.0 → 73.3.0

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

@@ -41,7 +41,7 @@ var _mediaCommon = require("@atlaskit/media-common");
 
 var _download = _interopRequireDefault(require("@atlaskit/icon/glyph/download"));
 
-var _mediaClient = require("@atlaskit/media-client");
+var _mediaClient2 = require("@atlaskit/media-client");
 
 var _mediaViewer = require("@atlaskit/media-viewer");
 
@@ -67,8 +67,14 @@ 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");
+
 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; }
@@ -96,12 +102,20 @@ var CardBase = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hasBeenMounted", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "viewportPreAnchorRef", /*#__PURE__*/(0, _react.createRef)());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "viewportPostAnchorRef", /*#__PURE__*/(0, _react.createRef)());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ssrReliability", {
+      server: {
+        status: 'unknown'
+      },
+      client: {
+        status: 'unknown'
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "timeElapsedTillCommenced", performance.now());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getImageURLParams", function (_ref) {
       var collection = _ref.collectionName;
       return _objectSpread(_objectSpread({
         collection: collection,
-        mode: (0, _mediaClient.imageResizeModeToFileImageMode)(_this.props.resizeMode)
+        mode: (0, _mediaClient2.imageResizeModeToFileImageMode)(_this.props.resizeMode)
       }, _this.requestedDimensions), {}, {
         allowAnimated: true
       });
@@ -143,7 +157,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
         dimensions: dimensions,
         onLocalPreviewError: _this.fireLocalPreviewErrorEvent,
         filePreview: isBannedLocalPreview ? undefined : (0, _getCardPreview.getFilePreviewFromFileState)(fileState),
-        isRemotePreviewReady: (0, _mediaClient.isImageRepresentationReady)(fileState),
+        isRemotePreviewReady: (0, _mediaClient2.isImageRepresentationReady)(fileState),
         imageUrlParams: _this.getImageURLParams(identifier),
         mediaBlobUrlAttrs: _this.getMediaBlobUrlAttrs(identifier, fileState)
       };
@@ -159,26 +173,18 @@ var CardBase = /*#__PURE__*/function (_Component) {
         // https://product-fabric.atlassian.net/browse/MEX-1071
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resolveSSRPreview", function (identifier, ssr) {
-      var mediaClient = _this.props.mediaClient;
+    (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;
 
-      try {
-        return (0, _getCardPreview.getSSRCardPreview)(ssr, mediaClient, identifier.id, _this.getImageURLParams(identifier), _this.getMediaBlobUrlAttrs(identifier));
-      } catch (e) {// TODO: log SSR reliability 'failed'
-        // https://product-fabric.atlassian.net/browse/MEX-770
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resolvePreview", /*#__PURE__*/function () {
-      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(identifier, fileState) {
-        var params, cardPreview, wrappedError;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                _context.prev = 0;
-                params = _this.getCardPreviewParams(identifier, fileState);
+                _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.getCardPreview)(params);
+                return (0, _getCardPreview.fetchAndCacheRemotePreview)(mediaClient, identifier.id, dimensions, _this.getImageURLParams(identifier), _this.getMediaBlobUrlAttrs(identifier));
 
               case 4:
                 cardPreview = _context.sent;
@@ -187,13 +193,51 @@ var CardBase = /*#__PURE__*/function (_Component) {
                   cardPreview: cardPreview
                 });
 
-                _context.next = 12;
+                _context.next = 10;
                 break;
 
               case 8:
                 _context.prev = 8;
-                _context.t0 = _context["catch"](0);
-                wrappedError = (0, _errors.ensureMediaCardError)('preview-fetch', _context.t0); //  If remote preview fails, we set status 'error'
+                _context.t0 = _context["catch"](1);
+
+              case 10:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, null, [[1, 8]]);
+      }));
+
+      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;
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.prev = 0;
+                params = _this.getCardPreviewParams(identifier, fileState);
+                _context2.next = 4;
+                return (0, _getCardPreview.getCardPreview)(params);
+
+              case 4:
+                cardPreview = _context2.sent;
+
+                _this.safeSetState({
+                  cardPreview: cardPreview
+                });
+
+                _context2.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'
                 //  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'
@@ -211,14 +255,14 @@ var CardBase = /*#__PURE__*/function (_Component) {
 
               case 12:
               case "end":
-                return _context.stop();
+                return _context2.stop();
             }
           }
-        }, _callee, null, [[0, 8]]);
+        }, _callee2, null, [[0, 8]]);
       }));
 
-      return function (_x, _x2) {
-        return _ref2.apply(this, arguments);
+      return function (_x2, _x3) {
+        return _ref3.apply(this, arguments);
       };
     }());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getPerformanceAttributes", function () {
@@ -234,11 +278,38 @@ var CardBase = /*#__PURE__*/function (_Component) {
         }
       };
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageError", function () {
-      var cardPreview = _this.state.cardPreview;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "logSSRImageError", function (cardPreview) {
+      if (cardPreview) {
+        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;
+        }
+      }
+    });
+    (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
+
+      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);
+      var isSSR = cardPreview && ((0, _getCardPreview.isSSRClientPreview)(cardPreview) || (0, _getCardPreview.isSSRDataPreview)(cardPreview));
 
       if (isLocal || isSSR) {
         var updateState = {
@@ -251,15 +322,11 @@ var CardBase = /*#__PURE__*/function (_Component) {
           _this.fireLocalPreviewErrorEvent(error);
         }
 
-        if (isSSR) {// TODO: set SSR-client reliability 'failed'.
-          // https://product-fabric.atlassian.net/browse/MEX-770
-        }
-
-        var _this$props4 = _this.props,
-            identifier = _this$props4.identifier,
-            _this$props4$dimensio = _this$props4.dimensions,
-            dimensions = _this$props4$dimensio === void 0 ? {} : _this$props4$dimensio;
-        (0, _mediaClient.isFileIdentifier)(identifier) && (0, _getCardPreview.removeCardPreviewFromCache)(identifier.id, dimensions);
+        var _this$props5 = _this.props,
+            identifier = _this$props5.identifier,
+            _this$props5$dimensio = _this$props5.dimensions,
+            dimensions = _this$props5$dimensio === void 0 ? {} : _this$props5$dimensio;
+        (0, _mediaClient2.isFileIdentifier)(identifier) && (0, _getCardPreview.removeCardPreviewFromCache)(identifier.id, dimensions);
 
         _this.safeSetState(updateState);
       } else {
@@ -269,7 +336,34 @@ var CardBase = /*#__PURE__*/function (_Component) {
         });
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageLoad", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageLoad", function (cardPreview) {
+      if (cardPreview) {
+        if ((0, _getCardPreview.isSSRClientPreview)(cardPreview) && _this.ssrReliability.client.status === 'unknown') {
+          _this.ssrReliability.client = {
+            status: 'success'
+          };
+        }
+        /* 
+          If the image loads successfully and it comes from server (global scope / ssrData), it means that we have reused it in client and the success counts for both: server & client.
+        */
+
+
+        if ((0, _getCardPreview.isSSRDataPreview)(cardPreview) && _this.ssrReliability.server.status === 'unknown') {
+          _this.ssrReliability.server = {
+            status: 'success'
+          };
+          _this.ssrReliability.client = {
+            status: 'success'
+          };
+        }
+      }
+
+      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
       });
@@ -309,10 +403,10 @@ var CardBase = /*#__PURE__*/function (_Component) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCardViewClick", function (event, analyticsEvent) {
-      var _this$props5 = _this.props,
-          identifier = _this$props5.identifier,
-          useInlinePlayer = _this$props5.useInlinePlayer,
-          shouldOpenMediaViewer = _this$props5.shouldOpenMediaViewer;
+      var _this$props6 = _this.props,
+          identifier = _this$props6.identifier,
+          useInlinePlayer = _this$props6.useInlinePlayer,
+          shouldOpenMediaViewer = _this$props6.shouldOpenMediaViewer;
       var cardPreview = _this.state.cardPreview;
 
       var _assertThisInitialize2 = (0, _assertThisInitialized2.default)(_this),
@@ -334,7 +428,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
       } else if (shouldOpenMediaViewer) {
         var mediaViewerSelectedItem;
 
-        if ((0, _mediaClient.isFileIdentifier)(identifier)) {
+        if ((0, _mediaClient2.isFileIdentifier)(identifier)) {
           mediaViewerSelectedItem = {
             id: identifier.id,
             mediaItemType: 'file',
@@ -365,14 +459,16 @@ var CardBase = /*#__PURE__*/function (_Component) {
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderInlinePlayer", function () {
-      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;
-      var shouldAutoplay = _this.state.shouldAutoplay;
+      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;
+      var _this$state = _this.state,
+          shouldAutoplay = _this$state.shouldAutoplay,
+          cardPreview = _this$state.cardPreview;
       return /*#__PURE__*/_react.default.createElement(_inlinePlayer.InlinePlayer, {
         mediaClient: mediaClient,
         dimensions: dimensions,
@@ -383,7 +479,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
         onClick: _this.onClick,
         selected: selected,
         ref: _this.setRef,
-        testId: testId
+        testId: testId,
+        cardPreview: cardPreview
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMediaViewerClose", function () {
@@ -395,10 +492,10 @@ var CardBase = /*#__PURE__*/function (_Component) {
       var identifier = _this.props.identifier;
       var payloadPart;
 
-      if ((0, _mediaClient.isFileIdentifier)(identifier)) {
+      if ((0, _mediaClient2.isFileIdentifier)(identifier)) {
         payloadPart = {
           fileId: identifier.id,
-          isUserCollection: identifier.collectionName === _mediaClient.RECENTS_COLLECTION
+          isUserCollection: identifier.collectionName === _mediaClient2.RECENTS_COLLECTION
         };
       } else {
         payloadPart = {
@@ -407,24 +504,24 @@ var CardBase = /*#__PURE__*/function (_Component) {
         };
       }
 
-      _mediaClient.globalMediaEventEmitter.emit('media-viewed', _objectSpread({
+      _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$props7 = _this.props,
-          mediaClient = _this$props7.mediaClient,
-          identifier = _this$props7.identifier,
-          mediaViewerDataSource = _this$props7.mediaViewerDataSource,
-          contextId = _this$props7.contextId,
-          featureFlags = _this$props7.featureFlags;
+      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;
 
       if (!mediaViewerSelectedItem) {
         return;
       }
 
-      var collectionName = (0, _mediaClient.isFileIdentifier)(identifier) ? identifier.collectionName || '' : '';
+      var collectionName = (0, _mediaClient2.isFileIdentifier)(identifier) ? identifier.collectionName || '' : '';
       var dataSource = mediaViewerDataSource || {
         list: []
       };
@@ -439,35 +536,31 @@ var CardBase = /*#__PURE__*/function (_Component) {
       }), document.body);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCard", function () {
-      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;
+      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 mediaItemType = identifier.mediaItemType;
-      var _this$state = _this.state,
-          status = _this$state.status,
-          progress = _this$state.progress,
-          _this$state$cardPrevi = _this$state.cardPreview;
-      _this$state$cardPrevi = _this$state$cardPrevi === void 0 ? {
-        dataURI: undefined,
-        orientation: 1
-      } : _this$state$cardPrevi;
-      var dataURI = _this$state$cardPrevi.dataURI,
-          orientation = _this$state$cardPrevi.orientation,
-          error = _this$state.error,
-          cardRef = _this$state.cardRef,
-          isCardVisible = _this$state.isCardVisible;
+      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;
 
       var _assertThisInitialize3 = (0, _assertThisInitialized2.default)(_this),
           metadata = _assertThisInitialize3.metadata;
@@ -483,13 +576,14 @@ var CardBase = /*#__PURE__*/function (_Component) {
       var nativeLazyLoad = isLazy && !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: status,
         error: error,
         mediaItemType: mediaItemType,
         metadata: metadata,
-        dataURI: dataURI,
+        cardPreview: cardPreview,
         alt: alt,
         appearance: appearance,
         resizeMode: resizeMode,
@@ -502,7 +596,6 @@ var CardBase = /*#__PURE__*/function (_Component) {
         disableOverlay: disableOverlay,
         progress: progress,
         onDisplayImage: onDisplayImage,
-        previewOrientation: orientation,
         innerRef: _this.setRef,
         testId: testId,
         featureFlags: featureFlags,
@@ -511,7 +604,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
         onImageError: _this.onImageError,
         onImageLoad: _this.onImageLoad,
         nativeLazyLoad: nativeLazyLoad,
-        forceSyncDisplay: forceSyncDisplay
+        forceSyncDisplay: forceSyncDisplay,
+        mediaCardCursor: mediaCardCursor
       });
 
       return isLazy ? /*#__PURE__*/_react.default.createElement(_viewportDetector.ViewportDetector, {
@@ -527,6 +621,22 @@ var CardBase = /*#__PURE__*/function (_Component) {
         offsetTop: _viewportDetector.ABS_VIEWPORT_ANCHOR_OFFSET_TOP
       })) : card;
     });
+    (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$state$cardPrevi = _this.state.cardPreview;
+      _this$state$cardPrevi = _this$state$cardPrevi === void 0 ? {} : _this$state$cardPrevi;
+      var dataURI = _this$state$cardPrevi.dataURI;
+      return (0, _mediaClient2.isFileIdentifier)(identifier) && ssr === 'server' && /*#__PURE__*/_react.default.createElement(_globalScope.StoreSSRDataScript, {
+        identifier: identifier,
+        dataURI: dataURI,
+        dimensions: _this.requestedDimensions,
+        error: ((_this$ssrReliability$ = _this.ssrReliability.server) === null || _this$ssrReliability$ === void 0 ? void 0 : _this$ssrReliability$.status) === 'fail' ? _this.ssrReliability.server : undefined
+      });
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCardInViewport", function () {
       _this.setState({
         isCardVisible: true
@@ -564,22 +674,46 @@ var CardBase = /*#__PURE__*/function (_Component) {
 
     var _cardPreview;
 
-    var _this$props9 = _this.props,
-        _identifier = _this$props9.identifier,
-        _this$props9$dimensio = _this$props9.dimensions,
-        _dimensions = _this$props9$dimensio === void 0 ? {} : _this$props9$dimensio,
-        _ssr = _this$props9.ssr;
+    var _error;
 
-    if ((0, _mediaClient.isFileIdentifier)(_identifier)) {
+    var _this$props11 = _this.props,
+        _identifier = _this$props11.identifier,
+        _this$props11$dimensi = _this$props11.dimensions,
+        _dimensions = _this$props11$dimensi === void 0 ? {} : _this$props11$dimensi,
+        _ssr = _this$props11.ssr,
+        _mediaClient = _this$props11.mediaClient;
+
+    if ((0, _mediaClient2.isFileIdentifier)(_identifier)) {
       var id = _identifier.id;
       _cardPreview = (0, _getCardPreview.getCardPreviewFromCache)(id, _dimensions);
 
       if (!_cardPreview && _ssr) {
-        _this.fireCommencedEvent();
+        var _this$ssrData, _this$ssrData2;
+
+        _this.ssrData = (0, _globalScope.getSSRData)(_identifier);
 
-        _cardPreview = _this.resolveSSRPreview(_identifier, _ssr);
+        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'
+          };
+        }
       }
-    } else if ((0, _mediaClient.isExternalImageIdentifier)(_identifier)) {
+    } else if ((0, _mediaClient2.isExternalImageIdentifier)(_identifier)) {
       _this.fireCommencedEvent();
 
       _status = 'loading-preview';
@@ -605,7 +739,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
       cardPreview: _cardPreview,
       cardRef: null,
       isBannedLocalPreview: false,
-      previewDidRender: false
+      previewDidRender: false,
+      error: _error
     };
     return _this;
   }
@@ -614,21 +749,32 @@ var CardBase = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.hasBeenMounted = true;
-      var _this$state2 = this.state,
-          isCardVisible = _this$state2.isCardVisible,
-          cardPreview = _this$state2.cardPreview;
-      var _this$props10 = this.props,
-          identifier = _this$props10.identifier,
-          ssr = _this$props10.ssr;
-
-      if (isCardVisible && (0, _mediaClient.isFileIdentifier)(identifier)) {
+      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;
+
+      if (isCardVisible && (0, _mediaClient2.isFileIdentifier)(identifier)) {
         this.updateStateForIdentifier(identifier);
       }
 
-      if (isCardVisible && !!ssr && !!cardPreview && (0, _getCardPreview.isSSRClientPreview)(cardPreview) && (0, _mediaClient.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 (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
       // and then check if the triggered listener is from the card
       // that contains a div in current window.getSelection()
@@ -644,26 +790,26 @@ var CardBase = /*#__PURE__*/function (_Component) {
           prevIdentifier = prevProps.identifier,
           prevDimensions = prevProps.dimensions;
       var prevIsCardVisible = prevState.isCardVisible;
-      var _this$props11 = this.props,
-          mediaClient = _this$props11.mediaClient,
-          identifier = _this$props11.identifier,
-          dimensions = _this$props11.dimensions,
-          featureFlags = _this$props11.featureFlags,
-          useInlinePlayer = _this$props11.useInlinePlayer,
-          disableOverlay = _this$props11.disableOverlay;
-      var _this$state3 = this.state,
-          isCardVisible = _this$state3.isCardVisible,
-          cardPreview = _this$state3.cardPreview,
-          status = _this$state3.status,
-          fileState = _this$state3.fileState,
-          isBannedLocalPreview = _this$state3.isBannedLocalPreview,
-          previewDidRender = _this$state3.previewDidRender,
-          isPlayingFile = _this$state3.isPlayingFile;
-      var isDifferent = (0, _mediaClient.isDifferentIdentifier)(prevIdentifier, identifier);
+      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;
+      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;
+      var isDifferent = (0, _mediaClient2.isDifferentIdentifier)(prevIdentifier, identifier);
       var turnedVisible = !prevIsCardVisible && isCardVisible;
       var isNewMediaClient = prevMediaClient !== mediaClient;
 
-      if ((0, _mediaClient.isExternalImageIdentifier)(identifier) && isDifferent) {
+      if ((0, _mediaClient2.isExternalImageIdentifier)(identifier) && isDifferent) {
         this.fireCommencedEvent();
         var dataURI = identifier.dataURI;
         this.setState({
@@ -677,7 +823,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
         });
       }
 
-      if ((0, _mediaClient.isFileIdentifier)(identifier) && (turnedVisible || !!this.subscription && (isNewMediaClient || isDifferent))) {
+      if ((0, _mediaClient2.isFileIdentifier)(identifier) && (turnedVisible || !!this.subscription && (isNewMediaClient || isDifferent))) {
         this.updateStateForIdentifier(identifier);
       }
 
@@ -689,7 +835,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
         }
       }
 
-      if ((0, _mediaClient.isFileIdentifier)(identifier) && fileState && (0, _getCardPreview.shouldResolvePreview)({
+      if ((0, _mediaClient2.isFileIdentifier)(identifier) && fileState && (0, _getCardPreview.shouldResolvePreview)({
         status: status,
         fileState: fileState,
         dimensions: dimensions,
@@ -701,7 +847,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
         this.resolvePreview(identifier, fileState);
       }
 
-      if (turnedVisible && this.props.ssr && !!cardPreview && (0, _getCardPreview.isSSRClientPreview)(cardPreview) && (0, _mediaClient.isFileIdentifier)(identifier)) {
+      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);
@@ -716,7 +862,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
       }
 
       var isVideo = this.fileAttributes.fileMediatype === 'video';
-      var videoAvailableToPlay = fileState && (0, _mediaClient.isProcessedFileState)(fileState);
+      var videoAvailableToPlay = fileState && (0, _mediaClient2.isProcessedFileState)(fileState);
 
       if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && videoAvailableToPlay && (0, _mediaCommon.getMediaFeatureFlag)('timestampOnVideo', this.props.featureFlags)) {
         this.setState({
@@ -774,8 +920,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
     get: function get() {
       var dimensions = this.props.dimensions;
 
-      var _ref3 = this.state || {},
-          element = _ref3.cardRef;
+      var _ref4 = this.state || {},
+          element = _ref4.cardRef;
 
       return (0, _getDataURIDimension.getRequestedDimensions)({
         dimensions: dimensions,
@@ -785,25 +931,25 @@ var CardBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "metadata",
     get: function get() {
-      var _this$state4;
+      var _this$state5;
 
-      return (0, _metadata.getFileDetails)(this.props.identifier, (_this$state4 = this.state) === null || _this$state4 === void 0 ? void 0 : _this$state4.fileState);
+      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$state5, _this$state5$fileStat;
+      var _this$state6, _this$state6$fileStat;
 
-      return (0, _analytics.getFileAttributes)(this.metadata, (_this$state5 = this.state) === null || _this$state5 === void 0 ? void 0 : (_this$state5$fileStat = _this$state5.fileState) === null || _this$state5$fileStat === void 0 ? void 0 : _this$state5$fileStat.status);
+      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$state6 = this.state,
-          status = _this$state6.status,
-          error = _this$state6.error;
+      var _this$state7 = this.state,
+          status = _this$state7.status,
+          error = _this$state7.error;
       var createAnalyticsEvent = this.props.createAnalyticsEvent;
-      createAnalyticsEvent && (0, _cardAnalytics.fireOperationalEvent)(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), error);
+      createAnalyticsEvent && (0, _cardAnalytics.fireOperationalEvent)(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error);
     }
   }, {
     key: "fireCommencedEvent",
@@ -821,15 +967,15 @@ var CardBase = /*#__PURE__*/function (_Component) {
     get: function get() {
       var _this3 = this;
 
-      var _this$props12 = this.props,
-          _this$props12$actions = _this$props12.actions,
-          actions = _this$props12$actions === void 0 ? [] : _this$props12$actions,
-          identifier = _this$props12.identifier,
-          shouldEnableDownloadButton = _this$props12.shouldEnableDownloadButton;
+      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 status = this.state.status;
       var metadata = this.metadata;
 
-      if ((0, _mediaClient.isFileIdentifier)(identifier) && (status === 'failed-processing' || shouldEnableDownloadButton)) {
+      if ((0, _mediaClient2.isFileIdentifier)(identifier) && (status === 'failed-processing' || shouldEnableDownloadButton)) {
         var downloadAction = {
           label: 'Download',
           icon: /*#__PURE__*/_react.default.createElement(_download.default, {
@@ -847,11 +993,11 @@ var CardBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$state7 = this.state,
-          isPlayingFile = _this$state7.isPlayingFile,
-          mediaViewerSelectedItem = _this$state7.mediaViewerSelectedItem;
+      var _this$state8 = this.state,
+          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);
+      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"