@atlaskit/media-card 72.0.0 → 73.1.1

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

@@ -1,129 +1,69 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-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; } }
-
-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 '../..';
-
-var CardLoader = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(CardLoader, _React$PureComponent);
-
-  var _super = _createSuper(CardLoader);
-
-  function CardLoader() {
-    var _this;
-
-    _classCallCheck(this, CardLoader);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      Card: CardLoader.Card,
-      MediaCardErrorBoundary: CardLoader.MediaCardErrorBoundary
+var MediaCardContext = /*#__PURE__*/React.createContext({});
+
+var CardLoadingWithContext = function CardLoadingWithContext() {
+  var props = useContext(MediaCardContext);
+  return /*#__PURE__*/React.createElement(CardLoading, props);
+};
+
+var MediaCard = Loadable({
+  loader: function loader() {
+    return import(
+    /* webpackChunkName: "@atlaskit-internal_media-card" */
+    './index').then(function (mod) {
+      return mod.Card;
     });
-
-    return _this;
+  },
+  loading: function loading() {
+    return /*#__PURE__*/React.createElement(CardLoadingWithContext, null);
   }
-
-  _createClass(CardLoader, [{
-    key: "componentDidMount",
-    value: function () {
-      var _componentDidMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var _yield$Promise$all, _yield$Promise$all2, mediaClient, cardModule, mediaCardErrorBoundaryModule;
-
-        return _regeneratorRuntime.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([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')]);
-
-              case 4:
-                _yield$Promise$all = _context.sent;
-                _yield$Promise$all2 = _slicedToArray(_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.createElement(CardLoading, {
-          testId: testId,
-          dimensions: dimensions,
-          featureFlags: featureFlags
-        });
-      }
-
-      return /*#__PURE__*/React.createElement(MediaCardErrorBoundary, null, /*#__PURE__*/React.createElement(Card, this.props));
-    }
-  }]);
-
-  return CardLoader;
-}(React.PureComponent);
-
-_defineProperty(CardLoader, "displayName", 'AsyncCard');
-
-export { CardLoader as default };
+});
+var MediaCardErrorBoundary = Loadable({
+  loader: function loader() {
+    return import(
+    /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */
+    '../media-card-analytics-error-boundary').then(function (mod) {
+      return mod.default;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/React.createElement(CardLoadingWithContext, null);
+  }
+});
+var MediaCardWithMediaClient = Loadable({
+  loader: function loader() {
+    return import(
+    /* webpackChunkName: "@atlaskit-internal_media-client" */
+    '@atlaskit/media-client');
+  },
+  loading: function loading() {
+    return /*#__PURE__*/React.createElement(CardLoadingWithContext, null);
+  },
+  render: function render(loaded, props) {
+    return /*#__PURE__*/React.createElement(CardWithMediaClient, _extends({}, props, {
+      withMediaClient: loaded.withMediaClient
+    }));
+  }
+});
+
+var CardWithMediaClient = function CardWithMediaClient(props) {
+  var withMediaClient = props.withMediaClient,
+      featureFlags = props.featureFlags;
+  var memoizedFeatureFlags = useMemoizeFeatureFlags(featureFlags);
+  var Card = React.useMemo(function () {
+    return withMediaClient(MediaCard, memoizedFeatureFlags);
+  }, [withMediaClient, memoizedFeatureFlags]);
+  return /*#__PURE__*/React.createElement(MediaCardErrorBoundary, null, /*#__PURE__*/React.createElement(Card, props));
+};
+
+var CardLoader = function CardLoader(props) {
+  return /*#__PURE__*/React.createElement(MediaCardContext.Provider, {
+    value: props
+  }, /*#__PURE__*/React.createElement(MediaCardWithMediaClient, props));
+};
+
+export default CardLoader;

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,15 +2,15 @@ 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';
 import cardPreviewCache from './cache';
 import { getCardPreviewFromFilePreview, getCardPreviewFromBackend } from './helpers';
-import { MediaCardError, isUnsupportedLocalPreviewError } from '../../../errors';
+import { MediaCardError, SsrPreviewError, isUnsupportedLocalPreviewError } from '../../../errors';
 import { isBigger } from '../../../utils/dimensionComparer';
 import { extractFilePreviewStatus, isPreviewableStatus } from './filePreviewStatus';
 export { getCardPreviewFromFilePreview, getCardPreviewFromBackend, isSupportedLocalPreview } from './helpers';
@@ -38,6 +38,14 @@ var extendAndCachePreview = function extendAndCachePreview(id, dimensions, previ
       source = 'cache-remote';
       break;
 
+    case 'ssr-server':
+      source = 'cache-ssr-server';
+      break;
+
+    case 'ssr-client':
+      source = 'cache-ssr-client';
+      break;
+
     default:
       source = preview.source;
   } // We want to embed some meta context into dataURI for Copy/Paste to work.
@@ -67,7 +75,7 @@ var extendAndCachePreview = function extendAndCachePreview(id, dimensions, previ
 
 export var getCardPreview = /*#__PURE__*/function () {
   var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
-    var mediaClient, id, _ref$dimensions, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, cachedPreview, localPreview, remotePreview;
+    var mediaClient, id, _ref$dimensions, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, cachedPreview, localPreview;
 
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
@@ -141,14 +149,9 @@ export var getCardPreview = /*#__PURE__*/function () {
             throw new MediaCardError('remote-preview-not-ready');
 
           case 19:
-            _context.next = 21;
-            return getCardPreviewFromBackend(mediaClient, id, imageUrlParams);
-
-          case 21:
-            remotePreview = _context.sent;
-            return _context.abrupt("return", extendAndCachePreview(id, dimensions, remotePreview, mediaBlobUrlAttrs));
+            return _context.abrupt("return", fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs));
 
-          case 23:
+          case 20:
           case "end":
             return _context.stop();
         }
@@ -171,4 +174,63 @@ export var shouldResolvePreview = function shouldResolvePreview(_ref3) {
   var statusIsPreviewable = isPreviewableStatus(status, extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags));
   var dimensionsAreBigger = isBigger(prevDimensions, dimensions);
   return statusIsPreviewable && (!hasCardPreview || dimensionsAreBigger);
-};
+};
+export var getSSRCardPreview = function getSSRCardPreview(ssr, mediaClient, id, params, mediaBlobUrlAttrs) {
+  var dataURI;
+
+  try {
+    var rawDataURI = mediaClient.getImageUrlSync(id, params); // We want to embed some meta context into dataURI for Copy/Paste to work.
+
+    dataURI = mediaBlobUrlAttrs ? addFileAttrsToUrl(rawDataURI, mediaBlobUrlAttrs) : rawDataURI;
+    var source = ssr === 'client' ? 'ssr-client' : 'ssr-server';
+    return {
+      dataURI: dataURI,
+      source: source,
+      orientation: 1
+    };
+  } catch (e) {
+    var reason = ssr === 'server' ? 'ssr-server-uri' : 'ssr-client-uri';
+    throw new SsrPreviewError(reason, e);
+  }
+};
+export var isLocalPreview = function isLocalPreview(preview) {
+  var localSources = ['local', 'cache-local'];
+  return localSources.includes(preview.source);
+};
+export var isSSRPreview = function isSSRPreview(preview) {
+  return isSSRClientPreview(preview) || isSSRServerPreview(preview);
+};
+export var isSSRServerPreview = function isSSRServerPreview(preview) {
+  var ssrClientSources = ['ssr-server', 'cache-ssr-server'];
+  return ssrClientSources.includes(preview.source);
+};
+export var isSSRClientPreview = function isSSRClientPreview(preview) {
+  var ssrClientSources = ['ssr-client', 'cache-ssr-client'];
+  return ssrClientSources.includes(preview.source);
+};
+export var fetchAndCacheRemotePreview = /*#__PURE__*/function () {
+  var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(mediaClient, id, dimensions, params, mediaBlobUrlAttrs) {
+    var remotePreview;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return getCardPreviewFromBackend(mediaClient, id, params);
+
+          case 2:
+            remotePreview = _context2.sent;
+            return _context2.abrupt("return", extendAndCachePreview(id, dimensions, remotePreview, mediaBlobUrlAttrs));
+
+          case 4:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+
+  return function fetchAndCacheRemotePreview(_x2, _x3, _x4, _x5, _x6) {
+    return _ref4.apply(this, arguments);
+  };
+}();