@atlaskit/media-card 72.0.0 → 72.1.0

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

@@ -146,6 +146,26 @@ var CardBase = /*#__PURE__*/function (_Component) {
         mediaBlobUrlAttrs: _this.getMediaBlobUrlAttrs(identifier, fileState)
       };
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setCacheSSRPreview", function (identifier) {
+      var _this$props3 = _this.props,
+          mediaClient = _this$props3.mediaClient,
+          _this$props3$dimensio = _this$props3.dimensions,
+          dimensions = _this$props3$dimensio === void 0 ? {} : _this$props3$dimensio;
+      (0, _getCardPreview.fetchAndCacheRemotePreview)(mediaClient, identifier.id, dimensions, _this.getImageURLParams(identifier), _this.getMediaBlobUrlAttrs(identifier)).catch(function () {// No need to log this error.
+        // If preview fails, it will be refetched later
+        //TODO: test this catch
+        // https://product-fabric.atlassian.net/browse/MEX-1071
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resolveSSRPreview", function (identifier, ssr) {
+      var mediaClient = _this.props.mediaClient;
+
+      try {
+        return (0, _getCardPreview.getSSRCardPreview)(ssr, mediaClient, identifier.id, _this.getImageURLParams(identifier), _this.getMediaBlobUrlAttrs(identifier));
+      } catch (e) {// TODO: log SSR reliability 'failed'
+        // https://product-fabric.atlassian.net/browse/MEX-770
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resolvePreview", /*#__PURE__*/function () {
       var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(identifier, fileState) {
         var params, cardPreview, wrappedError;
@@ -215,20 +235,31 @@ var CardBase = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageError", function () {
       var cardPreview = _this.state.cardPreview;
       var error = new _errors.ImageLoadError(cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source);
+      var isLocal = cardPreview && (0, _getCardPreview.isLocalPreview)(cardPreview);
+      var isSSR = cardPreview && (0, _getCardPreview.isSSRClientPreview)(cardPreview);
 
-      if (cardPreview !== null && cardPreview !== void 0 && cardPreview.source && ['local', 'cache-local'].includes(cardPreview.source)) {
-        var _this$props3 = _this.props,
-            identifier = _this$props3.identifier,
-            _this$props3$dimensio = _this$props3.dimensions,
-            dimensions = _this$props3$dimensio === void 0 ? {} : _this$props3$dimensio;
-        (0, _mediaClient.isFileIdentifier)(identifier) && (0, _getCardPreview.removeCardPreviewFromCache)(identifier.id, dimensions);
+      if (isLocal || isSSR) {
+        var updateState = {
+          cardPreview: undefined
+        };
 
-        _this.safeSetState({
-          cardPreview: undefined,
-          isBannedLocalPreview: true
-        });
+        if (isLocal) {
+          updateState.isBannedLocalPreview = true;
+
+          _this.fireLocalPreviewErrorEvent(error);
+        }
+
+        if (isSSR) {// TODO: set SSR-client reliability 'failed'.
+          // https://product-fabric.atlassian.net/browse/MEX-770
+        }
 
-        _this.fireLocalPreviewErrorEvent(error);
+        var _this$props4 = _this.props,
+            identifier = _this$props4.identifier,
+            _this$props4$dimensio = _this$props4.dimensions,
+            dimensions = _this$props4$dimensio === void 0 ? {} : _this$props4$dimensio;
+        (0, _mediaClient.isFileIdentifier)(identifier) && (0, _getCardPreview.removeCardPreviewFromCache)(identifier.id, dimensions);
+
+        _this.safeSetState(updateState);
       } else {
         _this.safeSetState({
           status: 'error',
@@ -276,10 +307,10 @@ var CardBase = /*#__PURE__*/function (_Component) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCardViewClick", function (event, analyticsEvent) {
-      var _this$props4 = _this.props,
-          identifier = _this$props4.identifier,
-          useInlinePlayer = _this$props4.useInlinePlayer,
-          shouldOpenMediaViewer = _this$props4.shouldOpenMediaViewer;
+      var _this$props5 = _this.props,
+          identifier = _this$props5.identifier,
+          useInlinePlayer = _this$props5.useInlinePlayer,
+          shouldOpenMediaViewer = _this$props5.shouldOpenMediaViewer;
       var cardPreview = _this.state.cardPreview;
 
       var _assertThisInitialize2 = (0, _assertThisInitialized2.default)(_this),
@@ -331,13 +362,13 @@ var CardBase = /*#__PURE__*/function (_Component) {
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderInlinePlayer", function () {
-      var _this$props5 = _this.props,
-          identifier = _this$props5.identifier,
-          mediaClient = _this$props5.mediaClient,
-          dimensions = _this$props5.dimensions,
-          selected = _this$props5.selected,
-          testId = _this$props5.testId,
-          originalDimensions = _this$props5.originalDimensions;
+      var _this$props6 = _this.props,
+          identifier = _this$props6.identifier,
+          mediaClient = _this$props6.mediaClient,
+          dimensions = _this$props6.dimensions,
+          selected = _this$props6.selected,
+          testId = _this$props6.testId,
+          originalDimensions = _this$props6.originalDimensions;
       return /*#__PURE__*/_react.default.createElement(_inlinePlayer.InlinePlayer, {
         mediaClient: mediaClient,
         dimensions: dimensions,
@@ -377,12 +408,12 @@ var CardBase = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMediaViewer", function () {
       var mediaViewerSelectedItem = _this.state.mediaViewerSelectedItem;
-      var _this$props6 = _this.props,
-          mediaClient = _this$props6.mediaClient,
-          identifier = _this$props6.identifier,
-          mediaViewerDataSource = _this$props6.mediaViewerDataSource,
-          contextId = _this$props6.contextId,
-          featureFlags = _this$props6.featureFlags;
+      var _this$props7 = _this.props,
+          mediaClient = _this$props7.mediaClient,
+          identifier = _this$props7.identifier,
+          mediaViewerDataSource = _this$props7.mediaViewerDataSource,
+          contextId = _this$props7.contextId,
+          featureFlags = _this$props7.featureFlags;
 
       if (!mediaViewerSelectedItem) {
         return;
@@ -403,20 +434,21 @@ var CardBase = /*#__PURE__*/function (_Component) {
       }), document.body);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCard", function () {
-      var _this$props7 = _this.props,
-          identifier = _this$props7.identifier,
-          isLazy = _this$props7.isLazy,
-          appearance = _this$props7.appearance,
-          resizeMode = _this$props7.resizeMode,
-          dimensions = _this$props7.dimensions,
-          selectable = _this$props7.selectable,
-          selected = _this$props7.selected,
-          disableOverlay = _this$props7.disableOverlay,
-          alt = _this$props7.alt,
-          testId = _this$props7.testId,
-          featureFlags = _this$props7.featureFlags,
-          titleBoxBgColor = _this$props7.titleBoxBgColor,
-          titleBoxIcon = _this$props7.titleBoxIcon;
+      var _this$props8 = _this.props,
+          identifier = _this$props8.identifier,
+          isLazy = _this$props8.isLazy,
+          appearance = _this$props8.appearance,
+          resizeMode = _this$props8.resizeMode,
+          dimensions = _this$props8.dimensions,
+          selectable = _this$props8.selectable,
+          selected = _this$props8.selected,
+          disableOverlay = _this$props8.disableOverlay,
+          alt = _this$props8.alt,
+          testId = _this$props8.testId,
+          featureFlags = _this$props8.featureFlags,
+          titleBoxBgColor = _this$props8.titleBoxBgColor,
+          titleBoxIcon = _this$props8.titleBoxIcon,
+          ssr = _this$props8.ssr;
       var mediaItemType = identifier.mediaItemType;
       var _this$state = _this.state,
           status = _this$state.status,
@@ -429,7 +461,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
       var dataURI = _this$state$cardPrevi.dataURI,
           orientation = _this$state$cardPrevi.orientation,
           error = _this$state.error,
-          cardRef = _this$state.cardRef;
+          cardRef = _this$state.cardRef,
+          isCardVisible = _this$state.isCardVisible;
 
       var _assertThisInitialize3 = (0, _assertThisInitialized2.default)(_this),
           metadata = _assertThisInitialize3.metadata;
@@ -438,7 +471,13 @@ var CardBase = /*#__PURE__*/function (_Component) {
           onCardViewClick = _assertThisInitialize4.onCardViewClick,
           onDisplayImage = _assertThisInitialize4.onDisplayImage,
           actions = _assertThisInitialize4.actions,
-          onMouseEnter = _assertThisInitialize4.onMouseEnter;
+          onMouseEnter = _assertThisInitialize4.onMouseEnter; // Card can be artificially turned visible before entering the viewport
+      // For example, when we have the image in cache
+
+
+      var nativeLazyLoad = isLazy && !isCardVisible; // Force Media Image to always display img for SSR
+
+      var forceSyncDisplay = !!ssr;
 
       var card = /*#__PURE__*/_react.default.createElement(_cardView.CardView, {
         status: status,
@@ -465,7 +504,9 @@ var CardBase = /*#__PURE__*/function (_Component) {
         titleBoxBgColor: titleBoxBgColor,
         titleBoxIcon: titleBoxIcon,
         onImageError: _this.onImageError,
-        onImageLoad: _this.onImageLoad
+        onImageLoad: _this.onImageLoad,
+        nativeLazyLoad: nativeLazyLoad,
+        forceSyncDisplay: forceSyncDisplay
       });
 
       return isLazy ? /*#__PURE__*/_react.default.createElement(_viewportDetector.ViewportDetector, {
@@ -510,14 +551,21 @@ var CardBase = /*#__PURE__*/function (_Component) {
 
     var _cardPreview;
 
-    var _this$props8 = _this.props,
-        _identifier = _this$props8.identifier,
-        _this$props8$dimensio = _this$props8.dimensions,
-        _dimensions = _this$props8$dimensio === void 0 ? {} : _this$props8$dimensio;
+    var _this$props9 = _this.props,
+        _identifier = _this$props9.identifier,
+        _this$props9$dimensio = _this$props9.dimensions,
+        _dimensions = _this$props9$dimensio === void 0 ? {} : _this$props9$dimensio,
+        _ssr = _this$props9.ssr;
 
     if ((0, _mediaClient.isFileIdentifier)(_identifier)) {
       var id = _identifier.id;
       _cardPreview = (0, _getCardPreview.getCardPreviewFromCache)(id, _dimensions);
+
+      if (!_cardPreview && _ssr) {
+        _this.fireCommencedEvent();
+
+        _cardPreview = _this.resolveSSRPreview(_identifier, _ssr);
+      }
     } else if ((0, _mediaClient.isExternalImageIdentifier)(_identifier)) {
       _this.fireCommencedEvent();
 
@@ -528,14 +576,17 @@ var CardBase = /*#__PURE__*/function (_Component) {
         orientation: 1,
         source: 'external'
       };
-    } //  If cardPreview is available from local cache, `isCardVisible`
-    //  should be true to avoid flickers during re-mount of the component
+    } // If cardPreview is available from local cache or external, `isCardVisible`
+    // should be true to avoid flickers during re-mount of the component
+    // should not be visible for SSR preview, otherwise we'll fire the metadata fetch from
+    // outside the viewport
+
 
+    var _isCardVisible = !_this.props.isLazy || !!_cardPreview && !(0, _getCardPreview.isSSRPreview)(_cardPreview);
 
-    var isCardVisible = _cardPreview ? true : !_this.props.isLazy;
     _this.state = {
       status: _status,
-      isCardVisible: isCardVisible,
+      isCardVisible: _isCardVisible,
       isPlayingFile: false,
       cardPreview: _cardPreview,
       cardRef: null,
@@ -549,11 +600,21 @@ var CardBase = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.hasBeenMounted = true;
-      var isCardVisible = this.state.isCardVisible;
-      var identifier = this.props.identifier;
+      var _this$state2 = this.state,
+          isCardVisible = _this$state2.isCardVisible,
+          cardPreview = _this$state2.cardPreview;
+      var _this$props10 = this.props,
+          identifier = _this$props10.identifier,
+          ssr = _this$props10.ssr;
 
       if (isCardVisible && (0, _mediaClient.isFileIdentifier)(identifier)) {
         this.updateStateForIdentifier(identifier);
+      }
+
+      if (isCardVisible && !!ssr && !!cardPreview && (0, _getCardPreview.isSSRClientPreview)(cardPreview) && (0, _mediaClient.isFileIdentifier)(identifier)) {
+        // Since the SSR preview brings the token in the query params,
+        // We need to fetch the remote preview to be able to cache it,
+        this.setCacheSSRPreview(identifier);
       } // we add a listener for each of the cards on the page
       // and then check if the triggered listener is from the card
       // that contains a div in current window.getSelection()
@@ -569,18 +630,18 @@ var CardBase = /*#__PURE__*/function (_Component) {
           prevIdentifier = prevProps.identifier,
           prevDimensions = prevProps.dimensions;
       var prevIsCardVisible = prevState.isCardVisible;
-      var _this$props9 = this.props,
-          mediaClient = _this$props9.mediaClient,
-          identifier = _this$props9.identifier,
-          dimensions = _this$props9.dimensions,
-          featureFlags = _this$props9.featureFlags;
-      var _this$state2 = this.state,
-          isCardVisible = _this$state2.isCardVisible,
-          cardPreview = _this$state2.cardPreview,
-          status = _this$state2.status,
-          fileState = _this$state2.fileState,
-          isBannedLocalPreview = _this$state2.isBannedLocalPreview,
-          previewDidRender = _this$state2.previewDidRender;
+      var _this$props11 = this.props,
+          mediaClient = _this$props11.mediaClient,
+          identifier = _this$props11.identifier,
+          dimensions = _this$props11.dimensions,
+          featureFlags = _this$props11.featureFlags;
+      var _this$state3 = this.state,
+          isCardVisible = _this$state3.isCardVisible,
+          cardPreview = _this$state3.cardPreview,
+          status = _this$state3.status,
+          fileState = _this$state3.fileState,
+          isBannedLocalPreview = _this$state3.isBannedLocalPreview,
+          previewDidRender = _this$state3.previewDidRender;
       var isDifferent = (0, _mediaClient.isDifferentIdentifier)(prevIdentifier, identifier);
       var turnedVisible = !prevIsCardVisible && isCardVisible;
       var isNewMediaClient = prevMediaClient !== mediaClient;
@@ -623,8 +684,14 @@ var CardBase = /*#__PURE__*/function (_Component) {
         this.resolvePreview(identifier, fileState);
       }
 
+      if (turnedVisible && this.props.ssr && !!cardPreview && (0, _getCardPreview.isSSRClientPreview)(cardPreview) && (0, _mediaClient.isFileIdentifier)(identifier)) {
+        // Since the SSR preview brings the token in the query params,
+        // We need to fetch the remote preview to be able to cache it,
+        this.setCacheSSRPreview(identifier);
+      }
+
       if (previewDidRender && // We should't complete if status is uploading
-      ['loading', 'loading-preview', 'processing'].includes(status)) {
+      ['loading-preview', 'processing'].includes(status)) {
         this.safeSetState({
           status: 'complete'
         });
@@ -680,7 +747,10 @@ var CardBase = /*#__PURE__*/function (_Component) {
     key: "requestedDimensions",
     get: function get() {
       var dimensions = this.props.dimensions;
-      var element = this.state.cardRef;
+
+      var _ref3 = this.state || {},
+          element = _ref3.cardRef;
+
       return (0, _getDataURIDimension.getRequestedDimensions)({
         dimensions: dimensions,
         element: element
@@ -689,23 +759,23 @@ var CardBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "metadata",
     get: function get() {
-      var _this$state3;
+      var _this$state4;
 
-      return (0, _metadata.getFileDetails)(this.props.identifier, (_this$state3 = this.state) === null || _this$state3 === void 0 ? void 0 : _this$state3.fileState);
+      return (0, _metadata.getFileDetails)(this.props.identifier, (_this$state4 = this.state) === null || _this$state4 === void 0 ? void 0 : _this$state4.fileState);
     }
   }, {
     key: "fileAttributes",
     get: function get() {
-      var _this$state4, _this$state4$fileStat;
+      var _this$state5, _this$state5$fileStat;
 
-      return (0, _analytics.getFileAttributes)(this.metadata, (_this$state4 = this.state) === null || _this$state4 === void 0 ? void 0 : (_this$state4$fileStat = _this$state4.fileState) === null || _this$state4$fileStat === void 0 ? void 0 : _this$state4$fileStat.status);
+      return (0, _analytics.getFileAttributes)(this.metadata, (_this$state5 = this.state) === null || _this$state5 === void 0 ? void 0 : (_this$state5$fileStat = _this$state5.fileState) === null || _this$state5$fileStat === void 0 ? void 0 : _this$state5$fileStat.status);
     }
   }, {
     key: "fireOperationalEvent",
     value: function fireOperationalEvent() {
-      var _this$state5 = this.state,
-          status = _this$state5.status,
-          error = _this$state5.error;
+      var _this$state6 = this.state,
+          status = _this$state6.status,
+          error = _this$state6.error;
       var createAnalyticsEvent = this.props.createAnalyticsEvent;
       createAnalyticsEvent && (0, _cardAnalytics.fireOperationalEvent)(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), error);
     }
@@ -725,11 +795,11 @@ var CardBase = /*#__PURE__*/function (_Component) {
     get: function get() {
       var _this3 = this;
 
-      var _this$props10 = this.props,
-          _this$props10$actions = _this$props10.actions,
-          actions = _this$props10$actions === void 0 ? [] : _this$props10$actions,
-          identifier = _this$props10.identifier,
-          shouldEnableDownloadButton = _this$props10.shouldEnableDownloadButton;
+      var _this$props12 = this.props,
+          _this$props12$actions = _this$props12.actions,
+          actions = _this$props12$actions === void 0 ? [] : _this$props12$actions,
+          identifier = _this$props12.identifier,
+          shouldEnableDownloadButton = _this$props12.shouldEnableDownloadButton;
       var status = this.state.status;
       var metadata = this.metadata;
 
@@ -751,9 +821,9 @@ var CardBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$state6 = this.state,
-          isPlayingFile = _this$state6.isPlayingFile,
-          mediaViewerSelectedItem = _this$state6.mediaViewerSelectedItem;
+      var _this$state7 = this.state,
+          isPlayingFile = _this$state7.isPlayingFile,
+          mediaViewerSelectedItem = _this$state7.mediaViewerSelectedItem;
 
       var innerContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isPlayingFile ? this.renderInlinePlayer() : this.renderCard(), mediaViewerSelectedItem ? this.renderMediaViewer() : null);
 

package/dist/cjs/root/cardView.js

@@ -51,8 +51,6 @@ var _mediaUi = require("@atlaskit/media-ui");
 
 var _styled2 = require("./ui/styled");
 
-var _styledSSR = require("./ui/styledSSR");
-
 var _imageRenderer = require("./ui/imageRenderer/imageRenderer");
 
 var _titleBox = require("./ui/titleBox/titleBox");
@@ -178,11 +176,9 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
       var shouldUsePointerCursor = status !== 'error' && status !== 'failed-processing';
       var shouldDisplayBackground = !dataURI || !disableOverlay || status === 'error' || status === 'failed-processing';
       var isPlayButtonClickable = !!(_this.shouldRenderPlayButton() && disableOverlay);
-      var isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Make tooltip optional for media singles - images, videos.
-      // Intention is to show full file name when it's truncate in titlebox,
-      // and to hide it when no titlebox exists.
+      var isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Disable tooltip for Media Single
 
-      var shouldDisplayTooltip = !!name && !disableOverlay;
+      var shouldDisplayTooltip = !disableOverlay;
       return /*#__PURE__*/_react.default.createElement(_styled2.NewFileExperienceWrapper, {
         className: _cardConstants.newFileExperienceClassName,
         "data-testid": testId || 'media-card-view',
@@ -308,40 +304,29 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           });
 
           var iconMessage;
+          var customTitleMessage;
 
-          if (!!metadata) {
-            if (error) {
-              var secondaryError = error.secondaryError;
-
-              if ((0, _mediaClient.isRateLimitedError)(secondaryError) || secondaryError && (0, _mediaClient.isPollingError)(secondaryError)) {
-                iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage.PreviewCurrentlyUnavailable, null);
-              }
-            } else if (!isZeroSize) {
-              iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage.PreviewUnavailable, null);
-            }
-          } else if (!!disableOverlay) {
-            iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage.FailedToLoad, null);
-          }
-
-          if (error && (0, _errors.isUploadError)(error)) {
-            if (!disableOverlay) {
-              return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
-                renderFailedTitleBox: true,
-                customTitleMessage: _mediaUi.messages.failed_to_upload
-              });
-            }
+          var _ref4 = error || {},
+              secondaryError = _ref4.secondaryError;
 
-            return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
-              renderTitleBox: !metadata && !!name,
-              iconMessage: /*#__PURE__*/_react.default.createElement(_iconMessage.FailedToUpload, null)
-            });
+          if ((0, _mediaClient.isRateLimitedError)(secondaryError) || (0, _mediaClient.isPollingError)(secondaryError)) {
+            iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage.PreviewCurrentlyUnavailable, null);
+          } else if ((0, _errors.isUploadError)(error)) {
+            iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage.FailedToUpload, null);
+            customTitleMessage = _mediaUi.messages.failed_to_upload;
+          } else if (!metadata) {
+            iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage.FailedToLoad, null);
+          } else {
+            iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage.PreviewUnavailable, null);
           }
 
           if (!disableOverlay) {
+            var renderFailedTitleBox = !name || !!customTitleMessage;
             return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
-              renderTitleBox: !!name,
-              renderFailedTitleBox: !metadata,
-              iconMessage: iconMessage
+              renderTitleBox: !!name && !customTitleMessage,
+              renderFailedTitleBox: renderFailedTitleBox,
+              iconMessage: !renderFailedTitleBox ? iconMessage : undefined,
+              customTitleMessage: customTitleMessage
             });
           }
 
@@ -379,11 +364,11 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           status = _this$props4.status,
           metadata = _this$props4.metadata;
 
-      var _ref4 = metadata || {},
-          name = _ref4.name;
+      var _ref5 = metadata || {},
+          name = _ref5.name;
 
       var hasTitleBox = !!renderTitleBox || !!renderFailedTitleBox;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styledSSR.CardImageContainer, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled2.CardImageContainer, {
         className: "media-file-card-view",
         "data-testid": "media-file-card-view",
         "data-test-media-name": name,
@@ -404,8 +389,8 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(_ref5) {
-      var prevDataURI = _ref5.dataURI;
+    value: function componentDidUpdate(_ref6) {
+      var prevDataURI = _ref6.dataURI;
       var dataURI = this.props.dataURI; // We should only switch didImageRender to false
       // when dataURI goes undefined, not when it is updated.
       // as this method could be triggered after onImageLoad callback,
@@ -426,10 +411,10 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
         return elementWidth;
       }
 
-      var _ref6 = this.props.dimensions || {
+      var _ref7 = this.props.dimensions || {
         width: undefined
       },
-          width = _ref6.width;
+          width = _ref7.width;
 
       if (!width) {
         return _cardDimensions.defaultImageCardDimensions.width;
@@ -441,7 +426,7 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     key: "breakpoint",
     get: function get() {
       var width = this.state.elementWidth || (this.props.dimensions ? this.props.dimensions.width : '') || _cardDimensions.defaultImageCardDimensions.width;
-      return (0, _styledSSR.calcBreakpointSize)(parseInt("".concat(width), 10));
+      return (0, _styled2.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.
 
@@ -486,8 +471,8 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           metadata = _this$props6.metadata,
           dataURI = _this$props6.dataURI;
 
-      var _ref7 = metadata || {},
-          mediaType = _ref7.mediaType;
+      var _ref8 = metadata || {},
+          mediaType = _ref8.mediaType;
 
       if (mediaType !== 'video' || !dataURI) {
         return false;
@@ -520,9 +505,9 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           titleBoxBgColor = _this$props7.titleBoxBgColor,
           titleBoxIcon = _this$props7.titleBoxIcon;
 
-      var _ref8 = metadata || {},
-          name = _ref8.name,
-          createdAt = _ref8.createdAt;
+      var _ref9 = metadata || {},
+          name = _ref9.name,
+          createdAt = _ref9.createdAt;
 
       return !!name && /*#__PURE__*/_react.default.createElement(_titleBox.TitleBox, {
         name: name,
@@ -563,17 +548,19 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           alt = _this$props8.alt,
           resizeMode = _this$props8.resizeMode,
           onDisplayImage = _this$props8.onDisplayImage,
-          mediaItemType = _this$props8.mediaItemType;
+          nativeLazyLoad = _this$props8.nativeLazyLoad,
+          forceSyncDisplay = _this$props8.forceSyncDisplay;
       return !!dataURI && /*#__PURE__*/_react.default.createElement(_imageRenderer.ImageRenderer, {
         dataURI: dataURI,
         mediaType: mediaType,
-        mediaItemType: mediaItemType,
         previewOrientation: previewOrientation,
         alt: alt,
         resizeMode: resizeMode,
         onDisplayImage: onDisplayImage,
         onImageLoad: this.onImageLoad,
-        onImageError: this.onImageError
+        onImageError: this.onImageError,
+        nativeLazyLoad: nativeLazyLoad,
+        forceSyncDisplay: forceSyncDisplay
       });
     }
   }, {
@@ -589,10 +576,10 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     value: function renderMediaTypeIcon(hasTitleBox, iconMessage) {
       var metadata = this.props.metadata;
 
-      var _ref9 = metadata || {},
-          mediaType = _ref9.mediaType,
-          mimeType = _ref9.mimeType,
-          name = _ref9.name;
+      var _ref10 = metadata || {},
+          mediaType = _ref10.mediaType,
+          mimeType = _ref10.mimeType,
+          name = _ref10.name;
 
       return /*#__PURE__*/_react.default.createElement(_styled4.IconWrapper, {
         breakpoint: this.breakpoint,

package/dist/cjs/root/inline/mediaInlineCard.js

@@ -102,31 +102,36 @@ var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
 
   if (!fileState) {
     return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardLoadingView, {
-      message: intl.formatMessage(_mediaUi.messages.loading_file)
+      message: intl.formatMessage(_mediaUi.messages.loading_file),
+      isSelected: isSelected
     });
   }
 
   if (isErrored) {
     return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
-      message: intl.formatMessage(_mediaUi.messages.couldnt_load_file)
+      message: intl.formatMessage(_mediaUi.messages.couldnt_load_file),
+      isSelected: isSelected
     });
   }
 
   if (fileState.status === 'error') {
     return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
-      message: fileState.message || ''
+      message: fileState.message || '',
+      isSelected: isSelected
     });
   }
 
   if (fileState.status === 'failed-processing') {
     return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
-      message: intl.formatMessage(_mediaUi.messages.couldnt_load_file)
+      message: intl.formatMessage(_mediaUi.messages.couldnt_load_file),
+      isSelected: isSelected
     });
   }
 
   if (fileState.status === 'uploading') {
     return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardLoadingView, {
-      message: fileState.name
+      message: fileState.name,
+      isSelected: isSelected
     });
   }
 

package/dist/cjs/root/ui/common.js

@@ -5,22 +5,28 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTitleBoxHeight = exports.responsiveSettings = void 0;
+exports.getTitleBoxHeight = exports.responsiveSettings = exports.Breakpoint = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _Breakpoint = require("./Breakpoint");
-
 var _responsiveSettings;
 
-var responsiveSettings = (_responsiveSettings = {}, (0, _defineProperty2.default)(_responsiveSettings, _Breakpoint.Breakpoint.SMALL, {
+var Breakpoint;
+exports.Breakpoint = Breakpoint;
+
+(function (Breakpoint) {
+  Breakpoint["SMALL"] = "small";
+  Breakpoint["LARGE"] = "large";
+})(Breakpoint || (exports.Breakpoint = Breakpoint = {}));
+
+var responsiveSettings = (_responsiveSettings = {}, (0, _defineProperty2.default)(_responsiveSettings, Breakpoint.SMALL, {
   fontSize: 11,
   lineHeight: 14,
   titleBox: {
     verticalPadding: 4,
     horizontalPadding: 8
   }
-}), (0, _defineProperty2.default)(_responsiveSettings, _Breakpoint.Breakpoint.LARGE, {
+}), (0, _defineProperty2.default)(_responsiveSettings, Breakpoint.LARGE, {
   fontSize: 14,
   lineHeight: 22,
   titleBox: {