@atlaskit/media-card 72.0.0 → 72.1.0

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

@@ -29,7 +29,7 @@ import { IntlProvider, intlShape } from 'react-intl';
 import { CardView } from '../cardView';
 import { ViewportDetector } from '../../utils/viewportDetector';
 import { getRequestedDimensions } from '../../utils/getDataURIDimension';
-import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview } from './getCardPreview';
+import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview, getSSRCardPreview, isLocalPreview, isSSRPreview, isSSRClientPreview, fetchAndCacheRemotePreview } from './getCardPreview';
 import { getFileDetails } from '../../utils/metadata';
 import { InlinePlayer } from '../inlinePlayer';
 import { getFileAttributes } from '../../utils/analytics';
@@ -109,6 +109,28 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       };
     });
 
+    _defineProperty(_assertThisInitialized(_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;
+      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
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "resolveSSRPreview", function (identifier, ssr) {
+      var mediaClient = _this.props.mediaClient;
+
+      try {
+        return 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
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "resolvePreview", /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(identifier, fileState) {
         var params, cardPreview, wrappedError;
@@ -180,20 +202,31 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "onImageError", function () {
       var cardPreview = _this.state.cardPreview;
       var error = new ImageLoadError(cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source);
+      var isLocal = cardPreview && isLocalPreview(cardPreview);
+      var isSSR = cardPreview && 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;
-        isFileIdentifier(identifier) && 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);
+          _this.fireLocalPreviewErrorEvent(error);
+        }
+
+        if (isSSR) {// TODO: set SSR-client reliability 'failed'.
+          // https://product-fabric.atlassian.net/browse/MEX-770
+        }
+
+        var _this$props4 = _this.props,
+            identifier = _this$props4.identifier,
+            _this$props4$dimensio = _this$props4.dimensions,
+            dimensions = _this$props4$dimensio === void 0 ? {} : _this$props4$dimensio;
+        isFileIdentifier(identifier) && removeCardPreviewFromCache(identifier.id, dimensions);
+
+        _this.safeSetState(updateState);
       } else {
         _this.safeSetState({
           status: 'error',
@@ -248,10 +281,10 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_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 = _assertThisInitialized(_this),
@@ -306,13 +339,13 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_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.createElement(InlinePlayer, {
         mediaClient: mediaClient,
         dimensions: dimensions,
@@ -355,12 +388,12 @@ export var CardBase = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_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;
@@ -382,20 +415,21 @@ export var CardBase = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_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,
@@ -408,7 +442,8 @@ export 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 = _assertThisInitialized(_this),
           metadata = _assertThisInitialize3.metadata;
@@ -417,8 +452,13 @@ export 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.createElement(CardView, {
         status: status,
         error: error,
@@ -444,7 +484,9 @@ export 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.createElement(ViewportDetector, {
         targetRef: cardRef,
@@ -492,14 +534,21 @@ export 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 (isFileIdentifier(_identifier)) {
       var id = _identifier.id;
       _cardPreview = getCardPreviewFromCache(id, _dimensions);
+
+      if (!_cardPreview && _ssr) {
+        _this.fireCommencedEvent();
+
+        _cardPreview = _this.resolveSSRPreview(_identifier, _ssr);
+      }
     } else if (isExternalImageIdentifier(_identifier)) {
       _this.fireCommencedEvent();
 
@@ -510,14 +559,17 @@ export 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 && !isSSRPreview(_cardPreview);
 
-    var isCardVisible = _cardPreview ? true : !_this.props.isLazy;
     _this.state = {
       status: _status,
-      isCardVisible: isCardVisible,
+      isCardVisible: _isCardVisible,
       isPlayingFile: false,
       cardPreview: _cardPreview,
       cardRef: null,
@@ -531,11 +583,21 @@ export 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 && isFileIdentifier(identifier)) {
         this.updateStateForIdentifier(identifier);
+      }
+
+      if (isCardVisible && !!ssr && !!cardPreview && isSSRClientPreview(cardPreview) && 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()
@@ -551,18 +613,18 @@ export 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 = isDifferentIdentifier(prevIdentifier, identifier);
       var turnedVisible = !prevIsCardVisible && isCardVisible;
       var isNewMediaClient = prevMediaClient !== mediaClient;
@@ -605,8 +667,14 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         this.resolvePreview(identifier, fileState);
       }
 
+      if (turnedVisible && this.props.ssr && !!cardPreview && isSSRClientPreview(cardPreview) && 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'
         });
@@ -662,7 +730,10 @@ export 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 getRequestedDimensions({
         dimensions: dimensions,
         element: element
@@ -671,23 +742,23 @@ export var CardBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "metadata",
     get: function get() {
-      var _this$state3;
+      var _this$state4;
 
-      return getFileDetails(this.props.identifier, (_this$state3 = this.state) === null || _this$state3 === void 0 ? void 0 : _this$state3.fileState);
+      return 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 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 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 && _fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), error);
     }
@@ -707,11 +778,11 @@ export 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;
 
@@ -733,9 +804,9 @@ export 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.createElement(React.Fragment, null, isPlayingFile ? this.renderInlinePlayer() : this.renderCard(), mediaViewerSelectedItem ? this.renderMediaViewer() : null);
       return this.context.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
         locale: "en"

package/dist/esm/root/cardView.js

@@ -28,8 +28,7 @@ import { createAndFireMediaCardEvent } from '../utils/analytics';
 import { attachDetailsToActions } from '../actions';
 import { getErrorMessage } from '../utils/getErrorMessage';
 import { toHumanReadableMediaSize, messages } from '@atlaskit/media-ui';
-import { NewFileExperienceWrapper } from './ui/styled';
-import { CardImageContainer, calcBreakpointSize } from './ui/styledSSR';
+import { NewFileExperienceWrapper, CardImageContainer, calcBreakpointSize } from './ui/styled';
 import { ImageRenderer } from './ui/imageRenderer/imageRenderer';
 import { TitleBox } from './ui/titleBox/titleBox';
 import { FailedTitleBox } from './ui/titleBox/failedTitleBox';
@@ -138,11 +137,9 @@ export 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.createElement(NewFileExperienceWrapper, {
         className: newFileExperienceClassName,
         "data-testid": testId || 'media-card-view',
@@ -270,40 +267,29 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
           });
 
           var iconMessage;
+          var customTitleMessage;
 
-          if (!!metadata) {
-            if (error) {
-              var secondaryError = error.secondaryError;
-
-              if (isRateLimitedError(secondaryError) || secondaryError && isPollingError(secondaryError)) {
-                iconMessage = /*#__PURE__*/React.createElement(PreviewCurrentlyUnavailable, null);
-              }
-            } else if (!isZeroSize) {
-              iconMessage = /*#__PURE__*/React.createElement(PreviewUnavailable, null);
-            }
-          } else if (!!disableOverlay) {
-            iconMessage = /*#__PURE__*/React.createElement(FailedToLoad, null);
-          }
-
-          if (error && isUploadError(error)) {
-            if (!disableOverlay) {
-              return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
-                renderFailedTitleBox: true,
-                customTitleMessage: messages.failed_to_upload
-              });
-            }
+          var _ref4 = error || {},
+              secondaryError = _ref4.secondaryError;
 
-            return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
-              renderTitleBox: !metadata && !!name,
-              iconMessage: /*#__PURE__*/React.createElement(FailedToUpload, null)
-            });
+          if (isRateLimitedError(secondaryError) || isPollingError(secondaryError)) {
+            iconMessage = /*#__PURE__*/React.createElement(PreviewCurrentlyUnavailable, null);
+          } else if (isUploadError(error)) {
+            iconMessage = /*#__PURE__*/React.createElement(FailedToUpload, null);
+            customTitleMessage = messages.failed_to_upload;
+          } else if (!metadata) {
+            iconMessage = /*#__PURE__*/React.createElement(FailedToLoad, null);
+          } else {
+            iconMessage = /*#__PURE__*/React.createElement(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
             });
           }
 
@@ -342,8 +328,8 @@ export 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardImageContainer, {
@@ -368,8 +354,8 @@ export 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,
@@ -390,10 +376,10 @@ export 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 defaultImageCardDimensions.width;
@@ -450,8 +436,8 @@ export 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;
@@ -484,9 +470,9 @@ export 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.createElement(TitleBox, {
         name: name,
@@ -527,17 +513,19 @@ export 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.createElement(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
       });
     }
   }, {
@@ -553,10 +541,10 @@ export 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.createElement(IconWrapper, {
         breakpoint: this.breakpoint,

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

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

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

@@ -2,7 +2,13 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 var _responsiveSettings;
 
-import { Breakpoint } from './Breakpoint';
+export var Breakpoint;
+
+(function (Breakpoint) {
+  Breakpoint["SMALL"] = "small";
+  Breakpoint["LARGE"] = "large";
+})(Breakpoint || (Breakpoint = {}));
+
 export var responsiveSettings = (_responsiveSettings = {}, _defineProperty(_responsiveSettings, Breakpoint.SMALL, {
   fontSize: 11,
   lineHeight: 14,

package/dist/esm/root/ui/imageRenderer/imageRenderer.js

@@ -10,7 +10,9 @@ export var ImageRenderer = function ImageRenderer(_ref) {
       onImageLoad = _ref.onImageLoad,
       onImageError = _ref.onImageError,
       onDisplayImage = _ref.onDisplayImage,
-      mediaType = _ref.mediaType;
+      mediaType = _ref.mediaType,
+      nativeLazyLoad = _ref.nativeLazyLoad,
+      forceSyncDisplay = _ref.forceSyncDisplay;
   useEffect(function () {
     // TODO: trigger accordingly with the succeeded event. This could be a breaking change
     if (mediaType === 'image' && onDisplayImage) {
@@ -22,6 +24,8 @@ export var ImageRenderer = function ImageRenderer(_ref) {
     alt: alt,
     previewOrientation: previewOrientation,
     onImageLoad: onImageLoad,
-    onImageError: onImageError
+    onImageError: onImageError,
+    loading: nativeLazyLoad ? 'lazy' : undefined,
+    forceSyncDisplay: forceSyncDisplay
   }, resizeModeToMediaImageProps(resizeMode)));
 };

package/dist/esm/root/ui/loadingRateLimited/loadingRateLimited.js

@@ -3,7 +3,7 @@ import { errorIcon } from '@atlaskit/media-ui/errorIcon';
 import { WarningIconWrapper, LoadingRateLimitedContainer, CouldntLoadWrapper, ErrorWrapper, LoadingRateLimitedTextWrapper } from './styled';
 import { messages } from '@atlaskit/media-ui';
 import { FormattedMessage } from 'react-intl';
-import { Breakpoint } from '../Breakpoint';
+import { Breakpoint } from '../common';
 export var LoadingRateLimited = function LoadingRateLimited(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
       breakpoint = _ref$breakpoint === void 0 ? Breakpoint.SMALL : _ref$breakpoint,