@atlaskit/media-card 77.4.3 → 77.4.5

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/media-card
 
+## 77.4.5
+
+### Patch Changes
+
+- [#43072](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43072) [`4c4278b7415`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4c4278b7415) - [ux] CXP-2744 Bug fix preventing an infinite loop from occurring when an error occurs in inline player
+- Updated dependencies
+
+## 77.4.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 77.4.3
 
 ### 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.3";
+var packageVersion = "77.4.5";
 var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
   var _super = _createSuper(CardBase);
@@ -400,7 +400,9 @@ var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
         identifier = _this$props5.identifier,
         useInlinePlayer = _this$props5.useInlinePlayer,
         shouldOpenMediaViewer = _this$props5.shouldOpenMediaViewer;
-      var cardPreview = _this.state.cardPreview;
+      var _this$state = _this.state,
+        status = _this$state.status,
+        cardPreview = _this$state.cardPreview;
       var _assertThisInitialize2 = (0, _assertThisInitialized2.default)(_this),
         metadata = _assertThisInitialize2.metadata;
       _this.onClick(event, analyticsEvent);
@@ -408,7 +410,7 @@ var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
         return;
       }
       var isVideo = metadata && metadata.mediaType === 'video';
-      if (useInlinePlayer && isVideo && !!cardPreview) {
+      if (useInlinePlayer && isVideo && !!cardPreview && status !== 'error') {
         _this.setState({
           isPlayingFile: true,
           shouldAutoplay: true
@@ -434,8 +436,10 @@ var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
         });
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInlinePlayerError", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInlinePlayerError", function (e) {
       _this.setState({
+        error: new _errors.MediaCardError('error-file-state', e),
+        status: 'error',
         isPlayingFile: false
       });
     });
@@ -453,9 +457,9 @@ var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
         testId = _this$props6.testId,
         originalDimensions = _this$props6.originalDimensions,
         onFullscreenChange = _this$props6.onFullscreenChange;
-      var _this$state = _this.state,
-        shouldAutoplay = _this$state.shouldAutoplay,
-        cardPreview = _this$state.cardPreview;
+      var _this$state2 = _this.state,
+        shouldAutoplay = _this$state2.shouldAutoplay,
+        cardPreview = _this$state2.cardPreview;
       var card = _this.renderCard(false, 'loading', false);
       return /*#__PURE__*/_react.default.createElement(_react.Suspense, {
         fallback: card
@@ -542,13 +546,13 @@ var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
         shouldOpenMediaViewer = _this$props8.shouldOpenMediaViewer,
         shouldHideTooltip = _this$props8.shouldHideTooltip;
       var mediaItemType = identifier.mediaItemType;
-      var _this$state2 = _this.state,
-        status = _this$state2.status,
-        progress = _this$state2.progress,
-        cardPreview = _this$state2.cardPreview,
-        error = _this$state2.error,
-        cardRef = _this$state2.cardRef,
-        isCardVisible = _this$state2.isCardVisible;
+      var _this$state3 = _this.state,
+        status = _this$state3.status,
+        progress = _this$state3.progress,
+        cardPreview = _this$state3.cardPreview,
+        error = _this$state3.error,
+        cardRef = _this$state3.cardRef,
+        isCardVisible = _this$state3.isCardVisible;
       var _assertThisInitialize3 = (0, _assertThisInitialized2.default)(_this),
         metadata = _assertThisInitialize3.metadata;
       var _assertThisInitialize4 = (0, _assertThisInitialized2.default)(_this),
@@ -718,9 +722,9 @@ var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
     value: function componentDidMount() {
       var _getDocument;
       this.hasBeenMounted = true;
-      var _this$state3 = this.state,
-        isCardVisible = _this$state3.isCardVisible,
-        cardPreview = _this$state3.cardPreview;
+      var _this$state4 = this.state,
+        isCardVisible = _this$state4.isCardVisible,
+        cardPreview = _this$state4.cardPreview;
       var _this$props11 = this.props,
         identifier = _this$props11.identifier,
         ssr = _this$props11.ssr,
@@ -768,15 +772,15 @@ var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
         useInlinePlayer = _this$props12.useInlinePlayer,
         disableOverlay = _this$props12.disableOverlay,
         ssr = _this$props12.ssr;
-      var _this$state4 = this.state,
-        isCardVisible = _this$state4.isCardVisible,
-        cardPreview = _this$state4.cardPreview,
-        status = _this$state4.status,
-        fileState = _this$state4.fileState,
-        isBannedLocalPreview = _this$state4.isBannedLocalPreview,
-        previewDidRender = _this$state4.previewDidRender,
-        isPlayingFile = _this$state4.isPlayingFile,
-        wasResolvedUpfrontPreview = _this$state4.wasResolvedUpfrontPreview;
+      var _this$state5 = this.state,
+        isCardVisible = _this$state5.isCardVisible,
+        cardPreview = _this$state5.cardPreview,
+        status = _this$state5.status,
+        fileState = _this$state5.fileState,
+        isBannedLocalPreview = _this$state5.isBannedLocalPreview,
+        previewDidRender = _this$state5.previewDidRender,
+        isPlayingFile = _this$state5.isPlayingFile,
+        wasResolvedUpfrontPreview = _this$state5.wasResolvedUpfrontPreview;
       var isDiffIdentifier = (0, _mediaClient2.isDifferentIdentifier)(prevIdentifier, identifier);
       /**
        * Variable turnedVisible should only be true when media card
@@ -854,7 +858,7 @@ var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
       var _getFileDetails2 = (0, _metadata.getFileDetails)(identifier, fileState),
         mimeType = _getFileDetails2.mimeType;
       var isVideoPlayable = (0, _videoIsPlayable.videoIsPlayable)(isBannedLocalPreview, fileState, mimeType);
-      if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable) {
+      if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable && status !== 'error') {
         this.setState({
           isPlayingFile: true
         });
@@ -930,22 +934,22 @@ var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "metadata",
     get: function get() {
-      var _this$state5;
-      return (0, _metadata.getFileDetails)(this.props.identifier, (_this$state5 = this.state) === null || _this$state5 === void 0 ? void 0 : _this$state5.fileState);
+      var _this$state6;
+      return (0, _metadata.getFileDetails)(this.props.identifier, (_this$state6 = this.state) === null || _this$state6 === void 0 ? void 0 : _this$state6.fileState);
     }
   }, {
     key: "fileAttributes",
     get: function get() {
-      var _this$state6;
-      return (0, _analytics.getFileAttributes)(this.metadata, (_this$state6 = this.state) === null || _this$state6 === void 0 || (_this$state6 = _this$state6.fileState) === null || _this$state6 === void 0 ? void 0 : _this$state6.status);
+      var _this$state7;
+      return (0, _analytics.getFileAttributes)(this.metadata, (_this$state7 = this.state) === null || _this$state7 === void 0 || (_this$state7 = _this$state7.fileState) === null || _this$state7 === void 0 ? void 0 : _this$state7.status);
     }
   }, {
     key: "fireOperationalEvent",
     value: function fireOperationalEvent() {
-      var _this$state7 = this.state,
-        status = _this$state7.status,
-        error = _this$state7.error,
-        fileState = _this$state7.fileState;
+      var _this$state8 = this.state,
+        status = _this$state8.status,
+        error = _this$state8.error,
+        fileState = _this$state8.fileState;
       var createAnalyticsEvent = this.props.createAnalyticsEvent;
       createAnalyticsEvent && (0, _cardAnalytics.fireOperationalEvent)(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error, this.traceContext, fileState === null || fileState === void 0 ? void 0 : fileState.metadataTraceContext);
       (0, _ufoExperiences.completeUfoExperience)(this.internalOccurrenceKey, status, this.fileAttributes, this.fileStateFlags, this.ssrReliability, error);
@@ -1004,9 +1008,9 @@ var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$state8 = this.state,
-        isPlayingFile = _this$state8.isPlayingFile,
-        mediaViewerSelectedItem = _this$state8.mediaViewerSelectedItem;
+      var _this$state9 = this.state,
+        isPlayingFile = _this$state9.isPlayingFile,
+        mediaViewerSelectedItem = _this$state9.mediaViewerSelectedItem;
       var innerContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isPlayingFile ? this.renderInlinePlayer() : this.renderCard(), mediaViewerSelectedItem ? this.renderMediaViewer() : null, this.storeSSRData());
       return this.props.intl ? innerContent : /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
         locale: "en"

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.3";
+var packageVersion = "77.4.5";
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,

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

@@ -16,7 +16,7 @@ var _externalImageCard = require("./externalImageCard");
 var _fileCard = require("./fileCard");
 var _excluded = ["identifier"];
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.3";
+var packageVersion = "77.4.5";
 var CardV2Base = exports.CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

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

@@ -368,7 +368,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
         fireNonCriticalErrorEventRef.current && fireNonCriticalErrorEventRef.current(error);
       }
       var fileImageMode = (0, _mediaClient.imageResizeModeToFileImageMode)(resizeMode);
-      (0, _mediaClient.isFileIdentifier)(identifier) && (0, _getCardPreview.removeCardPreviewFromCache)(identifier.id, fileImageMode);
+      (0, _getCardPreview.removeCardPreviewFromCache)(identifier.id, fileImageMode);
       setCardPreview(undefined);
     } else {
       if (!['complete', 'error', 'failed-processing'].includes(status)) {
@@ -420,7 +420,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       return;
     }
     var isVideo = metadata && metadata.mediaType === 'video';
-    if (useInlinePlayer && isVideo && !!cardPreview) {
+    if (useInlinePlayer && isVideo && !!cardPreview && status !== 'error') {
       setIsPlayingFile(true);
       setShouldAutoplay(true);
     } else if (shouldOpenMediaViewer) {
@@ -816,10 +816,10 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
      * 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) {
+    isCardVisible && isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable && status !== 'error') {
       setIsPlayingFile(true);
     }
-  }, [isCardVisible, disableOverlay, fileAttributes.fileMediatype, fileStateValue, identifier, isBannedLocalPreview, isPlayingFile, useInlinePlayer]);
+  }, [isCardVisible, disableOverlay, fileAttributes.fileMediatype, fileStateValue, identifier, isBannedLocalPreview, isPlayingFile, status, useInlinePlayer]);
 
   //----------------------------------------------------------------//
   //----------------- fireScreenEvent ------------------------------//
@@ -976,7 +976,9 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     identifier: identifier,
     autoplay: !!shouldAutoplay,
     onFullscreenChange: onFullscreenChange,
-    onError: function onError() {
+    onError: function onError(e) {
+      setError(new _errors.MediaCardError('error-file-state', e));
+      setStatus('error');
       setIsPlayingFile(false);
     },
     onClick: onCardClick,

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.3",
+        packageName: "77.4.5",
         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.3";
+var packageVersion = "77.4.5";
 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.3";
+const packageVersion = "77.4.5";
 export class CardBase extends Component {
   constructor(props) {
     super(props);
@@ -347,6 +347,7 @@ export class CardBase extends Component {
         shouldOpenMediaViewer
       } = this.props;
       const {
+        status,
         cardPreview
       } = this.state;
       const {
@@ -357,7 +358,7 @@ export class CardBase extends Component {
         return;
       }
       const isVideo = metadata && metadata.mediaType === 'video';
-      if (useInlinePlayer && isVideo && !!cardPreview) {
+      if (useInlinePlayer && isVideo && !!cardPreview && status !== 'error') {
         this.setState({
           isPlayingFile: true,
           shouldAutoplay: true
@@ -383,8 +384,10 @@ export class CardBase extends Component {
         });
       }
     });
-    _defineProperty(this, "onInlinePlayerError", () => {
+    _defineProperty(this, "onInlinePlayerError", e => {
       this.setState({
+        error: new MediaCardError('error-file-state', e),
+        status: 'error',
         isPlayingFile: false
       });
     });
@@ -834,7 +837,7 @@ export class CardBase extends Component {
       mimeType
     } = getFileDetails(identifier, fileState);
     const isVideoPlayable = videoIsPlayable(isBannedLocalPreview, fileState, mimeType);
-    if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable) {
+    if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable && status !== 'error') {
       this.setState({
         isPlayingFile: true
       });

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.3";
+const packageVersion = "77.4.5";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

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

@@ -7,7 +7,7 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.4.3";
+const packageVersion = "77.4.5";
 export const CardV2Base = ({
   identifier,
   ...otherProps

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

@@ -1,5 +1,5 @@
 import DownloadIcon from '@atlaskit/icon/glyph/download';
-import { RECENTS_COLLECTION, addFileAttrsToUrl, globalMediaEventEmitter, imageResizeModeToFileImageMode, isFileIdentifier, isImageRepresentationReady } from '@atlaskit/media-client';
+import { RECENTS_COLLECTION, addFileAttrsToUrl, globalMediaEventEmitter, imageResizeModeToFileImageMode, 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';
@@ -315,7 +315,7 @@ export const FileCard = ({
         fireNonCriticalErrorEventRef.current && fireNonCriticalErrorEventRef.current(error);
       }
       const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
-      isFileIdentifier(identifier) && removeCardPreviewFromCache(identifier.id, fileImageMode);
+      removeCardPreviewFromCache(identifier.id, fileImageMode);
       setCardPreview(undefined);
     } else {
       if (!['complete', 'error', 'failed-processing'].includes(status)) {
@@ -367,7 +367,7 @@ export const FileCard = ({
       return;
     }
     const isVideo = metadata && metadata.mediaType === 'video';
-    if (useInlinePlayer && isVideo && !!cardPreview) {
+    if (useInlinePlayer && isVideo && !!cardPreview && status !== 'error') {
       setIsPlayingFile(true);
       setShouldAutoplay(true);
     } else if (shouldOpenMediaViewer) {
@@ -696,10 +696,10 @@ export const FileCard = ({
      * 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) {
+    isCardVisible && isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable && status !== 'error') {
       setIsPlayingFile(true);
     }
-  }, [isCardVisible, disableOverlay, fileAttributes.fileMediatype, fileStateValue, identifier, isBannedLocalPreview, isPlayingFile, useInlinePlayer]);
+  }, [isCardVisible, disableOverlay, fileAttributes.fileMediatype, fileStateValue, identifier, isBannedLocalPreview, isPlayingFile, status, useInlinePlayer]);
 
   //----------------------------------------------------------------//
   //----------------- fireScreenEvent ------------------------------//
@@ -856,7 +856,9 @@ export const FileCard = ({
     identifier: identifier,
     autoplay: !!shouldAutoplay,
     onFullscreenChange: onFullscreenChange,
-    onError: () => {
+    onError: e => {
+      setError(new MediaCardError('error-file-state', e));
+      setStatus('error');
       setIsPlayingFile(false);
     },
     onClick: onCardClick,

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.3",
+      packageName: "77.4.5",
       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.3";
+const packageVersion = "77.4.5";
 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.3";
+var packageVersion = "77.4.5";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);
@@ -391,7 +391,9 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         identifier = _this$props5.identifier,
         useInlinePlayer = _this$props5.useInlinePlayer,
         shouldOpenMediaViewer = _this$props5.shouldOpenMediaViewer;
-      var cardPreview = _this.state.cardPreview;
+      var _this$state = _this.state,
+        status = _this$state.status,
+        cardPreview = _this$state.cardPreview;
       var _assertThisInitialize2 = _assertThisInitialized(_this),
         metadata = _assertThisInitialize2.metadata;
       _this.onClick(event, analyticsEvent);
@@ -399,7 +401,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         return;
       }
       var isVideo = metadata && metadata.mediaType === 'video';
-      if (useInlinePlayer && isVideo && !!cardPreview) {
+      if (useInlinePlayer && isVideo && !!cardPreview && status !== 'error') {
         _this.setState({
           isPlayingFile: true,
           shouldAutoplay: true
@@ -425,8 +427,10 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         });
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "onInlinePlayerError", function () {
+    _defineProperty(_assertThisInitialized(_this), "onInlinePlayerError", function (e) {
       _this.setState({
+        error: new MediaCardError('error-file-state', e),
+        status: 'error',
         isPlayingFile: false
       });
     });
@@ -444,9 +448,9 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         testId = _this$props6.testId,
         originalDimensions = _this$props6.originalDimensions,
         onFullscreenChange = _this$props6.onFullscreenChange;
-      var _this$state = _this.state,
-        shouldAutoplay = _this$state.shouldAutoplay,
-        cardPreview = _this$state.cardPreview;
+      var _this$state2 = _this.state,
+        shouldAutoplay = _this$state2.shouldAutoplay,
+        cardPreview = _this$state2.cardPreview;
       var card = _this.renderCard(false, 'loading', false);
       return /*#__PURE__*/React.createElement(Suspense, {
         fallback: card
@@ -533,13 +537,13 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         shouldOpenMediaViewer = _this$props8.shouldOpenMediaViewer,
         shouldHideTooltip = _this$props8.shouldHideTooltip;
       var mediaItemType = identifier.mediaItemType;
-      var _this$state2 = _this.state,
-        status = _this$state2.status,
-        progress = _this$state2.progress,
-        cardPreview = _this$state2.cardPreview,
-        error = _this$state2.error,
-        cardRef = _this$state2.cardRef,
-        isCardVisible = _this$state2.isCardVisible;
+      var _this$state3 = _this.state,
+        status = _this$state3.status,
+        progress = _this$state3.progress,
+        cardPreview = _this$state3.cardPreview,
+        error = _this$state3.error,
+        cardRef = _this$state3.cardRef,
+        isCardVisible = _this$state3.isCardVisible;
       var _assertThisInitialize3 = _assertThisInitialized(_this),
         metadata = _assertThisInitialize3.metadata;
       var _assertThisInitialize4 = _assertThisInitialized(_this),
@@ -709,9 +713,9 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     value: function componentDidMount() {
       var _getDocument;
       this.hasBeenMounted = true;
-      var _this$state3 = this.state,
-        isCardVisible = _this$state3.isCardVisible,
-        cardPreview = _this$state3.cardPreview;
+      var _this$state4 = this.state,
+        isCardVisible = _this$state4.isCardVisible,
+        cardPreview = _this$state4.cardPreview;
       var _this$props11 = this.props,
         identifier = _this$props11.identifier,
         ssr = _this$props11.ssr,
@@ -759,15 +763,15 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         useInlinePlayer = _this$props12.useInlinePlayer,
         disableOverlay = _this$props12.disableOverlay,
         ssr = _this$props12.ssr;
-      var _this$state4 = this.state,
-        isCardVisible = _this$state4.isCardVisible,
-        cardPreview = _this$state4.cardPreview,
-        status = _this$state4.status,
-        fileState = _this$state4.fileState,
-        isBannedLocalPreview = _this$state4.isBannedLocalPreview,
-        previewDidRender = _this$state4.previewDidRender,
-        isPlayingFile = _this$state4.isPlayingFile,
-        wasResolvedUpfrontPreview = _this$state4.wasResolvedUpfrontPreview;
+      var _this$state5 = this.state,
+        isCardVisible = _this$state5.isCardVisible,
+        cardPreview = _this$state5.cardPreview,
+        status = _this$state5.status,
+        fileState = _this$state5.fileState,
+        isBannedLocalPreview = _this$state5.isBannedLocalPreview,
+        previewDidRender = _this$state5.previewDidRender,
+        isPlayingFile = _this$state5.isPlayingFile,
+        wasResolvedUpfrontPreview = _this$state5.wasResolvedUpfrontPreview;
       var isDiffIdentifier = isDifferentIdentifier(prevIdentifier, identifier);
       /**
        * Variable turnedVisible should only be true when media card
@@ -845,7 +849,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       var _getFileDetails2 = getFileDetails(identifier, fileState),
         mimeType = _getFileDetails2.mimeType;
       var isVideoPlayable = videoIsPlayable(isBannedLocalPreview, fileState, mimeType);
-      if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable) {
+      if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable && status !== 'error') {
         this.setState({
           isPlayingFile: true
         });
@@ -921,22 +925,22 @@ export var CardBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "metadata",
     get: function get() {
-      var _this$state5;
-      return getFileDetails(this.props.identifier, (_this$state5 = this.state) === null || _this$state5 === void 0 ? void 0 : _this$state5.fileState);
+      var _this$state6;
+      return getFileDetails(this.props.identifier, (_this$state6 = this.state) === null || _this$state6 === void 0 ? void 0 : _this$state6.fileState);
     }
   }, {
     key: "fileAttributes",
     get: function get() {
-      var _this$state6;
-      return getFileAttributes(this.metadata, (_this$state6 = this.state) === null || _this$state6 === void 0 || (_this$state6 = _this$state6.fileState) === null || _this$state6 === void 0 ? void 0 : _this$state6.status);
+      var _this$state7;
+      return getFileAttributes(this.metadata, (_this$state7 = this.state) === null || _this$state7 === void 0 || (_this$state7 = _this$state7.fileState) === null || _this$state7 === void 0 ? void 0 : _this$state7.status);
     }
   }, {
     key: "fireOperationalEvent",
     value: function fireOperationalEvent() {
-      var _this$state7 = this.state,
-        status = _this$state7.status,
-        error = _this$state7.error,
-        fileState = _this$state7.fileState;
+      var _this$state8 = this.state,
+        status = _this$state8.status,
+        error = _this$state8.error,
+        fileState = _this$state8.fileState;
       var createAnalyticsEvent = this.props.createAnalyticsEvent;
       createAnalyticsEvent && _fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error, this.traceContext, fileState === null || fileState === void 0 ? void 0 : fileState.metadataTraceContext);
       completeUfoExperience(this.internalOccurrenceKey, status, this.fileAttributes, this.fileStateFlags, this.ssrReliability, error);
@@ -995,9 +999,9 @@ export var CardBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$state8 = this.state,
-        isPlayingFile = _this$state8.isPlayingFile,
-        mediaViewerSelectedItem = _this$state8.mediaViewerSelectedItem;
+      var _this$state9 = this.state,
+        isPlayingFile = _this$state9.isPlayingFile,
+        mediaViewerSelectedItem = _this$state9.mediaViewerSelectedItem;
       var innerContent = /*#__PURE__*/React.createElement(React.Fragment, null, isPlayingFile ? this.renderInlinePlayer() : this.renderCard(), mediaViewerSelectedItem ? this.renderMediaViewer() : null, this.storeSSRData());
       return this.props.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
         locale: "en"

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.3";
+var packageVersion = "77.4.5";
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

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

@@ -9,7 +9,7 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.4.3";
+var packageVersion = "77.4.5";
 export var CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

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

@@ -6,7 +6,7 @@ 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 { RECENTS_COLLECTION, addFileAttrsToUrl, globalMediaEventEmitter, imageResizeModeToFileImageMode, 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';
@@ -358,7 +358,7 @@ export var FileCard = function FileCard(_ref) {
         fireNonCriticalErrorEventRef.current && fireNonCriticalErrorEventRef.current(error);
       }
       var fileImageMode = imageResizeModeToFileImageMode(resizeMode);
-      isFileIdentifier(identifier) && removeCardPreviewFromCache(identifier.id, fileImageMode);
+      removeCardPreviewFromCache(identifier.id, fileImageMode);
       setCardPreview(undefined);
     } else {
       if (!['complete', 'error', 'failed-processing'].includes(status)) {
@@ -410,7 +410,7 @@ export var FileCard = function FileCard(_ref) {
       return;
     }
     var isVideo = metadata && metadata.mediaType === 'video';
-    if (useInlinePlayer && isVideo && !!cardPreview) {
+    if (useInlinePlayer && isVideo && !!cardPreview && status !== 'error') {
       setIsPlayingFile(true);
       setShouldAutoplay(true);
     } else if (shouldOpenMediaViewer) {
@@ -806,10 +806,10 @@ export var FileCard = function FileCard(_ref) {
      * 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) {
+    isCardVisible && isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && isVideoPlayable && status !== 'error') {
       setIsPlayingFile(true);
     }
-  }, [isCardVisible, disableOverlay, fileAttributes.fileMediatype, fileStateValue, identifier, isBannedLocalPreview, isPlayingFile, useInlinePlayer]);
+  }, [isCardVisible, disableOverlay, fileAttributes.fileMediatype, fileStateValue, identifier, isBannedLocalPreview, isPlayingFile, status, useInlinePlayer]);
 
   //----------------------------------------------------------------//
   //----------------- fireScreenEvent ------------------------------//
@@ -966,7 +966,9 @@ export var FileCard = function FileCard(_ref) {
     identifier: identifier,
     autoplay: !!shouldAutoplay,
     onFullscreenChange: onFullscreenChange,
-    onError: function onError() {
+    onError: function onError(e) {
+      setError(new MediaCardError('error-file-state', e));
+      setStatus('error');
       setIsPlayingFile(false);
     },
     onClick: onCardClick,

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.3",
+        packageName: "77.4.5",
         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.3";
+var packageVersion = "77.4.5";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/types/card/card.d.ts

@@ -48,7 +48,7 @@ export declare class CardBase extends Component<CardBaseProps, CardState> {
     unsubscribe: () => void;
     get actions(): CardAction[];
     onCardViewClick: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
-    onInlinePlayerError: () => void;
+    onInlinePlayerError: (e: Error) => void;
     setRef: (cardRef: HTMLDivElement | null) => void;
     renderInlinePlayer: () => JSX.Element;
     onMediaViewerClose: () => void;

package/dist/types-ts4.5/card/card.d.ts

@@ -48,7 +48,7 @@ export declare class CardBase extends Component<CardBaseProps, CardState> {
     unsubscribe: () => void;
     get actions(): CardAction[];
     onCardViewClick: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
-    onInlinePlayerError: () => void;
+    onInlinePlayerError: (e: Error) => void;
     setRef: (cardRef: HTMLDivElement | null) => void;
     renderInlinePlayer: () => JSX.Element;
     onMediaViewerClose: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "77.4.3",
+  "version": "77.4.5",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -39,14 +39,14 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/dropdown-menu": "^12.1.0",
     "@atlaskit/editor-shared-styles": "^2.8.0",
-    "@atlaskit/icon": "^21.12.0",
+    "@atlaskit/icon": "^22.0.0",
     "@atlaskit/media-client": "^25.0.0",
     "@atlaskit/media-client-react": "^1.4.0",
     "@atlaskit/media-common": "^11.0.0",
     "@atlaskit/media-ui": "^25.0.0",
     "@atlaskit/media-viewer": "^48.2.0",
     "@atlaskit/platform-feature-flags": "^0.2.2",
-    "@atlaskit/spinner": "^15.6.0",
+    "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.28.0",
     "@atlaskit/tooltip": "^18.0.0",