@atlaskit/media-card 77.12.4 → 78.0.1

package/dist/esm/card/card.js

@@ -1,1053 +1,34 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import React, { Component, Suspense, useContext } from 'react';
-import ReactDOM from 'react-dom';
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["identifier"];
 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 { 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, ensureMediaCardError, ImageLoadError } from '../errors';
-import { fireOperationalEvent as _fireOperationalEvent, fireCommencedEvent as _fireCommencedEvent, fireCopiedEvent, fireScreenEvent, fireNonCriticalErrorEvent } from './cardAnalytics';
-import getDocument from '../utils/document';
-import { generateScriptProps, 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 { DateOverrideContext } from '../dateOverrideContext';
+import React from 'react';
+import { IntlProvider, injectIntl } from 'react-intl-next';
+import { ExternalImageCard } from './externalImageCard';
+import { FileCard } from './fileCard';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.12.4";
-export var CardBase = /*#__PURE__*/function (_Component) {
-  _inherits(CardBase, _Component);
-  var _super = _createSuper(CardBase);
-  function CardBase(props) {
-    var _this;
-    _classCallCheck(this, CardBase);
-    _this = _super.call(this, 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(_assertThisInitialized(_this), "internalOccurrenceKey", generateUniqueId());
-    _defineProperty(_assertThisInitialized(_this), "hasBeenMounted", false);
-    _defineProperty(_assertThisInitialized(_this), "mediaViewerButtonRef", null);
-    _defineProperty(_assertThisInitialized(_this), "fileStateFlags", {
-      wasStatusUploading: false,
-      wasStatusProcessing: false
-    });
-    _defineProperty(_assertThisInitialized(_this), "ssrReliability", {
-      server: {
-        status: 'unknown'
-      },
-      client: {
-        status: 'unknown'
-      }
-    });
-    // We initialise timeElapsedTillCommenced
-    // to avoid extra branching on a possibly undefined value.
-    _defineProperty(_assertThisInitialized(_this), "timeElapsedTillCommenced", performance.now());
-    // Generate unique traceId for file
-    _defineProperty(_assertThisInitialized(_this), "traceContext", {
-      traceId: getRandomHex(8)
-    });
-    _defineProperty(_assertThisInitialized(_this), "getImageURLParams", function (_ref) {
-      var collection = _ref.collectionName;
-      return _objectSpread(_objectSpread({
-        collection: collection,
-        mode: imageResizeModeToFileImageMode(_this.props.resizeMode)
-      }, _this.requestedDimensions), {}, {
-        allowAnimated: true
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "getMediaBlobUrlAttrs", function (identifier, fileState) {
-      var id = identifier.id,
-        collection = identifier.collectionName;
-      var _this$props = _this.props,
-        originalDimensions = _this$props.originalDimensions,
-        contextId = _this$props.contextId,
-        alt = _this$props.alt;
-      var _getFileDetails = getFileDetails(identifier, fileState),
-        mimeType = _getFileDetails.mimeType,
-        name = _getFileDetails.name,
-        size = _getFileDetails.size;
-      return contextId ? _objectSpread(_objectSpread({
-        id: id,
-        collection: collection,
-        contextId: contextId,
-        mimeType: mimeType,
-        name: name,
-        size: size
-      }, originalDimensions || _this.requestedDimensions), {}, {
-        alt: alt
-      }) : undefined;
-    });
-    _defineProperty(_assertThisInitialized(_this), "getCardPreviewParams", function (identifier, fileState) {
-      var isBannedLocalPreview = _this.state.isBannedLocalPreview;
-      var id = identifier.id;
-      var _this$props2 = _this.props,
-        _this$props2$dimensio = _this$props2.dimensions,
-        dimensions = _this$props2$dimensio === void 0 ? {} : _this$props2$dimensio,
-        mediaClient = _this$props2.mediaClient;
-      return {
-        mediaClient: mediaClient,
-        id: id,
-        dimensions: 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(_assertThisInitialized(_this), "setCacheSSRPreview", function (identifier) {
-      _this.fetchAndCacheRemotePreview(identifier).catch(function () {
-        // 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(_assertThisInitialized(_this), "refetchSSRPreview", /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(identifier) {
-        var cardPreview, wrappedError;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              _context.prev = 0;
-              _context.next = 3;
-              return _this.fetchAndCacheRemotePreview(identifier);
-            case 3:
-              cardPreview = _context.sent;
-              _this.safeSetState({
-                cardPreview: cardPreview
-              });
-              _context.next = 11;
-              break;
-            case 7:
-              _context.prev = 7;
-              _context.t0 = _context["catch"](0);
-              wrappedError = ensureMediaCardError('remote-preview-fetch-ssr', _context.t0, true);
-              _this.fireNonCriticalErrorEvent(wrappedError);
-            case 11:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, null, [[0, 7]]);
-      }));
-      return function (_x) {
-        return _ref2.apply(this, arguments);
-      };
-    }());
-    _defineProperty(_assertThisInitialized(_this), "resolveUpfrontPreview", /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(identifier) {
-        var requestedDimensions, cardPreview, currentDimensions, areValidRequestedDimensions;
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              requestedDimensions = _objectSpread({}, _this.props.dimensions);
-              _context2.prev = 1;
-              _context2.next = 4;
-              return _this.fetchAndCacheRemotePreview(identifier);
-            case 4:
-              cardPreview = _context2.sent;
-              currentDimensions = _this.props.dimensions;
-              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: cardPreview,
-                  wasResolvedUpfrontPreview: true
-                });
-              } else {
-                _this.safeSetState({
-                  wasResolvedUpfrontPreview: true
-                });
-              }
-              _context2.next = 13;
-              break;
-            case 10:
-              _context2.prev = 10;
-              _context2.t0 = _context2["catch"](1);
-              _this.safeSetState({
-                wasResolvedUpfrontPreview: true
-              });
-              // NO need to log error. If this call fails, a refetch will happen after
-            case 13:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2, null, [[1, 10]]);
-      }));
-      return function (_x2) {
-        return _ref3.apply(this, arguments);
-      };
-    }());
-    _defineProperty(_assertThisInitialized(_this), "fetchAndCacheRemotePreview", function (identifier) {
-      var _this$props3 = _this.props,
-        mediaClient = _this$props3.mediaClient,
-        _this$props3$dimensio = _this$props3.dimensions,
-        dimensions = _this$props3$dimensio === void 0 ? {} : _this$props3$dimensio;
-      return fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions, _this.getImageURLParams(identifier), _this.getMediaBlobUrlAttrs(identifier));
-    });
-    _defineProperty(_assertThisInitialized(_this), "resolvePreview", /*#__PURE__*/function () {
-      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(identifier, fileState) {
-        var params, cardPreview, wrappedError;
-        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
-            case 0:
-              _context3.prev = 0;
-              params = _this.getCardPreviewParams(identifier, fileState);
-              _context3.next = 4;
-              return getCardPreview(params);
-            case 4:
-              cardPreview = _context3.sent;
-              _this.safeSetState({
-                cardPreview: cardPreview
-              });
-              _context3.next = 12;
-              break;
-            case 8:
-              _context3.prev = 8;
-              _context3.t0 = _context3["catch"](0);
-              wrappedError = ensureMediaCardError('preview-fetch', _context3.t0); //  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
-                });
-              }
-            case 12:
-            case "end":
-              return _context3.stop();
-          }
-        }, _callee3, null, [[0, 8]]);
-      }));
-      return function (_x3, _x4) {
-        return _ref4.apply(this, arguments);
-      };
-    }());
-    _defineProperty(_assertThisInitialized(_this), "getPerformanceAttributes", function () {
-      var _assertThisInitialize = _assertThisInitialized(_this),
-        timeElapsedTillCommenced = _assertThisInitialize.timeElapsedTillCommenced;
-      var timeElapsedTillEvent = performance.now();
-      var durationSinceCommenced = timeElapsedTillCommenced && timeElapsedTillEvent - timeElapsedTillCommenced;
-      return {
-        overall: {
-          durationSincePageStart: timeElapsedTillEvent,
-          durationSinceCommenced: durationSinceCommenced
-        }
-      };
-    });
-    _defineProperty(_assertThisInitialized(_this), "logSSRImageError", function (cardPreview) {
-      if (cardPreview) {
-        var failedSSRObject = _objectSpread({
-          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(_assertThisInitialized(_this), "onImageError", function (cardPreview) {
-      _this.logSSRImageError(cardPreview);
-      var currentPreview = _this.state.cardPreview;
-      // 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;
-      }
-      var error = new ImageLoadError(cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source);
-      var isLocal = cardPreview && isLocalPreview(cardPreview);
-      var isSSR = cardPreview && (isSSRClientPreview(cardPreview) || isSSRDataPreview(cardPreview));
-      if (isLocal || isSSR) {
-        var updateState = {
-          cardPreview: undefined
-        };
-        if (isLocal) {
-          updateState.isBannedLocalPreview = true;
-          _this.fireNonCriticalErrorEvent(error);
-        }
-        var _this$props4 = _this.props,
-          identifier = _this$props4.identifier,
-          resizeMode = _this$props4.resizeMode;
-        var fileImageMode = imageResizeModeToFileImageMode(resizeMode);
-        isFileIdentifier(identifier) && removeCardPreviewFromCache(identifier.id, fileImageMode);
-        _this.safeSetState(updateState);
-      } else {
-        _this.safeSetState({
-          status: 'error',
-          error: error
-        });
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "onImageLoad", function (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'
-          };
-        }
-      }
-      var currentPreview = _this.state.cardPreview;
-      // 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(_assertThisInitialized(_this), "fireCopiedEvent", function () {
-      var createAnalyticsEvent = _this.props.createAnalyticsEvent;
-      var cardRef = _this.state.cardRef;
-      cardRef && createAnalyticsEvent && fireCopiedEvent(createAnalyticsEvent, _this.metadata.id, cardRef);
-    });
-    _defineProperty(_assertThisInitialized(_this), "fireScreenEvent", function () {
-      var createAnalyticsEvent = _this.props.createAnalyticsEvent;
-      createAnalyticsEvent && fireScreenEvent(createAnalyticsEvent, _this.fileAttributes);
-    });
-    _defineProperty(_assertThisInitialized(_this), "fireNonCriticalErrorEvent", function (error) {
-      var createAnalyticsEvent = _this.props.createAnalyticsEvent;
-      var fileState = _this.state.fileState;
-      createAnalyticsEvent && fireNonCriticalErrorEvent(createAnalyticsEvent, _this.state.status, _this.fileAttributes, _this.ssrReliability, error, _this.traceContext, fileState === null || fileState === void 0 ? void 0 : fileState.metadataTraceContext);
-    });
-    _defineProperty(_assertThisInitialized(_this), "safeSetState", function (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(_assertThisInitialized(_this), "unsubscribe", function () {
-      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({
-          isBannedLocalPreview: false
-        });
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "onCardViewClick", function (event, analyticsEvent) {
-      var _this$props5 = _this.props,
-        identifier = _this$props5.identifier,
-        useInlinePlayer = _this$props5.useInlinePlayer,
-        shouldOpenMediaViewer = _this$props5.shouldOpenMediaViewer;
-      var _this$state = _this.state,
-        status = _this$state.status,
-        cardPreview = _this$state.cardPreview;
-      var _assertThisInitialize2 = _assertThisInitialized(_this),
-        metadata = _assertThisInitialize2.metadata;
-      _this.onClick(event, analyticsEvent);
-      if (!metadata) {
-        return;
-      }
-      var isVideo = metadata && metadata.mediaType === 'video';
-      if (useInlinePlayer && isVideo && !!cardPreview && status !== 'error') {
-        _this.setState({
-          isPlayingFile: true,
-          shouldAutoplay: true
-        });
-      } else if (shouldOpenMediaViewer) {
-        var 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: mediaViewerSelectedItem
-        });
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "onInlinePlayerError", function (e) {
-      _this.setState({
-        error: new MediaCardError('error-file-state', e),
-        status: 'error',
-        isPlayingFile: false
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "setRef", function (cardRef) {
-      !!cardRef && _this.setState({
-        cardRef: cardRef
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "setMediaViewerButtonRef", function (buttonRef) {
-      _this.mediaViewerButtonRef = buttonRef;
-    });
-    _defineProperty(_assertThisInitialized(_this), "renderInlinePlayer", function () {
-      var _this$props6 = _this.props,
-        identifier = _this$props6.identifier,
-        mediaClient = _this$props6.mediaClient,
-        dimensions = _this$props6.dimensions,
-        selected = _this$props6.selected,
-        testId = _this$props6.testId,
-        originalDimensions = _this$props6.originalDimensions,
-        onFullscreenChange = _this$props6.onFullscreenChange,
-        videoControlsWrapperRef = _this$props6.videoControlsWrapperRef;
-      var _this$state2 = _this.state,
-        shouldAutoplay = _this$state2.shouldAutoplay,
-        cardPreview = _this$state2.cardPreview;
-      var 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,
-        videoControlsWrapperRef: videoControlsWrapperRef
-      }));
-    });
-    _defineProperty(_assertThisInitialized(_this), "onMediaViewerClose", function () {
-      _this.setState({
-        mediaViewerSelectedItem: undefined
-      }, function () {
-        var _this$mediaViewerButt;
-        (_this$mediaViewerButt = _this.mediaViewerButtonRef) === null || _this$mediaViewerButt === void 0 || _this$mediaViewerButt.focus();
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "onDisplayImage", function () {
-      var identifier = _this.props.identifier;
-      var payloadPart;
-      if (isFileIdentifier(identifier)) {
-        payloadPart = {
-          fileId: identifier.id,
-          isUserCollection: identifier.collectionName === RECENTS_COLLECTION
-        };
-      } else {
-        payloadPart = {
-          fileId: identifier.dataURI,
-          isUserCollection: false
-        };
-      }
-      globalMediaEventEmitter.emit('media-viewed', _objectSpread({
-        viewingLevel: 'minimal'
-      }, payloadPart));
-    });
-    _defineProperty(_assertThisInitialized(_this), "renderMediaViewer", function () {
-      var mediaViewerSelectedItem = _this.state.mediaViewerSelectedItem;
-      var _this$props7 = _this.props,
-        mediaClient = _this$props7.mediaClient,
-        identifier = _this$props7.identifier,
-        mediaViewerItems = _this$props7.mediaViewerItems,
-        contextId = _this$props7.contextId,
-        featureFlags = _this$props7.featureFlags;
-      if (!mediaViewerSelectedItem) {
-        return;
-      }
-      var 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(_assertThisInitialized(_this), "renderCard", function () {
-      var withCallbacks = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      var cardStatusOverride = arguments.length > 1 ? arguments[1] : undefined;
-      var izLazyOverride = arguments.length > 2 ? arguments[2] : undefined;
-      var _this$props8 = _this.props,
-        identifier = _this$props8.identifier,
-        isLazy = _this$props8.isLazy,
-        appearance = _this$props8.appearance,
-        resizeMode = _this$props8.resizeMode,
-        dimensions = _this$props8.dimensions,
-        selectable = _this$props8.selectable,
-        selected = _this$props8.selected,
-        disableOverlay = _this$props8.disableOverlay,
-        alt = _this$props8.alt,
-        testId = _this$props8.testId,
-        featureFlags = _this$props8.featureFlags,
-        titleBoxBgColor = _this$props8.titleBoxBgColor,
-        titleBoxIcon = _this$props8.titleBoxIcon,
-        ssr = _this$props8.ssr,
-        useInlinePlayer = _this$props8.useInlinePlayer,
-        shouldOpenMediaViewer = _this$props8.shouldOpenMediaViewer,
-        shouldHideTooltip = _this$props8.shouldHideTooltip,
-        dateOverride = _this$props8.dateOverride;
-      var mediaItemType = identifier.mediaItemType;
-      var _this$state3 = _this.state,
-        status = _this$state3.status,
-        progress = _this$state3.progress,
-        cardPreview = _this$state3.cardPreview,
-        error = _this$state3.error,
-        cardRef = _this$state3.cardRef,
-        isCardVisible = _this$state3.isCardVisible;
-      var _assertThisInitialize3 = _assertThisInitialized(_this),
-        metadata = _assertThisInitialize3.metadata;
-      var _assertThisInitialize4 = _assertThisInitialized(_this),
-        onCardViewClick = _assertThisInitialize4.onCardViewClick,
-        onDisplayImage = _assertThisInitialize4.onDisplayImage,
-        actions = _assertThisInitialize4.actions,
-        onMouseEnter = _assertThisInitialize4.onMouseEnter;
-      var isLazyWithOverride = izLazyOverride === undefined ? isLazy : izLazyOverride;
-
-      // Card can be artificially turned visible before entering the viewport
-      // For example, when we have the image in cache
-      var nativeLazyLoad = isLazyWithOverride && !isCardVisible;
-      // Force Media Image to always display img for SSR
-      var forceSyncDisplay = !!ssr;
-      var mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, status === 'error' || status === 'failed-processing', !!_this.state.cardPreview, metadata.mediaType);
-      var card = /*#__PURE__*/React.createElement(CardView, {
-        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,
-        shouldOpenMediaViewer: shouldOpenMediaViewer,
-        onClick: withCallbacks ? onCardViewClick : undefined,
-        onMouseEnter: withCallbacks ? onMouseEnter : undefined,
-        disableOverlay: disableOverlay,
-        progress: progress,
-        onDisplayImage: withCallbacks ? onDisplayImage : undefined,
-        innerRef: _this.setRef,
-        openMediaViewerButtonRef: _this.setMediaViewerButtonRef,
-        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,
-        overriddenCreationDate: dateOverride
-      });
-      return isLazyWithOverride ? /*#__PURE__*/React.createElement(ViewportDetector, {
-        cardEl: cardRef,
-        onVisible: _this.onCardInViewport
-      }, card) : card;
-    });
-    _defineProperty(_assertThisInitialized(_this), "storeSSRData", function () {
-      var _this$ssrReliability$;
-      var _this$props9 = _this.props,
-        ssr = _this$props9.ssr,
-        identifier = _this$props9.identifier;
-      var _this$state$cardPrevi = _this.state.cardPreview,
-        _this$state$cardPrevi2 = _this$state$cardPrevi === void 0 ? {} : _this$state$cardPrevi,
-        dataURI = _this$state$cardPrevi2.dataURI;
-      return isFileIdentifier(identifier) &&
-      // Print the SSR result to be used during hydration
-      ssr === 'server' && /*#__PURE__*/React.createElement("script", generateScriptProps(identifier, dataURI, _this.requestedDimensions, ((_this$ssrReliability$ = _this.ssrReliability.server) === null || _this$ssrReliability$ === void 0 ? void 0 : _this$ssrReliability$.status) === 'fail' ? _this.ssrReliability.server : undefined));
-    });
-    _defineProperty(_assertThisInitialized(_this), "onCardInViewport", function () {
-      _this.setState({
-        isCardVisible: true
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "onClick", function (event, analyticsEvent) {
-      var onClick = _this.props.onClick;
-      var _assertThisInitialize5 = _assertThisInitialized(_this),
-        metadata = _assertThisInitialize5.metadata;
-      if (onClick) {
-        var cardEvent = {
-          event: event,
-          mediaItemDetails: metadata
-        };
-        onClick(cardEvent, analyticsEvent);
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "onMouseEnter", function (event) {
-      var onMouseEnter = _this.props.onMouseEnter;
-      var _assertThisInitialize6 = _assertThisInitialized(_this),
-        metadata = _assertThisInitialize6.metadata;
-      if (onMouseEnter) {
-        var cardEvent = {
-          event: event,
-          mediaItemDetails: metadata
-        };
-        onMouseEnter(cardEvent);
-      }
-    });
-    var _status = 'loading';
-    var _cardPreview;
-    var _error;
-    var _this$props10 = _this.props,
-      _identifier = _this$props10.identifier,
-      _resizeMode = _this$props10.resizeMode,
-      _ssr = _this$props10.ssr,
-      _mediaClient = _this$props10.mediaClient;
-    if (isFileIdentifier(_identifier)) {
-      var id = _identifier.id;
-      var 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';
-      var dataURI = _identifier.dataURI;
-      _cardPreview = {
-        dataURI: 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
-    var _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
-    };
-    return _this;
-  }
-  _createClass(CardBase, [{
-    key: "getSSRPreview",
-    value: function 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 = _objectSpread({
-          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] = _objectSpread({
-            status: 'fail'
-          }, extractErrorInfo(e));
-        }
-      } else {
-        return {
-          dataURI: this.ssrData.dataURI,
-          source: 'ssr-data'
-        };
-      }
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _getDocument;
-      this.hasBeenMounted = true;
-      var _this$state4 = this.state,
-        isCardVisible = _this$state4.isCardVisible,
-        cardPreview = _this$state4.cardPreview;
-      var _this$props11 = this.props,
-        identifier = _this$props11.identifier,
-        ssr = _this$props11.ssr,
-        dimensions = _this$props11.dimensions;
-      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 is repeated in componentDidUpdate because in the case of lazy loading true
-          // the card will be invisible by default.
-          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 || _getDocument.addEventListener('copy', this.fireCopiedEvent);
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      var _this$ssrData4;
-      var prevMediaClient = prevProps.mediaClient,
-        prevIdentifier = prevProps.identifier,
-        prevDimensions = prevProps.dimensions;
-      var prevIsCardVisible = prevState.isCardVisible,
-        prevCardPreview = prevState.cardPreview;
-      var _this$props12 = this.props,
-        mediaClient = _this$props12.mediaClient,
-        identifier = _this$props12.identifier,
-        dimensions = _this$props12.dimensions,
-        useInlinePlayer = _this$props12.useInlinePlayer,
-        disableOverlay = _this$props12.disableOverlay,
-        ssr = _this$props12.ssr;
-      var _this$state5 = this.state,
-        isCardVisible = _this$state5.isCardVisible,
-        cardPreview = _this$state5.cardPreview,
-        status = _this$state5.status,
-        fileState = _this$state5.fileState,
-        isBannedLocalPreview = _this$state5.isBannedLocalPreview,
-        previewDidRender = _this$state5.previewDidRender,
-        isPlayingFile = _this$state5.isPlayingFile,
-        wasResolvedUpfrontPreview = _this$state5.wasResolvedUpfrontPreview;
-      var 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)
-       * ----------------------------------------------------
-       */
-      var turnedVisible = !prevIsCardVisible && isCardVisible;
-      var hadSSRCardPreview = !!prevCardPreview && isSSRClientPreview(prevCardPreview) && !cardPreview;
-      var isNewMediaClient = prevMediaClient !== mediaClient;
-      this.updateFileStateFlag(fileState);
-      if (isExternalImageIdentifier(identifier) && isDiffIdentifier) {
-        this.fireCommencedEvent();
-        var dataURI = identifier.dataURI;
-        this.setState({
-          status: 'loading-preview',
-          cardPreview: {
-            dataURI: 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(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: status,
-        fileState: fileState,
-        prevDimensions: prevDimensions,
-        dimensions: dimensions,
-        hasCardPreview: !!cardPreview,
-        isBannedLocalPreview: isBannedLocalPreview,
-        wasResolvedUpfrontPreview: 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'
-        });
-        this.unsubscribe();
-      }
-      var isVideo = this.fileAttributes.fileMediatype === 'video';
-      var _getFileDetails2 = getFileDetails(identifier, fileState),
-        mimeType = _getFileDetails2.mimeType;
-      var isVideoPlayable = videoIsPlayable(isBannedLocalPreview, fileState, mimeType);
-      if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable && status !== 'error') {
-        this.setState({
-          isPlayingFile: true
-        });
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      var _getDocument2;
-      this.fireAbortedEvent();
-      this.hasBeenMounted = false;
-      this.unsubscribe();
-      (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 || _getDocument2.removeEventListener('copy', this.fireCopiedEvent);
-    }
-  }, {
-    key: "updateStateForIdentifier",
-    value: function updateStateForIdentifier(identifier) {
-      this.fireCommencedEvent();
-      this.subscribeInternalFile(identifier);
-    }
-  }, {
-    key: "updateFileStateFlag",
-    value: function updateFileStateFlag(fileState) {
-      if (!fileState) {
-        return;
-      }
-      var status = fileState.status;
-      if (status === 'processing') {
-        this.fileStateFlags.wasStatusProcessing = true;
-      } else if (status === 'uploading') {
-        this.fileStateFlags.wasStatusUploading = true;
-      }
-    }
-  }, {
-    key: "subscribeInternalFile",
-    value: function subscribeInternalFile(identifier) {
-      var _this2 = this;
-      var mediaClient = this.props.mediaClient;
-      var isBannedLocalPreview = this.state.isBannedLocalPreview;
-      var id = identifier.id,
-        collectionName = identifier.collectionName,
-        occurrenceKey = identifier.occurrenceKey;
-      this.unsubscribe();
-      this.subscription = mediaClient.file.getFileState(id, {
-        collectionName: collectionName,
-        occurrenceKey: occurrenceKey
-      }).subscribe({
-        next: function next(fileState) {
-          var newState = getCardStateFromFileState(fileState, isBannedLocalPreview);
-          _this2.safeSetState(newState);
-        },
-        error: function error(e) {
-          var errorReason = _this2.state.status === 'uploading' ? 'upload' : 'metadata-fetch';
-          var error = new MediaCardError(errorReason, e);
-          _this2.safeSetState({
-            error: error,
-            status: 'error'
-          });
-        }
-      });
-    }
-  }, {
-    key: "requestedDimensions",
-    get: function get() {
-      var dimensions = this.props.dimensions;
-      var _ref5 = this.state || {},
-        element = _ref5.cardRef;
-      return getRequestedDimensions({
-        dimensions: dimensions,
-        element: element
-      });
-    }
-  }, {
-    key: "metadata",
-    get: function get() {
-      var _this$state6;
-      return getFileDetails(this.props.identifier, (_this$state6 = this.state) === null || _this$state6 === void 0 ? void 0 : _this$state6.fileState);
-    }
-  }, {
-    key: "fileAttributes",
-    get: function get() {
-      var _this$state7;
-      return getFileAttributes(this.metadata, (_this$state7 = this.state) === null || _this$state7 === void 0 || (_this$state7 = _this$state7.fileState) === null || _this$state7 === void 0 ? void 0 : _this$state7.status);
-    }
-  }, {
-    key: "fireOperationalEvent",
-    value: function fireOperationalEvent() {
-      var _this$state8 = this.state,
-        status = _this$state8.status,
-        error = _this$state8.error,
-        fileState = _this$state8.fileState;
-      var createAnalyticsEvent = this.props.createAnalyticsEvent;
-      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);
-    }
-  }, {
-    key: "fireAbortedEvent",
-    value: function fireAbortedEvent() {
-      var fileAttributes = this.fileAttributes,
-        fileStateFlags = this.fileStateFlags,
-        ssrReliability = this.ssrReliability;
-      // UFO won't abort if it's already in a final state (succeeded, failed, aborted, etc)
-      abortUfoExperience(this.internalOccurrenceKey, {
-        fileAttributes: fileAttributes,
-        fileStateFlags: fileStateFlags,
-        ssrReliability: ssrReliability
-      });
-    }
-  }, {
-    key: "fireCommencedEvent",
-    value: function fireCommencedEvent() {
-      this.timeElapsedTillCommenced = performance.now();
-      var createAnalyticsEvent = this.props.createAnalyticsEvent;
-      createAnalyticsEvent && _fireCommencedEvent(createAnalyticsEvent, this.fileAttributes, {
-        overall: {
-          durationSincePageStart: this.timeElapsedTillCommenced
-        }
-      }, this.traceContext);
-      startUfoExperience(this.internalOccurrenceKey);
-    }
-  }, {
-    key: "actions",
-    get: function get() {
-      var _this3 = this;
-      var _this$props13 = this.props,
-        _this$props13$actions = _this$props13.actions,
-        actions = _this$props13$actions === void 0 ? [] : _this$props13$actions,
-        identifier = _this$props13.identifier,
-        shouldEnableDownloadButton = _this$props13.shouldEnableDownloadButton;
-      var status = this.state.status;
-      var metadata = this.metadata;
-      if (isFileIdentifier(identifier) && (status === 'failed-processing' || shouldEnableDownloadButton)) {
-        var downloadAction = {
-          label: 'Download',
-          icon: /*#__PURE__*/React.createElement(DownloadIcon, {
-            label: "Download"
-          }),
-          handler: function handler() {
-            return _this3.props.mediaClient.file.downloadBinary(identifier.id, metadata.name, identifier.collectionName);
-          }
-        };
-        return [downloadAction].concat(_toConsumableArray(actions));
-      } else {
-        return actions;
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$state9 = this.state,
-        isPlayingFile = _this$state9.isPlayingFile,
-        mediaViewerSelectedItem = _this$state9.mediaViewerSelectedItem;
-      var innerContent = /*#__PURE__*/React.createElement(React.Fragment, null, isPlayingFile ? this.renderInlinePlayer() : this.renderCard(), mediaViewerSelectedItem ? this.renderMediaViewer() : null, this.storeSSRData());
-      return this.props.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
-        locale: "en"
-      }, innerContent);
-    }
-  }]);
-  return CardBase;
-}(Component);
-
-// We require this wrapper in order
-// 1. To refresh media card state when the identifier is updated
-// 2. To allow for overriding creation date (https://product-fabric.atlassian.net/browse/CXP-2840)
-_defineProperty(CardBase, "defaultProps", {
-  appearance: 'auto',
-  resizeMode: 'crop',
-  isLazy: true,
-  disableOverlay: false,
-  // Media Feature Flag defaults are defined in @atlaskit/media-common
-  featureFlags: {}
-});
-var CardWithKeyAndDateOverrideContext = function CardWithKeyAndDateOverrideContext(props) {
-  var identifier = props.identifier;
-  var dateOverrides = useContext(DateOverrideContext);
-  var key = isFileIdentifier(identifier) ? identifier.id : identifier.dataURI;
-  var dateOverride = isFileIdentifier(identifier) ? dateOverrides === null || dateOverrides === void 0 ? void 0 : dateOverrides[identifier.id] : undefined;
-  return /*#__PURE__*/React.createElement(CardBase, _extends({}, props, {
-    dateOverride: dateOverride,
-    key: key
+var packageVersion = "78.0.1";
+export var CardBase = function CardBase(_ref) {
+  var identifier = _ref.identifier,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var innerContent = isFileIdentifier(identifier) ? /*#__PURE__*/React.createElement(FileCard, _extends({}, otherProps, {
+    identifier: identifier,
+    key: identifier.id
+  })) : /*#__PURE__*/React.createElement(ExternalImageCard, _extends({}, otherProps, {
+    identifier: identifier,
+    key: identifier.dataURI
   }));
+  return otherProps.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
+    locale: "en"
+  }, innerContent);
 };
 export var Card = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,
   componentName: 'mediaCard',
   component: 'mediaCard'
-})(withAnalyticsEvents()(injectIntl(CardWithKeyAndDateOverrideContext, {
+})(withAnalyticsEvents()(injectIntl(CardBase, {
   enforceContext: false
 })));