@atlaskit/media-card 72.0.0 → 73.1.1

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); }; }
 
@@ -28,8 +28,7 @@ import { createAndFireMediaCardEvent } from '../utils/analytics';
 import { attachDetailsToActions } from '../actions';
 import { getErrorMessage } from '../utils/getErrorMessage';
 import { toHumanReadableMediaSize, messages } from '@atlaskit/media-ui';
-import { NewFileExperienceWrapper } from './ui/styled';
-import { CardImageContainer, calcBreakpointSize } from './ui/styledSSR';
+import { NewFileExperienceWrapper, CardImageContainer, calcBreakpointSize } from './ui/styled';
 import { ImageRenderer } from './ui/imageRenderer/imageRenderer';
 import { TitleBox } from './ui/titleBox/titleBox';
 import { FailedTitleBox } from './ui/titleBox/failedTitleBox';
@@ -138,11 +137,9 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
       var shouldUsePointerCursor = status !== 'error' && status !== 'failed-processing';
       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.createElement(NewFileExperienceWrapper, {
         className: newFileExperienceClassName,
         "data-testid": testId || 'media-card-view',
@@ -270,40 +267,29 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
           });
 
           var iconMessage;
+          var customTitleMessage;
 
-          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
-              });
-            }
+          var _ref4 = error || {},
+              secondaryError = _ref4.secondaryError;
 
-            return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
-              renderTitleBox: !metadata && !!name,
-              iconMessage: /*#__PURE__*/React.createElement(FailedToUpload, null)
-            });
+          if (isRateLimitedError(secondaryError) || isPollingError(secondaryError)) {
+            iconMessage = /*#__PURE__*/React.createElement(PreviewCurrentlyUnavailable, null);
+          } else if (isUploadError(error)) {
+            iconMessage = /*#__PURE__*/React.createElement(FailedToUpload, null);
+            customTitleMessage = messages.failed_to_upload;
+          } else if (!metadata) {
+            iconMessage = /*#__PURE__*/React.createElement(FailedToLoad, null);
+          } else {
+            iconMessage = /*#__PURE__*/React.createElement(PreviewUnavailable, null);
           }
 
           if (!disableOverlay) {
+            var renderFailedTitleBox = !name || !!customTitleMessage;
             return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
-              renderTitleBox: !!name,
-              renderFailedTitleBox: !metadata,
-              iconMessage: iconMessage
+              renderTitleBox: !!name && !customTitleMessage,
+              renderFailedTitleBox: renderFailedTitleBox,
+              iconMessage: !renderFailedTitleBox ? iconMessage : undefined,
+              customTitleMessage: customTitleMessage
             });
           }
 
@@ -342,8 +328,8 @@ export 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardImageContainer, {
@@ -368,8 +354,8 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(_ref5) {
-      var prevDataURI = _ref5.dataURI;
+    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,
@@ -390,10 +376,10 @@ export 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 defaultImageCardDimensions.width;
@@ -450,8 +436,8 @@ export 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;
@@ -484,9 +470,9 @@ export 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.createElement(TitleBox, {
         name: name,
@@ -527,17 +513,19 @@ export 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.createElement(ImageRenderer, {
         dataURI: dataURI,
         mediaType: mediaType,
-        mediaItemType: mediaItemType,
         previewOrientation: previewOrientation,
         alt: alt,
         resizeMode: resizeMode,
         onDisplayImage: onDisplayImage,
         onImageLoad: this.onImageLoad,
-        onImageError: this.onImageError
+        onImageError: this.onImageError,
+        nativeLazyLoad: nativeLazyLoad,
+        forceSyncDisplay: forceSyncDisplay
       });
     }
   }, {
@@ -553,10 +541,10 @@ export 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.createElement(IconWrapper, {
         breakpoint: this.breakpoint,

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,46 +63,64 @@ 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
     });
   }
 
   if (fileState.status === 'error') {
     return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
-      message: fileState.message || ''
+      message: fileState.message || '',
+      isSelected: isSelected
     });
   }
 
   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
     });
   }
 
   if (fileState.status === 'uploading') {
     return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
-      message: fileState.name
+      message: fileState.name,
+      isSelected: isSelected
     });
   }
 
@@ -126,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"
@@ -135,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
+});

package/dist/esm/root/inlinePlayer.js

@@ -20,6 +20,10 @@ import { CustomMediaPlayer, InactivityDetector } from '@atlaskit/media-ui';
 import { InlinePlayerWrapper } from './styled';
 import { defaultImageCardDimensions } from '..';
 import { CardLoading } from '../utils/lightCards/cardLoading';
+import { ProgressBar } from './ui/progressBar/progressBar';
+import { calcBreakpointSize } from './ui/styled';
+import { isValidPercentageUnit } from '../utils/isValidPercentageUnit';
+import { getElementDimension } from '../utils/getElementDimension';
 export var inlinePlayerClassName = 'media-card-inline-player';
 export var getPreferredVideoArtifact = function getPreferredVideoArtifact(fileState) {
   if (fileState.status === 'processed' || fileState.status === 'processing') {
@@ -52,6 +56,8 @@ export var InlinePlayerBase = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "state", {});
 
+    _defineProperty(_assertThisInitialized(_this), "divRef", /*#__PURE__*/React.createRef());
+
     _defineProperty(_assertThisInitialized(_this), "setFileSrc", function (fileSrc) {
       _this.setState({
         fileSrc: fileSrc
@@ -126,6 +132,24 @@ export var InlinePlayerBase = /*#__PURE__*/function (_Component) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "saveElementWidth", function () {
+      var dimensions = _this.props.dimensions;
+
+      if (!dimensions) {
+        return;
+      }
+
+      var width = dimensions.width;
+
+      if (width && isValidPercentageUnit(width) && !!_this.divRef.current) {
+        var elementWidth = getElementDimension(_this.divRef.current, 'width');
+
+        _this.setState({
+          elementWidth: elementWidth
+        });
+      }
+    });
+
     return _this;
   }
 
@@ -134,6 +158,7 @@ export var InlinePlayerBase = /*#__PURE__*/function (_Component) {
     value: function componentDidMount() {
       var _this2 = this;
 
+      this.saveElementWidth();
       var _this$props3 = this.props,
           mediaClient = _this$props3.mediaClient,
           identifier = _this$props3.identifier;
@@ -152,30 +177,41 @@ export var InlinePlayerBase = /*#__PURE__*/function (_Component) {
               while (1) {
                 switch (_context2.prev = _context2.next) {
                   case 0:
+                    if (fileState.status === 'uploading') {
+                      _this2.setState({
+                        isUploading: true,
+                        progress: fileState.progress
+                      });
+                    } else {
+                      _this2.setState({
+                        isUploading: false
+                      });
+                    }
+
                     existingFileSrc = _this2.state.fileSrc; // we want to reuse the existing fileSrc to prevent re renders
 
                     if (!existingFileSrc) {
-                      _context2.next = 3;
+                      _context2.next = 4;
                       break;
                     }
 
                     return _context2.abrupt("return");
 
-                  case 3:
+                  case 4:
                     if (!(fileState.status !== 'error' && fileState.preview)) {
-                      _context2.next = 12;
+                      _context2.next = 13;
                       break;
                     }
 
-                    _context2.next = 6;
+                    _context2.next = 7;
                     return fileState.preview;
 
-                  case 6:
+                  case 7:
                     _yield$fileState$prev = _context2.sent;
                     value = _yield$fileState$prev.value;
 
                     if (!(value instanceof Blob && value.type.indexOf('video/') === 0)) {
-                      _context2.next = 12;
+                      _context2.next = 13;
                       break;
                     }
 
@@ -185,9 +221,9 @@ export var InlinePlayerBase = /*#__PURE__*/function (_Component) {
 
                     return _context2.abrupt("return");
 
-                  case 12:
+                  case 13:
                     if (!(fileState.status === 'processed' || fileState.status === 'processing')) {
-                      _context2.next = 29;
+                      _context2.next = 30;
                       break;
                     }
 
@@ -195,7 +231,7 @@ export var InlinePlayerBase = /*#__PURE__*/function (_Component) {
                     artifacts = fileState.artifacts;
 
                     if (!(!artifactName || !artifacts)) {
-                      _context2.next = 18;
+                      _context2.next = 19;
                       break;
                     }
 
@@ -203,34 +239,34 @@ export var InlinePlayerBase = /*#__PURE__*/function (_Component) {
 
                     return _context2.abrupt("return");
 
-                  case 18:
-                    _context2.prev = 18;
-                    _context2.next = 21;
+                  case 19:
+                    _context2.prev = 19;
+                    _context2.next = 22;
                     return mediaClient.file.getArtifactURL(artifacts, artifactName, collectionName);
 
-                  case 21:
+                  case 22:
                     _fileSrc = _context2.sent;
 
                     _this2.setFileSrc(_fileSrc);
 
-                    _context2.next = 29;
+                    _context2.next = 30;
                     break;
 
-                  case 25:
-                    _context2.prev = 25;
-                    _context2.t0 = _context2["catch"](18);
+                  case 26:
+                    _context2.prev = 26;
+                    _context2.t0 = _context2["catch"](19);
                     onError = _this2.props.onError;
 
                     if (onError) {
                       onError(_context2.t0);
                     }
 
-                  case 29:
+                  case 30:
                   case "end":
                     return _context2.stop();
                 }
               }
-            }, _callee2, null, [[18, 25]]);
+            }, _callee2, null, [[19, 26]]);
           }));
 
           function next(_x) {
@@ -247,6 +283,12 @@ export var InlinePlayerBase = /*#__PURE__*/function (_Component) {
       this.unsubscribe();
       this.revoke();
     }
+  }, {
+    key: "breakpoint",
+    get: function get() {
+      var width = this.state.elementWidth || (this.props.dimensions ? this.props.dimensions.width : '') || defaultImageCardDimensions.width;
+      return calcBreakpointSize(parseInt("".concat(width), 10));
+    }
   }, {
     key: "render",
     value: function render() {
@@ -259,8 +301,12 @@ export var InlinePlayerBase = /*#__PURE__*/function (_Component) {
           selected = _this$props4.selected,
           testId = _this$props4.testId,
           identifier = _this$props4.identifier,
-          forwardRef = _this$props4.forwardRef;
-      var fileSrc = this.state.fileSrc;
+          forwardRef = _this$props4.forwardRef,
+          autoplay = _this$props4.autoplay;
+      var _this$state = this.state,
+          fileSrc = _this$state.fileSrc,
+          isUploading = _this$state.isUploading,
+          progress = _this$state.progress;
 
       if (!fileSrc) {
         return /*#__PURE__*/React.createElement(CardLoading, {
@@ -281,7 +327,7 @@ export var InlinePlayerBase = /*#__PURE__*/function (_Component) {
           type: "video",
           src: fileSrc,
           fileId: identifier.id,
-          isAutoPlay: true,
+          isAutoPlay: autoplay,
           isHDAvailable: false,
           onDownloadClick: _this3.onDownloadClick,
           onFirstPlay: _this3.onFirstPlay,
@@ -291,7 +337,12 @@ export var InlinePlayerBase = /*#__PURE__*/function (_Component) {
           originalDimensions: originalDimensions,
           showControls: checkMouseMovement
         });
-      }));
+      }), isUploading ? /*#__PURE__*/React.createElement(ProgressBar, {
+        progress: progress,
+        breakpoint: this.breakpoint,
+        positionBottom: true,
+        showOnTop: true
+      }) : null);
     }
   }]);
 

package/dist/esm/root/styled.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 import styled from 'styled-components';
 import { borderRadius } from '@atlaskit/theme/constants';
@@ -32,4 +32,5 @@ export var InlinePlayerWrapper = styled.div(_templateObject2 || (_templateObject
 }, function (props) {
   return getDimensionsWithDefault(props.dimensions).height || 'auto';
 }, borderRadius(), getSelectedBorderStyle);
-InlinePlayerWrapper.displayName = 'InlinePlayerWrapper';
+InlinePlayerWrapper.displayName = 'InlinePlayerWrapper';
+export var FormattedMessageWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));

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

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

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

@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { IconMessageWrapper } from './styled';
 import { messages } from '@atlaskit/media-ui';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessageWrapper } from '../../styled';
 export var IconMessage = function IconMessage(_ref) {
   var messageDescriptor = _ref.messageDescriptor,
       _ref$animated = _ref.animated,
@@ -12,7 +13,7 @@ export var IconMessage = function IconMessage(_ref) {
   return /*#__PURE__*/React.createElement(IconMessageWrapper, {
     animated: animated,
     reducedFont: reducedFont
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messageDescriptor));
+  }, /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messageDescriptor)));
 };
 export var CreatingPreview = function CreatingPreview(_ref2) {
   var disableAnimation = _ref2.disableAnimation;