@atlaskit/media-card 70.9.0 → 72.0.0

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

@@ -5,117 +5,188 @@ 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 { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
-import { addFileAttrsToUrl, globalMediaEventEmitter, isDifferentIdentifier, isFileIdentifier, isErrorFileState, RECENTS_COLLECTION, isPreviewableType } 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 { getCardPreviewFromFileState, getCardPreviewFromBackend } from './getCardPreview';
+import { getRequestedDimensions } from '../../utils/getDataURIDimension';
+import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview } from './getCardPreview';
 import { getFileDetails } from '../../utils/metadata';
-import { isBigger } from '../../utils/dimensionComparer';
-import { createObjectURLCache } from '../../utils/objectURLCache';
-import { getCardStatus, extractCardStatusParams } from './getCardStatus';
 import { InlinePlayer } from '../inlinePlayer';
-import { fireMediaCardEvent, getFileAttributes, getRenderCommencedEventPayload, getCopiedFilePayload } from '../../utils/analytics';
-import { FileAttributesProvider } from '../../utils/fileAttributesContext';
-import { isLocalPreviewError, MediaCardError, ensureMediaCardError } from '../../errors';
-import { fireOperationalEvent, relevantFeatureFlagNames } from './cardAnalytics';
-const cardPreviewCache = createObjectURLCache();
+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, "getPreviewCacheKey", (id, dimensions) => {
-      // Dimensions are used to create a key.
-      // Cache is invalidated when different dimensions are provided.
-      return [id, dimensions.height, dimensions.width].join('-');
-    });
+    _defineProperty(this, "timeElapsedTillCommenced", performance.now());
 
-    _defineProperty(this, "shouldRefetchImage", (current, next) => {
-      if (!current || !next) {
-        return false;
-      }
+    _defineProperty(this, "getImageURLParams", ({
+      collectionName: collection
+    }) => ({
+      collection,
+      mode: imageResizeModeToFileImageMode(this.props.resizeMode),
+      ...this.requestedDimensions,
+      allowAnimated: true
+    }));
 
-      return isBigger(current, next);
+    _defineProperty(this, "getMediaBlobUrlAttrs", (identifier, fileState) => {
+      const {
+        id,
+        collectionName: collection
+      } = identifier;
+      const {
+        originalDimensions,
+        contextId,
+        alt
+      } = this.props;
+      const {
+        mimeType,
+        name,
+        size
+      } = getFileDetails(identifier, fileState);
+      return contextId ? {
+        id,
+        collection,
+        contextId,
+        mimeType,
+        name,
+        size,
+        ...(originalDimensions || this.requestedDimensions),
+        alt
+      } : undefined;
     });
 
-    _defineProperty(this, "isLatestCardStatusUpdate", cardStatusUpdateTimestamp => !this.lastCardStatusUpdateTimestamp || this.lastCardStatusUpdateTimestamp <= cardStatusUpdateTimestamp);
-
-    _defineProperty(this, "getCardPreview", async (mediaClient, identifier, fileState, metadata) => {
+    _defineProperty(this, "getCardPreviewParams", (identifier, fileState) => {
+      const {
+        isBannedLocalPreview
+      } = this.state;
+      const {
+        id
+      } = identifier;
       const {
         dimensions = {},
-        originalDimensions,
-        resizeMode,
-        featureFlags
+        mediaClient
       } = this.props;
-      const {
+      return {
+        mediaClient,
         id,
-        collectionName
-      } = identifier; // We aren't using the component state here, as cardPreviewCache has a shorter lifecycle
+        dimensions,
+        onLocalPreviewError: this.fireLocalPreviewErrorEvent,
+        filePreview: isBannedLocalPreview ? undefined : getFilePreviewFromFileState(fileState),
+        isRemotePreviewReady: isImageRepresentationReady(fileState),
+        imageUrlParams: this.getImageURLParams(identifier),
+        mediaBlobUrlAttrs: this.getMediaBlobUrlAttrs(identifier, fileState)
+      };
+    });
 
-      const cacheKey = this.getPreviewCacheKey(id, dimensions);
+    _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 (cardPreviewCache.has(cacheKey)) {
-        return cardPreviewCache.get(cacheKey);
-      } // don't use error fileStates
+        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
+        }
+      };
+    });
 
-      if (isErrorFileState(fileState)) {
-        return;
+    _defineProperty(this, "onImageError", () => {
+      const {
+        cardPreview
+      } = this.state;
+      const error = new ImageLoadError(cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source);
+
+      if (cardPreview !== null && cardPreview !== void 0 && cardPreview.source && ['local', 'cache-local'].includes(cardPreview.source)) {
+        const {
+          identifier,
+          dimensions = {}
+        } = this.props;
+        isFileIdentifier(identifier) && removeCardPreviewFromCache(identifier.id, dimensions);
+        this.safeSetState({
+          cardPreview: undefined,
+          isBannedLocalPreview: true
+        });
+        this.fireLocalPreviewErrorEvent(error);
+      } else {
+        this.safeSetState({
+          status: 'error',
+          error
+        });
       }
+    });
+
+    _defineProperty(this, "onImageLoad", () => {
+      this.safeSetState({
+        previewDidRender: true
+      });
+    });
 
+    _defineProperty(this, "fireCopiedEvent", () => {
       const {
-        mediaType,
-        mimeType
-      } = fileState;
-      const requestedDimensions = this.getRequestedDimensions(); // TODO: align these checks with helpers from Media Client
-      // https://product-fabric.atlassian.net/browse/BMPT-1300
-
-      const shouldUseLocalPreview = mediaType !== 'doc' && !!mimeType && isMimeTypeSupportedByBrowser(mimeType);
-      const previewableType = isPreviewableType(mediaType, featureFlags);
-      const cardPreview = shouldUseLocalPreview && (await getCardPreviewFromFileState(fileState)) || previewableType && (await getCardPreviewFromBackend(mediaClient, identifier, fileState, requestedDimensions, resizeMode));
-
-      if (cardPreview) {
-        if (cardPreview.dataURI) {
-          // In case we've retrieved cardPreview using one of the two methods above,
-          // we want to embed some meta context into dataURI for Copy/Paste to work.
-          const contextDimensions = originalDimensions || requestedDimensions;
-          cardPreview.dataURI = this.addContextToDataURI(cardPreview.dataURI, id, metadata, contextDimensions, collectionName);
-        } // We store new cardPreview into cache
-
-
-        cardPreviewCache.set(cacheKey, cardPreview);
-        return cardPreview;
-      }
+        createAnalyticsEvent
+      } = this.props;
+      const {
+        cardRef
+      } = this.state;
+      cardRef && createAnalyticsEvent && fireCopiedEvent(createAnalyticsEvent, this.metadata.id, cardRef);
     });
 
-    _defineProperty(this, "fireFileCopiedEvent", () => {
+    _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);
       }
     });
 
@@ -125,8 +196,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
         });
       }
     });
@@ -317,7 +389,7 @@ export class CardBase extends Component {
       } = this;
       const card = /*#__PURE__*/React.createElement(CardView, {
         status: status,
-        error: error && error.secondaryError,
+        error: error,
         mediaItemType: mediaItemType,
         metadata: metadata,
         dataURI: dataURI,
@@ -338,7 +410,9 @@ export class CardBase extends Component {
         testId: testId,
         featureFlags: featureFlags,
         titleBoxBgColor: titleBoxBgColor,
-        titleBoxIcon: titleBoxIcon
+        titleBoxIcon: titleBoxIcon,
+        onImageError: this.onImageError,
+        onImageLoad: this.onImageLoad
       });
       return isLazy ? /*#__PURE__*/React.createElement(ViewportDetector, {
         targetRef: cardRef,
@@ -386,6 +460,8 @@ export class CardBase extends Component {
       }
     });
 
+    let _status = 'loading';
+
     let _cardPreview;
 
     const {
@@ -397,33 +473,52 @@ export class CardBase extends Component {
       const {
         id
       } = _identifier;
-      const cacheKey = this.getPreviewCacheKey(id, _dimensions);
-      _cardPreview = cardPreviewCache.get(cacheKey);
-    }
-    /**
-     * If cardPreview is available from local cache, `isCardVisible`
-     * should be true to avoid flickers during re-mount of the component
-     */
+      _cardPreview = getCardPreviewFromCache(id, _dimensions);
+    } 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, `isCardVisible`
+    //  should be true to avoid flickers during re-mount of the component
 
 
+    const isCardVisible = _cardPreview ? true : !this.props.isLazy;
     this.state = {
-      status: 'loading',
-      isCardVisible: _cardPreview ? true : !this.props.isLazy,
+      status: _status,
+      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
+    } = this.state;
+    const {
+      identifier
+    } = this.props;
+
+    if (isCardVisible && isFileIdentifier(identifier)) {
+      this.updateStateForIdentifier(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) {
@@ -438,215 +533,162 @@ 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 (previewDidRender && // We should't complete if status is uploading
+    ['loading', '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);
   }
 
-  getRequestedDimensions() {
+  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
-    };
-  }
-
-  addContextToDataURI(dataURI, fileId, metadata, {
-    width,
-    height
-  }, collectionName) {
-    const {
-      contextId,
-      alt
-    } = this.props;
-
-    if (!contextId) {
-      return dataURI;
-    }
-
-    return addFileAttrsToUrl(dataURI, {
-      id: fileId,
-      collection: collectionName,
-      contextId,
-      mimeType: metadata.mimeType,
-      name: metadata.name,
-      size: metadata.size,
-      width,
-      height,
-      alt
-    });
-  }
-
-  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();
-        let status = getCardStatus(fileState.status, extractCardStatusParams(fileState, this.props.featureFlags));
-        this.safeSetState({
-          fileState
-        });
-        let cardPreview;
-        let error;
-
-        try {
-          cardPreview = await this.getCardPreview(mediaClient, identifier, fileState, getFileDetails(fileState));
-        } catch (e) {
-          const wrappedError = ensureMediaCardError('preview-fetch', e); // If the local preview fails, we don't need to display the error.
-          // TODO: if file has local preview card will be complete status. But if the local preview fails,
-          // and we don't change the status, we will have
-          // [ !cardPreview && status == complete -> log succeeded event ]
-          // https://product-fabric.atlassian.net/browse/BMPT-1315
-
-          if (!isLocalPreviewError(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() {
@@ -677,19 +719,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);
   }
 
 }
@@ -708,27 +745,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
-      }
-    };
-  }
-
-  return null;
-});
-
 export const Card = withMediaAnalyticsContext({
   packageVersion,
   packageName,