@atlaskit/media-card 77.4.1 → 77.4.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/media-card
 
+## 77.4.3
+
+### Patch Changes
+
+- [#43248](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43248) [`38b1f08a5da`](https://bitbucket.org/atlassian/atlassian-frontend/commits/38b1f08a5da) - [ux] CXP-2748 Bug fix in CardV2 so that the card correctly updates the file preview when a new identifier is passed to the component
+
+## 77.4.2
+
+### Patch Changes
+
+- [#43093](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43093) [`ccba4cddc23`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ccba4cddc23) - [ux] CXP-2736 Bug fix to ensure that a poster attribute is provided to videos for CardV2.
+
 ## 77.4.1
 
 ### Patch Changes

package/dist/cjs/card/card.js

@@ -49,7 +49,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.1";
+var packageVersion = "77.4.3";
 var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
   var _super = _createSuper(CardBase);

package/dist/cjs/card/media-card-analytics-error-boundary.js

@@ -90,7 +90,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.1";
+var packageVersion = "77.4.3";
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,

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

@@ -16,14 +16,16 @@ var _externalImageCard = require("./externalImageCard");
 var _fileCard = require("./fileCard");
 var _excluded = ["identifier"];
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.1";
+var packageVersion = "77.4.3";
 var CardV2Base = exports.CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var innerContent = (0, _mediaClient.isFileIdentifier)(identifier) ? /*#__PURE__*/_react.default.createElement(_fileCard.FileCard, (0, _extends2.default)({}, otherProps, {
-    identifier: identifier
+    identifier: identifier,
+    key: identifier.id
   })) : /*#__PURE__*/_react.default.createElement(_externalImageCard.ExternalImageCard, (0, _extends2.default)({}, otherProps, {
-    identifier: identifier
+    identifier: identifier,
+    key: identifier.dataURI
   }));
   return otherProps.intl ? innerContent : /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
     locale: "en"

package/dist/cjs/card/v2/externalImageCard.js

@@ -85,10 +85,6 @@ var ExternalImageCard = exports.ExternalImageCard = function ExternalImageCard(_
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     status = _useState4[0],
     setStatus = _useState4[1];
-  (0, _react.useEffect)(function () {
-    fireCommencedEventRef.current();
-    setStatus('loading-preview');
-  }, [fireCommencedEventRef, identifier]);
   var cardPreview = (0, _react.useMemo)(function () {
     return {
       dataURI: identifier.dataURI,
@@ -160,6 +156,9 @@ var ExternalImageCard = exports.ExternalImageCard = function ExternalImageCard(_
   //------------------------ useEffects ----------------------------//
   //----------------------------------------------------------------//
 
+  (0, _react.useEffect)(function () {
+    fireCommencedEventRef.current();
+  }, [fireCommencedEventRef]);
   (0, _react.useEffect)(function () {
     var _getDocument;
     var fireCopiedCardEvent = function fireCopiedCardEvent() {

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

@@ -81,19 +81,6 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
   //---------------- State Initializer Functions -------------------//
   //----------------------------------------------------------------//
 
-  var _useFileState = (0, _mediaClientReact.useFileState)(identifier.id, {
-      collectionName: identifier.collectionName,
-      occurrenceKey: identifier.occurrenceKey
-    }),
-    fileState = _useFileState.fileState;
-  var prevFileState = (0, _usePrevious.usePrevious)(fileState);
-  var fileStateValue = (0, _react.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 = (0, _react.useRef)();
   var ssrReliabilityRef = (0, _react.useRef)({
     server: {
@@ -118,10 +105,10 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       allowAnimated: true
     });
   }, [cardElement, dimensions, identifier.collectionName, resizeMode]);
-  var mediaBlobUrlAttrs = (0, _react.useMemo)(function () {
+  var getMediaBlobUrlAttrs = (0, _react.useCallback)(function (fileState) {
     var id = identifier.id,
       collection = identifier.collectionName;
-    var _getFileDetails = (0, _metadata.getFileDetails)(identifier, fileStateValue),
+    var _getFileDetails = (0, _metadata.getFileDetails)(identifier, fileState),
       mimeType = _getFileDetails.mimeType,
       name = _getFileDetails.name,
       size = _getFileDetails.size;
@@ -138,7 +125,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     })), {}, {
       alt: alt
     }) : undefined;
-  }, [alt, cardElement, contextId, dimensions, fileStateValue, identifier, originalDimensions]);
+  }, [alt, cardElement, contextId, dimensions, identifier, originalDimensions]);
   var getSSRPreview = function getSSRPreview(ssr, identifier, mediaClient) {
     var _ssrDataRef$current, _ssrDataRef$current2;
     ssrDataRef.current = (0, _globalScope.getSSRData)(identifier);
@@ -149,7 +136,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     }
     if (!((_ssrDataRef$current2 = ssrDataRef.current) !== null && _ssrDataRef$current2 !== void 0 && _ssrDataRef$current2.dataURI)) {
       try {
-        return (0, _getCardPreview.getSSRCardPreview)(ssr, mediaClient, identifier.id, imageURLParams, mediaBlobUrlAttrs);
+        return (0, _getCardPreview.getSSRCardPreview)(ssr, mediaClient, identifier.id, imageURLParams, getMediaBlobUrlAttrs(fileStateValue));
       } catch (e) {
         ssrReliabilityRef.current[ssr] = _objectSpread({
           status: 'fail'
@@ -172,6 +159,35 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     }
     return cardPreview;
   };
+  var _useState3 = (0, _react.useState)(cardPreviewInitializer),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    cardPreview = _useState4[0],
+    setCardPreview = _useState4[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 _useState5 = (0, _react.useState)(function () {
+      return !isLazy || cardPreview && !(0, _getCardPreview.isSSRPreview)(cardPreview);
+    }),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isCardVisible = _useState6[0],
+    setIsCardVisible = _useState6[1];
+  var _useFileState = (0, _mediaClientReact.useFileState)(identifier.id, {
+      skipRemote: !isCardVisible,
+      collectionName: identifier.collectionName,
+      occurrenceKey: identifier.occurrenceKey
+    }),
+    fileState = _useFileState.fileState;
+  var prevFileState = (0, _usePrevious.usePrevious)(fileState);
+  var fileStateValue = (0, _react.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]);
 
   //----------------------------------------------------------------//
   //------------ State, Refs & Initial Values ----------------------//
@@ -194,28 +210,10 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       traceId: (0, _mediaCommon.getRandomHex)(8)
     };
   }, []);
-  var _useState3 = (0, _react.useState)('loading'),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    status = _useState4[0],
-    setStatus = _useState4[1];
-  (0, _react.useEffect)(function () {
-    setStatus('loading');
-  }, [identifier]);
-  var _useState5 = (0, _react.useState)(cardPreviewInitializer),
-    _useState6 = (0, _slicedToArray2.default)(_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 = (0, _react.useState)(function () {
-      return !isLazy || !!cardPreview && !(0, _getCardPreview.isSSRPreview)(cardPreview);
-    }),
+  var _useState7 = (0, _react.useState)('loading'),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    isCardVisible = _useState8[0],
-    setIsCardVisible = _useState8[1];
+    status = _useState8[0],
+    setStatus = _useState8[1];
   var _useState9 = (0, _react.useState)(false),
     _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
     isPlayingFile = _useState10[0],
@@ -440,11 +438,11 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
   //----------------------------------------------------------------//
 
   var fetchRemotePreviewRef = (0, _useCurrentValueRef.useCurrentValueRef)(function (identifier) {
-    return (0, _getCardPreview.fetchAndCacheRemotePreview)(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, mediaBlobUrlAttrs);
+    return (0, _getCardPreview.fetchAndCacheRemotePreview)(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, getMediaBlobUrlAttrs(fileStateValue));
   });
   var resolvePreviewRef = (0, _useCurrentValueRef.useCurrentValueRef)( /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.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;
+      var filePreview, isRemotePreviewReady, mode, cachedPreview, dimensionsAreBigger, localPreview, value, resolvedFilePreview, _value, type, mediaType, orientation, _dataURI, _dataURI2, preview, source, mediaBlobUrlAttrs, dataURI, remotePreview, wrappedError;
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -462,7 +460,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
           case 8:
             _context.prev = 8;
             if (!filePreview) {
-              _context.next = 74;
+              _context.next = 75;
               break;
             }
             _context.prev = 10;
@@ -568,6 +566,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
             source = preview.source;
           case 70:
             // We want to embed some meta context into dataURI for Copy/Paste to work.
+            mediaBlobUrlAttrs = getMediaBlobUrlAttrs(fileStateValue);
             dataURI = mediaBlobUrlAttrs ? (0, _mediaClient.addFileAttrsToUrl)(preview.dataURI, mediaBlobUrlAttrs) : preview.dataURI; // We store new cardPreview into cache
             _cache.default.set(identifier.id, mode, _objectSpread(_objectSpread({}, preview), {}, {
               source: source,
@@ -577,11 +576,11 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
               dataURI: dataURI
             }));
             return _context.abrupt("return");
-          case 74:
-            _context.next = 81;
+          case 75:
+            _context.next = 82;
             break;
-          case 76:
-            _context.prev = 76;
+          case 77:
+            _context.prev = 77;
             _context.t5 = _context["catch"](8);
             /**
              * We report the error if:
@@ -601,25 +600,25 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
              * if there is no remote preview available
              */
             if (isRemotePreviewReady) {
-              _context.next = 81;
+              _context.next = 82;
               break;
             }
             throw _context.t5;
-          case 81:
+          case 82:
             if (isRemotePreviewReady) {
-              _context.next = 83;
+              _context.next = 84;
               break;
             }
             throw new _errors.MediaCardError('remote-preview-not-ready');
-          case 83:
-            _context.next = 85;
-            return (0, _getCardPreview.fetchAndCacheRemotePreview)(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, mediaBlobUrlAttrs, traceContext);
-          case 85:
+          case 84:
+            _context.next = 86;
+            return (0, _getCardPreview.fetchAndCacheRemotePreview)(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, getMediaBlobUrlAttrs(fileStateValue), traceContext);
+          case 86:
             remotePreview = _context.sent;
             setCardPreview(remotePreview);
             return _context.abrupt("return");
-          case 90:
-            _context.prev = 90;
+          case 91:
+            _context.prev = 91;
             _context.t6 = _context["catch"](2);
             wrappedError = (0, _errors.ensureMediaCardError)('preview-fetch', _context.t6); //  If remote preview fails, we set status 'error'
             //  If local preview fails (i.e, no remote preview available),
@@ -634,11 +633,11 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
                 setError(wrappedError);
               }
             }
-          case 94:
+          case 95:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[2, 90], [8, 76], [10, 17], [30, 38], [42, 49]]);
+      }, _callee, null, [[2, 91], [8, 77], [10, 17], [30, 38], [42, 49]]);
     }));
     return function (_x, _x2) {
       return _ref2.apply(this, arguments);
@@ -811,10 +810,16 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     var _getFileDetails2 = (0, _metadata.getFileDetails)(identifier, fileStateValue),
       mimeType = _getFileDetails2.mimeType;
     var isVideoPlayable = (0, _videoIsPlayable.videoIsPlayable)(isBannedLocalPreview, fileStateValue, mimeType);
-    if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable) {
+    if (
+    /**
+     * We need to check that the card is visible before switching to inline player
+     * in order to avoid race conditions of the ViewportDector being unmounted before
+     * it is able to set isCardVisible to true.
+     */
+    isCardVisible && isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable) {
       setIsPlayingFile(true);
     }
-  }, [disableOverlay, fileAttributes.fileMediatype, fileStateValue, identifier, isBannedLocalPreview, isPlayingFile, useInlinePlayer]);
+  }, [isCardVisible, disableOverlay, fileAttributes.fileMediatype, fileStateValue, identifier, isBannedLocalPreview, isPlayingFile, useInlinePlayer]);
 
   //----------------------------------------------------------------//
   //----------------- fireScreenEvent ------------------------------//

package/dist/cjs/inline/loader.js

@@ -119,7 +119,7 @@ var MediaInlineCardLoader = exports.default = /*#__PURE__*/function (_React$Pure
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "77.4.1",
+        packageName: "77.4.3",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/utils/ufoExperiences.js

@@ -14,7 +14,7 @@ var _mediaClient = require("@atlaskit/media-client");
 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) { (0, _defineProperty2.default)(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; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.1";
+var packageVersion = "77.4.3";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/es2019/card/card.js

@@ -27,7 +27,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.4.1";
+const packageVersion = "77.4.3";
 export class CardBase extends Component {
   constructor(props) {
     super(props);

package/dist/es2019/card/media-card-analytics-error-boundary.js

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.4.1";
+const packageVersion = "77.4.3";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

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

@@ -7,15 +7,17 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.4.1";
+const packageVersion = "77.4.3";
 export const CardV2Base = ({
   identifier,
   ...otherProps
 }) => {
   const innerContent = isFileIdentifier(identifier) ? /*#__PURE__*/React.createElement(FileCard, _extends({}, otherProps, {
-    identifier: identifier
+    identifier: identifier,
+    key: identifier.id
   })) : /*#__PURE__*/React.createElement(ExternalImageCard, _extends({}, otherProps, {
-    identifier: identifier
+    identifier: identifier,
+    key: identifier.dataURI
   }));
   return otherProps.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
     locale: "en"

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

@@ -57,10 +57,6 @@ export const ExternalImageCard = ({
     startUfoExperience(internalOccurrenceKey);
   });
   const [status, setStatus] = useState('loading-preview');
-  useEffect(() => {
-    fireCommencedEventRef.current();
-    setStatus('loading-preview');
-  }, [fireCommencedEventRef, identifier]);
   const cardPreview = useMemo(() => ({
     dataURI: identifier.dataURI,
     orientation: 1,
@@ -121,6 +117,9 @@ export const ExternalImageCard = ({
   //------------------------ useEffects ----------------------------//
   //----------------------------------------------------------------//
 
+  useEffect(() => {
+    fireCommencedEventRef.current();
+  }, [fireCommencedEventRef]);
   useEffect(() => {
     var _getDocument;
     const fireCopiedCardEvent = () => {

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

@@ -4,7 +4,7 @@ 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 React, { Suspense, useCallback, 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';
@@ -61,20 +61,6 @@ export const FileCard = ({
   //---------------- State Initializer Functions -------------------//
   //----------------------------------------------------------------//
 
-  const {
-    fileState
-  } = useFileState(identifier.id, {
-    collectionName: identifier.collectionName,
-    occurrenceKey: identifier.occurrenceKey
-  });
-  const prevFileState = usePrevious(fileState);
-  const fileStateValue = useMemo(() => {
-    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]);
   const ssrDataRef = useRef();
   const ssrReliabilityRef = useRef({
     server: {
@@ -94,7 +80,7 @@ export const FileCard = ({
     }),
     allowAnimated: true
   }), [cardElement, dimensions, identifier.collectionName, resizeMode]);
-  const mediaBlobUrlAttrs = useMemo(() => {
+  const getMediaBlobUrlAttrs = useCallback(fileState => {
     const {
       id,
       collectionName: collection
@@ -103,7 +89,7 @@ export const FileCard = ({
       mimeType,
       name,
       size
-    } = getFileDetails(identifier, fileStateValue);
+    } = getFileDetails(identifier, fileState);
     return contextId ? {
       id,
       collection,
@@ -117,7 +103,7 @@ export const FileCard = ({
       })),
       alt
     } : undefined;
-  }, [alt, cardElement, contextId, dimensions, fileStateValue, identifier, originalDimensions]);
+  }, [alt, cardElement, contextId, dimensions, identifier, originalDimensions]);
   const getSSRPreview = (ssr, identifier, mediaClient) => {
     var _ssrDataRef$current, _ssrDataRef$current2;
     ssrDataRef.current = getSSRData(identifier);
@@ -129,7 +115,7 @@ export const FileCard = ({
     }
     if (!((_ssrDataRef$current2 = ssrDataRef.current) !== null && _ssrDataRef$current2 !== void 0 && _ssrDataRef$current2.dataURI)) {
       try {
-        return getSSRCardPreview(ssr, mediaClient, identifier.id, imageURLParams, mediaBlobUrlAttrs);
+        return getSSRCardPreview(ssr, mediaClient, identifier.id, imageURLParams, getMediaBlobUrlAttrs(fileStateValue));
       } catch (e) {
         ssrReliabilityRef.current[ssr] = {
           status: 'fail',
@@ -155,6 +141,28 @@ export const FileCard = ({
     }
     return cardPreview;
   };
+  const [cardPreview, setCardPreview] = useState(cardPreviewInitializer);
+
+  // If cardPreview is available from local cache or external, `isCardVisible`
+  // should be true to avoid flickers during re-mount of the component
+  // should not be visible for SSR preview, otherwise we'll fire the metadata fetch from
+  // outside the viewport
+  const [isCardVisible, setIsCardVisible] = useState(() => !isLazy || cardPreview && !isSSRPreview(cardPreview));
+  const {
+    fileState
+  } = useFileState(identifier.id, {
+    skipRemote: !isCardVisible,
+    collectionName: identifier.collectionName,
+    occurrenceKey: identifier.occurrenceKey
+  });
+  const prevFileState = usePrevious(fileState);
+  const fileStateValue = useMemo(() => {
+    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]);
 
   //----------------------------------------------------------------//
   //------------ State, Refs & Initial Values ----------------------//
@@ -172,16 +180,6 @@ export const FileCard = ({
     traceId: getRandomHex(8)
   }), []);
   const [status, setStatus] = useState('loading');
-  useEffect(() => {
-    setStatus('loading');
-  }, [identifier]);
-  const [cardPreview, setCardPreview] = useState(cardPreviewInitializer);
-
-  // If cardPreview is available from local cache or external, `isCardVisible`
-  // should be true to avoid flickers during re-mount of the component
-  // should not be visible for SSR preview, otherwise we'll fire the metadata fetch from
-  // outside the viewport
-  const [isCardVisible, setIsCardVisible] = useState(() => !isLazy || !!cardPreview && !isSSRPreview(cardPreview));
   const [isPlayingFile, setIsPlayingFile] = useState(false);
   const [shouldAutoplay, setShouldAutoplay] = useState(false);
   const [isBannedLocalPreview, setIsBannedLocalPreview] = useState(false);
@@ -387,7 +385,7 @@ export const FileCard = ({
   //----------------------------------------------------------------//
 
   const fetchRemotePreviewRef = useCurrentValueRef(identifier => {
-    return fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, mediaBlobUrlAttrs);
+    return fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, getMediaBlobUrlAttrs(fileStateValue));
   });
   const resolvePreviewRef = useCurrentValueRef(async (identifier, fileState) => {
     const filePreview = isBannedLocalPreview ? undefined : fileState.status !== 'error' && 'mimeType' in fileState && isMimeTypeSupportedByBrowser(fileState.mimeType) ? fileState.preview : undefined;
@@ -474,6 +472,7 @@ export const FileCard = ({
               source = preview.source;
           }
           // We want to embed some meta context into dataURI for Copy/Paste to work.
+          const mediaBlobUrlAttrs = getMediaBlobUrlAttrs(fileStateValue);
           const dataURI = mediaBlobUrlAttrs ? addFileAttrsToUrl(preview.dataURI, mediaBlobUrlAttrs) : preview.dataURI;
           // We store new cardPreview into cache
           cardPreviewCache.set(identifier.id, mode, {
@@ -518,7 +517,7 @@ export const FileCard = ({
          */
         throw new MediaCardError('remote-preview-not-ready');
       }
-      const remotePreview = await fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, mediaBlobUrlAttrs, traceContext);
+      const remotePreview = await fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, getMediaBlobUrlAttrs(fileStateValue), traceContext);
       setCardPreview(remotePreview);
       return;
     } catch (e) {
@@ -691,10 +690,16 @@ export const FileCard = ({
       mimeType
     } = getFileDetails(identifier, fileStateValue);
     const isVideoPlayable = videoIsPlayable(isBannedLocalPreview, fileStateValue, mimeType);
-    if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable) {
+    if (
+    /**
+     * We need to check that the card is visible before switching to inline player
+     * in order to avoid race conditions of the ViewportDector being unmounted before
+     * it is able to set isCardVisible to true.
+     */
+    isCardVisible && isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable) {
       setIsPlayingFile(true);
     }
-  }, [disableOverlay, fileAttributes.fileMediatype, fileStateValue, identifier, isBannedLocalPreview, isPlayingFile, useInlinePlayer]);
+  }, [isCardVisible, disableOverlay, fileAttributes.fileMediatype, fileStateValue, identifier, isBannedLocalPreview, isPlayingFile, useInlinePlayer]);
 
   //----------------------------------------------------------------//
   //----------------- fireScreenEvent ------------------------------//

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "77.4.1",
+      packageName: "77.4.3",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/utils/ufoExperiences.js

@@ -4,7 +4,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.4.1";
+const packageVersion = "77.4.3";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {

package/dist/esm/card/card.js

@@ -40,7 +40,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.1";
+var packageVersion = "77.4.3";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);

package/dist/esm/card/media-card-analytics-error-boundary.js

@@ -83,7 +83,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.1";
+var packageVersion = "77.4.3";
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

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

@@ -9,14 +9,16 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.1";
+var packageVersion = "77.4.3";
 export var CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);
   var innerContent = isFileIdentifier(identifier) ? /*#__PURE__*/React.createElement(FileCard, _extends({}, otherProps, {
-    identifier: identifier
+    identifier: identifier,
+    key: identifier.id
   })) : /*#__PURE__*/React.createElement(ExternalImageCard, _extends({}, otherProps, {
-    identifier: identifier
+    identifier: identifier,
+    key: identifier.dataURI
   }));
   return otherProps.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
     locale: "en"

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

@@ -75,10 +75,6 @@ export var ExternalImageCard = function ExternalImageCard(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     status = _useState4[0],
     setStatus = _useState4[1];
-  useEffect(function () {
-    fireCommencedEventRef.current();
-    setStatus('loading-preview');
-  }, [fireCommencedEventRef, identifier]);
   var cardPreview = useMemo(function () {
     return {
       dataURI: identifier.dataURI,
@@ -150,6 +146,9 @@ export var ExternalImageCard = function ExternalImageCard(_ref) {
   //------------------------ useEffects ----------------------------//
   //----------------------------------------------------------------//
 
+  useEffect(function () {
+    fireCommencedEventRef.current();
+  }, [fireCommencedEventRef]);
   useEffect(function () {
     var _getDocument;
     var fireCopiedCardEvent = function fireCopiedCardEvent() {

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

@@ -11,7 +11,7 @@ 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 React, { Suspense, useCallback, 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';
@@ -71,19 +71,6 @@ export var FileCard = function FileCard(_ref) {
   //---------------- 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: {
@@ -108,10 +95,10 @@ export var FileCard = function FileCard(_ref) {
       allowAnimated: true
     });
   }, [cardElement, dimensions, identifier.collectionName, resizeMode]);
-  var mediaBlobUrlAttrs = useMemo(function () {
+  var getMediaBlobUrlAttrs = useCallback(function (fileState) {
     var id = identifier.id,
       collection = identifier.collectionName;
-    var _getFileDetails = getFileDetails(identifier, fileStateValue),
+    var _getFileDetails = getFileDetails(identifier, fileState),
       mimeType = _getFileDetails.mimeType,
       name = _getFileDetails.name,
       size = _getFileDetails.size;
@@ -128,7 +115,7 @@ export var FileCard = function FileCard(_ref) {
     })), {}, {
       alt: alt
     }) : undefined;
-  }, [alt, cardElement, contextId, dimensions, fileStateValue, identifier, originalDimensions]);
+  }, [alt, cardElement, contextId, dimensions, identifier, originalDimensions]);
   var getSSRPreview = function getSSRPreview(ssr, identifier, mediaClient) {
     var _ssrDataRef$current, _ssrDataRef$current2;
     ssrDataRef.current = getSSRData(identifier);
@@ -139,7 +126,7 @@ export var FileCard = function FileCard(_ref) {
     }
     if (!((_ssrDataRef$current2 = ssrDataRef.current) !== null && _ssrDataRef$current2 !== void 0 && _ssrDataRef$current2.dataURI)) {
       try {
-        return getSSRCardPreview(ssr, mediaClient, identifier.id, imageURLParams, mediaBlobUrlAttrs);
+        return getSSRCardPreview(ssr, mediaClient, identifier.id, imageURLParams, getMediaBlobUrlAttrs(fileStateValue));
       } catch (e) {
         ssrReliabilityRef.current[ssr] = _objectSpread({
           status: 'fail'
@@ -162,6 +149,35 @@ export var FileCard = function FileCard(_ref) {
     }
     return cardPreview;
   };
+  var _useState3 = useState(cardPreviewInitializer),
+    _useState4 = _slicedToArray(_useState3, 2),
+    cardPreview = _useState4[0],
+    setCardPreview = _useState4[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 _useState5 = useState(function () {
+      return !isLazy || cardPreview && !isSSRPreview(cardPreview);
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isCardVisible = _useState6[0],
+    setIsCardVisible = _useState6[1];
+  var _useFileState = useFileState(identifier.id, {
+      skipRemote: !isCardVisible,
+      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]);
 
   //----------------------------------------------------------------//
   //------------ State, Refs & Initial Values ----------------------//
@@ -184,28 +200,10 @@ export var FileCard = function FileCard(_ref) {
       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);
-    }),
+  var _useState7 = useState('loading'),
     _useState8 = _slicedToArray(_useState7, 2),
-    isCardVisible = _useState8[0],
-    setIsCardVisible = _useState8[1];
+    status = _useState8[0],
+    setStatus = _useState8[1];
   var _useState9 = useState(false),
     _useState10 = _slicedToArray(_useState9, 2),
     isPlayingFile = _useState10[0],
@@ -430,11 +428,11 @@ export var FileCard = function FileCard(_ref) {
   //----------------------------------------------------------------//
 
   var fetchRemotePreviewRef = useCurrentValueRef(function (identifier) {
-    return fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, mediaBlobUrlAttrs);
+    return fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, getMediaBlobUrlAttrs(fileStateValue));
   });
   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;
+      var filePreview, isRemotePreviewReady, mode, cachedPreview, dimensionsAreBigger, localPreview, value, resolvedFilePreview, _value, type, mediaType, orientation, _dataURI, _dataURI2, preview, source, mediaBlobUrlAttrs, dataURI, remotePreview, wrappedError;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -452,7 +450,7 @@ export var FileCard = function FileCard(_ref) {
           case 8:
             _context.prev = 8;
             if (!filePreview) {
-              _context.next = 74;
+              _context.next = 75;
               break;
             }
             _context.prev = 10;
@@ -558,6 +556,7 @@ export var FileCard = function FileCard(_ref) {
             source = preview.source;
           case 70:
             // We want to embed some meta context into dataURI for Copy/Paste to work.
+            mediaBlobUrlAttrs = getMediaBlobUrlAttrs(fileStateValue);
             dataURI = mediaBlobUrlAttrs ? addFileAttrsToUrl(preview.dataURI, mediaBlobUrlAttrs) : preview.dataURI; // We store new cardPreview into cache
             cardPreviewCache.set(identifier.id, mode, _objectSpread(_objectSpread({}, preview), {}, {
               source: source,
@@ -567,11 +566,11 @@ export var FileCard = function FileCard(_ref) {
               dataURI: dataURI
             }));
             return _context.abrupt("return");
-          case 74:
-            _context.next = 81;
+          case 75:
+            _context.next = 82;
             break;
-          case 76:
-            _context.prev = 76;
+          case 77:
+            _context.prev = 77;
             _context.t5 = _context["catch"](8);
             /**
              * We report the error if:
@@ -591,25 +590,25 @@ export var FileCard = function FileCard(_ref) {
              * if there is no remote preview available
              */
             if (isRemotePreviewReady) {
-              _context.next = 81;
+              _context.next = 82;
               break;
             }
             throw _context.t5;
-          case 81:
+          case 82:
             if (isRemotePreviewReady) {
-              _context.next = 83;
+              _context.next = 84;
               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:
+          case 84:
+            _context.next = 86;
+            return fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, getMediaBlobUrlAttrs(fileStateValue), traceContext);
+          case 86:
             remotePreview = _context.sent;
             setCardPreview(remotePreview);
             return _context.abrupt("return");
-          case 90:
-            _context.prev = 90;
+          case 91:
+            _context.prev = 91;
             _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),
@@ -624,11 +623,11 @@ export var FileCard = function FileCard(_ref) {
                 setError(wrappedError);
               }
             }
-          case 94:
+          case 95:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[2, 90], [8, 76], [10, 17], [30, 38], [42, 49]]);
+      }, _callee, null, [[2, 91], [8, 77], [10, 17], [30, 38], [42, 49]]);
     }));
     return function (_x, _x2) {
       return _ref2.apply(this, arguments);
@@ -801,10 +800,16 @@ export var FileCard = function FileCard(_ref) {
     var _getFileDetails2 = getFileDetails(identifier, fileStateValue),
       mimeType = _getFileDetails2.mimeType;
     var isVideoPlayable = videoIsPlayable(isBannedLocalPreview, fileStateValue, mimeType);
-    if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable) {
+    if (
+    /**
+     * We need to check that the card is visible before switching to inline player
+     * in order to avoid race conditions of the ViewportDector being unmounted before
+     * it is able to set isCardVisible to true.
+     */
+    isCardVisible && isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable) {
       setIsPlayingFile(true);
     }
-  }, [disableOverlay, fileAttributes.fileMediatype, fileStateValue, identifier, isBannedLocalPreview, isPlayingFile, useInlinePlayer]);
+  }, [isCardVisible, disableOverlay, fileAttributes.fileMediatype, fileStateValue, identifier, isBannedLocalPreview, isPlayingFile, useInlinePlayer]);
 
   //----------------------------------------------------------------//
   //----------------- fireScreenEvent ------------------------------//

package/dist/esm/inline/loader.js

@@ -103,7 +103,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "77.4.1",
+        packageName: "77.4.3",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/utils/ufoExperiences.js

@@ -7,7 +7,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.1";
+var packageVersion = "77.4.3";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "77.4.1",
+  "version": "77.4.3",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"