@atlaskit/media-card 73.0.0 → 73.1.2

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/ui/loadingRateLimited/styled.js

@@ -10,7 +10,7 @@ export var WarningIconWrapper = styled.div(_templateObject2 || (_templateObject2
 export var LoadingRateLimitedTextWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
   var breakpoint = _ref.breakpoint,
       positionBottom = _ref.positionBottom;
-  return "\n    margin-top: 10px;\n    overflow: hidden;\n    color: ".concat(N300, ";\n    display: block;\n    width:100%;\n    text-align:center;\n    ").concat(generateResponsiveStyles(breakpoint, positionBottom, 1), "\n  ");
+  return "\n    margin-top: 10px;\n    overflow: hidden;\n    color: ".concat(N300, ";\n    display: block;\n    width:100%;\n    text-align:center;\n    ").concat(generateResponsiveStyles(breakpoint, positionBottom, false, 1), "\n  ");
 });
 LoadingRateLimitedTextWrapper.displayName = 'LoadingRateLimitedTextWrapper';
 export var CouldntLoadWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-weight: 550;\n"])));

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

@@ -6,11 +6,14 @@ export var ProgressBar = function ProgressBar(_ref) {
       _ref$breakpoint = _ref.breakpoint,
       breakpoint = _ref$breakpoint === void 0 ? 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.createElement(StyledBar, {
     progress: normalizedProgress,
     breakpoint: breakpoint,
-    positionBottom: positionBottom
+    positionBottom: positionBottom,
+    showOnTop: showOnTop
   });
 };

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

@@ -19,17 +19,18 @@ var smallSizeSettings = {
 var largeSizeSettings = {
   marginBottom: 12
 };
-export function generateResponsiveStyles(breakpoint, positionBottom) {
-  var multiplier = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+export function generateResponsiveStyles(breakpoint, positionBottom, showOnTop) {
+  var multiplier = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
   var setting = breakpoint === Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
   var marginPositionBottom = responsiveSettings[breakpoint].titleBox.verticalPadding;
   var marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : getTitleBoxHeight(breakpoint));
-  return "\n    bottom: ".concat(marginBottom, "px\n  ");
+  return "\n    ".concat(showOnTop ? 'top' : 'bottom', ": ").concat(marginBottom, "px\n  ");
 }
 export var StyledBar = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
   var progress = _ref.progress,
       breakpoint = _ref.breakpoint,
-      positionBottom = _ref.positionBottom;
-  return "\n    ".concat(borderRadius, "\n    overflow: hidden;\n    position: absolute;\n    width: ").concat(width, "%;\n    left: ").concat(left, "%;\n    background-color: ").concat(rgba(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(N400, ";\n      ").concat(borderRadius, "\n      display: block;\n    }\n\n    ").concat(generateResponsiveStyles(breakpoint, positionBottom), "\n");
+      positionBottom = _ref.positionBottom,
+      showOnTop = _ref.showOnTop;
+  return "\n    ".concat(borderRadius, "\n    overflow: hidden;\n    position: absolute;\n    width: ").concat(width, "%;\n    left: ").concat(left, "%;\n    background-color: ").concat(rgba(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(N400, ";\n      ").concat(borderRadius, "\n      display: block;\n    }\n\n    ").concat(generateResponsiveStyles(breakpoint, positionBottom, showOnTop), "\n");
 });
 StyledBar.displayName = 'StyledProgressBar';

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

@@ -92,7 +92,7 @@ export var NewFileExperienceWrapper = styled.div(_templateObject || (_templateOb
       isPlayButtonClickable = _ref6.isPlayButtonClickable,
       isTickBoxSelectable = _ref6.isTickBoxSelectable,
       shouldDisplayTooltip = _ref6.shouldDisplayTooltip;
-  return "\n    ".concat(transition(), "\n    box-sizing: border-box;\n    * {\n      box-sizing: border-box;\n    }\n    position: relative;\n    font-family: ").concat(fontFamily(), ";\n    ").concat(getWrapperDimensions(dimensions, appearance), "\n    ").concat(displayBackground ? "background-color: ".concat(N20, ";") : '', "\n    ").concat(borderRadius, "\n    ").concat(getCursorStyle(shouldUsePointerCursor), "\n    ").concat(getWrapperShadow(disableOverlay, selected), "\n    ").concat(generateResponsiveStyles(breakpoint), "\n    ").concat(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(blanketClassName, " {\n      ").concat(fixedBlanketStyles, "\n    }\n\n    &:hover .").concat(actionsBarClassName, " {\n      ").concat(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(transition(), "\n    box-sizing: border-box;\n    * {\n      box-sizing: border-box;\n    }\n    position: relative;\n    font-family: ").concat(fontFamily(), ";\n    ").concat(getWrapperDimensions(dimensions, appearance), "\n    ").concat(displayBackground ? "background-color: ".concat(N20, ";") : '', "\n    ").concat(borderRadius, "\n    ").concat(getCursorStyle(shouldUsePointerCursor), "\n    ").concat(getWrapperShadow(disableOverlay, selected), "\n    ").concat(generateResponsiveStyles(breakpoint), "\n    ").concat(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(blanketClassName, " {\n      ").concat(fixedBlanketStyles, "\n    }\n\n    &:hover .").concat(actionsBarClassName, " {\n      ").concat(fixedActionBarStyles, "\n    }\n\n    /* Tooltip does not support percentage dimensions. We enforce them here */\n    ").concat(shouldDisplayTooltip ? "> div { width: 100%; height: 100% }" : '', "\n");
 });
 NewFileExperienceWrapper.displayName = 'NewFileExperienceWrapper';
 export var CardImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  max-width: 100%;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), borderRadius);

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

@@ -5,6 +5,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["triggerRef"];
 
 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); }; }
 
@@ -85,7 +86,7 @@ export var CardActionsDropdownMenu = /*#__PURE__*/function (_Component) {
           onOpenChange: onOpenChange,
           trigger: function trigger(_ref) {
             var triggerRef = _ref.triggerRef,
-                providedProps = _objectWithoutProperties(_ref, ["triggerRef"]);
+                providedProps = _objectWithoutProperties(_ref, _excluded);
 
             return /*#__PURE__*/React.createElement(CardActionButtonWithAnalytics, _extends({
               variant: triggerVariant,

package/dist/esm/utils/viewportDetector.js

@@ -4,8 +4,30 @@ 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; }
 
-import React, { useEffect } from 'react';
-import { LazyContent } from './lazyContent';
+import React, { useEffect, forwardRef } from 'react';
+/**
+ * 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.
+ */
+
+export var ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900; //px
+
+export var ViewportAnchor = /*#__PURE__*/forwardRef(function (props, ref) {
+  if (typeof IntersectionObserver === 'undefined') {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: "media-card-viewport-anchor",
+    style: {
+      position: 'absolute',
+      top: "".concat(props.offsetTop, "px"),
+      maxHeight: 0,
+      pointerEvents: 'none'
+    }
+  });
+});
 
 var createIntersectionObserverCallback = function createIntersectionObserverCallback(onVisible) {
   return function (entries, observer) {
@@ -30,33 +52,40 @@ 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;
   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.createElement(React.Fragment, null, children);
 };
 
-export var createViewportDetector = function createViewportDetector(isIntersectionObserverSupported) {
-  return function (_ref2) {
-    var children = _ref2.children,
-        targetRef = _ref2.targetRef,
-        onVisible = _ref2.onVisible;
-    return isIntersectionObserverSupported ? /*#__PURE__*/React.createElement(Observer, {
-      targetRef: targetRef,
-      onVisible: onVisible
-    }, children) : /*#__PURE__*/React.createElement(LazyContent, {
-      placeholder: /*#__PURE__*/React.createElement(React.Fragment, null, children),
-      onRender: onVisible
-    }, children);
-  };
-};
-export var ViewportDetector = createViewportDetector(typeof IntersectionObserver !== 'undefined');
+export 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.createElement(React.Fragment, null, children);
+  }
+
+  return /*#__PURE__*/React.createElement(ViewportObserver, {
+    cardEl: cardEl,
+    preAnchorRef: preAnchorRef,
+    postAnchorRef: postAnchorRef,
+    onVisible: onVisible
+  }, children);
+};

package/dist/esm/version.json

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

package/dist/types/index.d.ts

@@ -53,6 +53,7 @@ export interface CardProps extends SharedCardProps, CardEventProps {
 export interface CardState {
     status: CardStatus;
     isCardVisible: boolean;
+    shouldAutoplay?: boolean;
     isPlayingFile: boolean;
     mediaViewerSelectedItem?: Identifier;
     fileState?: FileState;

package/dist/types/root/card/index.d.ts

@@ -7,6 +7,8 @@ import { CardAction, CardProps, CardState } from '../..';
 export declare type CardBaseProps = CardProps & WithAnalyticsEventsProps & Partial<WrappedComponentProps>;
 export declare class CardBase extends Component<CardBaseProps, CardState> {
     private hasBeenMounted;
+    private viewportPreAnchorRef;
+    private viewportPostAnchorRef;
     private timeElapsedTillCommenced;
     subscription?: Subscription;
     static defaultProps: Partial<CardProps>;

package/dist/types/root/cardView.d.ts

@@ -73,4 +73,4 @@ export declare class CardViewBase extends React.Component<CardViewProps, CardVie
     private getRenderConfigByStatus;
     private renderNewExperienceCard;
 }
-export declare const CardView: React.ForwardRefExoticComponent<Pick<Pick<CardViewProps, "progress" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "appearance" | "error" | "actions" | "testId" | "selectable" | "selected" | "alt" | "disableOverlay" | "dimensions" | "featureFlags" | "dataURI" | "status" | "mediaItemType" | "resizeMode" | "onDisplayImage" | "previewOrientation" | "onImageError" | "onImageLoad" | "forceSyncDisplay" | "nativeLazyLoad" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">, never> & Partial<Pick<Pick<CardViewProps, "progress" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "appearance" | "error" | "actions" | "testId" | "selectable" | "selected" | "alt" | "disableOverlay" | "dimensions" | "featureFlags" | "dataURI" | "status" | "mediaItemType" | "resizeMode" | "onDisplayImage" | "previewOrientation" | "onImageError" | "onImageLoad" | "forceSyncDisplay" | "nativeLazyLoad" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">, "progress" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "appearance" | "error" | "actions" | "testId" | "selectable" | "selected" | "alt" | "disableOverlay" | "dimensions" | "featureFlags" | "dataURI" | "status" | "mediaItemType" | "resizeMode" | "onDisplayImage" | "previewOrientation" | "onImageError" | "onImageLoad" | "forceSyncDisplay" | "nativeLazyLoad" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">> & Partial<Pick<Partial<CardViewOwnProps>, never>> & React.RefAttributes<any>>;
+export declare const CardView: React.ForwardRefExoticComponent<Pick<Pick<CardViewProps, "progress" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "testId" | "appearance" | "error" | "actions" | "selectable" | "selected" | "alt" | "disableOverlay" | "dimensions" | "featureFlags" | "dataURI" | "status" | "mediaItemType" | "resizeMode" | "onDisplayImage" | "previewOrientation" | "onImageError" | "onImageLoad" | "forceSyncDisplay" | "nativeLazyLoad" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">, never> & Partial<Pick<Pick<CardViewProps, "progress" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "testId" | "appearance" | "error" | "actions" | "selectable" | "selected" | "alt" | "disableOverlay" | "dimensions" | "featureFlags" | "dataURI" | "status" | "mediaItemType" | "resizeMode" | "onDisplayImage" | "previewOrientation" | "onImageError" | "onImageLoad" | "forceSyncDisplay" | "nativeLazyLoad" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">, "progress" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "testId" | "appearance" | "error" | "actions" | "selectable" | "selected" | "alt" | "disableOverlay" | "dimensions" | "featureFlags" | "dataURI" | "status" | "mediaItemType" | "resizeMode" | "onDisplayImage" | "previewOrientation" | "onImageError" | "onImageLoad" | "forceSyncDisplay" | "nativeLazyLoad" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">> & Partial<Pick<Partial<CardViewOwnProps>, never>> & React.RefAttributes<any>>;

package/dist/types/root/inline/loader.d.ts

@@ -16,8 +16,10 @@ export default class MediaInlineCardLoader extends React.PureComponent<MediaInli
     static displayName: string;
     static MediaInlineCard?: MediaInlineCardWithMediaClientConfigComponent;
     static ErrorBoundary?: ErrorBoundaryComponent;
+    isMounted: boolean;
     state: MediaInlineCardLoaderState;
     componentDidMount(): Promise<void>;
+    componentWillUnmount(): Promise<void>;
     render(): JSX.Element;
 }
 export {};

package/dist/types/root/inlinePlayer.d.ts

@@ -10,6 +10,7 @@ export interface InlinePlayerOwnProps {
     mediaClient: MediaClient;
     dimensions?: CardDimensions;
     originalDimensions?: NumericalCardDimensions;
+    autoplay: boolean;
     selected?: boolean;
     onError?: (error: Error) => void;
     readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
@@ -19,11 +20,15 @@ export interface InlinePlayerOwnProps {
 export declare type InlinePlayerProps = InlinePlayerOwnProps & WithAnalyticsEventsProps;
 export interface InlinePlayerState {
     fileSrc?: string;
+    isUploading?: boolean;
+    progress?: number;
+    elementWidth?: number;
 }
 export declare const getPreferredVideoArtifact: (fileState: FileState) => keyof MediaFileArtifacts | undefined;
 export declare class InlinePlayerBase extends Component<InlinePlayerProps, InlinePlayerState> {
     subscription?: Subscription;
     state: InlinePlayerState;
+    divRef: React.RefObject<HTMLDivElement>;
     static defaultProps: {
         dimensions: {
             width: number;
@@ -38,6 +43,8 @@ export declare class InlinePlayerBase extends Component<InlinePlayerProps, Inlin
     componentWillUnmount(): void;
     onDownloadClick: () => void;
     onFirstPlay: () => void;
+    private get breakpoint();
+    saveElementWidth: () => void;
     render(): JSX.Element;
 }
-export declare const InlinePlayer: React.ForwardRefExoticComponent<Pick<InlinePlayerProps, "onError" | "onClick" | "createAnalyticsEvent" | "testId" | "selected" | "dimensions" | "originalDimensions" | "mediaClient" | "identifier" | "forwardRef"> & React.RefAttributes<HTMLDivElement>>;
+export declare const InlinePlayer: React.ForwardRefExoticComponent<Pick<InlinePlayerProps, "onError" | "onClick" | "testId" | "createAnalyticsEvent" | "selected" | "dimensions" | "originalDimensions" | "mediaClient" | "identifier" | "autoplay" | "forwardRef"> & React.RefAttributes<HTMLDivElement>>;

package/dist/types/root/ui/progressBar/progressBar.d.ts

@@ -4,5 +4,6 @@ export declare type ProgressBarProps = {
     progress?: number;
     breakpoint?: Breakpoint;
     positionBottom?: boolean;
+    showOnTop?: boolean;
 };
-export declare const ProgressBar: ({ progress, breakpoint, positionBottom, }: ProgressBarProps) => JSX.Element;
+export declare const ProgressBar: ({ progress, breakpoint, positionBottom, showOnTop, }: ProgressBarProps) => JSX.Element;

package/dist/types/root/ui/progressBar/styled.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 import { Breakpoint } from '../common';
-export declare function generateResponsiveStyles(breakpoint: Breakpoint, positionBottom: boolean, multiplier?: number): string;
+export declare function generateResponsiveStyles(breakpoint: Breakpoint, positionBottom: boolean, showOnTop: boolean, multiplier?: number): string;
 export declare type StyledBarProps = {
     progress: number;
     breakpoint: Breakpoint;
     positionBottom: boolean;
+    showOnTop: boolean;
 };
 export declare const StyledBar: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyledBarProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyledBarProps>;

package/dist/types/utils/viewportDetector.d.ts

@@ -1,8 +1,16 @@
-import React, { FC } from 'react';
-declare type ViewportDetectorProps = {
-    targetRef: HTMLElement | null;
+import React from 'react';
+/**
+ * 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.
+ */
+export declare const ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900;
+export declare const ViewportAnchor: React.ForwardRefExoticComponent<{
+    offsetTop: number;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare type ViewportDetectorProps = {
+    cardEl: HTMLElement | null;
+    preAnchorRef: React.RefObject<HTMLDivElement>;
+    postAnchorRef: React.RefObject<HTMLDivElement>;
     onVisible: () => void;
 };
-export declare const createViewportDetector: (isIntersectionObserverSupported: boolean) => React.FC<ViewportDetectorProps>;
 export declare const ViewportDetector: React.FC<ViewportDetectorProps>;
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "73.0.0",
+  "version": "73.1.2",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,20 +31,19 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/dropdown-menu": "^11.0.0",
     "@atlaskit/editor-shared-styles": "^1.6.0",
-    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/icon": "^21.10.0",
     "@atlaskit/in-product-testing": "^0.1.0",
     "@atlaskit/media-client": "^14.3.0",
     "@atlaskit/media-common": "^2.10.0",
-    "@atlaskit/media-ui": "^18.0.0",
+    "@atlaskit/media-ui": "^18.1.0",
     "@atlaskit/media-viewer": "^46.0.0",
     "@atlaskit/spinner": "^15.1.0",
-    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@babel/runtime": "^7.0.0",
     "classnames": "^2.2.5",
     "eventemitter2": "^4.1.0",
     "lru-fast": "^0.2.2",
-    "react-lazily-render": "^1.2.0",
     "react-loadable": "^5.1.0",
     "video-snapshot": "^1.0.11"
   },
@@ -56,9 +55,8 @@
     "styled-components": "^3.2.6"
   },
   "devDependencies": {
-    "@atlaskit/analytics-listeners": "^8.0.0",
-    "@atlaskit/analytics-namespaced-context": "^6.3.0",
-    "@atlaskit/build-utils": "*",
+    "@atlaskit/analytics-listeners": "^8.2.0",
+    "@atlaskit/analytics-namespaced-context": "^6.4.0",
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/checkbox": "^12.3.0",
     "@atlaskit/docs": "*",
@@ -71,7 +69,7 @@
     "@atlaskit/select": "^15.2.1",
     "@atlaskit/ssr": "*",
     "@atlaskit/textfield": "^5.1.0",
-    "@atlaskit/toggle": "^12.3.0",
+    "@atlaskit/toggle": "^12.4.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",

package/dist/cjs/utils/lazyContent/index.js

@@ -1,56 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LazyContent = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styled = require("./styled");
-
-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); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var LazyContent = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(LazyContent, _React$Component);
-
-  var _super = _createSuper(LazyContent);
-
-  function LazyContent() {
-    (0, _classCallCheck2.default)(this, LazyContent);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(LazyContent, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          placeholder = _this$props.placeholder,
-          onRender = _this$props.onRender;
-      return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
-        offset: 300,
-        onRender: onRender,
-        placeholder: placeholder,
-        content: children
-      });
-    }
-  }]);
-  return LazyContent;
-}(_react.default.Component);
-
-exports.LazyContent = LazyContent;