@atlaskit/media-card 71.0.0 → 73.1.0

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

@@ -1,26 +1,26 @@
 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';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
-import { addFileAttrsToUrl, globalMediaEventEmitter, isDifferentIdentifier, isFileIdentifier, isErrorFileState, RECENTS_COLLECTION, isImageRepresentationReady, isExternalImageIdentifier } from '@atlaskit/media-client';
+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 { shouldGetCardPreview, extractFilePreviewStatus, getCardPreview, getCardPreviewFromCache, getFilePreviewFromFileState } from './getCardPreview';
+import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview, getSSRCardPreview, isLocalPreview, isSSRPreview, isSSRClientPreview, fetchAndCacheRemotePreview } from './getCardPreview';
 import { getFileDetails } from '../../utils/metadata';
-import { isBigger } from '../../utils/dimensionComparer';
-import { getCardStatus } from './getCardStatus';
 import { InlinePlayer } from '../inlinePlayer';
 import { getFileAttributes } from '../../utils/analytics';
-import { FileAttributesProvider } from '../../utils/fileAttributesContext';
-import { isRemotePreviewError, MediaCardError, ensureMediaCardError } from '../../errors';
+import { isLocalPreviewError, MediaCardError, ensureMediaCardError, ImageLoadError } from '../../errors';
 import { fireOperationalEvent, 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 class CardBase extends Component {
   // We initialise timeElapsedTillCommenced
   // to avoid extra branching on a possibly undefined value.
@@ -29,77 +29,177 @@ export class CardBase extends Component {
 
     _defineProperty(this, "hasBeenMounted", false);
 
-    _defineProperty(this, "timeElapsedTillCommenced", performance.now());
+    _defineProperty(this, "viewportPreAnchorRef", /*#__PURE__*/createRef());
 
-    _defineProperty(this, "shouldRefetchImage", (current, next) => {
-      if (!current || !next) {
-        return false;
-      }
+    _defineProperty(this, "viewportPostAnchorRef", /*#__PURE__*/createRef());
 
-      return isBigger(current, next);
-    });
-
-    _defineProperty(this, "isLatestCardStatusUpdate", cardStatusUpdateTimestamp => !this.lastCardStatusUpdateTimestamp || this.lastCardStatusUpdateTimestamp <= cardStatusUpdateTimestamp);
+    _defineProperty(this, "timeElapsedTillCommenced", performance.now());
 
-    _defineProperty(this, "onLocalPreviewError", error => {// TODO: track local preview success rate
-      // https://product-fabric.atlassian.net/browse/MEX-774
-    });
+    _defineProperty(this, "getImageURLParams", ({
+      collectionName: collection
+    }) => ({
+      collection,
+      mode: imageResizeModeToFileImageMode(this.props.resizeMode),
+      ...this.requestedDimensions,
+      allowAnimated: true
+    }));
 
-    _defineProperty(this, "createAddContextToDataURI", (fileId, fileState, {
-      width,
-      height
-    }, collectionName) => dataURI => {
+    _defineProperty(this, "getMediaBlobUrlAttrs", (identifier, fileState) => {
+      const {
+        id,
+        collectionName: collection
+      } = identifier;
       const {
+        originalDimensions,
         contextId,
         alt
       } = this.props;
-
-      if (!contextId) {
-        return dataURI;
-      }
-
-      const metadata = getFileDetails(fileState);
-      return addFileAttrsToUrl(dataURI, {
-        id: fileId,
-        collection: collectionName,
+      const {
+        mimeType,
+        name,
+        size
+      } = getFileDetails(identifier, fileState);
+      return contextId ? {
+        id,
+        collection,
         contextId,
-        mimeType: metadata.mimeType,
-        name: metadata.name,
-        size: metadata.size,
-        width,
-        height,
+        mimeType,
+        name,
+        size,
+        ...(originalDimensions || this.requestedDimensions),
         alt
-      });
+      } : undefined;
     });
 
-    _defineProperty(this, "getCardPreviewParams", (id, collectionName, fileState) => {
+    _defineProperty(this, "getCardPreviewParams", (identifier, fileState) => {
+      const {
+        isBannedLocalPreview
+      } = this.state;
+      const {
+        id
+      } = identifier;
       const {
         dimensions = {},
-        originalDimensions,
-        resizeMode,
         mediaClient
       } = this.props;
-      const {
-        cardRef
-      } = this.state;
-      const requestedDimensions = getRequestedDimensions({
-        dimensions,
-        element: cardRef
-      });
       return {
         mediaClient,
         id,
-        collectionName,
         dimensions,
-        resizeMode,
-        requestedDimensions,
-        onLocalPreviewError: this.onLocalPreviewError,
-        filePreview: getFilePreviewFromFileState(fileState),
+        onLocalPreviewError: this.fireLocalPreviewErrorEvent,
+        filePreview: isBannedLocalPreview ? undefined : getFilePreviewFromFileState(fileState),
         isRemotePreviewReady: isImageRepresentationReady(fileState),
-        addContextToDataURI: this.createAddContextToDataURI(id, fileState, originalDimensions || requestedDimensions, collectionName)
+        imageUrlParams: this.getImageURLParams(identifier),
+        mediaBlobUrlAttrs: this.getMediaBlobUrlAttrs(identifier, fileState)
+      };
+    });
+
+    _defineProperty(this, "setCacheSSRPreview", identifier => {
+      const {
+        mediaClient,
+        dimensions = {}
+      } = this.props;
+      fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions, this.getImageURLParams(identifier), this.getMediaBlobUrlAttrs(identifier)).catch(() => {// 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(this, "resolveSSRPreview", (identifier, ssr) => {
+      const {
+        mediaClient
+      } = 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
+      }
+    });
+
+    _defineProperty(this, "resolvePreview", async (identifier, fileState) => {
+      try {
+        const params = this.getCardPreviewParams(identifier, fileState);
+        const cardPreview = await getCardPreview(params);
+        this.safeSetState({
+          cardPreview
+        });
+      } catch (e) {
+        const wrappedError = ensureMediaCardError('preview-fetch', e); //  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 (isLocalPreviewError(wrappedError)) {
+          this.safeSetState({
+            isBannedLocalPreview: true
+          });
+        } else {
+          this.safeSetState({
+            status: 'error',
+            error: wrappedError
+          });
+        }
+      }
+    });
+
+    _defineProperty(this, "getPerformanceAttributes", () => {
+      const {
+        timeElapsedTillCommenced
+      } = this;
+      const timeElapsedTillEvent = performance.now();
+      const durationSinceCommenced = timeElapsedTillCommenced && timeElapsedTillEvent - timeElapsedTillCommenced;
+      return {
+        overall: {
+          durationSincePageStart: timeElapsedTillEvent,
+          durationSinceCommenced
+        }
       };
     });
 
+    _defineProperty(this, "onImageError", () => {
+      const {
+        cardPreview
+      } = this.state;
+      const error = new ImageLoadError(cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source);
+      const isLocal = cardPreview && isLocalPreview(cardPreview);
+      const isSSR = cardPreview && isSSRClientPreview(cardPreview);
+
+      if (isLocal || isSSR) {
+        const 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
+        }
+
+        const {
+          identifier,
+          dimensions = {}
+        } = this.props;
+        isFileIdentifier(identifier) && removeCardPreviewFromCache(identifier.id, dimensions);
+        this.safeSetState(updateState);
+      } else {
+        this.safeSetState({
+          status: 'error',
+          error
+        });
+      }
+    });
+
+    _defineProperty(this, "onImageLoad", () => {
+      this.safeSetState({
+        previewDidRender: true
+      });
+    });
+
     _defineProperty(this, "fireCopiedEvent", () => {
       const {
         createAnalyticsEvent
@@ -117,9 +217,17 @@ export class CardBase extends Component {
       createAnalyticsEvent && fireScreenEvent(createAnalyticsEvent, this.fileAttributes);
     });
 
+    _defineProperty(this, "fireLocalPreviewErrorEvent", error => {// TODO: track local preview success rate
+      // https://product-fabric.atlassian.net/browse/MEX-774
+    });
+
     _defineProperty(this, "safeSetState", 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
+        const updater = !!state.status ? createStateUpdater(state) : state;
+        this.setState(updater);
       }
     });
 
@@ -129,8 +237,9 @@ export class CardBase extends Component {
       }
 
       if (this.hasBeenMounted) {
+        // TODO MEX-788: add test for "do not remove the card preview when unsubscribing".
         this.setState({
-          cardPreview: undefined
+          isBannedLocalPreview: false
         });
       }
     });
@@ -157,7 +266,8 @@ export class CardBase extends Component {
 
       if (useInlinePlayer && isVideo && !!cardPreview) {
         this.setState({
-          isPlayingFile: true
+          isPlayingFile: true,
+          shouldAutoplay: true
         });
       } else if (shouldOpenMediaViewer) {
         let mediaViewerSelectedItem;
@@ -204,11 +314,15 @@ export class CardBase extends Component {
         testId,
         originalDimensions
       } = this.props;
+      const {
+        shouldAutoplay
+      } = 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,
@@ -292,7 +406,8 @@ export class CardBase extends Component {
         testId,
         featureFlags,
         titleBoxBgColor,
-        titleBoxIcon
+        titleBoxIcon,
+        ssr
       } = this.props;
       const {
         mediaItemType
@@ -308,21 +423,26 @@ export class CardBase extends Component {
           orientation: 1
         },
         error,
-        cardRef
+        cardRef,
+        isCardVisible
       } = this.state;
       const {
-        metadata,
-        timeElapsedTillCommenced
+        metadata
       } = this;
       const {
         onCardViewClick,
         onDisplayImage,
         actions,
         onMouseEnter
-      } = this;
+      } = this; // Card can be artificially turned visible before entering the viewport
+      // For example, when we have the image in cache
+
+      const nativeLazyLoad = isLazy && !isCardVisible; // Force Media Image to always display img for SSR
+
+      const forceSyncDisplay = !!ssr;
       const card = /*#__PURE__*/React.createElement(CardView, {
         status: status,
-        error: error && error.secondaryError,
+        error: error,
         mediaItemType: mediaItemType,
         metadata: metadata,
         dataURI: dataURI,
@@ -344,12 +464,23 @@ export class CardBase extends Component {
         featureFlags: featureFlags,
         titleBoxBgColor: titleBoxBgColor,
         titleBoxIcon: titleBoxIcon,
-        timeElapsedTillCommenced: timeElapsedTillCommenced
+        onImageError: this.onImageError,
+        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(this, "onCardInViewport", () => {
@@ -398,7 +529,8 @@ export class CardBase extends Component {
 
     const {
       identifier: _identifier,
-      dimensions: _dimensions = {}
+      dimensions: _dimensions = {},
+      ssr: _ssr
     } = this.props;
 
     if (isFileIdentifier(_identifier)) {
@@ -406,9 +538,14 @@ export class CardBase extends Component {
         id
       } = _identifier;
       _cardPreview = getCardPreviewFromCache(id, _dimensions);
+
+      if (!_cardPreview && _ssr) {
+        this.fireCommencedEvent();
+        _cardPreview = this.resolveSSRPreview(_identifier, _ssr);
+      }
     } else if (isExternalImageIdentifier(_identifier)) {
       this.fireCommencedEvent();
-      _status = 'complete';
+      _status = 'loading-preview';
       const {
         dataURI
       } = _identifier;
@@ -417,34 +554,45 @@ export class CardBase extends 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
 
 
-    const isCardVisible = _cardPreview ? true : !this.props.isLazy;
+    const _isCardVisible = !this.props.isLazy || !!_cardPreview && !isSSRPreview(_cardPreview);
+
     this.state = {
       status: _status,
-      isCardVisible,
+      isCardVisible: _isCardVisible,
       isPlayingFile: false,
+      shouldAutoplay: false,
       cardPreview: _cardPreview,
-      cardRef: null
+      cardRef: null,
+      isBannedLocalPreview: false,
+      previewDidRender: false
     };
   }
 
   componentDidMount() {
     this.hasBeenMounted = true;
     const {
-      isCardVisible
+      isCardVisible,
+      cardPreview
     } = this.state;
     const {
-      identifier
+      identifier,
+      ssr
     } = 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);
     } // 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()
@@ -466,14 +614,23 @@ export class CardBase extends Component {
     const {
       mediaClient,
       identifier,
-      dimensions
+      dimensions,
+      featureFlags,
+      useInlinePlayer,
+      disableOverlay
     } = this.props;
     const {
       isCardVisible,
-      cardPreview
+      cardPreview,
+      status,
+      fileState,
+      isBannedLocalPreview,
+      previewDidRender,
+      isPlayingFile
     } = this.state;
     const isDifferent = isDifferentIdentifier(prevIdentifier, identifier);
     const turnedVisible = !prevIsCardVisible && isCardVisible;
+    const isNewMediaClient = prevMediaClient !== mediaClient;
 
     if (isExternalImageIdentifier(identifier) && isDifferent) {
       this.fireCommencedEvent();
@@ -481,7 +638,7 @@ export class CardBase extends Component {
         dataURI
       } = identifier;
       this.setState({
-        status: 'complete',
+        status: 'loading-preview',
         cardPreview: {
           dataURI,
           orientation: 1,
@@ -491,8 +648,7 @@ export class CardBase extends Component {
       });
     }
 
-    if (isFileIdentifier(identifier) && (turnedVisible || prevMediaClient !== mediaClient || isDifferent || // TODO: should not resubscribe on resize. Only refetch
-    this.shouldRefetchImage(prevDimensions, dimensions))) {
+    if (isFileIdentifier(identifier) && (turnedVisible || !!this.subscription && (isNewMediaClient || isDifferent))) {
       this.updateStateForIdentifier(identifier);
     }
 
@@ -503,6 +659,41 @@ export class CardBase extends Component {
         this.fireScreenEvent();
       }
     }
+
+    if (isFileIdentifier(identifier) && fileState && shouldResolvePreview({
+      status,
+      fileState,
+      dimensions,
+      prevDimensions,
+      featureFlags,
+      hasCardPreview: !!cardPreview,
+      isBannedLocalPreview
+    })) {
+      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-preview', 'processing'].includes(status)) {
+      this.safeSetState({
+        status: 'complete'
+      });
+      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() {
@@ -520,6 +711,9 @@ export class CardBase extends Component {
     const {
       mediaClient
     } = this.props;
+    const {
+      isBannedLocalPreview
+    } = this.state;
     const {
       id,
       collectionName,
@@ -530,126 +724,58 @@ export class CardBase extends Component {
       collectionName,
       occurrenceKey
     }).subscribe({
-      next: async fileState => {
-        this.lastFileState = fileState;
-        const thisCardStatusUpdateTimestamp = (performance || Date).now();
-        const filePreviewStatus = extractFilePreviewStatus(fileState, this.props.featureFlags);
-        let status = getCardStatus(fileState.status, filePreviewStatus);
-        this.safeSetState({
-          fileState
-        });
-        let cardPreview;
-        let error;
-
-        if (shouldGetCardPreview(status, filePreviewStatus)) {
-          try {
-            cardPreview = await getCardPreview(this.getCardPreviewParams(id, collectionName, fileState));
-
-            if (['loading-preview', 'processing'].includes(status)) {
-              status = 'complete';
-            }
-          } catch (e) {
-            const wrappedError = ensureMediaCardError('preview-fetch', e); // 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 (isRemotePreviewError(wrappedError)) {
-              status = 'error';
-              error = wrappedError;
-            }
-          }
-        }
-
-        if (this.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' && isErrorFileState(fileState) && !error) {
-            error = new MediaCardError('error-file-state', new Error(fileState.message));
-          }
-
-          this.safeSetState({
-            status,
-            cardPreview,
-            progress: status === 'uploading' && fileState.status === 'uploading' ? fileState.progress : 1,
-            error: status === 'error' && error ? error : undefined
-          });
-          this.lastCardStatusUpdateTimestamp = thisCardStatusUpdateTimestamp;
-        }
+      next: fileState => {
+        const {
+          featureFlags
+        } = this.props;
+        const newState = getCardStateFromFileState(fileState, isBannedLocalPreview, featureFlags);
+        this.safeSetState(newState);
       },
       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 (this.state.status === 'complete') {
-          return;
-        }
-
-        const errorReason = this.fileAttributes.fileStatus === 'uploading' ? 'upload' : 'metadata-fetch';
+        const errorReason = this.state.status === 'uploading' ? 'upload' : 'metadata-fetch';
         const error = new MediaCardError(errorReason, e);
         this.safeSetState({
           error,
           status: 'error'
         });
-        this.lastCardStatusUpdateTimestamp = (performance || Date).now();
       }
     });
   }
 
-  get metadata() {
+  get requestedDimensions() {
     const {
-      identifier
+      dimensions
     } = this.props;
-    return isFileIdentifier(identifier) ? this.state.fileState ? getFileDetails(this.state.fileState) : {
-      id: identifier.id
-    } : {
-      id: identifier.mediaItemType,
-      name: identifier.name || identifier.dataURI,
-      mediaType: 'image'
-    };
+    const {
+      cardRef: element
+    } = this.state || {};
+    return getRequestedDimensions({
+      dimensions,
+      element
+    });
+  }
+
+  get metadata() {
+    var _this$state;
+
+    return getFileDetails(this.props.identifier, (_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.fileState);
   }
 
   get fileAttributes() {
-    var _this$lastFileState;
+    var _this$state2, _this$state2$fileStat;
 
-    return getFileAttributes(this.metadata, (_this$lastFileState = this.lastFileState) === null || _this$lastFileState === void 0 ? void 0 : _this$lastFileState.status);
+    return getFileAttributes(this.metadata, (_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : (_this$state2$fileStat = _this$state2.fileState) === null || _this$state2$fileStat === void 0 ? void 0 : _this$state2$fileStat.status);
   }
 
   fireOperationalEvent() {
-    const {
-      timeElapsedTillCommenced
-    } = this;
     const {
       status,
-      cardPreview,
       error
     } = this.state;
     const {
       createAnalyticsEvent
     } = this.props;
-    const timeElapsedTillEvent = performance.now();
-    const durationSinceCommenced = timeElapsedTillCommenced && timeElapsedTillEvent - timeElapsedTillCommenced;
-    const performanceAttributes = {
-      overall: {
-        durationSincePageStart: timeElapsedTillEvent,
-        durationSinceCommenced
-      }
-    };
-    createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, performanceAttributes, {
-      cardPreview,
-      error
-    });
+    createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), error);
   }
 
   fireCommencedEvent() {
@@ -692,19 +818,14 @@ export class CardBase extends Component {
   }
 
   render() {
-    var _this$lastFileState2;
-
     const {
       isPlayingFile,
       mediaViewerSelectedItem
     } = this.state;
     const innerContent = /*#__PURE__*/React.createElement(React.Fragment, null, isPlayingFile ? this.renderInlinePlayer() : this.renderCard(), mediaViewerSelectedItem ? this.renderMediaViewer() : null);
-    const content = this.context.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
+    return this.props.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
       locale: "en"
     }, innerContent);
-    return /*#__PURE__*/React.createElement(FileAttributesProvider, {
-      data: getFileAttributes(this.metadata, (_this$lastFileState2 = this.lastFileState) === null || _this$lastFileState2 === void 0 ? void 0 : _this$lastFileState2.status)
-    }, content);
   }
 
 }
@@ -718,11 +839,6 @@ _defineProperty(CardBase, "defaultProps", {
   featureFlags: {}
 });
 
-_defineProperty(CardBase, "contextTypes", {
-  // Required to detect a parent IntlProvider
-  intl: intlShape
-});
-
 export const Card = withMediaAnalyticsContext({
   packageVersion,
   packageName,
@@ -730,4 +846,6 @@ export const Card = withMediaAnalyticsContext({
   component: 'mediaCard'
 }, {
   filterFeatureFlags: relevantFeatureFlagNames
-})(withAnalyticsEvents()(CardBase));
+})(withAnalyticsEvents()(injectIntl(CardBase, {
+  enforceContext: false
+})));