@atlaskit/media-card 72.1.0 → 73.2.0

package/dist/es2019/types.js

@@ -1 +1,7 @@
-export {};
+export let MediaCardCursor;
+
+(function (MediaCardCursor) {
+  MediaCardCursor["Action"] = "pointer";
+  MediaCardCursor["NoAction"] = "default";
+  MediaCardCursor["NotReady"] = "wait";
+})(MediaCardCursor || (MediaCardCursor = {}));

package/dist/es2019/utils/analytics.js

@@ -81,6 +81,13 @@ export const getRenderErrorRequestMetadata = error => {
     return error.secondaryError.metadata;
   }
 };
+export const extractErrorInfo = error => {
+  return {
+    failReason: getRenderErrorFailReason(error),
+    error: getRenderErrorErrorReason(error),
+    errorDetail: getRenderErrorErrorDetail(error)
+  };
+};
 export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes, error) => ({
   eventType: 'operational',
   action: 'failed',
@@ -89,9 +96,7 @@ export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes
     fileAttributes,
     performanceAttributes,
     status: 'fail',
-    failReason: getRenderErrorFailReason(error),
-    error: getRenderErrorErrorReason(error),
-    errorDetail: getRenderErrorErrorDetail(error),
+    ...extractErrorInfo(error),
     request: getRenderErrorRequestMetadata(error)
   }
 });

package/dist/es2019/utils/dimensionComparer.js

@@ -1,23 +1,16 @@
 import { isValidPercentageUnit } from './isValidPercentageUnit';
 import { containsPixelUnit } from './containsPixelUnit';
+
+const isPixelEquivalent = dimension => typeof dimension === 'number' || containsPixelUnit(`${dimension}`);
+
 export const canCompareDimension = (current, next) => {
   if (!current || !next) {
     return false;
   }
 
-  if (isValidPercentageUnit(current) && isValidPercentageUnit(next)) {
-    return true;
-  }
-
-  if (containsPixelUnit(`${current}`) && containsPixelUnit(`${next}`)) {
-    return true;
-  }
-
-  if (typeof current === 'number' && typeof next === 'number') {
-    return true;
-  }
-
-  return false;
+  const bothPixelEquivalent = isPixelEquivalent(current) && isPixelEquivalent(next);
+  const bothPercentage = isValidPercentageUnit(current) && isValidPercentageUnit(next);
+  return bothPixelEquivalent || bothPercentage;
 };
 export const isBigger = (current, next) => {
   if (!!current && !!next && canCompareDimension(current.width, next.width) && canCompareDimension(current.height, next.height)) {

package/dist/es2019/utils/getErrorMessage.js

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

package/dist/es2019/utils/getMediaCardCursor.js

@@ -0,0 +1,19 @@
+import { MediaCardCursor } from '../types';
+export const getMediaCardCursor = (useInlinePlayer, useMediaViewer, isErrorStatus, hasCardPreview, mediaType) => {
+  // If error status or no action is requested = NoAction
+  if (isErrorStatus || !useInlinePlayer && !useMediaViewer) {
+    return MediaCardCursor.NoAction;
+  }
+
+  if (!mediaType && (useInlinePlayer || useInlinePlayer && useMediaViewer)) {
+    return MediaCardCursor.NotReady;
+  } else if (mediaType === 'video' && hasCardPreview && useInlinePlayer) {
+    return MediaCardCursor.Action;
+  }
+
+  if (useMediaViewer) {
+    return MediaCardCursor.Action;
+  }
+
+  return MediaCardCursor.NoAction;
+};

package/dist/es2019/utils/globalScope/getSSRData.js

@@ -0,0 +1,10 @@
+import { getMediaCardSSR, getKey } from './globalScope';
+export const getSSRData = identifier => {
+  const mediaCardSsr = getMediaCardSSR();
+
+  if (!mediaCardSsr) {
+    return;
+  }
+
+  return mediaCardSsr[getKey(identifier)];
+};

package/dist/es2019/utils/globalScope/globalScope.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { printFunctionCall, printScript } from '../printScript';
+// ----- WARNING -----
+// This is a very sensitive fraction of code.
+// Any changes to this file must be tested directly in product before merging.
+// The scripts printed here might differ from what we observe in our internal tests
+// due to minimification, for example.
+export const GLOBAL_MEDIA_CARD_SSR = 'mediaCardSsr';
+export const GLOBAL_MEDIA_NAMESPACE = '__MEDIA_INTERNAL';
+export function getMediaGlobalScope(globalScope = window) {
+  // Must match GLOBAL_MEDIA_NAMESPACE. Can't reference the constant from here.
+  const namespace = '__MEDIA_INTERNAL';
+
+  if (!globalScope[namespace]) {
+    globalScope[namespace] = {};
+  }
+
+  return globalScope[namespace];
+}
+export function getMediaCardSSR(globalScope = window) {
+  const globalMedia = getMediaGlobalScope(globalScope); // Must match GLOBAL_MEDIA_CARD_SSR. Can't reference the constant from here.
+
+  const key = 'mediaCardSsr';
+
+  if (!globalMedia[key]) {
+    globalMedia[key] = {};
+  }
+
+  return globalMedia[key];
+}
+
+const dashed = param => param ? `-${param}` : '';
+
+export const getKey = ({
+  id,
+  collectionName,
+  occurrenceKey
+}) => `${id}${dashed(collectionName)}${dashed(occurrenceKey)}`;
+export const storeDataURI = (key, dataURI, dimensions, error, globalScope = window) => {
+  const mediaCardSsr = getMediaCardSSR(globalScope);
+  mediaCardSsr[key] = {
+    dataURI,
+    dimensions,
+    error
+  };
+};
+
+const generateScript = (identifier, dataURI, dimensions, error) => {
+  const functionCall = printFunctionCall(storeDataURI, getKey(identifier), dataURI, dimensions, error);
+  return printScript([getMediaCardSSR.toString(), getMediaGlobalScope.toString(), functionCall]);
+};
+
+export const StoreSSRDataScript = ({
+  dataURI,
+  identifier,
+  dimensions,
+  error
+}) => /*#__PURE__*/React.createElement("script", {
+  dangerouslySetInnerHTML: {
+    __html: generateScript(identifier, dataURI, dimensions, error)
+  }
+});

package/dist/es2019/utils/globalScope/index.js

@@ -0,0 +1,2 @@
+export { StoreSSRDataScript, GLOBAL_MEDIA_NAMESPACE, GLOBAL_MEDIA_CARD_SSR, getKey } from './globalScope';
+export { getSSRData } from './getSSRData';

package/dist/es2019/utils/globalScope/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/utils/printScript.js

@@ -0,0 +1,19 @@
+const printParam = param => {
+  if (typeof param === 'string') {
+    return `'${param}'`;
+  } else if (typeof param === 'object') {
+    return JSON.stringify(param);
+  } else if (param === undefined) {
+    return 'undefined';
+  }
+
+  return param;
+};
+
+const printParams = args => args.map(arg => printParam(arg)).join(',');
+
+export const printFunctionCall = (fn, ...args) => `(${fn.toString()})(${printParams(args)});`;
+export const printScript = statements => `(function(){
+  ${statements.join(';')}
+})();
+`;

package/dist/es2019/utils/viewportDetector.js

@@ -1,5 +1,25 @@
-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 const ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900; //px
+
+export const ViewportAnchor = /*#__PURE__*/forwardRef((props, ref) => {
+  if (typeof IntersectionObserver === 'undefined') {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: "media-card-viewport-anchor",
+    style: {
+      position: 'absolute',
+      top: `${props.offsetTop}px`
+    }
+  });
+});
 
 const createIntersectionObserverCallback = onVisible => (entries, observer) => {
   for (let entry of entries) {
@@ -11,31 +31,41 @@ const createIntersectionObserverCallback = onVisible => (entries, observer) => {
   }
 };
 
-const Observer = ({
+const ViewportObserver = ({
   onVisible,
+  cardEl,
   children,
-  targetRef
+  preAnchorRef,
+  postAnchorRef
 }) => {
   useEffect(() => {
     // IntersectionObserver uses root and target elements to detect intersections, defaulting root to the viewport
     const 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 () => {
       intersectionObserver.disconnect();
     };
-  }, [targetRef, onVisible]);
+  }, [cardEl, preAnchorRef, postAnchorRef, onVisible]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 };
 
-export const createViewportDetector = isIntersectionObserverSupported => ({
-  children,
-  targetRef,
-  onVisible
-}) => 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 const ViewportDetector = createViewportDetector(typeof IntersectionObserver !== 'undefined');
+export const ViewportDetector = ({
+  cardEl,
+  preAnchorRef,
+  postAnchorRef,
+  onVisible,
+  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/es2019/version.json

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

package/dist/esm/actions.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 export function attachDetailsToActions(actions, details) {
   return actions.map(function (action) {

package/dist/esm/errors.js

@@ -1,3 +1,4 @@
+import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/inherits";
@@ -32,7 +33,7 @@ export var MediaCardError = /*#__PURE__*/function (_Error) {
     return _this;
   }
 
-  return MediaCardError;
+  return _createClass(MediaCardError);
 }( /*#__PURE__*/_wrapNativeSuper(Error));
 export var LocalPreviewError = /*#__PURE__*/function (_MediaCardError) {
   _inherits(LocalPreviewError, _MediaCardError);
@@ -50,7 +51,7 @@ export var LocalPreviewError = /*#__PURE__*/function (_MediaCardError) {
     return _this2;
   }
 
-  return LocalPreviewError;
+  return _createClass(LocalPreviewError);
 }(MediaCardError);
 export var RemotePreviewError = /*#__PURE__*/function (_MediaCardError2) {
   _inherits(RemotePreviewError, _MediaCardError2);
@@ -68,7 +69,7 @@ export var RemotePreviewError = /*#__PURE__*/function (_MediaCardError2) {
     return _this3;
   }
 
-  return RemotePreviewError;
+  return _createClass(RemotePreviewError);
 }(MediaCardError);
 export var SsrPreviewError = /*#__PURE__*/function (_MediaCardError3) {
   _inherits(SsrPreviewError, _MediaCardError3);
@@ -86,7 +87,7 @@ export var SsrPreviewError = /*#__PURE__*/function (_MediaCardError3) {
     return _this4;
   }
 
-  return SsrPreviewError;
+  return _createClass(SsrPreviewError);
 }(MediaCardError);
 export var getImageLoadPrimaryReason = function getImageLoadPrimaryReason(source) {
   switch (source) {
@@ -121,7 +122,7 @@ export var ImageLoadError = /*#__PURE__*/function (_MediaCardError4) {
     return _super5.call(this, getImageLoadPrimaryReason(source));
   }
 
-  return ImageLoadError;
+  return _createClass(ImageLoadError);
 }(MediaCardError);
 export function isMediaCardError(err) {
   return err instanceof MediaCardError;

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

@@ -156,18 +156,30 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
       })));
     });
 
-    _defineProperty(_assertThisInitialized(_this), "renderMediaImage", function () {
+    _defineProperty(_assertThisInitialized(_this), "onImageLoad", function () {
       var _this$props6 = _this.props,
-          status = _this$props6.status,
-          mediaItemType = _this$props6.mediaItemType,
-          dataURI = _this$props6.dataURI,
-          mediaType = _this$props6.mediaType,
-          mimeType = _this$props6.mimeType,
-          previewOrientation = _this$props6.previewOrientation,
-          onDisplayImage = _this$props6.onDisplayImage,
-          alt = _this$props6.alt,
           onImageLoad = _this$props6.onImageLoad,
-          onImageError = _this$props6.onImageError;
+          cardPreview = _this$props6.cardPreview;
+      onImageLoad && onImageLoad(cardPreview);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onImageError", function () {
+      var _this$props7 = _this.props,
+          onImageError = _this$props7.onImageError,
+          cardPreview = _this$props7.cardPreview;
+      onImageError && onImageError(cardPreview);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderMediaImage", function () {
+      var _this$props8 = _this.props,
+          status = _this$props8.status,
+          mediaItemType = _this$props8.mediaItemType,
+          dataURI = _this$props8.dataURI,
+          mediaType = _this$props8.mediaType,
+          mimeType = _this$props8.mimeType,
+          previewOrientation = _this$props8.previewOrientation,
+          onDisplayImage = _this$props8.onDisplayImage,
+          alt = _this$props8.alt;
 
       if (!shouldDisplayImageThumbnail(status, mediaItemType, dataURI, mediaType, mimeType)) {
         return null;
@@ -184,17 +196,17 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
         crop: _this.isCropped,
         stretch: _this.isStretched,
         previewOrientation: previewOrientation,
-        onImageLoad: onImageLoad,
-        onImageError: onImageError
+        onImageLoad: _this.onImageLoad,
+        onImageError: _this.onImageError
       });
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderProgressBar", function () {
-      var _this$props7 = _this.props,
-          mediaName = _this$props7.mediaName,
-          progress = _this$props7.progress,
-          actions = _this$props7.actions,
-          status = _this$props7.status;
+      var _this$props9 = _this.props,
+          mediaName = _this$props9.mediaName,
+          progress = _this$props9.progress,
+          actions = _this$props9.actions,
+          status = _this$props9.status;
 
       if (status !== 'uploading') {
         return null;
@@ -213,10 +225,10 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderSuccessCardContents", function () {
-      var _this$props8 = _this.props,
-          disableOverlay = _this$props8.disableOverlay,
-          selectable = _this$props8.selectable,
-          status = _this$props8.status;
+      var _this$props10 = _this.props,
+          disableOverlay = _this$props10.disableOverlay,
+          selectable = _this$props10.selectable,
+          status = _this$props10.status;
       var overlay = null;
 
       if (!disableOverlay) {
@@ -237,15 +249,15 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderSuccessCardOverlay", function () {
-      var _this$props9 = _this.props,
-          status = _this$props9.status,
-          mediaName = _this$props9.mediaName,
-          mediaType = _this$props9.mediaType,
-          fileSize = _this$props9.fileSize,
-          dataURI = _this$props9.dataURI,
-          selectable = _this$props9.selectable,
-          selected = _this$props9.selected,
-          actions = _this$props9.actions;
+      var _this$props11 = _this.props,
+          status = _this$props11.status,
+          mediaName = _this$props11.mediaName,
+          mediaType = _this$props11.mediaType,
+          fileSize = _this$props11.fileSize,
+          dataURI = _this$props11.dataURI,
+          selectable = _this$props11.selectable,
+          selected = _this$props11.selected,
+          actions = _this$props11.actions;
       var isPersistent = mediaType === 'doc' || !dataURI;
       return /*#__PURE__*/React.createElement(CardOverlay, {
         cardStatus: status,
@@ -265,14 +277,14 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
   _createClass(FileCardImageView, [{
     key: "render",
     value: function render() {
-      var _this$props10 = this.props,
-          disableOverlay = _this$props10.disableOverlay,
-          selectable = _this$props10.selectable,
-          selected = _this$props10.selected,
-          mediaType = _this$props10.mediaType,
-          progress = _this$props10.progress,
-          status = _this$props10.status,
-          mediaName = _this$props10.mediaName;
+      var _this$props12 = this.props,
+          disableOverlay = _this$props12.disableOverlay,
+          selectable = _this$props12.selectable,
+          selected = _this$props12.selected,
+          mediaType = _this$props12.mediaType,
+          progress = _this$props12.progress,
+          status = _this$props12.status,
+          mediaName = _this$props12.mediaName;
       return /*#__PURE__*/React.createElement(Wrapper, {
         "data-testid": "media-file-card-view",
         "data-test-media-name": mediaName,
@@ -289,9 +301,9 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
   }, {
     key: "isFileCardImageReadyForDisplay",
     get: function get() {
-      var _this$props11 = this.props,
-          dataURI = _this$props11.dataURI,
-          status = _this$props11.status;
+      var _this$props13 = this.props,
+          dataURI = _this$props13.dataURI,
+          status = _this$props13.status;
       return !!dataURI || !['loading', 'processing', 'loading-preview'].includes(status);
     }
   }, {

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

@@ -1,5 +1,5 @@
 import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
-export var relevantFeatureFlagNames = ['newCardExperience', 'captions'];
+export var relevantFeatureFlagNames = ['newCardExperience', 'captions', 'timestampOnVideo'];
 export var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, error) {
   var fireEvent = function fireEvent(payload) {
     return fireMediaCardEvent(payload, createAnalyticsEvent);

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

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { isErrorFileState } from '@atlaskit/media-client';
 import { MediaCardError } from '../../errors';

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

@@ -1,3 +1,4 @@
+import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { createObjectURLCache } from '../../../utils/objectURLCache';
@@ -6,7 +7,7 @@ import { createObjectURLCache } from '../../../utils/objectURLCache';
 export var getCacheKey = function getCacheKey(id, dimensions) {
   return [id, dimensions.height, dimensions.width].join('-');
 };
-export var CardPreviewCacheImpl = function CardPreviewCacheImpl(previewCache) {
+export var CardPreviewCacheImpl = /*#__PURE__*/_createClass(function CardPreviewCacheImpl(previewCache) {
   var _this = this;
 
   _classCallCheck(this, CardPreviewCacheImpl);
@@ -29,5 +30,5 @@ export var CardPreviewCacheImpl = function CardPreviewCacheImpl(previewCache) {
   });
 
   this.previewCache = previewCache;
-};
+});
 export default new CardPreviewCacheImpl(createObjectURLCache());

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

@@ -31,5 +31,8 @@ export var isPreviewableStatus = function isPreviewableStatus(cardStatus, _ref3)
   var isPreviewable = _ref3.isPreviewable,
       hasPreview = _ref3.hasPreview,
       isSupportedByBrowser = _ref3.isSupportedByBrowser;
-  return hasPreview && isPreviewable && (cardStatus === 'complete' || cardStatus === 'loading-preview' || cardStatus === 'uploading' || cardStatus === 'processing' && 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/esm/root/card/getCardPreview/index.js

@@ -2,9 +2,9 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { isPreviewableFileState, addFileAttrsToUrl } from '@atlaskit/media-client';
 import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
@@ -208,6 +208,9 @@ export var isSSRClientPreview = function isSSRClientPreview(preview) {
   var ssrClientSources = ['ssr-client', 'cache-ssr-client'];
   return ssrClientSources.includes(preview.source);
 };
+export var isSSRDataPreview = function isSSRDataPreview(preview) {
+  return preview.source === 'ssr-data';
+};
 export var fetchAndCacheRemotePreview = /*#__PURE__*/function () {
   var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(mediaClient, id, dimensions, params, mediaBlobUrlAttrs) {
     var remotePreview;