@atlaskit/media-card 71.0.0 → 72.0.0

package/dist/es2019/root/cardView.js

@@ -12,7 +12,7 @@ import { Wrapper } from './styled';
 import { createAndFireMediaCardEvent } from '../utils/analytics';
 import { attachDetailsToActions } from '../actions';
 import { getErrorMessage } from '../utils/getErrorMessage';
-import { toHumanReadableMediaSize } from '@atlaskit/media-ui';
+import { toHumanReadableMediaSize, messages } from '@atlaskit/media-ui';
 import { NewFileExperienceWrapper } from './ui/styled';
 import { CardImageContainer, calcBreakpointSize } from './ui/styledSSR';
 import { ImageRenderer } from './ui/imageRenderer/imageRenderer';
@@ -27,10 +27,10 @@ import Tooltip from '@atlaskit/tooltip';
 import { IconWrapper } from './ui/iconWrapper/styled';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import SpinnerIcon from '@atlaskit/spinner';
-import { PreviewUnavailable, CreatingPreview, RateLimited, PreviewCurrentlyUnavailable } from './ui/iconMessage';
-import { LoadingRateLimited } from './ui/loadingRateLimited/loadingRateLimited';
+import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUnavailable, FailedToLoad } from './ui/iconMessage';
 import { isRateLimitedError, isPollingError } from '@atlaskit/media-client';
 import { newFileExperienceClassName } from './card/cardConstants';
+import { isUploadError } from '../errors';
 
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
@@ -41,15 +41,37 @@ export class CardViewBase extends React.Component {
     super(...args);
 
     _defineProperty(this, "state", {
-      isImageFailedToLoad: false
+      didImageRender: false
     });
 
     _defineProperty(this, "divRef", /*#__PURE__*/React.createRef());
 
-    _defineProperty(this, "onImageLoadError", () => {
+    _defineProperty(this, "onImageLoad", () => {
+      const {
+        onImageLoad
+      } = this.props; // We render the icon & icon message always, even if there is dataURI available.
+      // If the image fails to load/render, the icon will remain, i.e. the user won't see a change until
+      // the root card decides to chage status to error.
+      // If the image renders successfully, we switch this variable to hide the icon & icon message
+      // behind the thumbnail in case the image has transparency.
+      // It is less likely that root component replaces a suceeded dataURI for a failed one
+      // than the opposite case. Therefore we prefer to hide the icon instead show when the image fails,
+      // for a smoother transition
+
+      this.setState({
+        didImageRender: true
+      });
+      onImageLoad && onImageLoad();
+    });
+
+    _defineProperty(this, "onImageError", () => {
+      const {
+        onImageError
+      } = this.props;
       this.setState({
-        isImageFailedToLoad: true
+        didImageRender: false
       });
+      onImageError && onImageError();
     });
 
     _defineProperty(this, "saveElementWidth", () => {
@@ -91,7 +113,7 @@ export class CardViewBase extends React.Component {
         name
       } = metadata || {};
       const shouldUsePointerCursor = status !== 'error' && status !== 'failed-processing';
-      const shouldDisplayBackground = !dataURI || !disableOverlay;
+      const shouldDisplayBackground = !dataURI || !disableOverlay || status === 'error' || status === 'failed-processing';
       const isPlayButtonClickable = !!(this.shouldRenderPlayButton() && disableOverlay);
       const isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Make tooltip optional for media singles - images, videos.
       // Intention is to show full file name when it's truncate in titlebox,
@@ -136,8 +158,7 @@ export class CardViewBase extends React.Component {
         previewOrientation,
         alt,
         onDisplayImage,
-        actions,
-        timeElapsedTillCommenced
+        actions
       } = this.props;
       const {
         name,
@@ -167,7 +188,8 @@ export class CardViewBase extends React.Component {
         disableOverlay: disableOverlay,
         previewOrientation: previewOrientation,
         alt: alt,
-        timeElapsedTillCommenced: timeElapsedTillCommenced
+        onImageLoad: this.onImageLoad,
+        onImageError: this.onImageError
       });
     });
 
@@ -186,16 +208,15 @@ export class CardViewBase extends React.Component {
         mediaType
       } = metadata || {};
       const {
-        isImageFailedToLoad
+        didImageRender
       } = this.state;
       const isZeroSize = !!(metadata && metadata.size === 0);
       const defaultConfig = {
-        renderTypeIcon: isImageFailedToLoad || !dataURI,
-        renderImageRenderer: !!dataURI && !isImageFailedToLoad,
+        renderTypeIcon: !didImageRender,
+        renderImageRenderer: !!dataURI,
         renderPlayButton: !!dataURI && mediaType === 'video',
         renderBlanket: !disableOverlay,
-        renderTitleBox: !!name && !disableOverlay,
-        renderFailedTitleBox: !!isImageFailedToLoad && !metadata,
+        renderTitleBox: !disableOverlay && !!name,
         renderTickBox: !disableOverlay && !!selectable
       };
 
@@ -210,55 +231,72 @@ export class CardViewBase extends React.Component {
         case 'processing':
         case 'loading-preview':
           return { ...defaultConfig,
-            iconMessage: (isImageFailedToLoad || !dataURI) && !isZeroSize ? /*#__PURE__*/React.createElement(CreatingPreview, {
+            iconMessage: !didImageRender && !isZeroSize ? /*#__PURE__*/React.createElement(CreatingPreview, {
               disableAnimation: disableAnimation
             }) : undefined
           };
 
         case 'complete':
-          return { ...defaultConfig,
-            iconMessage: !!isImageFailedToLoad && !!metadata ? /*#__PURE__*/React.createElement(PreviewUnavailable, null) : undefined
-          };
+          return defaultConfig;
 
         case 'error':
-          if (error && isPollingError(error)) {
-            return { ...defaultConfig,
-              renderTypeIcon: true,
-              renderImageRenderer: false,
-              renderTitleBox: !!name,
-              renderFailedTitleBox: false,
-              iconMessage: !!metadata && !isZeroSize ? /*#__PURE__*/React.createElement(PreviewCurrentlyUnavailable, null) : undefined
-            };
-          } else if (isRateLimitedError(error) && !disableOverlay) {
-            return {
-              renderTypeIcon: !!metadata,
-              renderTitleBox: !!metadata,
-              iconMessage: !!metadata ? /*#__PURE__*/React.createElement(RateLimited, null) : undefined,
-              renderLoadingRateLimited: !metadata
+        case 'failed-processing':
+          const baseErrorConfig = { ...defaultConfig,
+            renderTypeIcon: true,
+            renderImageRenderer: false,
+            renderTitleBox: false,
+            renderPlayButton: false
+          };
+          let iconMessage;
+
+          if (!!metadata) {
+            if (error) {
+              const {
+                secondaryError
+              } = error;
+
+              if (isRateLimitedError(secondaryError) || secondaryError && isPollingError(secondaryError)) {
+                iconMessage = /*#__PURE__*/React.createElement(PreviewCurrentlyUnavailable, null);
+              }
+            } else if (!isZeroSize) {
+              iconMessage = /*#__PURE__*/React.createElement(PreviewUnavailable, null);
+            }
+          } else if (!!disableOverlay) {
+            iconMessage = /*#__PURE__*/React.createElement(FailedToLoad, null);
+          }
+
+          if (error && isUploadError(error)) {
+            if (!disableOverlay) {
+              return { ...baseErrorConfig,
+                renderFailedTitleBox: true,
+                customTitleMessage: messages.failed_to_upload
+              };
+            }
+
+            return { ...baseErrorConfig,
+              renderTitleBox: !metadata && !!name,
+              iconMessage: /*#__PURE__*/React.createElement(FailedToUpload, null)
             };
-          } else {
-            return { ...defaultConfig,
-              renderTypeIcon: true,
-              renderImageRenderer: false,
-              renderTitleBox: false,
-              renderFailedTitleBox: true
+          }
+
+          if (!disableOverlay) {
+            return { ...baseErrorConfig,
+              renderTitleBox: !!name,
+              renderFailedTitleBox: !metadata,
+              iconMessage
             };
           }
 
-        case 'failed-processing':
-          return { ...defaultConfig,
-            renderTypeIcon: true,
-            renderImageRenderer: false,
-            renderTitleBox: !!name && !disableOverlay,
-            renderFailedTitleBox: !metadata,
-            iconMessage: !!metadata && !isZeroSize ? /*#__PURE__*/React.createElement(PreviewUnavailable, null) : undefined
+          return { ...baseErrorConfig,
+            iconMessage
           };
 
         case 'loading':
         default:
           return { ...defaultConfig,
+            renderPlayButton: false,
             renderTypeIcon: false,
-            renderSpinner: true
+            renderSpinner: !didImageRender
           };
       }
     });
@@ -276,7 +314,7 @@ export class CardViewBase extends React.Component {
         renderFailedTitleBox,
         renderTickBox,
         isFixedBlanket,
-        renderLoadingRateLimited
+        customTitleMessage
       } = this.getRenderConfigByStatus();
       const {
         progress,
@@ -295,7 +333,7 @@ export class CardViewBase extends React.Component {
         "data-test-status": status,
         "data-test-progress": progress,
         "data-test-selected": selected ? true : undefined
-      }, renderTypeIcon && this.renderMediaTypeIcon(hasTitleBox, iconMessage), renderSpinner && this.renderSpinner(hasTitleBox), renderImageRenderer && this.renderImageRenderer(), renderPlayButton && this.renderPlayButton(hasTitleBox), renderBlanket && this.renderBlanket(!!isFixedBlanket), renderTitleBox && this.renderTitleBox(), renderFailedTitleBox && this.renderFailedTitleBox(), renderProgressBar && this.renderProgressBar(!hasTitleBox), renderLoadingRateLimited && /*#__PURE__*/React.createElement(LoadingRateLimited, null), renderTickBox && this.renderTickBox()), this.renderActionsBar());
+      }, renderTypeIcon && this.renderMediaTypeIcon(hasTitleBox, iconMessage), renderSpinner && this.renderSpinner(hasTitleBox), renderImageRenderer && this.renderImageRenderer(), renderPlayButton && this.renderPlayButton(hasTitleBox), renderBlanket && this.renderBlanket(!!isFixedBlanket), renderTitleBox && this.renderTitleBox(), renderFailedTitleBox && this.renderFailedTitleBox(customTitleMessage), renderProgressBar && this.renderProgressBar(!hasTitleBox), renderTickBox && this.renderTickBox()), this.renderActionsBar());
     });
   }
 
@@ -312,13 +350,14 @@ export class CardViewBase extends React.Component {
   }) {
     const {
       dataURI
-    } = this.props;
+    } = this.props; // We should only switch didImageRender to false
+    // when dataURI goes undefined, not when it is updated.
+    // as this method could be triggered after onImageLoad callback,
+    // falling on a race condition
 
-    if (prevDataURI !== dataURI) {
-      this.setState({
-        isImageFailedToLoad: false
-      });
-    }
+    prevDataURI && !dataURI && this.setState({
+      didImageRender: false
+    });
   }
 
   // This width is only used to calculate breakpoints, dimensions are passed down as
@@ -437,9 +476,10 @@ export class CardViewBase extends React.Component {
     });
   }
 
-  renderFailedTitleBox() {
+  renderFailedTitleBox(customMessage) {
     return /*#__PURE__*/React.createElement(FailedTitleBox, {
-      breakpoint: this.breakpoint
+      breakpoint: this.breakpoint,
+      customMessage: customMessage
     });
   }
 
@@ -464,8 +504,7 @@ export class CardViewBase extends React.Component {
       alt,
       resizeMode,
       onDisplayImage,
-      mediaItemType,
-      timeElapsedTillCommenced
+      mediaItemType
     } = this.props;
     return !!dataURI && /*#__PURE__*/React.createElement(ImageRenderer, {
       dataURI: dataURI,
@@ -475,8 +514,8 @@ export class CardViewBase extends React.Component {
       alt: alt,
       resizeMode: resizeMode,
       onDisplayImage: onDisplayImage,
-      onImageError: this.onImageLoadError,
-      timeElapsedTillCommenced: timeElapsedTillCommenced
+      onImageLoad: this.onImageLoad,
+      onImageError: this.onImageError
     });
   }
 

package/dist/es2019/root/inline/loader.js

@@ -6,7 +6,8 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     super(...args);
 
     _defineProperty(this, "state", {
-      MediaInlineCard: MediaInlineCardLoader.MediaInlineCard
+      MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
+      ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
     });
   }
 

package/dist/es2019/root/inline/mediaInlineCard.js

@@ -113,14 +113,15 @@ export const MediaInlineCardInternal = ({
     formattedDate = formatDate(fileState.createdAt, locale);
   }
 
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
     position: "bottom",
-    content: formattedDate
+    content: formattedDate,
+    tag: "span"
   }, /*#__PURE__*/React.createElement(MediaInlineCardLoadedView, {
     icon: linkIcon,
     title: name,
     onClick: onMediaInlineCardClick,
     isSelected: isSelected
-  }), mediaViewer);
+  })), mediaViewer);
 };
 export const MediaInlineCard = injectIntl(MediaInlineCardInternal);

package/dist/es2019/root/ui/iconMessage/index.js

@@ -22,9 +22,11 @@ export const CreatingPreview = ({
 export const PreviewUnavailable = props => /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
   messageDescriptor: messages.preview_unavailable
 }));
-export const RateLimited = props => /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
-  messageDescriptor: messages.preview_rateLimited,
-  reducedFont: true
+export const FailedToLoad = props => /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
+  messageDescriptor: messages.failed_to_load
+}));
+export const FailedToUpload = props => /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
+  messageDescriptor: messages.failed_to_upload
 }));
 export const PreviewCurrentlyUnavailable = props => /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
   messageDescriptor: messages.preview_currently_unavailable,

package/dist/es2019/root/ui/imageRenderer/imageRenderer.js

@@ -1,95 +1,28 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+import React, { useEffect } from 'react';
 import { MediaImage } from '@atlaskit/media-ui';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { fireMediaCardEvent, RenderEventAction, getRenderSucceededEventPayload, getRenderFailedFileUriPayload, getRenderFailedExternalUriPayload } from '../../../utils/analytics';
-import { withFileAttributes } from '../../../utils/fileAttributesContext';
 import { resizeModeToMediaImageProps } from '../../../utils/resizeModeToMediaImageProps';
-export class ImageRendererBase extends React.Component {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "onImageLoad", () => {
-      const {
-        createAnalyticsEvent,
-        fileAttributes,
-        timeElapsedTillCommenced
-      } = this.props;
-
-      if (fileAttributes && this.shouldFireEvent(RenderEventAction.SUCCEEDED)) {
-        const timeElapsedTillSucceeded = performance.now();
-        const durationSinceCommenced = timeElapsedTillCommenced && timeElapsedTillSucceeded - timeElapsedTillCommenced;
-        const performanceAttributes = {
-          overall: {
-            durationSincePageStart: timeElapsedTillSucceeded,
-            durationSinceCommenced
-          }
-        };
-        fireMediaCardEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes), createAnalyticsEvent);
-      }
-    });
-
-    _defineProperty(this, "onImageError", () => {
-      const {
-        onImageError,
-        fileAttributes
-      } = this.props;
-      onImageError && onImageError();
-
-      if (fileAttributes && this.shouldFireEvent(RenderEventAction.FAILED)) {
-        const {
-          createAnalyticsEvent,
-          mediaItemType,
-          timeElapsedTillCommenced
-        } = this.props;
-        const timeElapsedTillFailed = performance.now();
-        const durationSinceCommenced = timeElapsedTillCommenced && timeElapsedTillFailed - timeElapsedTillCommenced;
-        const performanceAttributes = {
-          overall: {
-            durationSincePageStart: timeElapsedTillFailed,
-            durationSinceCommenced
-          }
-        };
-
-        if (mediaItemType === 'file') {
-          fireMediaCardEvent(getRenderFailedFileUriPayload(fileAttributes, performanceAttributes), createAnalyticsEvent);
-        } else if (mediaItemType === 'external-image') {
-          fireMediaCardEvent(getRenderFailedExternalUriPayload(fileAttributes, performanceAttributes), createAnalyticsEvent);
-        }
-      }
-    });
-
-    _defineProperty(this, "shouldFireEvent", action => !this.lastAnalyticsAction || this.lastAnalyticsAction !== action);
-  }
-
-  componentDidMount() {
+export const ImageRenderer = ({
+  dataURI,
+  previewOrientation,
+  alt,
+  resizeMode,
+  onImageLoad,
+  onImageError,
+  onDisplayImage,
+  mediaType
+}) => {
+  useEffect(() => {
     // TODO: trigger accordingly with the succeeded event. This could be a breaking change
-    const {
-      onDisplayImage,
-      mediaType
-    } = this.props;
-
     if (mediaType === 'image' && onDisplayImage) {
       onDisplayImage();
     }
-  }
-
-  render() {
-    const {
-      dataURI,
-      previewOrientation,
-      alt,
-      resizeMode
-    } = this.props;
-    return /*#__PURE__*/React.createElement(MediaImage, _extends({
-      dataURI: dataURI,
-      alt: alt,
-      previewOrientation: previewOrientation,
-      onImageLoad: this.onImageLoad,
-      onImageError: this.onImageError
-    }, resizeModeToMediaImageProps(resizeMode)));
-  }
-
-}
-export const ImageRenderer = withAnalyticsEvents()(withFileAttributes(ImageRendererBase));
+  }, [mediaType, onDisplayImage]);
+  return /*#__PURE__*/React.createElement(MediaImage, _extends({
+    dataURI: dataURI,
+    alt: alt,
+    previewOrientation: previewOrientation,
+    onImageLoad: onImageLoad,
+    onImageError: onImageError
+  }, resizeModeToMediaImageProps(resizeMode)));
+};

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

@@ -1,10 +1,12 @@
 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';
 export const FailedTitleBox = ({
-  breakpoint
+  breakpoint,
+  customMessage = messages.failed_to_load
 }) => {
   return /*#__PURE__*/React.createElement(TitleBoxWrapper, {
     breakpoint: breakpoint
@@ -12,5 +14,5 @@ export const FailedTitleBox = ({
     label: 'Warning',
     size: 'small',
     primaryColor: R300
-  }), getErrorMessage('error')));
+  }), /*#__PURE__*/React.createElement(FormattedMessage, customMessage)));
 };

package/dist/es2019/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 let RenderEventAction;
-
-(function (RenderEventAction) {
-  RenderEventAction["COMMENCED"] = "commenced";
-  RenderEventAction["SUCCEEDED"] = "succeeded";
-  RenderEventAction["FAILED"] = "failed";
-})(RenderEventAction || (RenderEventAction = {}));
-
 export const getFileAttributes = (metadata, fileStatus) => ({
   fileMediatype: metadata.mediaType,
   fileMimetype: metadata.mimeType,
@@ -30,7 +22,7 @@ export const getRenderPreviewableCardPayload = fileAttributes => ({
 export const getRenderCommencedEventPayload = (fileAttributes, performanceAttributes) => {
   return {
     eventType: 'operational',
-    action: RenderEventAction.COMMENCED,
+    action: 'commenced',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes,
@@ -40,7 +32,7 @@ export const getRenderCommencedEventPayload = (fileAttributes, performanceAttrib
 };
 export const getRenderSucceededEventPayload = (fileAttributes, performanceAttributes) => ({
   eventType: 'operational',
-  action: RenderEventAction.SUCCEEDED,
+  action: 'succeeded',
   actionSubject: 'mediaCardRender',
   attributes: {
     fileAttributes,
@@ -48,30 +40,9 @@ export const getRenderSucceededEventPayload = (fileAttributes, performanceAttrib
     status: 'success'
   }
 });
-export const 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 const getRenderFailedFileUriPayload = (fileAttributes, performanceAttributes) => ({
-  eventType: 'operational',
-  action: RenderEventAction.FAILED,
-  actionSubject: 'mediaCardRender',
-  attributes: {
-    fileAttributes,
-    performanceAttributes,
-    status: 'fail',
-    failReason: getFailedFileUriFailReason(fileAttributes.fileStatus)
-  }
-});
 export const getRenderFailedExternalUriPayload = (fileAttributes, performanceAttributes) => ({
   eventType: 'operational',
-  action: RenderEventAction.FAILED,
+  action: 'failed',
   actionSubject: 'mediaCardRender',
   attributes: {
     fileAttributes,
@@ -112,7 +83,7 @@ export const getRenderErrorRequestMetadata = error => {
 };
 export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes, error) => ({
   eventType: 'operational',
-  action: RenderEventAction.FAILED,
+  action: 'failed',
   actionSubject: 'mediaCardRender',
   attributes: {
     fileAttributes,
@@ -126,7 +97,7 @@ export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes
 });
 export const getRenderFailedFileStatusPayload = (fileAttributes, performanceAttributes) => ({
   eventType: 'operational',
-  action: RenderEventAction.FAILED,
+  action: 'failed',
   actionSubject: 'mediaCardRender',
   attributes: {
     fileAttributes,

package/dist/es2019/utils/dimensionComparer.js

@@ -20,7 +20,7 @@ export const canCompareDimension = (current, next) => {
   return false;
 };
 export const 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)) {
     const nextIsHigher = parseInt(`${current.width}`, 10) < parseInt(`${next.width}`, 10);
     const nextIsWider = parseInt(`${current.height}`, 10) < parseInt(`${next.height}`, 10);
     return nextIsHigher || nextIsWider;

package/dist/es2019/utils/metadata.js

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

package/dist/es2019/utils/objectURLCache.js

@@ -42,5 +42,10 @@ export class ObjectURLCache {
     this.cache.set(key, value);
   }
 
+  remove(key) {
+    const removed = this.cache.remove(key);
+    removed && URL.revokeObjectURL(removed.dataURI);
+  }
+
 }
 export const createObjectURLCache = () => new ObjectURLCache(PREVIEW_CACHE_LRU_SIZE);

package/dist/es2019/utils/shouldDisplayImageThumbnail.js

@@ -5,7 +5,7 @@ export const shouldDisplayImageThumbnail = (cardStatus, mediaItemType, dataURI,
   }
 
   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/es2019/version.json

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