@atlaskit/media-card 70.11.0 → 73.0.0

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

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCardStateFromFileState = exports.createStateUpdater = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _mediaClient = require("@atlaskit/media-client");
+
+var _errors = require("../../errors");
+
+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 _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; }
+
+var createStateUpdater = function createStateUpdater(newState) {
+  return function (prevState) {
+    // Only override if previous status is non-final
+    // or new status is 'complete'
+    if ((0, _getCardStatus.isFinalCardStatus)(prevState.status) && newState.status !== 'complete') {
+      return prevState;
+    }
+
+    return _objectSpread(_objectSpread({}, prevState), newState);
+  };
+};
+
+exports.createStateUpdater = createStateUpdater;
+
+var getCardStateFromFileState = function getCardStateFromFileState(fileState, isBannedLocalPreview, featureFlags) {
+  var status = (0, _getCardStatus.getCardStatus)(fileState.status, (0, _getCardPreview.extractFilePreviewStatus)(fileState, isBannedLocalPreview, featureFlags));
+  var error = status === 'error' && (0, _mediaClient.isErrorFileState)(fileState) ? new _errors.MediaCardError('error-file-state', new Error(fileState.message)) : undefined;
+  var progress = status === 'uploading' && fileState.status === 'uploading' ? fileState.progress : 1;
+  return {
+    fileState: fileState,
+    status: status,
+    progress: progress,
+    error: error
+  };
+};
+
+exports.getCardStateFromFileState = getCardStateFromFileState;

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

@@ -5,7 +5,7 @@ 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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -34,6 +34,11 @@ var CardPreviewCacheImpl = function CardPreviewCacheImpl(previewCache) {
 
     _this.previewCache.set(cacheKey, cardPreview);
   });
+  (0, _defineProperty2.default)(this, "remove", function (id, dimensions) {
+    var cacheKey = getCacheKey(id, dimensions);
+
+    _this.previewCache.remove(cacheKey);
+  });
   this.previewCache = previewCache;
 };
 

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

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isPreviewableStatus = exports.extractFilePreviewStatus = void 0;
+
+var _mediaCommon = require("@atlaskit/media-common");
+
+var _mediaClient = require("@atlaskit/media-client");
+
+var _helpers = require("./helpers");
+
+// TODO: align these checks with helpers from Media Client
+// https://product-fabric.atlassian.net/browse/BMPT-1300
+var extractFilePreviewStatus = function extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags) {
+  var hasFilesize = 'size' in fileState && !!fileState.size;
+
+  var _ref = 'mediaType' in fileState && fileState || {},
+      mediaType = _ref.mediaType;
+
+  var _ref2 = 'mimeType' in fileState && fileState || {},
+      mimeType = _ref2.mimeType;
+
+  var isPreviewable = !!mediaType && (0, _mediaClient.isPreviewableType)(mediaType, featureFlags); // Local preview is available only if it's supported by browser and supported by Media Card (isSupportedLocalPreview)
+  // For example, SVGs are mime type NOT supported by browser but media type supported by Media Card (image)
+  // Then, local Preview NOT available
+
+  var hasLocalPreview = !isBannedLocalPreview && (0, _mediaClient.isPreviewableFileState)(fileState) && (0, _helpers.isSupportedLocalPreview)(mediaType) && !!mimeType && (0, _mediaCommon.isMimeTypeSupportedByBrowser)(mimeType);
+  var hasRemotePreview = (0, _mediaClient.isImageRepresentationReady)(fileState);
+  var hasPreview = hasLocalPreview || hasRemotePreview;
+  var isSupportedByBrowser = !!mimeType && (0, _mediaCommon.isMimeTypeSupportedByBrowser)(mimeType);
+  return {
+    hasFilesize: hasFilesize,
+    isPreviewable: isPreviewable,
+    hasPreview: hasPreview,
+    isSupportedByBrowser: isSupportedByBrowser
+  };
+};
+
+exports.extractFilePreviewStatus = extractFilePreviewStatus;
+
+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' || // 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"));
 
@@ -176,25 +176,17 @@ var getCardPreviewFromFilePreview = /*#__PURE__*/function () {
 exports.getCardPreviewFromFilePreview = getCardPreviewFromFilePreview;
 
 var getCardPreviewFromBackend = /*#__PURE__*/function () {
-  var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(mediaClient, id, _ref4, collectionName, resizeMode) {
-    var width, height, mode, blob;
+  var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(mediaClient, id, params) {
+    var blob;
     return _regenerator.default.wrap(function _callee4$(_context4) {
       while (1) {
         switch (_context4.prev = _context4.next) {
           case 0:
-            width = _ref4.width, height = _ref4.height;
-            _context4.prev = 1;
-            mode = resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode;
-            _context4.next = 5;
-            return mediaClient.getImage(id, {
-              collection: collectionName,
-              mode: mode,
-              width: width,
-              height: height,
-              allowAnimated: true
-            });
+            _context4.prev = 0;
+            _context4.next = 3;
+            return mediaClient.getImage(id, params);
 
-          case 5:
+          case 3:
             blob = _context4.sent;
             return _context4.abrupt("return", {
               dataURI: URL.createObjectURL(blob),
@@ -202,21 +194,21 @@ var getCardPreviewFromBackend = /*#__PURE__*/function () {
               source: 'remote'
             });
 
-          case 9:
-            _context4.prev = 9;
-            _context4.t0 = _context4["catch"](1);
+          case 7:
+            _context4.prev = 7;
+            _context4.t0 = _context4["catch"](0);
             throw new _errors.RemotePreviewError('remote-preview-fetch', _context4.t0);
 
-          case 12:
+          case 10:
           case "end":
             return _context4.stop();
         }
       }
-    }, _callee4, null, [[1, 9]]);
+    }, _callee4, null, [[0, 7]]);
   }));
 
-  return function getCardPreviewFromBackend(_x4, _x5, _x6, _x7, _x8) {
-    return _ref5.apply(this, arguments);
+  return function getCardPreviewFromBackend(_x4, _x5, _x6) {
+    return _ref4.apply(this, arguments);
   };
 }();