@atlaskit/media-card 71.0.0 → 73.1.0

package/dist/esm/root/ui/titleBox/failedTitleBox.js

@@ -1,15 +1,19 @@
 import React from 'react';
 import { TitleBoxWrapper, ErrorMessageWrapper } from './styled';
 import EditorWarningIcon from '@atlaskit/icon/glyph/editor/warning';
+import { messages } from '@atlaskit/media-ui';
 import { R300 } from '@atlaskit/theme/colors';
-import { getErrorMessage } from '../../../utils/getErrorMessage';
+import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessageWrapper } from '../../styled';
 export var FailedTitleBox = function FailedTitleBox(_ref) {
-  var breakpoint = _ref.breakpoint;
+  var breakpoint = _ref.breakpoint,
+      _ref$customMessage = _ref.customMessage,
+      customMessage = _ref$customMessage === void 0 ? messages.failed_to_load : _ref$customMessage;
   return /*#__PURE__*/React.createElement(TitleBoxWrapper, {
     breakpoint: breakpoint
   }, /*#__PURE__*/React.createElement(ErrorMessageWrapper, null, /*#__PURE__*/React.createElement(EditorWarningIcon, {
     label: 'Warning',
     size: 'small',
     primaryColor: R300
-  }), getErrorMessage('error')));
+  }), /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, customMessage))));
 };

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

@@ -3,8 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 import styled from 'styled-components';
-import { responsiveSettings, getTitleBoxHeight } from '../common';
-import { Breakpoint } from '../Breakpoint';
+import { responsiveSettings, getTitleBoxHeight, Breakpoint } from '../common';
 import { N0 } from '@atlaskit/theme/colors';
 import { rgba } from '../../../styles/mixins';
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import LockFilledIcon from '@atlaskit/icon/glyph/lock-filled';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { TitleBoxWrapper, TitleBoxHeader, TitleBoxFooter, TitleBoxIcon } from './styled';
 import { Truncate } from '@atlaskit/media-ui/truncateText';
 import { formatDate } from '@atlaskit/media-ui/formatDate';

package/dist/esm/utils/analytics.js

@@ -2,14 +2,6 @@ import { getMediaClientErrorReason, isRequestError } from '@atlaskit/media-clien
 import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { isMediaCardError } from '../errors';
-export var RenderEventAction;
-
-(function (RenderEventAction) {
-  RenderEventAction["COMMENCED"] = "commenced";
-  RenderEventAction["SUCCEEDED"] = "succeeded";
-  RenderEventAction["FAILED"] = "failed";
-})(RenderEventAction || (RenderEventAction = {}));
-
 export var getFileAttributes = function getFileAttributes(metadata, fileStatus) {
   return {
     fileMediatype: metadata.mediaType,
@@ -34,7 +26,7 @@ export var getRenderPreviewableCardPayload = function getRenderPreviewableCardPa
 export var getRenderCommencedEventPayload = function getRenderCommencedEventPayload(fileAttributes, performanceAttributes) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.COMMENCED,
+    action: 'commenced',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
@@ -45,7 +37,7 @@ export var getRenderCommencedEventPayload = function getRenderCommencedEventPayl
 export var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fileAttributes, performanceAttributes) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.SUCCEEDED,
+    action: 'succeeded',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
@@ -54,33 +46,10 @@ export var getRenderSucceededEventPayload = function getRenderSucceededEventPayl
     }
   };
 };
-export var getFailedFileUriFailReason = function getFailedFileUriFailReason(fileStatus) {
-  if (!fileStatus) {
-    // This fail reason will come from a bug, most likely.
-    return "unknown-uri";
-  } else if (fileStatus === 'uploading') {
-    return 'local-uri';
-  }
-
-  return 'remote-uri';
-};
-export var getRenderFailedFileUriPayload = function getRenderFailedFileUriPayload(fileAttributes, performanceAttributes) {
-  return {
-    eventType: 'operational',
-    action: RenderEventAction.FAILED,
-    actionSubject: 'mediaCardRender',
-    attributes: {
-      fileAttributes: fileAttributes,
-      performanceAttributes: performanceAttributes,
-      status: 'fail',
-      failReason: getFailedFileUriFailReason(fileAttributes.fileStatus)
-    }
-  };
-};
 export var getRenderFailedExternalUriPayload = function getRenderFailedExternalUriPayload(fileAttributes, performanceAttributes) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.FAILED,
+    action: 'failed',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
@@ -123,7 +92,7 @@ export var getRenderErrorRequestMetadata = function getRenderErrorRequestMetadat
 export var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, performanceAttributes, error) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.FAILED,
+    action: 'failed',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
@@ -139,7 +108,7 @@ export var getRenderErrorEventPayload = function getRenderErrorEventPayload(file
 export var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes) {
   return {
     eventType: 'operational',
-    action: RenderEventAction.FAILED,
+    action: 'failed',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,

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

@@ -1,9 +1,11 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["triggerRef"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -80,16 +82,22 @@ export var CardActionsDropdownMenu = /*#__PURE__*/function (_Component) {
 
       if (actions.length > 0) {
         return /*#__PURE__*/React.createElement(DropdownMenu, {
-          "data-testid": "media-card-actions-menu",
+          testId: "media-card-actions-menu",
           onOpenChange: onOpenChange,
-          trigger: /*#__PURE__*/React.createElement(CardActionButtonWithAnalytics, {
-            variant: triggerVariant,
-            style: {
-              color: triggerColor
-            }
-          }, /*#__PURE__*/React.createElement(MoreIcon, {
-            label: "more"
-          }))
+          trigger: function trigger(_ref) {
+            var triggerRef = _ref.triggerRef,
+                providedProps = _objectWithoutProperties(_ref, _excluded);
+
+            return /*#__PURE__*/React.createElement(CardActionButtonWithAnalytics, _extends({
+              variant: triggerVariant,
+              style: {
+                color: triggerColor
+              },
+              ref: triggerRef
+            }, providedProps), /*#__PURE__*/React.createElement(MoreIcon, {
+              label: "more"
+            }));
+          }
         }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, actions.map(createDropdownItemWithAnalytics)));
       } else {
         return null;

package/dist/esm/utils/dimensionComparer.js

@@ -20,7 +20,7 @@ export var canCompareDimension = function canCompareDimension(current, next) {
   return false;
 };
 export var isBigger = function isBigger(current, next) {
-  if (canCompareDimension(current.width, next.width) && canCompareDimension(current.height, next.height)) {
+  if (!!current && !!next && canCompareDimension(current.width, next.width) && canCompareDimension(current.height, next.height)) {
     var nextIsHigher = parseInt("".concat(current.width), 10) < parseInt("".concat(next.width), 10);
     var nextIsWider = parseInt("".concat(current.height), 10) < parseInt("".concat(next.height), 10);
     return nextIsHigher || nextIsWider;

package/dist/esm/utils/getErrorMessage.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui';
 export var getErrorMessage = function getErrorMessage(status) {
   return status === 'error' && /*#__PURE__*/React.createElement(FormattedMessage, messages.failed_to_load);

package/dist/esm/utils/metadata.js

@@ -1,4 +1,4 @@
-import { isErrorFileState } from '@atlaskit/media-client';
+import { isErrorFileState, isFileIdentifier } from '@atlaskit/media-client';
 
 var getProcessingStatusFromFileState = function getProcessingStatusFromFileState(status) {
   switch (status) {
@@ -13,8 +13,8 @@ var getProcessingStatusFromFileState = function getProcessingStatusFromFileState
   }
 };
 
-export var getFileDetails = function getFileDetails(state) {
-  return !isErrorFileState(state) ? {
+var getFileDetailsFromFileState = function getFileDetailsFromFileState(state) {
+  return {
     id: state.id,
     name: state.name,
     size: state.size,
@@ -22,7 +22,15 @@ export var getFileDetails = function getFileDetails(state) {
     createdAt: state.createdAt,
     mediaType: state.mediaType,
     processingStatus: getProcessingStatusFromFileState(state.status)
+  };
+};
+
+export var getFileDetails = function getFileDetails(identifier, fileState) {
+  return isFileIdentifier(identifier) ? fileState && !isErrorFileState(fileState) ? getFileDetailsFromFileState(fileState) : {
+    id: identifier.id
   } : {
-    id: state.id
+    id: identifier.mediaItemType,
+    name: identifier.name || identifier.dataURI,
+    mediaType: 'image'
   };
 };

package/dist/esm/utils/objectURLCache.js

@@ -73,6 +73,12 @@ export var ObjectURLCache = /*#__PURE__*/function () {
     value: function set(key, value) {
       this.cache.set(key, value);
     }
+  }, {
+    key: "remove",
+    value: function remove(key) {
+      var removed = this.cache.remove(key);
+      removed && URL.revokeObjectURL(removed.dataURI);
+    }
   }]);
 
   return ObjectURLCache;

package/dist/esm/utils/shouldDisplayImageThumbnail.js

@@ -5,7 +5,7 @@ export var shouldDisplayImageThumbnail = function shouldDisplayImageThumbnail(ca
   }
 
   if (dataURI) {
-    return mediaItemType === 'external-image' || mimeType && isMimeTypeSupportedByBrowser(mimeType) || cardStatus === 'complete';
+    return mediaItemType === 'external-image' || mimeType && isMimeTypeSupportedByBrowser(mimeType) || cardStatus === 'complete' || cardStatus === 'loading-preview';
   }
 
   return false;

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": "71.0.0",
+	"version": "73.1.0",
 	"sideEffects": false
 }

package/dist/types/errors.d.ts

@@ -1,6 +1,9 @@
-export declare type MediaCardErrorPrimaryReason = 'upload' | 'metadata-fetch' | 'error-file-state' | RemotePreviewPrimaryReason | LocalPreviewPrimaryReason | 'preview-fetch';
+import { CardPreview } from '.';
+export declare type MediaCardErrorPrimaryReason = 'upload' | 'metadata-fetch' | 'error-file-state' | RemotePreviewPrimaryReason | LocalPreviewPrimaryReason | ImageLoadPrimaryReason | SsrPreviewPrimaryReason | 'preview-fetch';
+export declare type ImageLoadPrimaryReason = 'cache-remote-uri' | 'cache-local-uri' | 'local-uri' | 'remote-uri' | 'external-uri' | 'unknown-uri';
 export declare type RemotePreviewPrimaryReason = 'remote-preview-fetch' | 'remote-preview-not-ready';
 export declare type LocalPreviewPrimaryReason = 'local-preview-get' | 'local-preview-unsupported' | 'local-preview-rejected' | 'local-preview-image' | 'local-preview-video';
+export declare type SsrPreviewPrimaryReason = 'ssr-client-uri' | 'ssr-client-load' | 'ssr-server-uri' | 'ssr-server-load';
 export declare class MediaCardError extends Error {
     readonly primaryReason: MediaCardErrorPrimaryReason;
     readonly secondaryError?: Error | undefined;
@@ -16,8 +19,19 @@ export declare class RemotePreviewError extends MediaCardError {
     readonly secondaryError?: Error | undefined;
     constructor(primaryReason: RemotePreviewPrimaryReason, secondaryError?: Error | undefined);
 }
+export declare class SsrPreviewError extends MediaCardError {
+    readonly primaryReason: SsrPreviewPrimaryReason;
+    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 class ImageLoadError extends MediaCardError {
+    constructor(source?: CardPreview['source']);
+}
 export declare function isMediaCardError(err: Error): err is MediaCardError;
 export declare const isLocalPreviewError: (err: Error) => err is LocalPreviewError;
 export declare const isRemotePreviewError: (err: Error) => err is LocalPreviewError;
 export declare const isUnsupportedLocalPreviewError: (err: Error) => boolean;
+export declare function isImageLoadError(err: Error): err is ImageLoadError;
 export declare const ensureMediaCardError: (primaryReason: MediaCardErrorPrimaryReason, error: Error) => MediaCardError;
+export declare const isUploadError: (error?: MediaCardError | undefined) => boolean | undefined;

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

@@ -1,11 +1,7 @@
-import React from 'react';
 import { Component, ReactNode } from 'react';
 import { MediaItemType, MediaType, ImageResizeMode } from '@atlaskit/media-client';
 import { CardDimensions, CardStatus } from '../../index';
 import { CardAction } from '../../actions';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { RenderEventAction } from '../../utils/analytics';
-import { WithFileAttributesProps } from '../../utils/fileAttributesContext';
 export interface FileCardImageViewProps {
     readonly mediaName?: string;
     readonly mediaType?: MediaType;
@@ -25,15 +21,14 @@ export interface FileCardImageViewProps {
     readonly actions?: CardAction[];
     readonly onDisplayImage?: () => void;
     readonly previewOrientation?: number;
-    readonly timeElapsedTillCommenced?: number;
+    readonly onImageError?: () => void;
+    readonly onImageLoad?: () => void;
 }
 export declare const fileCardImageViewSelector = "media-file-card-view";
 export declare const fileCardImageViewSelectedSelector = "media-file-card-view-selected";
-export declare type FileCardImageViewBaseProps = FileCardImageViewProps & WithAnalyticsEventsProps & WithFileAttributesProps;
-export declare class FileCardImageViewBase extends Component<FileCardImageViewBaseProps> {
+export declare class FileCardImageView extends Component<FileCardImageViewProps> {
     private wasThumbnailDisplayed;
-    private lastAnalyticsAction;
-    static defaultProps: Partial<FileCardImageViewBaseProps>;
+    static defaultProps: Partial<FileCardImageViewProps>;
     render(): JSX.Element;
     private renderCardContents;
     private renderLoadingContents;
@@ -41,10 +36,7 @@ export declare class FileCardImageViewBase extends Component<FileCardImageViewBa
     private renderFailedContents;
     private renderUploadingCardOverlay;
     private renderPlayButton;
-    onImageLoad: () => void;
-    onImageError: () => void;
     private renderMediaImage;
-    shouldFireEvent: (action: RenderEventAction) => boolean;
     private renderProgressBar;
     private renderSuccessCardContents;
     private renderSuccessCardOverlay;
@@ -52,4 +44,3 @@ export declare class FileCardImageViewBase extends Component<FileCardImageViewBa
     private get isCropped();
     private get isStretched();
 }
-export declare const FileCardImageView: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<FileCardImageViewProps & WithAnalyticsEventsProps>, "progress" | "error" | "alt" | "dimensions" | "resizeMode" | "mediaType" | "mimeType" | "children" | "actions" | "mediaName" | "selectable" | "selected" | "disableOverlay" | "fileSize" | "dataURI" | "status" | "mediaItemType" | "onDisplayImage" | "previewOrientation" | "timeElapsedTillCommenced"> & React.RefAttributes<any>>;

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

@@ -6,7 +6,7 @@ export interface WrapperProps {
     hasOnClick?: boolean;
     mediaType?: string;
 }
-export declare const Wrapper: import("styled-components").StyledComponentClass<import("react").HTMLAttributes<{}> & WrapperProps, any, Pick<import("react").HTMLAttributes<{}>, "dir" | "slot" | "style" | "title" | "id" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css"> & {
+export declare const Wrapper: import("styled-components").StyledComponentClass<import("react").HTMLAttributes<{}> & WrapperProps, any, Pick<import("react").HTMLAttributes<{}>, "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css"> & {
     theme?: any;
 } & WrapperProps>;
 export declare const PlayIconWrapper: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -1,2 +1,2 @@
-export { FileCardImageView, FileCardImageViewBase } from './cardImageView';
+export { FileCardImageView } from './cardImageView';
 export type { FileCardImageViewProps } from './cardImageView';

package/dist/types/index.d.ts

@@ -1,18 +1,17 @@
 import { MouseEvent } from 'react';
 import { FileDetails, MediaClient, Identifier, ImageResizeMode, FileState } from '@atlaskit/media-client';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { MediaFeatureFlags, NumericalCardDimensions } from '@atlaskit/media-common';
+import { MediaFeatureFlags, NumericalCardDimensions, SSR } from '@atlaskit/media-common';
 import { CardAction } from './actions';
 import { MediaViewerDataSource } from '@atlaskit/media-viewer';
-import { CardPreview } from './root/card/getCardPreview';
-import { CardStatus, CardAppearance } from './types';
+import { CardPreview, CardStatus, CardAppearance } from './types';
 import { MediaCardError } from './errors';
 import { CardDimensions } from './utils';
 export type { CardDimensions } from './utils';
 export type { NumericalCardDimensions } from '@atlaskit/media-common';
 export { Card, MediaInlineCard } from './root';
 export type { CardAction, CardEventHandler } from './actions';
-export type { CardStatus, CardAppearance, CardDimensionValue } from './types';
+export type { CardStatus, CardAppearance, CardDimensionValue, CardPreview, } from './types';
 export declare type TitleBoxIcon = 'LockFilledIcon';
 export interface CardEvent {
     event: MouseEvent<HTMLElement>;
@@ -49,10 +48,12 @@ export interface CardProps extends SharedCardProps, CardEventProps {
     readonly mediaViewerDataSource?: MediaViewerDataSource;
     readonly contextId?: string;
     readonly shouldEnableDownloadButton?: boolean;
+    readonly ssr?: SSR;
 }
 export interface CardState {
     status: CardStatus;
     isCardVisible: boolean;
+    shouldAutoplay?: boolean;
     isPlayingFile: boolean;
     mediaViewerSelectedItem?: Identifier;
     fileState?: FileState;
@@ -60,6 +61,8 @@ export interface CardState {
     cardPreview?: CardPreview;
     error?: MediaCardError;
     cardRef: HTMLDivElement | null;
+    isBannedLocalPreview: boolean;
+    previewDidRender: boolean;
 }
 export { CardLoading } from './utils/lightCards/cardLoading';
 export { CardError } from './utils/lightCards/cardError';

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

@@ -1,14 +1,9 @@
 import { FileAttributes, MediaFeatureFlags, PerformanceAttributes } from '@atlaskit/media-common';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { CardStatus } from '../..';
-import { CardPreview } from './getCardPreview';
 import { MediaCardError } from './../../errors';
 export declare const relevantFeatureFlagNames: Array<keyof MediaFeatureFlags>;
-export declare type FireOperationalEventParams = {
-    cardPreview?: CardPreview;
-    error?: MediaCardError;
-};
-export declare const fireOperationalEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, status: CardStatus, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, { cardPreview, error }?: FireOperationalEventParams) => void;
+export declare const fireOperationalEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, status: CardStatus, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, error?: MediaCardError | undefined) => void;
 export declare const fireCommencedEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => void;
 export declare const fireCopiedEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileId: string, cardRef: HTMLDivElement) => void;
 export declare const fireScreenEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileAttributes: FileAttributes) => void;

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

@@ -1,20 +1,6 @@
 import React from 'react';
-import { WithMediaClientConfigProps } from '@atlaskit/media-client';
-import { MediaCardAnalyticsErrorBoundaryProps } from '../media-card-analytics-error-boundary';
-import { CardWithAnalyticsEventsProps } from '.';
-export declare type CardWithMediaClientConfigProps = WithMediaClientConfigProps<CardWithAnalyticsEventsProps>;
-declare type CardWithMediaClientConfigComponent = React.ComponentType<CardWithMediaClientConfigProps>;
-declare type MediaCardErrorBoundaryComponent = React.ComponentType<MediaCardAnalyticsErrorBoundaryProps>;
-export interface AsyncCardState {
-    Card?: CardWithMediaClientConfigComponent;
-    MediaCardErrorBoundary?: MediaCardErrorBoundaryComponent;
-}
-export default class CardLoader extends React.PureComponent<CardWithMediaClientConfigProps & AsyncCardState, AsyncCardState> {
-    static displayName: string;
-    static Card?: CardWithMediaClientConfigComponent;
-    static MediaCardErrorBoundary?: MediaCardErrorBoundaryComponent;
-    state: AsyncCardState;
-    componentDidMount(): Promise<void>;
-    render(): JSX.Element;
-}
-export {};
+import type { WithMediaClientConfigProps } from '@atlaskit/media-client';
+import type { CardBaseProps } from '.';
+export declare type CardWithMediaClientConfigProps = WithMediaClientConfigProps<CardBaseProps>;
+declare const CardLoader: React.FC<CardWithMediaClientConfigProps>;
+export default CardLoader;

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

@@ -0,0 +1,5 @@
+import { FileState } from '@atlaskit/media-client';
+import { MediaFeatureFlags } from '@atlaskit/media-common';
+import { CardState } from '../..';
+export declare const createStateUpdater: (newState: Partial<CardState>) => (prevState: CardState) => Pick<CardState, keyof CardState>;
+export declare const getCardStateFromFileState: (fileState: FileState, isBannedLocalPreview: boolean, featureFlags?: MediaFeatureFlags | undefined) => Partial<CardState>;

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

@@ -1,16 +1,18 @@
 import { ObjectURLCache } from '../../../utils/objectURLCache';
 import { CardDimensions } from '../../../utils/cardDimensions';
-import { CardPreview } from './types';
+import { CardPreview } from '../../../types';
 export declare const getCacheKey: (id: string, dimensions: CardDimensions) => string;
 export interface CardPreviewCache {
     get(id: string, dimensions: CardDimensions): CardPreview | undefined;
     set(id: string, dimensions: CardDimensions, cardPreview: CardPreview): void;
+    remove(id: string, dimensions: CardDimensions): void;
 }
 export declare class CardPreviewCacheImpl implements CardPreviewCache {
     private previewCache;
     constructor(previewCache: ObjectURLCache);
     get: (id: string, dimensions: CardDimensions) => CardPreview | undefined;
     set: (id: string, dimensions: CardDimensions, cardPreview: CardPreview) => void;
+    remove: (id: string, dimensions: CardDimensions) => void;
 }
 declare const _default: CardPreviewCacheImpl;
 export default _default;

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

@@ -0,0 +1,5 @@
+import { MediaFeatureFlags } from '@atlaskit/media-common';
+import { CardStatus, FilePreviewStatus } from '../../../types';
+import { FileState } from '@atlaskit/media-client';
+export declare const extractFilePreviewStatus: (fileState: FileState, isBannedLocalPreview: boolean, featureFlags?: MediaFeatureFlags | undefined) => FilePreviewStatus;
+export declare const isPreviewableStatus: (cardStatus: CardStatus, { isPreviewable, hasPreview, isSupportedByBrowser }: FilePreviewStatus) => boolean;

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

@@ -1,10 +1,9 @@
-import { MediaClient, FilePreview } from '@atlaskit/media-client';
-import { NumericalCardDimensions } from '../../..';
-import { CardPreview } from './types';
+import { MediaClient, FilePreview, MediaStoreGetFileImageParams } from '@atlaskit/media-client';
+import { CardPreview } from '../../../types';
 /**
  * This method tells the support for the media
  * types covered in getCardPreviewFromFilePreview
  */
 export declare const isSupportedLocalPreview: (mediaType?: "audio" | "video" | "image" | "doc" | "archive" | "unknown" | undefined) => boolean;
 export declare const getCardPreviewFromFilePreview: (filePreview: FilePreview | Promise<FilePreview>) => Promise<CardPreview>;
-export declare const getCardPreviewFromBackend: (mediaClient: MediaClient, id: string, { width, height }: NumericalCardDimensions, collectionName?: string | undefined, resizeMode?: "crop" | "fit" | "full-fit" | "stretchy-fit" | undefined) => Promise<CardPreview>;
+export declare const getCardPreviewFromBackend: (mediaClient: MediaClient, id: string, params: MediaStoreGetFileImageParams) => Promise<CardPreview>;