@atlaskit/media-card 76.1.2 → 76.2.1

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

@@ -0,0 +1,1031 @@
+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 { 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 { CardView } from '../cardView';
+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 { InlinePlayerLazy } from '../inlinePlayerLazy';
+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 } from '../../utils/ufoExperiences';
+import { generateUniqueId } from '../../utils/generateUniqueId';
+import { useFileState } from '@atlaskit/media-client-react';
+const packageName = "@atlaskit/media-card";
+const packageVersion = "76.2.1";
+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,
+        createAnalyticsEvent
+      } = 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),
+        createAnalyticsEvent,
+        featureFlags: this.props.featureFlags,
+        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 {
+          featureFlags
+        } = this.props;
+        const newState = getCardStateFromFileState(fileState, isBannedLocalPreview, featureFlags);
+        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,
+        mediaClient,
+        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(InlinePlayerLazy, {
+        mediaClient: mediaClient,
+        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,
+        expandByPixel
+      } = 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(CardView, {
+        expandByPixel: expandByPixel,
+        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: 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,
+      cardPreview
+    } = this.state;
+    const {
+      identifier,
+      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
+    // 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,
+      identifier: prevIdentifier,
+      dimensions: prevDimensions
+    } = prevProps;
+    const {
+      isCardVisible: prevIsCardVisible,
+      cardPreview: prevCardPreview
+    } = prevState;
+    const {
+      mediaClient,
+      identifier,
+      dimensions,
+      featureFlags,
+      useInlinePlayer,
+      disableOverlay,
+      resizeMode,
+      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;
+    const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
+    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 (isFileIdentifier(identifier) && (turnedVisible || !!this.subscription && (isNewMediaClient || isDiffIdentifier))) {
+      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) && (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,
+      identifier,
+      fileImageMode,
+      featureFlags,
+      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.hasBeenMounted = false;
+    (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.removeEventListener('copy', this.fireCopiedEvent);
+  }
+  updateStateForIdentifier(identifier) {
+    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);
+  }
+  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 {
+    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
+  }));
+};
+export const CardV2 = withMediaAnalyticsContext({
+  packageVersion,
+  packageName,
+  componentName: 'mediaCard',
+  component: 'mediaCard'
+})(withAnalyticsEvents()(injectIntl(CardWithKey, {
+  enforceContext: false
+})));