@atlaskit/media-card 77.1.1 → 77.2.0

package/dist/cjs/inline/loader.js

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

package/dist/cjs/utils/ufoExperiences.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.startUfoExperience = exports.completeUfoExperience = void 0;
+exports.startUfoExperience = exports.completeUfoExperience = exports.abortUfoExperience = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _ufo = require("@atlaskit/ufo");
 var _mediaCommon = require("@atlaskit/media-common");
@@ -14,7 +14,7 @@ var _mediaClient = require("@atlaskit/media-client");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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) { (0, _defineProperty2.default)(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; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.1.1";
+var packageVersion = "77.2.0";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {
@@ -62,23 +62,27 @@ var completeUfoExperience = exports.completeUfoExperience = function completeUfo
       break;
   }
 };
+var getBasePayloadAttributes = function getBasePayloadAttributes() {
+  return {
+    packageName: packageName,
+    packageVersion: packageVersion,
+    mediaEnvironment: (0, _mediaClient.getMediaEnvironment)(),
+    mediaRegion: (0, _mediaClient.getMediaRegion)()
+  };
+};
 var succeedUfoExperience = function succeedUfoExperience(id, properties) {
   getExperience(id).success({
-    metadata: _objectSpread(_objectSpread({}, properties), {}, {
-      packageName: packageName,
-      packageVersion: packageVersion,
-      mediaEnvironment: (0, _mediaClient.getMediaEnvironment)(),
-      mediaRegion: (0, _mediaClient.getMediaRegion)()
-    })
+    metadata: _objectSpread(_objectSpread({}, properties), getBasePayloadAttributes())
   });
 };
 var failUfoExperience = function failUfoExperience(id, properties) {
   getExperience(id).failure({
-    metadata: _objectSpread(_objectSpread({}, properties), {}, {
-      packageName: packageName,
-      packageVersion: packageVersion,
-      mediaEnvironment: (0, _mediaClient.getMediaEnvironment)(),
-      mediaRegion: (0, _mediaClient.getMediaRegion)()
-    })
+    metadata: _objectSpread(_objectSpread({}, properties), getBasePayloadAttributes())
+  });
+};
+var abortUfoExperience = exports.abortUfoExperience = function abortUfoExperience(id, properties) {
+  // UFO won't abort if it's already in a final state (succeeded, failed, aborted, etc)
+  getExperience(id).abort({
+    metadata: _objectSpread(_objectSpread({}, properties), getBasePayloadAttributes())
   });
 };

package/dist/es2019/card/card.js

@@ -24,10 +24,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';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.1.1";
+const packageVersion = "77.2.0";
 export class CardBase extends Component {
   constructor(props) {
     super(props);
@@ -97,8 +97,7 @@ export class CardBase extends Component {
       } = identifier;
       const {
         dimensions = {},
-        mediaClient,
-        createAnalyticsEvent
+        mediaClient
       } = this.props;
       return {
         mediaClient,
@@ -109,8 +108,6 @@ export class CardBase extends Component {
         isRemotePreviewReady: isImageRepresentationReady(fileState),
         imageUrlParams: this.getImageURLParams(identifier),
         mediaBlobUrlAttrs: this.getMediaBlobUrlAttrs(identifier, fileState),
-        createAnalyticsEvent,
-        featureFlags: this.props.featureFlags,
         traceContext: this.traceContext
       };
     });
@@ -743,10 +740,8 @@ export class CardBase extends Component {
       mediaClient,
       identifier,
       dimensions,
-      featureFlags,
       useInlinePlayer,
       disableOverlay,
-      resizeMode,
       ssr
     } = this.props;
     const {
@@ -775,7 +770,6 @@ export class CardBase extends Component {
     const turnedVisible = !prevIsCardVisible && isCardVisible;
     const hadSSRCardPreview = !!prevCardPreview && isSSRClientPreview(prevCardPreview) && !cardPreview;
     const isNewMediaClient = prevMediaClient !== mediaClient;
-    const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
     this.updateFileStateFlag(fileState);
     if (isExternalImageIdentifier(identifier) && isDiffIdentifier) {
       this.fireCommencedEvent();
@@ -816,9 +810,6 @@ export class CardBase extends Component {
       fileState,
       prevDimensions,
       dimensions,
-      identifier,
-      fileImageMode,
-      featureFlags,
       hasCardPreview: !!cardPreview,
       isBannedLocalPreview,
       wasResolvedUpfrontPreview
@@ -851,6 +842,7 @@ export class CardBase extends Component {
   }
   componentWillUnmount() {
     var _getDocument2;
+    this.fireAbortedEvent();
     this.hasBeenMounted = false;
     this.unsubscribe();
     (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.removeEventListener('copy', this.fireCopiedEvent);
@@ -890,10 +882,7 @@ export class CardBase extends Component {
       occurrenceKey
     }).subscribe({
       next: fileState => {
-        const {
-          featureFlags
-        } = this.props;
-        const newState = getCardStateFromFileState(fileState, isBannedLocalPreview, featureFlags);
+        const newState = getCardStateFromFileState(fileState, isBannedLocalPreview);
         this.safeSetState(newState);
       },
       error: e => {
@@ -938,6 +927,19 @@ export class CardBase extends 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);
   }
+  fireAbortedEvent() {
+    const {
+      fileAttributes,
+      fileStateFlags,
+      ssrReliability
+    } = this;
+    // UFO won't abort if it's already in a final state (succeeded, failed, aborted, etc)
+    abortUfoExperience(this.internalOccurrenceKey, {
+      fileAttributes,
+      fileStateFlags,
+      ssrReliability
+    });
+  }
   fireCommencedEvent() {
     this.timeElapsedTillCommenced = performance.now();
     const {

package/dist/es2019/card/cardState.js

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

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

@@ -66,8 +66,6 @@ export const getCardPreview = async ({
   isRemotePreviewReady,
   imageUrlParams,
   mediaBlobUrlAttrs,
-  createAnalyticsEvent,
-  featureFlags,
   traceContext
 }) => {
   const mode = imageUrlParams.mode;
@@ -123,11 +121,8 @@ export const shouldResolvePreview = ({
   fileState,
   prevDimensions,
   dimensions,
-  identifier,
-  fileImageMode,
   hasCardPreview,
   isBannedLocalPreview,
-  featureFlags,
   wasResolvedUpfrontPreview
 }) => {
   const statusIsPreviewable = isPreviewableStatus(status, extractFilePreviewStatus(fileState, isBannedLocalPreview));

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

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.1.1";
+const packageVersion = "77.2.0";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/card/useBreakpoint.js

@@ -0,0 +1,22 @@
+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 const useBreakpoint = (dimensionWidth = 0, divRef) => {
+  const breakpoint = useMemo(() => {
+    let widthToCalculate;
+    if (dimensionWidth) {
+      if (isValidPercentageUnit(dimensionWidth) && divRef.current) {
+        const width = getElementDimension(divRef.current, 'width');
+        widthToCalculate = width || defaultImageCardDimensions.width;
+      } else {
+        widthToCalculate = dimensionWidth;
+      }
+    } else {
+      widthToCalculate = defaultImageCardDimensions.width;
+    }
+    return calcBreakpointSize(parseInt(`${widthToCalculate}`, 10));
+  }, [dimensionWidth, divRef]);
+  return breakpoint;
+};

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

@@ -15,7 +15,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, fireCommencedEvent, fireCopiedEvent, fireScreenEvent, fireNonCriticalErrorEvent } from '../cardAnalytics';
@@ -24,11 +24,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';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.1.1";
+const packageVersion = "77.2.0";
 export class CardV2Base extends Component {
   constructor(props) {
     super(props);
@@ -98,8 +98,7 @@ export class CardV2Base extends Component {
       } = identifier;
       const {
         dimensions = {},
-        mediaClient,
-        createAnalyticsEvent
+        mediaClient
       } = this.props;
       return {
         mediaClient,
@@ -110,8 +109,6 @@ export class CardV2Base extends Component {
         isRemotePreviewReady: isImageRepresentationReady(fileState),
         imageUrlParams: this.getImageURLParams(identifier),
         mediaBlobUrlAttrs: this.getMediaBlobUrlAttrs(identifier, fileState),
-        createAnalyticsEvent,
-        featureFlags: this.props.featureFlags,
         traceContext: this.traceContext
       };
     });
@@ -203,10 +200,7 @@ export class CardV2Base extends Component {
         isBannedLocalPreview
       } = this.state;
       if (fileState.status !== 'error') {
-        const {
-          featureFlags
-        } = this.props;
-        const newState = getCardStateFromFileState(fileState, isBannedLocalPreview, featureFlags);
+        const newState = getCardStateFromFileState(fileState, isBannedLocalPreview);
         this.safeSetState(newState);
       } else {
         const e = new MediaFileStateError(fileState.id, fileState.reason, fileState.message, fileState.details);
@@ -409,7 +403,6 @@ export class CardV2Base extends Component {
     _defineProperty(this, "renderInlinePlayer", () => {
       const {
         identifier,
-        mediaClient,
         dimensions,
         selected,
         testId,
@@ -423,8 +416,7 @@ export class CardV2Base extends Component {
       const 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,
@@ -713,7 +705,7 @@ export class CardV2Base extends Component {
       dimensions
     } = this.props;
     if (isCardVisible && isFileIdentifier(identifier)) {
-      this.updateStateForIdentifier(identifier);
+      this.updateStateForIdentifier();
       if (!cardPreview) {
         this.resolveUpfrontPreview(identifier);
       }
@@ -752,10 +744,8 @@ export class CardV2Base extends Component {
       mediaClient,
       identifier,
       dimensions,
-      featureFlags,
       useInlinePlayer,
       disableOverlay,
-      resizeMode,
       ssr
     } = this.props;
     const {
@@ -784,7 +774,6 @@ export class CardV2Base extends Component {
     const turnedVisible = !prevIsCardVisible && isCardVisible;
     const hadSSRCardPreview = !!prevCardPreview && isSSRClientPreview(prevCardPreview) && !cardPreview;
     const isNewMediaClient = prevMediaClient !== mediaClient;
-    const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
     this.updateFileStateFlag(fileState);
     if (isExternalImageIdentifier(identifier) && isDiffIdentifier) {
       this.fireCommencedEvent();
@@ -807,7 +796,7 @@ export class CardV2Base extends 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();
@@ -825,9 +814,6 @@ export class CardV2Base extends Component {
       fileState,
       prevDimensions,
       dimensions,
-      identifier,
-      fileImageMode,
-      featureFlags,
       hasCardPreview: !!cardPreview,
       isBannedLocalPreview,
       wasResolvedUpfrontPreview
@@ -866,10 +852,11 @@ export class CardV2Base extends Component {
   }
   componentWillUnmount() {
     var _getDocument2;
+    this.fireAbortedEvent();
     this.hasBeenMounted = false;
     (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.removeEventListener('copy', this.fireCopiedEvent);
   }
-  updateStateForIdentifier(identifier) {
+  updateStateForIdentifier() {
     this.fireCommencedEvent();
     this.setState({
       shouldUpdateStateForIdentifier: true
@@ -932,6 +919,19 @@ export class CardV2Base extends Component {
     }, this.traceContext);
     startUfoExperience(this.internalOccurrenceKey);
   }
+  fireAbortedEvent() {
+    const {
+      fileAttributes,
+      fileStateFlags,
+      ssrReliability
+    } = this;
+    // UFO won't abort if it's already in a final state (succeeded, failed, aborted, etc)
+    abortUfoExperience(this.internalOccurrenceKey, {
+      fileAttributes,
+      fileStateFlags,
+      ssrReliability
+    });
+  }
   get actions() {
     const {
       actions = [],

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

@@ -1,17 +1,14 @@
 /** @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';
@@ -25,6 +22,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 const CardViewV2Base = ({
   innerRef,
   onImageLoad,
@@ -54,18 +52,10 @@ export const CardViewV2Base = ({
   error,
   disableAnimation
 }) => {
-  const [elementWidth, setElementWidth] = useState();
   const [didImageRender, setDidImageRender] = useState(false);
   const divRef = useRef(null);
   const prevCardPreviewRef = useRef();
-  const width = (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) || 0;
-  useEffect(() => {
-    // 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) {
-      const elementWidth = getElementDimension(divRef.current, 'width');
-      setElementWidth(elementWidth);
-    }
-  }, [width]);
+  const breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
   useEffect(() => {
     innerRef && !!divRef.current && innerRef(divRef.current);
   }, [innerRef]);
@@ -95,10 +85,6 @@ export const CardViewV2Base = ({
     setDidImageRender(false);
     onImageError === null || onImageError === void 0 ? void 0 : onImageError(cardPreview);
   };
-  const breakpoint = useMemo(() => {
-    const width = elementWidth || (dimensions ? dimensions.width : '') || defaultImageCardDimensions.width;
-    return calcBreakpointSize(parseInt(`${width}`, 10));
-  }, [elementWidth, dimensions]);
   const shouldRenderPlayButton = () => {
     const {
       mediaType

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

@@ -0,0 +1,10 @@
+import { lazy } from 'react';
+export const InlinePlayerLazyV2 = /*#__PURE__*/lazy(async () => {
+  const {
+    InlinePlayerV2
+  } = await import( /* webpackChunkName: "@atlaskit-internal_media-card-inlineplayer-v2" */
+  './inlinePlayerV2');
+  return {
+    default: InlinePlayerV2
+  };
+});

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

@@ -0,0 +1,164 @@
+import _extends from "@babel/runtime/helpers/extends";
+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 const getPreferredVideoArtifact = fileState => {
+  if (fileState.status === 'processed' || fileState.status === 'processing') {
+    const {
+      artifacts
+    } = fileState;
+    if (!artifacts) {
+      return undefined;
+    }
+    return artifacts['video_1280.mp4'] ? 'video_1280.mp4' : artifacts['video_640.mp4'] ? 'video_640.mp4' : undefined;
+  }
+  return undefined;
+};
+export const InlinePlayerBaseV2 = ({
+  identifier,
+  onError,
+  onClick,
+  dimensions = defaultImageCardDimensions,
+  originalDimensions,
+  selected,
+  testId,
+  forwardRef,
+  autoplay,
+  cardPreview,
+  onFullscreenChange
+}) => {
+  // === States ===
+  const [fileSrc, setFileSrc] = useState();
+  const [isUploading, setIsUploading] = useState();
+  const [progress, setProgress] = useState();
+
+  // === Refs and Local Variables ===
+  const divRef = useRef(null);
+  const onErrorRef = useRef(onError);
+  onErrorRef.current = onError;
+  const {
+    id,
+    collectionName,
+    occurrenceKey
+  } = identifier;
+  const breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  const mediaClient = useMediaClient();
+  const {
+    fileState
+  } = useFileState(id, {
+    collectionName,
+    occurrenceKey
+  });
+  useEffect(() => {
+    const subscribeFileState = async fileState => {
+      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) {
+        return;
+      }
+      if (fileState.status !== 'error' && fileState.preview) {
+        const {
+          value
+        } = await fileState.preview;
+        if (value instanceof Blob && value.type.indexOf('video/') === 0) {
+          const newFileSrc = URL.createObjectURL(value);
+          setFileSrc(newFileSrc);
+          return;
+        }
+      }
+      if (fileState.status === 'processed' || fileState.status === 'processing') {
+        const artifactName = getPreferredVideoArtifact(fileState);
+        const {
+          artifacts
+        } = fileState;
+        if (!artifactName || !artifacts) {
+          // Tries to use the binary artifact to provide something to play while the video is still processing
+          try {
+            const newFileSrc = await mediaClient.file.getFileBinaryURL(id, collectionName);
+            setFileSrc(newFileSrc);
+          } catch (error) {
+            if (onErrorRef.current && error instanceof Error) {
+              onErrorRef.current(error);
+            }
+          }
+          return;
+        }
+        try {
+          const newFileSrc = await mediaClient.file.getArtifactURL(artifacts, artifactName, collectionName);
+          setFileSrc(newFileSrc);
+        } catch (error) {
+          if (onErrorRef.current && error instanceof Error) {
+            onErrorRef.current(error);
+          }
+        }
+      }
+    };
+    if (fileState) {
+      subscribeFileState(fileState);
+    }
+  }, [fileState, collectionName, fileSrc, id, mediaClient]);
+  useEffect(() => {
+    return () => {
+      fileSrc && URL.revokeObjectURL(fileSrc);
+    };
+  }, [fileSrc]);
+
+  // === Render ===
+  return fileSrc ? /*#__PURE__*/React.createElement(InlinePlayerWrapper, {
+    testId: testId || 'media-card-inline-player',
+    selected: {
+      selected
+    },
+    onClick: onClick,
+    innerRef: forwardRef || undefined,
+    dimensions: dimensions
+  }, /*#__PURE__*/React.createElement(InactivityDetector, null, checkMouseMovement => /*#__PURE__*/React.createElement(CustomMediaPlayer, {
+    type: "video",
+    src: fileSrc,
+    onFullscreenChange: onFullscreenChange,
+    fileId: id,
+    isAutoPlay: autoplay,
+    isHDAvailable: false,
+    onDownloadClick: () => {
+      mediaClient.file.downloadBinary(id, undefined, collectionName);
+    },
+    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
+  });
+};
+const InlinePlayerForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => {
+  return /*#__PURE__*/React.createElement(InlinePlayerBaseV2, _extends({}, props, {
+    forwardRef: ref
+  }));
+});
+export const InlinePlayerV2 = InlinePlayerForwardRef;

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "77.1.1",
+      packageName: "77.2.0",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/utils/ufoExperiences.js

@@ -4,7 +4,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.1.1";
+const packageVersion = "77.2.0";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {
@@ -51,14 +51,17 @@ export const completeUfoExperience = (id, status, fileAttributes, fileStateFlags
       break;
   }
 };
+const getBasePayloadAttributes = () => ({
+  packageName,
+  packageVersion,
+  mediaEnvironment: getMediaEnvironment(),
+  mediaRegion: getMediaRegion()
+});
 const succeedUfoExperience = (id, properties) => {
   getExperience(id).success({
     metadata: {
       ...properties,
-      packageName,
-      packageVersion,
-      mediaEnvironment: getMediaEnvironment(),
-      mediaRegion: getMediaRegion()
+      ...getBasePayloadAttributes()
     }
   });
 };
@@ -66,10 +69,16 @@ const failUfoExperience = (id, properties) => {
   getExperience(id).failure({
     metadata: {
       ...properties,
-      packageName,
-      packageVersion,
-      mediaEnvironment: getMediaEnvironment(),
-      mediaRegion: getMediaRegion()
+      ...getBasePayloadAttributes()
+    }
+  });
+};
+export const abortUfoExperience = (id, properties) => {
+  // UFO won't abort if it's already in a final state (succeeded, failed, aborted, etc)
+  getExperience(id).abort({
+    metadata: {
+      ...properties,
+      ...getBasePayloadAttributes()
     }
   });
 };