@atlaskit/media-card 72.1.0 → 73.2.0

package/dist/cjs/utils/lightCards/styled.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AnimatedWrapper = exports.Wrapper = exports.blinkLoadingAnimation = void 0;
+exports.blinkLoadingAnimation = exports.Wrapper = exports.AnimatedWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

package/dist/cjs/utils/objectURLCache.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createObjectURLCache = exports.ObjectURLCache = exports.PREVIEW_CACHE_LRU_SIZE = void 0;
+exports.createObjectURLCache = exports.PREVIEW_CACHE_LRU_SIZE = exports.ObjectURLCache = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

package/dist/cjs/utils/printScript.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.printScript = exports.printFunctionCall = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var printParam = function printParam(param) {
+  if (typeof param === 'string') {
+    return "'".concat(param, "'");
+  } else if ((0, _typeof2.default)(param) === 'object') {
+    return JSON.stringify(param);
+  } else if (param === undefined) {
+    return 'undefined';
+  }
+
+  return param;
+};
+
+var printParams = function printParams(args) {
+  return args.map(function (arg) {
+    return printParam(arg);
+  }).join(',');
+};
+
+var printFunctionCall = function printFunctionCall(fn) {
+  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    args[_key - 1] = arguments[_key];
+  }
+
+  return "(".concat(fn.toString(), ")(").concat(printParams(args), ");");
+};
+
+exports.printFunctionCall = printFunctionCall;
+
+var printScript = function printScript(statements) {
+  return "(function(){\n  ".concat(statements.join(';'), "\n})();\n");
+};
+
+exports.printScript = printScript;

package/dist/cjs/utils/viewportDetector.js

@@ -5,12 +5,10 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ViewportDetector = exports.createViewportDetector = void 0;
+exports.ViewportDetector = exports.ViewportAnchor = exports.ABS_VIEWPORT_ANCHOR_OFFSET_TOP = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _lazyContent = require("./lazyContent");
-
 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; }
@@ -21,6 +19,29 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
+/**
+ * As IntersectionObserver::rootMargin doesn't work within IFrames, we use an empty div + dynamic offsetTop to eagerly detect cards entering viewport.
+ * Using this approach, we can lazy load cards ABS_VIEWPORT_ANCHOR_OFFSET_TOP px before they enter viewport.
+ */
+var ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900; //px
+
+exports.ABS_VIEWPORT_ANCHOR_OFFSET_TOP = ABS_VIEWPORT_ANCHOR_OFFSET_TOP;
+var ViewportAnchor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  if (typeof IntersectionObserver === 'undefined') {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    className: "media-card-viewport-anchor",
+    style: {
+      position: 'absolute',
+      top: "".concat(props.offsetTop, "px")
+    }
+  });
+});
+exports.ViewportAnchor = ViewportAnchor;
+
 var createIntersectionObserverCallback = function createIntersectionObserverCallback(onVisible) {
   return function (entries, observer) {
     var _iterator = _createForOfIteratorHelper(entries),
@@ -44,36 +65,42 @@ var createIntersectionObserverCallback = function createIntersectionObserverCall
   };
 };
 
-var Observer = function Observer(_ref) {
+var ViewportObserver = function ViewportObserver(_ref) {
   var onVisible = _ref.onVisible,
+      cardEl = _ref.cardEl,
       children = _ref.children,
-      targetRef = _ref.targetRef;
+      preAnchorRef = _ref.preAnchorRef,
+      postAnchorRef = _ref.postAnchorRef;
   (0, _react.useEffect)(function () {
     // IntersectionObserver uses root and target elements to detect intersections, defaulting root to the viewport
     var intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisible));
-    targetRef && intersectionObserver.observe(targetRef);
+    (preAnchorRef === null || preAnchorRef === void 0 ? void 0 : preAnchorRef.current) && intersectionObserver.observe(preAnchorRef.current);
+    (postAnchorRef === null || postAnchorRef === void 0 ? void 0 : postAnchorRef.current) && intersectionObserver.observe(postAnchorRef.current);
+    cardEl && intersectionObserver.observe(cardEl);
     return function () {
       intersectionObserver.disconnect();
     };
-  }, [targetRef, onVisible]);
+  }, [cardEl, preAnchorRef, postAnchorRef, onVisible]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
 };
 
-var createViewportDetector = function createViewportDetector(isIntersectionObserverSupported) {
-  return function (_ref2) {
-    var children = _ref2.children,
-        targetRef = _ref2.targetRef,
-        onVisible = _ref2.onVisible;
-    return isIntersectionObserverSupported ? /*#__PURE__*/_react.default.createElement(Observer, {
-      targetRef: targetRef,
-      onVisible: onVisible
-    }, children) : /*#__PURE__*/_react.default.createElement(_lazyContent.LazyContent, {
-      placeholder: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children),
-      onRender: onVisible
-    }, children);
-  };
+var ViewportDetector = function ViewportDetector(_ref2) {
+  var cardEl = _ref2.cardEl,
+      preAnchorRef = _ref2.preAnchorRef,
+      postAnchorRef = _ref2.postAnchorRef,
+      onVisible = _ref2.onVisible,
+      children = _ref2.children;
+
+  if (typeof IntersectionObserver === 'undefined') {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+  }
+
+  return /*#__PURE__*/_react.default.createElement(ViewportObserver, {
+    cardEl: cardEl,
+    preAnchorRef: preAnchorRef,
+    postAnchorRef: postAnchorRef,
+    onVisible: onVisible
+  }, children);
 };
 
-exports.createViewportDetector = createViewportDetector;
-var ViewportDetector = createViewportDetector(typeof IntersectionObserver !== 'undefined');
 exports.ViewportDetector = ViewportDetector;

package/dist/cjs/version.json

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

package/dist/es2019/files/cardImageView/index.js

@@ -138,6 +138,22 @@ export class FileCardImageView extends Component {
       })));
     });
 
+    _defineProperty(this, "onImageLoad", () => {
+      const {
+        onImageLoad,
+        cardPreview
+      } = this.props;
+      onImageLoad && onImageLoad(cardPreview);
+    });
+
+    _defineProperty(this, "onImageError", () => {
+      const {
+        onImageError,
+        cardPreview
+      } = this.props;
+      onImageError && onImageError(cardPreview);
+    });
+
     _defineProperty(this, "renderMediaImage", () => {
       const {
         status,
@@ -147,9 +163,7 @@ export class FileCardImageView extends Component {
         mimeType,
         previewOrientation,
         onDisplayImage,
-        alt,
-        onImageLoad,
-        onImageError
+        alt
       } = this.props;
 
       if (!shouldDisplayImageThumbnail(status, mediaItemType, dataURI, mediaType, mimeType)) {
@@ -167,8 +181,8 @@ export class FileCardImageView extends Component {
         crop: this.isCropped,
         stretch: this.isStretched,
         previewOrientation: previewOrientation,
-        onImageLoad: onImageLoad,
-        onImageError: onImageError
+        onImageLoad: this.onImageLoad,
+        onImageError: this.onImageError
       });
     });
 

package/dist/es2019/root/card/cardAnalytics.js

@@ -1,5 +1,5 @@
 import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
-export const relevantFeatureFlagNames = ['newCardExperience', 'captions'];
+export const relevantFeatureFlagNames = ['newCardExperience', 'captions', 'timestampOnVideo'];
 export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, error) => {
   const fireEvent = payload => fireMediaCardEvent(payload, createAnalyticsEvent);
 

package/dist/es2019/root/card/getCardPreview/filePreviewStatus.js

@@ -31,5 +31,8 @@ export const isPreviewableStatus = (cardStatus, {
   hasPreview,
   isSupportedByBrowser
 }) => {
-  return hasPreview && isPreviewable && (cardStatus === 'complete' || cardStatus === 'loading-preview' || cardStatus === 'uploading' || cardStatus === 'processing' && isSupportedByBrowser);
+  return hasPreview && isPreviewable && (cardStatus === 'complete' || cardStatus === 'loading-preview' || cardStatus === 'uploading' || // For Video, we can have local or remote preview while processing.
+  // Then, we only want to show the thumbnail if the file is supported by the browser,
+  // this way we prevent playing unsupported videos that are not procesed
+  cardStatus === 'processing' && isSupportedByBrowser);
 };

package/dist/es2019/root/card/getCardPreview/index.js

@@ -165,6 +165,7 @@ export const isSSRClientPreview = preview => {
   const ssrClientSources = ['ssr-client', 'cache-ssr-client'];
   return ssrClientSources.includes(preview.source);
 };
+export const isSSRDataPreview = preview => preview.source === 'ssr-data';
 export const fetchAndCacheRemotePreview = async (mediaClient, id, dimensions, params, mediaBlobUrlAttrs) => {
   const remotePreview = await getCardPreviewFromBackend(mediaClient, id, params);
   return extendAndCachePreview(id, dimensions, remotePreview, mediaBlobUrlAttrs);

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

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { Component } from 'react';
+import React, { Component, createRef } from 'react';
 import ReactDOM from 'react-dom';
 import { version as packageVersion, name as packageName } from '../../version.json';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -7,18 +7,23 @@ import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import { globalMediaEventEmitter, isDifferentIdentifier, isFileIdentifier, RECENTS_COLLECTION, isImageRepresentationReady, isExternalImageIdentifier, imageResizeModeToFileImageMode } from '@atlaskit/media-client';
 import { MediaViewer } from '@atlaskit/media-viewer';
-import { IntlProvider, intlShape } from 'react-intl';
+import { injectIntl, IntlProvider } from 'react-intl-next';
 import { CardView } from '../cardView';
-import { ViewportDetector } from '../../utils/viewportDetector';
+import { ABS_VIEWPORT_ANCHOR_OFFSET_TOP, ViewportDetector, ViewportAnchor } from '../../utils/viewportDetector';
 import { getRequestedDimensions } from '../../utils/getDataURIDimension';
-import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview, getSSRCardPreview, isLocalPreview, isSSRPreview, isSSRClientPreview, fetchAndCacheRemotePreview } from './getCardPreview';
+import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview, getSSRCardPreview, isLocalPreview, isSSRPreview, isSSRClientPreview, isSSRDataPreview, fetchAndCacheRemotePreview } from './getCardPreview';
 import { getFileDetails } from '../../utils/metadata';
 import { InlinePlayer } from '../inlinePlayer';
-import { getFileAttributes } from '../../utils/analytics';
+import { getFileAttributes, extractErrorInfo } from '../../utils/analytics';
 import { isLocalPreviewError, MediaCardError, ensureMediaCardError, ImageLoadError } from '../../errors';
 import { fireOperationalEvent, fireCommencedEvent, relevantFeatureFlagNames, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
 import getDocument from '../../utils/document';
+import { StoreSSRDataScript, getSSRData } from '../../utils/globalScope';
 import { getCardStateFromFileState, createStateUpdater } from './cardState';
+import { isProcessedFileState } from '@atlaskit/media-client';
+import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { isBigger } from '../../utils/dimensionComparer';
+import { getMediaCardCursor } from '../../utils/getMediaCardCursor';
 export class CardBase extends Component {
   // We initialise timeElapsedTillCommenced
   // to avoid extra branching on a possibly undefined value.
@@ -27,6 +32,10 @@ export class CardBase extends Component {
 
     _defineProperty(this, "hasBeenMounted", false);
 
+    _defineProperty(this, "viewportPreAnchorRef", /*#__PURE__*/createRef());
+
+    _defineProperty(this, "viewportPostAnchorRef", /*#__PURE__*/createRef());
+
     _defineProperty(this, "timeElapsedTillCommenced", performance.now());
 
     _defineProperty(this, "getImageURLParams", ({
@@ -100,15 +109,19 @@ export class CardBase extends Component {
       });
     });
 
-    _defineProperty(this, "resolveSSRPreview", (identifier, ssr) => {
+    _defineProperty(this, "refetchSSRPreview", async identifier => {
       const {
-        mediaClient
+        mediaClient,
+        dimensions = {}
       } = this.props;
 
       try {
-        return 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
+        const cardPreview = await fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions, this.getImageURLParams(identifier), this.getMediaBlobUrlAttrs(identifier));
+        this.safeSetState({
+          cardPreview
+        });
+      } catch (e) {// No need to log this error.
+        // If preview fails, it will be refetched later
       }
     });
 
@@ -152,13 +165,18 @@ export class CardBase extends Component {
       };
     });
 
-    _defineProperty(this, "onImageError", () => {
+    _defineProperty(this, "onImageError", cardPreview => {
       const {
-        cardPreview
-      } = this.state;
+        cardPreview: currentPreview
+      } = this.state; // 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;
+      }
+
       const error = new ImageLoadError(cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source);
       const isLocal = cardPreview && isLocalPreview(cardPreview);
-      const isSSR = cardPreview && isSSRClientPreview(cardPreview);
+      const isSSR = cardPreview && (isSSRClientPreview(cardPreview) || isSSRDataPreview(cardPreview));
 
       if (isLocal || isSSR) {
         const updateState = {
@@ -188,7 +206,15 @@ export class CardBase extends Component {
       }
     });
 
-    _defineProperty(this, "onImageLoad", () => {
+    _defineProperty(this, "onImageLoad", cardPreview => {
+      const {
+        cardPreview: currentPreview
+      } = this.state; // 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
       });
@@ -260,7 +286,8 @@ export class CardBase extends Component {
 
       if (useInlinePlayer && isVideo && !!cardPreview) {
         this.setState({
-          isPlayingFile: true
+          isPlayingFile: true,
+          shouldAutoplay: true
         });
       } else if (shouldOpenMediaViewer) {
         let mediaViewerSelectedItem;
@@ -307,16 +334,22 @@ export class CardBase extends Component {
         testId,
         originalDimensions
       } = this.props;
+      const {
+        shouldAutoplay,
+        cardPreview
+      } = this.state;
       return /*#__PURE__*/React.createElement(InlinePlayer, {
         mediaClient: mediaClient,
         dimensions: dimensions,
         originalDimensions: originalDimensions,
         identifier: identifier,
+        autoplay: !!shouldAutoplay,
         onError: this.onInlinePlayerError,
         onClick: this.onClick,
         selected: selected,
         ref: this.setRef,
-        testId: testId
+        testId: testId,
+        cardPreview: cardPreview
       });
     });
 
@@ -396,7 +429,9 @@ export class CardBase extends Component {
         featureFlags,
         titleBoxBgColor,
         titleBoxIcon,
-        ssr
+        ssr,
+        useInlinePlayer,
+        shouldOpenMediaViewer
       } = this.props;
       const {
         mediaItemType
@@ -404,13 +439,7 @@ export class CardBase extends Component {
       const {
         status,
         progress,
-        cardPreview: {
-          dataURI,
-          orientation
-        } = {
-          dataURI: undefined,
-          orientation: 1
-        },
+        cardPreview,
         error,
         cardRef,
         isCardVisible
@@ -429,12 +458,13 @@ export class CardBase extends Component {
       const nativeLazyLoad = isLazy && !isCardVisible; // Force Media Image to always display img for SSR
 
       const forceSyncDisplay = !!ssr;
+      const mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, status === 'error' || status === 'failed-processing', !!this.state.cardPreview, metadata.mediaType);
       const card = /*#__PURE__*/React.createElement(CardView, {
         status: status,
         error: error,
         mediaItemType: mediaItemType,
         metadata: metadata,
-        dataURI: dataURI,
+        cardPreview: cardPreview,
         alt: alt,
         appearance: appearance,
         resizeMode: resizeMode,
@@ -447,7 +477,6 @@ export class CardBase extends Component {
         disableOverlay: disableOverlay,
         progress: progress,
         onDisplayImage: onDisplayImage,
-        previewOrientation: orientation,
         innerRef: this.setRef,
         testId: testId,
         featureFlags: featureFlags,
@@ -456,12 +485,41 @@ export class CardBase extends Component {
         onImageError: this.onImageError,
         onImageLoad: this.onImageLoad,
         nativeLazyLoad: nativeLazyLoad,
-        forceSyncDisplay: forceSyncDisplay
+        forceSyncDisplay: forceSyncDisplay,
+        mediaCardCursor: mediaCardCursor
       });
       return isLazy ? /*#__PURE__*/React.createElement(ViewportDetector, {
-        targetRef: cardRef,
+        cardEl: cardRef,
+        preAnchorRef: this.viewportPreAnchorRef,
+        postAnchorRef: this.viewportPostAnchorRef,
         onVisible: this.onCardInViewport
-      }, card) : card;
+      }, /*#__PURE__*/React.createElement(ViewportAnchor, {
+        ref: this.viewportPreAnchorRef,
+        offsetTop: -ABS_VIEWPORT_ANCHOR_OFFSET_TOP
+      }), card, /*#__PURE__*/React.createElement(ViewportAnchor, {
+        ref: this.viewportPostAnchorRef,
+        offsetTop: ABS_VIEWPORT_ANCHOR_OFFSET_TOP
+      })) : card;
+    });
+
+    _defineProperty(this, "storeSSRData", () => {
+      const {
+        ssr,
+        identifier
+      } = this.props;
+      const {
+        cardPreview: {
+          dataURI
+        } = {},
+        error
+      } = this.state;
+      const ssrDataError = !!error ? extractErrorInfo(error) : undefined;
+      return isFileIdentifier(identifier) && ssr === 'server' && /*#__PURE__*/React.createElement(StoreSSRDataScript, {
+        identifier: identifier,
+        dataURI: dataURI,
+        dimensions: this.requestedDimensions,
+        error: ssrDataError
+      });
     });
 
     _defineProperty(this, "onCardInViewport", () => {
@@ -508,10 +566,13 @@ export class CardBase extends Component {
 
     let _cardPreview;
 
+    let _error;
+
     const {
       identifier: _identifier,
       dimensions: _dimensions = {},
-      ssr: _ssr
+      ssr: _ssr,
+      mediaClient: _mediaClient
     } = this.props;
 
     if (isFileIdentifier(_identifier)) {
@@ -521,8 +582,26 @@ export class CardBase extends Component {
       _cardPreview = getCardPreviewFromCache(id, _dimensions);
 
       if (!_cardPreview && _ssr) {
-        this.fireCommencedEvent();
-        _cardPreview = this.resolveSSRPreview(_identifier, _ssr);
+        var _this$ssrData;
+
+        this.ssrData = getSSRData(_identifier);
+
+        if (_ssr === 'server' || !((_this$ssrData = this.ssrData) !== null && _this$ssrData !== void 0 && _this$ssrData.dataURI)) {
+          try {
+            _cardPreview = getSSRCardPreview(_ssr, _mediaClient, _identifier.id, this.getImageURLParams(_identifier), this.getMediaBlobUrlAttrs(_identifier));
+          } catch (e) {
+            // TODO: handle error in client MEX-770
+            // If we fail building the dataURI in server, we store the error in the state
+            // to be later stored in global scope and logged in client.
+            // We don't set the status = error to fall back to the spinner icon
+            _error = _ssr === 'server' ? e : undefined;
+          }
+        } else {
+          _cardPreview = {
+            dataURI: this.ssrData.dataURI,
+            source: 'ssr-data'
+          };
+        }
       }
     } else if (isExternalImageIdentifier(_identifier)) {
       this.fireCommencedEvent();
@@ -547,10 +626,12 @@ export class CardBase extends Component {
       status: _status,
       isCardVisible: _isCardVisible,
       isPlayingFile: false,
+      shouldAutoplay: false,
       cardPreview: _cardPreview,
       cardRef: null,
       isBannedLocalPreview: false,
-      previewDidRender: false
+      previewDidRender: false,
+      error: _error
     };
   }
 
@@ -562,17 +643,28 @@ export class CardBase extends Component {
     } = this.state;
     const {
       identifier,
-      ssr
+      ssr,
+      dimensions
     } = this.props;
 
     if (isCardVisible && isFileIdentifier(identifier)) {
       this.updateStateForIdentifier(identifier);
     }
 
-    if (isCardVisible && !!ssr && !!cardPreview && isSSRClientPreview(cardPreview) && 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 && isFileIdentifier(identifier)) {
+      var _this$ssrData2;
+
+      if (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 (isSSRDataPreview(cardPreview) && isBigger((_this$ssrData2 = this.ssrData) === null || _this$ssrData2 === void 0 ? void 0 : _this$ssrData2.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()
@@ -595,7 +687,9 @@ export class CardBase extends Component {
       mediaClient,
       identifier,
       dimensions,
-      featureFlags
+      featureFlags,
+      useInlinePlayer,
+      disableOverlay
     } = this.props;
     const {
       isCardVisible,
@@ -603,7 +697,8 @@ export class CardBase extends Component {
       status,
       fileState,
       isBannedLocalPreview,
-      previewDidRender
+      previewDidRender,
+      isPlayingFile
     } = this.state;
     const isDifferent = isDifferentIdentifier(prevIdentifier, identifier);
     const turnedVisible = !prevIsCardVisible && isCardVisible;
@@ -662,6 +757,15 @@ export class CardBase extends Component {
       });
       this.unsubscribe();
     }
+
+    const isVideo = this.fileAttributes.fileMediatype === 'video';
+    const videoAvailableToPlay = fileState && isProcessedFileState(fileState);
+
+    if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && videoAvailableToPlay && getMediaFeatureFlag('timestampOnVideo', this.props.featureFlags)) {
+      this.setState({
+        isPlayingFile: true
+      });
+    }
   }
 
   componentWillUnmount() {
@@ -790,8 +894,8 @@ export class CardBase extends Component {
       isPlayingFile,
       mediaViewerSelectedItem
     } = this.state;
-    const innerContent = /*#__PURE__*/React.createElement(React.Fragment, null, isPlayingFile ? this.renderInlinePlayer() : this.renderCard(), mediaViewerSelectedItem ? this.renderMediaViewer() : null);
-    return this.context.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
+    const innerContent = /*#__PURE__*/React.createElement(React.Fragment, null, isPlayingFile ? this.renderInlinePlayer() : this.renderCard(), mediaViewerSelectedItem ? this.renderMediaViewer() : null, this.storeSSRData());
+    return this.props.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
       locale: "en"
     }, innerContent);
   }
@@ -807,11 +911,6 @@ _defineProperty(CardBase, "defaultProps", {
   featureFlags: {}
 });
 
-_defineProperty(CardBase, "contextTypes", {
-  // Required to detect a parent IntlProvider
-  intl: intlShape
-});
-
 export const Card = withMediaAnalyticsContext({
   packageVersion,
   packageName,
@@ -819,4 +918,6 @@ export const Card = withMediaAnalyticsContext({
   component: 'mediaCard'
 }, {
   filterFeatureFlags: relevantFeatureFlagNames
-})(withAnalyticsEvents()(CardBase));
+})(withAnalyticsEvents()(injectIntl(CardBase, {
+  enforceContext: false
+})));