@atlaskit/media-card 81.10.12 → 81.10.13

package/dist/es2019/card/card.js

@@ -1,46 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
-import { isFileIdentifier } from '@atlaskit/media-client';
+import { injectIntl } from 'react-intl';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
-import React, { useEffect } from 'react';
-import { IntlProvider, injectIntl } from 'react-intl';
-import { ExternalImageCard } from './externalImageCard';
-import { FileCard } from './fileCard';
-import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerformanceObserver/mediaPerformanceObserver';
-import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
-import UFOLabel from '@atlaskit/react-ufo/label';
+import { CardWithPerformanceObserver } from './CardWithPerformanceObserver';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "81.10.11";
-export const CardBase = ({
-  identifier,
-  ...otherProps
-}) => {
-  const innerContent = isFileIdentifier(identifier) ? /*#__PURE__*/React.createElement(UFOLabel, {
-    name: "media-card-file-card"
-  }, /*#__PURE__*/React.createElement(FileCard, _extends({}, otherProps, {
-    identifier: identifier,
-    key: identifier.id
-  }))) : /*#__PURE__*/React.createElement(UFOLabel, {
-    name: "media-card-external-image"
-  }, /*#__PURE__*/React.createElement(ExternalImageCard, _extends({}, otherProps, {
-    identifier: identifier,
-    key: identifier.dataURI
-  })));
-  return otherProps.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
-    locale: "en"
-  }, innerContent);
-};
-export const CardWithPerformanceObserver = props => {
-  const {
-    createAnalyticsEvent
-  } = useAnalyticsEvents();
-  useEffect(() => {
-    startResourceObserver();
-  }, []);
-  useEffect(() => {
-    setAnalyticsContext(createAnalyticsEvent);
-  }, [createAnalyticsEvent]);
-  return /*#__PURE__*/React.createElement(CardBase, props);
-};
+const packageVersion = "81.10.12";
 export const Card = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/card/cardView.js

@@ -1,35 +1,40 @@
 import React, { useEffect, useState, useRef, useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { isFileIdentifier } from '@atlaskit/media-client';
+import { useMergeRefs } from 'use-callback-ref';
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
+import { isFileIdentifier } from '@atlaskit/media-client';
+import { messages } from '@atlaskit/media-ui/messages';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import SpinnerIcon from '@atlaskit/spinner/spinner';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
-import { useMergeRefs } from 'use-callback-ref';
-import { messages } from '@atlaskit/media-ui/messages';
-import { createAndFireMediaCardEvent } from '../utils/analytics';
+import { isUploadError } from '../isUploadError';
+import { createAndFireMediaCardEvent } from '../utils/analytics/createAndFireMediaCardEvent';
+import { isNetworkError } from '../utils/isNetworkError';
+import { useCurrentValueRef } from '../utils/useCurrentValueRef';
+import { AIGeneratingOverlay } from './ai-generating-overlay/AIGeneratingOverlay';
+import { fileCardImageViewSelector } from './classnames';
+import { SvgView } from './svgView/svgView';
+import { ActionsBar } from './ui/actionsBar/actionsBar';
+import { Blanket } from './ui/blanket/blanket';
+import { CheckInternetConnection } from './ui/iconMessage/CheckInternetConnection';
+import { CreatingPreview } from './ui/iconMessage/CreatingPreview';
+import { FailedToLoad } from './ui/iconMessage/FailedToLoad';
+import { FailedToUpload } from './ui/iconMessage/FailedToUpload';
+import { PreviewUnavailable } from './ui/iconMessage/PreviewUnavailable';
+import { IconWrapper } from './ui/iconWrapper/iconWrapper';
 import { ImageRenderer } from './ui/imageRenderer';
-import { TitleBox } from './ui/titleBox/titleBox';
-import { FailedTitleBox } from './ui/titleBox/failedTitleBox';
 import { LoadingBar } from './ui/loadingBar/loadingBar';
-import { ProgressBar } from './ui/progressBar/progressBar';
+import OpenMediaViewerButton from './ui/openMediaViewerButton/openMediaViewerButton';
 import { PlayButton } from './ui/playButton/playButton';
+import { ProgressBar } from './ui/progressBar/progressBar';
 import { TickBox } from './ui/tickBox/tickBox';
-import { Blanket } from './ui/blanket/blanket';
-import { ActionsBar } from './ui/actionsBar/actionsBar';
-import { IconWrapper } from './ui/iconWrapper/iconWrapper';
-import { AIGeneratingOverlay } from './ai-generating-overlay';
-import { PreviewUnavailable, CreatingPreview, FailedToUpload, FailedToLoad, CheckInternetConnection } from './ui/iconMessage';
-import { isUploadError } from '../errors';
-import { isNetworkError } from '../utils/isNetworkError';
-import { Wrapper, ImageContainer } from './ui/wrapper';
-import { fileCardImageViewSelector } from './classnames';
+import { FailedTitleBox } from './ui/titleBox/failedTitleBox';
+import { TitleBox } from './ui/titleBox/titleBox';
+import { ImageContainer } from './ui/wrapper/imageContainer';
+import { Wrapper } from './ui/wrapper/wrapper';
 import { useBreakpoint } from './useBreakpoint';
-import OpenMediaViewerButton from './ui/openMediaViewerButton/openMediaViewerButton';
-import { useCurrentValueRef } from '../utils/useCurrentValueRef';
-import { SvgView } from './svgView';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const i18n = defineMessages({
   traceIdTooltip: {
     id: 'fabric.media.trace_id_tooltip',

package/dist/es2019/card/createDownloadAction.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import DownloadIcon from '@atlaskit/icon/core/download';
+import { messages } from '@atlaskit/media-ui/messages';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+export const createDownloadAction = (baseAction, formatMessage) => {
+  const {
+    isDisabled
+  } = baseAction;
+  const label = isDisabled ? 'Download Disabled' : 'Download';
+  const tooltip = isDisabled ? formatMessage(messages.download_disabled_security_policy) : undefined;
+  return {
+    ...baseAction,
+    label,
+    tooltip,
+    icon: /*#__PURE__*/React.createElement(DownloadIcon, {
+      color: isDisabled ? "var(--ds-icon-disabled, #080F214A)" : 'currentColor',
+      spacing: "spacious",
+      label: fg('platform-a11y-media-card-download-icon-decorative') ? '' : 'Download'
+    })
+  };
+};

package/dist/es2019/card/externalImageCard.js

@@ -1,19 +1,19 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
 import { globalMediaEventEmitter } from '@atlaskit/media-client';
 import { getRandomTelemetryId } from '@atlaskit/media-common';
 import { MediaViewer } from '@atlaskit/media-viewer';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
-import { ImageLoadError } from '../errors';
+import { ImageLoadError } from '../ImageLoadError';
+import { getDefaultCardDimensions } from '../utils/cardDimensions';
 import { generateUniqueId } from '../utils/generateUniqueId';
 import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { isKeyboardFocusEnteringElement } from '../utils/isKeyboardFocusEnteringElement';
 import { shouldPerformanceBeSampled, useMediaCardUfoExperience } from '../utils/ufoExperiences';
 import { useCurrentValueRef } from '../utils/useCurrentValueRef';
-import { getDefaultCardDimensions } from '../utils/cardDimensions';
 import { usePrevious } from '../utils/usePrevious';
-import { fireOperationalEvent } from './cardAnalytics';
 import { CardView } from './cardView';
+import { fireOperationalEvent } from './fireOperationalEvent';
 import { performanceNow } from './performance';
 export const ExternalImageCard = ({
   mediaClient,

package/dist/es2019/card/fileCard.js

@@ -1,39 +1,44 @@
+import React, { Suspense, useEffect, useMemo, useRef, useState, useCallback } from 'react';
+import { useContext } from 'react';
+import { useIntl } from 'react-intl';
+import { useMergeRefs } from 'use-callback-ref';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
 import { globalMediaEventEmitter, RECENTS_COLLECTION, imageResizeModeToFileImageMode, isProcessedFileState, isErrorFileState, toCommonMediaClientError } from '@atlaskit/media-client';
 import { useFileState } from '@atlaskit/media-client-react/use-file-state';
 import { useMediaClient } from '@atlaskit/media-client-react/use-media-client';
 import { mapSsrMediaItemToFileState } from '@atlaskit/media-client/ssr-media-item';
 import { isMimeTypeSupportedByBrowser, isVideoMimeTypeSupportedByBrowser, getRandomTelemetryId } from '@atlaskit/media-common';
+import { useFilePreview } from '@atlaskit/media-file-preview/use-file-preview';
+import { AbuseModal } from '@atlaskit/media-ui/abuseModal';
 import { MediaViewer } from '@atlaskit/media-viewer';
-import React, { Suspense, useEffect, useMemo, useRef, useState, useCallback } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { getActiveTrace } from '@atlaskit/react-ufo/experience-trace-id-context';
+import usePressTracing from '@atlaskit/react-ufo/use-press-tracing';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { useMergeRefs } from 'use-callback-ref';
-import { MediaCardError } from '../errors';
-import { isSSRPreview } from '../types';
+import { MediaCardError } from '../MediaCardError';
+import { DateOverrideContext } from '../dateOverrideContext';
+import { isSSRPreview } from '../isSSRPreview';
+import { fireMediaCardEvent } from '../utils/analytics/fireMediaCardEvent';
+import { getAuthProviderSucceededPayload } from '../utils/analytics/getAuthProviderSucceededPayload';
+import { getAuthProviderFailedPayload } from '../utils/analytics/getAuthProviderFailedPayload';
+import { getDefaultCardDimensions } from '../utils/cardDimensions';
 import { generateUniqueId } from '../utils/generateUniqueId';
-import { resolveCardPreviewDimensions } from '../utils/getDataURIDimension';
 import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { isKeyboardFocusEnteringElement } from '../utils/isKeyboardFocusEnteringElement';
 import { getFileDetails } from '../utils/metadata';
+import { resolveCardPreviewDimensions } from '../utils/resolveCardPreviewDimensions';
 import { shouldPerformanceBeSampled, useMediaCardUfoExperience } from '../utils/ufoExperiences';
 import { useCurrentValueRef } from '../utils/useCurrentValueRef';
 import { usePrevious } from '../utils/usePrevious';
 import { ViewportDetector } from '../utils/viewportDetector';
-import { getDefaultCardDimensions } from '../utils/cardDimensions';
-import { fireNonCriticalErrorEvent, fireOperationalEvent, fireDownloadSucceededEvent, fireDownloadFailedEvent } from './cardAnalytics';
-import { fireMediaCardEvent, getAuthProviderSucceededPayload, getAuthProviderFailedPayload } from '../utils/analytics';
 import { CardView } from './cardView';
+import { createDownloadAction } from './createDownloadAction';
+import { fireDownloadFailedEvent } from './fireDownloadFailedEvent';
+import { fireDownloadSucceededEvent } from './fireDownloadSucceededEvent';
+import { fireNonCriticalErrorEvent } from './fireNonCriticalErrorEvent';
+import { fireOperationalEvent } from './fireOperationalEvent';
 import { InlinePlayerLazy } from './inlinePlayerLazy';
-import { useFilePreview } from '@atlaskit/media-file-preview/use-file-preview';
-import { createDownloadAction } from './actions';
 import { performanceNow } from './performance';
-import { useContext } from 'react';
-import { DateOverrideContext } from '../dateOverrideContext';
-import { useIntl } from 'react-intl';
-import { AbuseModal } from '@atlaskit/media-ui/abuseModal';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { getActiveTrace } from '@atlaskit/react-ufo/experience-trace-id-context';
-import usePressTracing from '@atlaskit/react-ufo/use-press-tracing';
 const traceContextRetriever = () => {
   const trace = getActiveTrace();
   if (trace) {

package/dist/es2019/card/fireDownloadFailedEvent.js

@@ -0,0 +1,7 @@
+import { MediaCardError } from '../MediaCardError';
+import { fireMediaCardEvent } from '../utils/analytics/fireMediaCardEvent';
+import { getDownloadFailedEventPayload } from '../utils/analytics/getDownloadFailedEventPayload';
+export const fireDownloadFailedEvent = (createAnalyticsEvent, fileAttributes, error = new MediaCardError('missing-error-data'), traceContext, metadataTraceContext) => {
+  const payload = getDownloadFailedEventPayload(fileAttributes, error, traceContext, metadataTraceContext);
+  fireMediaCardEvent(payload, createAnalyticsEvent);
+};

package/dist/es2019/card/fireDownloadSucceededEvent.js

@@ -0,0 +1,6 @@
+import { fireMediaCardEvent } from '../utils/analytics/fireMediaCardEvent';
+import { getDownloadSucceededEventPayload } from '../utils/analytics/getDownloadSucceededEventPayload';
+export const fireDownloadSucceededEvent = (createAnalyticsEvent, fileAttributes, traceContext, metadataTraceContext) => {
+  const payload = getDownloadSucceededEventPayload(fileAttributes, traceContext, metadataTraceContext);
+  fireMediaCardEvent(payload, createAnalyticsEvent);
+};

package/dist/es2019/card/fireNonCriticalErrorEvent.js

@@ -0,0 +1,7 @@
+import { MediaCardError } from '../MediaCardError';
+import { fireMediaCardEvent } from '../utils/analytics/fireMediaCardEvent';
+import { getErrorEventPayload } from '../utils/analytics/getErrorEventPayload';
+export const fireNonCriticalErrorEvent = (createAnalyticsEvent, cardStatus, fileAttributes, ssrReliability, error = new MediaCardError('missing-error-data'), traceContext, metadataTraceContext) => {
+  const errorPayload = getErrorEventPayload(cardStatus, fileAttributes, error, ssrReliability, traceContext, metadataTraceContext);
+  fireMediaCardEvent(errorPayload, createAnalyticsEvent);
+};

package/dist/es2019/card/{cardAnalytics.js → fireOperationalEvent.js}

@@ -1,7 +1,9 @@
-import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getErrorEventPayload, getDownloadSucceededEventPayload, getDownloadFailedEventPayload } from '../utils/analytics';
-import { MediaCardError } from '../errors';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-
+import { MediaCardError } from '../MediaCardError';
+import { fireMediaCardEvent } from '../utils/analytics/fireMediaCardEvent';
+import { getRenderSucceededEventPayload } from '../utils/analytics/getRenderSucceededEventPayload';
+import { getRenderErrorEventPayload } from '../utils/analytics/getRenderErrorEventPayload';
+import { getRenderFailedFileStatusPayload } from '../utils/analytics/getRenderFailedFileStatusPayload';
 // Sampling rate for mediaCardRender success events (10%)
 const MEDIA_CARD_RENDER_SUCCESS_SAMPLE_RATE = 0.1;
 export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error = new MediaCardError('missing-error-data'), traceContext, metadataTraceContext, processingFailReason) => {
@@ -24,16 +26,4 @@ export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttribute
       fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability, traceContext, metadataTraceContext));
       break;
   }
-};
-export const fireNonCriticalErrorEvent = (createAnalyticsEvent, cardStatus, fileAttributes, ssrReliability, error = new MediaCardError('missing-error-data'), traceContext, metadataTraceContext) => {
-  const errorPayload = getErrorEventPayload(cardStatus, fileAttributes, error, ssrReliability, traceContext, metadataTraceContext);
-  fireMediaCardEvent(errorPayload, createAnalyticsEvent);
-};
-export const fireDownloadSucceededEvent = (createAnalyticsEvent, fileAttributes, traceContext, metadataTraceContext) => {
-  const payload = getDownloadSucceededEventPayload(fileAttributes, traceContext, metadataTraceContext);
-  fireMediaCardEvent(payload, createAnalyticsEvent);
-};
-export const fireDownloadFailedEvent = (createAnalyticsEvent, fileAttributes, error = new MediaCardError('missing-error-data'), traceContext, metadataTraceContext) => {
-  const payload = getDownloadFailedEventPayload(fileAttributes, error, traceContext, metadataTraceContext);
-  fireMediaCardEvent(payload, createAnalyticsEvent);
 };

package/dist/es2019/card/getCardStatus.js

@@ -1,4 +1,3 @@
-export const isFinalCardStatus = status => ['complete', 'error', 'failed-processing'].includes(status);
 export const getCardStatus = (fileStatus, {
   isPreviewable,
   hasPreview

package/dist/es2019/card/getPreferredVideoArtifact.js

@@ -0,0 +1,12 @@
+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;
+};

package/dist/es2019/card/inlinePlayer.js

@@ -1,207 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useRef, useState, useEffect, useCallback } from 'react';
-import { globalMediaEventEmitter } from '@atlaskit/media-client';
-import { CustomMediaPlayer } from '@atlaskit/media-ui/customMediaPlayer';
-import { MediaPlayer } from '@atlaskit/media-ui/mediaPlayer';
-import { InactivityDetector } from '@atlaskit/media-ui/inactivityDetector';
-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 } from '@atlaskit/media-client-react/use-file-state';
-import { useMediaClient } from '@atlaskit/media-client-react/use-media-client';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
-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 InlinePlayerBase = ({
-  identifier,
-  onError,
-  onClick,
-  dimensions = defaultImageCardDimensions,
-  originalDimensions,
-  selected,
-  testId,
-  forwardRef,
-  autoplay,
-  cardPreview,
-  onFullscreenChange,
-  videoControlsWrapperRef
-}) => {
-  // === 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
-  });
-  const init = useCallback(async fileState => {
-    if (!(fileState.status === 'processed' || fileState.status === 'processing')) {
-      return;
-    }
-    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);
-      }
-    }
-  }, [collectionName, id, mediaClient.file]);
-  const onPlay = () => {
-    if (fg('platform_media_resume_video_on_token_expiry')) {
-      fileState && init(fileState);
-    }
-  };
-  const onTimeChanged = onPlay;
-  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') {
-        init(fileState);
-      }
-    };
-    if (fileState) {
-      subscribeFileState(fileState);
-    }
-  }, [fileState, collectionName, fileSrc, id, mediaClient, init]);
-  useEffect(() => {
-    return () => {
-      fileSrc && URL.revokeObjectURL(fileSrc);
-    };
-  }, [fileSrc]);
-
-  // === Render ===
-  return fileSrc ? /*#__PURE__*/React.createElement(InlinePlayerWrapper, {
-    testId: testId || 'media-card-inline-player',
-    "data-vc": "media-card-inline-player",
-    selected: selected,
-    onClick: onClick,
-    innerRef: forwardRef || undefined,
-    dimensions: dimensions
-  }, /*#__PURE__*/React.createElement(InactivityDetector, null, (checkMouseMovement, controlsAreVisible) => fg('platform_media_video_captions') ? /*#__PURE__*/React.createElement(MediaPlayer, {
-    identifier: identifier,
-    type: "video",
-    src: fileSrc,
-    onFullscreenChange: onFullscreenChange,
-    isAutoPlay: autoplay,
-    isHDAvailable: false,
-    onDownloadClick: () => {
-      mediaClient.file.downloadBinary(id, undefined, collectionName);
-    },
-    onFirstPlay: () => {
-      globalMediaEventEmitter.emit('media-viewed', {
-        fileId: id,
-        viewingLevel: 'full'
-      });
-    },
-    onPlay: onPlay,
-    onTimeChanged: onTimeChanged,
-    lastWatchTimeConfig: {
-      contentId: id
-    },
-    originalDimensions: originalDimensions,
-    showControls: checkMouseMovement,
-    poster: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI,
-    videoControlsWrapperRef: videoControlsWrapperRef,
-    areControlsVisible: controlsAreVisible
-  }) : /*#__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'
-      });
-    },
-    onPlay: onPlay,
-    onTimeChanged: onTimeChanged,
-    lastWatchTimeConfig: {
-      contentId: id
-    },
-    originalDimensions: originalDimensions,
-    showControls: checkMouseMovement,
-    poster: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI,
-    videoControlsWrapperRef: videoControlsWrapperRef
-  })), isUploading && /*#__PURE__*/React.createElement(ProgressBar, {
-    progress: progress,
-    breakpoint: breakpoint,
-    positionBottom: true,
-    showOnTop: true
-  })) : /*#__PURE__*/React.createElement(CardLoading, {
-    testId: testId,
-    dimensions: dimensions,
-    interactionName: "inline-player-loading"
-  });
-};
+import React from 'react';
+import { InlinePlayerBase } from './InlinePlayerBase';
 const InlinePlayerForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(InlinePlayerBase, _extends({}, props, {
     forwardRef: ref

package/dist/es2019/card/isFinalCardStatus.js

@@ -0,0 +1 @@
+export const isFinalCardStatus = status => ['complete', 'error', 'failed-processing'].includes(status);

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import { UnhandledErrorCard } from './ui/unhandledErrorCard';
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
-import { fireMediaCardEvent } from '../utils/analytics';
+import { fireMediaCardEvent } from '../utils/analytics/fireMediaCardEvent';
 class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "81.10.11";
+const packageVersion = "81.10.12";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

package/dist/es2019/card/svgView/svgImage-compiled.js

@@ -2,10 +2,10 @@
 import "./svgImage-compiled.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { MediaCardError } from '../../errors';
-import { calculateSvgDimensions } from './helpers';
-import { useResolveSvg } from '@atlaskit/media-svg/use-resolve-svg';
 import { MediaSVGError } from '@atlaskit/media-svg/media-svg-error';
+import { useResolveSvg } from '@atlaskit/media-svg/use-resolve-svg';
+import { MediaCardError } from '../../MediaCardError';
+import { calculateSvgDimensions } from './helpers';
 const getErrorReason = svgReason => {
   switch (svgReason) {
     case 'img-error':

package/dist/es2019/card/svgView/svgViewV2.js

@@ -2,11 +2,12 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
+
 import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useMemo } from 'react';
-import { MediaCardError } from '../../errors';
+import { MediaCardError } from '../../MediaCardError';
 import { useResolveSvg } from '@atlaskit/media-svg/use-resolve-svg';
 import { MediaSVGError } from '@atlaskit/media-svg/media-svg-error';
 import { ImageRenderer } from '../ui/imageRenderer/imageRendererV2';

package/dist/es2019/card/ui/actionsBar/actionsBar.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import { CardActionIconButtonVariant, CardActionsView } from './cardActions';
 import { ActionsBarWrapper } from './actionsBarWrapper';
+import { CardActionsView } from './cardActions/cardActionsView';
+import { CardActionIconButtonVariant } from './cardActions/styles';
 export class ActionsBar extends React.Component {
   render() {
     const {

package/dist/es2019/card/ui/actionsBar/cardActions/cardActionIconButton.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
 import { CardActionButton } from './cardActionButton';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
-import { fireMediaCardEvent } from '../../../../utils/analytics';
+import { fireMediaCardEvent } from '../../../../utils/analytics/fireMediaCardEvent';
 export const CardActionIconButton = ({
   icon,
   label,

package/dist/es2019/card/ui/actionsBar/cardActions/cardActionsDropdownMenu.js

@@ -6,7 +6,8 @@ import DropdownMenu from '@atlaskit/dropdown-menu/dropdown-menu';
 import DropdownItemGroup from '@atlaskit/dropdown-menu/dropdown-menu-item-group';
 import DropdownItem from '@atlaskit/dropdown-menu/dropdown-menu-item';
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
-import { createAndFireMediaCardEvent, fireMediaCardEvent } from '../../../../utils/analytics';
+import { createAndFireMediaCardEvent } from '../../../../utils/analytics/createAndFireMediaCardEvent';
+import { fireMediaCardEvent } from '../../../../utils/analytics/fireMediaCardEvent';
 import { CardActionButton } from './cardActionButton';
 // Trick applied due to the lack of props type of DropdownItem
 const DropdownItemWithProps = props => /*#__PURE__*/React.createElement(DropdownItem, _extends({

package/dist/es2019/card/ui/actionsBar/styles.js

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { transition } from '../styles';
+import { transition } from '../transition';
 export const actionsBarClassName = 'media-card-actions-bar';
 export const fixedActionBarStyles = `opacity: 1;`;
 export const wrapperStyles = isFixed =>

package/dist/es2019/card/ui/blanket/styles.js

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { transition } from '../styles';
+import { transition } from '../transition';
 export const blanketClassName = 'media-card-blanket';
 export const fixedBlanketStyles = `background-color: ${"var(--ds-blanket, #050C1F75)"};`;
 export const blanketStyles = isFixed => css(

package/dist/es2019/card/ui/calcBreakpointSize.js

@@ -0,0 +1,6 @@
+import { Breakpoint } from './common';
+const breakpointSizes = [[Breakpoint.SMALL, 599], [Breakpoint.LARGE, Infinity]];
+export const calcBreakpointSize = (wrapperWidth = 0) => {
+  const [breakpoint] = breakpointSizes.find(([_breakpoint, limit]) => wrapperWidth <= limit) || [Breakpoint.SMALL];
+  return breakpoint;
+};

package/dist/es2019/card/ui/generateResponsiveStyles.js

@@ -0,0 +1,8 @@
+import { Breakpoint, responsiveSettings } from './common';
+export const generateResponsiveStyles = (breakpoint = Breakpoint.SMALL) => {
+  const setting = responsiveSettings[breakpoint];
+  return `
+    font-size: ${setting.fontSize}px;
+    line-height: ${setting.lineHeight}px;
+  `;
+};

package/dist/es2019/card/ui/getClickablePlayButtonStyles.js

@@ -0,0 +1,11 @@
+import { fixedPlayButtonStyles, playButtonClassName } from './playButton/styles';
+export const getClickablePlayButtonStyles = isPlayButtonClickable => {
+  if (!isPlayButtonClickable) {
+    return '';
+  }
+  return `
+    &:hover .${playButtonClassName} {
+      ${fixedPlayButtonStyles}
+    }
+  `;
+};