@atlaskit/media-card 70.9.0 → 72.0.0

package/dist/esm/root/cardView.js

@@ -27,8 +27,9 @@ import { Wrapper } from './styled';
 import { createAndFireMediaCardEvent } from '../utils/analytics';
 import { attachDetailsToActions } from '../actions';
 import { getErrorMessage } from '../utils/getErrorMessage';
-import { toHumanReadableMediaSize } from '@atlaskit/media-ui';
-import { NewFileExperienceWrapper, CardImageContainer, calcBreakpointSize } from './ui/styled';
+import { toHumanReadableMediaSize, messages } from '@atlaskit/media-ui';
+import { NewFileExperienceWrapper } from './ui/styled';
+import { CardImageContainer, calcBreakpointSize } from './ui/styledSSR';
 import { ImageRenderer } from './ui/imageRenderer/imageRenderer';
 import { TitleBox } from './ui/titleBox/titleBox';
 import { FailedTitleBox } from './ui/titleBox/failedTitleBox';
@@ -41,10 +42,10 @@ import Tooltip from '@atlaskit/tooltip';
 import { IconWrapper } from './ui/iconWrapper/styled';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import SpinnerIcon from '@atlaskit/spinner';
-import { PreviewUnavailable, CreatingPreview, RateLimited, PreviewCurrentlyUnavailable } from './ui/iconMessage';
-import { LoadingRateLimited } from './ui/loadingRateLimited/loadingRateLimited';
+import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUnavailable, FailedToLoad } from './ui/iconMessage';
 import { isRateLimitedError, isPollingError } from '@atlaskit/media-client';
-export var newFileExperienceClassName = 'new-file-experience-wrapper';
+import { newFileExperienceClassName } from './card/cardConstants';
+import { isUploadError } from '../errors';
 
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
@@ -67,15 +68,36 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "state", {
-      isImageFailedToLoad: false
+      didImageRender: false
     });
 
     _defineProperty(_assertThisInitialized(_this), "divRef", /*#__PURE__*/React.createRef());
 
-    _defineProperty(_assertThisInitialized(_this), "onImageLoadError", function () {
+    _defineProperty(_assertThisInitialized(_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({
+        didImageRender: true
+      });
+
+      onImageLoad && onImageLoad();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onImageError", function () {
+      var onImageError = _this.props.onImageError;
+
       _this.setState({
-        isImageFailedToLoad: true
+        didImageRender: false
       });
+
+      onImageError && onImageError();
     });
 
     _defineProperty(_assertThisInitialized(_this), "saveElementWidth", function () {
@@ -111,11 +133,10 @@ export 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,
@@ -130,7 +151,6 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
         onClick: onClick,
         onMouseEnter: onMouseEnter,
         innerRef: _this.divRef,
-        mediaType: mediaType,
         breakpoint: _this.breakpoint,
         shouldUsePointerCursor: shouldUsePointerCursor,
         disableOverlay: !!disableOverlay,
@@ -190,7 +210,9 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
         actions: actionsWithDetails,
         disableOverlay: disableOverlay,
         previewOrientation: previewOrientation,
-        alt: alt
+        alt: alt,
+        onImageLoad: _this.onImageLoad,
+        onImageError: _this.onImageError
       });
     });
 
@@ -201,21 +223,21 @@ export 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
       };
 
@@ -228,45 +250,73 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
           });
 
         case 'processing':
+        case 'loading-preview':
           return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-            iconMessage: (isImageFailedToLoad || !dataURI) && !isZeroSize ? /*#__PURE__*/React.createElement(CreatingPreview, null) : undefined
+            iconMessage: !didImageRender && !isZeroSize ? /*#__PURE__*/React.createElement(CreatingPreview, {
+              disableAnimation: disableAnimation
+            }) : undefined
           });
 
         case 'complete':
-          return _objectSpread({}, defaultConfig);
+          return defaultConfig;
 
         case 'error':
-          if (error && isPollingError(error)) {
-            return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-              renderTitleBox: !!name,
-              renderFailedTitleBox: false,
-              iconMessage: !!metadata && !isZeroSize ? /*#__PURE__*/React.createElement(PreviewCurrentlyUnavailable, null) : undefined
+        case 'failed-processing':
+          var baseErrorConfig = _objectSpread(_objectSpread({}, defaultConfig), {}, {
+            renderTypeIcon: true,
+            renderImageRenderer: false,
+            renderTitleBox: false,
+            renderPlayButton: false
+          });
+
+          var iconMessage;
+
+          if (!!metadata) {
+            if (error) {
+              var secondaryError = error.secondaryError;
+
+              if (isRateLimitedError(secondaryError) || secondaryError && isPollingError(secondaryError)) {
+                iconMessage = /*#__PURE__*/React.createElement(PreviewCurrentlyUnavailable, null);
+              }
+            } else if (!isZeroSize) {
+              iconMessage = /*#__PURE__*/React.createElement(PreviewUnavailable, null);
+            }
+          } else if (!!disableOverlay) {
+            iconMessage = /*#__PURE__*/React.createElement(FailedToLoad, null);
+          }
+
+          if (error && isUploadError(error)) {
+            if (!disableOverlay) {
+              return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
+                renderFailedTitleBox: true,
+                customTitleMessage: messages.failed_to_upload
+              });
+            }
+
+            return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
+              renderTitleBox: !metadata && !!name,
+              iconMessage: /*#__PURE__*/React.createElement(FailedToUpload, null)
             });
-          } else if (isRateLimitedError(error) && !disableOverlay) {
-            return {
-              renderTypeIcon: !!metadata && (isImageFailedToLoad || !dataURI),
-              renderTitleBox: !!metadata,
-              iconMessage: !!metadata ? /*#__PURE__*/React.createElement(RateLimited, null) : undefined,
-              renderLoadingRateLimited: !metadata
-            };
-          } else {
-            return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-              renderTitleBox: defaultConfig.renderTitleBox && !!dataURI,
-              renderFailedTitleBox: !!isImageFailedToLoad || !dataURI
+          }
+
+          if (!disableOverlay) {
+            return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
+              renderTitleBox: !!name,
+              renderFailedTitleBox: !metadata,
+              iconMessage: iconMessage
             });
           }
 
-        case 'failed-processing':
-          return _objectSpread(_objectSpread({}, defaultConfig), {}, {
-            renderFailedTitleBox: !!isImageFailedToLoad || !dataURI && !metadata,
-            iconMessage: !!metadata && !isZeroSize ? /*#__PURE__*/React.createElement(PreviewUnavailable, null) : undefined
+          return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
+            iconMessage: iconMessage
           });
 
         case 'loading':
         default:
           return _objectSpread(_objectSpread({}, defaultConfig), {}, {
+            renderPlayButton: false,
             renderTypeIcon: false,
-            renderSpinner: true
+            renderSpinner: !didImageRender
           });
       }
     });
@@ -284,7 +334,7 @@ export 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,
@@ -303,7 +353,7 @@ export 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.createElement(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;
@@ -320,13 +370,14 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(_ref5) {
       var prevDataURI = _ref5.dataURI;
-      var dataURI = this.props.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
 
-      if (prevDataURI !== dataURI) {
-        this.setState({
-          isImageFailedToLoad: false
-        });
-      }
+      prevDataURI && !dataURI && this.setState({
+        didImageRender: false
+      });
     }
   }, {
     key: "width",
@@ -447,9 +498,10 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "renderFailedTitleBox",
-    value: function renderFailedTitleBox() {
+    value: function renderFailedTitleBox(customMessage) {
       return /*#__PURE__*/React.createElement(FailedTitleBox, {
-        breakpoint: this.breakpoint
+        breakpoint: this.breakpoint,
+        customMessage: customMessage
       });
     }
   }, {
@@ -484,7 +536,8 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
         alt: alt,
         resizeMode: resizeMode,
         onDisplayImage: onDisplayImage,
-        onImageError: this.onImageLoadError
+        onImageLoad: this.onImageLoad,
+        onImageError: this.onImageError
       });
     }
   }, {

package/dist/esm/root/index.js

@@ -1 +1,2 @@
-export { default as Card } from './card/cardLoader';
+export { default as Card } from './card/cardLoader';
+export { default as MediaInlineCard } from './inline/loader';

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

@@ -14,17 +14,17 @@ 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; } }
 
 import React from 'react';
-import { InlineCardResolvingView } from '@atlaskit/media-ui';
+import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
 
-var InlineMediaCardLoader = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(InlineMediaCardLoader, _React$PureComponent);
+var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(MediaInlineCardLoader, _React$PureComponent);
 
-  var _super = _createSuper(InlineMediaCardLoader);
+  var _super = _createSuper(MediaInlineCardLoader);
 
-  function InlineMediaCardLoader() {
+  function MediaInlineCardLoader() {
     var _this;
 
-    _classCallCheck(this, InlineMediaCardLoader);
+    _classCallCheck(this, MediaInlineCardLoader);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -33,13 +33,14 @@ var InlineMediaCardLoader = /*#__PURE__*/function (_React$PureComponent) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "state", {
-      InlineMediaCard: InlineMediaCardLoader.InlineMediaCard
+      MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
+      ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
     });
 
     return _this;
   }
 
-  _createClass(InlineMediaCardLoader, [{
+  _createClass(MediaInlineCardLoader, [{
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
@@ -49,7 +50,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;
                 }
@@ -60,7 +61,7 @@ var InlineMediaCardLoader = /*#__PURE__*/function (_React$PureComponent) {
                 /* webpackChunkName: "@atlaskit-internal_media-client" */
                 '@atlaskit/media-client'), import(
                 /* webpackChunkName: "@atlaskit-internal_inline-media-card" */
-                './inlineMediaCard'), import(
+                './mediaInlineCard'), import(
                 /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */
                 '../media-card-analytics-error-boundary')]);
 
@@ -70,11 +71,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;
@@ -101,22 +102,22 @@ 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.createElement(InlineCardResolvingView, {
-          url: ""
+      if (!MediaInlineCard || !ErrorBoundary) {
+        return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
+          message: ""
         });
       }
 
-      return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(InlineMediaCard, this.props));
+      return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(MediaInlineCard, this.props));
     }
   }]);
 
-  return InlineMediaCardLoader;
+  return MediaInlineCardLoader;
 }(React.PureComponent);
 
-_defineProperty(InlineMediaCardLoader, "displayName", 'InlineMediaCardLoader');
+_defineProperty(MediaInlineCardLoader, "displayName", 'MediaInlineCardLoader');
 
-export { InlineMediaCardLoader as default };
+export { MediaInlineCardLoader as default };

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

@@ -2,11 +2,13 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { injectIntl } from 'react-intl';
-import { InlineCardResolvedView, InlineCardResolvingView, InlineCardErroredView, messages } from '@atlaskit/media-ui';
+import { MediaInlineCardLoadedView, MediaInlineCardLoadingView, MediaInlineCardErroredView, messages } from '@atlaskit/media-ui';
 import { MediaTypeIcon } from '@atlaskit/media-ui/media-type-icon';
 import { MediaViewer } from '@atlaskit/media-viewer';
+import Tooltip from '@atlaskit/tooltip';
+import { formatDate } from '@atlaskit/media-ui/formatDate';
 // UI component which renders an inline link in the appropiate state based on a media file
-export var InlineMediaCardInternal = function InlineMediaCardInternal(_ref) {
+export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
   var mediaClient = _ref.mediaClient,
       identifier = _ref.identifier,
       shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
@@ -22,10 +24,15 @@ export var InlineMediaCardInternal = function InlineMediaCardInternal(_ref) {
 
   var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      isMediaViewerVisible = _useState4[0],
-      setMediaViewerVisible = _useState4[1];
+      isErrored = _useState4[0],
+      setIsErrored = _useState4[1];
 
-  var onInlineCardClick = function onInlineCardClick(event) {
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isMediaViewerVisible = _useState6[0],
+      setMediaViewerVisible = _useState6[1];
+
+  var onMediaInlineCardClick = function onMediaInlineCardClick(event) {
     if (shouldOpenMediaViewer) {
       setMediaViewerVisible(true);
     }
@@ -57,44 +64,77 @@ export var InlineMediaCardInternal = function InlineMediaCardInternal(_ref) {
   };
 
   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.createElement(InlineCardResolvingView, {
-      url: intl.formatMessage(messages.loading_file),
-      titleTextColor: "black",
-      withoutHover: true
+    return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
+      message: intl.formatMessage(messages.loading_file)
+    });
+  }
+
+  if (isErrored) {
+    return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
+      message: intl.formatMessage(messages.couldnt_load_file)
     });
   }
 
   if (fileState.status === 'error') {
-    return /*#__PURE__*/React.createElement(InlineCardErroredView, {
-      url: "",
+    return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
       message: fileState.message || ''
     });
   }
 
+  if (fileState.status === 'failed-processing') {
+    return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
+      message: intl.formatMessage(messages.couldnt_load_file)
+    });
+  }
+
+  if (fileState.status === 'uploading') {
+    return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
+      message: fileState.name
+    });
+  }
+
   var mediaType = fileState.mediaType,
       name = fileState.name;
   var linkIcon = /*#__PURE__*/React.createElement(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 = formatDate(fileState.createdAt, locale);
+  }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InlineCardResolvedView, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+    position: "bottom",
+    content: formattedDate,
+    tag: "span"
+  }, /*#__PURE__*/React.createElement(MediaInlineCardLoadedView, {
     icon: linkIcon,
     title: name,
-    onClick: onInlineCardClick,
+    onClick: onMediaInlineCardClick,
     isSelected: isSelected
-  }), mediaViewer);
+  })), mediaViewer);
 };
-export var InlineMediaCard = injectIntl(InlineMediaCardInternal);
+export var MediaInlineCard = injectIntl(MediaInlineCardInternal);

package/dist/esm/root/inlinePlayer.js

@@ -20,8 +20,6 @@ import { CustomMediaPlayer, InactivityDetector } from '@atlaskit/media-ui';
 import { InlinePlayerWrapper } from './styled';
 import { defaultImageCardDimensions } from '..';
 import { CardLoading } from '../utils/lightCards/cardLoading';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { createAndFireMediaCardEvent } from '../utils/analytics';
 export var inlinePlayerClassName = 'media-card-inline-player';
 export var getPreferredVideoArtifact = function getPreferredVideoArtifact(fileState) {
   if (fileState.status === 'processed' || fileState.status === 'processing') {
@@ -278,10 +276,11 @@ export var InlinePlayerBase = /*#__PURE__*/function (_Component) {
         onClick: onClick,
         innerRef: forwardRef || undefined,
         dimensions: dimensions
-      }, /*#__PURE__*/React.createElement(InactivityDetector, null, function () {
+      }, /*#__PURE__*/React.createElement(InactivityDetector, null, function (checkMouseMovement) {
         return /*#__PURE__*/React.createElement(CustomMediaPlayer, {
           type: "video",
           src: fileSrc,
+          fileId: identifier.id,
           isAutoPlay: true,
           isHDAvailable: false,
           onDownloadClick: _this3.onDownloadClick,
@@ -289,7 +288,8 @@ export var InlinePlayerBase = /*#__PURE__*/function (_Component) {
           lastWatchTimeConfig: {
             contentId: identifier.id
           },
-          originalDimensions: originalDimensions
+          originalDimensions: originalDimensions,
+          showControls: checkMouseMovement
         });
       }));
     }
@@ -307,12 +307,4 @@ var InlinePlayerForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref)
     forwardRef: ref
   }));
 });
-export var InlinePlayer = withAnalyticsEvents({
-  onClick: createAndFireMediaCardEvent({
-    eventType: 'ui',
-    action: 'clicked',
-    actionSubject: 'mediaCard',
-    actionSubjectId: 'mediaCardInlinePlayer',
-    attributes: {}
-  })
-})(InlinePlayerForwardRef);
+export var InlinePlayer = InlinePlayerForwardRef;

package/dist/esm/root/ui/Breakpoint.js

@@ -0,0 +1,6 @@
+export var Breakpoint;
+
+(function (Breakpoint) {
+  Breakpoint["SMALL"] = "small";
+  Breakpoint["LARGE"] = "large";
+})(Breakpoint || (Breakpoint = {}));

package/dist/esm/root/ui/common.js

@@ -2,13 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 var _responsiveSettings;
 
-export var Breakpoint;
-
-(function (Breakpoint) {
-  Breakpoint["SMALL"] = "small";
-  Breakpoint["LARGE"] = "large";
-})(Breakpoint || (Breakpoint = {}));
-
+import { Breakpoint } from './Breakpoint';
 export var responsiveSettings = (_responsiveSettings = {}, _defineProperty(_responsiveSettings, Breakpoint.SMALL, {
   fontSize: 11,
   lineHeight: 14,

package/dist/esm/root/ui/iconMessage/index.js

@@ -14,21 +14,26 @@ export var IconMessage = function IconMessage(_ref) {
     reducedFont: reducedFont
   }, /*#__PURE__*/React.createElement(FormattedMessage, messageDescriptor));
 };
-export var CreatingPreview = function CreatingPreview(props) {
-  return /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
+export var CreatingPreview = function CreatingPreview(_ref2) {
+  var disableAnimation = _ref2.disableAnimation;
+  return /*#__PURE__*/React.createElement(IconMessage, {
     messageDescriptor: messages.creating_preview,
-    animated: true
-  }));
+    animated: !disableAnimation
+  });
 };
 export var PreviewUnavailable = function PreviewUnavailable(props) {
   return /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
     messageDescriptor: messages.preview_unavailable
   }));
 };
-export var RateLimited = function RateLimited(props) {
+export var FailedToLoad = function FailedToLoad(props) {
   return /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
-    messageDescriptor: messages.preview_rateLimited,
-    reducedFont: true
+    messageDescriptor: messages.failed_to_load
+  }));
+};
+export var FailedToUpload = function FailedToUpload(props) {
+  return /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
+    messageDescriptor: messages.failed_to_upload
   }));
 };
 export var PreviewCurrentlyUnavailable = function PreviewCurrentlyUnavailable(props) {