@atlaskit/media-card 72.0.0 → 73.1.1

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

@@ -9,15 +9,15 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-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) { _defineProperty(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) { _defineProperty(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 = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-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';
@@ -25,11 +25,11 @@ 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 } from './getCardPreview';
+import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview, getSSRCardPreview, isLocalPreview, isSSRPreview, isSSRClientPreview, fetchAndCacheRemotePreview } from './getCardPreview';
 import { getFileDetails } from '../../utils/metadata';
 import { InlinePlayer } from '../inlinePlayer';
 import { getFileAttributes } from '../../utils/analytics';
@@ -37,6 +37,8 @@ import { isLocalPreviewError, MediaCardError, ensureMediaCardError, ImageLoadErr
 import { fireOperationalEvent as _fireOperationalEvent, fireCommencedEvent as _fireCommencedEvent, relevantFeatureFlagNames, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
 import getDocument from '../../utils/document';
 import { getCardStateFromFileState, createStateUpdater } from './cardState';
+import { isProcessedFileState } from '@atlaskit/media-client';
+import { getMediaFeatureFlag } from '@atlaskit/media-common';
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
 
@@ -53,6 +55,10 @@ export var CardBase = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "hasBeenMounted", false);
 
+    _defineProperty(_assertThisInitialized(_this), "viewportPreAnchorRef", /*#__PURE__*/createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "viewportPostAnchorRef", /*#__PURE__*/createRef());
+
     _defineProperty(_assertThisInitialized(_this), "timeElapsedTillCommenced", performance.now());
 
     _defineProperty(_assertThisInitialized(_this), "getImageURLParams", function (_ref) {
@@ -109,6 +115,28 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       };
     });
 
+    _defineProperty(_assertThisInitialized(_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;
+      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
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "resolveSSRPreview", function (identifier, ssr) {
+      var mediaClient = _this.props.mediaClient;
+
+      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
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "resolvePreview", /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(identifier, fileState) {
         var params, cardPreview, wrappedError;
@@ -180,20 +208,31 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "onImageError", function () {
       var cardPreview = _this.state.cardPreview;
       var error = new ImageLoadError(cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source);
+      var isLocal = cardPreview && isLocalPreview(cardPreview);
+      var isSSR = cardPreview && isSSRClientPreview(cardPreview);
 
-      if (cardPreview !== null && cardPreview !== void 0 && cardPreview.source && ['local', 'cache-local'].includes(cardPreview.source)) {
-        var _this$props3 = _this.props,
-            identifier = _this$props3.identifier,
-            _this$props3$dimensio = _this$props3.dimensions,
-            dimensions = _this$props3$dimensio === void 0 ? {} : _this$props3$dimensio;
-        isFileIdentifier(identifier) && removeCardPreviewFromCache(identifier.id, dimensions);
+      if (isLocal || isSSR) {
+        var updateState = {
+          cardPreview: undefined
+        };
 
-        _this.safeSetState({
-          cardPreview: undefined,
-          isBannedLocalPreview: true
-        });
+        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;
+        isFileIdentifier(identifier) && removeCardPreviewFromCache(identifier.id, dimensions);
 
-        _this.fireLocalPreviewErrorEvent(error);
+        _this.safeSetState(updateState);
       } else {
         _this.safeSetState({
           status: 'error',
@@ -248,10 +287,10 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onCardViewClick", function (event, analyticsEvent) {
-      var _this$props4 = _this.props,
-          identifier = _this$props4.identifier,
-          useInlinePlayer = _this$props4.useInlinePlayer,
-          shouldOpenMediaViewer = _this$props4.shouldOpenMediaViewer;
+      var _this$props5 = _this.props,
+          identifier = _this$props5.identifier,
+          useInlinePlayer = _this$props5.useInlinePlayer,
+          shouldOpenMediaViewer = _this$props5.shouldOpenMediaViewer;
       var cardPreview = _this.state.cardPreview;
 
       var _assertThisInitialize2 = _assertThisInitialized(_this),
@@ -267,7 +306,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
 
       if (useInlinePlayer && isVideo && !!cardPreview) {
         _this.setState({
-          isPlayingFile: true
+          isPlayingFile: true,
+          shouldAutoplay: true
         });
       } else if (shouldOpenMediaViewer) {
         var mediaViewerSelectedItem;
@@ -306,18 +346,20 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderInlinePlayer", function () {
-      var _this$props5 = _this.props,
-          identifier = _this$props5.identifier,
-          mediaClient = _this$props5.mediaClient,
-          dimensions = _this$props5.dimensions,
-          selected = _this$props5.selected,
-          testId = _this$props5.testId,
-          originalDimensions = _this$props5.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.createElement(InlinePlayer, {
         mediaClient: mediaClient,
         dimensions: dimensions,
         originalDimensions: originalDimensions,
         identifier: identifier,
+        autoplay: !!shouldAutoplay,
         onError: _this.onInlinePlayerError,
         onClick: _this.onClick,
         selected: selected,
@@ -355,12 +397,12 @@ export var CardBase = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "renderMediaViewer", function () {
       var mediaViewerSelectedItem = _this.state.mediaViewerSelectedItem;
-      var _this$props6 = _this.props,
-          mediaClient = _this$props6.mediaClient,
-          identifier = _this$props6.identifier,
-          mediaViewerDataSource = _this$props6.mediaViewerDataSource,
-          contextId = _this$props6.contextId,
-          featureFlags = _this$props6.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;
@@ -382,20 +424,21 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderCard", function () {
-      var _this$props7 = _this.props,
-          identifier = _this$props7.identifier,
-          isLazy = _this$props7.isLazy,
-          appearance = _this$props7.appearance,
-          resizeMode = _this$props7.resizeMode,
-          dimensions = _this$props7.dimensions,
-          selectable = _this$props7.selectable,
-          selected = _this$props7.selected,
-          disableOverlay = _this$props7.disableOverlay,
-          alt = _this$props7.alt,
-          testId = _this$props7.testId,
-          featureFlags = _this$props7.featureFlags,
-          titleBoxBgColor = _this$props7.titleBoxBgColor,
-          titleBoxIcon = _this$props7.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,
@@ -408,7 +451,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       var dataURI = _this$state$cardPrevi.dataURI,
           orientation = _this$state$cardPrevi.orientation,
           error = _this$state.error,
-          cardRef = _this$state.cardRef;
+          cardRef = _this$state.cardRef,
+          isCardVisible = _this$state.isCardVisible;
 
       var _assertThisInitialize3 = _assertThisInitialized(_this),
           metadata = _assertThisInitialize3.metadata;
@@ -417,8 +461,13 @@ export var CardBase = /*#__PURE__*/function (_Component) {
           onCardViewClick = _assertThisInitialize4.onCardViewClick,
           onDisplayImage = _assertThisInitialize4.onDisplayImage,
           actions = _assertThisInitialize4.actions,
-          onMouseEnter = _assertThisInitialize4.onMouseEnter;
+          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.createElement(CardView, {
         status: status,
         error: error,
@@ -444,12 +493,22 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         titleBoxBgColor: titleBoxBgColor,
         titleBoxIcon: titleBoxIcon,
         onImageError: _this.onImageError,
-        onImageLoad: _this.onImageLoad
+        onImageLoad: _this.onImageLoad,
+        nativeLazyLoad: nativeLazyLoad,
+        forceSyncDisplay: forceSyncDisplay
       });
       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(_assertThisInitialized(_this), "onCardInViewport", function () {
@@ -492,14 +551,21 @@ export var CardBase = /*#__PURE__*/function (_Component) {
 
     var _cardPreview;
 
-    var _this$props8 = _this.props,
-        _identifier = _this$props8.identifier,
-        _this$props8$dimensio = _this$props8.dimensions,
-        _dimensions = _this$props8$dimensio === void 0 ? {} : _this$props8$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 (isFileIdentifier(_identifier)) {
       var id = _identifier.id;
       _cardPreview = getCardPreviewFromCache(id, _dimensions);
+
+      if (!_cardPreview && _ssr) {
+        _this.fireCommencedEvent();
+
+        _cardPreview = _this.resolveSSRPreview(_identifier, _ssr);
+      }
     } else if (isExternalImageIdentifier(_identifier)) {
       _this.fireCommencedEvent();
 
@@ -510,15 +576,19 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         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 && !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,
       isBannedLocalPreview: false,
@@ -531,11 +601,21 @@ export 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 && 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);
       } // 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()
@@ -551,18 +631,21 @@ export var CardBase = /*#__PURE__*/function (_Component) {
           prevIdentifier = prevProps.identifier,
           prevDimensions = prevProps.dimensions;
       var prevIsCardVisible = prevState.isCardVisible;
-      var _this$props9 = this.props,
-          mediaClient = _this$props9.mediaClient,
-          identifier = _this$props9.identifier,
-          dimensions = _this$props9.dimensions,
-          featureFlags = _this$props9.featureFlags;
-      var _this$state2 = this.state,
-          isCardVisible = _this$state2.isCardVisible,
-          cardPreview = _this$state2.cardPreview,
-          status = _this$state2.status,
-          fileState = _this$state2.fileState,
-          isBannedLocalPreview = _this$state2.isBannedLocalPreview,
-          previewDidRender = _this$state2.previewDidRender;
+      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 = isDifferentIdentifier(prevIdentifier, identifier);
       var turnedVisible = !prevIsCardVisible && isCardVisible;
       var isNewMediaClient = prevMediaClient !== mediaClient;
@@ -605,13 +688,28 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         this.resolvePreview(identifier, fileState);
       }
 
+      if (turnedVisible && this.props.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 (previewDidRender && // We should't complete if status is uploading
-      ['loading', 'loading-preview', 'processing'].includes(status)) {
+      ['loading-preview', 'processing'].includes(status)) {
         this.safeSetState({
           status: 'complete'
         });
         this.unsubscribe();
       }
+
+      var isVideo = this.fileAttributes.fileMediatype === 'video';
+      var videoAvailableToPlay = fileState && isProcessedFileState(fileState);
+
+      if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && videoAvailableToPlay && getMediaFeatureFlag('timestampOnVideo', this.props.featureFlags)) {
+        this.setState({
+          isPlayingFile: true
+        });
+      }
     }
   }, {
     key: "componentWillUnmount",
@@ -662,7 +760,10 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     key: "requestedDimensions",
     get: function get() {
       var dimensions = this.props.dimensions;
-      var element = this.state.cardRef;
+
+      var _ref3 = this.state || {},
+          element = _ref3.cardRef;
+
       return getRequestedDimensions({
         dimensions: dimensions,
         element: element
@@ -671,23 +772,23 @@ export var CardBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "metadata",
     get: function get() {
-      var _this$state3;
+      var _this$state4;
 
-      return getFileDetails(this.props.identifier, (_this$state3 = this.state) === null || _this$state3 === void 0 ? void 0 : _this$state3.fileState);
+      return 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$state4, _this$state4$fileStat;
+      var _this$state5, _this$state5$fileStat;
 
-      return getFileAttributes(this.metadata, (_this$state4 = this.state) === null || _this$state4 === void 0 ? void 0 : (_this$state4$fileStat = _this$state4.fileState) === null || _this$state4$fileStat === void 0 ? void 0 : _this$state4$fileStat.status);
+      return 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 _this$state5 = this.state,
-          status = _this$state5.status,
-          error = _this$state5.error;
+      var _this$state6 = this.state,
+          status = _this$state6.status,
+          error = _this$state6.error;
       var createAnalyticsEvent = this.props.createAnalyticsEvent;
       createAnalyticsEvent && _fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), error);
     }
@@ -707,11 +808,11 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     get: function get() {
       var _this3 = this;
 
-      var _this$props10 = this.props,
-          _this$props10$actions = _this$props10.actions,
-          actions = _this$props10$actions === void 0 ? [] : _this$props10$actions,
-          identifier = _this$props10.identifier,
-          shouldEnableDownloadButton = _this$props10.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;
 
@@ -733,11 +834,11 @@ export var CardBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$state6 = this.state,
-          isPlayingFile = _this$state6.isPlayingFile,
-          mediaViewerSelectedItem = _this$state6.mediaViewerSelectedItem;
+      var _this$state7 = this.state,
+          isPlayingFile = _this$state7.isPlayingFile,
+          mediaViewerSelectedItem = _this$state7.mediaViewerSelectedItem;
       var 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, {
+      return this.props.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
         locale: "en"
       }, innerContent);
     }
@@ -755,11 +856,6 @@ _defineProperty(CardBase, "defaultProps", {
   featureFlags: {}
 });
 
-_defineProperty(CardBase, "contextTypes", {
-  // Required to detect a parent IntlProvider
-  intl: intlShape
-});
-
 export var Card = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,
@@ -767,4 +863,6 @@ export var Card = withMediaAnalyticsContext({
   component: 'mediaCard'
 }, {
   filterFeatureFlags: relevantFeatureFlagNames
-})(withAnalyticsEvents()(CardBase));
+})(withAnalyticsEvents()(injectIntl(CardBase, {
+  enforceContext: false
+})));