@atlaskit/media-card 77.2.3 → 77.4.0

package/dist/es2019/card/v2/cardV2.js

@@ -1,1035 +1,31 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { Component, Suspense, useEffect } from 'react';
-import ReactDOM from 'react-dom';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { isFileIdentifier } from '@atlaskit/media-client';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
-import DownloadIcon from '@atlaskit/icon/glyph/download';
-import { getRandomHex } from '@atlaskit/media-common';
-import { globalMediaEventEmitter, isDifferentIdentifier, isFileIdentifier, RECENTS_COLLECTION, isImageRepresentationReady, isExternalImageIdentifier, imageResizeModeToFileImageMode } from '@atlaskit/media-client';
-import { MediaViewer } from '@atlaskit/media-viewer';
-import { injectIntl, IntlProvider } from 'react-intl-next';
-import { CardViewV2 } from './cardViewV2';
-import { ViewportDetector } from '../../utils/viewportDetector';
-import { videoIsPlayable } from '../../utils/videoIsPlayable';
-import { getRequestedDimensions } from '../../utils/getDataURIDimension';
-import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview, getSSRCardPreview, isLocalPreview, isSSRPreview, isSSRClientPreview, isSSRDataPreview, fetchAndCacheRemotePreview } from '../getCardPreview';
-import { getFileDetails } from '../../utils/metadata';
-import { InlinePlayerLazyV2 } from './inlinePlayerLazyV2';
-import { getFileAttributes, extractErrorInfo } from '../../utils/analytics';
-import { isLocalPreviewError, MediaCardError, MediaFileStateError, ensureMediaCardError, ImageLoadError } from '../../errors';
-import { fireOperationalEvent, fireCommencedEvent, fireCopiedEvent, fireScreenEvent, fireNonCriticalErrorEvent } from '../cardAnalytics';
-import getDocument from '../../utils/document';
-import { StoreSSRDataScript, getSSRData } from '../../utils/globalScope';
-import { getCardStateFromFileState, createStateUpdater } from '../cardState';
-import { isBigger } from '../../utils/dimensionComparer';
-import { getMediaCardCursor } from '../../utils/getMediaCardCursor';
-import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '../../utils/ufoExperiences';
-import { generateUniqueId } from '../../utils/generateUniqueId';
-import { useFileState } from '@atlaskit/media-client-react';
+import React from 'react';
+import { IntlProvider, injectIntl } from 'react-intl-next';
+import { ExternalImageCard } from './externalImageCard';
+import { FileCard } from './fileCard';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.2.3";
-export class CardV2Base extends Component {
-  constructor(props) {
-    super(props);
-    // 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)
-    _defineProperty(this, "internalOccurrenceKey", generateUniqueId());
-    _defineProperty(this, "hasBeenMounted", false);
-    _defineProperty(this, "fileStateFlags", {
-      wasStatusUploading: false,
-      wasStatusProcessing: false
-    });
-    _defineProperty(this, "ssrReliability", {
-      server: {
-        status: 'unknown'
-      },
-      client: {
-        status: 'unknown'
-      }
-    });
-    // We initialise timeElapsedTillCommenced
-    // to avoid extra branching on a possibly undefined value.
-    _defineProperty(this, "timeElapsedTillCommenced", performance.now());
-    // Generate unique traceId for file
-    _defineProperty(this, "traceContext", {
-      traceId: getRandomHex(8)
-    });
-    _defineProperty(this, "getImageURLParams", ({
-      collectionName: collection
-    }) => ({
-      collection,
-      mode: imageResizeModeToFileImageMode(this.props.resizeMode),
-      ...this.requestedDimensions,
-      allowAnimated: true
-    }));
-    _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, "getCardPreviewParams", (identifier, fileState) => {
-      const {
-        isBannedLocalPreview
-      } = this.state;
-      const {
-        id
-      } = identifier;
-      const {
-        dimensions = {},
-        mediaClient
-      } = this.props;
-      return {
-        mediaClient,
-        id,
-        dimensions,
-        onLocalPreviewError: this.fireNonCriticalErrorEvent,
-        filePreview: isBannedLocalPreview ? undefined : getFilePreviewFromFileState(fileState),
-        isRemotePreviewReady: isImageRepresentationReady(fileState),
-        imageUrlParams: this.getImageURLParams(identifier),
-        mediaBlobUrlAttrs: this.getMediaBlobUrlAttrs(identifier, fileState),
-        traceContext: this.traceContext
-      };
-    });
-    _defineProperty(this, "setCacheSSRPreview", identifier => {
-      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 => {
-      try {
-        const cardPreview = await this.fetchAndCacheRemotePreview(identifier);
-        this.safeSetState({
-          cardPreview
-        });
-      } catch (e) {
-        const wrappedError = ensureMediaCardError('remote-preview-fetch-ssr', e, true);
-        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);
-        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 error should already been logged inside the getCardPreview. No need to log it here.
-          this.safeSetState({
-            isBannedLocalPreview: true
-          });
-        } else {
-          this.safeSetState({
-            status: 'error',
-            error: wrappedError
-          });
-        }
-      }
-    });
-    _defineProperty(this, "subscribeFileState", fileState => {
-      const {
-        isBannedLocalPreview
-      } = this.state;
-      if (fileState.status !== 'error') {
-        const newState = getCardStateFromFileState(fileState, isBannedLocalPreview);
-        this.safeSetState(newState);
-      } else {
-        const e = new MediaFileStateError(fileState.id, fileState.reason, fileState.message, fileState.details);
-        const errorReason = this.state.status === 'uploading' ? 'upload' : 'metadata-fetch';
-        const error = new MediaCardError(errorReason, e);
-        this.safeSetState({
-          error,
-          status: 'error'
-        });
-      }
-    });
-    _defineProperty(this, "getPerformanceAttributes", () => {
-      const {
-        timeElapsedTillCommenced
-      } = this;
-      const timeElapsedTillEvent = performance.now();
-      const durationSinceCommenced = timeElapsedTillCommenced && timeElapsedTillEvent - timeElapsedTillCommenced;
-      return {
-        overall: {
-          durationSincePageStart: timeElapsedTillEvent,
-          durationSinceCommenced
-        }
-      };
-    });
-    _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
-      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
-        } = this.props;
-        const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
-        isFileIdentifier(identifier) && removeCardPreviewFromCache(identifier.id, fileImageMode);
-        this.safeSetState(updateState);
-      } else {
-        this.safeSetState({
-          status: 'error',
-          error
-        });
-      }
-    });
-    _defineProperty(this, "onImageLoad", cardPreview => {
-      if (cardPreview) {
-        if (isSSRClientPreview(cardPreview) && this.ssrReliability.client.status === 'unknown') {
-          this.ssrReliability.client = {
-            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'
-          };
-          this.ssrReliability.client = {
-            status: 'success'
-          };
-        }
-      }
-      const {
-        cardPreview: currentPreview
-      } = 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
-      } = this.props;
-      const {
-        cardRef
-      } = 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
-      } = this.props;
-      const {
-        fileState
-      } = 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) {
-        /**
-         * createStateUpdater helper returns a callback to be passed to setState.
-         * It decides wether to update the 'status' depending on the current state vs the input state.
-         * From docs: "Both state and props received by the updater function are guaranteed to be up-to-date."
-         * If the input state brings an error and it won't be updating the state, the error will be logged as non-critical inside the helper.
-         * If the error persists int the state, it means it is a critical error and should be logged as a failed event for Card
-         */
-        this.setState(createStateUpdater(newState, this.fireNonCriticalErrorEvent));
-      }
-    });
-    _defineProperty(this, "onCardViewClick", (event, analyticsEvent) => {
-      const {
-        identifier,
-        useInlinePlayer,
-        shouldOpenMediaViewer
-      } = this.props;
-      const {
-        cardPreview
-      } = this.state;
-      const {
-        metadata
-      } = this;
-      this.onClick(event, analyticsEvent);
-      if (!metadata) {
-        return;
-      }
-      const isVideo = metadata && metadata.mediaType === 'video';
-      if (useInlinePlayer && isVideo && !!cardPreview) {
-        this.setState({
-          isPlayingFile: true,
-          shouldAutoplay: true
-        });
-      } else if (shouldOpenMediaViewer) {
-        let mediaViewerSelectedItem;
-        if (isFileIdentifier(identifier)) {
-          mediaViewerSelectedItem = {
-            id: identifier.id,
-            mediaItemType: 'file',
-            collectionName: identifier.collectionName,
-            occurrenceKey: identifier.occurrenceKey
-          };
-        } else {
-          mediaViewerSelectedItem = {
-            mediaItemType: 'external-image',
-            dataURI: identifier.dataURI,
-            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,
-        dimensions,
-        selected,
-        testId,
-        originalDimensions,
-        onFullscreenChange
-      } = this.props;
-      const {
-        shouldAutoplay,
-        cardPreview
-      } = this.state;
-      const card = this.renderCard(false, 'loading', false);
-      return /*#__PURE__*/React.createElement(Suspense, {
-        fallback: card
-      }, /*#__PURE__*/React.createElement(InlinePlayerLazyV2, {
-        dimensions: dimensions,
-        originalDimensions: originalDimensions,
-        identifier: identifier,
-        autoplay: !!shouldAutoplay,
-        onFullscreenChange: onFullscreenChange,
-        onError: this.onInlinePlayerError,
-        onClick: this.onClick,
-        selected: selected,
-        ref: this.setRef,
-        testId: testId,
-        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,
-          isUserCollection: identifier.collectionName === RECENTS_COLLECTION
-        };
-      } else {
-        payloadPart = {
-          fileId: identifier.dataURI,
-          isUserCollection: false
-        };
-      }
-      globalMediaEventEmitter.emit('media-viewed', {
-        viewingLevel: 'minimal',
-        ...payloadPart
-      });
-    });
-    _defineProperty(this, "renderMediaViewer", () => {
-      const {
-        mediaViewerSelectedItem
-      } = this.state;
-      const {
-        mediaClient,
-        identifier,
-        mediaViewerItems,
-        contextId,
-        featureFlags
-      } = this.props;
-      if (!mediaViewerSelectedItem) {
-        return;
-      }
-      const collectionName = isFileIdentifier(identifier) ? identifier.collectionName || '' : '';
-      return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
-        collectionName: collectionName,
-        items: mediaViewerItems || [],
-        mediaClientConfig: mediaClient.config,
-        selectedItem: mediaViewerSelectedItem,
-        onClose: this.onMediaViewerClose,
-        contextId: contextId,
-        featureFlags: featureFlags
-      }), document.body);
-    });
-    _defineProperty(this, "renderCard", (withCallbacks = true, cardStatusOverride, izLazyOverride) => {
-      const {
-        identifier,
-        isLazy,
-        appearance,
-        resizeMode,
-        dimensions,
-        selectable,
-        selected,
-        disableOverlay,
-        alt,
-        testId,
-        featureFlags,
-        titleBoxBgColor,
-        titleBoxIcon,
-        ssr,
-        useInlinePlayer,
-        shouldOpenMediaViewer,
-        shouldHideTooltip
-      } = this.props;
-      const {
-        mediaItemType
-      } = identifier;
-      const {
-        status,
-        progress,
-        cardPreview,
-        error,
-        cardRef,
-        isCardVisible
-      } = this.state;
-      const {
-        metadata
-      } = this;
-      const {
-        onCardViewClick,
-        onDisplayImage,
-        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 forceSyncDisplay = !!ssr;
-      const mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, status === 'error' || status === 'failed-processing', !!this.state.cardPreview, metadata.mediaType);
-      const card = /*#__PURE__*/React.createElement(CardViewV2, {
-        status: cardStatusOverride || status,
-        error: error,
-        mediaItemType: mediaItemType,
-        metadata: metadata,
-        cardPreview: cardPreview,
-        alt: alt,
-        appearance: appearance,
-        resizeMode: resizeMode,
-        dimensions: dimensions,
-        actions: actions,
-        selectable: selectable,
-        selected: selected,
-        onClick: withCallbacks ? onCardViewClick : undefined,
-        onMouseEnter: withCallbacks ? onMouseEnter : undefined,
-        disableOverlay: disableOverlay,
-        progress: progress,
-        onDisplayImage: withCallbacks ? onDisplayImage : undefined,
-        innerRef: this.setRef,
-        testId: testId,
-        featureFlags: featureFlags,
-        titleBoxBgColor: titleBoxBgColor,
-        titleBoxIcon: titleBoxIcon,
-        onImageError: withCallbacks ? this.onImageError : undefined,
-        onImageLoad: withCallbacks ? this.onImageLoad : undefined,
-        nativeLazyLoad: nativeLazyLoad,
-        forceSyncDisplay: forceSyncDisplay,
-        mediaCardCursor: mediaCardCursor,
-        shouldHideTooltip: shouldHideTooltip
-      });
-      return isLazyWithOverride ? /*#__PURE__*/React.createElement(ViewportDetector, {
-        cardEl: cardRef,
-        onVisible: this.onCardInViewport
-      }, card) : card;
-    });
-    _defineProperty(this, "storeSSRData", () => {
-      var _this$ssrReliability$;
-      const {
-        ssr,
-        identifier
-      } = this.props;
-      const {
-        cardPreview: {
-          dataURI
-        } = {}
-      } = this.state;
-      return isFileIdentifier(identifier) && ssr === 'server' && /*#__PURE__*/React.createElement(StoreSSRDataScript, {
-        identifier: identifier,
-        dataURI: dataURI,
-        dimensions: this.requestedDimensions,
-        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
-      } = this.props;
-      const {
-        metadata
-      } = this;
-      if (onClick) {
-        const cardEvent = {
-          event,
-          mediaItemDetails: metadata
-        };
-        onClick(cardEvent, analyticsEvent);
-      }
-    });
-    _defineProperty(this, "onMouseEnter", event => {
-      const {
-        onMouseEnter
-      } = this.props;
-      const {
-        metadata
-      } = this;
-      if (onMouseEnter) {
-        const cardEvent = {
-          event,
-          mediaItemDetails: metadata
-        };
-        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) {
-        _cardPreview = this.getSSRPreview(_ssr, _identifier, _mediaClient);
-      }
-    } 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: _status,
-      isCardVisible: _isCardVisible,
-      isPlayingFile: false,
-      shouldAutoplay: false,
-      cardPreview: _cardPreview,
-      cardRef: null,
-      isBannedLocalPreview: false,
-      previewDidRender: false,
-      error: _error,
-      wasResolvedUpfrontPreview: false,
-      shouldUpdateStateForIdentifier: _isCardVisible && isFileIdentifier(_identifier)
-    };
-  }
-  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,
-      cardPreview
-    } = this.state;
-    const {
-      identifier,
-      ssr,
-      dimensions
-    } = this.props;
-    if (isCardVisible && isFileIdentifier(identifier)) {
-      this.updateStateForIdentifier();
-      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
-    // 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) {
-    var _this$ssrData4;
-    const {
-      mediaClient: prevMediaClient,
-      identifier: prevIdentifier,
-      dimensions: prevDimensions
-    } = prevProps;
-    const {
-      isCardVisible: prevIsCardVisible,
-      cardPreview: prevCardPreview
-    } = prevState;
-    const {
-      mediaClient,
-      identifier,
-      dimensions,
-      useInlinePlayer,
-      disableOverlay,
-      ssr
-    } = this.props;
-    const {
-      isCardVisible,
-      cardPreview,
-      status,
-      fileState,
-      isBannedLocalPreview,
-      previewDidRender,
-      isPlayingFile,
-      wasResolvedUpfrontPreview
-    } = this.state;
-    const isDiffIdentifier = 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 hadSSRCardPreview = !!prevCardPreview && isSSRClientPreview(prevCardPreview) && !cardPreview;
-    const isNewMediaClient = prevMediaClient !== mediaClient;
-    this.updateFileStateFlag(fileState);
-    if (isExternalImageIdentifier(identifier) && isDiffIdentifier) {
-      this.fireCommencedEvent();
-      const {
-        dataURI
-      } = identifier;
-      this.setState({
-        status: 'loading-preview',
-        cardPreview: {
-          dataURI,
-          orientation: 1,
-          source: 'external'
-        },
-        isCardVisible: true
-      });
-    }
-    if (cardPreview && turnedVisible && isFileIdentifier(identifier) && isSSRDataPreview(cardPreview) && isBigger((_this$ssrData4 = this.ssrData) === null || _this$ssrData4 === void 0 ? void 0 : _this$ssrData4.dimensions, dimensions)) {
-      // If dimensions from Server have changed and are bigger,
-      // we need to refetch
-      this.refetchSSRPreview(identifier);
-    }
-    if (isFileIdentifier(identifier) && (turnedVisible || !!this.subscription && (isNewMediaClient || isDiffIdentifier))) {
-      this.updateStateForIdentifier();
-    }
-    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) && (turnedVisible || ssr === 'client' && hadSSRCardPreview) && !cardPreview && !wasResolvedUpfrontPreview) {
-      // This is a one-off call, only meant to happen once in the component's lifecycle. Mainly when either:
-      // - turnedVisible = true
-      // - ssr = client and has no preview (the dataURI failed to load in the previous state, most likely because of an initial auth issue)
-      this.resolveUpfrontPreview(identifier);
-    } else if (isFileIdentifier(identifier) && fileState && shouldResolvePreview({
-      status,
-      fileState,
-      prevDimensions,
-      dimensions,
-      hasCardPreview: !!cardPreview,
-      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
-    ['loading-preview', 'processing'].includes(status)) {
-      this.safeSetState({
-        status: 'complete',
-        shouldUpdateStateForIdentifier: false
-      });
-      if (this.hasBeenMounted) {
-        // TODO MEX-788: add test for "do not remove the card preview when unsubscribing".
-        this.setState({
-          isBannedLocalPreview: false
-        });
-      }
-    }
-    const isVideo = this.fileAttributes.fileMediatype === 'video';
-    const {
-      mimeType
-    } = getFileDetails(identifier, fileState);
-    const isVideoPlayable = videoIsPlayable(isBannedLocalPreview, fileState, mimeType);
-    if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable) {
-      this.setState({
-        isPlayingFile: true
-      });
-    }
-  }
-  componentWillUnmount() {
-    var _getDocument2;
-    this.fireAbortedEvent();
-    this.hasBeenMounted = false;
-    (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.removeEventListener('copy', this.fireCopiedEvent);
-  }
-  updateStateForIdentifier() {
-    this.fireCommencedEvent();
-    this.setState({
-      shouldUpdateStateForIdentifier: true
-    });
-  }
-  updateFileStateFlag(fileState) {
-    if (!fileState) {
-      return;
-    }
-    const {
-      status
-    } = fileState;
-    if (status === 'processing') {
-      this.fileStateFlags.wasStatusProcessing = true;
-    } else if (status === 'uploading') {
-      this.fileStateFlags.wasStatusUploading = true;
-    }
-  }
-  get requestedDimensions() {
-    const {
-      dimensions
-    } = this.props;
-    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$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,
-      error,
-      fileState
-    } = this.state;
-    const {
-      createAnalyticsEvent
-    } = this.props;
-    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 {
-      createAnalyticsEvent
-    } = this.props;
-    createAnalyticsEvent && fireCommencedEvent(createAnalyticsEvent, this.fileAttributes, {
-      overall: {
-        durationSincePageStart: this.timeElapsedTillCommenced
-      }
-    }, this.traceContext);
-    startUfoExperience(this.internalOccurrenceKey);
-  }
-  fireAbortedEvent() {
-    const {
-      fileAttributes,
-      fileStateFlags,
-      ssrReliability
-    } = this;
-    // UFO won't abort if it's already in a final state (succeeded, failed, aborted, etc)
-    abortUfoExperience(this.internalOccurrenceKey, {
-      fileAttributes,
-      fileStateFlags,
-      ssrReliability
-    });
-  }
-  get actions() {
-    const {
-      actions = [],
-      identifier,
-      shouldEnableDownloadButton
-    } = this.props;
-    const {
-      status
-    } = this.state;
-    const {
-      metadata
-    } = this;
-    if (isFileIdentifier(identifier) && (status === 'failed-processing' || shouldEnableDownloadButton)) {
-      const downloadAction = {
-        label: 'Download',
-        icon: /*#__PURE__*/React.createElement(DownloadIcon, {
-          label: "Download"
-        }),
-        handler: () => this.props.mediaClient.file.downloadBinary(identifier.id, metadata.name, identifier.collectionName)
-      };
-      return [downloadAction, ...actions];
-    } else {
-      return actions;
-    }
-  }
-  render() {
-    const {
-      isPlayingFile,
-      mediaViewerSelectedItem,
-      shouldUpdateStateForIdentifier
-    } = this.state;
-    const innerContent = /*#__PURE__*/React.createElement(React.Fragment, null, isPlayingFile ? this.renderInlinePlayer() : this.renderCard(), mediaViewerSelectedItem ? this.renderMediaViewer() : null, this.storeSSRData());
-    let wrappedContent = innerContent;
-    if (shouldUpdateStateForIdentifier) {
-      const {
-        id,
-        collectionName,
-        occurrenceKey
-      } = this.props.identifier;
-      wrappedContent = /*#__PURE__*/React.createElement(FileStateListener, {
-        id: id,
-        onChange: this.subscribeFileState,
-        collectionName: collectionName,
-        occurrenceKey: occurrenceKey
-      }, innerContent);
-    }
-    return this.props.intl ? wrappedContent : /*#__PURE__*/React.createElement(IntlProvider, {
-      locale: "en"
-    }, wrappedContent);
-  }
-}
-_defineProperty(CardV2Base, "defaultProps", {
-  appearance: 'auto',
-  resizeMode: 'crop',
-  isLazy: true,
-  disableOverlay: false,
-  // Media Feature Flag defaults are defined in @atlaskit/media-common
-  featureFlags: {}
-});
-const FileStateListener = ({
-  children,
-  onChange,
-  id,
-  collectionName,
-  occurrenceKey
+const packageVersion = "77.4.0";
+export const CardV2Base = ({
+  identifier,
+  ...otherProps
 }) => {
-  const {
-    fileState
-  } = useFileState(id, {
-    collectionName,
-    occurrenceKey
-  });
-  useEffect(() => {
-    if (fileState) {
-      onChange(fileState);
-    }
-  }, [fileState, onChange]);
-  return children;
-};
-
-/**
- * We require this wrapper in order to refresh media card state when the identifier is updated (via a key)
- * TODO: remove the key when the cardV2 is no longer required
- */
-const CardWithKey = props => {
-  const {
-    identifier
-  } = props;
-  const key = isFileIdentifier(identifier) ? identifier.id : identifier.dataURI;
-  return /*#__PURE__*/React.createElement(CardV2Base, _extends({}, props, {
-    key: key
+  const innerContent = isFileIdentifier(identifier) ? /*#__PURE__*/React.createElement(FileCard, _extends({}, otherProps, {
+    identifier: identifier
+  })) : /*#__PURE__*/React.createElement(ExternalImageCard, _extends({}, otherProps, {
+    identifier: identifier
   }));
+  return otherProps.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
+    locale: "en"
+  }, innerContent);
 };
 export const CardV2 = withMediaAnalyticsContext({
   packageVersion,
   packageName,
   componentName: 'mediaCard',
   component: 'mediaCard'
-})(withAnalyticsEvents()(injectIntl(CardWithKey, {
+})(withAnalyticsEvents()(injectIntl(CardV2Base, {
   enforceContext: false
 })));