@atlaskit/media-card 72.1.0 → 73.2.0

package/dist/esm/utils/printScript.js

@@ -0,0 +1,30 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+
+var printParam = function printParam(param) {
+  if (typeof param === 'string') {
+    return "'".concat(param, "'");
+  } else if (_typeof(param) === 'object') {
+    return JSON.stringify(param);
+  } else if (param === undefined) {
+    return 'undefined';
+  }
+
+  return param;
+};
+
+var printParams = function printParams(args) {
+  return args.map(function (arg) {
+    return printParam(arg);
+  }).join(',');
+};
+
+export var printFunctionCall = function printFunctionCall(fn) {
+  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    args[_key - 1] = arguments[_key];
+  }
+
+  return "(".concat(fn.toString(), ")(").concat(printParams(args), ");");
+};
+export var printScript = function printScript(statements) {
+  return "(function(){\n  ".concat(statements.join(';'), "\n})();\n");
+};

package/dist/esm/utils/viewportDetector.js

@@ -4,8 +4,28 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-import React, { useEffect } from 'react';
-import { LazyContent } from './lazyContent';
+import React, { useEffect, forwardRef } from 'react';
+/**
+ * As IntersectionObserver::rootMargin doesn't work within IFrames, we use an empty div + dynamic offsetTop to eagerly detect cards entering viewport.
+ * Using this approach, we can lazy load cards ABS_VIEWPORT_ANCHOR_OFFSET_TOP px before they enter viewport.
+ */
+
+export var ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900; //px
+
+export var ViewportAnchor = /*#__PURE__*/forwardRef(function (props, ref) {
+  if (typeof IntersectionObserver === 'undefined') {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: "media-card-viewport-anchor",
+    style: {
+      position: 'absolute',
+      top: "".concat(props.offsetTop, "px")
+    }
+  });
+});
 
 var createIntersectionObserverCallback = function createIntersectionObserverCallback(onVisible) {
   return function (entries, observer) {
@@ -30,33 +50,40 @@ var createIntersectionObserverCallback = function createIntersectionObserverCall
   };
 };
 
-var Observer = function Observer(_ref) {
+var ViewportObserver = function ViewportObserver(_ref) {
   var onVisible = _ref.onVisible,
+      cardEl = _ref.cardEl,
       children = _ref.children,
-      targetRef = _ref.targetRef;
+      preAnchorRef = _ref.preAnchorRef,
+      postAnchorRef = _ref.postAnchorRef;
   useEffect(function () {
     // IntersectionObserver uses root and target elements to detect intersections, defaulting root to the viewport
     var intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisible));
-    targetRef && intersectionObserver.observe(targetRef);
+    (preAnchorRef === null || preAnchorRef === void 0 ? void 0 : preAnchorRef.current) && intersectionObserver.observe(preAnchorRef.current);
+    (postAnchorRef === null || postAnchorRef === void 0 ? void 0 : postAnchorRef.current) && intersectionObserver.observe(postAnchorRef.current);
+    cardEl && intersectionObserver.observe(cardEl);
     return function () {
       intersectionObserver.disconnect();
     };
-  }, [targetRef, onVisible]);
+  }, [cardEl, preAnchorRef, postAnchorRef, onVisible]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 };
 
-export var createViewportDetector = function createViewportDetector(isIntersectionObserverSupported) {
-  return function (_ref2) {
-    var children = _ref2.children,
-        targetRef = _ref2.targetRef,
-        onVisible = _ref2.onVisible;
-    return isIntersectionObserverSupported ? /*#__PURE__*/React.createElement(Observer, {
-      targetRef: targetRef,
-      onVisible: onVisible
-    }, children) : /*#__PURE__*/React.createElement(LazyContent, {
-      placeholder: /*#__PURE__*/React.createElement(React.Fragment, null, children),
-      onRender: onVisible
-    }, children);
-  };
-};
-export var ViewportDetector = createViewportDetector(typeof IntersectionObserver !== 'undefined');
+export var ViewportDetector = function ViewportDetector(_ref2) {
+  var cardEl = _ref2.cardEl,
+      preAnchorRef = _ref2.preAnchorRef,
+      postAnchorRef = _ref2.postAnchorRef,
+      onVisible = _ref2.onVisible,
+      children = _ref2.children;
+
+  if (typeof IntersectionObserver === 'undefined') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }
+
+  return /*#__PURE__*/React.createElement(ViewportObserver, {
+    cardEl: cardEl,
+    preAnchorRef: preAnchorRef,
+    postAnchorRef: postAnchorRef,
+    onVisible: onVisible
+  }, children);
+};

package/dist/esm/version.json

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

package/dist/types/errors.d.ts

@@ -24,7 +24,7 @@ export declare class SsrPreviewError extends MediaCardError {
     readonly secondaryError?: Error | undefined;
     constructor(primaryReason: SsrPreviewPrimaryReason, secondaryError?: Error | undefined);
 }
-export declare const getImageLoadPrimaryReason: (source?: "local" | "remote" | "ssr-server" | "ssr-client" | "cache-local" | "cache-remote" | "cache-ssr-client" | "cache-ssr-server" | "external" | undefined) => ImageLoadPrimaryReason;
+export declare const getImageLoadPrimaryReason: (source?: "local" | "remote" | "ssr-server" | "ssr-client" | "ssr-data" | "cache-local" | "cache-remote" | "cache-ssr-client" | "cache-ssr-server" | "external" | undefined) => ImageLoadPrimaryReason;
 export declare class ImageLoadError extends MediaCardError {
     constructor(source?: CardPreview['source']);
 }

package/dist/types/files/cardImageView/index.d.ts

@@ -2,6 +2,7 @@ import { Component, ReactNode } from 'react';
 import { MediaItemType, MediaType, ImageResizeMode } from '@atlaskit/media-client';
 import { CardDimensions, CardStatus } from '../../index';
 import { CardAction } from '../../actions';
+import { CardPreview } from '../..';
 export interface FileCardImageViewProps {
     readonly mediaName?: string;
     readonly mediaType?: MediaType;
@@ -21,8 +22,9 @@ export interface FileCardImageViewProps {
     readonly actions?: CardAction[];
     readonly onDisplayImage?: () => void;
     readonly previewOrientation?: number;
-    readonly onImageError?: () => void;
-    readonly onImageLoad?: () => void;
+    readonly onImageError?: (cardPreview: CardPreview) => void;
+    readonly onImageLoad?: (cardPreview: CardPreview) => void;
+    readonly cardPreview: CardPreview;
 }
 export declare const fileCardImageViewSelector = "media-file-card-view";
 export declare const fileCardImageViewSelectedSelector = "media-file-card-view-selected";
@@ -36,6 +38,8 @@ export declare class FileCardImageView extends Component<FileCardImageViewProps>
     private renderFailedContents;
     private renderUploadingCardOverlay;
     private renderPlayButton;
+    onImageLoad: () => void;
+    onImageError: () => void;
     private renderMediaImage;
     private renderProgressBar;
     private renderSuccessCardContents;

package/dist/types/index.d.ts

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { WithMediaClientConfigProps } from '@atlaskit/media-client';
-import type { CardWithAnalyticsEventsProps } from '.';
-export declare type CardWithMediaClientConfigProps = WithMediaClientConfigProps<CardWithAnalyticsEventsProps>;
+import type { CardBaseProps } from '.';
+export declare type CardWithMediaClientConfigProps = WithMediaClientConfigProps<CardBaseProps>;
 declare const CardLoader: React.FC<CardWithMediaClientConfigProps>;
 export default CardLoader;

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

@@ -47,4 +47,5 @@ export declare const isLocalPreview: (preview: CardPreview) => boolean;
 export declare const isSSRPreview: (preview: CardPreview) => boolean;
 export declare const isSSRServerPreview: (preview: CardPreview) => boolean;
 export declare const isSSRClientPreview: (preview: CardPreview) => boolean;
+export declare const isSSRDataPreview: (preview: CardPreview) => boolean;
 export declare const fetchAndCacheRemotePreview: (mediaClient: MediaClient, id: string, dimensions: CardDimensions, params: MediaStoreGetFileImageParams, mediaBlobUrlAttrs?: MediaBlobUrlAttrs | undefined) => Promise<CardPreview>;

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

@@ -1,19 +1,19 @@
-/// <reference types="react-intl" />
 import React, { Component } from 'react';
 import { UIAnalyticsEvent, WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { FileIdentifier } from '@atlaskit/media-client';
 import { Subscription } from 'rxjs/Subscription';
+import { WrappedComponentProps } from 'react-intl-next';
 import { CardAction, CardProps, CardState } from '../..';
-export declare type CardWithAnalyticsEventsProps = CardProps & WithAnalyticsEventsProps;
-export declare class CardBase extends Component<CardWithAnalyticsEventsProps, CardState> {
+export declare type CardBaseProps = CardProps & WithAnalyticsEventsProps & Partial<WrappedComponentProps>;
+export declare class CardBase extends Component<CardBaseProps, CardState> {
     private hasBeenMounted;
+    private viewportPreAnchorRef;
+    private viewportPostAnchorRef;
     private timeElapsedTillCommenced;
     subscription?: Subscription;
+    private ssrData?;
     static defaultProps: Partial<CardProps>;
-    static contextTypes: {
-        intl: ReactIntl.IntlShape;
-    };
-    constructor(props: CardWithAnalyticsEventsProps);
+    constructor(props: CardBaseProps);
     componentDidMount(): void;
     componentDidUpdate(prevProps: CardProps, prevState: CardState): void;
     componentWillUnmount(): void;
@@ -22,7 +22,7 @@ export declare class CardBase extends Component<CardWithAnalyticsEventsProps, Ca
     private getMediaBlobUrlAttrs;
     private getCardPreviewParams;
     private setCacheSSRPreview;
-    private resolveSSRPreview;
+    private refetchSSRPreview;
     private resolvePreview;
     subscribeInternalFile(identifier: FileIdentifier): void;
     private get requestedDimensions();
@@ -47,9 +47,10 @@ export declare class CardBase extends Component<CardWithAnalyticsEventsProps, Ca
     private onDisplayImage;
     renderMediaViewer: () => React.ReactPortal | undefined;
     renderCard: () => JSX.Element;
+    private storeSSRData;
     render(): JSX.Element;
     private onCardInViewport;
     onClick: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent | undefined) => void;
     onMouseEnter: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
-export declare const Card: React.ComponentType<CardWithAnalyticsEventsProps>;
+export declare const Card: React.ComponentType<CardBaseProps>;

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

@@ -1,23 +1,25 @@
 import React, { MouseEvent } from 'react';
-import { FormattedMessage } from 'react-intl';
 import { MediaItemType, FileDetails } from '@atlaskit/media-client';
 import { WithAnalyticsEventsProps, UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { SharedCardProps, CardStatus } from '../index';
 import { MediaCardError } from '../errors';
+import { CardPreview } from '..';
+import { MessageDescriptor } from 'react-intl-next';
+import { MediaCardCursor } from '../types';
 export interface CardViewOwnProps extends SharedCardProps {
     readonly status: CardStatus;
     readonly mediaItemType: MediaItemType;
+    readonly mediaCardCursor: MediaCardCursor;
     readonly metadata?: FileDetails;
     readonly error?: MediaCardError;
     readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
     readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
     readonly onDisplayImage?: () => void;
-    readonly dataURI?: string;
+    readonly cardPreview?: CardPreview;
     readonly progress?: number;
-    readonly previewOrientation?: number;
     readonly innerRef?: (instance: HTMLDivElement | null) => void;
-    readonly onImageLoad: () => void;
-    readonly onImageError: () => void;
+    readonly onImageLoad: (cardPreview: CardPreview) => void;
+    readonly onImageError: (cardPreview: CardPreview) => void;
     readonly nativeLazyLoad?: boolean;
     readonly forceSyncDisplay?: boolean;
     disableAnimation?: boolean;
@@ -39,7 +41,7 @@ export interface RenderConfigByStatus {
     renderSpinner?: boolean;
     renderFailedTitleBox?: boolean;
     renderTickBox?: boolean;
-    customTitleMessage?: FormattedMessage.MessageDescriptor;
+    customTitleMessage?: MessageDescriptor;
 }
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
@@ -50,7 +52,7 @@ export declare class CardViewBase extends React.Component<CardViewProps, CardVie
     divRef: React.RefObject<HTMLDivElement>;
     static defaultProps: Partial<CardViewOwnProps>;
     componentDidMount(): void;
-    componentDidUpdate({ dataURI: prevDataURI }: CardViewProps): void;
+    componentDidUpdate({ cardPreview: prevCardPreview }: CardViewProps): void;
     private onImageLoad;
     private onImageError;
     private get width();
@@ -73,4 +75,4 @@ export declare class CardViewBase extends React.Component<CardViewProps, CardVie
     private getRenderConfigByStatus;
     private renderNewExperienceCard;
 }
-export declare const CardView: React.ForwardRefExoticComponent<Pick<Pick<CardViewProps, "progress" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "appearance" | "error" | "actions" | "testId" | "selectable" | "selected" | "alt" | "disableOverlay" | "dimensions" | "featureFlags" | "dataURI" | "status" | "mediaItemType" | "resizeMode" | "onDisplayImage" | "previewOrientation" | "onImageError" | "onImageLoad" | "forceSyncDisplay" | "nativeLazyLoad" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">, never> & Partial<Pick<Pick<CardViewProps, "progress" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "appearance" | "error" | "actions" | "testId" | "selectable" | "selected" | "alt" | "disableOverlay" | "dimensions" | "featureFlags" | "dataURI" | "status" | "mediaItemType" | "resizeMode" | "onDisplayImage" | "previewOrientation" | "onImageError" | "onImageLoad" | "forceSyncDisplay" | "nativeLazyLoad" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">, "progress" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "appearance" | "error" | "actions" | "testId" | "selectable" | "selected" | "alt" | "disableOverlay" | "dimensions" | "featureFlags" | "dataURI" | "status" | "mediaItemType" | "resizeMode" | "onDisplayImage" | "previewOrientation" | "onImageError" | "onImageLoad" | "forceSyncDisplay" | "nativeLazyLoad" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">> & Partial<Pick<Partial<CardViewOwnProps>, never>> & React.RefAttributes<any>>;
+export declare const CardView: React.ForwardRefExoticComponent<Pick<Pick<CardViewProps, "progress" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "testId" | "appearance" | "error" | "actions" | "selectable" | "selected" | "alt" | "disableOverlay" | "dimensions" | "featureFlags" | "status" | "mediaItemType" | "resizeMode" | "onDisplayImage" | "onImageError" | "onImageLoad" | "cardPreview" | "forceSyncDisplay" | "mediaCardCursor" | "nativeLazyLoad" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">, never> & Partial<Pick<Pick<CardViewProps, "progress" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "testId" | "appearance" | "error" | "actions" | "selectable" | "selected" | "alt" | "disableOverlay" | "dimensions" | "featureFlags" | "status" | "mediaItemType" | "resizeMode" | "onDisplayImage" | "onImageError" | "onImageLoad" | "cardPreview" | "forceSyncDisplay" | "mediaCardCursor" | "nativeLazyLoad" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">, "progress" | "metadata" | "onClick" | "onMouseEnter" | "innerRef" | "testId" | "appearance" | "error" | "actions" | "selectable" | "selected" | "alt" | "disableOverlay" | "dimensions" | "featureFlags" | "status" | "mediaItemType" | "resizeMode" | "onDisplayImage" | "onImageError" | "onImageLoad" | "cardPreview" | "forceSyncDisplay" | "mediaCardCursor" | "nativeLazyLoad" | "titleBoxBgColor" | "titleBoxIcon" | "disableAnimation" | "originalDimensions">> & Partial<Pick<Partial<CardViewOwnProps>, never>> & React.RefAttributes<any>>;

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

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

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

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { FileIdentifier, MediaClient } from '@atlaskit/media-client';
-import { InjectedIntlProps } from 'react-intl';
+import { WrappedComponentProps } from 'react-intl-next';
 import { MediaViewerDataSource } from '@atlaskit/media-viewer';
 export interface MediaInlineCardProps {
     identifier: FileIdentifier;
@@ -10,7 +10,5 @@ export interface MediaInlineCardProps {
     onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
     mediaViewerDataSource?: MediaViewerDataSource;
 }
-export declare const MediaInlineCardInternal: FC<MediaInlineCardProps & InjectedIntlProps>;
-export declare const MediaInlineCard: React.ComponentClass<MediaInlineCardProps, any> & {
-    WrappedComponent: ReactIntl.ComponentConstructor<MediaInlineCardProps & InjectedIntlProps>;
-};
+export declare const MediaInlineCardInternal: FC<MediaInlineCardProps & WrappedComponentProps>;
+export declare const MediaInlineCard: React.FC<MediaInlineCardProps>;

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

@@ -4,26 +4,33 @@ import { MediaClient, FileIdentifier, FileState, MediaFileArtifacts } from '@atl
 import { Subscription } from 'rxjs/Subscription';
 import { CardDimensions, NumericalCardDimensions } from '..';
 import { WithAnalyticsEventsProps, UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import type { CardPreview } from '..';
 export declare const inlinePlayerClassName = "media-card-inline-player";
 export interface InlinePlayerOwnProps {
     identifier: FileIdentifier;
     mediaClient: MediaClient;
     dimensions?: CardDimensions;
     originalDimensions?: NumericalCardDimensions;
+    autoplay: boolean;
     selected?: boolean;
     onError?: (error: Error) => void;
     readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
     testId?: string;
+    readonly cardPreview?: CardPreview;
     readonly forwardRef?: React.Ref<HTMLDivElement>;
 }
 export declare type InlinePlayerProps = InlinePlayerOwnProps & WithAnalyticsEventsProps;
 export interface InlinePlayerState {
     fileSrc?: string;
+    isUploading?: boolean;
+    progress?: number;
+    elementWidth?: number;
 }
 export declare const getPreferredVideoArtifact: (fileState: FileState) => keyof MediaFileArtifacts | undefined;
 export declare class InlinePlayerBase extends Component<InlinePlayerProps, InlinePlayerState> {
     subscription?: Subscription;
     state: InlinePlayerState;
+    divRef: React.RefObject<HTMLDivElement>;
     static defaultProps: {
         dimensions: {
             width: number;
@@ -38,6 +45,8 @@ export declare class InlinePlayerBase extends Component<InlinePlayerProps, Inlin
     componentWillUnmount(): void;
     onDownloadClick: () => void;
     onFirstPlay: () => void;
+    private get breakpoint();
+    saveElementWidth: () => void;
     render(): JSX.Element;
 }
-export declare const InlinePlayer: React.ForwardRefExoticComponent<Pick<InlinePlayerProps, "onError" | "onClick" | "createAnalyticsEvent" | "testId" | "selected" | "dimensions" | "originalDimensions" | "mediaClient" | "identifier" | "forwardRef"> & React.RefAttributes<HTMLDivElement>>;
+export declare const InlinePlayer: React.ForwardRefExoticComponent<Pick<InlinePlayerProps, "onError" | "onClick" | "testId" | "createAnalyticsEvent" | "selected" | "dimensions" | "cardPreview" | "originalDimensions" | "mediaClient" | "identifier" | "autoplay" | "forwardRef"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -12,4 +12,5 @@ declare type InlinePlayerWrapper = {
     selected?: boolean;
 };
 export declare const InlinePlayerWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & InlinePlayerWrapper, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & InlinePlayerWrapper>;
+export declare const FormattedMessageWrapper: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
 export {};

package/dist/types/root/ui/iconMessage/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { MessageDescriptor } from 'react-intl-next';
 export declare type InternalIconMessageProps = {
-    messageDescriptor: FormattedMessage.MessageDescriptor;
+    messageDescriptor: MessageDescriptor;
     animated?: boolean;
     reducedFont?: boolean;
 };

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

@@ -1,14 +1,14 @@
 import React from 'react';
 import { MediaType, ImageResizeMode } from '@atlaskit/media-client';
+import { CardPreview } from '../../..';
 export declare type ImageRendererProps = {
-    readonly dataURI: string;
+    readonly cardPreview: CardPreview;
     readonly mediaType: MediaType;
-    readonly previewOrientation?: number;
     readonly alt?: string;
     readonly resizeMode?: ImageResizeMode;
     readonly onDisplayImage?: () => void;
-    readonly onImageError?: () => void;
-    readonly onImageLoad?: () => void;
+    readonly onImageError?: (cardPreview: CardPreview) => void;
+    readonly onImageLoad?: (cardPreview: CardPreview) => void;
     readonly nativeLazyLoad?: boolean;
     readonly forceSyncDisplay?: boolean;
 };

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Breakpoint } from '../common';
 export declare const LoadingRateLimited: ({ breakpoint, positionBottom, }: {
     breakpoint?: Breakpoint | undefined;

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const PlayButton: () => JSX.Element;

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

@@ -1,7 +1,9 @@
+/// <reference types="react" />
 import { Breakpoint } from '../common';
 export declare type ProgressBarProps = {
     progress?: number;
     breakpoint?: Breakpoint;
     positionBottom?: boolean;
+    showOnTop?: boolean;
 };
-export declare const ProgressBar: ({ progress, breakpoint, positionBottom, }: ProgressBarProps) => JSX.Element;
+export declare const ProgressBar: ({ progress, breakpoint, positionBottom, showOnTop, }: ProgressBarProps) => JSX.Element;

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

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

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

@@ -1,19 +1,20 @@
 /// <reference types="react" />
 import { CardDimensions, CardAppearance } from '../..';
 import { Breakpoint } from './common';
+import { MediaCardCursor } from '../../types';
 export declare const calcBreakpointSize: (wrapperWidth?: number) => Breakpoint;
 export interface NewFileExperienceWrapperProps {
     breakpoint: Breakpoint;
     dimensions?: CardDimensions;
     appearance?: CardAppearance;
     mediaType?: string;
-    shouldUsePointerCursor: boolean;
     disableOverlay: boolean;
     displayBackground: boolean;
     selected: boolean;
     isPlayButtonClickable: boolean;
     isTickBoxSelectable: boolean;
     shouldDisplayTooltip: boolean;
+    mediaCardCursor: MediaCardCursor;
 }
 export declare const NewFileExperienceWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & NewFileExperienceWrapperProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & NewFileExperienceWrapperProps>;
 export declare const CardImageContainer: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type TickBoxProps = {
     selected?: boolean;
 };

package/dist/types/root/ui/titleBox/failedTitleBox.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Breakpoint } from '../common';
-import { FormattedMessage } from 'react-intl';
+import { MessageDescriptor } from 'react-intl-next';
 export declare type OnRetryFunction = () => void;
 export declare type FailedTitleBoxProps = {
     breakpoint: Breakpoint;
-    customMessage?: FormattedMessage.MessageDescriptor;
+    customMessage?: MessageDescriptor;
 };
 export declare const FailedTitleBox: React.FC<FailedTitleBoxProps>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react-intl" />
 import React from 'react';
 import { TitleBoxIcon as TitleBoxIconType } from '../../../index';
 import { Breakpoint } from '../common';
@@ -12,13 +11,6 @@ export declare type TitleBoxProps = {
 declare type FormattedDateProps = {
     timestamp: number;
 };
-declare type WithIntlProps = {
-    intl?: {
-        locale?: string;
-    };
-};
-export declare const FormattedDate: React.ComponentClass<FormattedDateProps & WithIntlProps, any> & {
-    WrappedComponent: ReactIntl.ComponentConstructor<FormattedDateProps & WithIntlProps & ReactIntl.InjectedIntlProps>;
-};
+export declare const FormattedDate: React.ComponentType<FormattedDateProps>;
 export declare const TitleBox: ({ name, createdAt, breakpoint, titleBoxBgColor, titleBoxIcon, }: TitleBoxProps) => JSX.Element;
 export {};

package/dist/types/types.d.ts

@@ -7,9 +7,14 @@ export declare type FilePreviewStatus = {
 };
 export declare type CardAppearance = 'auto' | 'image' | 'square' | 'horizontal';
 export declare type CardDimensionValue = number | string;
-export declare type CardPreviewSource = 'local' | 'remote' | 'ssr-server' | 'ssr-client' | 'cache-local' | 'cache-remote' | 'cache-ssr-client' | 'cache-ssr-server' | 'external';
+export declare type CardPreviewSource = 'local' | 'remote' | 'ssr-server' | 'ssr-client' | 'ssr-data' | 'cache-local' | 'cache-remote' | 'cache-ssr-client' | 'cache-ssr-server' | 'external';
 export interface CardPreview {
     dataURI: string;
     orientation?: number;
     source: CardPreviewSource;
 }
+export declare enum MediaCardCursor {
+    Action = "pointer",
+    NoAction = "default",
+    NotReady = "wait"
+}

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

@@ -4,6 +4,11 @@ import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { MediaCardError, MediaCardErrorPrimaryReason } from '../errors';
 export declare type FileUriFailReason = 'local-uri' | 'remote-uri' | `unknown-uri`;
 export declare type FailedErrorFailReason = MediaCardErrorPrimaryReason | 'nativeError';
+export declare type MediaCardErrorInfo = {
+    failReason: FailedErrorFailReason;
+    error: MediaClientErrorReason | 'nativeError';
+    errorDetail: string;
+};
 export declare type RenderFailedEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & FailureAttributes & {
     failReason: FailedErrorFailReason | 'failed-processing';
     error?: MediaClientErrorReason | 'nativeError';
@@ -31,6 +36,7 @@ export declare const getRenderErrorFailReason: (error: MediaCardError) => Failed
 export declare const getRenderErrorErrorReason: (error: MediaCardError) => MediaClientErrorReason | 'nativeError';
 export declare const getRenderErrorErrorDetail: (error: MediaCardError) => string;
 export declare const getRenderErrorRequestMetadata: (error: MediaCardError) => RequestMetadata | undefined;
+export declare const extractErrorInfo: (error: MediaCardError) => MediaCardErrorInfo;
 export declare const getRenderErrorEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, error: MediaCardError) => RenderFailedEventPayload;
 export declare const getRenderFailedFileStatusPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => RenderFailedEventPayload;
 export declare const getCopiedFilePayload: (fileId: string) => CopiedFileEventPayload;

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const getErrorMessage: (status: string) => false | JSX.Element;

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

@@ -0,0 +1,2 @@
+import { MediaCardCursor } from '../types';
+export declare const getMediaCardCursor: (useInlinePlayer: boolean, useMediaViewer: boolean, isErrorStatus: boolean, hasCardPreview: boolean, mediaType?: "audio" | "video" | "image" | "doc" | "archive" | "unknown" | undefined) => MediaCardCursor;

package/dist/types/utils/globalScope/getSSRData.d.ts

@@ -0,0 +1,3 @@
+import type { MediaCardSsrData } from './types';
+import { FileIdentifier } from '@atlaskit/media-client';
+export declare const getSSRData: (identifier: FileIdentifier) => MediaCardSsrData | undefined;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { FileIdentifier } from '@atlaskit/media-client';
+import { NumericalCardDimensions } from '@atlaskit/media-common';
+import { MediaCardErrorInfo } from '../../utils/analytics';
+import { MediaCardSsr } from './types';
+export declare const GLOBAL_MEDIA_CARD_SSR = "mediaCardSsr";
+export declare const GLOBAL_MEDIA_NAMESPACE = "__MEDIA_INTERNAL";
+export declare type MediaGlobalScope = {
+    [GLOBAL_MEDIA_CARD_SSR]?: MediaCardSsr;
+};
+export declare function getMediaGlobalScope(globalScope?: any): MediaGlobalScope;
+export declare function getMediaCardSSR(globalScope?: any): MediaCardSsr;
+export declare const getKey: ({ id, collectionName, occurrenceKey }: FileIdentifier) => string;
+export declare const storeDataURI: (key: string, dataURI?: string | undefined, dimensions?: NumericalCardDimensions | undefined, error?: MediaCardErrorInfo | undefined, globalScope?: any) => void;
+export declare type StoreSSRDataScriptProps = {
+    identifier: FileIdentifier;
+    dataURI?: string;
+    dimensions?: NumericalCardDimensions;
+    error?: MediaCardErrorInfo;
+};
+export declare const StoreSSRDataScript: React.FC<StoreSSRDataScriptProps>;

package/dist/types/utils/globalScope/index.d.ts

@@ -0,0 +1,4 @@
+export { StoreSSRDataScript, GLOBAL_MEDIA_NAMESPACE, GLOBAL_MEDIA_CARD_SSR, getKey, } from './globalScope';
+export { getSSRData } from './getSSRData';
+export type { MediaCardSsrData, MediaCardSsr } from './types';
+export type { MediaGlobalScope } from './globalScope';

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

@@ -0,0 +1,8 @@
+import { NumericalCardDimensions } from '@atlaskit/media-common';
+import { MediaCardErrorInfo } from '../../utils/analytics';
+export declare type MediaCardSsrData = {
+    dataURI?: string;
+    dimensions?: NumericalCardDimensions;
+    error?: MediaCardErrorInfo;
+};
+export declare type MediaCardSsr = Record<string, MediaCardSsrData>;

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

@@ -0,0 +1,2 @@
+export declare const printFunctionCall: <T extends any[]>(fn: (...args: T) => void, ...args: T) => string;
+export declare const printScript: (statements: string[]) => string;