@atlaskit/media-card 71.0.0 → 73.1.0

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Card = exports.CardBase = void 0;
+exports.CardBase = exports.Card = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -45,7 +45,7 @@ var _mediaClient = require("@atlaskit/media-client");
 
 var _mediaViewer = require("@atlaskit/media-viewer");
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _cardView = require("../cardView");
 
@@ -57,29 +57,25 @@ var _getCardPreview = require("./getCardPreview");
 
 var _metadata = require("../../utils/metadata");
 
-var _dimensionComparer = require("../../utils/dimensionComparer");
-
-var _getCardStatus = require("./getCardStatus");
-
 var _inlinePlayer = require("../inlinePlayer");
 
 var _analytics = require("../../utils/analytics");
 
-var _fileAttributesContext = require("../../utils/fileAttributesContext");
-
 var _errors = require("../../errors");
 
 var _cardAnalytics = require("./cardAnalytics");
 
 var _document = _interopRequireDefault(require("../../utils/document"));
 
+var _cardState = require("./cardState");
+
 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); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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); }; }
 
@@ -98,71 +94,186 @@ var CardBase = /*#__PURE__*/function (_Component) {
     (0, _classCallCheck2.default)(this, CardBase);
     _this = _super.call(this, props);
     (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), "timeElapsedTillCommenced", performance.now());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "shouldRefetchImage", function (current, next) {
-      if (!current || !next) {
-        return false;
-      }
-
-      return (0, _dimensionComparer.isBigger)(current, next);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isLatestCardStatusUpdate", function (cardStatusUpdateTimestamp) {
-      return !_this.lastCardStatusUpdateTimestamp || _this.lastCardStatusUpdateTimestamp <= cardStatusUpdateTimestamp;
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onLocalPreviewError", function (error) {// TODO: track local preview success rate
-      // https://product-fabric.atlassian.net/browse/MEX-774
+    (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)
+      }, _this.requestedDimensions), {}, {
+        allowAnimated: true
+      });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createAddContextToDataURI", function (fileId, fileState, _ref, collectionName) {
-      var width = _ref.width,
-          height = _ref.height;
-      return function (dataURI) {
-        var _this$props = _this.props,
-            contextId = _this$props.contextId,
-            alt = _this$props.alt;
-
-        if (!contextId) {
-          return dataURI;
-        }
-
-        var metadata = (0, _metadata.getFileDetails)(fileState);
-        return (0, _mediaClient.addFileAttrsToUrl)(dataURI, {
-          id: fileId,
-          collection: collectionName,
-          contextId: contextId,
-          mimeType: metadata.mimeType,
-          name: metadata.name,
-          size: metadata.size,
-          width: width,
-          height: height,
-          alt: alt
-        });
-      };
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getMediaBlobUrlAttrs", function (identifier, fileState) {
+      var id = identifier.id,
+          collection = identifier.collectionName;
+      var _this$props = _this.props,
+          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;
+
+      return contextId ? _objectSpread(_objectSpread({
+        id: id,
+        collection: collection,
+        contextId: contextId,
+        mimeType: mimeType,
+        name: name,
+        size: size
+      }, originalDimensions || _this.requestedDimensions), {}, {
+        alt: alt
+      }) : undefined;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getCardPreviewParams", function (id, collectionName, fileState) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getCardPreviewParams", function (identifier, fileState) {
+      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,
-          originalDimensions = _this$props2.originalDimensions,
-          resizeMode = _this$props2.resizeMode,
           mediaClient = _this$props2.mediaClient;
-      var cardRef = _this.state.cardRef;
-      var requestedDimensions = (0, _getDataURIDimension.getRequestedDimensions)({
-        dimensions: dimensions,
-        element: cardRef
-      });
       return {
         mediaClient: mediaClient,
         id: id,
-        collectionName: collectionName,
         dimensions: dimensions,
-        resizeMode: resizeMode,
-        requestedDimensions: requestedDimensions,
-        onLocalPreviewError: _this.onLocalPreviewError,
-        filePreview: (0, _getCardPreview.getFilePreviewFromFileState)(fileState),
+        onLocalPreviewError: _this.fireLocalPreviewErrorEvent,
+        filePreview: isBannedLocalPreview ? undefined : (0, _getCardPreview.getFilePreviewFromFileState)(fileState),
         isRemotePreviewReady: (0, _mediaClient.isImageRepresentationReady)(fileState),
-        addContextToDataURI: _this.createAddContextToDataURI(id, fileState, originalDimensions || requestedDimensions, collectionName)
+        imageUrlParams: _this.getImageURLParams(identifier),
+        mediaBlobUrlAttrs: _this.getMediaBlobUrlAttrs(identifier, fileState)
       };
     });
+    (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.
+        // If preview fails, it will be refetched later
+        //TODO: test this catch
+        // https://product-fabric.atlassian.net/browse/MEX-1071
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resolveSSRPreview", function (identifier, ssr) {
+      var mediaClient = _this.props.mediaClient;
+
+      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);
+                _context.next = 4;
+                return (0, _getCardPreview.getCardPreview)(params);
+
+              case 4:
+                cardPreview = _context.sent;
+
+                _this.safeSetState({
+                  cardPreview: cardPreview
+                });
+
+                _context.next = 12;
+                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'
+                //  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.safeSetState({
+                    isBannedLocalPreview: true
+                  });
+                } else {
+                  _this.safeSetState({
+                    status: 'error',
+                    error: wrappedError
+                  });
+                }
+
+              case 12:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, null, [[0, 8]]);
+      }));
+
+      return function (_x, _x2) {
+        return _ref2.apply(this, arguments);
+      };
+    }());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getPerformanceAttributes", function () {
+      var _assertThisInitialize = (0, _assertThisInitialized2.default)(_this),
+          timeElapsedTillCommenced = _assertThisInitialize.timeElapsedTillCommenced;
+
+      var timeElapsedTillEvent = performance.now();
+      var durationSinceCommenced = timeElapsedTillCommenced && timeElapsedTillEvent - timeElapsedTillCommenced;
+      return {
+        overall: {
+          durationSincePageStart: timeElapsedTillEvent,
+          durationSinceCommenced: durationSinceCommenced
+        }
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageError", function () {
+      var cardPreview = _this.state.cardPreview;
+      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);
+
+      if (isLocal || isSSR) {
+        var updateState = {
+          cardPreview: undefined
+        };
+
+        if (isLocal) {
+          updateState.isBannedLocalPreview = true;
+
+          _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);
+
+        _this.safeSetState(updateState);
+      } else {
+        _this.safeSetState({
+          status: 'error',
+          error: error
+        });
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageLoad", function () {
+      _this.safeSetState({
+        previewDidRender: true
+      });
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireCopiedEvent", function () {
       var createAnalyticsEvent = _this.props.createAnalyticsEvent;
       var cardRef = _this.state.cardRef;
@@ -172,9 +283,17 @@ var CardBase = /*#__PURE__*/function (_Component) {
       var createAnalyticsEvent = _this.props.createAnalyticsEvent;
       createAnalyticsEvent && (0, _cardAnalytics.fireScreenEvent)(createAnalyticsEvent, _this.fileAttributes);
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireLocalPreviewErrorEvent", function (error) {// TODO: track local preview success rate
+      // https://product-fabric.atlassian.net/browse/MEX-774
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "safeSetState", function (state) {
       if (_this.hasBeenMounted) {
-        _this.setState(state);
+        // If it's setting the status, we need to use a state updater function,
+        // which ensures that no non-final status overrides a final status.
+        // If no status is set, we don't need a sate updater
+        var updater = !!state.status ? (0, _cardState.createStateUpdater)(state) : state;
+
+        _this.setState(updater);
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unsubscribe", function () {
@@ -183,20 +302,21 @@ var CardBase = /*#__PURE__*/function (_Component) {
       }
 
       if (_this.hasBeenMounted) {
+        // TODO MEX-788: add test for "do not remove the card preview when unsubscribing".
         _this.setState({
-          cardPreview: undefined
+          isBannedLocalPreview: false
         });
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCardViewClick", function (event, analyticsEvent) {
-      var _this$props3 = _this.props,
-          identifier = _this$props3.identifier,
-          useInlinePlayer = _this$props3.useInlinePlayer,
-          shouldOpenMediaViewer = _this$props3.shouldOpenMediaViewer;
+      var _this$props5 = _this.props,
+          identifier = _this$props5.identifier,
+          useInlinePlayer = _this$props5.useInlinePlayer,
+          shouldOpenMediaViewer = _this$props5.shouldOpenMediaViewer;
       var cardPreview = _this.state.cardPreview;
 
-      var _assertThisInitialize = (0, _assertThisInitialized2.default)(_this),
-          metadata = _assertThisInitialize.metadata;
+      var _assertThisInitialize2 = (0, _assertThisInitialized2.default)(_this),
+          metadata = _assertThisInitialize2.metadata;
 
       _this.onClick(event, analyticsEvent);
 
@@ -208,7 +328,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
 
       if (useInlinePlayer && isVideo && !!cardPreview) {
         _this.setState({
-          isPlayingFile: true
+          isPlayingFile: true,
+          shouldAutoplay: true
         });
       } else if (shouldOpenMediaViewer) {
         var mediaViewerSelectedItem;
@@ -244,18 +365,20 @@ var CardBase = /*#__PURE__*/function (_Component) {
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderInlinePlayer", function () {
-      var _this$props4 = _this.props,
-          identifier = _this$props4.identifier,
-          mediaClient = _this$props4.mediaClient,
-          dimensions = _this$props4.dimensions,
-          selected = _this$props4.selected,
-          testId = _this$props4.testId,
-          originalDimensions = _this$props4.originalDimensions;
+      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;
       return /*#__PURE__*/_react.default.createElement(_inlinePlayer.InlinePlayer, {
         mediaClient: mediaClient,
         dimensions: dimensions,
         originalDimensions: originalDimensions,
         identifier: identifier,
+        autoplay: !!shouldAutoplay,
         onError: _this.onInlinePlayerError,
         onClick: _this.onClick,
         selected: selected,
@@ -290,12 +413,12 @@ var CardBase = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMediaViewer", function () {
       var mediaViewerSelectedItem = _this.state.mediaViewerSelectedItem;
-      var _this$props5 = _this.props,
-          mediaClient = _this$props5.mediaClient,
-          identifier = _this$props5.identifier,
-          mediaViewerDataSource = _this$props5.mediaViewerDataSource,
-          contextId = _this$props5.contextId,
-          featureFlags = _this$props5.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;
@@ -316,20 +439,21 @@ var CardBase = /*#__PURE__*/function (_Component) {
       }), document.body);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCard", function () {
-      var _this$props6 = _this.props,
-          identifier = _this$props6.identifier,
-          isLazy = _this$props6.isLazy,
-          appearance = _this$props6.appearance,
-          resizeMode = _this$props6.resizeMode,
-          dimensions = _this$props6.dimensions,
-          selectable = _this$props6.selectable,
-          selected = _this$props6.selected,
-          disableOverlay = _this$props6.disableOverlay,
-          alt = _this$props6.alt,
-          testId = _this$props6.testId,
-          featureFlags = _this$props6.featureFlags,
-          titleBoxBgColor = _this$props6.titleBoxBgColor,
-          titleBoxIcon = _this$props6.titleBoxIcon;
+      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 mediaItemType = identifier.mediaItemType;
       var _this$state = _this.state,
           status = _this$state.status,
@@ -342,21 +466,27 @@ var CardBase = /*#__PURE__*/function (_Component) {
       var dataURI = _this$state$cardPrevi.dataURI,
           orientation = _this$state$cardPrevi.orientation,
           error = _this$state.error,
-          cardRef = _this$state.cardRef;
-
-      var _assertThisInitialize2 = (0, _assertThisInitialized2.default)(_this),
-          metadata = _assertThisInitialize2.metadata,
-          timeElapsedTillCommenced = _assertThisInitialize2.timeElapsedTillCommenced;
+          cardRef = _this$state.cardRef,
+          isCardVisible = _this$state.isCardVisible;
 
       var _assertThisInitialize3 = (0, _assertThisInitialized2.default)(_this),
-          onCardViewClick = _assertThisInitialize3.onCardViewClick,
-          onDisplayImage = _assertThisInitialize3.onDisplayImage,
-          actions = _assertThisInitialize3.actions,
-          onMouseEnter = _assertThisInitialize3.onMouseEnter;
+          metadata = _assertThisInitialize3.metadata;
+
+      var _assertThisInitialize4 = (0, _assertThisInitialized2.default)(_this),
+          onCardViewClick = _assertThisInitialize4.onCardViewClick,
+          onDisplayImage = _assertThisInitialize4.onDisplayImage,
+          actions = _assertThisInitialize4.actions,
+          onMouseEnter = _assertThisInitialize4.onMouseEnter; // Card can be artificially turned visible before entering the viewport
+      // For example, when we have the image in cache
+
+
+      var nativeLazyLoad = isLazy && !isCardVisible; // Force Media Image to always display img for SSR
+
+      var forceSyncDisplay = !!ssr;
 
       var card = /*#__PURE__*/_react.default.createElement(_cardView.CardView, {
         status: status,
-        error: error && error.secondaryError,
+        error: error,
         mediaItemType: mediaItemType,
         metadata: metadata,
         dataURI: dataURI,
@@ -378,13 +508,24 @@ var CardBase = /*#__PURE__*/function (_Component) {
         featureFlags: featureFlags,
         titleBoxBgColor: titleBoxBgColor,
         titleBoxIcon: titleBoxIcon,
-        timeElapsedTillCommenced: timeElapsedTillCommenced
+        onImageError: _this.onImageError,
+        onImageLoad: _this.onImageLoad,
+        nativeLazyLoad: nativeLazyLoad,
+        forceSyncDisplay: forceSyncDisplay
       });
 
       return isLazy ? /*#__PURE__*/_react.default.createElement(_viewportDetector.ViewportDetector, {
-        targetRef: cardRef,
+        cardEl: cardRef,
+        preAnchorRef: _this.viewportPreAnchorRef,
+        postAnchorRef: _this.viewportPostAnchorRef,
         onVisible: _this.onCardInViewport
-      }, card) : card;
+      }, /*#__PURE__*/_react.default.createElement(_viewportDetector.ViewportAnchor, {
+        ref: _this.viewportPreAnchorRef,
+        offsetTop: -_viewportDetector.ABS_VIEWPORT_ANCHOR_OFFSET_TOP
+      }), card, /*#__PURE__*/_react.default.createElement(_viewportDetector.ViewportAnchor, {
+        ref: _this.viewportPostAnchorRef,
+        offsetTop: _viewportDetector.ABS_VIEWPORT_ANCHOR_OFFSET_TOP
+      })) : card;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCardInViewport", function () {
       _this.setState({
@@ -394,8 +535,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClick", function (event, analyticsEvent) {
       var onClick = _this.props.onClick;
 
-      var _assertThisInitialize4 = (0, _assertThisInitialized2.default)(_this),
-          metadata = _assertThisInitialize4.metadata;
+      var _assertThisInitialize5 = (0, _assertThisInitialized2.default)(_this),
+          metadata = _assertThisInitialize5.metadata;
 
       if (onClick) {
         var cardEvent = {
@@ -408,8 +549,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseEnter", function (event) {
       var onMouseEnter = _this.props.onMouseEnter;
 
-      var _assertThisInitialize5 = (0, _assertThisInitialized2.default)(_this),
-          metadata = _assertThisInitialize5.metadata;
+      var _assertThisInitialize6 = (0, _assertThisInitialized2.default)(_this),
+          metadata = _assertThisInitialize6.metadata;
 
       if (onMouseEnter) {
         var cardEvent = {
@@ -423,38 +564,48 @@ var CardBase = /*#__PURE__*/function (_Component) {
 
     var _cardPreview;
 
-    var _this$props7 = _this.props,
-        _identifier = _this$props7.identifier,
-        _this$props7$dimensio = _this$props7.dimensions,
-        _dimensions = _this$props7$dimensio === void 0 ? {} : _this$props7$dimensio;
+    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;
 
     if ((0, _mediaClient.isFileIdentifier)(_identifier)) {
       var id = _identifier.id;
       _cardPreview = (0, _getCardPreview.getCardPreviewFromCache)(id, _dimensions);
+
+      if (!_cardPreview && _ssr) {
+        _this.fireCommencedEvent();
+
+        _cardPreview = _this.resolveSSRPreview(_identifier, _ssr);
+      }
     } else if ((0, _mediaClient.isExternalImageIdentifier)(_identifier)) {
       _this.fireCommencedEvent();
 
-      _status = 'complete';
+      _status = 'loading-preview';
       var dataURI = _identifier.dataURI;
       _cardPreview = {
         dataURI: dataURI,
         orientation: 1,
         source: 'external'
       };
-    }
-    /**
-     * If cardPreview is available from local cache, `isCardVisible`
-     * should be true to avoid flickers during re-mount of the component
-     */
+    } // 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);
 
-    var isCardVisible = _cardPreview ? true : !_this.props.isLazy;
     _this.state = {
       status: _status,
-      isCardVisible: isCardVisible,
+      isCardVisible: _isCardVisible,
       isPlayingFile: false,
+      shouldAutoplay: false,
       cardPreview: _cardPreview,
-      cardRef: null
+      cardRef: null,
+      isBannedLocalPreview: false,
+      previewDidRender: false
     };
     return _this;
   }
@@ -463,11 +614,21 @@ var CardBase = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.hasBeenMounted = true;
-      var isCardVisible = this.state.isCardVisible;
-      var identifier = this.props.identifier;
+      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)) {
         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);
       } // 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()
@@ -483,21 +644,30 @@ var CardBase = /*#__PURE__*/function (_Component) {
           prevIdentifier = prevProps.identifier,
           prevDimensions = prevProps.dimensions;
       var prevIsCardVisible = prevState.isCardVisible;
-      var _this$props8 = this.props,
-          mediaClient = _this$props8.mediaClient,
-          identifier = _this$props8.identifier,
-          dimensions = _this$props8.dimensions;
-      var _this$state2 = this.state,
-          isCardVisible = _this$state2.isCardVisible,
-          cardPreview = _this$state2.cardPreview;
+      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 turnedVisible = !prevIsCardVisible && isCardVisible;
+      var isNewMediaClient = prevMediaClient !== mediaClient;
 
       if ((0, _mediaClient.isExternalImageIdentifier)(identifier) && isDifferent) {
         this.fireCommencedEvent();
         var dataURI = identifier.dataURI;
         this.setState({
-          status: 'complete',
+          status: 'loading-preview',
           cardPreview: {
             dataURI: dataURI,
             orientation: 1,
@@ -507,8 +677,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
         });
       }
 
-      if ((0, _mediaClient.isFileIdentifier)(identifier) && (turnedVisible || prevMediaClient !== mediaClient || isDifferent || // TODO: should not resubscribe on resize. Only refetch
-      this.shouldRefetchImage(prevDimensions, dimensions))) {
+      if ((0, _mediaClient.isFileIdentifier)(identifier) && (turnedVisible || !!this.subscription && (isNewMediaClient || isDifferent))) {
         this.updateStateForIdentifier(identifier);
       }
 
@@ -519,6 +688,41 @@ var CardBase = /*#__PURE__*/function (_Component) {
           this.fireScreenEvent();
         }
       }
+
+      if ((0, _mediaClient.isFileIdentifier)(identifier) && fileState && (0, _getCardPreview.shouldResolvePreview)({
+        status: status,
+        fileState: fileState,
+        dimensions: dimensions,
+        prevDimensions: prevDimensions,
+        featureFlags: featureFlags,
+        hasCardPreview: !!cardPreview,
+        isBannedLocalPreview: isBannedLocalPreview
+      })) {
+        this.resolvePreview(identifier, fileState);
+      }
+
+      if (turnedVisible && this.props.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 (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, _mediaClient.isProcessedFileState)(fileState);
+
+      if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && videoAvailableToPlay && (0, _mediaCommon.getMediaFeatureFlag)('timestampOnVideo', this.props.featureFlags)) {
+        this.setState({
+          isPlayingFile: true
+        });
+      }
     }
   }, {
     key: "componentWillUnmount",
@@ -539,6 +743,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
       var _this2 = this;
 
       var mediaClient = this.props.mediaClient;
+      var isBannedLocalPreview = this.state.isBannedLocalPreview;
       var id = identifier.id,
           collectionName = identifier.collectionName,
           occurrenceKey = identifier.occurrenceKey;
@@ -547,157 +752,58 @@ var CardBase = /*#__PURE__*/function (_Component) {
         collectionName: collectionName,
         occurrenceKey: occurrenceKey
       }).subscribe({
-        next: function () {
-          var _next = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(fileState) {
-            var thisCardStatusUpdateTimestamp, filePreviewStatus, status, cardPreview, error, wrappedError;
-            return _regenerator.default.wrap(function _callee$(_context) {
-              while (1) {
-                switch (_context.prev = _context.next) {
-                  case 0:
-                    _this2.lastFileState = fileState;
-                    thisCardStatusUpdateTimestamp = (performance || Date).now();
-                    filePreviewStatus = (0, _getCardPreview.extractFilePreviewStatus)(fileState, _this2.props.featureFlags);
-                    status = (0, _getCardStatus.getCardStatus)(fileState.status, filePreviewStatus);
-
-                    _this2.safeSetState({
-                      fileState: fileState
-                    });
-
-                    if (!(0, _getCardPreview.shouldGetCardPreview)(status, filePreviewStatus)) {
-                      _context.next = 17;
-                      break;
-                    }
-
-                    _context.prev = 6;
-                    _context.next = 9;
-                    return (0, _getCardPreview.getCardPreview)(_this2.getCardPreviewParams(id, collectionName, fileState));
-
-                  case 9:
-                    cardPreview = _context.sent;
-
-                    if (['loading-preview', 'processing'].includes(status)) {
-                      status = 'complete';
-                    }
-
-                    _context.next = 17;
-                    break;
-
-                  case 13:
-                    _context.prev = 13;
-                    _context.t0 = _context["catch"](6);
-                    wrappedError = (0, _errors.ensureMediaCardError)('preview-fetch', _context.t0); // If remote preview fails, we set status 'error'
-                    // If the local preview fails (i.e, no remote preview available),
-                    // we can stay in the same status until there is a remote preview available
-
-                    if ((0, _errors.isRemotePreviewError)(wrappedError)) {
-                      status = 'error';
-                      error = wrappedError;
-                    }
-
-                  case 17:
-                    if (_this2.isLatestCardStatusUpdate(thisCardStatusUpdateTimestamp)) {
-                      // These status and progress must not override values representing more recent FileState
-
-                      /* next() start        some await() delay in next()        status & progress update
-                       * -------                    ------------------           ------------------------
-                       *   |----[1]FileState:uploading------>|                                 |
-                       *   |                                 |                                 |
-                       *   |----[2]FileState:uploading------>|                                 |
-                       *   |                                 |                                 |
-                       *   |                                 |----[2]FileState:uploading------>| Update status to `uploading`
-                       *   |----[3]FileState:processing----->|                                 |
-                       *   |                                 |----[3]FileState:processing----->| Update status to `complete`
-                       *   |                                 |                                 |
-                       *   |                                 |----[1]FileState:uploading------>| We do not want to update status to `uploading` again!
-                       *
-                       */
-                      if (status === 'error' && (0, _mediaClient.isErrorFileState)(fileState) && !error) {
-                        error = new _errors.MediaCardError('error-file-state', new Error(fileState.message));
-                      }
-
-                      _this2.safeSetState({
-                        status: status,
-                        cardPreview: cardPreview,
-                        progress: status === 'uploading' && fileState.status === 'uploading' ? fileState.progress : 1,
-                        error: status === 'error' && error ? error : undefined
-                      });
-
-                      _this2.lastCardStatusUpdateTimestamp = thisCardStatusUpdateTimestamp;
-                    }
-
-                  case 18:
-                  case "end":
-                    return _context.stop();
-                }
-              }
-            }, _callee, null, [[6, 13]]);
-          }));
+        next: function next(fileState) {
+          var featureFlags = _this2.props.featureFlags;
+          var newState = (0, _cardState.getCardStateFromFileState)(fileState, isBannedLocalPreview, featureFlags);
 
-          function next(_x) {
-            return _next.apply(this, arguments);
-          }
-
-          return next;
-        }(),
+          _this2.safeSetState(newState);
+        },
         error: function error(e) {
-          // If file state subscription decides that the card is complete
-          // and later there is an error, we won't change the card's status.
-          if (_this2.state.status === 'complete') {
-            return;
-          }
-
-          var errorReason = _this2.fileAttributes.fileStatus === 'uploading' ? 'upload' : 'metadata-fetch';
+          var errorReason = _this2.state.status === 'uploading' ? 'upload' : 'metadata-fetch';
           var error = new _errors.MediaCardError(errorReason, e);
 
           _this2.safeSetState({
             error: error,
             status: 'error'
           });
-
-          _this2.lastCardStatusUpdateTimestamp = (performance || Date).now();
         }
       });
     }
+  }, {
+    key: "requestedDimensions",
+    get: function get() {
+      var dimensions = this.props.dimensions;
+
+      var _ref3 = this.state || {},
+          element = _ref3.cardRef;
+
+      return (0, _getDataURIDimension.getRequestedDimensions)({
+        dimensions: dimensions,
+        element: element
+      });
+    }
   }, {
     key: "metadata",
     get: function get() {
-      var identifier = this.props.identifier;
-      return (0, _mediaClient.isFileIdentifier)(identifier) ? this.state.fileState ? (0, _metadata.getFileDetails)(this.state.fileState) : {
-        id: identifier.id
-      } : {
-        id: identifier.mediaItemType,
-        name: identifier.name || identifier.dataURI,
-        mediaType: 'image'
-      };
+      var _this$state4;
+
+      return (0, _metadata.getFileDetails)(this.props.identifier, (_this$state4 = this.state) === null || _this$state4 === void 0 ? void 0 : _this$state4.fileState);
     }
   }, {
     key: "fileAttributes",
     get: function get() {
-      var _this$lastFileState;
+      var _this$state5, _this$state5$fileStat;
 
-      return (0, _analytics.getFileAttributes)(this.metadata, (_this$lastFileState = this.lastFileState) === null || _this$lastFileState === void 0 ? void 0 : _this$lastFileState.status);
+      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);
     }
   }, {
     key: "fireOperationalEvent",
     value: function fireOperationalEvent() {
-      var timeElapsedTillCommenced = this.timeElapsedTillCommenced;
-      var _this$state3 = this.state,
-          status = _this$state3.status,
-          cardPreview = _this$state3.cardPreview,
-          error = _this$state3.error;
+      var _this$state6 = this.state,
+          status = _this$state6.status,
+          error = _this$state6.error;
       var createAnalyticsEvent = this.props.createAnalyticsEvent;
-      var timeElapsedTillEvent = performance.now();
-      var durationSinceCommenced = timeElapsedTillCommenced && timeElapsedTillEvent - timeElapsedTillCommenced;
-      var performanceAttributes = {
-        overall: {
-          durationSincePageStart: timeElapsedTillEvent,
-          durationSinceCommenced: durationSinceCommenced
-        }
-      };
-      createAnalyticsEvent && (0, _cardAnalytics.fireOperationalEvent)(createAnalyticsEvent, status, this.fileAttributes, performanceAttributes, {
-        cardPreview: cardPreview,
-        error: error
-      });
+      createAnalyticsEvent && (0, _cardAnalytics.fireOperationalEvent)(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), error);
     }
   }, {
     key: "fireCommencedEvent",
@@ -715,11 +821,11 @@ var CardBase = /*#__PURE__*/function (_Component) {
     get: function get() {
       var _this3 = this;
 
-      var _this$props9 = this.props,
-          _this$props9$actions = _this$props9.actions,
-          actions = _this$props9$actions === void 0 ? [] : _this$props9$actions,
-          identifier = _this$props9.identifier,
-          shouldEnableDownloadButton = _this$props9.shouldEnableDownloadButton;
+      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 status = this.state.status;
       var metadata = this.metadata;
 
@@ -741,20 +847,15 @@ var CardBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$lastFileState2;
-
-      var _this$state4 = this.state,
-          isPlayingFile = _this$state4.isPlayingFile,
-          mediaViewerSelectedItem = _this$state4.mediaViewerSelectedItem;
+      var _this$state7 = this.state,
+          isPlayingFile = _this$state7.isPlayingFile,
+          mediaViewerSelectedItem = _this$state7.mediaViewerSelectedItem;
 
       var innerContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isPlayingFile ? this.renderInlinePlayer() : this.renderCard(), mediaViewerSelectedItem ? this.renderMediaViewer() : null);
 
-      var content = this.context.intl ? innerContent : /*#__PURE__*/_react.default.createElement(_reactIntl.IntlProvider, {
+      return this.props.intl ? innerContent : /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
         locale: "en"
       }, innerContent);
-      return /*#__PURE__*/_react.default.createElement(_fileAttributesContext.FileAttributesProvider, {
-        data: (0, _analytics.getFileAttributes)(this.metadata, (_this$lastFileState2 = this.lastFileState) === null || _this$lastFileState2 === void 0 ? void 0 : _this$lastFileState2.status)
-      }, content);
     }
   }]);
   return CardBase;
@@ -769,10 +870,6 @@ exports.CardBase = CardBase;
   // Media Feature Flag defaults are defined in @atlaskit/media-common
   featureFlags: {}
 });
-(0, _defineProperty2.default)(CardBase, "contextTypes", {
-  // Required to detect a parent IntlProvider
-  intl: _reactIntl.intlShape
-});
 var Card = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: _version.version,
   packageName: _version.name,
@@ -780,5 +877,7 @@ var Card = (0, _mediaCommon.withMediaAnalyticsContext)({
   component: 'mediaCard'
 }, {
   filterFeatureFlags: _cardAnalytics.relevantFeatureFlagNames
-})((0, _analyticsNext.withAnalyticsEvents)()(CardBase));
+})((0, _analyticsNext.withAnalyticsEvents)()((0, _reactIntlNext.injectIntl)(CardBase, {
+  enforceContext: false
+})));
 exports.Card = Card;