@atlaskit/media-card 70.10.0 → 72.1.0

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

@@ -5,116 +5,223 @@ import { version as packageVersion, name as packageName } from '../../version.js
 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 } 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 { CardView } from '../cardView';
 import { ViewportDetector } from '../../utils/viewportDetector';
-import { getDataURIDimension } from '../../utils/getDataURIDimension';
-import { shouldGetCardPreview, extractFilePreviewStatus, getCardPreview, getCardPreviewFromCache, getFilePreviewFromFileState } from './getCardPreview';
+import { getRequestedDimensions } from '../../utils/getDataURIDimension';
+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 { fireMediaCardEvent, getFileAttributes, getRenderCommencedEventPayload, getCopiedFilePayload } from '../../utils/analytics';
-import { FileAttributesProvider } from '../../utils/fileAttributesContext';
-import { isRemotePreviewError, MediaCardError, ensureMediaCardError } from '../../errors';
-import { fireOperationalEvent, relevantFeatureFlagNames } from './cardAnalytics';
+import { getFileAttributes } from '../../utils/analytics';
+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';
 export class CardBase extends Component {
+  // We initialise timeElapsedTillCommenced
+  // to avoid extra branching on a possibly undefined value.
   constructor(props) {
     super(props);
 
     _defineProperty(this, "hasBeenMounted", false);
 
-    _defineProperty(this, "onCopyListener", () => {
-      if (typeof window.getSelection === 'function') {
-        const selection = window.getSelection();
-        const {
-          cardRef
-        } = this.state;
-
-        if (cardRef && selection && selection.containsNode && selection.containsNode(cardRef, true)) {
-          this.fireFileCopiedEvent();
-        }
-      }
-    });
-
-    _defineProperty(this, "shouldRefetchImage", (current, next) => {
-      if (!current || !next) {
-        return false;
-      }
+    _defineProperty(this, "timeElapsedTillCommenced", performance.now());
 
-      return isBigger(current, next);
-    });
-
-    _defineProperty(this, "isLatestCardStatusUpdate", cardStatusUpdateTimestamp => !this.lastCardStatusUpdateTimestamp || this.lastCardStatusUpdateTimestamp <= cardStatusUpdateTimestamp);
+    _defineProperty(this, "getImageURLParams", ({
+      collectionName: collection
+    }) => ({
+      collection,
+      mode: imageResizeModeToFileImageMode(this.props.resizeMode),
+      ...this.requestedDimensions,
+      allowAnimated: true
+    }));
 
-    _defineProperty(this, "onLocalPreviewError", error => {// TODO: track local preview success rate
-      // https://product-fabric.atlassian.net/browse/MEX-774
-    });
-
-    _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 {
-        requestedDimensions,
-        onLocalPreviewError
-      } = this;
+        isBannedLocalPreview
+      } = this.state;
+      const {
+        id
+      } = identifier;
       const {
         dimensions = {},
-        originalDimensions,
-        resizeMode,
         mediaClient
       } = this.props;
       return {
         mediaClient,
         id,
-        collectionName,
         dimensions,
-        resizeMode,
-        requestedDimensions,
-        onLocalPreviewError,
-        filePreview: getFilePreviewFromFileState(fileState),
+        onLocalPreviewError: this.fireLocalPreviewErrorEvent,
+        filePreview: isBannedLocalPreview ? undefined : getFilePreviewFromFileState(fileState),
         isRemotePreviewReady: isImageRepresentationReady(fileState),
-        addContextToDataURI: this.createAddContextToDataURI(id, fileState, originalDimensions || this.requestedDimensions, collectionName)
+        imageUrlParams: this.getImageURLParams(identifier),
+        mediaBlobUrlAttrs: this.getMediaBlobUrlAttrs(identifier, fileState)
       };
     });
 
-    _defineProperty(this, "fireFileCopiedEvent", () => {
+    _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
+      } = this.props;
+      const {
+        cardRef
+      } = this.state;
+      cardRef && createAnalyticsEvent && fireCopiedEvent(createAnalyticsEvent, this.metadata.id, cardRef);
+    });
+
+    _defineProperty(this, "fireScreenEvent", () => {
       const {
         createAnalyticsEvent
       } = this.props;
-      fireMediaCardEvent(getCopiedFilePayload(this.metadata.id), createAnalyticsEvent);
+      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);
       }
     });
 
@@ -124,8 +231,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
         });
       }
     });
@@ -287,7 +395,8 @@ export class CardBase extends Component {
         testId,
         featureFlags,
         titleBoxBgColor,
-        titleBoxIcon
+        titleBoxIcon,
+        ssr
       } = this.props;
       const {
         mediaItemType
@@ -303,7 +412,8 @@ export class CardBase extends Component {
           orientation: 1
         },
         error,
-        cardRef
+        cardRef,
+        isCardVisible
       } = this.state;
       const {
         metadata
@@ -313,10 +423,15 @@ export class CardBase extends Component {
         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,
@@ -337,7 +452,11 @@ export class CardBase extends Component {
         testId: testId,
         featureFlags: featureFlags,
         titleBoxBgColor: titleBoxBgColor,
-        titleBoxIcon: titleBoxIcon
+        titleBoxIcon: titleBoxIcon,
+        onImageError: this.onImageError,
+        onImageLoad: this.onImageLoad,
+        nativeLazyLoad: nativeLazyLoad,
+        forceSyncDisplay: forceSyncDisplay
       });
       return isLazy ? /*#__PURE__*/React.createElement(ViewportDetector, {
         targetRef: cardRef,
@@ -385,11 +504,14 @@ export class CardBase extends Component {
       }
     });
 
+    let _status = 'loading';
+
     let _cardPreview;
 
     const {
       identifier: _identifier,
-      dimensions: _dimensions = {}
+      dimensions: _dimensions = {},
+      ssr: _ssr
     } = this.props;
 
     if (isFileIdentifier(_identifier)) {
@@ -397,31 +519,67 @@ export class CardBase extends Component {
         id
       } = _identifier;
       _cardPreview = getCardPreviewFromCache(id, _dimensions);
-    }
-    /**
-     * If cardPreview is available from local cache, `isCardVisible`
-     * should be true to avoid flickers during re-mount of the component
-     */
 
+      if (!_cardPreview && _ssr) {
+        this.fireCommencedEvent();
+        _cardPreview = this.resolveSSRPreview(_identifier, _ssr);
+      }
+    } else if (isExternalImageIdentifier(_identifier)) {
+      this.fireCommencedEvent();
+      _status = 'loading-preview';
+      const {
+        dataURI
+      } = _identifier;
+      _cardPreview = {
+        dataURI,
+        orientation: 1,
+        source: 'external'
+      };
+    } // 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 = !this.props.isLazy || !!_cardPreview && !isSSRPreview(_cardPreview);
 
     this.state = {
-      status: 'loading',
-      isCardVisible: _cardPreview ? true : !this.props.isLazy,
+      status: _status,
+      isCardVisible: _isCardVisible,
       isPlayingFile: false,
       cardPreview: _cardPreview,
-      cardRef: null
+      cardRef: null,
+      isBannedLocalPreview: false,
+      previewDidRender: false
     };
-  } // 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()
-  // won't work in IE11
-
+  }
 
   componentDidMount() {
     this.hasBeenMounted = true;
-    this.fireCommencedEvent();
-    this.updateStateForIdentifier();
-    document.addEventListener('copy', this.onCopyListener);
+    const {
+      isCardVisible,
+      cardPreview
+    } = this.state;
+    const {
+      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()
+    // won't work in IE11
+
+
+    getDocument().addEventListener('copy', this.fireCopiedEvent);
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -436,197 +594,168 @@ export class CardBase extends Component {
     const {
       mediaClient,
       identifier,
-      dimensions
+      dimensions,
+      featureFlags
     } = this.props;
     const {
-      isCardVisible
+      isCardVisible,
+      cardPreview,
+      status,
+      fileState,
+      isBannedLocalPreview,
+      previewDidRender
     } = this.state;
     const isDifferent = isDifferentIdentifier(prevIdentifier, identifier);
+    const turnedVisible = !prevIsCardVisible && isCardVisible;
+    const isNewMediaClient = prevMediaClient !== mediaClient;
 
-    if (prevIsCardVisible !== isCardVisible && isCardVisible || prevMediaClient !== mediaClient || isDifferent || this.shouldRefetchImage(prevDimensions, dimensions)) {
+    if (isExternalImageIdentifier(identifier) && isDifferent) {
       this.fireCommencedEvent();
-      this.updateStateForIdentifier();
+      const {
+        dataURI
+      } = identifier;
+      this.setState({
+        status: 'loading-preview',
+        cardPreview: {
+          dataURI,
+          orientation: 1,
+          source: 'external'
+        },
+        isCardVisible: true
+      });
+    }
+
+    if (isFileIdentifier(identifier) && (turnedVisible || !!this.subscription && (isNewMediaClient || isDifferent))) {
+      this.updateStateForIdentifier(identifier);
     }
 
     if (this.state.status !== prevState.status) {
-      const {
-        status,
-        cardPreview,
-        error
-      } = this.state;
-      const {
-        createAnalyticsEvent
-      } = this.props;
-      createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, {
-        cardPreview,
-        error
+      this.fireOperationalEvent();
+
+      if (this.state.status === 'complete' || this.fileAttributes.fileMediatype === 'video' && !!cardPreview && this.state.status === 'processing') {
+        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();
     }
   }
 
   componentWillUnmount() {
     this.hasBeenMounted = false;
     this.unsubscribe();
-    document.removeEventListener('copy', this.onCopyListener);
+    getDocument().removeEventListener('copy', this.fireCopiedEvent);
   }
 
-  updateStateForIdentifier() {
-    const {
-      mediaClient,
-      identifier
-    } = this.props;
-    const {
-      isCardVisible
-    } = this.state;
-
-    if (!isCardVisible) {
-      return;
-    }
-
-    if (identifier.mediaItemType === 'file') {
-      this.unsubscribe();
-      this.subscribeInternalFile(identifier, mediaClient);
-    }
+  updateStateForIdentifier(identifier) {
+    this.fireCommencedEvent();
+    this.subscribeInternalFile(identifier);
   }
 
-  get requestedDimensions() {
+  subscribeInternalFile(identifier) {
     const {
-      dimensions
+      mediaClient
     } = this.props;
     const {
-      cardRef
+      isBannedLocalPreview
     } = this.state;
-    const options = {
-      dimensions,
-      element: cardRef
-    };
-    const width = getDataURIDimension('width', options);
-    const height = getDataURIDimension('height', options);
-    return {
-      width,
-      height
-    };
-  }
-
-  subscribeInternalFile(identifier, mediaClient) {
     const {
       id,
       collectionName,
       occurrenceKey
     } = identifier;
+    this.unsubscribe();
     this.subscription = mediaClient.file.getFileState(id, {
       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);
   }
 
-  fireCommencedEvent() {
-    if (!this.state.isCardVisible) {
-      return;
-    }
+  fireOperationalEvent() {
+    const {
+      status,
+      error
+    } = this.state;
+    const {
+      createAnalyticsEvent
+    } = this.props;
+    createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), error);
+  }
 
+  fireCommencedEvent() {
+    this.timeElapsedTillCommenced = performance.now();
     const {
       createAnalyticsEvent
     } = this.props;
-    const payload = getRenderCommencedEventPayload(this.fileAttributes);
-    fireMediaCardEvent(payload, createAnalyticsEvent);
+    createAnalyticsEvent && fireCommencedEvent(createAnalyticsEvent, this.fileAttributes, {
+      overall: {
+        durationSincePageStart: this.timeElapsedTillCommenced
+      }
+    });
   }
 
   get actions() {
@@ -657,19 +786,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.context.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);
   }
 
 }
@@ -688,28 +812,6 @@ _defineProperty(CardBase, "contextTypes", {
   intl: intlShape
 });
 
-_defineProperty(CardBase, "getDerivedStateFromProps", props => {
-  const {
-    identifier
-  } = props;
-
-  if (identifier.mediaItemType === 'external-image') {
-    const {
-      dataURI
-    } = identifier;
-    return {
-      status: 'complete',
-      cardPreview: {
-        dataURI,
-        orientation: 1,
-        source: 'external'
-      }
-    };
-  }
-
-  return null;
-});
-
 export const Card = withMediaAnalyticsContext({
   packageVersion,
   packageName,