@atlaskit/media-card 72.1.0 → 73.2.0

package/CHANGELOG.md

@@ -1,5 +1,94 @@
 # @atlaskit/media-card
 
+## 73.2.0
+
+### Minor Changes
+
+- [`3ad0bbf0f93`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3ad0bbf0f93) - Log media ssr getImageURLSync error in global variable ssr data.
+- [`1dcf16cb69e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1dcf16cb69e) - Reuse image url from server when hydrates and refetch if dimensions in client are bigger
+- [`a5cabf7f670`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a5cabf7f670) - Made InlinePlayer compatible with SSR
+
+### Patch Changes
+
+- [`46cd0dfed6f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/46cd0dfed6f) - Removed duplicated commenced event
+- [`5571b079998`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5571b079998) - Added example using FileState Factory helper
+- [`116ae9cd4fe`](https://bitbucket.org/atlassian/atlassian-frontend/commits/116ae9cd4fe) - Update SSR example with media single in stretchy-fit mode.
+- [`42485996554`](https://bitbucket.org/atlassian/atlassian-frontend/commits/42485996554) - vr tests for ssr cases
+- [`a31422c7a74`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a31422c7a74) - MEX-1194 introduce cursor states to media card
+- [`af3fcc847ce`](https://bitbucket.org/atlassian/atlassian-frontend/commits/af3fcc847ce) - Improved filestate simulations example
+- [`8fd03048678`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8fd03048678) - Added example and test for media ssr usage in renderer
+- Updated dependencies
+
+## 73.1.1
+
+### Patch Changes
+
+- [`9ca8f7e9d74`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9ca8f7e9d74) - Revert extra image visibility style for media card
+
+## 73.1.0
+
+### Minor Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - [ux] Displaying the control bar including the timestamp by default for videos that have been processed.
+
+### Patch Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - fix percent width on media-card
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Refactor solution for fixing media card images overlaps with creating preview message
+- [`e221ee215e7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e221ee215e7) - fix vertical scroll for firefox when media link is wrapped
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Improved card lazy offset
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Add media node updater to media inline node
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - show progress bar for inline player when videos is uploading
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Adding a feature flag for TimestampOnVideo
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Fix cardview issue with creating preview text overlaps with image in safari"
+- Updated dependencies
+
+## 73.0.0
+
+### Major Changes
+
+- [`47f58da5946`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47f58da5946) - ED-13322, ED-13324, ED-13326, ED-13323, ED-13204: Upgrade and support react-intl@^5.18.1 including breaking API changes, types and tests in atlassian-frontend packages
+
+  What changed: Upgraded our react-intl support from ^2.6.0 to ^5.18.1. This means editor packages now rely on consumers installing ^5.18.1, otherwise editor usage of react-intl will mismatch with actual installed react-intl APIs.
+  Why change was made: As part of a coordinated upgrade effort across AF packages, as react-intl v2 is quite dated.
+  How consumer should update their code: Ensure react-intl ^5.18.1 is installed in consuming applications.
+
+  Upgrade guide: To consume atlassian-frontend packages that use react-intl5 setup a second provider for the new version, using an npm alias
+
+  ```js
+  "react-intl": "^2.6.0",
+  "react-intl-next": "npm:react-intl@^5.18.1",
+  ```
+
+  ```js
+  import { IntlProvider } from 'react-intl';
+  import { IntlProvider as IntlNextProvider } from 'react-intl-next';
+
+  return (
+    <IntlProvider
+      key={locale}
+      data-test-language={locale}
+      locale={locale}
+      defaultLocale={DEFAULT_LOCALE}
+      messages={messages}
+    >
+      <IntlNextProvider
+        key={locale}
+        data-test-language={locale}
+        locale={locale}
+        defaultLocale={DEFAULT_LOCALE}
+        messages={messages}
+      >
+        {children}
+      </IntlNextProvider>
+    </IntlProvider>
+  );
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 72.1.0
 
 ### Minor Changes

package/dist/cjs/actions.js

@@ -9,9 +9,9 @@ exports.attachDetailsToActions = attachDetailsToActions;
 
 var _defineProperty2 = _interopRequireDefault(require("@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) { (0, _defineProperty2.default)(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) { (0, _defineProperty2.default)(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; }
 
 function attachDetailsToActions(actions, details) {
   return actions.map(function (action) {

package/dist/cjs/errors.js

@@ -5,9 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isMediaCardError = isMediaCardError;
+exports.getImageLoadPrimaryReason = exports.ensureMediaCardError = exports.SsrPreviewError = exports.RemotePreviewError = exports.MediaCardError = exports.LocalPreviewError = exports.ImageLoadError = void 0;
 exports.isImageLoadError = isImageLoadError;
-exports.isUploadError = exports.ensureMediaCardError = exports.isUnsupportedLocalPreviewError = exports.isRemotePreviewError = exports.isLocalPreviewError = exports.ImageLoadError = exports.getImageLoadPrimaryReason = exports.SsrPreviewError = exports.RemotePreviewError = exports.LocalPreviewError = exports.MediaCardError = void 0;
+exports.isLocalPreviewError = void 0;
+exports.isMediaCardError = isMediaCardError;
+exports.isUploadError = exports.isUnsupportedLocalPreviewError = exports.isRemotePreviewError = void 0;
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -47,7 +51,7 @@ var MediaCardError = /*#__PURE__*/function (_Error) {
     return _this;
   }
 
-  return MediaCardError;
+  return (0, _createClass2.default)(MediaCardError);
 }( /*#__PURE__*/(0, _wrapNativeSuper2.default)(Error));
 
 exports.MediaCardError = MediaCardError;
@@ -67,7 +71,7 @@ var LocalPreviewError = /*#__PURE__*/function (_MediaCardError) {
     return _this2;
   }
 
-  return LocalPreviewError;
+  return (0, _createClass2.default)(LocalPreviewError);
 }(MediaCardError);
 
 exports.LocalPreviewError = LocalPreviewError;
@@ -87,7 +91,7 @@ var RemotePreviewError = /*#__PURE__*/function (_MediaCardError2) {
     return _this3;
   }
 
-  return RemotePreviewError;
+  return (0, _createClass2.default)(RemotePreviewError);
 }(MediaCardError);
 
 exports.RemotePreviewError = RemotePreviewError;
@@ -107,7 +111,7 @@ var SsrPreviewError = /*#__PURE__*/function (_MediaCardError3) {
     return _this4;
   }
 
-  return SsrPreviewError;
+  return (0, _createClass2.default)(SsrPreviewError);
 }(MediaCardError);
 
 exports.SsrPreviewError = SsrPreviewError;
@@ -147,7 +151,7 @@ var ImageLoadError = /*#__PURE__*/function (_MediaCardError4) {
     return _super5.call(this, getImageLoadPrimaryReason(source));
   }
 
-  return ImageLoadError;
+  return (0, _createClass2.default)(ImageLoadError);
 }(MediaCardError);
 
 exports.ImageLoadError = ImageLoadError;

package/dist/cjs/files/cardImageView/cardOverlay/styled.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Metadata = exports.Subtitle = exports.TitleWrapper = exports.AltWrapper = exports.ErrorMessage = exports.RightColumn = exports.BottomRow = exports.TopRow = exports.LeftColumn = exports.ErrorLine = exports.Overlay = exports.TickBox = void 0;
+exports.TopRow = exports.TitleWrapper = exports.TickBox = exports.Subtitle = exports.RightColumn = exports.Overlay = exports.Metadata = exports.LeftColumn = exports.ErrorMessage = exports.ErrorLine = exports.BottomRow = exports.AltWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FileCardImageView = exports.fileCardImageViewSelectedSelector = exports.fileCardImageViewSelector = void 0;
+exports.fileCardImageViewSelector = exports.fileCardImageViewSelectedSelector = exports.FileCardImageView = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -180,18 +180,28 @@ var FileCardImageView = /*#__PURE__*/function (_Component) {
         size: "large"
       })));
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMediaImage", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageError", function () {
+      var _this$props7 = _this.props,
+          onImageError = _this$props7.onImageError,
+          cardPreview = _this$props7.cardPreview;
+      onImageError && onImageError(cardPreview);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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 (!(0, _shouldDisplayImageThumbnail.shouldDisplayImageThumbnail)(status, mediaItemType, dataURI, mediaType, mimeType)) {
         return null;
@@ -208,16 +218,16 @@ var FileCardImageView = /*#__PURE__*/function (_Component) {
         crop: _this.isCropped,
         stretch: _this.isStretched,
         previewOrientation: previewOrientation,
-        onImageLoad: onImageLoad,
-        onImageError: onImageError
+        onImageLoad: _this.onImageLoad,
+        onImageError: _this.onImageError
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
@@ -235,10 +245,10 @@ var FileCardImageView = /*#__PURE__*/function (_Component) {
       }) : null))));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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) {
@@ -258,15 +268,15 @@ var FileCardImageView = /*#__PURE__*/function (_Component) {
       }, _this.renderMediaImage(), _this.renderProgressBar(), _this.renderPlayButton()), overlay);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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.default.createElement(_cardOverlay.CardOverlay, {
         cardStatus: status,
@@ -285,14 +295,14 @@ var FileCardImageView = /*#__PURE__*/function (_Component) {
   (0, _createClass2.default)(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.default.createElement(_styled.Wrapper, {
         "data-testid": "media-file-card-view",
         "data-test-media-name": mediaName,
@@ -309,9 +319,9 @@ 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/cjs/files/cardImageView/styled.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CardActionsWrapper = exports.ProgressWrapper = exports.Body = exports.Title = exports.Overlay = exports.ProgressBarWrapper = exports.PlayIconBackground = exports.PlayIconWrapper = exports.Wrapper = void 0;
+exports.Wrapper = exports.Title = exports.ProgressWrapper = exports.ProgressBarWrapper = exports.PlayIconWrapper = exports.PlayIconBackground = exports.Overlay = exports.CardActionsWrapper = exports.Body = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

package/dist/cjs/index.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "Card", {
     return _root.Card;
   }
 });
-Object.defineProperty(exports, "MediaInlineCard", {
+Object.defineProperty(exports, "CardError", {
   enumerable: true,
   get: function get() {
-    return _root.MediaInlineCard;
+    return _cardError.CardError;
   }
 });
 Object.defineProperty(exports, "CardLoading", {
@@ -21,10 +21,10 @@ Object.defineProperty(exports, "CardLoading", {
     return _cardLoading.CardLoading;
   }
 });
-Object.defineProperty(exports, "CardError", {
+Object.defineProperty(exports, "MediaInlineCard", {
   enumerable: true,
   get: function get() {
-    return _cardError.CardError;
+    return _root.MediaInlineCard;
   }
 });
 Object.defineProperty(exports, "defaultImageCardDimensions", {
@@ -33,16 +33,16 @@ Object.defineProperty(exports, "defaultImageCardDimensions", {
     return _cardDimensions.defaultImageCardDimensions;
   }
 });
-Object.defineProperty(exports, "fileCardImageViewSelector", {
+Object.defineProperty(exports, "fileCardImageViewSelectedSelector", {
   enumerable: true,
   get: function get() {
-    return _cardImageView.fileCardImageViewSelector;
+    return _cardImageView.fileCardImageViewSelectedSelector;
   }
 });
-Object.defineProperty(exports, "fileCardImageViewSelectedSelector", {
+Object.defineProperty(exports, "fileCardImageViewSelector", {
   enumerable: true,
   get: function get() {
-    return _cardImageView.fileCardImageViewSelectedSelector;
+    return _cardImageView.fileCardImageViewSelector;
   }
 });
 Object.defineProperty(exports, "inlinePlayerClassName", {

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fireScreenEvent = exports.fireCopiedEvent = exports.fireCommencedEvent = exports.fireOperationalEvent = exports.relevantFeatureFlagNames = void 0;
+exports.relevantFeatureFlagNames = exports.fireScreenEvent = exports.fireOperationalEvent = exports.fireCopiedEvent = exports.fireCommencedEvent = void 0;
 
 var _analytics = require("../../utils/analytics");
 
-var relevantFeatureFlagNames = ['newCardExperience', 'captions'];
+var relevantFeatureFlagNames = ['newCardExperience', 'captions', 'timestampOnVideo'];
 exports.relevantFeatureFlagNames = relevantFeatureFlagNames;
 
 var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, error) {

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

@@ -17,9 +17,9 @@ var _getCardStatus = require("./getCardStatus");
 
 var _getCardPreview = require("./getCardPreview");
 
-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) { (0, _defineProperty2.default)(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) { (0, _defineProperty2.default)(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; }
 
 var createStateUpdater = function createStateUpdater(newState) {
   return function (prevState) {

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

@@ -5,7 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.CardPreviewCacheImpl = exports.getCacheKey = void 0;
+exports.getCacheKey = exports.default = exports.CardPreviewCacheImpl = void 0;
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -20,8 +22,7 @@ var getCacheKey = function getCacheKey(id, dimensions) {
 };
 
 exports.getCacheKey = getCacheKey;
-
-var CardPreviewCacheImpl = function CardPreviewCacheImpl(previewCache) {
+var CardPreviewCacheImpl = /*#__PURE__*/(0, _createClass2.default)(function CardPreviewCacheImpl(previewCache) {
   var _this = this;
 
   (0, _classCallCheck2.default)(this, CardPreviewCacheImpl);
@@ -40,8 +41,7 @@ var CardPreviewCacheImpl = function CardPreviewCacheImpl(previewCache) {
     _this.previewCache.remove(cacheKey);
   });
   this.previewCache = previewCache;
-};
-
+});
 exports.CardPreviewCacheImpl = CardPreviewCacheImpl;
 
 var _default = new CardPreviewCacheImpl((0, _objectURLCache.createObjectURLCache)());

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

@@ -44,7 +44,10 @@ 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);
 };
 
 exports.isPreviewableStatus = isPreviewableStatus;

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getCardPreviewFromBackend = exports.getCardPreviewFromFilePreview = exports.isSupportedLocalPreview = void 0;
+exports.isSupportedLocalPreview = exports.getCardPreviewFromFilePreview = exports.getCardPreviewFromBackend = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 

package/dist/cjs/root/card/getCardPreview/index.js

@@ -5,31 +5,34 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "getCardPreviewFromFilePreview", {
+Object.defineProperty(exports, "extractFilePreviewStatus", {
   enumerable: true,
   get: function get() {
-    return _helpers.getCardPreviewFromFilePreview;
+    return _filePreviewStatus.extractFilePreviewStatus;
   }
 });
+exports.getCardPreview = exports.fetchAndCacheRemotePreview = void 0;
 Object.defineProperty(exports, "getCardPreviewFromBackend", {
   enumerable: true,
   get: function get() {
     return _helpers.getCardPreviewFromBackend;
   }
 });
-Object.defineProperty(exports, "isSupportedLocalPreview", {
+exports.getCardPreviewFromCache = void 0;
+Object.defineProperty(exports, "getCardPreviewFromFilePreview", {
   enumerable: true,
   get: function get() {
-    return _helpers.isSupportedLocalPreview;
+    return _helpers.getCardPreviewFromFilePreview;
   }
 });
-Object.defineProperty(exports, "extractFilePreviewStatus", {
+exports.isSSRServerPreview = exports.isSSRPreview = exports.isSSRDataPreview = exports.isSSRClientPreview = exports.isLocalPreview = exports.getSSRCardPreview = exports.getFilePreviewFromFileState = void 0;
+Object.defineProperty(exports, "isSupportedLocalPreview", {
   enumerable: true,
   get: function get() {
-    return _filePreviewStatus.extractFilePreviewStatus;
+    return _helpers.isSupportedLocalPreview;
   }
 });
-exports.fetchAndCacheRemotePreview = exports.isSSRClientPreview = exports.isSSRServerPreview = exports.isSSRPreview = exports.isLocalPreview = exports.getSSRCardPreview = exports.shouldResolvePreview = exports.getCardPreview = exports.getFilePreviewFromFileState = exports.removeCardPreviewFromCache = exports.getCardPreviewFromCache = void 0;
+exports.shouldResolvePreview = exports.removeCardPreviewFromCache = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -51,9 +54,9 @@ var _dimensionComparer = require("../../../utils/dimensionComparer");
 
 var _filePreviewStatus = require("./filePreviewStatus");
 
-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) { (0, _defineProperty2.default)(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) { (0, _defineProperty2.default)(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; }
 
 var getCardPreviewFromCache = _cache.default.get;
 exports.getCardPreviewFromCache = getCardPreviewFromCache;
@@ -275,6 +278,12 @@ var isSSRClientPreview = function isSSRClientPreview(preview) {
 
 exports.isSSRClientPreview = isSSRClientPreview;
 
+var isSSRDataPreview = function isSSRDataPreview(preview) {
+  return preview.source === 'ssr-data';
+};
+
+exports.isSSRDataPreview = isSSRDataPreview;
+
 var fetchAndCacheRemotePreview = /*#__PURE__*/function () {
   var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(mediaClient, id, dimensions, params, mediaBlobUrlAttrs) {
     var remotePreview;

package/dist/cjs/root/card/getCardStatus.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getCardStatus = exports.isFinalCardStatus = void 0;
+exports.isFinalCardStatus = exports.getCardStatus = void 0;
 
 var isFinalCardStatus = function isFinalCardStatus(status) {
   return ['complete', 'error', 'failed-processing'].includes(status);