@atlaskit/media-card 73.0.0 → 73.1.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/media-card
 
+## 73.1.0
+
+### Minor Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - [ux] Displaying the control bar including the timestamp by default for videos that have been processed.
+
+### Patch Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - fix percent width on media-card
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Refactor solution for fixing media card images overlaps with creating preview message
+- [`e221ee215e7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e221ee215e7) - fix vertical scroll for firefox when media link is wrapped
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Improved card lazy offset
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Add media node updater to media inline node
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - show progress bar for inline player when videos is uploading
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Adding a feature flag for TimestampOnVideo
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Fix cardview issue with creating preview text overlaps with image in safari"
+- Updated dependencies
+
 ## 73.0.0
 
 ### Major Changes

package/dist/cjs/actions.js

@@ -9,9 +9,9 @@ exports.attachDetailsToActions = attachDetailsToActions;
 
 var _defineProperty2 = _interopRequireDefault(require("@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) { (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; }
+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) { (0, _defineProperty2.default)(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 attachDetailsToActions(actions, details) {
   return actions.map(function (action) {

package/dist/cjs/errors.js

@@ -11,6 +11,8 @@ exports.isLocalPreviewError = void 0;
 exports.isMediaCardError = isMediaCardError;
 exports.isUploadError = exports.isUnsupportedLocalPreviewError = exports.isRemotePreviewError = void 0;
 
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -49,7 +51,7 @@ var MediaCardError = /*#__PURE__*/function (_Error) {
     return _this;
   }
 
-  return MediaCardError;
+  return (0, _createClass2.default)(MediaCardError);
 }( /*#__PURE__*/(0, _wrapNativeSuper2.default)(Error));
 
 exports.MediaCardError = MediaCardError;
@@ -69,7 +71,7 @@ var LocalPreviewError = /*#__PURE__*/function (_MediaCardError) {
     return _this2;
   }
 
-  return LocalPreviewError;
+  return (0, _createClass2.default)(LocalPreviewError);
 }(MediaCardError);
 
 exports.LocalPreviewError = LocalPreviewError;
@@ -89,7 +91,7 @@ var RemotePreviewError = /*#__PURE__*/function (_MediaCardError2) {
     return _this3;
   }
 
-  return RemotePreviewError;
+  return (0, _createClass2.default)(RemotePreviewError);
 }(MediaCardError);
 
 exports.RemotePreviewError = RemotePreviewError;
@@ -109,7 +111,7 @@ var SsrPreviewError = /*#__PURE__*/function (_MediaCardError3) {
     return _this4;
   }
 
-  return SsrPreviewError;
+  return (0, _createClass2.default)(SsrPreviewError);
 }(MediaCardError);
 
 exports.SsrPreviewError = SsrPreviewError;
@@ -149,7 +151,7 @@ var ImageLoadError = /*#__PURE__*/function (_MediaCardError4) {
     return _super5.call(this, getImageLoadPrimaryReason(source));
   }
 
-  return ImageLoadError;
+  return (0, _createClass2.default)(ImageLoadError);
 }(MediaCardError);
 
 exports.ImageLoadError = ImageLoadError;

package/dist/cjs/root/card/cardAnalytics.js

@@ -7,7 +7,7 @@ exports.relevantFeatureFlagNames = exports.fireScreenEvent = exports.fireOperati
 
 var _analytics = require("../../utils/analytics");
 
-var relevantFeatureFlagNames = ['newCardExperience', 'captions'];
+var relevantFeatureFlagNames = ['newCardExperience', 'captions', 'timestampOnVideo'];
 exports.relevantFeatureFlagNames = relevantFeatureFlagNames;
 
 var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, error) {

package/dist/cjs/root/card/cardState.js

@@ -17,9 +17,9 @@ var _getCardStatus = require("./getCardStatus");
 
 var _getCardPreview = require("./getCardPreview");
 
-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) { (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; }
+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) { (0, _defineProperty2.default)(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; }
 
 var createStateUpdater = function createStateUpdater(newState) {
   return function (prevState) {

package/dist/cjs/root/card/getCardPreview/cache.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getCacheKey = exports.default = exports.CardPreviewCacheImpl = void 0;
 
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -20,8 +22,7 @@ var getCacheKey = function getCacheKey(id, dimensions) {
 };
 
 exports.getCacheKey = getCacheKey;
-
-var CardPreviewCacheImpl = function CardPreviewCacheImpl(previewCache) {
+var CardPreviewCacheImpl = /*#__PURE__*/(0, _createClass2.default)(function CardPreviewCacheImpl(previewCache) {
   var _this = this;
 
   (0, _classCallCheck2.default)(this, CardPreviewCacheImpl);
@@ -40,8 +41,7 @@ var CardPreviewCacheImpl = function CardPreviewCacheImpl(previewCache) {
     _this.previewCache.remove(cacheKey);
   });
   this.previewCache = previewCache;
-};
-
+});
 exports.CardPreviewCacheImpl = CardPreviewCacheImpl;
 
 var _default = new CardPreviewCacheImpl((0, _objectURLCache.createObjectURLCache)());

package/dist/cjs/root/card/getCardPreview/index.js

@@ -54,9 +54,9 @@ var _dimensionComparer = require("../../../utils/dimensionComparer");
 
 var _filePreviewStatus = require("./filePreviewStatus");
 
-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) { (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; }
+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) { (0, _defineProperty2.default)(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; }
 
 var getCardPreviewFromCache = _cache.default.get;
 exports.getCardPreviewFromCache = getCardPreviewFromCache;

package/dist/cjs/root/card/index.js

@@ -73,9 +73,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-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) { (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; }
+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) { (0, _defineProperty2.default)(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 = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -94,6 +94,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
     (0, _classCallCheck2.default)(this, CardBase);
     _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hasBeenMounted", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "viewportPreAnchorRef", /*#__PURE__*/(0, _react.createRef)());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "viewportPostAnchorRef", /*#__PURE__*/(0, _react.createRef)());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "timeElapsedTillCommenced", performance.now());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getImageURLParams", function (_ref) {
       var collection = _ref.collectionName;
@@ -326,7 +328,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
 
       if (useInlinePlayer && isVideo && !!cardPreview) {
         _this.setState({
-          isPlayingFile: true
+          isPlayingFile: true,
+          shouldAutoplay: true
         });
       } else if (shouldOpenMediaViewer) {
         var mediaViewerSelectedItem;
@@ -369,11 +372,13 @@ var CardBase = /*#__PURE__*/function (_Component) {
           selected = _this$props6.selected,
           testId = _this$props6.testId,
           originalDimensions = _this$props6.originalDimensions;
+      var shouldAutoplay = _this.state.shouldAutoplay;
       return /*#__PURE__*/_react.default.createElement(_inlinePlayer.InlinePlayer, {
         mediaClient: mediaClient,
         dimensions: dimensions,
         originalDimensions: originalDimensions,
         identifier: identifier,
+        autoplay: !!shouldAutoplay,
         onError: _this.onInlinePlayerError,
         onClick: _this.onClick,
         selected: selected,
@@ -510,9 +515,17 @@ var CardBase = /*#__PURE__*/function (_Component) {
       });
 
       return isLazy ? /*#__PURE__*/_react.default.createElement(_viewportDetector.ViewportDetector, {
-        targetRef: cardRef,
+        cardEl: cardRef,
+        preAnchorRef: _this.viewportPreAnchorRef,
+        postAnchorRef: _this.viewportPostAnchorRef,
         onVisible: _this.onCardInViewport
-      }, card) : card;
+      }, /*#__PURE__*/_react.default.createElement(_viewportDetector.ViewportAnchor, {
+        ref: _this.viewportPreAnchorRef,
+        offsetTop: -_viewportDetector.ABS_VIEWPORT_ANCHOR_OFFSET_TOP
+      }), card, /*#__PURE__*/_react.default.createElement(_viewportDetector.ViewportAnchor, {
+        ref: _this.viewportPostAnchorRef,
+        offsetTop: _viewportDetector.ABS_VIEWPORT_ANCHOR_OFFSET_TOP
+      })) : card;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCardInViewport", function () {
       _this.setState({
@@ -588,6 +601,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
       status: _status,
       isCardVisible: _isCardVisible,
       isPlayingFile: false,
+      shouldAutoplay: false,
       cardPreview: _cardPreview,
       cardRef: null,
       isBannedLocalPreview: false,
@@ -634,14 +648,17 @@ var CardBase = /*#__PURE__*/function (_Component) {
           mediaClient = _this$props11.mediaClient,
           identifier = _this$props11.identifier,
           dimensions = _this$props11.dimensions,
-          featureFlags = _this$props11.featureFlags;
+          featureFlags = _this$props11.featureFlags,
+          useInlinePlayer = _this$props11.useInlinePlayer,
+          disableOverlay = _this$props11.disableOverlay;
       var _this$state3 = this.state,
           isCardVisible = _this$state3.isCardVisible,
           cardPreview = _this$state3.cardPreview,
           status = _this$state3.status,
           fileState = _this$state3.fileState,
           isBannedLocalPreview = _this$state3.isBannedLocalPreview,
-          previewDidRender = _this$state3.previewDidRender;
+          previewDidRender = _this$state3.previewDidRender,
+          isPlayingFile = _this$state3.isPlayingFile;
       var isDifferent = (0, _mediaClient.isDifferentIdentifier)(prevIdentifier, identifier);
       var turnedVisible = !prevIsCardVisible && isCardVisible;
       var isNewMediaClient = prevMediaClient !== mediaClient;
@@ -697,6 +714,15 @@ var CardBase = /*#__PURE__*/function (_Component) {
         });
         this.unsubscribe();
       }
+
+      var isVideo = this.fileAttributes.fileMediatype === 'video';
+      var videoAvailableToPlay = fileState && (0, _mediaClient.isProcessedFileState)(fileState);
+
+      if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && videoAvailableToPlay && (0, _mediaCommon.getMediaFeatureFlag)('timestampOnVideo', this.props.featureFlags)) {
+        this.setState({
+          isPlayingFile: true
+        });
+      }
     }
   }, {
     key: "componentWillUnmount",

package/dist/cjs/root/cardView.js

@@ -83,9 +83,9 @@ 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 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) { (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; }
+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) { (0, _defineProperty2.default)(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 = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -550,6 +550,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           onDisplayImage = _this$props8.onDisplayImage,
           nativeLazyLoad = _this$props8.nativeLazyLoad,
           forceSyncDisplay = _this$props8.forceSyncDisplay;
+      var didImageRender = this.state.didImageRender;
       return !!dataURI && /*#__PURE__*/_react.default.createElement(_imageRenderer.ImageRenderer, {
         dataURI: dataURI,
         mediaType: mediaType,
@@ -560,7 +561,8 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
         onImageLoad: this.onImageLoad,
         onImageError: this.onImageError,
         nativeLazyLoad: nativeLazyLoad,
-        forceSyncDisplay: forceSyncDisplay
+        forceSyncDisplay: forceSyncDisplay,
+        isImageVisible: forceSyncDisplay || didImageRender
       });
     }
   }, {

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

@@ -56,6 +56,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isMounted", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
       ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
@@ -73,13 +74,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([Promise.resolve().then(function () {
                   return _interopRequireWildcard(require('@atlaskit/media-client'));
                 }), Promise.resolve().then(function () {
@@ -88,7 +91,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
                   return _interopRequireWildcard(require('../media-card-analytics-error-boundary'));
                 })]);
 
-              case 4:
+              case 5:
                 _yield$Promise$all = _context.sent;
                 _yield$Promise$all2 = (0, _slicedToArray2.default)(_yield$Promise$all, 3);
                 mediaClient = _yield$Promise$all2[0];
@@ -96,23 +99,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() {
@@ -121,6 +128,30 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
 
       return componentDidMount;
     }()
+  }, {
+    key: "componentWillUnmount",
+    value: function () {
+      var _componentWillUnmount = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+        return _regenerator.default.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/cjs/root/inline/mediaInlineCard.js

@@ -97,16 +97,20 @@ var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
     locale: 'en'
   });
   (0, _react.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) {

package/dist/cjs/root/inlinePlayer.js

@@ -41,6 +41,14 @@ var _ = require("..");
 
 var _cardLoading = require("../utils/lightCards/cardLoading");
 
+var _progressBar = require("./ui/progressBar/progressBar");
+
+var _styled2 = require("./ui/styled");
+
+var _isValidPercentageUnit = require("../utils/isValidPercentageUnit");
+
+var _getElementDimension = require("../utils/getElementDimension");
+
 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; }
@@ -84,6 +92,7 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "divRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setFileSrc", function (fileSrc) {
       _this.setState({
         fileSrc: fileSrc
@@ -153,6 +162,23 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
         viewingLevel: 'full'
       });
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "saveElementWidth", function () {
+      var dimensions = _this.props.dimensions;
+
+      if (!dimensions) {
+        return;
+      }
+
+      var width = dimensions.width;
+
+      if (width && (0, _isValidPercentageUnit.isValidPercentageUnit)(width) && !!_this.divRef.current) {
+        var elementWidth = (0, _getElementDimension.getElementDimension)(_this.divRef.current, 'width');
+
+        _this.setState({
+          elementWidth: elementWidth
+        });
+      }
+    });
     return _this;
   }
 
@@ -161,6 +187,7 @@ 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;
@@ -179,30 +206,41 @@ 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;
                     }
 
@@ -212,9 +250,9 @@ 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;
                     }
 
@@ -222,7 +260,7 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
                     artifacts = fileState.artifacts;
 
                     if (!(!artifactName || !artifacts)) {
-                      _context2.next = 18;
+                      _context2.next = 19;
                       break;
                     }
 
@@ -230,34 +268,34 @@ 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) {
@@ -274,6 +312,12 @@ 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 (0, _styled2.calcBreakpointSize)(parseInt("".concat(width), 10));
+    }
   }, {
     key: "render",
     value: function render() {
@@ -286,8 +330,12 @@ 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.default.createElement(_cardLoading.CardLoading, {
@@ -308,7 +356,7 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
           type: "video",
           src: fileSrc,
           fileId: identifier.id,
-          isAutoPlay: true,
+          isAutoPlay: autoplay,
           isHDAvailable: false,
           onDownloadClick: _this3.onDownloadClick,
           onFirstPlay: _this3.onFirstPlay,
@@ -318,7 +366,12 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
           originalDimensions: originalDimensions,
           showControls: checkMouseMovement
         });
-      }));
+      }), isUploading ? /*#__PURE__*/_react.default.createElement(_progressBar.ProgressBar, {
+        progress: progress,
+        breakpoint: this.breakpoint,
+        positionBottom: true,
+        showOnTop: true
+      }) : null);
     }
   }]);
   return InlinePlayerBase;