@atlaskit/media-card 74.7.2 → 74.7.4

package/dist/esm/card/card.js

@@ -40,22 +40,16 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.7.2";
+var packageVersion = "74.7.4";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);
-  // An internalOccurrenceKey is a randomly generated value to differentiate various instances
-  // of Cards regardless of whether it shares the same file (either internal or external)
-
-  // We initialise timeElapsedTillCommenced
-  // to avoid extra branching on a possibly undefined value.
-
-  // Generate unique traceId for file
-
   function CardBase(props) {
     var _this;
     _classCallCheck(this, CardBase);
     _this = _super.call(this, props);
+    // An internalOccurrenceKey is a randomly generated value to differentiate various instances
+    // of Cards regardless of whether it shares the same file (either internal or external)
     _defineProperty(_assertThisInitialized(_this), "internalOccurrenceKey", generateUniqueId());
     _defineProperty(_assertThisInitialized(_this), "hasBeenMounted", false);
     _defineProperty(_assertThisInitialized(_this), "fileStateFlags", {
@@ -70,7 +64,10 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         status: 'unknown'
       }
     });
+    // We initialise timeElapsedTillCommenced
+    // to avoid extra branching on a possibly undefined value.
     _defineProperty(_assertThisInitialized(_this), "timeElapsedTillCommenced", performance.now());
+    // Generate unique traceId for file
     _defineProperty(_assertThisInitialized(_this), "traceContext", {
       traceId: getRandomHex(8)
     });
@@ -139,28 +136,26 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(identifier) {
         var cardPreview, wrappedError;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _context.prev = 0;
-                _context.next = 3;
-                return _this.fetchAndCacheRemotePreview(identifier);
-              case 3:
-                cardPreview = _context.sent;
-                _this.safeSetState({
-                  cardPreview: cardPreview
-                });
-                _context.next = 11;
-                break;
-              case 7:
-                _context.prev = 7;
-                _context.t0 = _context["catch"](0);
-                wrappedError = ensureMediaCardError('remote-preview-fetch-ssr', _context.t0, true);
-                _this.fireNonCriticalErrorEvent(wrappedError);
-              case 11:
-              case "end":
-                return _context.stop();
-            }
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return _this.fetchAndCacheRemotePreview(identifier);
+            case 3:
+              cardPreview = _context.sent;
+              _this.safeSetState({
+                cardPreview: cardPreview
+              });
+              _context.next = 11;
+              break;
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              wrappedError = ensureMediaCardError('remote-preview-fetch-ssr', _context.t0, true);
+              _this.fireNonCriticalErrorEvent(wrappedError);
+            case 11:
+            case "end":
+              return _context.stop();
           }
         }, _callee, null, [[0, 7]]);
       }));
@@ -172,42 +167,40 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(identifier) {
         var requestedDimensions, cardPreview, currentDimensions, areValidRequestedDimensions;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                requestedDimensions = _objectSpread({}, _this.props.dimensions);
-                _context2.prev = 1;
-                _context2.next = 4;
-                return _this.fetchAndCacheRemotePreview(identifier);
-              case 4:
-                cardPreview = _context2.sent;
-                currentDimensions = _this.props.dimensions;
-                areValidRequestedDimensions = !isBigger(requestedDimensions, currentDimensions); // If there are new and bigger dimensions in the props, and the upfront preview is still resolving,
-                // the fetched preview is no longer valid, and thus, we dismiss it and set the flag wasResolvedUpfrontPreview = true
-                // to trigger a normal preview fetch.
-                if (areValidRequestedDimensions) {
-                  _this.safeSetState({
-                    cardPreview: cardPreview,
-                    wasResolvedUpfrontPreview: true
-                  });
-                } else {
-                  _this.safeSetState({
-                    wasResolvedUpfrontPreview: true
-                  });
-                }
-                _context2.next = 13;
-                break;
-              case 10:
-                _context2.prev = 10;
-                _context2.t0 = _context2["catch"](1);
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              requestedDimensions = _objectSpread({}, _this.props.dimensions);
+              _context2.prev = 1;
+              _context2.next = 4;
+              return _this.fetchAndCacheRemotePreview(identifier);
+            case 4:
+              cardPreview = _context2.sent;
+              currentDimensions = _this.props.dimensions;
+              areValidRequestedDimensions = !isBigger(requestedDimensions, currentDimensions); // If there are new and bigger dimensions in the props, and the upfront preview is still resolving,
+              // the fetched preview is no longer valid, and thus, we dismiss it and set the flag wasResolvedUpfrontPreview = true
+              // to trigger a normal preview fetch.
+              if (areValidRequestedDimensions) {
                 _this.safeSetState({
+                  cardPreview: cardPreview,
                   wasResolvedUpfrontPreview: true
                 });
-                // NO need to log error. If this call fails, a refetch will happen after
-              case 13:
-              case "end":
-                return _context2.stop();
-            }
+              } else {
+                _this.safeSetState({
+                  wasResolvedUpfrontPreview: true
+                });
+              }
+              _context2.next = 13;
+              break;
+            case 10:
+              _context2.prev = 10;
+              _context2.t0 = _context2["catch"](1);
+              _this.safeSetState({
+                wasResolvedUpfrontPreview: true
+              });
+              // NO need to log error. If this call fails, a refetch will happen after
+            case 13:
+            case "end":
+              return _context2.stop();
           }
         }, _callee2, null, [[1, 10]]);
       }));
@@ -226,42 +219,40 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(identifier, fileState) {
         var params, cardPreview, wrappedError;
         return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-          while (1) {
-            switch (_context3.prev = _context3.next) {
-              case 0:
-                _context3.prev = 0;
-                params = _this.getCardPreviewParams(identifier, fileState);
-                _context3.next = 4;
-                return getCardPreview(params);
-              case 4:
-                cardPreview = _context3.sent;
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.prev = 0;
+              params = _this.getCardPreviewParams(identifier, fileState);
+              _context3.next = 4;
+              return getCardPreview(params);
+            case 4:
+              cardPreview = _context3.sent;
+              _this.safeSetState({
+                cardPreview: cardPreview
+              });
+              _context3.next = 12;
+              break;
+            case 8:
+              _context3.prev = 8;
+              _context3.t0 = _context3["catch"](0);
+              wrappedError = ensureMediaCardError('preview-fetch', _context3.t0); //  If remote preview fails, we set status 'error'
+              //  If local preview fails (i.e, no remote preview available),
+              //  we can stay in the same status until there is a remote preview available
+              //  If it's any other error we set status 'error'
+              if (isLocalPreviewError(wrappedError)) {
+                // This error should already been logged inside the getCardPreview. No need to log it here.
+                _this.safeSetState({
+                  isBannedLocalPreview: true
+                });
+              } else {
                 _this.safeSetState({
-                  cardPreview: cardPreview
+                  status: 'error',
+                  error: wrappedError
                 });
-                _context3.next = 12;
-                break;
-              case 8:
-                _context3.prev = 8;
-                _context3.t0 = _context3["catch"](0);
-                wrappedError = ensureMediaCardError('preview-fetch', _context3.t0); //  If remote preview fails, we set status 'error'
-                //  If local preview fails (i.e, no remote preview available),
-                //  we can stay in the same status until there is a remote preview available
-                //  If it's any other error we set status 'error'
-                if (isLocalPreviewError(wrappedError)) {
-                  // This error should already been logged inside the getCardPreview. No need to log it here.
-                  _this.safeSetState({
-                    isBannedLocalPreview: true
-                  });
-                } else {
-                  _this.safeSetState({
-                    status: 'error',
-                    error: wrappedError
-                  });
-                }
-              case 12:
-              case "end":
-                return _context3.stop();
-            }
+              }
+            case 12:
+            case "end":
+              return _context3.stop();
           }
         }, _callee3, null, [[0, 8]]);
       }));
@@ -610,9 +601,9 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       var _this$props9 = _this.props,
         ssr = _this$props9.ssr,
         identifier = _this$props9.identifier;
-      var _this$state$cardPrevi = _this.state.cardPreview;
-      _this$state$cardPrevi = _this$state$cardPrevi === void 0 ? {} : _this$state$cardPrevi;
-      var dataURI = _this$state$cardPrevi.dataURI;
+      var _this$state$cardPrevi = _this.state.cardPreview,
+        _this$state$cardPrevi2 = _this$state$cardPrevi === void 0 ? {} : _this$state$cardPrevi,
+        dataURI = _this$state$cardPrevi2.dataURI;
       return isFileIdentifier(identifier) && ssr === 'server' && /*#__PURE__*/React.createElement(StoreSSRDataScript, {
         identifier: identifier,
         dataURI: dataURI,

package/dist/esm/card/cardView.js

@@ -87,6 +87,8 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
       });
       onImageError && onImageError(cardPreview);
     });
+    // If the dimensions.width is a percentage, we need to transform it
+    // into a pixel value in order to get the right breakpoints applied.
     _defineProperty(_assertThisInitialized(_this), "saveElementWidth", function () {
       var dimensions = _this.props.dimensions;
       if (!dimensions) {
@@ -352,9 +354,6 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
       var width = this.state.elementWidth || (this.props.dimensions ? this.props.dimensions.width : '') || defaultImageCardDimensions.width;
       return calcBreakpointSize(parseInt("".concat(width), 10));
     }
-
-    // If the dimensions.width is a percentage, we need to transform it
-    // into a pixel value in order to get the right breakpoints applied.
   }, {
     key: "render",
     value: function render() {
@@ -459,10 +458,10 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
     value: function renderImageRenderer() {
       var _this$props9 = this.props,
         cardPreview = _this$props9.cardPreview,
-        _this$props9$metadata = _this$props9.metadata;
-      _this$props9$metadata = _this$props9$metadata === void 0 ? {} : _this$props9$metadata;
-      var _this$props9$metadata2 = _this$props9$metadata.mediaType,
-        mediaType = _this$props9$metadata2 === void 0 ? 'unknown' : _this$props9$metadata2,
+        _this$props9$metadata = _this$props9.metadata,
+        _this$props9$metadata2 = _this$props9$metadata === void 0 ? {} : _this$props9$metadata,
+        _this$props9$metadata3 = _this$props9$metadata2.mediaType,
+        mediaType = _this$props9$metadata3 === void 0 ? 'unknown' : _this$props9$metadata3,
         alt = _this$props9.alt,
         resizeMode = _this$props9.resizeMode,
         onDisplayImage = _this$props9.onDisplayImage,

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

@@ -2,6 +2,9 @@ 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';
+
+// Dimensions are used to create a key.
+// Cache is invalidated when different dimensions are provided.
 export var getCacheKey = function getCacheKey(id, mode) {
   var resizeMode = mode || 'crop';
   return [id, resizeMode].join('-');

package/dist/esm/card/getCardPreview/helpers.js

@@ -15,28 +15,26 @@ var getImageLocalPreview = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value) {
     var orientation, dataURI;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            _context.prev = 0;
-            _context.next = 3;
-            return getOrientation(value);
-          case 3:
-            orientation = _context.sent;
-            dataURI = URL.createObjectURL(value);
-            return _context.abrupt("return", {
-              dataURI: dataURI,
-              orientation: orientation,
-              source: 'local'
-            });
-          case 8:
-            _context.prev = 8;
-            _context.t0 = _context["catch"](0);
-            throw new LocalPreviewError('local-preview-image', _context.t0 instanceof Error ? _context.t0 : undefined);
-          case 11:
-          case "end":
-            return _context.stop();
-        }
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.prev = 0;
+          _context.next = 3;
+          return getOrientation(value);
+        case 3:
+          orientation = _context.sent;
+          dataURI = URL.createObjectURL(value);
+          return _context.abrupt("return", {
+            dataURI: dataURI,
+            orientation: orientation,
+            source: 'local'
+          });
+        case 8:
+          _context.prev = 8;
+          _context.t0 = _context["catch"](0);
+          throw new LocalPreviewError('local-preview-image', _context.t0 instanceof Error ? _context.t0 : undefined);
+        case 11:
+        case "end":
+          return _context.stop();
       }
     }, _callee, null, [[0, 8]]);
   }));
@@ -48,27 +46,25 @@ var getVideoLocalPreview = /*#__PURE__*/function () {
   var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(value) {
     var dataURI;
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            _context2.prev = 0;
-            _context2.next = 3;
-            return takeSnapshot(value);
-          case 3:
-            dataURI = _context2.sent;
-            return _context2.abrupt("return", {
-              dataURI: dataURI,
-              orientation: 1,
-              source: 'local'
-            });
-          case 7:
-            _context2.prev = 7;
-            _context2.t0 = _context2["catch"](0);
-            throw new LocalPreviewError('local-preview-video', _context2.t0 instanceof Error ? _context2.t0 : undefined);
-          case 10:
-          case "end":
-            return _context2.stop();
-        }
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.prev = 0;
+          _context2.next = 3;
+          return takeSnapshot(value);
+        case 3:
+          dataURI = _context2.sent;
+          return _context2.abrupt("return", {
+            dataURI: dataURI,
+            orientation: 1,
+            source: 'local'
+          });
+        case 7:
+          _context2.prev = 7;
+          _context2.t0 = _context2["catch"](0);
+          throw new LocalPreviewError('local-preview-video', _context2.t0 instanceof Error ? _context2.t0 : undefined);
+        case 10:
+        case "end":
+          return _context2.stop();
       }
     }, _callee2, null, [[0, 7]]);
   }));
@@ -80,51 +76,49 @@ export var getCardPreviewFromFilePreview = /*#__PURE__*/function () {
   var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(filePreview) {
     var value, resolvedFilePreview, _value, type, mediaType;
     return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-      while (1) {
-        switch (_context3.prev = _context3.next) {
-          case 0:
-            _context3.prev = 0;
-            _context3.next = 3;
-            return filePreview;
-          case 3:
-            resolvedFilePreview = _context3.sent;
-            value = resolvedFilePreview.value;
-            _context3.next = 10;
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _context3.prev = 0;
+          _context3.next = 3;
+          return filePreview;
+        case 3:
+          resolvedFilePreview = _context3.sent;
+          value = resolvedFilePreview.value;
+          _context3.next = 10;
+          break;
+        case 7:
+          _context3.prev = 7;
+          _context3.t0 = _context3["catch"](0);
+          throw new LocalPreviewError('local-preview-rejected', _context3.t0 instanceof Error ? _context3.t0 : undefined);
+        case 10:
+          if (!(typeof value === 'string')) {
+            _context3.next = 14;
             break;
-          case 7:
-            _context3.prev = 7;
-            _context3.t0 = _context3["catch"](0);
-            throw new LocalPreviewError('local-preview-rejected', _context3.t0 instanceof Error ? _context3.t0 : undefined);
-          case 10:
-            if (!(typeof value === 'string')) {
-              _context3.next = 14;
-              break;
-            }
-            return _context3.abrupt("return", {
-              dataURI: value,
-              orientation: 1,
-              source: 'local'
-            });
-          case 14:
-            if (!(value instanceof Blob)) {
-              _context3.next = 22;
-              break;
-            }
-            _value = value, type = _value.type;
-            mediaType = getMediaTypeFromMimeType(type);
-            _context3.t1 = mediaType;
-            _context3.next = _context3.t1 === 'image' ? 20 : _context3.t1 === 'video' ? 21 : 22;
+          }
+          return _context3.abrupt("return", {
+            dataURI: value,
+            orientation: 1,
+            source: 'local'
+          });
+        case 14:
+          if (!(value instanceof Blob)) {
+            _context3.next = 22;
             break;
-          case 20:
-            return _context3.abrupt("return", getImageLocalPreview(value));
-          case 21:
-            return _context3.abrupt("return", getVideoLocalPreview(value));
-          case 22:
-            throw new LocalPreviewError('local-preview-unsupported');
-          case 23:
-          case "end":
-            return _context3.stop();
-        }
+          }
+          _value = value, type = _value.type;
+          mediaType = getMediaTypeFromMimeType(type);
+          _context3.t1 = mediaType;
+          _context3.next = _context3.t1 === 'image' ? 20 : _context3.t1 === 'video' ? 21 : 22;
+          break;
+        case 20:
+          return _context3.abrupt("return", getImageLocalPreview(value));
+        case 21:
+          return _context3.abrupt("return", getVideoLocalPreview(value));
+        case 22:
+          throw new LocalPreviewError('local-preview-unsupported');
+        case 23:
+        case "end":
+          return _context3.stop();
       }
     }, _callee3, null, [[0, 7]]);
   }));
@@ -136,27 +130,25 @@ export var getCardPreviewFromBackend = /*#__PURE__*/function () {
   var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(mediaClient, id, params, traceContext) {
     var blob;
     return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-      while (1) {
-        switch (_context4.prev = _context4.next) {
-          case 0:
-            _context4.prev = 0;
-            _context4.next = 3;
-            return mediaClient.getImage(id, params, undefined, undefined, traceContext);
-          case 3:
-            blob = _context4.sent;
-            return _context4.abrupt("return", {
-              dataURI: URL.createObjectURL(blob),
-              orientation: 1,
-              source: 'remote'
-            });
-          case 7:
-            _context4.prev = 7;
-            _context4.t0 = _context4["catch"](0);
-            throw new RemotePreviewError('remote-preview-fetch', _context4.t0 instanceof Error ? _context4.t0 : undefined);
-          case 10:
-          case "end":
-            return _context4.stop();
-        }
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          _context4.prev = 0;
+          _context4.next = 3;
+          return mediaClient.getImage(id, params, undefined, undefined, traceContext);
+        case 3:
+          blob = _context4.sent;
+          return _context4.abrupt("return", {
+            dataURI: URL.createObjectURL(blob),
+            orientation: 1,
+            source: 'remote'
+          });
+        case 7:
+          _context4.prev = 7;
+          _context4.t0 = _context4["catch"](0);
+          throw new RemotePreviewError('remote-preview-fetch', _context4.t0 instanceof Error ? _context4.t0 : undefined);
+        case 10:
+        case "end":
+          return _context4.stop();
       }
     }, _callee4, null, [[0, 7]]);
   }));