@atlaskit/media-card 72.0.0 → 73.1.1

package/CHANGELOG.md

@@ -1,5 +1,97 @@
 # @atlaskit/media-card
 
+## 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
+
+- [`1724e1b8277`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1724e1b8277) - Added SSR capabilities to Media Card
+- [`ca519a86b1d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ca519a86b1d) - Add new prop forceSyncDisplay in MediaImage to provide an option of always showing images.
+  Enable MediaCard to turn on forceSyncDisplay when server side rendering is enabled.
+- [`ac4846d0f3f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac4846d0f3f) - Added native lazy load support
+
+### Patch Changes
+
+- [`fc70978492a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fc70978492a) - Using type for SSR prop to reduce dependency on media-common
+- [`dc1f9d42903`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dc1f9d42903) - Fixed error message logic
+- [`27c61b8cdd8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/27c61b8cdd8) - revert CardSSRView component
+- [`12bfc09a21e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/12bfc09a21e) - Fixing internal prop calls for testId and removing references to the old DropdownMenuStateless export when using the new default export.
+- [`2b24fcc59f2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2b24fcc59f2) - Removed Code Viewer and Zip Previews Feature Flags
+- [`bccde8a4127`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bccde8a4127) - Update dependency of dropdown menu to the lite mode version. Update all usages to cater to the new API. The padding within dropdown menu items is 8px more, which makes the menu look bigger.
+- [`3a56ce8792b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3a56ce8792b) - [ux] Show selected for mediaInline in other states
+- [`f461edcfd05`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f461edcfd05) - Update CardLoader to use react-loadable
+  Add SSR feature prop to be passed in renderer and media card
+- Updated dependencies
+
 ## 72.0.0
 
 ### Major 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.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,11 +91,31 @@ var RemotePreviewError = /*#__PURE__*/function (_MediaCardError2) {
     return _this3;
   }
 
-  return RemotePreviewError;
+  return (0, _createClass2.default)(RemotePreviewError);
 }(MediaCardError);
 
 exports.RemotePreviewError = RemotePreviewError;
 
+var SsrPreviewError = /*#__PURE__*/function (_MediaCardError3) {
+  (0, _inherits2.default)(SsrPreviewError, _MediaCardError3);
+
+  var _super4 = _createSuper(SsrPreviewError);
+
+  function SsrPreviewError(primaryReason, secondaryError) {
+    var _this4;
+
+    (0, _classCallCheck2.default)(this, SsrPreviewError);
+    _this4 = _super4.call(this, primaryReason, secondaryError);
+    _this4.primaryReason = primaryReason;
+    _this4.secondaryError = secondaryError;
+    return _this4;
+  }
+
+  return (0, _createClass2.default)(SsrPreviewError);
+}(MediaCardError);
+
+exports.SsrPreviewError = SsrPreviewError;
+
 var getImageLoadPrimaryReason = function getImageLoadPrimaryReason(source) {
   switch (source) {
     case 'cache-remote':
@@ -117,17 +141,17 @@ var getImageLoadPrimaryReason = function getImageLoadPrimaryReason(source) {
 
 exports.getImageLoadPrimaryReason = getImageLoadPrimaryReason;
 
-var ImageLoadError = /*#__PURE__*/function (_MediaCardError3) {
-  (0, _inherits2.default)(ImageLoadError, _MediaCardError3);
+var ImageLoadError = /*#__PURE__*/function (_MediaCardError4) {
+  (0, _inherits2.default)(ImageLoadError, _MediaCardError4);
 
-  var _super4 = _createSuper(ImageLoadError);
+  var _super5 = _createSuper(ImageLoadError);
 
   function ImageLoadError(source) {
     (0, _classCallCheck2.default)(this, ImageLoadError);
-    return _super4.call(this, getImageLoadPrimaryReason(source));
+    return _super5.call(this, getImageLoadPrimaryReason(source));
   }
 
-  return ImageLoadError;
+  return (0, _createClass2.default)(ImageLoadError);
 }(MediaCardError);
 
 exports.ImageLoadError = ImageLoadError;
@@ -167,7 +191,7 @@ var ensureMediaCardError = function ensureMediaCardError(primaryReason, error) {
 exports.ensureMediaCardError = ensureMediaCardError;
 
 var isUploadError = function isUploadError(error) {
-  return error.primaryReason === 'upload';
+  return error && error.primaryReason === 'upload';
 };
 
 exports.isUploadError = isUploadError;

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"));
 

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/cardLoader.js

@@ -2,149 +2,91 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _mediaCommon = require("@atlaskit/media-common");
 
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
+var _reactLoadable = _interopRequireDefault(require("react-loadable"));
 
 var _ = require("../..");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || (0, _typeof2.default)(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var MediaCardContext = /*#__PURE__*/_react.default.createContext({});
 
-var CardLoader = /*#__PURE__*/function (_React$PureComponent) {
-  (0, _inherits2.default)(CardLoader, _React$PureComponent);
+var CardLoadingWithContext = function CardLoadingWithContext() {
+  var props = (0, _react.useContext)(MediaCardContext);
+  return /*#__PURE__*/_react.default.createElement(_.CardLoading, props);
+};
 
-  var _super = _createSuper(CardLoader);
+var MediaCard = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('./index'));
+    }).then(function (mod) {
+      return mod.Card;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/_react.default.createElement(CardLoadingWithContext, null);
+  }
+});
+var MediaCardErrorBoundary = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('../media-card-analytics-error-boundary'));
+    }).then(function (mod) {
+      return mod.default;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/_react.default.createElement(CardLoadingWithContext, null);
+  }
+});
+var MediaCardWithMediaClient = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('@atlaskit/media-client'));
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/_react.default.createElement(CardLoadingWithContext, null);
+  },
+  render: function render(loaded, props) {
+    return /*#__PURE__*/_react.default.createElement(CardWithMediaClient, (0, _extends2.default)({}, props, {
+      withMediaClient: loaded.withMediaClient
+    }));
+  }
+});
 
-  function CardLoader() {
-    var _this;
+var CardWithMediaClient = function CardWithMediaClient(props) {
+  var withMediaClient = props.withMediaClient,
+      featureFlags = props.featureFlags;
+  var memoizedFeatureFlags = (0, _mediaCommon.useMemoizeFeatureFlags)(featureFlags);
 
-    (0, _classCallCheck2.default)(this, CardLoader);
+  var Card = _react.default.useMemo(function () {
+    return withMediaClient(MediaCard, memoizedFeatureFlags);
+  }, [withMediaClient, memoizedFeatureFlags]);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  return /*#__PURE__*/_react.default.createElement(MediaCardErrorBoundary, null, /*#__PURE__*/_react.default.createElement(Card, props));
+};
 
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      Card: CardLoader.Card,
-      MediaCardErrorBoundary: CardLoader.MediaCardErrorBoundary
-    });
-    return _this;
-  }
+var CardLoader = function CardLoader(props) {
+  return /*#__PURE__*/_react.default.createElement(MediaCardContext.Provider, {
+    value: props
+  }, /*#__PURE__*/_react.default.createElement(MediaCardWithMediaClient, props));
+};
 
-  (0, _createClass2.default)(CardLoader, [{
-    key: "componentDidMount",
-    value: function () {
-      var _componentDidMount = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-        var _yield$Promise$all, _yield$Promise$all2, mediaClient, cardModule, mediaCardErrorBoundaryModule;
-
-        return _regenerator.default.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                if (this.state.Card) {
-                  _context.next = 16;
-                  break;
-                }
-
-                _context.prev = 1;
-                _context.next = 4;
-                return Promise.all([Promise.resolve().then(function () {
-                  return _interopRequireWildcard(require('@atlaskit/media-client'));
-                }), Promise.resolve().then(function () {
-                  return _interopRequireWildcard(require('./index'));
-                }), Promise.resolve().then(function () {
-                  return _interopRequireWildcard(require('../media-card-analytics-error-boundary'));
-                })]);
-
-              case 4:
-                _yield$Promise$all = _context.sent;
-                _yield$Promise$all2 = (0, _slicedToArray2.default)(_yield$Promise$all, 3);
-                mediaClient = _yield$Promise$all2[0];
-                cardModule = _yield$Promise$all2[1];
-                mediaCardErrorBoundaryModule = _yield$Promise$all2[2];
-                CardLoader.Card = mediaClient.withMediaClient(cardModule.Card, this.props.featureFlags);
-                CardLoader.MediaCardErrorBoundary = mediaCardErrorBoundaryModule.default;
-                this.setState({
-                  Card: CardLoader.Card,
-                  MediaCardErrorBoundary: CardLoader.MediaCardErrorBoundary
-                });
-                _context.next = 16;
-                break;
-
-              case 14:
-                _context.prev = 14;
-                _context.t0 = _context["catch"](1);
-
-              case 16:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, this, [[1, 14]]);
-      }));
-
-      function componentDidMount() {
-        return _componentDidMount.apply(this, arguments);
-      }
-
-      return componentDidMount;
-    }()
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          dimensions = _this$props.dimensions,
-          testId = _this$props.testId,
-          featureFlags = _this$props.featureFlags;
-      var _this$state = this.state,
-          Card = _this$state.Card,
-          MediaCardErrorBoundary = _this$state.MediaCardErrorBoundary;
-
-      if (!Card || !MediaCardErrorBoundary) {
-        return /*#__PURE__*/_react.default.createElement(_.CardLoading, {
-          testId: testId,
-          dimensions: dimensions,
-          featureFlags: featureFlags
-        });
-      }
-
-      return /*#__PURE__*/_react.default.createElement(MediaCardErrorBoundary, null, /*#__PURE__*/_react.default.createElement(Card, this.props));
-    }
-  }]);
-  return CardLoader;
-}(_react.default.PureComponent);
-
-exports.default = CardLoader;
-(0, _defineProperty2.default)(CardLoader, "displayName", 'AsyncCard');
+var _default = CardLoader;
+exports.default = _default;

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"));