@atlaskit/media-card 73.0.0 → 73.1.2

package/dist/cjs/root/ui/progressBar/progressBar.js

@@ -18,12 +18,15 @@ var ProgressBar = function ProgressBar(_ref) {
       _ref$breakpoint = _ref.breakpoint,
       breakpoint = _ref$breakpoint === void 0 ? _common.Breakpoint.SMALL : _ref$breakpoint,
       _ref$positionBottom = _ref.positionBottom,
-      positionBottom = _ref$positionBottom === void 0 ? false : _ref$positionBottom;
+      positionBottom = _ref$positionBottom === void 0 ? false : _ref$positionBottom,
+      _ref$showOnTop = _ref.showOnTop,
+      showOnTop = _ref$showOnTop === void 0 ? false : _ref$showOnTop;
   var normalizedProgress = Math.min(1, Math.max(0, progress || 0)) * 100;
   return /*#__PURE__*/_react.default.createElement(_styled.StyledBar, {
     progress: normalizedProgress,
     breakpoint: breakpoint,
-    positionBottom: positionBottom
+    positionBottom: positionBottom,
+    showOnTop: showOnTop
   });
 };
 

package/dist/cjs/root/ui/progressBar/styled.js

@@ -35,19 +35,20 @@ var largeSizeSettings = {
   marginBottom: 12
 };
 
-function generateResponsiveStyles(breakpoint, positionBottom) {
-  var multiplier = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+function generateResponsiveStyles(breakpoint, positionBottom, showOnTop) {
+  var multiplier = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
   var setting = breakpoint === _common.Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
   var marginPositionBottom = _common.responsiveSettings[breakpoint].titleBox.verticalPadding;
   var marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : (0, _common.getTitleBoxHeight)(breakpoint));
-  return "\n    bottom: ".concat(marginBottom, "px\n  ");
+  return "\n    ".concat(showOnTop ? 'top' : 'bottom', ": ").concat(marginBottom, "px\n  ");
 }
 
 var StyledBar = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref) {
   var progress = _ref.progress,
       breakpoint = _ref.breakpoint,
-      positionBottom = _ref.positionBottom;
-  return "\n    ".concat(_mediaUi.borderRadius, "\n    overflow: hidden;\n    position: absolute;\n    width: ").concat(width, "%;\n    left: ").concat(left, "%;\n    background-color: ").concat((0, _mixins.rgba)(_colors.N0, 0.8), ";\n    height: ").concat(height + padding * 2, "px;\n    padding: ").concat(padding, "px;\n\n    ::before {\n      content: '';\n      width: ").concat(progress, "%;\n      height: 100%;\n      background-color: ").concat(_colors.N400, ";\n      ").concat(_mediaUi.borderRadius, "\n      display: block;\n    }\n\n    ").concat(generateResponsiveStyles(breakpoint, positionBottom), "\n");
+      positionBottom = _ref.positionBottom,
+      showOnTop = _ref.showOnTop;
+  return "\n    ".concat(_mediaUi.borderRadius, "\n    overflow: hidden;\n    position: absolute;\n    width: ").concat(width, "%;\n    left: ").concat(left, "%;\n    background-color: ").concat((0, _mixins.rgba)(_colors.N0, 0.8), ";\n    height: ").concat(height + padding * 2, "px;\n    padding: ").concat(padding, "px;\n    box-sizing: border-box;\n\n    ::before {\n      content: '';\n      width: ").concat(progress, "%;\n      height: 100%;\n      background-color: ").concat(_colors.N400, ";\n      ").concat(_mediaUi.borderRadius, "\n      display: block;\n    }\n\n    ").concat(generateResponsiveStyles(breakpoint, positionBottom, showOnTop), "\n");
 });
 
 exports.StyledBar = StyledBar;

package/dist/cjs/root/ui/styled.js

@@ -119,7 +119,7 @@ var NewFileExperienceWrapper = _styledComponents.default.div(_templateObject ||
       isPlayButtonClickable = _ref6.isPlayButtonClickable,
       isTickBoxSelectable = _ref6.isTickBoxSelectable,
       shouldDisplayTooltip = _ref6.shouldDisplayTooltip;
-  return "\n    ".concat((0, _styles.transition)(), "\n    box-sizing: border-box;\n    * {\n      box-sizing: border-box;\n    }\n    position: relative;\n    font-family: ").concat((0, _constants.fontFamily)(), ";\n    ").concat(getWrapperDimensions(dimensions, appearance), "\n    ").concat(displayBackground ? "background-color: ".concat(_colors.N20, ";") : '', "\n    ").concat(_mediaUi.borderRadius, "\n    ").concat(getCursorStyle(shouldUsePointerCursor), "\n    ").concat(getWrapperShadow(disableOverlay, selected), "\n    ").concat(generateResponsiveStyles(breakpoint), "\n    ").concat(_selection.hideNativeBrowserTextSelectionStyles, "\n\n    /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n    ").concat(getClickablePlayButtonStyles(isPlayButtonClickable), "\n    ").concat(getSelectableTickBoxStyles(isTickBoxSelectable), "\n    &:hover .").concat(_styled2.blanketClassName, " {\n      ").concat(_styled2.fixedBlanketStyles, "\n    }\n\n    &:hover .").concat(_styled3.actionsBarClassName, " {\n      ").concat(_styled3.fixedActionBarStyles, "\n    }\n\n    /* Tooltip does not support percentage dimensions. We enforce them here */\n    ").concat(shouldDisplayTooltip ? "> div { ".concat(getWrapperDimensions(dimensions, appearance), " }") : '', "\n");
+  return "\n    ".concat((0, _styles.transition)(), "\n    box-sizing: border-box;\n    * {\n      box-sizing: border-box;\n    }\n    position: relative;\n    font-family: ").concat((0, _constants.fontFamily)(), ";\n    ").concat(getWrapperDimensions(dimensions, appearance), "\n    ").concat(displayBackground ? "background-color: ".concat(_colors.N20, ";") : '', "\n    ").concat(_mediaUi.borderRadius, "\n    ").concat(getCursorStyle(shouldUsePointerCursor), "\n    ").concat(getWrapperShadow(disableOverlay, selected), "\n    ").concat(generateResponsiveStyles(breakpoint), "\n    ").concat(_selection.hideNativeBrowserTextSelectionStyles, "\n\n    /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n    ").concat(getClickablePlayButtonStyles(isPlayButtonClickable), "\n    ").concat(getSelectableTickBoxStyles(isTickBoxSelectable), "\n    &:hover .").concat(_styled2.blanketClassName, " {\n      ").concat(_styled2.fixedBlanketStyles, "\n    }\n\n    &:hover .").concat(_styled3.actionsBarClassName, " {\n      ").concat(_styled3.fixedActionBarStyles, "\n    }\n\n    /* Tooltip does not support percentage dimensions. We enforce them here */\n    ").concat(shouldDisplayTooltip ? "> div { width: 100%; height: 100% }" : '', "\n");
 });
 
 exports.NewFileExperienceWrapper = NewFileExperienceWrapper;

package/dist/cjs/utils/cardActions/cardActionsDropdownMenu.js

@@ -35,6 +35,8 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _analytics = require("../analytics");
 
+var _excluded = ["triggerRef"];
+
 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; }
@@ -109,7 +111,7 @@ var CardActionsDropdownMenu = /*#__PURE__*/function (_Component) {
           onOpenChange: onOpenChange,
           trigger: function trigger(_ref) {
             var triggerRef = _ref.triggerRef,
-                providedProps = (0, _objectWithoutProperties2.default)(_ref, ["triggerRef"]);
+                providedProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
             return /*#__PURE__*/_react.default.createElement(CardActionButtonWithAnalytics, (0, _extends2.default)({
               variant: triggerVariant,
               style: {

package/dist/cjs/utils/viewportDetector.js

@@ -5,12 +5,10 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createViewportDetector = exports.ViewportDetector = void 0;
+exports.ViewportDetector = exports.ViewportAnchor = exports.ABS_VIEWPORT_ANCHOR_OFFSET_TOP = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _lazyContent = require("./lazyContent");
-
 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; }
@@ -21,6 +19,31 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
+/**
+ * As IntersectionObserver::rootMargin doesn't work within IFrames, we use an empty div + dynamic offsetTop to eagerly detect cards entering viewport.
+ * Using this approach, we can lazy load cards ABS_VIEWPORT_ANCHOR_OFFSET_TOP px before they enter viewport.
+ */
+var ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900; //px
+
+exports.ABS_VIEWPORT_ANCHOR_OFFSET_TOP = ABS_VIEWPORT_ANCHOR_OFFSET_TOP;
+var ViewportAnchor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  if (typeof IntersectionObserver === 'undefined') {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    className: "media-card-viewport-anchor",
+    style: {
+      position: 'absolute',
+      top: "".concat(props.offsetTop, "px"),
+      maxHeight: 0,
+      pointerEvents: 'none'
+    }
+  });
+});
+exports.ViewportAnchor = ViewportAnchor;
+
 var createIntersectionObserverCallback = function createIntersectionObserverCallback(onVisible) {
   return function (entries, observer) {
     var _iterator = _createForOfIteratorHelper(entries),
@@ -44,36 +67,42 @@ var createIntersectionObserverCallback = function createIntersectionObserverCall
   };
 };
 
-var Observer = function Observer(_ref) {
+var ViewportObserver = function ViewportObserver(_ref) {
   var onVisible = _ref.onVisible,
+      cardEl = _ref.cardEl,
       children = _ref.children,
-      targetRef = _ref.targetRef;
+      preAnchorRef = _ref.preAnchorRef,
+      postAnchorRef = _ref.postAnchorRef;
   (0, _react.useEffect)(function () {
     // IntersectionObserver uses root and target elements to detect intersections, defaulting root to the viewport
     var intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisible));
-    targetRef && intersectionObserver.observe(targetRef);
+    (preAnchorRef === null || preAnchorRef === void 0 ? void 0 : preAnchorRef.current) && intersectionObserver.observe(preAnchorRef.current);
+    (postAnchorRef === null || postAnchorRef === void 0 ? void 0 : postAnchorRef.current) && intersectionObserver.observe(postAnchorRef.current);
+    cardEl && intersectionObserver.observe(cardEl);
     return function () {
       intersectionObserver.disconnect();
     };
-  }, [targetRef, onVisible]);
+  }, [cardEl, preAnchorRef, postAnchorRef, onVisible]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
 };
 
-var createViewportDetector = function createViewportDetector(isIntersectionObserverSupported) {
-  return function (_ref2) {
-    var children = _ref2.children,
-        targetRef = _ref2.targetRef,
-        onVisible = _ref2.onVisible;
-    return isIntersectionObserverSupported ? /*#__PURE__*/_react.default.createElement(Observer, {
-      targetRef: targetRef,
-      onVisible: onVisible
-    }, children) : /*#__PURE__*/_react.default.createElement(_lazyContent.LazyContent, {
-      placeholder: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children),
-      onRender: onVisible
-    }, children);
-  };
+var ViewportDetector = function ViewportDetector(_ref2) {
+  var cardEl = _ref2.cardEl,
+      preAnchorRef = _ref2.preAnchorRef,
+      postAnchorRef = _ref2.postAnchorRef,
+      onVisible = _ref2.onVisible,
+      children = _ref2.children;
+
+  if (typeof IntersectionObserver === 'undefined') {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+  }
+
+  return /*#__PURE__*/_react.default.createElement(ViewportObserver, {
+    cardEl: cardEl,
+    preAnchorRef: preAnchorRef,
+    postAnchorRef: postAnchorRef,
+    onVisible: onVisible
+  }, children);
 };
 
-exports.createViewportDetector = createViewportDetector;
-var ViewportDetector = createViewportDetector(typeof IntersectionObserver !== 'undefined');
 exports.ViewportDetector = ViewportDetector;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "73.0.0",
+	"version": "73.1.2",
 	"sideEffects": false
 }

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

@@ -1,5 +1,5 @@
 import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
-export const relevantFeatureFlagNames = ['newCardExperience', 'captions'];
+export const relevantFeatureFlagNames = ['newCardExperience', 'captions', 'timestampOnVideo'];
 export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, error) => {
   const fireEvent = payload => fireMediaCardEvent(payload, createAnalyticsEvent);
 

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

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { Component } from 'react';
+import React, { Component, createRef } from 'react';
 import ReactDOM from 'react-dom';
 import { version as packageVersion, name as packageName } from '../../version.json';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -9,7 +9,7 @@ import { globalMediaEventEmitter, isDifferentIdentifier, isFileIdentifier, RECEN
 import { MediaViewer } from '@atlaskit/media-viewer';
 import { injectIntl, IntlProvider } from 'react-intl-next';
 import { CardView } from '../cardView';
-import { ViewportDetector } from '../../utils/viewportDetector';
+import { ABS_VIEWPORT_ANCHOR_OFFSET_TOP, ViewportDetector, ViewportAnchor } from '../../utils/viewportDetector';
 import { getRequestedDimensions } from '../../utils/getDataURIDimension';
 import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview, getSSRCardPreview, isLocalPreview, isSSRPreview, isSSRClientPreview, fetchAndCacheRemotePreview } from './getCardPreview';
 import { getFileDetails } from '../../utils/metadata';
@@ -19,6 +19,8 @@ import { isLocalPreviewError, MediaCardError, ensureMediaCardError, ImageLoadErr
 import { fireOperationalEvent, fireCommencedEvent, relevantFeatureFlagNames, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
 import getDocument from '../../utils/document';
 import { getCardStateFromFileState, createStateUpdater } from './cardState';
+import { isProcessedFileState } from '@atlaskit/media-client';
+import { getMediaFeatureFlag } from '@atlaskit/media-common';
 export class CardBase extends Component {
   // We initialise timeElapsedTillCommenced
   // to avoid extra branching on a possibly undefined value.
@@ -27,6 +29,10 @@ export class CardBase extends Component {
 
     _defineProperty(this, "hasBeenMounted", false);
 
+    _defineProperty(this, "viewportPreAnchorRef", /*#__PURE__*/createRef());
+
+    _defineProperty(this, "viewportPostAnchorRef", /*#__PURE__*/createRef());
+
     _defineProperty(this, "timeElapsedTillCommenced", performance.now());
 
     _defineProperty(this, "getImageURLParams", ({
@@ -260,7 +266,8 @@ export class CardBase extends Component {
 
       if (useInlinePlayer && isVideo && !!cardPreview) {
         this.setState({
-          isPlayingFile: true
+          isPlayingFile: true,
+          shouldAutoplay: true
         });
       } else if (shouldOpenMediaViewer) {
         let mediaViewerSelectedItem;
@@ -307,11 +314,15 @@ export class CardBase extends Component {
         testId,
         originalDimensions
       } = this.props;
+      const {
+        shouldAutoplay
+      } = this.state;
       return /*#__PURE__*/React.createElement(InlinePlayer, {
         mediaClient: mediaClient,
         dimensions: dimensions,
         originalDimensions: originalDimensions,
         identifier: identifier,
+        autoplay: !!shouldAutoplay,
         onError: this.onInlinePlayerError,
         onClick: this.onClick,
         selected: selected,
@@ -459,9 +470,17 @@ export class CardBase extends Component {
         forceSyncDisplay: forceSyncDisplay
       });
       return isLazy ? /*#__PURE__*/React.createElement(ViewportDetector, {
-        targetRef: cardRef,
+        cardEl: cardRef,
+        preAnchorRef: this.viewportPreAnchorRef,
+        postAnchorRef: this.viewportPostAnchorRef,
         onVisible: this.onCardInViewport
-      }, card) : card;
+      }, /*#__PURE__*/React.createElement(ViewportAnchor, {
+        ref: this.viewportPreAnchorRef,
+        offsetTop: -ABS_VIEWPORT_ANCHOR_OFFSET_TOP
+      }), card, /*#__PURE__*/React.createElement(ViewportAnchor, {
+        ref: this.viewportPostAnchorRef,
+        offsetTop: ABS_VIEWPORT_ANCHOR_OFFSET_TOP
+      })) : card;
     });
 
     _defineProperty(this, "onCardInViewport", () => {
@@ -547,6 +566,7 @@ export class CardBase extends Component {
       status: _status,
       isCardVisible: _isCardVisible,
       isPlayingFile: false,
+      shouldAutoplay: false,
       cardPreview: _cardPreview,
       cardRef: null,
       isBannedLocalPreview: false,
@@ -595,7 +615,9 @@ export class CardBase extends Component {
       mediaClient,
       identifier,
       dimensions,
-      featureFlags
+      featureFlags,
+      useInlinePlayer,
+      disableOverlay
     } = this.props;
     const {
       isCardVisible,
@@ -603,7 +625,8 @@ export class CardBase extends Component {
       status,
       fileState,
       isBannedLocalPreview,
-      previewDidRender
+      previewDidRender,
+      isPlayingFile
     } = this.state;
     const isDifferent = isDifferentIdentifier(prevIdentifier, identifier);
     const turnedVisible = !prevIsCardVisible && isCardVisible;
@@ -662,6 +685,15 @@ export class CardBase extends Component {
       });
       this.unsubscribe();
     }
+
+    const isVideo = this.fileAttributes.fileMediatype === 'video';
+    const videoAvailableToPlay = fileState && isProcessedFileState(fileState);
+
+    if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && videoAvailableToPlay && getMediaFeatureFlag('timestampOnVideo', this.props.featureFlags)) {
+      this.setState({
+        isPlayingFile: true
+      });
+    }
   }
 
   componentWillUnmount() {

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

@@ -5,6 +5,8 @@ export default class MediaInlineCardLoader extends React.PureComponent {
   constructor(...args) {
     super(...args);
 
+    _defineProperty(this, "isMounted", false);
+
     _defineProperty(this, "state", {
       MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
       ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
@@ -12,6 +14,8 @@ export default class MediaInlineCardLoader extends React.PureComponent {
   }
 
   async componentDidMount() {
+    this.isMounted = true;
+
     if (!this.state.MediaInlineCard) {
       try {
         const [mediaClient, cardModule, mediaCardErrorBoundaryModule] = await Promise.all([import(
@@ -23,14 +27,21 @@ export default class MediaInlineCardLoader extends React.PureComponent {
         '../media-card-analytics-error-boundary')]);
         MediaInlineCardLoader.MediaInlineCard = mediaClient.withMediaClient(cardModule.MediaInlineCard);
         MediaInlineCardLoader.ErrorBoundary = mediaCardErrorBoundaryModule.default;
-        this.setState({
-          MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
-          ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
-        });
+
+        if (this.isMounted) {
+          this.setState({
+            MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
+            ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
+          });
+        }
       } catch (error) {}
     }
   }
 
+  async componentWillUnmount() {
+    this.isMounted = false;
+  }
+
   render() {
     const {
       MediaInlineCard,

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

@@ -59,16 +59,20 @@ export const MediaInlineCardInternal = ({
     locale: 'en'
   });
   useEffect(() => {
-    mediaClient.file.getFileState(identifier.id, {
+    const subscription = mediaClient.file.getFileState(identifier.id, {
       collectionName: identifier.collectionName
     }).subscribe({
       next: fileState => {
         setFileState(fileState);
+        setIsErrored(false);
       },
       error: () => {
         setIsErrored(true);
       }
     });
+    return () => {
+      subscription.unsubscribe();
+    };
   }, [identifier.collectionName, identifier.id, mediaClient.file]);
 
   if (!fileState) {

package/dist/es2019/root/inlinePlayer.js

@@ -7,6 +7,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 const inlinePlayerClassName = 'media-card-inline-player';
 export const getPreferredVideoArtifact = fileState => {
   if (fileState.status === 'processed' || fileState.status === 'processing') {
@@ -29,6 +33,8 @@ export class InlinePlayerBase extends Component {
 
     _defineProperty(this, "state", {});
 
+    _defineProperty(this, "divRef", /*#__PURE__*/React.createRef());
+
     _defineProperty(this, "setFileSrc", fileSrc => {
       this.setState({
         fileSrc
@@ -93,9 +99,31 @@ export class InlinePlayerBase extends Component {
         viewingLevel: 'full'
       });
     });
+
+    _defineProperty(this, "saveElementWidth", () => {
+      const {
+        dimensions
+      } = this.props;
+
+      if (!dimensions) {
+        return;
+      }
+
+      const {
+        width
+      } = dimensions;
+
+      if (width && isValidPercentageUnit(width) && !!this.divRef.current) {
+        const elementWidth = getElementDimension(this.divRef.current, 'width');
+        this.setState({
+          elementWidth
+        });
+      }
+    });
   }
 
   componentDidMount() {
+    this.saveElementWidth();
     const {
       mediaClient,
       identifier
@@ -110,6 +138,17 @@ export class InlinePlayerBase extends Component {
       collectionName
     }).subscribe({
       next: async fileState => {
+        if (fileState.status === 'uploading') {
+          this.setState({
+            isUploading: true,
+            progress: fileState.progress
+          });
+        } else {
+          this.setState({
+            isUploading: false
+          });
+        }
+
         const {
           fileSrc: existingFileSrc
         } = this.state; // we want to reuse the existing fileSrc to prevent re renders
@@ -163,6 +202,11 @@ export class InlinePlayerBase extends Component {
     this.revoke();
   }
 
+  get breakpoint() {
+    const width = this.state.elementWidth || (this.props.dimensions ? this.props.dimensions.width : '') || defaultImageCardDimensions.width;
+    return calcBreakpointSize(parseInt(`${width}`, 10));
+  }
+
   render() {
     const {
       onClick,
@@ -171,10 +215,13 @@ export class InlinePlayerBase extends Component {
       selected,
       testId,
       identifier,
-      forwardRef
+      forwardRef,
+      autoplay
     } = this.props;
     const {
-      fileSrc
+      fileSrc,
+      isUploading,
+      progress
     } = this.state;
 
     if (!fileSrc) {
@@ -195,7 +242,7 @@ export class InlinePlayerBase extends Component {
       type: "video",
       src: fileSrc,
       fileId: identifier.id,
-      isAutoPlay: true,
+      isAutoPlay: autoplay,
       isHDAvailable: false,
       onDownloadClick: this.onDownloadClick,
       onFirstPlay: this.onFirstPlay,
@@ -204,7 +251,12 @@ export class InlinePlayerBase extends Component {
       },
       originalDimensions: originalDimensions,
       showControls: checkMouseMovement
-    })));
+    })), isUploading ? /*#__PURE__*/React.createElement(ProgressBar, {
+      progress: progress,
+      breakpoint: this.breakpoint,
+      positionBottom: true,
+      showOnTop: true
+    }) : null);
   }
 
 }

package/dist/es2019/root/ui/loadingRateLimited/styled.js

@@ -31,7 +31,7 @@ export const LoadingRateLimitedTextWrapper = styled.div`
     display: block;
     width:100%;
     text-align:center;
-    ${generateResponsiveStyles(breakpoint, positionBottom, 1)}
+    ${generateResponsiveStyles(breakpoint, positionBottom, false, 1)}
   `}
 `;
 LoadingRateLimitedTextWrapper.displayName = 'LoadingRateLimitedTextWrapper';

package/dist/es2019/root/ui/progressBar/progressBar.js

@@ -4,12 +4,14 @@ import { Breakpoint } from '../common';
 export const ProgressBar = ({
   progress,
   breakpoint = Breakpoint.SMALL,
-  positionBottom = false
+  positionBottom = false,
+  showOnTop = false
 }) => {
   const normalizedProgress = Math.min(1, Math.max(0, progress || 0)) * 100;
   return /*#__PURE__*/React.createElement(StyledBar, {
     progress: normalizedProgress,
     breakpoint: breakpoint,
-    positionBottom: positionBottom
+    positionBottom: positionBottom,
+    showOnTop: showOnTop
   });
 };

package/dist/es2019/root/ui/progressBar/styled.js

@@ -15,19 +15,20 @@ const smallSizeSettings = {
 const largeSizeSettings = {
   marginBottom: 12
 };
-export function generateResponsiveStyles(breakpoint, positionBottom, multiplier = 1) {
+export function generateResponsiveStyles(breakpoint, positionBottom, showOnTop, multiplier = 1) {
   const setting = breakpoint === Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
   const marginPositionBottom = responsiveSettings[breakpoint].titleBox.verticalPadding;
   const marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : getTitleBoxHeight(breakpoint));
   return `
-    bottom: ${marginBottom}px
+    ${showOnTop ? 'top' : 'bottom'}: ${marginBottom}px
   `;
 }
 export const StyledBar = styled.div`
   ${({
   progress,
   breakpoint,
-  positionBottom
+  positionBottom,
+  showOnTop
 }) => `
     ${borderRadius}
     overflow: hidden;
@@ -37,6 +38,7 @@ export const StyledBar = styled.div`
     background-color: ${rgba(N0, 0.8)};
     height: ${height + padding * 2}px;
     padding: ${padding}px;
+    box-sizing: border-box;
 
     ::before {
       content: '';
@@ -47,7 +49,7 @@ export const StyledBar = styled.div`
       display: block;
     }
 
-    ${generateResponsiveStyles(breakpoint, positionBottom)}
+    ${generateResponsiveStyles(breakpoint, positionBottom, showOnTop)}
 `}
 `;
 StyledBar.displayName = 'StyledProgressBar';

package/dist/es2019/root/ui/styled.js

@@ -118,7 +118,7 @@ export const NewFileExperienceWrapper = styled.div`
     }
 
     /* Tooltip does not support percentage dimensions. We enforce them here */
-    ${shouldDisplayTooltip ? `> div { ${getWrapperDimensions(dimensions, appearance)} }` : ''}
+    ${shouldDisplayTooltip ? `> div { width: 100%; height: 100% }` : ''}
 `}
 `;
 NewFileExperienceWrapper.displayName = 'NewFileExperienceWrapper';