@atlaskit/media-card 70.11.0 → 73.0.0

package/dist/cjs/utils/index.js

@@ -5,6 +5,24 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "CardActionIconButton", {
+  enumerable: true,
+  get: function get() {
+    return _cardActions.CardActionIconButton;
+  }
+});
+Object.defineProperty(exports, "CardActionsDropdownMenu", {
+  enumerable: true,
+  get: function get() {
+    return _cardActions.CardActionsDropdownMenu;
+  }
+});
+Object.defineProperty(exports, "CardActionsView", {
+  enumerable: true,
+  get: function get() {
+    return _cardActions.CardActionsView;
+  }
+});
 Object.defineProperty(exports, "ErrorIcon", {
   enumerable: true,
   get: function get() {
@@ -17,34 +35,34 @@ Object.defineProperty(exports, "FileIcon", {
     return _fileIcon.FileIcon;
   }
 });
-Object.defineProperty(exports, "CardActionIconButton", {
+Object.defineProperty(exports, "breakpointSize", {
   enumerable: true,
   get: function get() {
-    return _cardActions.CardActionIconButton;
+    return _breakpoint.breakpointSize;
   }
 });
-Object.defineProperty(exports, "CardActionsDropdownMenu", {
+Object.defineProperty(exports, "breakpointStyles", {
   enumerable: true,
   get: function get() {
-    return _cardActions.CardActionsDropdownMenu;
+    return _breakpoint.breakpointStyles;
   }
 });
-Object.defineProperty(exports, "CardActionsView", {
+Object.defineProperty(exports, "cardBreakpointSizes", {
   enumerable: true,
   get: function get() {
-    return _cardActions.CardActionsView;
+    return _breakpoint.cardBreakpointSizes;
   }
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "containsPixelUnit", {
   enumerable: true,
   get: function get() {
-    return _cardActions.default;
+    return _containsPixelUnit.containsPixelUnit;
   }
 });
-Object.defineProperty(exports, "isRetina", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _isRetina.isRetina;
+    return _cardActions.default;
   }
 });
 Object.defineProperty(exports, "defaultHorizontalCardDimensions", {
@@ -95,6 +113,24 @@ Object.defineProperty(exports, "getDefaultCardDimensions", {
     return _cardDimensions.getDefaultCardDimensions;
   }
 });
+Object.defineProperty(exports, "getElementDimension", {
+  enumerable: true,
+  get: function get() {
+    return _getElementDimension.getElementDimension;
+  }
+});
+Object.defineProperty(exports, "isRetina", {
+  enumerable: true,
+  get: function get() {
+    return _isRetina.isRetina;
+  }
+});
+Object.defineProperty(exports, "isValidPercentageUnit", {
+  enumerable: true,
+  get: function get() {
+    return _isValidPercentageUnit.isValidPercentageUnit;
+  }
+});
 Object.defineProperty(exports, "maxHorizontalCardDimensions", {
   enumerable: true,
   get: function get() {
@@ -137,42 +173,6 @@ Object.defineProperty(exports, "minSquareCardDimensions", {
     return _cardDimensions.minSquareCardDimensions;
   }
 });
-Object.defineProperty(exports, "breakpointSize", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.breakpointSize;
-  }
-});
-Object.defineProperty(exports, "breakpointStyles", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.breakpointStyles;
-  }
-});
-Object.defineProperty(exports, "cardBreakpointSizes", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.cardBreakpointSizes;
-  }
-});
-Object.defineProperty(exports, "isValidPercentageUnit", {
-  enumerable: true,
-  get: function get() {
-    return _isValidPercentageUnit.isValidPercentageUnit;
-  }
-});
-Object.defineProperty(exports, "getElementDimension", {
-  enumerable: true,
-  get: function get() {
-    return _getElementDimension.getElementDimension;
-  }
-});
-Object.defineProperty(exports, "containsPixelUnit", {
-  enumerable: true,
-  get: function get() {
-    return _containsPixelUnit.containsPixelUnit;
-  }
-});
 
 var _errorIcon = require("./errorIcon");
 

package/dist/cjs/utils/lightCards/styled.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AnimatedWrapper = exports.Wrapper = exports.blinkLoadingAnimation = void 0;
+exports.blinkLoadingAnimation = exports.Wrapper = exports.AnimatedWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

package/dist/cjs/utils/metadata.js

@@ -20,8 +20,8 @@ var getProcessingStatusFromFileState = function getProcessingStatusFromFileState
   }
 };
 
-var getFileDetails = function getFileDetails(state) {
-  return !(0, _mediaClient.isErrorFileState)(state) ? {
+var getFileDetailsFromFileState = function getFileDetailsFromFileState(state) {
+  return {
     id: state.id,
     name: state.name,
     size: state.size,
@@ -29,8 +29,16 @@ var getFileDetails = function getFileDetails(state) {
     createdAt: state.createdAt,
     mediaType: state.mediaType,
     processingStatus: getProcessingStatusFromFileState(state.status)
+  };
+};
+
+var getFileDetails = function getFileDetails(identifier, fileState) {
+  return (0, _mediaClient.isFileIdentifier)(identifier) ? fileState && !(0, _mediaClient.isErrorFileState)(fileState) ? getFileDetailsFromFileState(fileState) : {
+    id: identifier.id
   } : {
-    id: state.id
+    id: identifier.mediaItemType,
+    name: identifier.name || identifier.dataURI,
+    mediaType: 'image'
   };
 };
 

package/dist/cjs/utils/objectURLCache.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createObjectURLCache = exports.ObjectURLCache = exports.PREVIEW_CACHE_LRU_SIZE = void 0;
+exports.createObjectURLCache = exports.PREVIEW_CACHE_LRU_SIZE = exports.ObjectURLCache = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -86,6 +86,12 @@ 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/cjs/utils/shouldDisplayImageThumbnail.js

@@ -13,7 +13,7 @@ var shouldDisplayImageThumbnail = function shouldDisplayImageThumbnail(cardStatu
   }
 
   if (dataURI) {
-    return mediaItemType === 'external-image' || mimeType && (0, _mediaClient.isMimeTypeSupportedByBrowser)(mimeType) || cardStatus === 'complete';
+    return mediaItemType === 'external-image' || mimeType && (0, _mediaClient.isMimeTypeSupportedByBrowser)(mimeType) || cardStatus === 'complete' || cardStatus === 'loading-preview';
   }
 
   return false;

package/dist/cjs/utils/viewportDetector.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ViewportDetector = exports.createViewportDetector = void 0;
+exports.createViewportDetector = exports.ViewportDetector = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 

package/dist/cjs/version.json

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

package/dist/es2019/errors.js

@@ -27,13 +27,53 @@ export class RemotePreviewError extends MediaCardError {
     this.secondaryError = secondaryError;
   }
 
+}
+export class SsrPreviewError extends MediaCardError {
+  constructor(primaryReason, secondaryError) {
+    super(primaryReason, secondaryError);
+    this.primaryReason = primaryReason;
+    this.secondaryError = secondaryError;
+  }
+
+}
+export const getImageLoadPrimaryReason = source => {
+  switch (source) {
+    case 'cache-remote':
+      return 'cache-remote-uri';
+
+    case 'cache-local':
+      return 'cache-local-uri';
+
+    case 'external':
+      return 'external-uri';
+
+    case 'local':
+      return 'local-uri';
+
+    case 'remote':
+      return 'remote-uri';
+    // This fail reason will come from a bug, most likely.
+
+    default:
+      return `unknown-uri`;
+  }
+};
+export class ImageLoadError extends MediaCardError {
+  constructor(source) {
+    super(getImageLoadPrimaryReason(source));
+  }
+
 }
 export function isMediaCardError(err) {
   return err instanceof MediaCardError;
 }
 export const isLocalPreviewError = err => err instanceof LocalPreviewError;
 export const isRemotePreviewError = err => err instanceof RemotePreviewError;
-export const isUnsupportedLocalPreviewError = err => isMediaCardError(err) && err.primaryReason === 'local-preview-unsupported'; // In a try/catch statement, the error caught is the type of any.
+export const isUnsupportedLocalPreviewError = err => isMediaCardError(err) && err.primaryReason === 'local-preview-unsupported';
+export function isImageLoadError(err) {
+  return err instanceof ImageLoadError;
+} // In a try/catch statement, the error caught is the type of any.
 // We can use this helper to ensure that the error handled is the type of MediaCardError if unsure
 
-export const ensureMediaCardError = (primaryReason, error) => isMediaCardError(error) ? error : new MediaCardError(primaryReason, error);
+export const ensureMediaCardError = (primaryReason, error) => isMediaCardError(error) ? error : new MediaCardError(primaryReason, error);
+export const isUploadError = error => error && error.primaryReason === 'upload';

package/dist/es2019/files/cardImageView/index.js

@@ -9,12 +9,9 @@ import { CardLoading } from '../../utils/lightCards/cardLoading';
 import { shouldDisplayImageThumbnail } from '../../utils/shouldDisplayImageThumbnail';
 import { ProgressBar } from '../../utils/progressBar';
 import CardActions from '../../utils/cardActions';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { fireMediaCardEvent, RenderEventAction, getRenderSucceededEventPayload, getRenderFailedFileUriPayload, getRenderFailedExternalUriPayload } from '../../utils/analytics';
-import { withFileAttributes } from '../../utils/fileAttributesContext';
 export const fileCardImageViewSelector = 'media-file-card-view';
 export const fileCardImageViewSelectedSelector = 'media-file-card-view-selected';
-export class FileCardImageViewBase extends Component {
+export class FileCardImageView extends Component {
   constructor(...args) {
     super(...args);
 
@@ -141,54 +138,6 @@ export class FileCardImageViewBase extends Component {
       })));
     });
 
-    _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 {
-        fileAttributes
-      } = this.props;
-
-      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, "renderMediaImage", () => {
       const {
         status,
@@ -198,7 +147,9 @@ export class FileCardImageViewBase extends Component {
         mimeType,
         previewOrientation,
         onDisplayImage,
-        alt
+        alt,
+        onImageLoad,
+        onImageError
       } = this.props;
 
       if (!shouldDisplayImageThumbnail(status, mediaItemType, dataURI, mediaType, mimeType)) {
@@ -216,13 +167,11 @@ export class FileCardImageViewBase extends Component {
         crop: this.isCropped,
         stretch: this.isStretched,
         previewOrientation: previewOrientation,
-        onImageLoad: this.onImageLoad,
-        onImageError: this.onImageError
+        onImageLoad: onImageLoad,
+        onImageError: onImageError
       });
     });
 
-    _defineProperty(this, "shouldFireEvent", action => !this.lastAnalyticsAction || this.lastAnalyticsAction !== action);
-
     _defineProperty(this, "renderProgressBar", () => {
       const {
         mediaName,
@@ -345,9 +294,7 @@ export class FileCardImageViewBase extends Component {
 
 }
 
-_defineProperty(FileCardImageViewBase, "defaultProps", {
+_defineProperty(FileCardImageView, "defaultProps", {
   resizeMode: 'crop',
   disableOverlay: false
-});
-
-export const FileCardImageView = withAnalyticsEvents()(withFileAttributes(FileCardImageViewBase));
+});

package/dist/es2019/files/index.js

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

package/dist/es2019/index.js

@@ -1,4 +1,4 @@
-export { Card } from './root';
+export { Card, MediaInlineCard } from './root';
 export { CardLoading } from './utils/lightCards/cardLoading';
 export { CardError } from './utils/lightCards/cardError';
 export { defaultImageCardDimensions } from './utils/cardDimensions';

package/dist/es2019/root/card/cardAnalytics.js

@@ -1,22 +1,11 @@
-import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload } from '../../utils/analytics';
-export const relevantFeatureFlagNames = ['newCardExperience', 'poll_intervalMs', 'poll_maxAttempts', 'poll_backoffFactor', 'poll_maxIntervalMs', 'captions'];
-export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, {
-  cardPreview,
-  error
-} = {}) => {
+import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
+export const relevantFeatureFlagNames = ['newCardExperience', 'captions'];
+export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, error) => {
   const fireEvent = payload => fireMediaCardEvent(payload, createAnalyticsEvent);
 
   switch (status) {
     case 'complete':
-      /**
-       * A Card that is considered Complete and has no preview,
-       * reflects an expected behaviour, and thus a legitimate
-       * success case to be logged.
-       */
-      if (!(cardPreview !== null && cardPreview !== void 0 && cardPreview.dataURI)) {
-        fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes));
-      }
-
+      fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes));
       break;
 
     case 'failed-processing':
@@ -41,4 +30,7 @@ export const fireCopiedEvent = (createAnalyticsEvent, fileId, cardRef) => {
       fireMediaCardEvent(getCopiedFilePayload(fileId), createAnalyticsEvent);
     }
   }
+};
+export const fireScreenEvent = (createAnalyticsEvent, fileAttributes) => {
+  fireMediaCardEvent(getRenderPreviewableCardPayload(fileAttributes), createAnalyticsEvent);
 };

package/dist/es2019/root/card/cardLoader.js

@@ -1,59 +1,53 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useContext } from 'react';
+import { useMemoizeFeatureFlags } from '@atlaskit/media-common';
+import Loadable from 'react-loadable';
 import { CardLoading } from '../..';
-export default class CardLoader extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+const MediaCardContext = /*#__PURE__*/React.createContext({});
 
-    _defineProperty(this, "state", {
-      Card: CardLoader.Card,
-      MediaCardErrorBoundary: CardLoader.MediaCardErrorBoundary
-    });
-  }
+const CardLoadingWithContext = () => {
+  const props = useContext(MediaCardContext);
+  return /*#__PURE__*/React.createElement(CardLoading, props);
+};
 
-  async componentDidMount() {
-    if (!this.state.Card) {
-      try {
-        const [mediaClient, cardModule, mediaCardErrorBoundaryModule] = await Promise.all([import(
-        /* webpackChunkName: "@atlaskit-internal_media-client" */
-        '@atlaskit/media-client'), import(
-        /* webpackChunkName: "@atlaskit-internal_media-card" */
-        './index'), import(
-        /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */
-        '../media-card-analytics-error-boundary')]);
-        CardLoader.Card = mediaClient.withMediaClient(cardModule.Card, this.props.featureFlags);
-        CardLoader.MediaCardErrorBoundary = mediaCardErrorBoundaryModule.default;
-        this.setState({
-          Card: CardLoader.Card,
-          MediaCardErrorBoundary: CardLoader.MediaCardErrorBoundary
-        });
-      } catch (error) {// TODO [MS-2278]: Add operational error to catch async import error
-      }
-    }
-  }
+const MediaCard = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_media-card" */
+  './index').then(mod => mod.Card),
+  loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null)
+});
+const MediaCardErrorBoundary = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */
+  '../media-card-analytics-error-boundary').then(mod => mod.default),
+  loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null)
+});
+const MediaCardWithMediaClient = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_media-client" */
+  '@atlaskit/media-client'),
+  loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null),
+  render: (loaded, props) => /*#__PURE__*/React.createElement(CardWithMediaClient, _extends({}, props, {
+    withMediaClient: loaded.withMediaClient
+  }))
+});
 
-  render() {
-    const {
-      dimensions,
-      testId,
-      featureFlags
-    } = this.props;
-    const {
-      Card,
-      MediaCardErrorBoundary
-    } = this.state;
+const CardWithMediaClient = props => {
+  const {
+    withMediaClient,
+    featureFlags
+  } = props;
+  const memoizedFeatureFlags = useMemoizeFeatureFlags(featureFlags);
+  const Card = React.useMemo(() => {
+    return withMediaClient(MediaCard, memoizedFeatureFlags);
+  }, [withMediaClient, memoizedFeatureFlags]);
+  return /*#__PURE__*/React.createElement(MediaCardErrorBoundary, null, /*#__PURE__*/React.createElement(Card, props));
+};
 
-    if (!Card || !MediaCardErrorBoundary) {
-      return /*#__PURE__*/React.createElement(CardLoading, {
-        testId: testId,
-        dimensions: dimensions,
-        featureFlags: featureFlags
-      });
-    }
+const CardLoader = props => {
+  return /*#__PURE__*/React.createElement(MediaCardContext.Provider, {
+    value: props
+  }, /*#__PURE__*/React.createElement(MediaCardWithMediaClient, props));
+};
 
-    return /*#__PURE__*/React.createElement(MediaCardErrorBoundary, null, /*#__PURE__*/React.createElement(Card, this.props));
-  }
-
-}
-
-_defineProperty(CardLoader, "displayName", 'AsyncCard');
+export default CardLoader;

package/dist/es2019/root/card/cardState.js

@@ -0,0 +1,26 @@
+import { isErrorFileState } from '@atlaskit/media-client';
+import { MediaCardError } from '../../errors';
+import { getCardStatus, isFinalCardStatus } from './getCardStatus';
+import { extractFilePreviewStatus } from './getCardPreview';
+export const createStateUpdater = newState => prevState => {
+  // Only override if previous status is non-final
+  // or new status is 'complete'
+  if (isFinalCardStatus(prevState.status) && newState.status !== 'complete') {
+    return prevState;
+  }
+
+  return { ...prevState,
+    ...newState
+  };
+};
+export const getCardStateFromFileState = (fileState, isBannedLocalPreview, featureFlags) => {
+  const status = getCardStatus(fileState.status, extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags));
+  const error = status === 'error' && isErrorFileState(fileState) ? new MediaCardError('error-file-state', new Error(fileState.message)) : undefined;
+  const progress = status === 'uploading' && fileState.status === 'uploading' ? fileState.progress : 1;
+  return {
+    fileState,
+    status,
+    progress,
+    error
+  };
+};

package/dist/es2019/root/card/getCardPreview/cache.js

@@ -17,6 +17,11 @@ export class CardPreviewCacheImpl {
       this.previewCache.set(cacheKey, cardPreview);
     });
 
+    _defineProperty(this, "remove", (id, dimensions) => {
+      const cacheKey = getCacheKey(id, dimensions);
+      this.previewCache.remove(cacheKey);
+    });
+
     this.previewCache = previewCache;
   }
 

package/dist/es2019/root/card/getCardPreview/filePreviewStatus.js

@@ -0,0 +1,38 @@
+import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
+import { isPreviewableFileState, isPreviewableType, isImageRepresentationReady } from '@atlaskit/media-client';
+import { isSupportedLocalPreview } from './helpers'; // TODO: align these checks with helpers from Media Client
+// https://product-fabric.atlassian.net/browse/BMPT-1300
+
+export const extractFilePreviewStatus = (fileState, isBannedLocalPreview, featureFlags) => {
+  const hasFilesize = 'size' in fileState && !!fileState.size;
+  const {
+    mediaType
+  } = 'mediaType' in fileState && fileState || {};
+  const {
+    mimeType
+  } = 'mimeType' in fileState && fileState || {};
+  const isPreviewable = !!mediaType && isPreviewableType(mediaType, featureFlags); // Local preview is available only if it's supported by browser and supported by Media Card (isSupportedLocalPreview)
+  // For example, SVGs are mime type NOT supported by browser but media type supported by Media Card (image)
+  // Then, local Preview NOT available
+
+  const hasLocalPreview = !isBannedLocalPreview && isPreviewableFileState(fileState) && isSupportedLocalPreview(mediaType) && !!mimeType && isMimeTypeSupportedByBrowser(mimeType);
+  const hasRemotePreview = isImageRepresentationReady(fileState);
+  const hasPreview = hasLocalPreview || hasRemotePreview;
+  const isSupportedByBrowser = !!mimeType && isMimeTypeSupportedByBrowser(mimeType);
+  return {
+    hasFilesize,
+    isPreviewable,
+    hasPreview,
+    isSupportedByBrowser
+  };
+};
+export const isPreviewableStatus = (cardStatus, {
+  isPreviewable,
+  hasPreview,
+  isSupportedByBrowser
+}) => {
+  return hasPreview && isPreviewable && (cardStatus === 'complete' || cardStatus === 'loading-preview' || cardStatus === 'uploading' || // For Video, we can have local or remote preview while processing.
+  // Then, we only want to show the thumbnail if the file is supported by the browser,
+  // this way we prevent playing unsupported videos that are not procesed
+  cardStatus === 'processing' && isSupportedByBrowser);
+};

package/dist/es2019/root/card/getCardPreview/helpers.js

@@ -69,19 +69,9 @@ export const getCardPreviewFromFilePreview = async filePreview => {
 
   throw new LocalPreviewError('local-preview-unsupported');
 };
-export const getCardPreviewFromBackend = async (mediaClient, id, {
-  width,
-  height
-}, collectionName, resizeMode) => {
+export const getCardPreviewFromBackend = async (mediaClient, id, params) => {
   try {
-    const mode = resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode;
-    const blob = await mediaClient.getImage(id, {
-      collection: collectionName,
-      mode,
-      width,
-      height,
-      allowAnimated: true
-    });
+    const blob = await mediaClient.getImage(id, params);
     return {
       dataURI: URL.createObjectURL(blob),
       orientation: 1,