@atlaskit/media-card 74.5.1 → 74.6.0

package/dist/es2019/card/card.js

@@ -26,25 +26,24 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "74.5.1";
+const packageVersion = "74.6.0";
 export class CardBase extends Component {
   // An internalOccurrenceKey is a randomly generated value to differentiate various instances
   // of Cards regardless of whether it shares the same file (either internal or external)
+
   // We initialise timeElapsedTillCommenced
   // to avoid extra branching on a possibly undefined value.
+
   // Generate unique traceId for file
+
   constructor(props) {
     super(props);
-
     _defineProperty(this, "internalOccurrenceKey", generateUniqueId());
-
     _defineProperty(this, "hasBeenMounted", false);
-
     _defineProperty(this, "fileStateFlags", {
       wasStatusUploading: false,
       wasStatusProcessing: false
     });
-
     _defineProperty(this, "ssrReliability", {
       server: {
         status: 'unknown'
@@ -53,13 +52,10 @@ export class CardBase extends Component {
         status: 'unknown'
       }
     });
-
     _defineProperty(this, "timeElapsedTillCommenced", performance.now());
-
     _defineProperty(this, "traceContext", {
       traceId: getRandomHex(8)
     });
-
     _defineProperty(this, "getImageURLParams", ({
       collectionName: collection
     }) => ({
@@ -68,7 +64,6 @@ export class CardBase extends Component {
       ...this.requestedDimensions,
       allowAnimated: true
     }));
-
     _defineProperty(this, "getMediaBlobUrlAttrs", (identifier, fileState) => {
       const {
         id,
@@ -95,7 +90,6 @@ export class CardBase extends Component {
         alt
       } : undefined;
     });
-
     _defineProperty(this, "getCardPreviewParams", (identifier, fileState) => {
       const {
         isBannedLocalPreview
@@ -122,27 +116,17 @@ export class CardBase extends Component {
         traceContext: this.traceContext
       };
     });
-
     _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.
+      this.fetchAndCacheRemotePreview(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, "refetchSSRPreview", async identifier => {
-      const {
-        mediaClient,
-        dimensions = {}
-      } = this.props;
-
       try {
-        const cardPreview = await fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions, this.getImageURLParams(identifier), this.getMediaBlobUrlAttrs(identifier));
+        const cardPreview = await this.fetchAndCacheRemotePreview(identifier);
         this.safeSetState({
           cardPreview
         });
@@ -151,7 +135,44 @@ export class CardBase extends Component {
         this.fireNonCriticalErrorEvent(wrappedError);
       }
     });
+    _defineProperty(this, "resolveUpfrontPreview", async identifier => {
+      const requestedDimensions = {
+        ...this.props.dimensions
+      };
+      try {
+        const cardPreview = await this.fetchAndCacheRemotePreview(identifier);
+        const {
+          dimensions: currentDimensions
+        } = this.props;
+        const areValidRequestedDimensions = !isBigger(requestedDimensions, currentDimensions);
 
+        // If there are new and bigger dimensions in the props, and the upfront preview is still resolving,
+        // the fetched preview is no longer valid, and thus, we dismiss it and set the flag wasResolvedUpfrontPreview = true
+        // to trigger a normal preview fetch.
+        if (areValidRequestedDimensions) {
+          this.safeSetState({
+            cardPreview,
+            wasResolvedUpfrontPreview: true
+          });
+        } else {
+          this.safeSetState({
+            wasResolvedUpfrontPreview: true
+          });
+        }
+      } catch (e) {
+        this.safeSetState({
+          wasResolvedUpfrontPreview: true
+        });
+        // NO need to log error. If this call fails, a refetch will happen after
+      }
+    });
+    _defineProperty(this, "fetchAndCacheRemotePreview", identifier => {
+      const {
+        mediaClient,
+        dimensions = {}
+      } = this.props;
+      return fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions, this.getImageURLParams(identifier), this.getMediaBlobUrlAttrs(identifier));
+    });
     _defineProperty(this, "resolvePreview", async (identifier, fileState) => {
       try {
         const params = this.getCardPreviewParams(identifier, fileState);
@@ -160,11 +181,11 @@ export class CardBase extends Component {
           cardPreview
         });
       } catch (e) {
-        const wrappedError = ensureMediaCardError('preview-fetch', e); //  If remote preview fails, we set status 'error'
+        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 error should already been logged inside the getCardPreview. No need to log it here.
           this.safeSetState({
@@ -178,7 +199,6 @@ export class CardBase extends Component {
         }
       }
     });
-
     _defineProperty(this, "getPerformanceAttributes", () => {
       const {
         timeElapsedTillCommenced
@@ -192,53 +212,46 @@ export class CardBase extends Component {
         }
       };
     });
-
     _defineProperty(this, "logSSRImageError", cardPreview => {
       if (cardPreview) {
         const failedSSRObject = {
           status: 'fail',
           ...extractErrorInfo(new ImageLoadError(cardPreview.source))
         };
-
         if (isSSRClientPreview(cardPreview)) {
           this.ssrReliability.client = failedSSRObject;
         }
+
         /*
           If the cardPreview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
         */
 
-
         if (isSSRDataPreview(cardPreview)) {
           this.ssrReliability.server = failedSSRObject;
           this.ssrReliability.client = failedSSRObject;
         }
       }
     });
-
     _defineProperty(this, "onImageError", cardPreview => {
       this.logSSRImageError(cardPreview);
       const {
         cardPreview: currentPreview
-      } = this.state; // If the dataURI has been replaced, we can dismiss this error
-
+      } = this.state;
+      // If the dataURI has been replaced, we can dismiss this error
       if ((cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI) !== (currentPreview === null || currentPreview === void 0 ? void 0 : currentPreview.dataURI)) {
         return;
       }
-
       const error = new ImageLoadError(cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source);
       const isLocal = cardPreview && isLocalPreview(cardPreview);
       const isSSR = cardPreview && (isSSRClientPreview(cardPreview) || isSSRDataPreview(cardPreview));
-
       if (isLocal || isSSR) {
         const updateState = {
           cardPreview: undefined
         };
-
         if (isLocal) {
           updateState.isBannedLocalPreview = true;
           this.fireNonCriticalErrorEvent(error);
         }
-
         const {
           identifier,
           resizeMode
@@ -253,7 +266,6 @@ export class CardBase extends Component {
         });
       }
     });
-
     _defineProperty(this, "onImageLoad", cardPreview => {
       if (cardPreview) {
         if (isSSRClientPreview(cardPreview) && this.ssrReliability.client.status === 'unknown') {
@@ -261,11 +273,11 @@ export class CardBase extends Component {
             status: 'success'
           };
         }
+
         /*
           If the image loads successfully and it comes from server (global scope / ssrData), it means that we have reused it in client and the success counts for both: server & client.
         */
 
-
         if (isSSRDataPreview(cardPreview) && this.ssrReliability.server.status === 'unknown') {
           this.ssrReliability.server = {
             status: 'success'
@@ -275,20 +287,17 @@ export class CardBase extends Component {
           };
         }
       }
-
       const {
         cardPreview: currentPreview
-      } = this.state; // If the dataURI has been replaced, we can dismiss this callback
-
+      } = this.state;
+      // If the dataURI has been replaced, we can dismiss this callback
       if ((cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI) !== (currentPreview === null || currentPreview === void 0 ? void 0 : currentPreview.dataURI)) {
         return;
       }
-
       this.safeSetState({
         previewDidRender: true
       });
     });
-
     _defineProperty(this, "fireCopiedEvent", () => {
       const {
         createAnalyticsEvent
@@ -298,14 +307,12 @@ export class CardBase extends Component {
       } = this.state;
       cardRef && createAnalyticsEvent && fireCopiedEvent(createAnalyticsEvent, this.metadata.id, cardRef);
     });
-
     _defineProperty(this, "fireScreenEvent", () => {
       const {
         createAnalyticsEvent
       } = this.props;
       createAnalyticsEvent && fireScreenEvent(createAnalyticsEvent, this.fileAttributes);
     });
-
     _defineProperty(this, "fireNonCriticalErrorEvent", error => {
       const {
         createAnalyticsEvent
@@ -315,7 +322,6 @@ export class CardBase extends Component {
       } = this.state;
       createAnalyticsEvent && fireNonCriticalErrorEvent(createAnalyticsEvent, this.state.status, this.fileAttributes, this.ssrReliability, error, this.traceContext, fileState === null || fileState === void 0 ? void 0 : fileState.metadataTraceContext);
     });
-
     _defineProperty(this, "safeSetState", newState => {
       if (this.hasBeenMounted) {
         /**
@@ -328,12 +334,10 @@ export class CardBase extends Component {
         this.setState(createStateUpdater(newState, this.fireNonCriticalErrorEvent));
       }
     });
-
     _defineProperty(this, "unsubscribe", () => {
       if (this.subscription) {
         this.subscription.unsubscribe();
       }
-
       if (this.hasBeenMounted) {
         // TODO MEX-788: add test for "do not remove the card preview when unsubscribing".
         this.setState({
@@ -341,7 +345,6 @@ export class CardBase extends Component {
         });
       }
     });
-
     _defineProperty(this, "onCardViewClick", (event, analyticsEvent) => {
       const {
         identifier,
@@ -355,13 +358,10 @@ export class CardBase extends Component {
         metadata
       } = this;
       this.onClick(event, analyticsEvent);
-
       if (!metadata) {
         return;
       }
-
       const isVideo = metadata && metadata.mediaType === 'video';
-
       if (useInlinePlayer && isVideo && !!cardPreview) {
         this.setState({
           isPlayingFile: true,
@@ -369,7 +369,6 @@ export class CardBase extends Component {
         });
       } else if (shouldOpenMediaViewer) {
         let mediaViewerSelectedItem;
-
         if (isFileIdentifier(identifier)) {
           mediaViewerSelectedItem = {
             id: identifier.id,
@@ -384,25 +383,21 @@ export class CardBase extends Component {
             name: identifier.name
           };
         }
-
         this.setState({
           mediaViewerSelectedItem
         });
       }
     });
-
     _defineProperty(this, "onInlinePlayerError", () => {
       this.setState({
         isPlayingFile: false
       });
     });
-
     _defineProperty(this, "setRef", cardRef => {
       !!cardRef && this.setState({
         cardRef
       });
     });
-
     _defineProperty(this, "renderInlinePlayer", () => {
       const {
         identifier,
@@ -435,19 +430,16 @@ export class CardBase extends Component {
         cardPreview: cardPreview
       }));
     });
-
     _defineProperty(this, "onMediaViewerClose", () => {
       this.setState({
         mediaViewerSelectedItem: undefined
       });
     });
-
     _defineProperty(this, "onDisplayImage", () => {
       const {
         identifier
       } = this.props;
       let payloadPart;
-
       if (isFileIdentifier(identifier)) {
         payloadPart = {
           fileId: identifier.id,
@@ -459,13 +451,11 @@ export class CardBase extends Component {
           isUserCollection: false
         };
       }
-
       globalMediaEventEmitter.emit('media-viewed', {
         viewingLevel: 'minimal',
         ...payloadPart
       });
     });
-
     _defineProperty(this, "renderMediaViewer", () => {
       const {
         mediaViewerSelectedItem
@@ -477,11 +467,9 @@ export class CardBase extends Component {
         contextId,
         featureFlags
       } = this.props;
-
       if (!mediaViewerSelectedItem) {
         return;
       }
-
       const collectionName = isFileIdentifier(identifier) ? identifier.collectionName || '' : '';
       const dataSource = mediaViewerDataSource || {
         list: []
@@ -496,7 +484,6 @@ export class CardBase extends Component {
         featureFlags: featureFlags
       }), document.body);
     });
-
     _defineProperty(this, "renderCard", (withCallbacks = true, cardStatusOverride, izLazyOverride) => {
       const {
         identifier,
@@ -536,11 +523,12 @@ export class CardBase extends Component {
         actions,
         onMouseEnter
       } = this;
-      const isLazyWithOverride = izLazyOverride === undefined ? isLazy : izLazyOverride; // Card can be artificially turned visible before entering the viewport
-      // For example, when we have the image in cache
-
-      const nativeLazyLoad = isLazyWithOverride && !isCardVisible; // Force Media Image to always display img for SSR
+      const isLazyWithOverride = izLazyOverride === undefined ? isLazy : izLazyOverride;
 
+      // Card can be artificially turned visible before entering the viewport
+      // For example, when we have the image in cache
+      const nativeLazyLoad = isLazyWithOverride && !isCardVisible;
+      // Force Media Image to always display img for SSR
       const forceSyncDisplay = !!ssr;
       const mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, status === 'error' || status === 'failed-processing', !!this.state.cardPreview, metadata.mediaType);
       const card = /*#__PURE__*/React.createElement(CardView, {
@@ -577,10 +565,8 @@ export class CardBase extends Component {
         onVisible: this.onCardInViewport
       }, card) : card;
     });
-
     _defineProperty(this, "storeSSRData", () => {
       var _this$ssrReliability$;
-
       const {
         ssr,
         identifier
@@ -597,13 +583,11 @@ export class CardBase extends Component {
         error: ((_this$ssrReliability$ = this.ssrReliability.server) === null || _this$ssrReliability$ === void 0 ? void 0 : _this$ssrReliability$.status) === 'fail' ? this.ssrReliability.server : undefined
       });
     });
-
     _defineProperty(this, "onCardInViewport", () => {
       this.setState({
         isCardVisible: true
       });
     });
-
     _defineProperty(this, "onClick", (event, analyticsEvent) => {
       const {
         onClick
@@ -611,7 +595,6 @@ export class CardBase extends Component {
       const {
         metadata
       } = this;
-
       if (onClick) {
         const cardEvent = {
           event,
@@ -620,7 +603,6 @@ export class CardBase extends Component {
         onClick(cardEvent, analyticsEvent);
       }
     });
-
     _defineProperty(this, "onMouseEnter", event => {
       const {
         onMouseEnter
@@ -628,7 +610,6 @@ export class CardBase extends Component {
       const {
         metadata
       } = this;
-
       if (onMouseEnter) {
         const cardEvent = {
           event,
@@ -637,54 +618,23 @@ export class CardBase extends Component {
         onMouseEnter(cardEvent);
       }
     });
-
     let _status = 'loading';
-
     let _cardPreview;
-
     let _error;
-
     const {
       identifier: _identifier,
       resizeMode: _resizeMode,
       ssr: _ssr,
       mediaClient: _mediaClient
     } = this.props;
-
     if (isFileIdentifier(_identifier)) {
       const {
         id
       } = _identifier;
       const fileImageMode = imageResizeModeToFileImageMode(_resizeMode);
       _cardPreview = getCardPreviewFromCache(id, fileImageMode);
-
       if (!_cardPreview && _ssr) {
-        var _this$ssrData, _this$ssrData2;
-
-        this.ssrData = getSSRData(_identifier);
-
-        if ((_this$ssrData = this.ssrData) !== null && _this$ssrData !== void 0 && _this$ssrData.error) {
-          this.ssrReliability.server = {
-            status: 'fail',
-            ...this.ssrData.error
-          };
-        }
-
-        if (!((_this$ssrData2 = this.ssrData) !== null && _this$ssrData2 !== void 0 && _this$ssrData2.dataURI)) {
-          try {
-            _cardPreview = getSSRCardPreview(_ssr, _mediaClient, _identifier.id, this.getImageURLParams(_identifier), this.getMediaBlobUrlAttrs(_identifier));
-          } catch (e) {
-            this.ssrReliability[_ssr] = {
-              status: 'fail',
-              ...extractErrorInfo(e)
-            };
-          }
-        } else {
-          _cardPreview = {
-            dataURI: this.ssrData.dataURI,
-            source: 'ssr-data'
-          };
-        }
+        _cardPreview = this.getSSRPreview(_ssr, _identifier, _mediaClient);
       }
     } else if (isExternalImageIdentifier(_identifier)) {
       this.fireCommencedEvent();
@@ -697,14 +647,13 @@ export class CardBase extends Component {
         orientation: 1,
         source: 'external'
       };
-    } // If cardPreview is available from local cache or external, `isCardVisible`
+    }
+
+    // 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: _status,
       isCardVisible: _isCardVisible,
@@ -714,13 +663,37 @@ export class CardBase extends Component {
       cardRef: null,
       isBannedLocalPreview: false,
       previewDidRender: false,
-      error: _error
+      error: _error,
+      wasResolvedUpfrontPreview: false
     };
   }
-
+  getSSRPreview(ssr, identifier, mediaClient) {
+    var _this$ssrData, _this$ssrData2;
+    this.ssrData = getSSRData(identifier);
+    if ((_this$ssrData = this.ssrData) !== null && _this$ssrData !== void 0 && _this$ssrData.error) {
+      this.ssrReliability.server = {
+        status: 'fail',
+        ...this.ssrData.error
+      };
+    }
+    if (!((_this$ssrData2 = this.ssrData) !== null && _this$ssrData2 !== void 0 && _this$ssrData2.dataURI)) {
+      try {
+        return getSSRCardPreview(ssr, mediaClient, identifier.id, this.getImageURLParams(identifier), this.getMediaBlobUrlAttrs(identifier));
+      } catch (e) {
+        this.ssrReliability[ssr] = {
+          status: 'fail',
+          ...extractErrorInfo(e)
+        };
+      }
+    } else {
+      return {
+        dataURI: this.ssrData.dataURI,
+        source: 'ssr-data'
+      };
+    }
+  }
   componentDidMount() {
     var _getDocument;
-
     this.hasBeenMounted = true;
     const {
       isCardVisible,
@@ -731,34 +704,31 @@ export class CardBase extends Component {
       ssr,
       dimensions
     } = this.props;
-
     if (isCardVisible && isFileIdentifier(identifier)) {
       this.updateStateForIdentifier(identifier);
+      if (!cardPreview) {
+        this.resolveUpfrontPreview(identifier);
+      }
     }
-
     if (isCardVisible && !!ssr && !!cardPreview && isFileIdentifier(identifier)) {
       var _this$ssrData3;
-
       if (isSSRClientPreview(cardPreview)) {
         // Since the SSR preview brings the token in the query params,
         // We need to fetch the remote preview to be able to cache it,
         this.setCacheSSRPreview(identifier);
       }
-
       if (isSSRDataPreview(cardPreview) && isBigger((_this$ssrData3 = this.ssrData) === null || _this$ssrData3 === void 0 ? void 0 : _this$ssrData3.dimensions, dimensions)) {
         // If dimensions from Server have changed and are bigger,
         // we need to refetch
         this.refetchSSRPreview(identifier);
       }
-    } // we add a listener for each of the cards on the page
+    }
+    // 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 = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.addEventListener('copy', this.fireCopiedEvent);
   }
-
   componentDidUpdate(prevProps, prevState) {
     const {
       mediaClient: prevMediaClient,
@@ -784,14 +754,26 @@ export class CardBase extends Component {
       fileState,
       isBannedLocalPreview,
       previewDidRender,
-      isPlayingFile
+      isPlayingFile,
+      wasResolvedUpfrontPreview
     } = this.state;
     const isDifferent = isDifferentIdentifier(prevIdentifier, identifier);
+    /**
+     * Variable turnedVisible should only be true when media card
+     * was invisible in the previous state and is visible in the current one
+     *
+     * prevIsCardVisible | isCardVisible |  turnedVisible
+     * ----------------------------------------------------
+     *       false       |    false      |      false
+     *       false       |    true       |      true
+     *       true        |    true       |      false
+     *       true        |    false      |      false       (unreachable case)
+     * ----------------------------------------------------
+     */
     const turnedVisible = !prevIsCardVisible && isCardVisible;
     const isNewMediaClient = prevMediaClient !== mediaClient;
     const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
     this.updateFileStateFlag(fileState);
-
     if (isExternalImageIdentifier(identifier) && isDifferent) {
       this.fireCommencedEvent();
       const {
@@ -807,20 +789,19 @@ export class CardBase extends Component {
         isCardVisible: true
       });
     }
-
     if (isFileIdentifier(identifier) && (turnedVisible || !!this.subscription && (isNewMediaClient || isDifferent))) {
       this.updateStateForIdentifier(identifier);
     }
-
     if (this.state.status !== prevState.status) {
       this.fireOperationalEvent();
-
       if (this.state.status === 'complete' || this.fileAttributes.fileMediatype === 'video' && !!cardPreview && this.state.status === 'processing') {
         this.fireScreenEvent();
       }
     }
-
-    if (isFileIdentifier(identifier) && fileState && shouldResolvePreview({
+    if (isFileIdentifier(identifier) && turnedVisible && !cardPreview && !wasResolvedUpfrontPreview) {
+      // This is a one-off call, only meant to happen when turnedVisible = true (only once in the component's lifecycle)
+      this.resolveUpfrontPreview(identifier);
+    } else if (isFileIdentifier(identifier) && fileState && shouldResolvePreview({
       status,
       fileState,
       prevDimensions,
@@ -829,64 +810,55 @@ export class CardBase extends Component {
       fileImageMode,
       featureFlags,
       hasCardPreview: !!cardPreview,
-      isBannedLocalPreview
+      isBannedLocalPreview,
+      wasResolvedUpfrontPreview
     })) {
       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
+    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() {
     var _getDocument2;
-
     this.hasBeenMounted = false;
     this.unsubscribe();
     (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.removeEventListener('copy', this.fireCopiedEvent);
   }
-
   updateStateForIdentifier(identifier) {
     this.fireCommencedEvent();
     this.subscribeInternalFile(identifier);
   }
-
   updateFileStateFlag(fileState) {
     if (!fileState) {
       return;
     }
-
     const {
       status
     } = fileState;
-
     if (status === 'processing') {
       this.fileStateFlags.wasStatusProcessing = true;
     } else if (status === 'uploading') {
       this.fileStateFlags.wasStatusUploading = true;
     }
   }
-
   subscribeInternalFile(identifier) {
     const {
       mediaClient
@@ -921,7 +893,6 @@ export class CardBase extends Component {
       }
     });
   }
-
   get requestedDimensions() {
     const {
       dimensions
@@ -934,19 +905,14 @@ export class CardBase extends Component {
       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$state2, _this$state2$fileStat;
-
     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 {
       status,
@@ -959,7 +925,6 @@ export class CardBase extends Component {
     createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error, this.traceContext, fileState === null || fileState === void 0 ? void 0 : fileState.metadataTraceContext);
     completeUfoExperience(this.internalOccurrenceKey, status, this.fileAttributes, this.fileStateFlags, this.ssrReliability, error);
   }
-
   fireCommencedEvent() {
     this.timeElapsedTillCommenced = performance.now();
     const {
@@ -972,7 +937,6 @@ export class CardBase extends Component {
     }, this.traceContext);
     startUfoExperience(this.internalOccurrenceKey);
   }
-
   get actions() {
     const {
       actions = [],
@@ -985,7 +949,6 @@ export class CardBase extends Component {
     const {
       metadata
     } = this;
-
     if (isFileIdentifier(identifier) && (status === 'failed-processing' || shouldEnableDownloadButton)) {
       const downloadAction = {
         label: 'Download',
@@ -999,7 +962,6 @@ export class CardBase extends Component {
       return actions;
     }
   }
-
   render() {
     const {
       isPlayingFile,
@@ -1010,9 +972,7 @@ export class CardBase extends Component {
       locale: "en"
     }, innerContent);
   }
-
 }
-
 _defineProperty(CardBase, "defaultProps", {
   appearance: 'auto',
   resizeMode: 'crop',
@@ -1021,7 +981,6 @@ _defineProperty(CardBase, "defaultProps", {
   // Media Feature Flag defaults are defined in @atlaskit/media-common
   featureFlags: {}
 });
-
 export const Card = withMediaAnalyticsContext({
   packageVersion,
   packageName,