@atlaskit/media-card 72.1.0 → 73.2.0

package/dist/esm/root/cardView.js

@@ -6,9 +6,9 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -45,6 +45,7 @@ import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUn
 import { isRateLimitedError, isPollingError } from '@atlaskit/media-client';
 import { newFileExperienceClassName } from './card/cardConstants';
 import { isUploadError } from '../errors';
+import { MediaCardCursor } from '../types';
 
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
@@ -72,31 +73,38 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "divRef", /*#__PURE__*/React.createRef());
 
-    _defineProperty(_assertThisInitialized(_this), "onImageLoad", function () {
-      var onImageLoad = _this.props.onImageLoad; // We render the icon & icon message always, even if there is dataURI available.
+    _defineProperty(_assertThisInitialized(_this), "onImageLoad", function (prevCardPreview) {
+      var _this$props = _this.props,
+          onImageLoad = _this$props.onImageLoad,
+          cardPreview = _this$props.cardPreview;
+
+      if (prevCardPreview.dataURI !== (cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI)) {
+        return;
+      } // We render the icon & icon message always, even if there is cardPreview available.
       // If the image fails to load/render, the icon will remain, i.e. the user won't see a change until
       // the root card decides to chage status to error.
       // If the image renders successfully, we switch this variable to hide the icon & icon message
       // behind the thumbnail in case the image has transparency.
-      // It is less likely that root component replaces a suceeded dataURI for a failed one
+      // It is less likely that root component replaces a suceeded cardPreview for a failed one
       // than the opposite case. Therefore we prefer to hide the icon instead show when the image fails,
       // for a smoother transition
 
+
       _this.setState({
         didImageRender: true
       });
 
-      onImageLoad && onImageLoad();
+      onImageLoad && onImageLoad(cardPreview);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onImageError", function () {
+    _defineProperty(_assertThisInitialized(_this), "onImageError", function (cardPreview) {
       var onImageError = _this.props.onImageError;
 
       _this.setState({
         didImageRender: false
       });
 
-      onImageError && onImageError();
+      onImageError && onImageError(cardPreview);
     });
 
     _defineProperty(_assertThisInitialized(_this), "saveElementWidth", function () {
@@ -118,24 +126,24 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderFileNewExperience", function () {
-      var _this$props = _this.props,
-          dimensions = _this$props.dimensions,
-          appearance = _this$props.appearance,
-          onClick = _this$props.onClick,
-          onMouseEnter = _this$props.onMouseEnter,
-          testId = _this$props.testId,
-          metadata = _this$props.metadata,
-          status = _this$props.status,
-          selected = _this$props.selected,
-          selectable = _this$props.selectable,
-          disableOverlay = _this$props.disableOverlay,
-          dataURI = _this$props.dataURI;
+      var _this$props2 = _this.props,
+          dimensions = _this$props2.dimensions,
+          appearance = _this$props2.appearance,
+          onClick = _this$props2.onClick,
+          onMouseEnter = _this$props2.onMouseEnter,
+          testId = _this$props2.testId,
+          metadata = _this$props2.metadata,
+          status = _this$props2.status,
+          selected = _this$props2.selected,
+          selectable = _this$props2.selectable,
+          disableOverlay = _this$props2.disableOverlay,
+          cardPreview = _this$props2.cardPreview,
+          mediaCardCursor = _this$props2.mediaCardCursor;
 
       var _ref = metadata || {},
           name = _ref.name;
 
-      var shouldUsePointerCursor = status !== 'error' && status !== 'failed-processing';
-      var shouldDisplayBackground = !dataURI || !disableOverlay || status === 'error' || status === 'failed-processing';
+      var shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
       var isPlayButtonClickable = !!(_this.shouldRenderPlayButton() && disableOverlay);
       var isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Disable tooltip for Media Single
 
@@ -149,7 +157,7 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
         onMouseEnter: onMouseEnter,
         innerRef: _this.divRef,
         breakpoint: _this.breakpoint,
-        shouldUsePointerCursor: shouldUsePointerCursor,
+        mediaCardCursor: mediaCardCursor,
         disableOverlay: !!disableOverlay,
         selected: !!selected,
         displayBackground: shouldDisplayBackground,
@@ -164,27 +172,30 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderFile", function () {
-      var _this$props2 = _this.props,
-          status = _this$props2.status,
-          mediaItemType = _this$props2.mediaItemType,
-          metadata = _this$props2.metadata,
-          dataURI = _this$props2.dataURI,
-          progress = _this$props2.progress,
-          resizeMode = _this$props2.resizeMode,
-          dimensions = _this$props2.dimensions,
-          selectable = _this$props2.selectable,
-          selected = _this$props2.selected,
-          disableOverlay = _this$props2.disableOverlay,
-          previewOrientation = _this$props2.previewOrientation,
-          alt = _this$props2.alt,
-          onDisplayImage = _this$props2.onDisplayImage,
-          actions = _this$props2.actions;
+      var _this$props3 = _this.props,
+          cardPreview = _this$props3.cardPreview,
+          status = _this$props3.status,
+          mediaItemType = _this$props3.mediaItemType,
+          metadata = _this$props3.metadata,
+          progress = _this$props3.progress,
+          resizeMode = _this$props3.resizeMode,
+          dimensions = _this$props3.dimensions,
+          selectable = _this$props3.selectable,
+          selected = _this$props3.selected,
+          disableOverlay = _this$props3.disableOverlay,
+          alt = _this$props3.alt,
+          onDisplayImage = _this$props3.onDisplayImage,
+          actions = _this$props3.actions;
 
-      var _ref2 = metadata || {},
-          name = _ref2.name,
-          mediaType = _ref2.mediaType,
-          mimeType = _ref2.mimeType,
-          size = _ref2.size;
+      var _ref2 = cardPreview || {},
+          dataURI = _ref2.dataURI,
+          orientation = _ref2.orientation;
+
+      var _ref3 = metadata || {},
+          name = _ref3.name,
+          mediaType = _ref3.mediaType,
+          mimeType = _ref3.mimeType,
+          size = _ref3.size;
 
       var actionsWithDetails = metadata && actions ? attachDetailsToActions(actions, metadata) : [];
       var errorMessage = getErrorMessage(status);
@@ -206,33 +217,34 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
         onDisplayImage: onDisplayImage,
         actions: actionsWithDetails,
         disableOverlay: disableOverlay,
-        previewOrientation: previewOrientation,
+        previewOrientation: orientation,
         alt: alt,
         onImageLoad: _this.onImageLoad,
-        onImageError: _this.onImageError
+        onImageError: _this.onImageError,
+        cardPreview: cardPreview
       });
     });
 
     _defineProperty(_assertThisInitialized(_this), "getRenderConfigByStatus", function () {
-      var _this$props3 = _this.props,
-          dataURI = _this$props3.dataURI,
-          status = _this$props3.status,
-          metadata = _this$props3.metadata,
-          disableOverlay = _this$props3.disableOverlay,
-          error = _this$props3.error,
-          selectable = _this$props3.selectable,
-          disableAnimation = _this$props3.disableAnimation;
+      var _this$props4 = _this.props,
+          cardPreview = _this$props4.cardPreview,
+          status = _this$props4.status,
+          metadata = _this$props4.metadata,
+          disableOverlay = _this$props4.disableOverlay,
+          error = _this$props4.error,
+          selectable = _this$props4.selectable,
+          disableAnimation = _this$props4.disableAnimation;
 
-      var _ref3 = metadata || {},
-          name = _ref3.name,
-          mediaType = _ref3.mediaType;
+      var _ref4 = metadata || {},
+          name = _ref4.name,
+          mediaType = _ref4.mediaType;
 
       var didImageRender = _this.state.didImageRender;
       var isZeroSize = !!(metadata && metadata.size === 0);
       var defaultConfig = {
         renderTypeIcon: !didImageRender,
-        renderImageRenderer: !!dataURI,
-        renderPlayButton: !!dataURI && mediaType === 'video',
+        renderImageRenderer: !!cardPreview,
+        renderPlayButton: !!cardPreview && mediaType === 'video',
         renderBlanket: !disableOverlay,
         renderTitleBox: !disableOverlay && !!name,
         renderTickBox: !disableOverlay && !!selectable
@@ -269,8 +281,8 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
           var iconMessage;
           var customTitleMessage;
 
-          var _ref4 = error || {},
-              secondaryError = _ref4.secondaryError;
+          var _ref5 = error || {},
+              secondaryError = _ref5.secondaryError;
 
           if (isRateLimitedError(secondaryError) || isPollingError(secondaryError)) {
             iconMessage = /*#__PURE__*/React.createElement(PreviewCurrentlyUnavailable, null);
@@ -322,14 +334,14 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
           isFixedBlanket = _this$getRenderConfig.isFixedBlanket,
           customTitleMessage = _this$getRenderConfig.customTitleMessage;
 
-      var _this$props4 = _this.props,
-          progress = _this$props4.progress,
-          selected = _this$props4.selected,
-          status = _this$props4.status,
-          metadata = _this$props4.metadata;
+      var _this$props5 = _this.props,
+          progress = _this$props5.progress,
+          selected = _this$props5.selected,
+          status = _this$props5.status,
+          metadata = _this$props5.metadata;
 
-      var _ref5 = metadata || {},
-          name = _ref5.name;
+      var _ref6 = metadata || {},
+          name = _ref6.name;
 
       var hasTitleBox = !!renderTitleBox || !!renderFailedTitleBox;
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardImageContainer, {
@@ -354,14 +366,14 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(_ref6) {
-      var prevDataURI = _ref6.dataURI;
-      var dataURI = this.props.dataURI; // We should only switch didImageRender to false
-      // when dataURI goes undefined, not when it is updated.
+    value: function componentDidUpdate(_ref7) {
+      var prevCardPreview = _ref7.cardPreview;
+      var cardPreview = this.props.cardPreview; // We should only switch didImageRender to false
+      // when cardPreview goes undefined, not when it is updated.
       // as this method could be triggered after onImageLoad callback,
       // falling on a race condition
 
-      prevDataURI && !dataURI && this.setState({
+      !!prevCardPreview && !cardPreview && this.setState({
         didImageRender: false
       });
     }
@@ -376,10 +388,10 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
         return elementWidth;
       }
 
-      var _ref7 = this.props.dimensions || {
+      var _ref8 = this.props.dimensions || {
         width: undefined
       },
-          width = _ref7.width;
+          width = _ref8.width;
 
       if (!width) {
         return defaultImageCardDimensions.width;
@@ -404,12 +416,12 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
         return this.renderFileNewExperience();
       }
 
-      var _this$props5 = this.props,
-          dimensions = _this$props5.dimensions,
-          appearance = _this$props5.appearance,
-          onClick = _this$props5.onClick,
-          onMouseEnter = _this$props5.onMouseEnter,
-          testId = _this$props5.testId;
+      var _this$props6 = this.props,
+          dimensions = _this$props6.dimensions,
+          appearance = _this$props6.appearance,
+          onClick = _this$props6.onClick,
+          onMouseEnter = _this$props6.onMouseEnter,
+          testId = _this$props6.testId;
       var wrapperDimensions = dimensions ? dimensions : getDefaultCardDimensions(appearance);
       return /*#__PURE__*/React.createElement(Wrapper, {
         "data-testid": testId || 'media-card-view',
@@ -432,14 +444,14 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "shouldRenderPlayButton",
     value: function shouldRenderPlayButton() {
-      var _this$props6 = this.props,
-          metadata = _this$props6.metadata,
-          dataURI = _this$props6.dataURI;
+      var _this$props7 = this.props,
+          metadata = _this$props7.metadata,
+          cardPreview = _this$props7.cardPreview;
 
-      var _ref8 = metadata || {},
-          mediaType = _ref8.mediaType;
+      var _ref9 = metadata || {},
+          mediaType = _ref9.mediaType;
 
-      if (mediaType !== 'video' || !dataURI) {
+      if (mediaType !== 'video' || !cardPreview) {
         return false;
       }
 
@@ -465,14 +477,14 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderTitleBox",
     value: function renderTitleBox() {
-      var _this$props7 = this.props,
-          metadata = _this$props7.metadata,
-          titleBoxBgColor = _this$props7.titleBoxBgColor,
-          titleBoxIcon = _this$props7.titleBoxIcon;
+      var _this$props8 = this.props,
+          metadata = _this$props8.metadata,
+          titleBoxBgColor = _this$props8.titleBoxBgColor,
+          titleBoxIcon = _this$props8.titleBoxIcon;
 
-      var _ref9 = metadata || {},
-          name = _ref9.name,
-          createdAt = _ref9.createdAt;
+      var _ref10 = metadata || {},
+          name = _ref10.name,
+          createdAt = _ref10.createdAt;
 
       return !!name && /*#__PURE__*/React.createElement(TitleBox, {
         name: name,
@@ -503,22 +515,20 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderImageRenderer",
     value: function renderImageRenderer() {
-      var _this$props8 = this.props,
-          dataURI = _this$props8.dataURI,
-          _this$props8$metadata = _this$props8.metadata;
-      _this$props8$metadata = _this$props8$metadata === void 0 ? {} : _this$props8$metadata;
-      var _this$props8$metadata2 = _this$props8$metadata.mediaType,
-          mediaType = _this$props8$metadata2 === void 0 ? 'unknown' : _this$props8$metadata2,
-          previewOrientation = _this$props8.previewOrientation,
-          alt = _this$props8.alt,
-          resizeMode = _this$props8.resizeMode,
-          onDisplayImage = _this$props8.onDisplayImage,
-          nativeLazyLoad = _this$props8.nativeLazyLoad,
-          forceSyncDisplay = _this$props8.forceSyncDisplay;
-      return !!dataURI && /*#__PURE__*/React.createElement(ImageRenderer, {
-        dataURI: dataURI,
+      var _this$props9 = this.props,
+          cardPreview = _this$props9.cardPreview,
+          _this$props9$metadata = _this$props9.metadata;
+      _this$props9$metadata = _this$props9$metadata === void 0 ? {} : _this$props9$metadata;
+      var _this$props9$metadata2 = _this$props9$metadata.mediaType,
+          mediaType = _this$props9$metadata2 === void 0 ? 'unknown' : _this$props9$metadata2,
+          alt = _this$props9.alt,
+          resizeMode = _this$props9.resizeMode,
+          onDisplayImage = _this$props9.onDisplayImage,
+          nativeLazyLoad = _this$props9.nativeLazyLoad,
+          forceSyncDisplay = _this$props9.forceSyncDisplay;
+      return !!cardPreview && /*#__PURE__*/React.createElement(ImageRenderer, {
+        cardPreview: cardPreview,
         mediaType: mediaType,
-        previewOrientation: previewOrientation,
         alt: alt,
         resizeMode: resizeMode,
         onDisplayImage: onDisplayImage,
@@ -541,10 +551,10 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
     value: function renderMediaTypeIcon(hasTitleBox, iconMessage) {
       var metadata = this.props.metadata;
 
-      var _ref10 = metadata || {},
-          mediaType = _ref10.mediaType,
-          mimeType = _ref10.mimeType,
-          name = _ref10.name;
+      var _ref11 = metadata || {},
+          mediaType = _ref11.mediaType,
+          mimeType = _ref11.mimeType,
+          name = _ref11.name;
 
       return /*#__PURE__*/React.createElement(IconWrapper, {
         breakpoint: this.breakpoint,
@@ -559,10 +569,10 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderActionsBar",
     value: function renderActionsBar() {
-      var _this$props9 = this.props,
-          disableOverlay = _this$props9.disableOverlay,
-          actions = _this$props9.actions,
-          metadata = _this$props9.metadata;
+      var _this$props10 = this.props,
+          disableOverlay = _this$props10.disableOverlay,
+          actions = _this$props10.actions,
+          metadata = _this$props10.metadata;
       var actionsWithDetails = metadata && actions ? attachDetailsToActions(actions, metadata) : [];
 
       if (disableOverlay || !actions || actions.length === 0) {
@@ -579,7 +589,8 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 
 _defineProperty(CardViewBase, "defaultProps", {
-  appearance: 'auto'
+  appearance: 'auto',
+  mediaCardCursor: MediaCardCursor.NoAction
 });
 
 export var CardView = withAnalyticsEvents({

package/dist/esm/root/inline/loader.js

@@ -32,6 +32,8 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
+    _defineProperty(_assertThisInitialized(_this), "isMounted", false);
+
     _defineProperty(_assertThisInitialized(_this), "state", {
       MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
       ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
@@ -50,13 +52,15 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
+                this.isMounted = true;
+
                 if (this.state.MediaInlineCard) {
-                  _context.next = 16;
+                  _context.next = 17;
                   break;
                 }
 
-                _context.prev = 1;
-                _context.next = 4;
+                _context.prev = 2;
+                _context.next = 5;
                 return Promise.all([import(
                 /* webpackChunkName: "@atlaskit-internal_media-client" */
                 '@atlaskit/media-client'), import(
@@ -65,7 +69,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
                 /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */
                 '../media-card-analytics-error-boundary')]);
 
-              case 4:
+              case 5:
                 _yield$Promise$all = _context.sent;
                 _yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 3);
                 mediaClient = _yield$Promise$all2[0];
@@ -73,23 +77,27 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
                 mediaCardErrorBoundaryModule = _yield$Promise$all2[2];
                 MediaInlineCardLoader.MediaInlineCard = mediaClient.withMediaClient(cardModule.MediaInlineCard);
                 MediaInlineCardLoader.ErrorBoundary = mediaCardErrorBoundaryModule.default;
-                this.setState({
-                  MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
-                  ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
-                });
-                _context.next = 16;
+
+                if (this.isMounted) {
+                  this.setState({
+                    MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
+                    ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
+                  });
+                }
+
+                _context.next = 17;
                 break;
 
-              case 14:
-                _context.prev = 14;
-                _context.t0 = _context["catch"](1);
+              case 15:
+                _context.prev = 15;
+                _context.t0 = _context["catch"](2);
 
-              case 16:
+              case 17:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee, this, [[1, 14]]);
+        }, _callee, this, [[2, 15]]);
       }));
 
       function componentDidMount() {
@@ -98,6 +106,30 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
 
       return componentDidMount;
     }()
+  }, {
+    key: "componentWillUnmount",
+    value: function () {
+      var _componentWillUnmount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                this.isMounted = false;
+
+              case 1:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function componentWillUnmount() {
+        return _componentWillUnmount.apply(this, arguments);
+      }
+
+      return componentWillUnmount;
+    }()
   }, {
     key: "render",
     value: function render() {

package/dist/esm/root/inline/mediaInlineCard.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
-import { injectIntl } from 'react-intl';
+import { injectIntl, IntlProvider, createIntl } from 'react-intl-next';
 import { MediaInlineCardLoadedView, MediaInlineCardLoadingView, MediaInlineCardErroredView, messages } from '@atlaskit/media-ui';
 import { MediaTypeIcon } from '@atlaskit/media-ui/media-type-icon';
 import { MediaViewer } from '@atlaskit/media-viewer';
@@ -63,29 +63,42 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
     return null;
   };
 
+  var renderContent = function renderContent(children) {
+    return intl ? children : /*#__PURE__*/React.createElement(IntlProvider, {
+      locale: "en"
+    }, children);
+  };
+
+  var defaultIntl = createIntl({
+    locale: 'en'
+  });
   useEffect(function () {
-    mediaClient.file.getFileState(identifier.id, {
+    var subscription = mediaClient.file.getFileState(identifier.id, {
       collectionName: identifier.collectionName
     }).subscribe({
       next: function next(fileState) {
         setFileState(fileState);
+        setIsErrored(false);
       },
       error: function error() {
         setIsErrored(true);
       }
     });
+    return function () {
+      subscription.unsubscribe();
+    };
   }, [identifier.collectionName, identifier.id, mediaClient.file]);
 
   if (!fileState) {
     return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
-      message: intl.formatMessage(messages.loading_file),
+      message: (intl || defaultIntl).formatMessage(messages.loading_file),
       isSelected: isSelected
     });
   }
 
   if (isErrored) {
     return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
-      message: intl.formatMessage(messages.couldnt_load_file),
+      message: (intl || defaultIntl).formatMessage(messages.couldnt_load_file),
       isSelected: isSelected
     });
   }
@@ -99,7 +112,7 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
 
   if (fileState.status === 'failed-processing') {
     return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
-      message: intl.formatMessage(messages.couldnt_load_file),
+      message: (intl || defaultIntl).formatMessage(messages.couldnt_load_file),
       isSelected: isSelected
     });
   }
@@ -131,7 +144,7 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
     formattedDate = formatDate(fileState.createdAt, locale);
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+  return renderContent( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
     position: "bottom",
     content: formattedDate,
     tag: "span"
@@ -140,6 +153,8 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
     title: name,
     onClick: onMediaInlineCardClick,
     isSelected: isSelected
-  })), mediaViewer);
+  })), mediaViewer));
 };
-export var MediaInlineCard = injectIntl(MediaInlineCardInternal);
+export var MediaInlineCard = injectIntl(MediaInlineCardInternal, {
+  enforceContext: false
+});