@atlaskit/media-card 77.2.3 → 77.4.0

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

@@ -0,0 +1,991 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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; }
+import DownloadIcon from '@atlaskit/icon/glyph/download';
+import { RECENTS_COLLECTION, addFileAttrsToUrl, globalMediaEventEmitter, imageResizeModeToFileImageMode, isFileIdentifier, isImageRepresentationReady } from '@atlaskit/media-client';
+import { MediaFileStateError, useFileState } from '@atlaskit/media-client-react';
+import { getMediaTypeFromMimeType, getRandomHex, isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
+import { getOrientation } from '@atlaskit/media-ui';
+import { MediaViewer } from '@atlaskit/media-viewer';
+import React, { Suspense, useEffect, useMemo, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { ImageLoadError, LocalPreviewError, MediaCardError, ensureMediaCardError, isLocalPreviewError, isUnsupportedLocalPreviewError } from '../../errors';
+import { extractErrorInfo } from '../../utils/analytics';
+import { isBigger } from '../../utils/dimensionComparer';
+import getDocument from '../../utils/document';
+import { generateUniqueId } from '../../utils/generateUniqueId';
+import { getRequestedDimensions } from '../../utils/getDataURIDimension';
+import { getMediaCardCursor } from '../../utils/getMediaCardCursor';
+import { getSSRData, StoreSSRDataScript } from '../../utils/globalScope';
+import { getFileDetails } from '../../utils/metadata';
+import { abortUfoExperience, completeUfoExperience, startUfoExperience } from '../../utils/ufoExperiences';
+import { useCurrentValueRef } from '../../utils/useCurrentValueRef';
+import { usePrevious } from '../../utils/usePrevious';
+import { videoIsPlayable } from '../../utils/videoIsPlayable';
+import { takeSnapshot } from '../../utils/videoSnapshot';
+import { ViewportDetector } from '../../utils/viewportDetector';
+import { fireCommencedEvent, fireCopiedEvent, fireNonCriticalErrorEvent, fireOperationalEvent, fireScreenEvent } from '../cardAnalytics';
+import { fetchAndCacheRemotePreview, getCardPreviewFromCache, getSSRCardPreview, isLocalPreview, isSSRClientPreview, isSSRDataPreview, isSSRPreview, removeCardPreviewFromCache, shouldResolvePreview } from '../getCardPreview';
+import cardPreviewCache from '../getCardPreview/cache';
+import { CardViewV2 } from './cardViewV2';
+import { InlinePlayerLazyV2 } from './inlinePlayerLazyV2';
+export var FileCard = function FileCard(_ref) {
+  var _ssrReliabilityRef$cu;
+  var _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'auto' : _ref$appearance,
+    _ref$resizeMode = _ref.resizeMode,
+    resizeMode = _ref$resizeMode === void 0 ? 'crop' : _ref$resizeMode,
+    _ref$isLazy = _ref.isLazy,
+    isLazy = _ref$isLazy === void 0 ? true : _ref$isLazy,
+    _ref$disableOverlay = _ref.disableOverlay,
+    disableOverlay = _ref$disableOverlay === void 0 ? false : _ref$disableOverlay,
+    _ref$featureFlags = _ref.featureFlags,
+    featureFlags = _ref$featureFlags === void 0 ? {} : _ref$featureFlags,
+    identifier = _ref.identifier,
+    ssr = _ref.ssr,
+    mediaClient = _ref.mediaClient,
+    dimensions = _ref.dimensions,
+    originalDimensions = _ref.originalDimensions,
+    contextId = _ref.contextId,
+    alt = _ref.alt,
+    actions = _ref.actions,
+    shouldEnableDownloadButton = _ref.shouldEnableDownloadButton,
+    useInlinePlayer = _ref.useInlinePlayer,
+    shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
+    onFullscreenChange = _ref.onFullscreenChange,
+    selectable = _ref.selectable,
+    selected = _ref.selected,
+    testId = _ref.testId,
+    titleBoxBgColor = _ref.titleBoxBgColor,
+    titleBoxIcon = _ref.titleBoxIcon,
+    shouldHideTooltip = _ref.shouldHideTooltip,
+    mediaViewerItems = _ref.mediaViewerItems,
+    onClick = _ref.onClick,
+    onMouseEnter = _ref.onMouseEnter,
+    createAnalyticsEvent = _ref.createAnalyticsEvent;
+  //----------------------------------------------------------------//
+  //---------------- State Initializer Functions -------------------//
+  //----------------------------------------------------------------//
+
+  var _useFileState = useFileState(identifier.id, {
+      collectionName: identifier.collectionName,
+      occurrenceKey: identifier.occurrenceKey
+    }),
+    fileState = _useFileState.fileState;
+  var prevFileState = usePrevious(fileState);
+  var fileStateValue = useMemo(function () {
+    if (fileState && (fileState === null || fileState === void 0 ? void 0 : fileState.status) !== 'error') {
+      return fileState;
+    }
+    return prevFileState;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fileState]);
+  var ssrDataRef = useRef();
+  var ssrReliabilityRef = useRef({
+    server: {
+      status: 'unknown'
+    },
+    client: {
+      status: 'unknown'
+    }
+  });
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    cardElement = _useState2[0],
+    setCardElement = _useState2[1];
+  var imageURLParams = useMemo(function () {
+    return _objectSpread(_objectSpread({
+      collection: identifier.collectionName,
+      mode: resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode
+    }, getRequestedDimensions({
+      dimensions: dimensions,
+      element: cardElement
+    })), {}, {
+      allowAnimated: true
+    });
+  }, [cardElement, dimensions, identifier.collectionName, resizeMode]);
+  var mediaBlobUrlAttrs = useMemo(function () {
+    var id = identifier.id,
+      collection = identifier.collectionName;
+    var _getFileDetails = getFileDetails(identifier, fileStateValue),
+      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 || getRequestedDimensions({
+      dimensions: dimensions,
+      element: cardElement
+    })), {}, {
+      alt: alt
+    }) : undefined;
+  }, [alt, cardElement, contextId, dimensions, fileStateValue, identifier, originalDimensions]);
+  var getSSRPreview = function getSSRPreview(ssr, identifier, mediaClient) {
+    var _ssrDataRef$current, _ssrDataRef$current2;
+    ssrDataRef.current = getSSRData(identifier);
+    if ((_ssrDataRef$current = ssrDataRef.current) !== null && _ssrDataRef$current !== void 0 && _ssrDataRef$current.error) {
+      ssrReliabilityRef.current.server = _objectSpread({
+        status: 'fail'
+      }, ssrDataRef.current.error);
+    }
+    if (!((_ssrDataRef$current2 = ssrDataRef.current) !== null && _ssrDataRef$current2 !== void 0 && _ssrDataRef$current2.dataURI)) {
+      try {
+        return getSSRCardPreview(ssr, mediaClient, identifier.id, imageURLParams, mediaBlobUrlAttrs);
+      } catch (e) {
+        ssrReliabilityRef.current[ssr] = _objectSpread({
+          status: 'fail'
+        }, extractErrorInfo(e));
+      }
+    } else {
+      return {
+        dataURI: ssrDataRef.current.dataURI,
+        source: 'ssr-data'
+      };
+    }
+  };
+  var cardPreviewInitializer = function cardPreviewInitializer() {
+    var cardPreview;
+    var id = identifier.id;
+    var fileImageMode = imageResizeModeToFileImageMode(resizeMode);
+    cardPreview = getCardPreviewFromCache(id, fileImageMode);
+    if (!cardPreview && ssr) {
+      cardPreview = getSSRPreview(ssr, identifier, mediaClient);
+    }
+    return cardPreview;
+  };
+
+  //----------------------------------------------------------------//
+  //------------ State, Refs & Initial Values ----------------------//
+  //----------------------------------------------------------------//
+
+  var internalOccurrenceKey = useMemo(function () {
+    return generateUniqueId();
+  }, []);
+  var timeElapsedTillCommenced = useMemo(function () {
+    return performance.now();
+  }, []);
+  var fileStateFlagsRef = useRef({
+    wasStatusUploading: false,
+    wasStatusProcessing: false
+  });
+
+  // Generate unique traceId for file
+  var traceContext = useMemo(function () {
+    return {
+      traceId: getRandomHex(8)
+    };
+  }, []);
+  var _useState3 = useState('loading'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    status = _useState4[0],
+    setStatus = _useState4[1];
+  useEffect(function () {
+    setStatus('loading');
+  }, [identifier]);
+  var _useState5 = useState(cardPreviewInitializer),
+    _useState6 = _slicedToArray(_useState5, 2),
+    cardPreview = _useState6[0],
+    setCardPreview = _useState6[1];
+
+  // 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 _useState7 = useState(function () {
+      return !isLazy || !!cardPreview && !isSSRPreview(cardPreview);
+    }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isCardVisible = _useState8[0],
+    setIsCardVisible = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isPlayingFile = _useState10[0],
+    setIsPlayingFile = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    shouldAutoplay = _useState12[0],
+    setShouldAutoplay = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    isBannedLocalPreview = _useState14[0],
+    setIsBannedLocalPreview = _useState14[1];
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    previewDidRender = _useState16[0],
+    setPreviewDidRender = _useState16[1];
+  var _useState17 = useState(),
+    _useState18 = _slicedToArray(_useState17, 2),
+    error = _useState18[0],
+    setError = _useState18[1];
+  var wasResolvedUpfrontPreviewRef = useRef(false);
+  var _useState19 = useState(null),
+    _useState20 = _slicedToArray(_useState19, 2),
+    mediaViewerSelectedItem = _useState20[0],
+    setMediaViewerSelectedItem = _useState20[1];
+  var uploadProgressRef = useRef();
+  var metadata = useMemo(function () {
+    var getProcessingStatusFromFileState = function getProcessingStatusFromFileState(status) {
+      switch (status) {
+        case 'processed':
+          return 'succeeded';
+        case 'processing':
+          return 'running';
+        case 'failed-processing':
+          return 'failed';
+      }
+    };
+    if (fileStateValue && (fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.status) !== 'error') {
+      return {
+        id: fileStateValue.id,
+        name: fileStateValue.name,
+        size: fileStateValue.size,
+        mimeType: fileStateValue.mimeType,
+        createdAt: fileStateValue.createdAt,
+        mediaType: fileStateValue.mediaType,
+        processingStatus: getProcessingStatusFromFileState(fileStateValue.status)
+      };
+    } else {
+      return {
+        id: identifier.id
+      };
+    }
+  }, [fileStateValue, identifier.id]);
+  var fileAttributes = useMemo(function () {
+    return {
+      fileMediatype: metadata.mediaType,
+      fileMimetype: metadata.mimeType,
+      fileId: metadata.id,
+      fileSize: metadata.size,
+      fileStatus: fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.status
+    };
+  }, [fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.status, metadata.id, metadata.mediaType, metadata.mimeType, metadata.size]);
+  var computedActions = useMemo(function () {
+    if (status === 'failed-processing' || shouldEnableDownloadButton) {
+      var downloadAction = {
+        label: 'Download',
+        icon: /*#__PURE__*/React.createElement(DownloadIcon, {
+          label: "Download"
+        }),
+        handler: function handler() {
+          return mediaClient.file.downloadBinary(identifier.id, metadata.name, identifier.collectionName);
+        }
+      };
+      return [downloadAction].concat(_toConsumableArray(actions !== null && actions !== void 0 ? actions : []));
+    } else {
+      return actions;
+    }
+  }, [actions, identifier.collectionName, identifier.id, mediaClient.file, metadata.name, shouldEnableDownloadButton, status]);
+
+  //----------------------------------------------------------------//
+  //---------------------- Analytics  ------------------------------//
+  //----------------------------------------------------------------//
+
+  var fireOperationalEventRef = useCurrentValueRef(function () {
+    var timeElapsedTillEvent = performance.now();
+    var durationSinceCommenced = timeElapsedTillEvent - timeElapsedTillCommenced;
+    var performanceAttributes = {
+      overall: {
+        durationSincePageStart: timeElapsedTillEvent,
+        durationSinceCommenced: durationSinceCommenced
+      }
+    };
+    createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliabilityRef.current, error, traceContext, fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.metadataTraceContext);
+    completeUfoExperience(internalOccurrenceKey, status, fileAttributes, fileStateFlagsRef.current, ssrReliabilityRef.current, error);
+  });
+  var fireNonCriticalErrorEventRef = useCurrentValueRef(function (error) {
+    createAnalyticsEvent && fireNonCriticalErrorEvent(createAnalyticsEvent, status, fileAttributes, ssrReliabilityRef.current, error, traceContext, fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.metadataTraceContext);
+  });
+  var fireScreenEventRef = useCurrentValueRef(function () {
+    createAnalyticsEvent && fireScreenEvent(createAnalyticsEvent, fileAttributes);
+  });
+  var fireCommencedEventRef = useCurrentValueRef(function () {
+    createAnalyticsEvent && fireCommencedEvent(createAnalyticsEvent, fileAttributes, {
+      overall: {
+        durationSincePageStart: timeElapsedTillCommenced
+      }
+    }, traceContext);
+    startUfoExperience(internalOccurrenceKey);
+  });
+  var fireAbortedEventRef = useCurrentValueRef(function () {
+    // UFO won't abort if it's already in a final state (succeeded, failed, aborted, etc)
+    abortUfoExperience(internalOccurrenceKey, {
+      fileAttributes: fileAttributes,
+      fileStateFlags: fileStateFlagsRef === null || fileStateFlagsRef === void 0 ? void 0 : fileStateFlagsRef.current,
+      ssrReliability: ssrReliabilityRef === null || ssrReliabilityRef === void 0 ? void 0 : ssrReliabilityRef.current
+    });
+  });
+
+  //----------------------------------------------------------------//
+  //---------------------- Callbacks & Handlers  -------------------//
+  //----------------------------------------------------------------//
+
+  var onImageError = function onImageError(newCardPreview) {
+    if (newCardPreview) {
+      var failedSSRObject = _objectSpread({
+        status: 'fail'
+      }, extractErrorInfo(new ImageLoadError(newCardPreview.source)));
+      if (isSSRClientPreview(newCardPreview)) {
+        ssrReliabilityRef.current.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(newCardPreview)) {
+        ssrReliabilityRef.current.server = failedSSRObject;
+        ssrReliabilityRef.current.client = failedSSRObject;
+      }
+    }
+
+    // If the dataURI has been replaced, we can dismiss this error
+    if ((newCardPreview === null || newCardPreview === void 0 ? void 0 : newCardPreview.dataURI) !== (cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI)) {
+      return;
+    }
+    var error = new ImageLoadError(newCardPreview === null || newCardPreview === void 0 ? void 0 : newCardPreview.source);
+    var isLocal = newCardPreview && isLocalPreview(newCardPreview);
+    var isSSR = newCardPreview && (isSSRClientPreview(newCardPreview) || isSSRDataPreview(newCardPreview));
+    if (isLocal || isSSR) {
+      if (isLocal) {
+        setIsBannedLocalPreview(true);
+        fireNonCriticalErrorEventRef.current && fireNonCriticalErrorEventRef.current(error);
+      }
+      var fileImageMode = imageResizeModeToFileImageMode(resizeMode);
+      isFileIdentifier(identifier) && removeCardPreviewFromCache(identifier.id, fileImageMode);
+      setCardPreview(undefined);
+    } else {
+      if (!['complete', 'error', 'failed-processing'].includes(status)) {
+        setStatus('error');
+        setError(error);
+      }
+    }
+  };
+  var onImageLoad = function onImageLoad(newCardPreview) {
+    if (newCardPreview) {
+      if (isSSRClientPreview(newCardPreview) && ssrReliabilityRef.current.client.status === 'unknown') {
+        ssrReliabilityRef.current.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(newCardPreview) && ssrReliabilityRef.current.server.status === 'unknown') {
+        ssrReliabilityRef.current.server = {
+          status: 'success'
+        };
+        ssrReliabilityRef.current.client = {
+          status: 'success'
+        };
+      }
+    }
+
+    // If the dataURI has been replaced, we can dismiss this callback
+    if ((newCardPreview === null || newCardPreview === void 0 ? void 0 : newCardPreview.dataURI) !== (cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI)) {
+      return;
+    }
+    setPreviewDidRender(true);
+  };
+  var onCardClick = function onCardClick(event, analyticsEvent) {
+    if (onClick) {
+      var cardEvent = {
+        event: event,
+        mediaItemDetails: metadata
+      };
+      onClick(cardEvent, analyticsEvent);
+    }
+  };
+  var onCardViewClick = function onCardViewClick(event, analyticsEvent) {
+    onCardClick(event, analyticsEvent);
+    if (!metadata) {
+      return;
+    }
+    var isVideo = metadata && metadata.mediaType === 'video';
+    if (useInlinePlayer && isVideo && !!cardPreview) {
+      setIsPlayingFile(true);
+      setShouldAutoplay(true);
+    } else if (shouldOpenMediaViewer) {
+      setMediaViewerSelectedItem({
+        id: identifier.id,
+        mediaItemType: 'file',
+        collectionName: identifier.collectionName,
+        occurrenceKey: identifier.occurrenceKey
+      });
+    }
+  };
+
+  //----------------------------------------------------------------//
+  //---------------------- Helper Functions  -----------------------//
+  //----------------------------------------------------------------//
+
+  var fetchRemotePreviewRef = useCurrentValueRef(function (identifier) {
+    return fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, mediaBlobUrlAttrs);
+  });
+  var resolvePreviewRef = useCurrentValueRef( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(identifier, fileState) {
+      var filePreview, isRemotePreviewReady, mode, cachedPreview, dimensionsAreBigger, localPreview, value, resolvedFilePreview, _value, type, mediaType, orientation, _dataURI, _dataURI2, preview, source, dataURI, remotePreview, wrappedError;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            filePreview = isBannedLocalPreview ? undefined : fileState.status !== 'error' && 'mimeType' in fileState && isMimeTypeSupportedByBrowser(fileState.mimeType) ? fileState.preview : undefined;
+            isRemotePreviewReady = isImageRepresentationReady(fileState);
+            _context.prev = 2;
+            mode = imageURLParams.mode;
+            cachedPreview = cardPreviewCache.get(identifier.id, mode);
+            dimensionsAreBigger = isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, dimensions);
+            if (!(cachedPreview && !dimensionsAreBigger)) {
+              _context.next = 8;
+              break;
+            }
+            return _context.abrupt("return", cachedPreview);
+          case 8:
+            _context.prev = 8;
+            if (!filePreview) {
+              _context.next = 74;
+              break;
+            }
+            _context.prev = 10;
+            _context.next = 13;
+            return filePreview;
+          case 13:
+            resolvedFilePreview = _context.sent;
+            value = resolvedFilePreview.value;
+            _context.next = 20;
+            break;
+          case 17:
+            _context.prev = 17;
+            _context.t0 = _context["catch"](10);
+            throw new LocalPreviewError('local-preview-rejected', _context.t0 instanceof Error ? _context.t0 : undefined);
+          case 20:
+            if (!(typeof value === 'string')) {
+              _context.next = 24;
+              break;
+            }
+            localPreview = {
+              dataURI: value,
+              orientation: 1,
+              source: 'local'
+            };
+            _context.next = 57;
+            break;
+          case 24:
+            if (!(value instanceof Blob)) {
+              _context.next = 56;
+              break;
+            }
+            _value = value, type = _value.type;
+            mediaType = getMediaTypeFromMimeType(type);
+            _context.t1 = mediaType;
+            _context.next = _context.t1 === 'image' ? 30 : _context.t1 === 'video' ? 42 : 53;
+            break;
+          case 30:
+            _context.prev = 30;
+            _context.next = 33;
+            return getOrientation(value);
+          case 33:
+            orientation = _context.sent;
+            _dataURI = URL.createObjectURL(value);
+            localPreview = {
+              dataURI: _dataURI,
+              orientation: orientation,
+              source: 'local'
+            };
+            _context.next = 41;
+            break;
+          case 38:
+            _context.prev = 38;
+            _context.t2 = _context["catch"](30);
+            throw new LocalPreviewError('local-preview-image', _context.t2 instanceof Error ? _context.t2 : undefined);
+          case 41:
+            return _context.abrupt("break", 54);
+          case 42:
+            _context.prev = 42;
+            _context.next = 45;
+            return takeSnapshot(value);
+          case 45:
+            _dataURI2 = _context.sent;
+            localPreview = {
+              dataURI: _dataURI2,
+              orientation: 1,
+              source: 'local'
+            };
+            _context.next = 52;
+            break;
+          case 49:
+            _context.prev = 49;
+            _context.t3 = _context["catch"](42);
+            throw new LocalPreviewError('local-preview-video', _context.t3 instanceof Error ? _context.t3 : undefined);
+          case 52:
+            return _context.abrupt("break", 54);
+          case 53:
+            throw new LocalPreviewError('local-preview-unsupported');
+          case 54:
+            _context.next = 57;
+            break;
+          case 56:
+            throw new LocalPreviewError('local-preview-unsupported');
+          case 57:
+            preview = _objectSpread(_objectSpread({}, localPreview), {}, {
+              dimensions: dimensions
+            });
+            _context.t4 = preview.source;
+            _context.next = _context.t4 === 'local' ? 61 : _context.t4 === 'remote' ? 63 : _context.t4 === 'ssr-server' ? 65 : _context.t4 === 'ssr-client' ? 67 : 69;
+            break;
+          case 61:
+            source = 'cache-local';
+            return _context.abrupt("break", 70);
+          case 63:
+            source = 'cache-remote';
+            return _context.abrupt("break", 70);
+          case 65:
+            source = 'cache-ssr-server';
+            return _context.abrupt("break", 70);
+          case 67:
+            source = 'cache-ssr-client';
+            return _context.abrupt("break", 70);
+          case 69:
+            source = preview.source;
+          case 70:
+            // We want to embed some meta context into dataURI for Copy/Paste to work.
+            dataURI = mediaBlobUrlAttrs ? addFileAttrsToUrl(preview.dataURI, mediaBlobUrlAttrs) : preview.dataURI; // We store new cardPreview into cache
+            cardPreviewCache.set(identifier.id, mode, _objectSpread(_objectSpread({}, preview), {}, {
+              source: source,
+              dataURI: dataURI
+            }));
+            setCardPreview(_objectSpread(_objectSpread({}, preview), {}, {
+              dataURI: dataURI
+            }));
+            return _context.abrupt("return");
+          case 74:
+            _context.next = 81;
+            break;
+          case 76:
+            _context.prev = 76;
+            _context.t5 = _context["catch"](8);
+            /**
+             * We report the error if:
+             * - local preview is supported and fails
+             * - local preview is unsupported and remote preview is NOT READY
+             *   i.e. the function was called for "no reason".
+             * We DON'T report the error if:
+             * - local preview is unsupported and remote preview IS READY
+             *   i.e. local preview is available and not supported,
+             *   but we are after the remote preview instead.
+             */
+            if (!isUnsupportedLocalPreviewError(_context.t5) || isUnsupportedLocalPreviewError(_context.t5) && !isRemotePreviewReady) {
+              fireNonCriticalErrorEventRef.current && fireNonCriticalErrorEventRef.current(_context.t5);
+            }
+            /**
+             * No matter the reason why the local preview failed, we break the process
+             * if there is no remote preview available
+             */
+            if (isRemotePreviewReady) {
+              _context.next = 81;
+              break;
+            }
+            throw _context.t5;
+          case 81:
+            if (isRemotePreviewReady) {
+              _context.next = 83;
+              break;
+            }
+            throw new MediaCardError('remote-preview-not-ready');
+          case 83:
+            _context.next = 85;
+            return fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, mediaBlobUrlAttrs, traceContext);
+          case 85:
+            remotePreview = _context.sent;
+            setCardPreview(remotePreview);
+            return _context.abrupt("return");
+          case 90:
+            _context.prev = 90;
+            _context.t6 = _context["catch"](2);
+            wrappedError = ensureMediaCardError('preview-fetch', _context.t6); //  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.
+              setIsBannedLocalPreview(true);
+            } else {
+              if (!['complete', 'error', 'failed-processing'].includes(status)) {
+                setStatus('error');
+                setError(wrappedError);
+              }
+            }
+          case 94:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 90], [8, 76], [10, 17], [30, 38], [42, 49]]);
+    }));
+    return function (_x, _x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }());
+
+  //----------------------------------------------------------------//
+  //------------ resolveUpfrontPreview useEffect -------------------//
+  //----------------------------------------------------------------//
+  var prevCardPreview = usePrevious(cardPreview);
+  var dimensionsRef = useCurrentValueRef(dimensions);
+  useEffect(function () {
+    var resolveUpfrontPreview = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(identifier) {
+        var requestedDimensions, newCardPreview, areValidRequestedDimensions;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              // We block any possible future call to this method regardless of the outcome (success or fail)
+              // If it fails, the normal preview fetch should occur after the file state is fetched anyways
+              wasResolvedUpfrontPreviewRef.current = true;
+              _context2.prev = 1;
+              requestedDimensions = _objectSpread({}, dimensions);
+              _context2.next = 5;
+              return fetchRemotePreviewRef.current(identifier);
+            case 5:
+              newCardPreview = _context2.sent;
+              areValidRequestedDimensions = !isBigger(requestedDimensions, dimensionsRef.current); // 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
+              if (areValidRequestedDimensions) {
+                setCardPreview(newCardPreview);
+              }
+              _context2.next = 12;
+              break;
+            case 10:
+              _context2.prev = 10;
+              _context2.t0 = _context2["catch"](1);
+            case 12:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, null, [[1, 10]]);
+      }));
+      return function resolveUpfrontPreview(_x3) {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    var hadSSRCardPreview = ssr === 'client' && !!prevCardPreview && isSSRClientPreview(prevCardPreview);
+    if ((isCardVisible || hadSSRCardPreview) && !cardPreview && !wasResolvedUpfrontPreviewRef.current) {
+      resolveUpfrontPreview(identifier);
+    }
+  }, [cardPreview, dimensions, dimensionsRef, fetchRemotePreviewRef, identifier, isCardVisible, prevCardPreview, ssr]);
+
+  //----------------------------------------------------------------//
+  //------------------------ handle fireCopiedEvent   --------------//
+  //----------------------------------------------------------------//
+
+  useEffect(function () {
+    var _getDocument;
+    var fireCopiedCardEvent = function fireCopiedCardEvent() {
+      cardElement && createAnalyticsEvent && fireCopiedEvent(createAnalyticsEvent, metadata.id, cardElement);
+    };
+
+    // 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', fireCopiedCardEvent);
+    return function () {
+      var _getDocument2;
+      (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 || _getDocument2.removeEventListener('copy', fireCopiedCardEvent);
+    };
+  }, [cardElement, createAnalyticsEvent, metadata.id]);
+
+  //----------------------------------------------------------------//
+  //----------------- update status flags --------------------------//
+  //----------------------------------------------------------------//
+
+  useEffect(function () {
+    if ((fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.status) === 'processing') {
+      fileStateFlagsRef.current.wasStatusProcessing = true;
+    } else if ((fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.status) === 'uploading') {
+      fileStateFlagsRef.current.wasStatusUploading = true;
+    }
+  }, [fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.status]);
+
+  //----------------------------------------------------------------//
+  //---------------- fetch and resolve card preview ----------------//
+  //----------------------------------------------------------------//
+
+  var prevDimensions = usePrevious(dimensions);
+  var prevIsCardVisible = usePrevious(isCardVisible);
+  var prevStatus = usePrevious(status);
+  useEffect(function () {
+    if (prevStatus !== undefined && status !== prevStatus) {
+      fireOperationalEventRef.current();
+    }
+  }, [fireOperationalEventRef, prevStatus, status]);
+  useEffect(function () {
+    var _ssrDataRef$current3;
+    /**
+     * 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;
+    if (turnedVisible) {
+      fireCommencedEventRef.current();
+    }
+    if (cardPreview && turnedVisible && isSSRDataPreview(cardPreview) && isBigger((_ssrDataRef$current3 = ssrDataRef.current) === null || _ssrDataRef$current3 === void 0 ? void 0 : _ssrDataRef$current3.dimensions, dimensions)) {
+      // If dimensions from Server have changed and are bigger,
+      // we need to refetch
+      // refetchSRRPreview
+      fetchRemotePreviewRef.current(identifier).then(setCardPreview).catch(function (e) {
+        var wrappedError = ensureMediaCardError('remote-preview-fetch-ssr', e, true);
+        fireNonCriticalErrorEventRef.current(wrappedError);
+      });
+    }
+    if (fileStateValue && shouldResolvePreview({
+      status: status,
+      fileState: fileStateValue,
+      prevDimensions: prevDimensions,
+      dimensions: dimensions,
+      hasCardPreview: !!cardPreview,
+      isBannedLocalPreview: isBannedLocalPreview,
+      wasResolvedUpfrontPreview: wasResolvedUpfrontPreviewRef.current
+    })) {
+      resolvePreviewRef.current(identifier, fileStateValue);
+    }
+    if (turnedVisible && ssr && !!cardPreview && 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,
+      fetchRemotePreviewRef.current(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
+      });
+    }
+  }, [cardPreview, dimensions, fetchRemotePreviewRef, fileStateValue, fireCommencedEventRef, fireNonCriticalErrorEventRef, identifier, isBannedLocalPreview, isCardVisible, prevDimensions, prevIsCardVisible, resolvePreviewRef, ssr, status]);
+
+  //----------------------------------------------------------------//
+  //----------------- set complete status --------------------------//
+  //----------------------------------------------------------------//
+
+  useEffect(function () {
+    if (previewDidRender &&
+    // We should't complete if status is uploading
+    ['loading-preview', 'processing'].includes(status)) {
+      setStatus('complete');
+      // TODO MEX-788: add test for "do not remove the card preview when unsubscribing".
+      setIsBannedLocalPreview(false);
+    }
+  }, [previewDidRender, status]);
+
+  //----------------------------------------------------------------//
+  //----------------- set isPlayingFile state ----------------------//
+  //----------------------------------------------------------------//
+
+  useEffect(function () {
+    var isVideo = fileAttributes.fileMediatype === 'video';
+    var _getFileDetails2 = getFileDetails(identifier, fileStateValue),
+      mimeType = _getFileDetails2.mimeType;
+    var isVideoPlayable = videoIsPlayable(isBannedLocalPreview, fileStateValue, mimeType);
+    if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable) {
+      setIsPlayingFile(true);
+    }
+  }, [disableOverlay, fileAttributes.fileMediatype, fileStateValue, identifier, isBannedLocalPreview, isPlayingFile, useInlinePlayer]);
+
+  //----------------------------------------------------------------//
+  //----------------- fireScreenEvent ------------------------------//
+  //----------------------------------------------------------------//
+
+  useEffect(function () {
+    if (prevStatus !== undefined && status !== prevStatus) {
+      if (status === 'complete' || fileAttributes.fileMediatype === 'video' && !!cardPreview && status === 'processing') {
+        fireScreenEventRef.current();
+      }
+    }
+  }, [status, prevStatus, fileAttributes, cardPreview, fireScreenEventRef]);
+
+  //----------------------------------------------------------------//
+  //----------------- abort UFO experience -------------------------//
+  //----------------------------------------------------------------//
+
+  useEffect(function () {
+    return function () {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      fireAbortedEventRef.current();
+    };
+  }, [fireAbortedEventRef]);
+
+  //----------------------------------------------------------------//
+  //------------------ Subscribe to file state ---------------------//
+  //----------------------------------------------------------------//
+
+  var updateFileStateRef = useCurrentValueRef(function () {
+    if (fileState) {
+      // do not update the card status if the status is final
+      if (['complete', 'error', 'failed-processing'].includes(status)) {
+        return;
+      }
+      if (fileState.status !== 'error') {
+        var mediaType = 'mediaType' in fileState ? fileState.mediaType : undefined;
+        var isPreviewable = !!mediaType && ['audio', 'video', 'image', 'doc'].indexOf(mediaType) > -1;
+        var isPreviewableFileState = !!fileState.preview;
+        var isSupportedLocalPreview = mediaType === 'image' || mediaType === 'video';
+        var hasLocalPreview = !isBannedLocalPreview && isPreviewableFileState && isSupportedLocalPreview && !!fileState.mimeType && isMimeTypeSupportedByBrowser(fileState.mimeType);
+        var hasRemotePreview = isImageRepresentationReady(fileState);
+        var hasPreview = hasLocalPreview || hasRemotePreview;
+        var newStatus;
+        switch (fileState.status) {
+          case 'uploading':
+          case 'failed-processing':
+          case 'processing':
+            newStatus = fileState.status;
+            break;
+          case 'processed':
+            if (!isPreviewable || !hasPreview) {
+              newStatus = 'complete';
+              break;
+            }
+            newStatus = 'loading-preview';
+            break;
+          default:
+            newStatus = 'loading';
+        }
+        var newProgress = newStatus === 'uploading' && fileState.status === 'uploading' ? fileState.progress : 1;
+        setStatus(newStatus);
+        uploadProgressRef.current = newProgress;
+      } else {
+        var e = new MediaFileStateError(fileState.id, fileState.reason, fileState.message, fileState.details);
+        var errorReason = status === 'uploading' ? 'upload' : 'metadata-fetch';
+        setError(new MediaCardError(errorReason, e));
+        setStatus('error');
+      }
+    }
+  });
+  useEffect(function () {
+    updateFileStateRef.current();
+  }, [fileState, updateFileStateRef]);
+
+  //----------------------------------------------------------------//
+  //---------------------- Render Card Function --------------------//
+  //----------------------------------------------------------------//
+
+  var renderCard = function renderCard() {
+    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 mediaItemType = identifier.mediaItemType;
+    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', !!cardPreview, metadata.mediaType);
+    var card = /*#__PURE__*/React.createElement(CardViewV2, {
+      status: cardStatusOverride || status,
+      error: error,
+      mediaItemType: mediaItemType,
+      metadata: metadata,
+      cardPreview: cardPreview,
+      alt: alt,
+      appearance: appearance,
+      resizeMode: resizeMode,
+      dimensions: dimensions,
+      actions: computedActions,
+      selectable: selectable,
+      selected: selected,
+      onClick: withCallbacks ? onCardViewClick : undefined,
+      onMouseEnter: withCallbacks ? function (event) {
+        onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter({
+          event: event,
+          mediaItemDetails: metadata
+        });
+      } : undefined,
+      disableOverlay: disableOverlay,
+      progress: uploadProgressRef.current,
+      onDisplayImage: withCallbacks ? function () {
+        var payloadPart = {
+          fileId: identifier.id,
+          isUserCollection: identifier.collectionName === RECENTS_COLLECTION
+        };
+        globalMediaEventEmitter.emit('media-viewed', _objectSpread({
+          viewingLevel: 'minimal'
+        }, payloadPart));
+      } : undefined,
+      innerRef: setCardElement,
+      testId: testId,
+      featureFlags: featureFlags,
+      titleBoxBgColor: titleBoxBgColor,
+      titleBoxIcon: titleBoxIcon,
+      onImageError: withCallbacks ? onImageError : undefined,
+      onImageLoad: withCallbacks ? onImageLoad : undefined,
+      nativeLazyLoad: nativeLazyLoad,
+      forceSyncDisplay: forceSyncDisplay,
+      mediaCardCursor: mediaCardCursor,
+      shouldHideTooltip: shouldHideTooltip
+    });
+    return isLazyWithOverride ? /*#__PURE__*/React.createElement(ViewportDetector, {
+      cardEl: cardElement,
+      onVisible: function onVisible() {
+        setIsCardVisible(true);
+      }
+    }, card) : card;
+  };
+
+  //----------------------------------------------------------------//
+  //-------------------------- RENDER ------------------------------//
+  //----------------------------------------------------------------//
+
+  var inlinePlayerFallback = renderCard(false, 'loading', false);
+  var collectionName = identifier.collectionName || '';
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isPlayingFile ? /*#__PURE__*/React.createElement(Suspense, {
+    fallback: inlinePlayerFallback
+  }, /*#__PURE__*/React.createElement(InlinePlayerLazyV2, {
+    dimensions: dimensions,
+    originalDimensions: originalDimensions,
+    identifier: identifier,
+    autoplay: !!shouldAutoplay,
+    onFullscreenChange: onFullscreenChange,
+    onError: function onError() {
+      setIsPlayingFile(false);
+    },
+    onClick: onCardClick,
+    selected: selected,
+    ref: setCardElement,
+    testId: testId,
+    cardPreview: cardPreview
+  })) : renderCard(), mediaViewerSelectedItem ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
+    collectionName: collectionName,
+    items: mediaViewerItems || [],
+    mediaClientConfig: mediaClient.config,
+    selectedItem: mediaViewerSelectedItem,
+    onClose: function onClose() {
+      setMediaViewerSelectedItem(null);
+    },
+    contextId: contextId,
+    featureFlags: featureFlags
+  }), document.body) : null, ssr === 'server' && /*#__PURE__*/React.createElement(StoreSSRDataScript, {
+    identifier: identifier,
+    dataURI: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI,
+    dimensions: getRequestedDimensions({
+      dimensions: dimensions,
+      element: cardElement
+    }),
+    error: ((_ssrReliabilityRef$cu = ssrReliabilityRef.current.server) === null || _ssrReliabilityRef$cu === void 0 ? void 0 : _ssrReliabilityRef$cu.status) === 'fail' ? ssrReliabilityRef.current.server : undefined
+  }));
+};