@atlaskit/media-card 76.1.1 → 76.2.0

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

@@ -0,0 +1,1043 @@
+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() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+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 as _fireOperationalEvent, fireCommencedEvent as _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';
+var packageName = "@atlaskit/media-card";
+var packageVersion = "76.2.0";
+export var CardV2Base = /*#__PURE__*/function (_Component) {
+  _inherits(CardV2Base, _Component);
+  var _super = _createSuper(CardV2Base);
+  function CardV2Base(props) {
+    var _this;
+    _classCallCheck(this, CardV2Base);
+    _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), "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,
+        createAnalyticsEvent = _this$props2.createAnalyticsEvent;
+      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),
+        createAnalyticsEvent: createAnalyticsEvent,
+        featureFlags: _this.props.featureFlags,
+        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), "subscribeFileState", function (fileState) {
+      var isBannedLocalPreview = _this.state.isBannedLocalPreview;
+      if (fileState.status !== 'error') {
+        var featureFlags = _this.props.featureFlags;
+        var newState = getCardStateFromFileState(fileState, isBannedLocalPreview, featureFlags);
+        _this.safeSetState(newState);
+      } else {
+        var e = new MediaFileStateError(fileState.id, fileState.reason, fileState.message, fileState.details);
+        var errorReason = _this.state.status === 'uploading' ? 'upload' : 'metadata-fetch';
+        var error = new MediaCardError(errorReason, e);
+        _this.safeSetState({
+          error: error,
+          status: 'error'
+        });
+      }
+    });
+    _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), "onCardViewClick", function (event, analyticsEvent) {
+      var _this$props5 = _this.props,
+        identifier = _this$props5.identifier,
+        useInlinePlayer = _this$props5.useInlinePlayer,
+        shouldOpenMediaViewer = _this$props5.shouldOpenMediaViewer;
+      var 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) {
+        _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 () {
+      _this.setState({
+        isPlayingFile: false
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "setRef", function (cardRef) {
+      !!cardRef && _this.setState({
+        cardRef: cardRef
+      });
+    });
+    _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;
+      var _this$state = _this.state,
+        shouldAutoplay = _this$state.shouldAutoplay,
+        cardPreview = _this$state.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
+      }));
+    });
+    _defineProperty(_assertThisInitialized(_this), "onMediaViewerClose", function () {
+      _this.setState({
+        mediaViewerSelectedItem: undefined
+      });
+    });
+    _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,
+        expandByPixel = _this$props8.expandByPixel;
+      var mediaItemType = identifier.mediaItemType;
+      var _this$state2 = _this.state,
+        status = _this$state2.status,
+        progress = _this$state2.progress,
+        cardPreview = _this$state2.cardPreview,
+        error = _this$state2.error,
+        cardRef = _this$state2.cardRef,
+        isCardVisible = _this$state2.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, {
+        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(_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) && 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(_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,
+      shouldUpdateStateForIdentifier: false
+    };
+    return _this;
+  }
+  _createClass(CardV2Base, [{
+    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$state3 = this.state,
+        isCardVisible = _this$state3.isCardVisible,
+        cardPreview = _this$state3.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.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);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      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,
+        featureFlags = _this$props12.featureFlags,
+        useInlinePlayer = _this$props12.useInlinePlayer,
+        disableOverlay = _this$props12.disableOverlay,
+        resizeMode = _this$props12.resizeMode,
+        ssr = _this$props12.ssr;
+      var _this$state4 = this.state,
+        isCardVisible = _this$state4.isCardVisible,
+        cardPreview = _this$state4.cardPreview,
+        status = _this$state4.status,
+        fileState = _this$state4.fileState,
+        isBannedLocalPreview = _this$state4.isBannedLocalPreview,
+        previewDidRender = _this$state4.previewDidRender,
+        isPlayingFile = _this$state4.isPlayingFile,
+        wasResolvedUpfrontPreview = _this$state4.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;
+      var fileImageMode = imageResizeModeToFileImageMode(resizeMode);
+      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 (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,
+        identifier: identifier,
+        fileImageMode: fileImageMode,
+        featureFlags: featureFlags,
+        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',
+          shouldUpdateStateForIdentifier: false
+        });
+        if (this.hasBeenMounted) {
+          // TODO MEX-788: add test for "do not remove the card preview when unsubscribing".
+          this.setState({
+            isBannedLocalPreview: false
+          });
+        }
+      }
+      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) {
+        this.setState({
+          isPlayingFile: true
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _getDocument2;
+      this.hasBeenMounted = false;
+      (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.removeEventListener('copy', this.fireCopiedEvent);
+    }
+  }, {
+    key: "updateStateForIdentifier",
+    value: function updateStateForIdentifier(identifier) {
+      this.fireCommencedEvent();
+      this.setState({
+        shouldUpdateStateForIdentifier: true
+      });
+    }
+  }, {
+    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: "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$state5;
+      return getFileDetails(this.props.identifier, (_this$state5 = this.state) === null || _this$state5 === void 0 ? void 0 : _this$state5.fileState);
+    }
+  }, {
+    key: "fileAttributes",
+    get: function get() {
+      var _this$state6, _this$state6$fileStat;
+      return getFileAttributes(this.metadata, (_this$state6 = this.state) === null || _this$state6 === void 0 ? void 0 : (_this$state6$fileStat = _this$state6.fileState) === null || _this$state6$fileStat === void 0 ? void 0 : _this$state6$fileStat.status);
+    }
+  }, {
+    key: "fireOperationalEvent",
+    value: function fireOperationalEvent() {
+      var _this$state7 = this.state,
+        status = _this$state7.status,
+        error = _this$state7.error,
+        fileState = _this$state7.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: "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 _this2 = 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 _this2.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$state8 = this.state,
+        isPlayingFile = _this$state8.isPlayingFile,
+        mediaViewerSelectedItem = _this$state8.mediaViewerSelectedItem,
+        shouldUpdateStateForIdentifier = _this$state8.shouldUpdateStateForIdentifier;
+      var innerContent = /*#__PURE__*/React.createElement(React.Fragment, null, isPlayingFile ? this.renderInlinePlayer() : this.renderCard(), mediaViewerSelectedItem ? this.renderMediaViewer() : null, this.storeSSRData());
+      var wrappedContent = innerContent;
+      if (shouldUpdateStateForIdentifier) {
+        var _ref6 = this.props.identifier,
+          id = _ref6.id,
+          collectionName = _ref6.collectionName,
+          occurrenceKey = _ref6.occurrenceKey;
+        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);
+    }
+  }]);
+  return CardV2Base;
+}(Component);
+_defineProperty(CardV2Base, "defaultProps", {
+  appearance: 'auto',
+  resizeMode: 'crop',
+  isLazy: true,
+  disableOverlay: false,
+  // Media Feature Flag defaults are defined in @atlaskit/media-common
+  featureFlags: {}
+});
+var FileStateListener = function FileStateListener(_ref7) {
+  var children = _ref7.children,
+    onChange = _ref7.onChange,
+    id = _ref7.id,
+    collectionName = _ref7.collectionName,
+    occurrenceKey = _ref7.occurrenceKey;
+  var _useFileState = useFileState(id, {
+      collectionName: collectionName,
+      occurrenceKey: occurrenceKey
+    }),
+    fileState = _useFileState.fileState;
+  useEffect(function () {
+    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
+ */
+var CardWithKey = function CardWithKey(props) {
+  var identifier = props.identifier;
+  var key = isFileIdentifier(identifier) ? identifier.id : identifier.dataURI;
+  return /*#__PURE__*/React.createElement(CardV2Base, _extends({}, props, {
+    key: key
+  }));
+};
+export var CardV2 = withMediaAnalyticsContext({
+  packageVersion: packageVersion,
+  packageName: packageName,
+  componentName: 'mediaCard',
+  component: 'mediaCard'
+})(withAnalyticsEvents()(injectIntl(CardWithKey, {
+  enforceContext: false
+})));