@atlaskit/media-card 77.1.1 → 77.2.0

package/dist/esm/card/card.js

@@ -37,10 +37,10 @@ import { StoreSSRDataScript, getSSRData } from '../utils/globalScope';
 import { getCardStateFromFileState, createStateUpdater } from './cardState';
 import { isBigger } from '../utils/dimensionComparer';
 import { getMediaCardCursor } from '../utils/getMediaCardCursor';
-import { completeUfoExperience, startUfoExperience } from '../utils/ufoExperiences';
+import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.1.1";
+var packageVersion = "77.2.0";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);
@@ -108,8 +108,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       var _this$props2 = _this.props,
         _this$props2$dimensio = _this$props2.dimensions,
         dimensions = _this$props2$dimensio === void 0 ? {} : _this$props2$dimensio,
-        mediaClient = _this$props2.mediaClient,
-        createAnalyticsEvent = _this$props2.createAnalyticsEvent;
+        mediaClient = _this$props2.mediaClient;
       return {
         mediaClient: mediaClient,
         id: id,
@@ -119,8 +118,6 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         isRemotePreviewReady: isImageRepresentationReady(fileState),
         imageUrlParams: _this.getImageURLParams(identifier),
         mediaBlobUrlAttrs: _this.getMediaBlobUrlAttrs(identifier, fileState),
-        createAnalyticsEvent: createAnalyticsEvent,
-        featureFlags: _this.props.featureFlags,
         traceContext: _this.traceContext
       };
     });
@@ -759,10 +756,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         mediaClient = _this$props12.mediaClient,
         identifier = _this$props12.identifier,
         dimensions = _this$props12.dimensions,
-        featureFlags = _this$props12.featureFlags,
         useInlinePlayer = _this$props12.useInlinePlayer,
         disableOverlay = _this$props12.disableOverlay,
-        resizeMode = _this$props12.resizeMode,
         ssr = _this$props12.ssr;
       var _this$state4 = this.state,
         isCardVisible = _this$state4.isCardVisible,
@@ -789,7 +784,6 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       var turnedVisible = !prevIsCardVisible && isCardVisible;
       var hadSSRCardPreview = !!prevCardPreview && isSSRClientPreview(prevCardPreview) && !cardPreview;
       var isNewMediaClient = prevMediaClient !== mediaClient;
-      var fileImageMode = imageResizeModeToFileImageMode(resizeMode);
       this.updateFileStateFlag(fileState);
       if (isExternalImageIdentifier(identifier) && isDiffIdentifier) {
         this.fireCommencedEvent();
@@ -828,9 +822,6 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         fileState: fileState,
         prevDimensions: prevDimensions,
         dimensions: dimensions,
-        identifier: identifier,
-        fileImageMode: fileImageMode,
-        featureFlags: featureFlags,
         hasCardPreview: !!cardPreview,
         isBannedLocalPreview: isBannedLocalPreview,
         wasResolvedUpfrontPreview: wasResolvedUpfrontPreview
@@ -864,6 +855,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       var _getDocument2;
+      this.fireAbortedEvent();
       this.hasBeenMounted = false;
       this.unsubscribe();
       (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 || _getDocument2.removeEventListener('copy', this.fireCopiedEvent);
@@ -902,8 +894,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         occurrenceKey: occurrenceKey
       }).subscribe({
         next: function next(fileState) {
-          var featureFlags = _this2.props.featureFlags;
-          var newState = getCardStateFromFileState(fileState, isBannedLocalPreview, featureFlags);
+          var newState = getCardStateFromFileState(fileState, isBannedLocalPreview);
           _this2.safeSetState(newState);
         },
         error: function error(e) {
@@ -950,6 +941,19 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       createAnalyticsEvent && _fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error, this.traceContext, fileState === null || fileState === void 0 ? void 0 : fileState.metadataTraceContext);
       completeUfoExperience(this.internalOccurrenceKey, status, this.fileAttributes, this.fileStateFlags, this.ssrReliability, error);
     }
+  }, {
+    key: "fireAbortedEvent",
+    value: function fireAbortedEvent() {
+      var fileAttributes = this.fileAttributes,
+        fileStateFlags = this.fileStateFlags,
+        ssrReliability = this.ssrReliability;
+      // UFO won't abort if it's already in a final state (succeeded, failed, aborted, etc)
+      abortUfoExperience(this.internalOccurrenceKey, {
+        fileAttributes: fileAttributes,
+        fileStateFlags: fileStateFlags,
+        ssrReliability: ssrReliability
+      });
+    }
   }, {
     key: "fireCommencedEvent",
     value: function fireCommencedEvent() {

package/dist/esm/card/cardState.js

@@ -19,7 +19,7 @@ export var createStateUpdater = function createStateUpdater(newState, fireErrorE
     return newState;
   };
 };
-export var getCardStateFromFileState = function getCardStateFromFileState(fileState, isBannedLocalPreview, featureFlags) {
+export var getCardStateFromFileState = function getCardStateFromFileState(fileState, isBannedLocalPreview) {
   var status = getCardStatus(fileState.status, extractFilePreviewStatus(fileState, isBannedLocalPreview));
   var error = status === 'error' && isErrorFileState(fileState) ? new MediaCardError('error-file-state', new Error(fileState.message)) : undefined;
   var progress = status === 'uploading' && fileState.status === 'uploading' ? fileState.progress : 1;

package/dist/esm/card/getCardPreview/index.js

@@ -64,11 +64,11 @@ var extendAndCachePreview = function extendAndCachePreview(id, mode, preview, me
  */
 export var getCardPreview = /*#__PURE__*/function () {
   var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
-    var mediaClient, id, _ref$dimensions, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, createAnalyticsEvent, featureFlags, traceContext, mode, cachedPreview, dimensionsAreBigger, localPreview, remotePreview;
+    var mediaClient, id, _ref$dimensions, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, traceContext, mode, cachedPreview, dimensionsAreBigger, localPreview, remotePreview;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          mediaClient = _ref.mediaClient, id = _ref.id, _ref$dimensions = _ref.dimensions, dimensions = _ref$dimensions === void 0 ? {} : _ref$dimensions, filePreview = _ref.filePreview, onLocalPreviewError = _ref.onLocalPreviewError, isRemotePreviewReady = _ref.isRemotePreviewReady, imageUrlParams = _ref.imageUrlParams, mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs, createAnalyticsEvent = _ref.createAnalyticsEvent, featureFlags = _ref.featureFlags, traceContext = _ref.traceContext;
+          mediaClient = _ref.mediaClient, id = _ref.id, _ref$dimensions = _ref.dimensions, dimensions = _ref$dimensions === void 0 ? {} : _ref$dimensions, filePreview = _ref.filePreview, onLocalPreviewError = _ref.onLocalPreviewError, isRemotePreviewReady = _ref.isRemotePreviewReady, imageUrlParams = _ref.imageUrlParams, mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs, traceContext = _ref.traceContext;
           mode = imageUrlParams.mode;
           cachedPreview = cardPreviewCache.get(id, mode);
           dimensionsAreBigger = isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, dimensions);
@@ -145,11 +145,8 @@ export var shouldResolvePreview = function shouldResolvePreview(_ref3) {
     fileState = _ref3.fileState,
     prevDimensions = _ref3.prevDimensions,
     dimensions = _ref3.dimensions,
-    identifier = _ref3.identifier,
-    fileImageMode = _ref3.fileImageMode,
     hasCardPreview = _ref3.hasCardPreview,
     isBannedLocalPreview = _ref3.isBannedLocalPreview,
-    featureFlags = _ref3.featureFlags,
     wasResolvedUpfrontPreview = _ref3.wasResolvedUpfrontPreview;
   var statusIsPreviewable = isPreviewableStatus(status, extractFilePreviewStatus(fileState, isBannedLocalPreview));
   var dimensionsAreBigger = isBigger(prevDimensions, dimensions);

package/dist/esm/card/media-card-analytics-error-boundary.js

@@ -83,7 +83,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.1.1";
+var packageVersion = "77.2.0";
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/esm/card/useBreakpoint.js

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+import { calcBreakpointSize } from './ui/styles';
+import { getElementDimension, isValidPercentageUnit, defaultImageCardDimensions } from '../utils';
+
+// Hook to calculate the breakpoint based on the width of the element
+export var useBreakpoint = function useBreakpoint() {
+  var dimensionWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var divRef = arguments.length > 1 ? arguments[1] : undefined;
+  var breakpoint = useMemo(function () {
+    var widthToCalculate;
+    if (dimensionWidth) {
+      if (isValidPercentageUnit(dimensionWidth) && divRef.current) {
+        var width = getElementDimension(divRef.current, 'width');
+        widthToCalculate = width || defaultImageCardDimensions.width;
+      } else {
+        widthToCalculate = dimensionWidth;
+      }
+    } else {
+      widthToCalculate = defaultImageCardDimensions.width;
+    }
+    return calcBreakpointSize(parseInt("".concat(widthToCalculate), 10));
+  }, [dimensionWidth, divRef]);
+  return breakpoint;
+};

package/dist/esm/card/v2/cardV2.js

@@ -28,7 +28,7 @@ import { videoIsPlayable } from '../../utils/videoIsPlayable';
 import { getRequestedDimensions } from '../../utils/getDataURIDimension';
 import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview, getSSRCardPreview, isLocalPreview, isSSRPreview, isSSRClientPreview, isSSRDataPreview, fetchAndCacheRemotePreview } from '../getCardPreview';
 import { getFileDetails } from '../../utils/metadata';
-import { InlinePlayerLazy } from '../inlinePlayerLazy';
+import { InlinePlayerLazyV2 } from './inlinePlayerLazyV2';
 import { getFileAttributes, extractErrorInfo } from '../../utils/analytics';
 import { isLocalPreviewError, MediaCardError, MediaFileStateError, ensureMediaCardError, ImageLoadError } from '../../errors';
 import { fireOperationalEvent as _fireOperationalEvent, fireCommencedEvent as _fireCommencedEvent, fireCopiedEvent, fireScreenEvent, fireNonCriticalErrorEvent } from '../cardAnalytics';
@@ -37,11 +37,11 @@ import { StoreSSRDataScript, getSSRData } from '../../utils/globalScope';
 import { getCardStateFromFileState, createStateUpdater } from '../cardState';
 import { isBigger } from '../../utils/dimensionComparer';
 import { getMediaCardCursor } from '../../utils/getMediaCardCursor';
-import { completeUfoExperience, startUfoExperience } from '../../utils/ufoExperiences';
+import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '../../utils/ufoExperiences';
 import { generateUniqueId } from '../../utils/generateUniqueId';
 import { useFileState } from '@atlaskit/media-client-react';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.1.1";
+var packageVersion = "77.2.0";
 export var CardV2Base = /*#__PURE__*/function (_Component) {
   _inherits(CardV2Base, _Component);
   var _super = _createSuper(CardV2Base);
@@ -109,8 +109,7 @@ export var CardV2Base = /*#__PURE__*/function (_Component) {
       var _this$props2 = _this.props,
         _this$props2$dimensio = _this$props2.dimensions,
         dimensions = _this$props2$dimensio === void 0 ? {} : _this$props2$dimensio,
-        mediaClient = _this$props2.mediaClient,
-        createAnalyticsEvent = _this$props2.createAnalyticsEvent;
+        mediaClient = _this$props2.mediaClient;
       return {
         mediaClient: mediaClient,
         id: id,
@@ -120,8 +119,6 @@ export var CardV2Base = /*#__PURE__*/function (_Component) {
         isRemotePreviewReady: isImageRepresentationReady(fileState),
         imageUrlParams: _this.getImageURLParams(identifier),
         mediaBlobUrlAttrs: _this.getMediaBlobUrlAttrs(identifier, fileState),
-        createAnalyticsEvent: createAnalyticsEvent,
-        featureFlags: _this.props.featureFlags,
         traceContext: _this.traceContext
       };
     });
@@ -264,8 +261,7 @@ export var CardV2Base = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "subscribeFileState", function (fileState) {
       var isBannedLocalPreview = _this.state.isBannedLocalPreview;
       if (fileState.status !== 'error') {
-        var featureFlags = _this.props.featureFlags;
-        var newState = getCardStateFromFileState(fileState, isBannedLocalPreview, featureFlags);
+        var newState = getCardStateFromFileState(fileState, isBannedLocalPreview);
         _this.safeSetState(newState);
       } else {
         var e = new MediaFileStateError(fileState.id, fileState.reason, fileState.message, fileState.details);
@@ -447,7 +443,6 @@ export var CardV2Base = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "renderInlinePlayer", function () {
       var _this$props6 = _this.props,
         identifier = _this$props6.identifier,
-        mediaClient = _this$props6.mediaClient,
         dimensions = _this$props6.dimensions,
         selected = _this$props6.selected,
         testId = _this$props6.testId,
@@ -459,8 +454,7 @@ export var CardV2Base = /*#__PURE__*/function (_Component) {
       var card = _this.renderCard(false, 'loading', false);
       return /*#__PURE__*/React.createElement(Suspense, {
         fallback: card
-      }, /*#__PURE__*/React.createElement(InlinePlayerLazy, {
-        mediaClient: mediaClient,
+      }, /*#__PURE__*/React.createElement(InlinePlayerLazyV2, {
         dimensions: dimensions,
         originalDimensions: originalDimensions,
         identifier: identifier,
@@ -727,7 +721,7 @@ export var CardV2Base = /*#__PURE__*/function (_Component) {
         ssr = _this$props11.ssr,
         dimensions = _this$props11.dimensions;
       if (isCardVisible && isFileIdentifier(identifier)) {
-        this.updateStateForIdentifier(identifier);
+        this.updateStateForIdentifier();
         if (!cardPreview) {
           this.resolveUpfrontPreview(identifier);
         }
@@ -764,10 +758,8 @@ export var CardV2Base = /*#__PURE__*/function (_Component) {
         mediaClient = _this$props12.mediaClient,
         identifier = _this$props12.identifier,
         dimensions = _this$props12.dimensions,
-        featureFlags = _this$props12.featureFlags,
         useInlinePlayer = _this$props12.useInlinePlayer,
         disableOverlay = _this$props12.disableOverlay,
-        resizeMode = _this$props12.resizeMode,
         ssr = _this$props12.ssr;
       var _this$state4 = this.state,
         isCardVisible = _this$state4.isCardVisible,
@@ -794,7 +786,6 @@ export var CardV2Base = /*#__PURE__*/function (_Component) {
       var turnedVisible = !prevIsCardVisible && isCardVisible;
       var hadSSRCardPreview = !!prevCardPreview && isSSRClientPreview(prevCardPreview) && !cardPreview;
       var isNewMediaClient = prevMediaClient !== mediaClient;
-      var fileImageMode = imageResizeModeToFileImageMode(resizeMode);
       this.updateFileStateFlag(fileState);
       if (isExternalImageIdentifier(identifier) && isDiffIdentifier) {
         this.fireCommencedEvent();
@@ -815,7 +806,7 @@ export var CardV2Base = /*#__PURE__*/function (_Component) {
         this.refetchSSRPreview(identifier);
       }
       if (isFileIdentifier(identifier) && (turnedVisible || !!this.subscription && (isNewMediaClient || isDiffIdentifier))) {
-        this.updateStateForIdentifier(identifier);
+        this.updateStateForIdentifier();
       }
       if (this.state.status !== prevState.status) {
         this.fireOperationalEvent();
@@ -833,9 +824,6 @@ export var CardV2Base = /*#__PURE__*/function (_Component) {
         fileState: fileState,
         prevDimensions: prevDimensions,
         dimensions: dimensions,
-        identifier: identifier,
-        fileImageMode: fileImageMode,
-        featureFlags: featureFlags,
         hasCardPreview: !!cardPreview,
         isBannedLocalPreview: isBannedLocalPreview,
         wasResolvedUpfrontPreview: wasResolvedUpfrontPreview
@@ -875,12 +863,13 @@ export var CardV2Base = /*#__PURE__*/function (_Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       var _getDocument2;
+      this.fireAbortedEvent();
       this.hasBeenMounted = false;
       (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 || _getDocument2.removeEventListener('copy', this.fireCopiedEvent);
     }
   }, {
     key: "updateStateForIdentifier",
-    value: function updateStateForIdentifier(identifier) {
+    value: function updateStateForIdentifier() {
       this.fireCommencedEvent();
       this.setState({
         shouldUpdateStateForIdentifier: true
@@ -945,6 +934,19 @@ export var CardV2Base = /*#__PURE__*/function (_Component) {
       }, this.traceContext);
       startUfoExperience(this.internalOccurrenceKey);
     }
+  }, {
+    key: "fireAbortedEvent",
+    value: function fireAbortedEvent() {
+      var fileAttributes = this.fileAttributes,
+        fileStateFlags = this.fileStateFlags,
+        ssrReliability = this.ssrReliability;
+      // UFO won't abort if it's already in a final state (succeeded, failed, aborted, etc)
+      abortUfoExperience(this.internalOccurrenceKey, {
+        fileAttributes: fileAttributes,
+        fileStateFlags: fileStateFlags,
+        ssrReliability: ssrReliability
+      });
+    }
   }, {
     key: "actions",
     get: function get() {

package/dist/esm/card/v2/cardViewV2.js

@@ -4,18 +4,15 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import React, { useEffect, useState, useRef, useMemo } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import SpinnerIcon from '@atlaskit/spinner';
 import Tooltip from '@atlaskit/tooltip';
 import { messages } from '@atlaskit/media-ui';
-import { defaultImageCardDimensions } from '../../utils/cardDimensions';
-import { isValidPercentageUnit } from '../../utils/isValidPercentageUnit';
-import { getElementDimension } from '../../utils/getElementDimension';
 import { createAndFireMediaCardEvent } from '../../utils/analytics';
 import { attachDetailsToActions } from '../actions';
-import { cardImageContainerStyles, calcBreakpointSize } from '../ui/styles';
+import { cardImageContainerStyles } from '../ui/styles';
 import { ImageRenderer } from '../ui/imageRenderer/imageRenderer';
 import { TitleBox } from '../ui/titleBox/titleBox';
 import { FailedTitleBox } from '../ui/titleBox/failedTitleBox';
@@ -29,6 +26,7 @@ import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUn
 import { isUploadError, isRateLimitedError, isPollingError } from '../../errors';
 import { Wrapper } from '../ui/wrapper';
 import { fileCardImageViewSelector } from '../classnames';
+import { useBreakpoint } from '../useBreakpoint';
 export var CardViewV2Base = function CardViewV2Base(_ref) {
   var innerRef = _ref.innerRef,
     onImageLoad = _ref.onImageLoad,
@@ -58,24 +56,13 @@ export var CardViewV2Base = function CardViewV2Base(_ref) {
     titleBoxIcon = _ref.titleBoxIcon,
     error = _ref.error,
     disableAnimation = _ref.disableAnimation;
-  var _useState = useState(),
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    elementWidth = _useState2[0],
-    setElementWidth = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    didImageRender = _useState4[0],
-    setDidImageRender = _useState4[1];
+    didImageRender = _useState2[0],
+    setDidImageRender = _useState2[1];
   var divRef = useRef(null);
   var prevCardPreviewRef = useRef();
-  var width = (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) || 0;
-  useEffect(function () {
-    // If the dimensions.width is a percentage, we need to transform it into a pixel value in order to get the right breakpoints applied.
-    if (width && isValidPercentageUnit(width) && !!divRef.current) {
-      var _elementWidth = getElementDimension(divRef.current, 'width');
-      setElementWidth(_elementWidth);
-    }
-  }, [width]);
+  var breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
   useEffect(function () {
     innerRef && !!divRef.current && innerRef(divRef.current);
   }, [innerRef]);
@@ -105,10 +92,6 @@ export var CardViewV2Base = function CardViewV2Base(_ref) {
     setDidImageRender(false);
     onImageError === null || onImageError === void 0 || onImageError(cardPreview);
   };
-  var breakpoint = useMemo(function () {
-    var width = elementWidth || (dimensions ? dimensions.width : '') || defaultImageCardDimensions.width;
-    return calcBreakpointSize(parseInt("".concat(width), 10));
-  }, [elementWidth, dimensions]);
   var shouldRenderPlayButton = function shouldRenderPlayButton() {
     var _ref2 = metadata || {},
       mediaType = _ref2.mediaType;

package/dist/esm/card/v2/inlinePlayerLazyV2.js

@@ -0,0 +1,23 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { lazy } from 'react';
+export var InlinePlayerLazyV2 = /*#__PURE__*/lazy( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+  var _yield$import, InlinePlayerV2;
+  return _regeneratorRuntime.wrap(function _callee$(_context) {
+    while (1) switch (_context.prev = _context.next) {
+      case 0:
+        _context.next = 2;
+        return import( /* webpackChunkName: "@atlaskit-internal_media-card-inlineplayer-v2" */
+        './inlinePlayerV2');
+      case 2:
+        _yield$import = _context.sent;
+        InlinePlayerV2 = _yield$import.InlinePlayerV2;
+        return _context.abrupt("return", {
+          default: InlinePlayerV2
+        });
+      case 5:
+      case "end":
+        return _context.stop();
+    }
+  }, _callee);
+})));

package/dist/esm/card/v2/inlinePlayerV2.js

@@ -0,0 +1,212 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useRef, useState, useEffect } from 'react';
+import { globalMediaEventEmitter } from '@atlaskit/media-client';
+import { CustomMediaPlayer, InactivityDetector } from '@atlaskit/media-ui';
+import { defaultImageCardDimensions } from '../../utils';
+import { CardLoading } from '../../utils/lightCards/cardLoading';
+import { ProgressBar } from '../ui/progressBar/progressBar';
+import { InlinePlayerWrapper } from '../inlinePlayerWrapper';
+import { useBreakpoint } from '../useBreakpoint';
+import { useFileState, useMediaClient } from '@atlaskit/media-client-react';
+export var getPreferredVideoArtifact = function getPreferredVideoArtifact(fileState) {
+  if (fileState.status === 'processed' || fileState.status === 'processing') {
+    var artifacts = fileState.artifacts;
+    if (!artifacts) {
+      return undefined;
+    }
+    return artifacts['video_1280.mp4'] ? 'video_1280.mp4' : artifacts['video_640.mp4'] ? 'video_640.mp4' : undefined;
+  }
+  return undefined;
+};
+export var InlinePlayerBaseV2 = function InlinePlayerBaseV2(_ref) {
+  var identifier = _ref.identifier,
+    onError = _ref.onError,
+    onClick = _ref.onClick,
+    _ref$dimensions = _ref.dimensions,
+    dimensions = _ref$dimensions === void 0 ? defaultImageCardDimensions : _ref$dimensions,
+    originalDimensions = _ref.originalDimensions,
+    selected = _ref.selected,
+    testId = _ref.testId,
+    forwardRef = _ref.forwardRef,
+    autoplay = _ref.autoplay,
+    cardPreview = _ref.cardPreview,
+    onFullscreenChange = _ref.onFullscreenChange;
+  // === States ===
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    fileSrc = _useState2[0],
+    setFileSrc = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isUploading = _useState4[0],
+    setIsUploading = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    progress = _useState6[0],
+    setProgress = _useState6[1];
+
+  // === Refs and Local Variables ===
+  var divRef = useRef(null);
+  var onErrorRef = useRef(onError);
+  onErrorRef.current = onError;
+  var id = identifier.id,
+    collectionName = identifier.collectionName,
+    occurrenceKey = identifier.occurrenceKey;
+  var breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  var mediaClient = useMediaClient();
+  var _useFileState = useFileState(id, {
+      collectionName: collectionName,
+      occurrenceKey: occurrenceKey
+    }),
+    fileState = _useFileState.fileState;
+  useEffect(function () {
+    var subscribeFileState = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(fileState) {
+        var _yield$fileState$prev, value, newFileSrc, artifactName, artifacts, _newFileSrc, _newFileSrc2;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (fileState.status === 'uploading') {
+                setIsUploading(true);
+                setProgress(fileState.progress);
+              } else {
+                setIsUploading(false);
+              }
+
+              // We reuse the existing fileSrc to prevent re renders, therefore we only perform fileSrc updates when there isn't any
+              if (!fileSrc) {
+                _context.next = 3;
+                break;
+              }
+              return _context.abrupt("return");
+            case 3:
+              if (!(fileState.status !== 'error' && fileState.preview)) {
+                _context.next = 12;
+                break;
+              }
+              _context.next = 6;
+              return fileState.preview;
+            case 6:
+              _yield$fileState$prev = _context.sent;
+              value = _yield$fileState$prev.value;
+              if (!(value instanceof Blob && value.type.indexOf('video/') === 0)) {
+                _context.next = 12;
+                break;
+              }
+              newFileSrc = URL.createObjectURL(value);
+              setFileSrc(newFileSrc);
+              return _context.abrupt("return");
+            case 12:
+              if (!(fileState.status === 'processed' || fileState.status === 'processing')) {
+                _context.next = 37;
+                break;
+              }
+              artifactName = getPreferredVideoArtifact(fileState);
+              artifacts = fileState.artifacts;
+              if (!(!artifactName || !artifacts)) {
+                _context.next = 27;
+                break;
+              }
+              _context.prev = 16;
+              _context.next = 19;
+              return mediaClient.file.getFileBinaryURL(id, collectionName);
+            case 19:
+              _newFileSrc = _context.sent;
+              setFileSrc(_newFileSrc);
+              _context.next = 26;
+              break;
+            case 23:
+              _context.prev = 23;
+              _context.t0 = _context["catch"](16);
+              if (onErrorRef.current && _context.t0 instanceof Error) {
+                onErrorRef.current(_context.t0);
+              }
+            case 26:
+              return _context.abrupt("return");
+            case 27:
+              _context.prev = 27;
+              _context.next = 30;
+              return mediaClient.file.getArtifactURL(artifacts, artifactName, collectionName);
+            case 30:
+              _newFileSrc2 = _context.sent;
+              setFileSrc(_newFileSrc2);
+              _context.next = 37;
+              break;
+            case 34:
+              _context.prev = 34;
+              _context.t1 = _context["catch"](27);
+              if (onErrorRef.current && _context.t1 instanceof Error) {
+                onErrorRef.current(_context.t1);
+              }
+            case 37:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[16, 23], [27, 34]]);
+      }));
+      return function subscribeFileState(_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    if (fileState) {
+      subscribeFileState(fileState);
+    }
+  }, [fileState, collectionName, fileSrc, id, mediaClient]);
+  useEffect(function () {
+    return function () {
+      fileSrc && URL.revokeObjectURL(fileSrc);
+    };
+  }, [fileSrc]);
+
+  // === Render ===
+  return fileSrc ? /*#__PURE__*/React.createElement(InlinePlayerWrapper, {
+    testId: testId || 'media-card-inline-player',
+    selected: {
+      selected: selected
+    },
+    onClick: onClick,
+    innerRef: forwardRef || undefined,
+    dimensions: dimensions
+  }, /*#__PURE__*/React.createElement(InactivityDetector, null, function (checkMouseMovement) {
+    return /*#__PURE__*/React.createElement(CustomMediaPlayer, {
+      type: "video",
+      src: fileSrc,
+      onFullscreenChange: onFullscreenChange,
+      fileId: id,
+      isAutoPlay: autoplay,
+      isHDAvailable: false,
+      onDownloadClick: function onDownloadClick() {
+        mediaClient.file.downloadBinary(id, undefined, collectionName);
+      },
+      onFirstPlay: function onFirstPlay() {
+        globalMediaEventEmitter.emit('media-viewed', {
+          fileId: id,
+          viewingLevel: 'full'
+        });
+      },
+      lastWatchTimeConfig: {
+        contentId: id
+      },
+      originalDimensions: originalDimensions,
+      showControls: checkMouseMovement,
+      poster: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI
+    });
+  }), isUploading && /*#__PURE__*/React.createElement(ProgressBar, {
+    progress: progress,
+    breakpoint: breakpoint,
+    positionBottom: true,
+    showOnTop: true
+  })) : /*#__PURE__*/React.createElement(CardLoading, {
+    testId: testId,
+    dimensions: dimensions
+  });
+};
+var InlinePlayerForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(InlinePlayerBaseV2, _extends({}, props, {
+    forwardRef: ref
+  }));
+});
+export var InlinePlayerV2 = InlinePlayerForwardRef;

package/dist/esm/inline/loader.js

@@ -103,7 +103,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "77.1.1",
+        packageName: "77.2.0",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };