@atlaskit/media-card 70.10.0 → 72.1.0

package/dist/cjs/root/cardView.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CardView = exports.CardViewBase = exports.newFileExperienceClassName = void 0;
+exports.CardView = exports.CardViewBase = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -77,10 +77,12 @@ var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
 var _iconMessage = require("./ui/iconMessage");
 
-var _loadingRateLimited = require("./ui/loadingRateLimited/loadingRateLimited");
-
 var _mediaClient = require("@atlaskit/media-client");
 
+var _cardConstants = require("./card/cardConstants");
+
+var _errors = require("../errors");
+
 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 _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) { (0, _defineProperty2.default)(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; }
@@ -89,9 +91,6 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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 newFileExperienceClassName = 'new-file-experience-wrapper';
-exports.newFileExperienceClassName = newFileExperienceClassName;
-
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
  * `createAnalyticsEvent` prop to satisfy it's Analytics Events needs.
@@ -112,13 +111,33 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      isImageFailedToLoad: false
+      didImageRender: false
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "divRef", /*#__PURE__*/_react.default.createRef());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageLoadError", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageLoad", function () {
+      var onImageLoad = _this.props.onImageLoad; // We render the icon & icon message always, even if there is dataURI 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
+      // than the opposite case. Therefore we prefer to hide the icon instead show when the image fails,
+      // for a smoother transition
+
       _this.setState({
-        isImageFailedToLoad: true
+        didImageRender: true
       });
+
+      onImageLoad && onImageLoad();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageError", function () {
+      var onImageError = _this.props.onImageError;
+
+      _this.setState({
+        didImageRender: false
+      });
+
+      onImageError && onImageError();
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "saveElementWidth", function () {
       var dimensions = _this.props.dimensions;
@@ -152,26 +171,22 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           dataURI = _this$props.dataURI;
 
       var _ref = metadata || {},
-          mediaType = _ref.mediaType,
           name = _ref.name;
 
       var shouldUsePointerCursor = status !== 'error' && status !== 'failed-processing';
-      var shouldDisplayBackground = !dataURI || !disableOverlay;
+      var shouldDisplayBackground = !dataURI || !disableOverlay || status === 'error' || status === 'failed-processing';
       var isPlayButtonClickable = !!(_this.shouldRenderPlayButton() && disableOverlay);
-      var isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Make tooltip optional for media singles - images, videos.
-      // Intention is to show full file name when it's truncate in titlebox,
-      // and to hide it when no titlebox exists.
+      var isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Disable tooltip for Media Single
 
-      var shouldDisplayTooltip = !!name && !disableOverlay;
+      var shouldDisplayTooltip = !disableOverlay;
       return /*#__PURE__*/_react.default.createElement(_styled2.NewFileExperienceWrapper, {
-        className: newFileExperienceClassName,
+        className: _cardConstants.newFileExperienceClassName,
         "data-testid": testId || 'media-card-view',
         dimensions: dimensions,
         appearance: appearance,
         onClick: onClick,
         onMouseEnter: onMouseEnter,
         innerRef: _this.divRef,
-        mediaType: mediaType,
         breakpoint: _this.breakpoint,
         shouldUsePointerCursor: shouldUsePointerCursor,
         disableOverlay: !!disableOverlay,
@@ -230,7 +245,9 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
         actions: actionsWithDetails,
         disableOverlay: disableOverlay,
         previewOrientation: previewOrientation,
-        alt: alt
+        alt: alt,
+        onImageLoad: _this.onImageLoad,
+        onImageError: _this.onImageError
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getRenderConfigByStatus", function () {
@@ -240,21 +257,21 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           metadata = _this$props3.metadata,
           disableOverlay = _this$props3.disableOverlay,
           error = _this$props3.error,
-          selectable = _this$props3.selectable;
+          selectable = _this$props3.selectable,
+          disableAnimation = _this$props3.disableAnimation;
 
       var _ref3 = metadata || {},
           name = _ref3.name,
           mediaType = _ref3.mediaType;
 
-      var isImageFailedToLoad = _this.state.isImageFailedToLoad;
+      var didImageRender = _this.state.didImageRender;
       var isZeroSize = !!(metadata && metadata.size === 0);
       var defaultConfig = {
-        renderTypeIcon: isImageFailedToLoad || !dataURI,
-        renderImageRenderer: !!dataURI && !isImageFailedToLoad,
+        renderTypeIcon: !didImageRender,
+        renderImageRenderer: !!dataURI,
         renderPlayButton: !!dataURI && mediaType === 'video',
         renderBlanket: !disableOverlay,
-        renderTitleBox: !!name && !isImageFailedToLoad && !disableOverlay,
-        renderFailedTitleBox: !!isImageFailedToLoad,
+        renderTitleBox: !disableOverlay && !!name,
         renderTickBox: !disableOverlay && !!selectable
       };
 
@@ -267,45 +284,62 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           });
 
         case 'processing':
+        case 'loading-preview':
           return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-            iconMessage: (isImageFailedToLoad || !dataURI) && !isZeroSize ? /*#__PURE__*/_react.default.createElement(_iconMessage.CreatingPreview, null) : undefined
+            iconMessage: !didImageRender && !isZeroSize ? /*#__PURE__*/_react.default.createElement(_iconMessage.CreatingPreview, {
+              disableAnimation: disableAnimation
+            }) : undefined
           });
 
         case 'complete':
-          return _objectSpread({}, defaultConfig);
+          return defaultConfig;
 
         case 'error':
-          if (error && (0, _mediaClient.isPollingError)(error)) {
-            return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-              renderTitleBox: !!name,
-              renderFailedTitleBox: false,
-              iconMessage: !!metadata && !isZeroSize ? /*#__PURE__*/_react.default.createElement(_iconMessage.PreviewCurrentlyUnavailable, null) : undefined
-            });
-          } else if ((0, _mediaClient.isRateLimitedError)(error) && !disableOverlay) {
-            return {
-              renderTypeIcon: !!metadata && (isImageFailedToLoad || !dataURI),
-              renderTitleBox: !!metadata,
-              iconMessage: !!metadata ? /*#__PURE__*/_react.default.createElement(_iconMessage.RateLimited, null) : undefined,
-              renderLoadingRateLimited: !metadata
-            };
+        case 'failed-processing':
+          var baseErrorConfig = _objectSpread(_objectSpread({}, defaultConfig), {}, {
+            renderTypeIcon: true,
+            renderImageRenderer: false,
+            renderTitleBox: false,
+            renderPlayButton: false
+          });
+
+          var iconMessage;
+          var customTitleMessage;
+
+          var _ref4 = error || {},
+              secondaryError = _ref4.secondaryError;
+
+          if ((0, _mediaClient.isRateLimitedError)(secondaryError) || (0, _mediaClient.isPollingError)(secondaryError)) {
+            iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage.PreviewCurrentlyUnavailable, null);
+          } else if ((0, _errors.isUploadError)(error)) {
+            iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage.FailedToUpload, null);
+            customTitleMessage = _mediaUi.messages.failed_to_upload;
+          } else if (!metadata) {
+            iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage.FailedToLoad, null);
           } else {
-            return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-              renderTitleBox: defaultConfig.renderTitleBox && !!dataURI,
-              renderFailedTitleBox: !!isImageFailedToLoad || !dataURI
+            iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage.PreviewUnavailable, null);
+          }
+
+          if (!disableOverlay) {
+            var renderFailedTitleBox = !name || !!customTitleMessage;
+            return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
+              renderTitleBox: !!name && !customTitleMessage,
+              renderFailedTitleBox: renderFailedTitleBox,
+              iconMessage: !renderFailedTitleBox ? iconMessage : undefined,
+              customTitleMessage: customTitleMessage
             });
           }
 
-        case 'failed-processing':
-          return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-            renderFailedTitleBox: !!isImageFailedToLoad || !dataURI && !metadata,
-            iconMessage: !!metadata && !isZeroSize ? /*#__PURE__*/_react.default.createElement(_iconMessage.PreviewUnavailable, null) : undefined
+          return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
+            iconMessage: iconMessage
           });
 
         case 'loading':
         default:
           return _objectSpread(_objectSpread({}, defaultConfig), {}, {
+            renderPlayButton: false,
             renderTypeIcon: false,
-            renderSpinner: true
+            renderSpinner: !didImageRender
           });
       }
     });
@@ -322,7 +356,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           renderFailedTitleBox = _this$getRenderConfig.renderFailedTitleBox,
           renderTickBox = _this$getRenderConfig.renderTickBox,
           isFixedBlanket = _this$getRenderConfig.isFixedBlanket,
-          renderLoadingRateLimited = _this$getRenderConfig.renderLoadingRateLimited;
+          customTitleMessage = _this$getRenderConfig.customTitleMessage;
 
       var _this$props4 = _this.props,
           progress = _this$props4.progress,
@@ -330,8 +364,8 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           status = _this$props4.status,
           metadata = _this$props4.metadata;
 
-      var _ref4 = metadata || {},
-          name = _ref4.name;
+      var _ref5 = metadata || {},
+          name = _ref5.name;
 
       var hasTitleBox = !!renderTitleBox || !!renderFailedTitleBox;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled2.CardImageContainer, {
@@ -341,7 +375,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
         "data-test-status": status,
         "data-test-progress": progress,
         "data-test-selected": selected ? true : undefined
-      }, renderTypeIcon && _this.renderMediaTypeIcon(hasTitleBox, iconMessage), renderSpinner && _this.renderSpinner(hasTitleBox), renderImageRenderer && _this.renderImageRenderer(), renderPlayButton && _this.renderPlayButton(hasTitleBox), renderBlanket && _this.renderBlanket(!!isFixedBlanket), renderTitleBox && _this.renderTitleBox(), renderFailedTitleBox && _this.renderFailedTitleBox(), renderProgressBar && _this.renderProgressBar(!renderTitleBox), renderLoadingRateLimited && /*#__PURE__*/_react.default.createElement(_loadingRateLimited.LoadingRateLimited, null), renderTickBox && _this.renderTickBox()), _this.renderActionsBar());
+      }, renderTypeIcon && _this.renderMediaTypeIcon(hasTitleBox, iconMessage), renderSpinner && _this.renderSpinner(hasTitleBox), renderImageRenderer && _this.renderImageRenderer(), renderPlayButton && _this.renderPlayButton(hasTitleBox), renderBlanket && _this.renderBlanket(!!isFixedBlanket), renderTitleBox && _this.renderTitleBox(), renderFailedTitleBox && _this.renderFailedTitleBox(customTitleMessage), renderProgressBar && _this.renderProgressBar(!hasTitleBox), renderTickBox && _this.renderTickBox()), _this.renderActionsBar());
     });
     return _this;
   }
@@ -355,15 +389,16 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(_ref5) {
-      var prevDataURI = _ref5.dataURI;
-      var dataURI = this.props.dataURI;
-
-      if (prevDataURI !== dataURI) {
-        this.setState({
-          isImageFailedToLoad: false
-        });
-      }
+    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.
+      // as this method could be triggered after onImageLoad callback,
+      // falling on a race condition
+
+      prevDataURI && !dataURI && this.setState({
+        didImageRender: false
+      });
     }
   }, {
     key: "width",
@@ -376,10 +411,10 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
         return elementWidth;
       }
 
-      var _ref6 = this.props.dimensions || {
+      var _ref7 = this.props.dimensions || {
         width: undefined
       },
-          width = _ref6.width;
+          width = _ref7.width;
 
       if (!width) {
         return _cardDimensions.defaultImageCardDimensions.width;
@@ -436,8 +471,8 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           metadata = _this$props6.metadata,
           dataURI = _this$props6.dataURI;
 
-      var _ref7 = metadata || {},
-          mediaType = _ref7.mediaType;
+      var _ref8 = metadata || {},
+          mediaType = _ref8.mediaType;
 
       if (mediaType !== 'video' || !dataURI) {
         return false;
@@ -470,9 +505,9 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           titleBoxBgColor = _this$props7.titleBoxBgColor,
           titleBoxIcon = _this$props7.titleBoxIcon;
 
-      var _ref8 = metadata || {},
-          name = _ref8.name,
-          createdAt = _ref8.createdAt;
+      var _ref9 = metadata || {},
+          name = _ref9.name,
+          createdAt = _ref9.createdAt;
 
       return !!name && /*#__PURE__*/_react.default.createElement(_titleBox.TitleBox, {
         name: name,
@@ -484,9 +519,10 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "renderFailedTitleBox",
-    value: function renderFailedTitleBox() {
+    value: function renderFailedTitleBox(customMessage) {
       return /*#__PURE__*/_react.default.createElement(_failedTitleBox.FailedTitleBox, {
-        breakpoint: this.breakpoint
+        breakpoint: this.breakpoint,
+        customMessage: customMessage
       });
     }
   }, {
@@ -512,16 +548,19 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           alt = _this$props8.alt,
           resizeMode = _this$props8.resizeMode,
           onDisplayImage = _this$props8.onDisplayImage,
-          mediaItemType = _this$props8.mediaItemType;
+          nativeLazyLoad = _this$props8.nativeLazyLoad,
+          forceSyncDisplay = _this$props8.forceSyncDisplay;
       return !!dataURI && /*#__PURE__*/_react.default.createElement(_imageRenderer.ImageRenderer, {
         dataURI: dataURI,
         mediaType: mediaType,
-        mediaItemType: mediaItemType,
         previewOrientation: previewOrientation,
         alt: alt,
         resizeMode: resizeMode,
         onDisplayImage: onDisplayImage,
-        onImageError: this.onImageLoadError
+        onImageLoad: this.onImageLoad,
+        onImageError: this.onImageError,
+        nativeLazyLoad: nativeLazyLoad,
+        forceSyncDisplay: forceSyncDisplay
       });
     }
   }, {
@@ -537,10 +576,10 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     value: function renderMediaTypeIcon(hasTitleBox, iconMessage) {
       var metadata = this.props.metadata;
 
-      var _ref9 = metadata || {},
-          mediaType = _ref9.mediaType,
-          mimeType = _ref9.mimeType,
-          name = _ref9.name;
+      var _ref10 = metadata || {},
+          mediaType = _ref10.mediaType,
+          mimeType = _ref10.mimeType,
+          name = _ref10.name;
 
       return /*#__PURE__*/_react.default.createElement(_styled4.IconWrapper, {
         breakpoint: this.breakpoint,

package/dist/cjs/root/index.js

@@ -11,5 +11,13 @@ Object.defineProperty(exports, "Card", {
     return _cardLoader.default;
   }
 });
+Object.defineProperty(exports, "MediaInlineCard", {
+  enumerable: true,
+  get: function get() {
+    return _loader.default;
+  }
+});
+
+var _cardLoader = _interopRequireDefault(require("./card/cardLoader"));
 
-var _cardLoader = _interopRequireDefault(require("./card/cardLoader"));
+var _loader = _interopRequireDefault(require("./inline/loader"));

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

@@ -41,15 +41,15 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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 InlineMediaCardLoader = /*#__PURE__*/function (_React$PureComponent) {
-  (0, _inherits2.default)(InlineMediaCardLoader, _React$PureComponent);
+var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(MediaInlineCardLoader, _React$PureComponent);
 
-  var _super = _createSuper(InlineMediaCardLoader);
+  var _super = _createSuper(MediaInlineCardLoader);
 
-  function InlineMediaCardLoader() {
+  function MediaInlineCardLoader() {
     var _this;
 
-    (0, _classCallCheck2.default)(this, InlineMediaCardLoader);
+    (0, _classCallCheck2.default)(this, MediaInlineCardLoader);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -57,12 +57,13 @@ var InlineMediaCardLoader = /*#__PURE__*/function (_React$PureComponent) {
 
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      InlineMediaCard: InlineMediaCardLoader.InlineMediaCard
+      MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
+      ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
     });
     return _this;
   }
 
-  (0, _createClass2.default)(InlineMediaCardLoader, [{
+  (0, _createClass2.default)(MediaInlineCardLoader, [{
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
@@ -72,7 +73,7 @@ var InlineMediaCardLoader = /*#__PURE__*/function (_React$PureComponent) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                if (this.state.InlineMediaCard) {
+                if (this.state.MediaInlineCard) {
                   _context.next = 16;
                   break;
                 }
@@ -82,7 +83,7 @@ var InlineMediaCardLoader = /*#__PURE__*/function (_React$PureComponent) {
                 return Promise.all([Promise.resolve().then(function () {
                   return _interopRequireWildcard(require('@atlaskit/media-client'));
                 }), Promise.resolve().then(function () {
-                  return _interopRequireWildcard(require('./inlineMediaCard'));
+                  return _interopRequireWildcard(require('./mediaInlineCard'));
                 }), Promise.resolve().then(function () {
                   return _interopRequireWildcard(require('../media-card-analytics-error-boundary'));
                 })]);
@@ -93,11 +94,11 @@ var InlineMediaCardLoader = /*#__PURE__*/function (_React$PureComponent) {
                 mediaClient = _yield$Promise$all2[0];
                 cardModule = _yield$Promise$all2[1];
                 mediaCardErrorBoundaryModule = _yield$Promise$all2[2];
-                InlineMediaCardLoader.InlineMediaCard = mediaClient.withMediaClient(cardModule.InlineMediaCard);
-                InlineMediaCardLoader.ErrorBoundary = mediaCardErrorBoundaryModule.default;
+                MediaInlineCardLoader.MediaInlineCard = mediaClient.withMediaClient(cardModule.MediaInlineCard);
+                MediaInlineCardLoader.ErrorBoundary = mediaCardErrorBoundaryModule.default;
                 this.setState({
-                  InlineMediaCard: InlineMediaCardLoader.InlineMediaCard,
-                  ErrorBoundary: InlineMediaCardLoader.ErrorBoundary
+                  MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
+                  ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
                 });
                 _context.next = 16;
                 break;
@@ -124,20 +125,20 @@ var InlineMediaCardLoader = /*#__PURE__*/function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var _this$state = this.state,
-          InlineMediaCard = _this$state.InlineMediaCard,
+          MediaInlineCard = _this$state.MediaInlineCard,
           ErrorBoundary = _this$state.ErrorBoundary;
 
-      if (!InlineMediaCard || !ErrorBoundary) {
-        return /*#__PURE__*/_react.default.createElement(_mediaUi.InlineCardResolvingView, {
-          url: ""
+      if (!MediaInlineCard || !ErrorBoundary) {
+        return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardLoadingView, {
+          message: ""
         });
       }
 
-      return /*#__PURE__*/_react.default.createElement(ErrorBoundary, null, /*#__PURE__*/_react.default.createElement(InlineMediaCard, this.props));
+      return /*#__PURE__*/_react.default.createElement(ErrorBoundary, null, /*#__PURE__*/_react.default.createElement(MediaInlineCard, this.props));
     }
   }]);
-  return InlineMediaCardLoader;
+  return MediaInlineCardLoader;
 }(_react.default.PureComponent);
 
-exports.default = InlineMediaCardLoader;
-(0, _defineProperty2.default)(InlineMediaCardLoader, "displayName", 'InlineMediaCardLoader');
+exports.default = MediaInlineCardLoader;
+(0, _defineProperty2.default)(MediaInlineCardLoader, "displayName", 'MediaInlineCardLoader');

package/dist/cjs/root/inline/{inlineMediaCard.js → mediaInlineCard.js}

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InlineMediaCard = exports.InlineMediaCardInternal = void 0;
+exports.MediaInlineCard = exports.MediaInlineCardInternal = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -23,12 +23,16 @@ var _mediaTypeIcon = require("@atlaskit/media-ui/media-type-icon");
 
 var _mediaViewer = require("@atlaskit/media-viewer");
 
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+
+var _formatDate = require("@atlaskit/media-ui/formatDate");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 // UI component which renders an inline link in the appropiate state based on a media file
-var InlineMediaCardInternal = function InlineMediaCardInternal(_ref) {
+var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
   var mediaClient = _ref.mediaClient,
       identifier = _ref.identifier,
       shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
@@ -44,10 +48,15 @@ var InlineMediaCardInternal = function InlineMediaCardInternal(_ref) {
 
   var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      isMediaViewerVisible = _useState4[0],
-      setMediaViewerVisible = _useState4[1];
+      isErrored = _useState4[0],
+      setIsErrored = _useState4[1];
 
-  var onInlineCardClick = function onInlineCardClick(event) {
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      isMediaViewerVisible = _useState6[0],
+      setMediaViewerVisible = _useState6[1];
+
+  var onMediaInlineCardClick = function onMediaInlineCardClick(event) {
     if (shouldOpenMediaViewer) {
       setMediaViewerVisible(true);
     }
@@ -79,27 +88,50 @@ var InlineMediaCardInternal = function InlineMediaCardInternal(_ref) {
   };
 
   (0, _react.useEffect)(function () {
-    // [EDM-1948] TODO: use mediaClient.file.getFileState()
-    // [EDM-1948] TODO: handle error here
-    mediaClient.file.getCurrentState(identifier.id, {
+    mediaClient.file.getFileState(identifier.id, {
       collectionName: identifier.collectionName
-    }).then(function (fileState) {
-      setFileState(fileState);
+    }).subscribe({
+      next: function next(fileState) {
+        setFileState(fileState);
+      },
+      error: function error() {
+        setIsErrored(true);
+      }
     });
   }, [identifier.collectionName, identifier.id, mediaClient.file]);
 
   if (!fileState) {
-    return /*#__PURE__*/_react.default.createElement(_mediaUi.InlineCardResolvingView, {
-      url: intl.formatMessage(_mediaUi.messages.loading_file),
-      titleTextColor: "black",
-      withoutHover: true
+    return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardLoadingView, {
+      message: intl.formatMessage(_mediaUi.messages.loading_file),
+      isSelected: isSelected
+    });
+  }
+
+  if (isErrored) {
+    return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
+      message: intl.formatMessage(_mediaUi.messages.couldnt_load_file),
+      isSelected: isSelected
     });
   }
 
   if (fileState.status === 'error') {
-    return /*#__PURE__*/_react.default.createElement(_mediaUi.InlineCardErroredView, {
-      url: "",
-      message: fileState.message || ''
+    return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
+      message: fileState.message || '',
+      isSelected: isSelected
+    });
+  }
+
+  if (fileState.status === 'failed-processing') {
+    return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
+      message: intl.formatMessage(_mediaUi.messages.couldnt_load_file),
+      isSelected: isSelected
+    });
+  }
+
+  if (fileState.status === 'uploading') {
+    return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardLoadingView, {
+      message: fileState.name,
+      isSelected: isSelected
     });
   }
 
@@ -107,21 +139,36 @@ var InlineMediaCardInternal = function InlineMediaCardInternal(_ref) {
       name = fileState.name;
 
   var linkIcon = /*#__PURE__*/_react.default.createElement(_mediaTypeIcon.MediaTypeIcon, {
-    testId: 'inline-media-card-file-type-icon',
+    testId: 'media-inline-card-file-type-icon',
     size: "small",
     type: mediaType
   });
 
-  var mediaViewer = renderMediaViewer(); // [EDM-1948] TODO: add Tooltip
+  var mediaViewer = renderMediaViewer();
+  var formattedDate;
+
+  if (fileState.createdAt) {
+    var _ref2 = intl || {
+      locale: 'en'
+    },
+        _ref2$locale = _ref2.locale,
+        locale = _ref2$locale === void 0 ? 'en' : _ref2$locale;
+
+    formattedDate = (0, _formatDate.formatDate)(fileState.createdAt, locale);
+  }
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_mediaUi.InlineCardResolvedView, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    position: "bottom",
+    content: formattedDate,
+    tag: "span"
+  }, /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardLoadedView, {
     icon: linkIcon,
     title: name,
-    onClick: onInlineCardClick,
+    onClick: onMediaInlineCardClick,
     isSelected: isSelected
-  }), mediaViewer);
+  })), mediaViewer);
 };
 
-exports.InlineMediaCardInternal = InlineMediaCardInternal;
-var InlineMediaCard = (0, _reactIntl.injectIntl)(InlineMediaCardInternal);
-exports.InlineMediaCard = InlineMediaCard;
+exports.MediaInlineCardInternal = MediaInlineCardInternal;
+var MediaInlineCard = (0, _reactIntl.injectIntl)(MediaInlineCardInternal);
+exports.MediaInlineCard = MediaInlineCard;