@atlaskit/media-card 70.9.0 → 72.0.0

package/dist/esm/root/card/index.js

@@ -23,29 +23,27 @@ import { version as packageVersion, name as packageName } from '../../version.js
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
-import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
-import { addFileAttrsToUrl, globalMediaEventEmitter, isDifferentIdentifier, isFileIdentifier, isErrorFileState, RECENTS_COLLECTION, isPreviewableType } from '@atlaskit/media-client';
+import { globalMediaEventEmitter, isDifferentIdentifier, isFileIdentifier, RECENTS_COLLECTION, isImageRepresentationReady, isExternalImageIdentifier, imageResizeModeToFileImageMode } from '@atlaskit/media-client';
 import { MediaViewer } from '@atlaskit/media-viewer';
 import { IntlProvider, intlShape } from 'react-intl';
 import { CardView } from '../cardView';
 import { ViewportDetector } from '../../utils/viewportDetector';
-import { getDataURIDimension } from '../../utils/getDataURIDimension';
-import { getCardPreviewFromFileState, getCardPreviewFromBackend } from './getCardPreview';
+import { getRequestedDimensions } from '../../utils/getDataURIDimension';
+import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview } from './getCardPreview';
 import { getFileDetails } from '../../utils/metadata';
-import { isBigger } from '../../utils/dimensionComparer';
-import { createObjectURLCache } from '../../utils/objectURLCache';
-import { getCardStatus, extractCardStatusParams } from './getCardStatus';
 import { InlinePlayer } from '../inlinePlayer';
-import { fireMediaCardEvent, getFileAttributes, getRenderCommencedEventPayload, getCopiedFilePayload } from '../../utils/analytics';
-import { FileAttributesProvider } from '../../utils/fileAttributesContext';
-import { isLocalPreviewError, MediaCardError, ensureMediaCardError } from '../../errors';
-import { fireOperationalEvent, relevantFeatureFlagNames } from './cardAnalytics';
-var cardPreviewCache = createObjectURLCache();
+import { getFileAttributes } from '../../utils/analytics';
+import { isLocalPreviewError, MediaCardError, ensureMediaCardError, ImageLoadError } from '../../errors';
+import { fireOperationalEvent as _fireOperationalEvent, fireCommencedEvent as _fireCommencedEvent, relevantFeatureFlagNames, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
+import getDocument from '../../utils/document';
+import { getCardStateFromFileState, createStateUpdater } from './cardState';
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
 
   var _super = _createSuper(CardBase);
 
+  // We initialise timeElapsedTillCommenced
+  // to avoid extra branching on a possibly undefined value.
   function CardBase(props) {
     var _this;
 
@@ -55,147 +53,184 @@ export var CardBase = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "hasBeenMounted", false);
 
-    _defineProperty(_assertThisInitialized(_this), "onCopyListener", function () {
-      if (typeof window.getSelection === 'function') {
-        var selection = window.getSelection();
-        var cardRef = _this.state.cardRef;
+    _defineProperty(_assertThisInitialized(_this), "timeElapsedTillCommenced", performance.now());
 
-        if (cardRef && selection && selection.containsNode && selection.containsNode(cardRef, true)) {
-          _this.fireFileCopiedEvent();
-        }
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "getPreviewCacheKey", function (id, dimensions) {
-      // Dimensions are used to create a key.
-      // Cache is invalidated when different dimensions are provided.
-      return [id, dimensions.height, dimensions.width].join('-');
+    _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), "shouldRefetchImage", function (current, next) {
-      if (!current || !next) {
-        return false;
-      }
-
-      return isBigger(current, next);
+    _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), "isLatestCardStatusUpdate", function (cardStatusUpdateTimestamp) {
-      return !_this.lastCardStatusUpdateTimestamp || _this.lastCardStatusUpdateTimestamp <= cardStatusUpdateTimestamp;
+    _defineProperty(_assertThisInitialized(_this), "getCardPreviewParams", function (identifier, fileState) {
+      var isBannedLocalPreview = _this.state.isBannedLocalPreview;
+      var id = identifier.id;
+      var _this$props2 = _this.props,
+          _this$props2$dimensio = _this$props2.dimensions,
+          dimensions = _this$props2$dimensio === void 0 ? {} : _this$props2$dimensio,
+          mediaClient = _this$props2.mediaClient;
+      return {
+        mediaClient: mediaClient,
+        id: id,
+        dimensions: dimensions,
+        onLocalPreviewError: _this.fireLocalPreviewErrorEvent,
+        filePreview: isBannedLocalPreview ? undefined : getFilePreviewFromFileState(fileState),
+        isRemotePreviewReady: isImageRepresentationReady(fileState),
+        imageUrlParams: _this.getImageURLParams(identifier),
+        mediaBlobUrlAttrs: _this.getMediaBlobUrlAttrs(identifier, fileState)
+      };
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getCardPreview", /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(mediaClient, identifier, fileState, metadata) {
-        var _this$props, _this$props$dimension, dimensions, originalDimensions, resizeMode, featureFlags, id, collectionName, cacheKey, mediaType, mimeType, requestedDimensions, shouldUseLocalPreview, previewableType, cardPreview, contextDimensions;
-
+    _defineProperty(_assertThisInitialized(_this), "resolvePreview", /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(identifier, fileState) {
+        var params, cardPreview, wrappedError;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                _this$props = _this.props, _this$props$dimension = _this$props.dimensions, dimensions = _this$props$dimension === void 0 ? {} : _this$props$dimension, originalDimensions = _this$props.originalDimensions, resizeMode = _this$props.resizeMode, featureFlags = _this$props.featureFlags;
-                id = identifier.id, collectionName = identifier.collectionName; // We aren't using the component state here, as cardPreviewCache has a shorter lifecycle
-
-                cacheKey = _this.getPreviewCacheKey(id, dimensions);
-
-                if (!cardPreviewCache.has(cacheKey)) {
-                  _context.next = 5;
-                  break;
+                _context.prev = 0;
+                params = _this.getCardPreviewParams(identifier, fileState);
+                _context.next = 4;
+                return getCardPreview(params);
+
+              case 4:
+                cardPreview = _context.sent;
+
+                _this.safeSetState({
+                  cardPreview: cardPreview
+                });
+
+                _context.next = 12;
+                break;
+
+              case 8:
+                _context.prev = 8;
+                _context.t0 = _context["catch"](0);
+                wrappedError = ensureMediaCardError('preview-fetch', _context.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.safeSetState({
+                    isBannedLocalPreview: true
+                  });
+                } else {
+                  _this.safeSetState({
+                    status: 'error',
+                    error: wrappedError
+                  });
                 }
 
-                return _context.abrupt("return", cardPreviewCache.get(cacheKey));
-
-              case 5:
-                if (!isErrorFileState(fileState)) {
-                  _context.next = 7;
-                  break;
-                }
-
-                return _context.abrupt("return");
-
-              case 7:
-                mediaType = fileState.mediaType, mimeType = fileState.mimeType;
-                requestedDimensions = _this.getRequestedDimensions(); // TODO: align these checks with helpers from Media Client
-                // https://product-fabric.atlassian.net/browse/BMPT-1300
-
-                shouldUseLocalPreview = mediaType !== 'doc' && !!mimeType && isMimeTypeSupportedByBrowser(mimeType);
-                previewableType = isPreviewableType(mediaType, featureFlags);
-                _context.t1 = shouldUseLocalPreview;
-
-                if (!_context.t1) {
-                  _context.next = 16;
-                  break;
-                }
-
-                _context.next = 15;
-                return getCardPreviewFromFileState(fileState);
-
-              case 15:
-                _context.t1 = _context.sent;
-
-              case 16:
-                _context.t0 = _context.t1;
-
-                if (_context.t0) {
-                  _context.next = 24;
-                  break;
-                }
-
-                _context.t2 = previewableType;
-
-                if (!_context.t2) {
-                  _context.next = 23;
-                  break;
-                }
-
-                _context.next = 22;
-                return getCardPreviewFromBackend(mediaClient, identifier, fileState, requestedDimensions, resizeMode);
-
-              case 22:
-                _context.t2 = _context.sent;
-
-              case 23:
-                _context.t0 = _context.t2;
-
-              case 24:
-                cardPreview = _context.t0;
-
-                if (!cardPreview) {
-                  _context.next = 29;
-                  break;
-                }
-
-                if (cardPreview.dataURI) {
-                  // In case we've retrieved cardPreview using one of the two methods above,
-                  // we want to embed some meta context into dataURI for Copy/Paste to work.
-                  contextDimensions = originalDimensions || requestedDimensions;
-                  cardPreview.dataURI = _this.addContextToDataURI(cardPreview.dataURI, id, metadata, contextDimensions, collectionName);
-                } // We store new cardPreview into cache
-
-
-                cardPreviewCache.set(cacheKey, cardPreview);
-                return _context.abrupt("return", cardPreview);
-
-              case 29:
+              case 12:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee);
+        }, _callee, null, [[0, 8]]);
       }));
 
-      return function (_x, _x2, _x3, _x4) {
-        return _ref.apply(this, arguments);
+      return function (_x, _x2) {
+        return _ref2.apply(this, arguments);
       };
     }());
 
-    _defineProperty(_assertThisInitialized(_this), "fireFileCopiedEvent", function () {
+    _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), "onImageError", function () {
+      var cardPreview = _this.state.cardPreview;
+      var error = new ImageLoadError(cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source);
+
+      if (cardPreview !== null && cardPreview !== void 0 && cardPreview.source && ['local', 'cache-local'].includes(cardPreview.source)) {
+        var _this$props3 = _this.props,
+            identifier = _this$props3.identifier,
+            _this$props3$dimensio = _this$props3.dimensions,
+            dimensions = _this$props3$dimensio === void 0 ? {} : _this$props3$dimensio;
+        isFileIdentifier(identifier) && removeCardPreviewFromCache(identifier.id, dimensions);
+
+        _this.safeSetState({
+          cardPreview: undefined,
+          isBannedLocalPreview: true
+        });
+
+        _this.fireLocalPreviewErrorEvent(error);
+      } else {
+        _this.safeSetState({
+          status: 'error',
+          error: error
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onImageLoad", function () {
+      _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;
-      fireMediaCardEvent(getCopiedFilePayload(_this.metadata.id), createAnalyticsEvent);
+      createAnalyticsEvent && fireScreenEvent(createAnalyticsEvent, _this.fileAttributes);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "fireLocalPreviewErrorEvent", function (error) {// TODO: track local preview success rate
+      // https://product-fabric.atlassian.net/browse/MEX-774
     });
 
     _defineProperty(_assertThisInitialized(_this), "safeSetState", function (state) {
       if (_this.hasBeenMounted) {
-        _this.setState(state);
+        // If it's setting the status, we need to use a state updater function,
+        // which ensures that no non-final status overrides a final status.
+        // If no status is set, we don't need a sate updater
+        var updater = !!state.status ? createStateUpdater(state) : state;
+
+        _this.setState(updater);
       }
     });
 
@@ -205,21 +240,22 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       }
 
       if (_this.hasBeenMounted) {
+        // TODO MEX-788: add test for "do not remove the card preview when unsubscribing".
         _this.setState({
-          cardPreview: undefined
+          isBannedLocalPreview: false
         });
       }
     });
 
     _defineProperty(_assertThisInitialized(_this), "onCardViewClick", function (event, analyticsEvent) {
-      var _this$props2 = _this.props,
-          identifier = _this$props2.identifier,
-          useInlinePlayer = _this$props2.useInlinePlayer,
-          shouldOpenMediaViewer = _this$props2.shouldOpenMediaViewer;
+      var _this$props4 = _this.props,
+          identifier = _this$props4.identifier,
+          useInlinePlayer = _this$props4.useInlinePlayer,
+          shouldOpenMediaViewer = _this$props4.shouldOpenMediaViewer;
       var cardPreview = _this.state.cardPreview;
 
-      var _assertThisInitialize = _assertThisInitialized(_this),
-          metadata = _assertThisInitialize.metadata;
+      var _assertThisInitialize2 = _assertThisInitialized(_this),
+          metadata = _assertThisInitialize2.metadata;
 
       _this.onClick(event, analyticsEvent);
 
@@ -270,13 +306,13 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderInlinePlayer", function () {
-      var _this$props3 = _this.props,
-          identifier = _this$props3.identifier,
-          mediaClient = _this$props3.mediaClient,
-          dimensions = _this$props3.dimensions,
-          selected = _this$props3.selected,
-          testId = _this$props3.testId,
-          originalDimensions = _this$props3.originalDimensions;
+      var _this$props5 = _this.props,
+          identifier = _this$props5.identifier,
+          mediaClient = _this$props5.mediaClient,
+          dimensions = _this$props5.dimensions,
+          selected = _this$props5.selected,
+          testId = _this$props5.testId,
+          originalDimensions = _this$props5.originalDimensions;
       return /*#__PURE__*/React.createElement(InlinePlayer, {
         mediaClient: mediaClient,
         dimensions: dimensions,
@@ -319,12 +355,12 @@ export var CardBase = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "renderMediaViewer", function () {
       var mediaViewerSelectedItem = _this.state.mediaViewerSelectedItem;
-      var _this$props4 = _this.props,
-          mediaClient = _this$props4.mediaClient,
-          identifier = _this$props4.identifier,
-          mediaViewerDataSource = _this$props4.mediaViewerDataSource,
-          contextId = _this$props4.contextId,
-          featureFlags = _this$props4.featureFlags;
+      var _this$props6 = _this.props,
+          mediaClient = _this$props6.mediaClient,
+          identifier = _this$props6.identifier,
+          mediaViewerDataSource = _this$props6.mediaViewerDataSource,
+          contextId = _this$props6.contextId,
+          featureFlags = _this$props6.featureFlags;
 
       if (!mediaViewerSelectedItem) {
         return;
@@ -346,20 +382,20 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderCard", function () {
-      var _this$props5 = _this.props,
-          identifier = _this$props5.identifier,
-          isLazy = _this$props5.isLazy,
-          appearance = _this$props5.appearance,
-          resizeMode = _this$props5.resizeMode,
-          dimensions = _this$props5.dimensions,
-          selectable = _this$props5.selectable,
-          selected = _this$props5.selected,
-          disableOverlay = _this$props5.disableOverlay,
-          alt = _this$props5.alt,
-          testId = _this$props5.testId,
-          featureFlags = _this$props5.featureFlags,
-          titleBoxBgColor = _this$props5.titleBoxBgColor,
-          titleBoxIcon = _this$props5.titleBoxIcon;
+      var _this$props7 = _this.props,
+          identifier = _this$props7.identifier,
+          isLazy = _this$props7.isLazy,
+          appearance = _this$props7.appearance,
+          resizeMode = _this$props7.resizeMode,
+          dimensions = _this$props7.dimensions,
+          selectable = _this$props7.selectable,
+          selected = _this$props7.selected,
+          disableOverlay = _this$props7.disableOverlay,
+          alt = _this$props7.alt,
+          testId = _this$props7.testId,
+          featureFlags = _this$props7.featureFlags,
+          titleBoxBgColor = _this$props7.titleBoxBgColor,
+          titleBoxIcon = _this$props7.titleBoxIcon;
       var mediaItemType = identifier.mediaItemType;
       var _this$state = _this.state,
           status = _this$state.status,
@@ -374,18 +410,18 @@ export var CardBase = /*#__PURE__*/function (_Component) {
           error = _this$state.error,
           cardRef = _this$state.cardRef;
 
-      var _assertThisInitialize2 = _assertThisInitialized(_this),
-          metadata = _assertThisInitialize2.metadata;
-
       var _assertThisInitialize3 = _assertThisInitialized(_this),
-          onCardViewClick = _assertThisInitialize3.onCardViewClick,
-          onDisplayImage = _assertThisInitialize3.onDisplayImage,
-          actions = _assertThisInitialize3.actions,
-          onMouseEnter = _assertThisInitialize3.onMouseEnter;
+          metadata = _assertThisInitialize3.metadata;
+
+      var _assertThisInitialize4 = _assertThisInitialized(_this),
+          onCardViewClick = _assertThisInitialize4.onCardViewClick,
+          onDisplayImage = _assertThisInitialize4.onDisplayImage,
+          actions = _assertThisInitialize4.actions,
+          onMouseEnter = _assertThisInitialize4.onMouseEnter;
 
       var card = /*#__PURE__*/React.createElement(CardView, {
         status: status,
-        error: error && error.secondaryError,
+        error: error,
         mediaItemType: mediaItemType,
         metadata: metadata,
         dataURI: dataURI,
@@ -406,7 +442,9 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         testId: testId,
         featureFlags: featureFlags,
         titleBoxBgColor: titleBoxBgColor,
-        titleBoxIcon: titleBoxIcon
+        titleBoxIcon: titleBoxIcon,
+        onImageError: _this.onImageError,
+        onImageLoad: _this.onImageLoad
       });
       return isLazy ? /*#__PURE__*/React.createElement(ViewportDetector, {
         targetRef: cardRef,
@@ -423,8 +461,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "onClick", function (event, analyticsEvent) {
       var onClick = _this.props.onClick;
 
-      var _assertThisInitialize4 = _assertThisInitialized(_this),
-          metadata = _assertThisInitialize4.metadata;
+      var _assertThisInitialize5 = _assertThisInitialized(_this),
+          metadata = _assertThisInitialize5.metadata;
 
       if (onClick) {
         var cardEvent = {
@@ -438,8 +476,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "onMouseEnter", function (event) {
       var onMouseEnter = _this.props.onMouseEnter;
 
-      var _assertThisInitialize5 = _assertThisInitialized(_this),
-          metadata = _assertThisInitialize5.metadata;
+      var _assertThisInitialize6 = _assertThisInitialized(_this),
+          metadata = _assertThisInitialize6.metadata;
 
       if (onMouseEnter) {
         var cardEvent = {
@@ -450,47 +488,61 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       }
     });
 
+    var _status = 'loading';
+
     var _cardPreview;
 
-    var _this$props6 = _this.props,
-        _identifier = _this$props6.identifier,
-        _this$props6$dimensio = _this$props6.dimensions,
-        _dimensions = _this$props6$dimensio === void 0 ? {} : _this$props6$dimensio;
+    var _this$props8 = _this.props,
+        _identifier = _this$props8.identifier,
+        _this$props8$dimensio = _this$props8.dimensions,
+        _dimensions = _this$props8$dimensio === void 0 ? {} : _this$props8$dimensio;
 
     if (isFileIdentifier(_identifier)) {
       var id = _identifier.id;
+      _cardPreview = getCardPreviewFromCache(id, _dimensions);
+    } else if (isExternalImageIdentifier(_identifier)) {
+      _this.fireCommencedEvent();
 
-      var cacheKey = _this.getPreviewCacheKey(id, _dimensions);
-
-      _cardPreview = cardPreviewCache.get(cacheKey);
-    }
-    /**
-     * If cardPreview is available from local cache, `isCardVisible`
-     * should be true to avoid flickers during re-mount of the component
-     */
+      _status = 'loading-preview';
+      var dataURI = _identifier.dataURI;
+      _cardPreview = {
+        dataURI: dataURI,
+        orientation: 1,
+        source: 'external'
+      };
+    } //  If cardPreview is available from local cache, `isCardVisible`
+    //  should be true to avoid flickers during re-mount of the component
 
 
+    var isCardVisible = _cardPreview ? true : !_this.props.isLazy;
     _this.state = {
-      status: 'loading',
-      isCardVisible: _cardPreview ? true : !_this.props.isLazy,
+      status: _status,
+      isCardVisible: isCardVisible,
       isPlayingFile: false,
       cardPreview: _cardPreview,
-      cardRef: null
+      cardRef: null,
+      isBannedLocalPreview: false,
+      previewDidRender: false
     };
     return _this;
-  } // 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
-
+  }
 
   _createClass(CardBase, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.hasBeenMounted = true;
-      this.fireCommencedEvent();
-      this.updateStateForIdentifier();
-      document.addEventListener('copy', this.onCopyListener);
+      var isCardVisible = this.state.isCardVisible;
+      var identifier = this.props.identifier;
+
+      if (isCardVisible && isFileIdentifier(identifier)) {
+        this.updateStateForIdentifier(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().addEventListener('copy', this.fireCopiedEvent);
     }
   }, {
     key: "componentDidUpdate",
@@ -499,28 +551,66 @@ export var CardBase = /*#__PURE__*/function (_Component) {
           prevIdentifier = prevProps.identifier,
           prevDimensions = prevProps.dimensions;
       var prevIsCardVisible = prevState.isCardVisible;
-      var _this$props7 = this.props,
-          mediaClient = _this$props7.mediaClient,
-          identifier = _this$props7.identifier,
-          dimensions = _this$props7.dimensions;
-      var isCardVisible = this.state.isCardVisible;
+      var _this$props9 = this.props,
+          mediaClient = _this$props9.mediaClient,
+          identifier = _this$props9.identifier,
+          dimensions = _this$props9.dimensions,
+          featureFlags = _this$props9.featureFlags;
+      var _this$state2 = this.state,
+          isCardVisible = _this$state2.isCardVisible,
+          cardPreview = _this$state2.cardPreview,
+          status = _this$state2.status,
+          fileState = _this$state2.fileState,
+          isBannedLocalPreview = _this$state2.isBannedLocalPreview,
+          previewDidRender = _this$state2.previewDidRender;
       var isDifferent = isDifferentIdentifier(prevIdentifier, identifier);
+      var turnedVisible = !prevIsCardVisible && isCardVisible;
+      var isNewMediaClient = prevMediaClient !== mediaClient;
 
-      if (prevIsCardVisible !== isCardVisible && isCardVisible || prevMediaClient !== mediaClient || isDifferent || this.shouldRefetchImage(prevDimensions, dimensions)) {
+      if (isExternalImageIdentifier(identifier) && isDifferent) {
         this.fireCommencedEvent();
-        this.updateStateForIdentifier();
+        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 || isDifferent))) {
+        this.updateStateForIdentifier(identifier);
       }
 
       if (this.state.status !== prevState.status) {
-        var _this$state2 = this.state,
-            status = _this$state2.status,
-            cardPreview = _this$state2.cardPreview,
-            error = _this$state2.error;
-        var createAnalyticsEvent = this.props.createAnalyticsEvent;
-        createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, {
-          cardPreview: cardPreview,
-          error: error
+        this.fireOperationalEvent();
+
+        if (this.state.status === 'complete' || this.fileAttributes.fileMediatype === 'video' && !!cardPreview && this.state.status === 'processing') {
+          this.fireScreenEvent();
+        }
+      }
+
+      if (isFileIdentifier(identifier) && fileState && shouldResolvePreview({
+        status: status,
+        fileState: fileState,
+        dimensions: dimensions,
+        prevDimensions: prevDimensions,
+        featureFlags: featureFlags,
+        hasCardPreview: !!cardPreview,
+        isBannedLocalPreview: isBannedLocalPreview
+      })) {
+        this.resolvePreview(identifier, fileState);
+      }
+
+      if (previewDidRender && // We should't complete if status is uploading
+      ['loading', 'loading-preview', 'processing'].includes(status)) {
+        this.safeSetState({
+          status: 'complete'
         });
+        this.unsubscribe();
       }
     }
   }, {
@@ -528,209 +618,89 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     value: function componentWillUnmount() {
       this.hasBeenMounted = false;
       this.unsubscribe();
-      document.removeEventListener('copy', this.onCopyListener);
+      getDocument().removeEventListener('copy', this.fireCopiedEvent);
     }
   }, {
     key: "updateStateForIdentifier",
-    value: function updateStateForIdentifier() {
-      var _this$props8 = this.props,
-          mediaClient = _this$props8.mediaClient,
-          identifier = _this$props8.identifier;
-      var isCardVisible = this.state.isCardVisible;
-
-      if (!isCardVisible) {
-        return;
-      }
-
-      if (identifier.mediaItemType === 'file') {
-        this.unsubscribe();
-        this.subscribeInternalFile(identifier, mediaClient);
-      }
-    }
-  }, {
-    key: "getRequestedDimensions",
-    value: function getRequestedDimensions() {
-      var dimensions = this.props.dimensions;
-      var cardRef = this.state.cardRef;
-      var options = {
-        dimensions: dimensions,
-        element: cardRef
-      };
-      var width = getDataURIDimension('width', options);
-      var height = getDataURIDimension('height', options);
-      return {
-        width: width,
-        height: height
-      };
-    }
-  }, {
-    key: "addContextToDataURI",
-    value: function addContextToDataURI(dataURI, fileId, metadata, _ref2, collectionName) {
-      var width = _ref2.width,
-          height = _ref2.height;
-      var _this$props9 = this.props,
-          contextId = _this$props9.contextId,
-          alt = _this$props9.alt;
-
-      if (!contextId) {
-        return dataURI;
-      }
-
-      return addFileAttrsToUrl(dataURI, {
-        id: fileId,
-        collection: collectionName,
-        contextId: contextId,
-        mimeType: metadata.mimeType,
-        name: metadata.name,
-        size: metadata.size,
-        width: width,
-        height: height,
-        alt: alt
-      });
+    value: function updateStateForIdentifier(identifier) {
+      this.fireCommencedEvent();
+      this.subscribeInternalFile(identifier);
     }
   }, {
     key: "subscribeInternalFile",
-    value: function subscribeInternalFile(identifier, mediaClient) {
+    value: function subscribeInternalFile(identifier) {
       var _this2 = this;
 
+      var mediaClient = this.props.mediaClient;
+      var isBannedLocalPreview = this.state.isBannedLocalPreview;
       var id = identifier.id,
           collectionName = identifier.collectionName,
           occurrenceKey = identifier.occurrenceKey;
+      this.unsubscribe();
       this.subscription = mediaClient.file.getFileState(id, {
         collectionName: collectionName,
         occurrenceKey: occurrenceKey
       }).subscribe({
-        next: function () {
-          var _next = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(fileState) {
-            var thisCardStatusUpdateTimestamp, status, cardPreview, error, wrappedError;
-            return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-              while (1) {
-                switch (_context2.prev = _context2.next) {
-                  case 0:
-                    _this2.lastFileState = fileState;
-                    thisCardStatusUpdateTimestamp = (performance || Date).now();
-                    status = getCardStatus(fileState.status, extractCardStatusParams(fileState, _this2.props.featureFlags));
-
-                    _this2.safeSetState({
-                      fileState: fileState
-                    });
-
-                    _context2.prev = 4;
-                    _context2.next = 7;
-                    return _this2.getCardPreview(mediaClient, identifier, fileState, getFileDetails(fileState));
-
-                  case 7:
-                    cardPreview = _context2.sent;
-                    _context2.next = 14;
-                    break;
-
-                  case 10:
-                    _context2.prev = 10;
-                    _context2.t0 = _context2["catch"](4);
-                    wrappedError = ensureMediaCardError('preview-fetch', _context2.t0); // If the local preview fails, we don't need to display the error.
-                    // TODO: if file has local preview card will be complete status. But if the local preview fails,
-                    // and we don't change the status, we will have
-                    // [ !cardPreview && status == complete -> log succeeded event ]
-                    // https://product-fabric.atlassian.net/browse/BMPT-1315
-
-                    if (!isLocalPreviewError(wrappedError)) {
-                      status = 'error';
-                      error = wrappedError;
-                    }
-
-                  case 14:
-                    if (_this2.isLatestCardStatusUpdate(thisCardStatusUpdateTimestamp)) {
-                      // These status and progress must not override values representing more recent FileState
-
-                      /* next() start        some await() delay in next()        status & progress update
-                       * -------                    ------------------           ------------------------
-                       *   |----[1]FileState:uploading------>|                                 |
-                       *   |                                 |                                 |
-                       *   |----[2]FileState:uploading------>|                                 |
-                       *   |                                 |                                 |
-                       *   |                                 |----[2]FileState:uploading------>| Update status to `uploading`
-                       *   |----[3]FileState:processing----->|                                 |
-                       *   |                                 |----[3]FileState:processing----->| Update status to `complete`
-                       *   |                                 |                                 |
-                       *   |                                 |----[1]FileState:uploading------>| We do not want to update status to `uploading` again!
-                       *
-                       */
-                      if (status === 'error' && isErrorFileState(fileState) && !error) {
-                        error = new MediaCardError('error-file-state', new Error(fileState.message));
-                      }
-
-                      _this2.safeSetState({
-                        status: status,
-                        cardPreview: cardPreview,
-                        progress: status === 'uploading' && fileState.status === 'uploading' ? fileState.progress : 1,
-                        error: status === 'error' && error ? error : undefined
-                      });
-
-                      _this2.lastCardStatusUpdateTimestamp = thisCardStatusUpdateTimestamp;
-                    }
-
-                  case 15:
-                  case "end":
-                    return _context2.stop();
-                }
-              }
-            }, _callee2, null, [[4, 10]]);
-          }));
-
-          function next(_x5) {
-            return _next.apply(this, arguments);
-          }
+        next: function next(fileState) {
+          var featureFlags = _this2.props.featureFlags;
+          var newState = getCardStateFromFileState(fileState, isBannedLocalPreview, featureFlags);
 
-          return next;
-        }(),
+          _this2.safeSetState(newState);
+        },
         error: function error(e) {
-          // If file state subscription decides that the card is complete
-          // and later there is an error, we won't change the card's status.
-          if (_this2.state.status === 'complete') {
-            return;
-          }
-
-          var errorReason = _this2.fileAttributes.fileStatus === 'uploading' ? 'upload' : 'metadata-fetch';
+          var errorReason = _this2.state.status === 'uploading' ? 'upload' : 'metadata-fetch';
           var error = new MediaCardError(errorReason, e);
 
           _this2.safeSetState({
             error: error,
             status: 'error'
           });
-
-          _this2.lastCardStatusUpdateTimestamp = (performance || Date).now();
         }
       });
     }
+  }, {
+    key: "requestedDimensions",
+    get: function get() {
+      var dimensions = this.props.dimensions;
+      var element = this.state.cardRef;
+      return getRequestedDimensions({
+        dimensions: dimensions,
+        element: element
+      });
+    }
   }, {
     key: "metadata",
     get: function get() {
-      var identifier = this.props.identifier;
-      return isFileIdentifier(identifier) ? this.state.fileState ? getFileDetails(this.state.fileState) : {
-        id: identifier.id
-      } : {
-        id: identifier.mediaItemType,
-        name: identifier.name || identifier.dataURI,
-        mediaType: 'image'
-      };
+      var _this$state3;
+
+      return getFileDetails(this.props.identifier, (_this$state3 = this.state) === null || _this$state3 === void 0 ? void 0 : _this$state3.fileState);
     }
   }, {
     key: "fileAttributes",
     get: function get() {
-      var _this$lastFileState;
+      var _this$state4, _this$state4$fileStat;
 
-      return getFileAttributes(this.metadata, (_this$lastFileState = this.lastFileState) === null || _this$lastFileState === void 0 ? void 0 : _this$lastFileState.status);
+      return getFileAttributes(this.metadata, (_this$state4 = this.state) === null || _this$state4 === void 0 ? void 0 : (_this$state4$fileStat = _this$state4.fileState) === null || _this$state4$fileStat === void 0 ? void 0 : _this$state4$fileStat.status);
+    }
+  }, {
+    key: "fireOperationalEvent",
+    value: function fireOperationalEvent() {
+      var _this$state5 = this.state,
+          status = _this$state5.status,
+          error = _this$state5.error;
+      var createAnalyticsEvent = this.props.createAnalyticsEvent;
+      createAnalyticsEvent && _fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), error);
     }
   }, {
     key: "fireCommencedEvent",
     value: function fireCommencedEvent() {
-      if (!this.state.isCardVisible) {
-        return;
-      }
-
+      this.timeElapsedTillCommenced = performance.now();
       var createAnalyticsEvent = this.props.createAnalyticsEvent;
-      var payload = getRenderCommencedEventPayload(this.fileAttributes);
-      fireMediaCardEvent(payload, createAnalyticsEvent);
+      createAnalyticsEvent && _fireCommencedEvent(createAnalyticsEvent, this.fileAttributes, {
+        overall: {
+          durationSincePageStart: this.timeElapsedTillCommenced
+        }
+      });
     }
   }, {
     key: "actions",
@@ -763,18 +733,13 @@ export var CardBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$lastFileState2;
-
-      var _this$state3 = this.state,
-          isPlayingFile = _this$state3.isPlayingFile,
-          mediaViewerSelectedItem = _this$state3.mediaViewerSelectedItem;
+      var _this$state6 = this.state,
+          isPlayingFile = _this$state6.isPlayingFile,
+          mediaViewerSelectedItem = _this$state6.mediaViewerSelectedItem;
       var innerContent = /*#__PURE__*/React.createElement(React.Fragment, null, isPlayingFile ? this.renderInlinePlayer() : this.renderCard(), mediaViewerSelectedItem ? this.renderMediaViewer() : null);
-      var content = this.context.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
+      return this.context.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
         locale: "en"
       }, innerContent);
-      return /*#__PURE__*/React.createElement(FileAttributesProvider, {
-        data: getFileAttributes(this.metadata, (_this$lastFileState2 = this.lastFileState) === null || _this$lastFileState2 === void 0 ? void 0 : _this$lastFileState2.status)
-      }, content);
     }
   }]);
 
@@ -795,23 +760,6 @@ _defineProperty(CardBase, "contextTypes", {
   intl: intlShape
 });
 
-_defineProperty(CardBase, "getDerivedStateFromProps", function (props) {
-  var identifier = props.identifier;
-
-  if (identifier.mediaItemType === 'external-image') {
-    var dataURI = identifier.dataURI;
-    return {
-      status: 'complete',
-      cardPreview: {
-        dataURI: dataURI,
-        orientation: 1
-      }
-    };
-  }
-
-  return null;
-});
-
 export var Card = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,