@atlaskit/media-card 72.0.0 → 72.1.0

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

@@ -29,7 +29,9 @@ 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;
   (0, _react.useEffect)(function () {
     // TODO: trigger accordingly with the succeeded event. This could be a breaking change
     if (mediaType === 'image' && onDisplayImage) {
@@ -41,7 +43,9 @@ var ImageRenderer = function ImageRenderer(_ref) {
     alt: alt,
     previewOrientation: previewOrientation,
     onImageLoad: onImageLoad,
-    onImageError: onImageError
+    onImageError: onImageError,
+    loading: nativeLazyLoad ? 'lazy' : undefined,
+    forceSyncDisplay: forceSyncDisplay
   }, (0, _resizeModeToMediaImageProps.resizeModeToMediaImageProps)(resizeMode)));
 };
 

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

@@ -17,11 +17,11 @@ var _mediaUi = require("@atlaskit/media-ui");
 
 var _reactIntl = require("react-intl");
 
-var _Breakpoint = require("../Breakpoint");
+var _common = require("../common");
 
 var LoadingRateLimited = function LoadingRateLimited(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
-      breakpoint = _ref$breakpoint === void 0 ? _Breakpoint.Breakpoint.SMALL : _ref$breakpoint,
+      breakpoint = _ref$breakpoint === void 0 ? _common.Breakpoint.SMALL : _ref$breakpoint,
       _ref$positionBottom = _ref.positionBottom,
       positionBottom = _ref$positionBottom === void 0 ? true : _ref$positionBottom;
   return /*#__PURE__*/_react.default.createElement(_styled.LoadingRateLimitedContainer, null, /*#__PURE__*/_react.default.createElement(_styled.WarningIconWrapper, null, _errorIcon.errorIcon), /*#__PURE__*/_react.default.createElement(_styled.LoadingRateLimitedTextWrapper, {

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

@@ -11,12 +11,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styled = require("./styled");
 
-var _Breakpoint = require("../Breakpoint");
+var _common = require("../common");
 
 var ProgressBar = function ProgressBar(_ref) {
   var progress = _ref.progress,
       _ref$breakpoint = _ref.breakpoint,
-      breakpoint = _ref$breakpoint === void 0 ? _Breakpoint.Breakpoint.SMALL : _ref$breakpoint,
+      breakpoint = _ref$breakpoint === void 0 ? _common.Breakpoint.SMALL : _ref$breakpoint,
       _ref$positionBottom = _ref.positionBottom,
       positionBottom = _ref$positionBottom === void 0 ? false : _ref$positionBottom;
   var normalizedProgress = Math.min(1, Math.max(0, progress || 0)) * 100;

package/dist/cjs/root/ui/progressBar/styled.js

@@ -20,8 +20,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _common = require("../common");
 
-var _Breakpoint = require("../Breakpoint");
-
 var _templateObject;
 
 var height = 3;
@@ -39,7 +37,7 @@ var largeSizeSettings = {
 
 function generateResponsiveStyles(breakpoint, positionBottom) {
   var multiplier = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-  var setting = breakpoint === _Breakpoint.Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
+  var setting = breakpoint === _common.Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
   var marginPositionBottom = _common.responsiveSettings[breakpoint].titleBox.verticalPadding;
   var marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : (0, _common.getTitleBoxHeight)(breakpoint));
   return "\n    bottom: ".concat(marginBottom, "px\n  ");

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

@@ -5,38 +5,91 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NewFileExperienceWrapper = void 0;
+exports.CardImageContainer = exports.NewFileExperienceWrapper = exports.calcBreakpointSize = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _getCSSUnitValue = require("../../utils/getCSSUnitValue");
 
 var _cardDimensions = require("../../utils/cardDimensions");
 
+var _constants = require("@atlaskit/theme/constants");
+
+var _mediaUi = require("@atlaskit/media-ui");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _consts = require("@atlaskit/editor-shared-styles/consts");
+
 var _selection = require("@atlaskit/editor-shared-styles/selection");
 
+var _styles = require("../../styles");
+
 var _styled = require("./tickBox/styled");
 
-var _styled2 = require("./actionsBar/styled");
+var _styled2 = require("./blanket/styled");
 
-var _styled3 = require("./playButton/styled");
+var _styled3 = require("./actionsBar/styled");
 
-var _styledSSR = require("./styledSSR");
+var _styled4 = require("./playButton/styled");
 
-var _templateObject;
+var _common = require("./common");
+
+var _templateObject, _templateObject2;
+
+var breakpointSizes = [[_common.Breakpoint.SMALL, 599], [_common.Breakpoint.LARGE, Infinity]];
+
+var calcBreakpointSize = function calcBreakpointSize() {
+  var wrapperWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+
+  var _ref = breakpointSizes.find(function (_ref3) {
+    var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+        _breakpoint = _ref4[0],
+        limit = _ref4[1];
+
+    return wrapperWidth <= limit;
+  }) || [_common.Breakpoint.SMALL],
+      _ref2 = (0, _slicedToArray2.default)(_ref, 1),
+      breakpoint = _ref2[0];
+
+  return breakpoint;
+};
+
+exports.calcBreakpointSize = calcBreakpointSize;
+
+var generateResponsiveStyles = function generateResponsiveStyles() {
+  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _common.Breakpoint.SMALL;
+  var setting = _common.responsiveSettings[breakpoint];
+  return "\n    font-size: ".concat(setting.fontSize, "px;\n    line-height: ").concat(setting.lineHeight, "px;\n  ");
+};
 
 var getWrapperDimensions = function getWrapperDimensions(dimensions, appearance) {
-  var _ref = dimensions || {},
-      width = _ref.width,
-      height = _ref.height;
+  var _ref5 = dimensions || {},
+      width = _ref5.width,
+      height = _ref5.height;
 
   var _getDefaultCardDimens = (0, _cardDimensions.getDefaultCardDimensions)(appearance),
       defaultWidth = _getDefaultCardDimens.width,
       defaultHeight = _getDefaultCardDimens.height;
 
   return "\n    width: ".concat((0, _getCSSUnitValue.getCSSUnitValue)(width || defaultWidth), ";\n    max-width: 100%;\n    height: ").concat((0, _getCSSUnitValue.getCSSUnitValue)(height || defaultHeight), ";\n    max-height: 100%;\n  ");
+}; // This is a trick to simulate the blue border without affecting the dimensions.
+// CSS outline has no 'radius', therefore we can't achieve the same effect with it
+
+
+var getWrapperShadow = function getWrapperShadow(disableOverlay, selected) {
+  var withOverlayShadow = !disableOverlay ? "0 1px 1px ".concat(_colors.N60A, ", 0 0 1px 0 ").concat(_colors.N60A) : '';
+  var selectedShadow = selected ? _consts.akEditorSelectedBoxShadow : '';
+  var shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
+  return shadow ? "box-shadow: ".concat(shadow, ";") : '';
+};
+
+var getCursorStyle = function getCursorStyle(shouldUsePointerCursor) {
+  return "cursor: ".concat(shouldUsePointerCursor ? 'pointer' : 'default', ";");
 };
 
 var getClickablePlayButtonStyles = function getClickablePlayButtonStyles(isPlayButtonClickable) {
@@ -44,7 +97,7 @@ var getClickablePlayButtonStyles = function getClickablePlayButtonStyles(isPlayB
     return '';
   }
 
-  return "\n    &:hover .".concat(_styled3.playButtonClassName, " {\n      ").concat(_styled3.fixedPlayButtonStyles, "\n    }\n  ");
+  return "\n    &:hover .".concat(_styled4.playButtonClassName, " {\n      ").concat(_styled4.fixedPlayButtonStyles, "\n    }\n  ");
 };
 
 var getSelectableTickBoxStyles = function getSelectableTickBoxStyles(isTickBoxSelectable) {
@@ -55,13 +108,23 @@ var getSelectableTickBoxStyles = function getSelectableTickBoxStyles(isTickBoxSe
   return "\n    &:hover .".concat(_styled.tickBoxClassName, " {\n      ").concat(_styled.tickboxFixedStyles, "\n    }\n  ");
 };
 
-var NewFileExperienceWrapper = (0, _styledComponents.default)(_styledSSR.SSRFileExperienceWrapper)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref2) {
-  var dimensions = _ref2.dimensions,
-      appearance = _ref2.appearance,
-      isPlayButtonClickable = _ref2.isPlayButtonClickable,
-      isTickBoxSelectable = _ref2.isTickBoxSelectable,
-      shouldDisplayTooltip = _ref2.shouldDisplayTooltip;
-  return "\n    ".concat(_selection.hideNativeBrowserTextSelectionStyles, "\n\n    /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n    ").concat(getClickablePlayButtonStyles(isPlayButtonClickable), "\n    ").concat(getSelectableTickBoxStyles(isTickBoxSelectable), "\n\n    &:hover .").concat(_styled2.actionsBarClassName, " {\n      ").concat(_styled2.fixedActionBarStyles, "\n    }\n\n    /* Tooltip does not support percentage dimensions. We enforce them here */\n    ").concat(shouldDisplayTooltip ? "> div { ".concat(getWrapperDimensions(dimensions, appearance), " }") : '', "\n");
+var NewFileExperienceWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref6) {
+  var breakpoint = _ref6.breakpoint,
+      dimensions = _ref6.dimensions,
+      appearance = _ref6.appearance,
+      shouldUsePointerCursor = _ref6.shouldUsePointerCursor,
+      disableOverlay = _ref6.disableOverlay,
+      displayBackground = _ref6.displayBackground,
+      selected = _ref6.selected,
+      isPlayButtonClickable = _ref6.isPlayButtonClickable,
+      isTickBoxSelectable = _ref6.isTickBoxSelectable,
+      shouldDisplayTooltip = _ref6.shouldDisplayTooltip;
+  return "\n    ".concat((0, _styles.transition)(), "\n    box-sizing: border-box;\n    * {\n      box-sizing: border-box;\n    }\n    position: relative;\n    font-family: ").concat((0, _constants.fontFamily)(), ";\n    ").concat(getWrapperDimensions(dimensions, appearance), "\n    ").concat(displayBackground ? "background-color: ".concat(_colors.N20, ";") : '', "\n    ").concat(_mediaUi.borderRadius, "\n    ").concat(getCursorStyle(shouldUsePointerCursor), "\n    ").concat(getWrapperShadow(disableOverlay, selected), "\n    ").concat(generateResponsiveStyles(breakpoint), "\n    ").concat(_selection.hideNativeBrowserTextSelectionStyles, "\n\n    /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n    ").concat(getClickablePlayButtonStyles(isPlayButtonClickable), "\n    ").concat(getSelectableTickBoxStyles(isTickBoxSelectable), "\n    &:hover .").concat(_styled2.blanketClassName, " {\n      ").concat(_styled2.fixedBlanketStyles, "\n    }\n\n    &:hover .").concat(_styled3.actionsBarClassName, " {\n      ").concat(_styled3.fixedActionBarStyles, "\n    }\n\n    /* Tooltip does not support percentage dimensions. We enforce them here */\n    ").concat(shouldDisplayTooltip ? "> div { ".concat(getWrapperDimensions(dimensions, appearance), " }") : '', "\n");
 });
+
 exports.NewFileExperienceWrapper = NewFileExperienceWrapper;
-NewFileExperienceWrapper.displayName = 'NewFileExperienceWrapper';
+NewFileExperienceWrapper.displayName = 'NewFileExperienceWrapper';
+
+var CardImageContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  max-width: 100%;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), _mediaUi.borderRadius);
+
+exports.CardImageContainer = CardImageContainer;

package/dist/cjs/root/ui/titleBox/styled.js

@@ -13,8 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _common = require("../common");
 
-var _Breakpoint = require("../Breakpoint");
-
 var _colors = require("@atlaskit/theme/colors");
 
 var _mixins = require("../../../styles/mixins");
@@ -22,7 +20,7 @@ var _mixins = require("../../../styles/mixins");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 var generateResponsiveStyles = function generateResponsiveStyles() {
-  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _Breakpoint.Breakpoint.SMALL;
+  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _common.Breakpoint.SMALL;
   var setting = _common.responsiveSettings[breakpoint];
   var verticalPadding = setting.titleBox.verticalPadding;
   var horizontalPadding = setting.titleBox.horizontalPadding;

package/dist/cjs/utils/cardActions/cardActionsDropdownMenu.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CardActionsDropdownMenu = void 0;
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -103,16 +105,21 @@ var CardActionsDropdownMenu = /*#__PURE__*/function (_Component) {
 
       if (actions.length > 0) {
         return /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
-          "data-testid": "media-card-actions-menu",
+          testId: "media-card-actions-menu",
           onOpenChange: onOpenChange,
-          trigger: /*#__PURE__*/_react.default.createElement(CardActionButtonWithAnalytics, {
-            variant: triggerVariant,
-            style: {
-              color: triggerColor
-            }
-          }, /*#__PURE__*/_react.default.createElement(_more.default, {
-            label: "more"
-          }))
+          trigger: function trigger(_ref) {
+            var triggerRef = _ref.triggerRef,
+                providedProps = (0, _objectWithoutProperties2.default)(_ref, ["triggerRef"]);
+            return /*#__PURE__*/_react.default.createElement(CardActionButtonWithAnalytics, (0, _extends2.default)({
+              variant: triggerVariant,
+              style: {
+                color: triggerColor
+              },
+              ref: triggerRef
+            }, providedProps), /*#__PURE__*/_react.default.createElement(_more.default, {
+              label: "more"
+            }));
+          }
         }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, null, actions.map(createDropdownItemWithAnalytics)));
       } else {
         return null;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "72.0.0",
+	"version": "72.1.0",
 	"sideEffects": false
 }

package/dist/es2019/errors.js

@@ -27,6 +27,14 @@ export class RemotePreviewError extends MediaCardError {
     this.secondaryError = secondaryError;
   }
 
+}
+export class SsrPreviewError extends MediaCardError {
+  constructor(primaryReason, secondaryError) {
+    super(primaryReason, secondaryError);
+    this.primaryReason = primaryReason;
+    this.secondaryError = secondaryError;
+  }
+
 }
 export const getImageLoadPrimaryReason = source => {
   switch (source) {
@@ -68,4 +76,4 @@ export function isImageLoadError(err) {
 // We can use this helper to ensure that the error handled is the type of MediaCardError if unsure
 
 export const ensureMediaCardError = (primaryReason, error) => isMediaCardError(error) ? error : new MediaCardError(primaryReason, error);
-export const isUploadError = error => error.primaryReason === 'upload';
+export const isUploadError = error => error && error.primaryReason === 'upload';

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

@@ -1,59 +1,53 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useContext } from 'react';
+import { useMemoizeFeatureFlags } from '@atlaskit/media-common';
+import Loadable from 'react-loadable';
 import { CardLoading } from '../..';
-export default class CardLoader extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+const MediaCardContext = /*#__PURE__*/React.createContext({});
 
-    _defineProperty(this, "state", {
-      Card: CardLoader.Card,
-      MediaCardErrorBoundary: CardLoader.MediaCardErrorBoundary
-    });
-  }
+const CardLoadingWithContext = () => {
+  const props = useContext(MediaCardContext);
+  return /*#__PURE__*/React.createElement(CardLoading, props);
+};
 
-  async componentDidMount() {
-    if (!this.state.Card) {
-      try {
-        const [mediaClient, cardModule, mediaCardErrorBoundaryModule] = await Promise.all([import(
-        /* webpackChunkName: "@atlaskit-internal_media-client" */
-        '@atlaskit/media-client'), import(
-        /* webpackChunkName: "@atlaskit-internal_media-card" */
-        './index'), import(
-        /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */
-        '../media-card-analytics-error-boundary')]);
-        CardLoader.Card = mediaClient.withMediaClient(cardModule.Card, this.props.featureFlags);
-        CardLoader.MediaCardErrorBoundary = mediaCardErrorBoundaryModule.default;
-        this.setState({
-          Card: CardLoader.Card,
-          MediaCardErrorBoundary: CardLoader.MediaCardErrorBoundary
-        });
-      } catch (error) {// TODO [MS-2278]: Add operational error to catch async import error
-      }
-    }
-  }
+const MediaCard = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_media-card" */
+  './index').then(mod => mod.Card),
+  loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null)
+});
+const MediaCardErrorBoundary = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */
+  '../media-card-analytics-error-boundary').then(mod => mod.default),
+  loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null)
+});
+const MediaCardWithMediaClient = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_media-client" */
+  '@atlaskit/media-client'),
+  loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null),
+  render: (loaded, props) => /*#__PURE__*/React.createElement(CardWithMediaClient, _extends({}, props, {
+    withMediaClient: loaded.withMediaClient
+  }))
+});
 
-  render() {
-    const {
-      dimensions,
-      testId,
-      featureFlags
-    } = this.props;
-    const {
-      Card,
-      MediaCardErrorBoundary
-    } = this.state;
+const CardWithMediaClient = props => {
+  const {
+    withMediaClient,
+    featureFlags
+  } = props;
+  const memoizedFeatureFlags = useMemoizeFeatureFlags(featureFlags);
+  const Card = React.useMemo(() => {
+    return withMediaClient(MediaCard, memoizedFeatureFlags);
+  }, [withMediaClient, memoizedFeatureFlags]);
+  return /*#__PURE__*/React.createElement(MediaCardErrorBoundary, null, /*#__PURE__*/React.createElement(Card, props));
+};
 
-    if (!Card || !MediaCardErrorBoundary) {
-      return /*#__PURE__*/React.createElement(CardLoading, {
-        testId: testId,
-        dimensions: dimensions,
-        featureFlags: featureFlags
-      });
-    }
+const CardLoader = props => {
+  return /*#__PURE__*/React.createElement(MediaCardContext.Provider, {
+    value: props
+  }, /*#__PURE__*/React.createElement(MediaCardWithMediaClient, props));
+};
 
-    return /*#__PURE__*/React.createElement(MediaCardErrorBoundary, null, /*#__PURE__*/React.createElement(Card, this.props));
-  }
-
-}
-
-_defineProperty(CardLoader, "displayName", 'AsyncCard');
+export default CardLoader;

package/dist/es2019/root/card/getCardPreview/index.js

@@ -2,7 +2,7 @@ import { isPreviewableFileState, addFileAttrsToUrl } from '@atlaskit/media-clien
 import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
 import cardPreviewCache from './cache';
 import { getCardPreviewFromFilePreview, getCardPreviewFromBackend } from './helpers';
-import { MediaCardError, isUnsupportedLocalPreviewError } from '../../../errors';
+import { MediaCardError, SsrPreviewError, isUnsupportedLocalPreviewError } from '../../../errors';
 import { isBigger } from '../../../utils/dimensionComparer';
 import { extractFilePreviewStatus, isPreviewableStatus } from './filePreviewStatus';
 export { getCardPreviewFromFilePreview, getCardPreviewFromBackend, isSupportedLocalPreview } from './helpers';
@@ -28,6 +28,14 @@ const extendAndCachePreview = (id, dimensions, preview, mediaBlobUrlAttrs) => {
       source = 'cache-remote';
       break;
 
+    case 'ssr-server':
+      source = 'cache-ssr-server';
+      break;
+
+    case 'ssr-client':
+      source = 'cache-ssr-client';
+      break;
+
     default:
       source = preview.source;
   } // We want to embed some meta context into dataURI for Copy/Paste to work.
@@ -111,8 +119,7 @@ export const getCardPreview = async ({
     throw new MediaCardError('remote-preview-not-ready');
   }
 
-  const remotePreview = await getCardPreviewFromBackend(mediaClient, id, imageUrlParams);
-  return extendAndCachePreview(id, dimensions, remotePreview, mediaBlobUrlAttrs);
+  return fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs);
 };
 export const shouldResolvePreview = ({
   status,
@@ -126,4 +133,39 @@ export const shouldResolvePreview = ({
   const statusIsPreviewable = isPreviewableStatus(status, extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags));
   const dimensionsAreBigger = isBigger(prevDimensions, dimensions);
   return statusIsPreviewable && (!hasCardPreview || dimensionsAreBigger);
+};
+export const getSSRCardPreview = (ssr, mediaClient, id, params, mediaBlobUrlAttrs) => {
+  let dataURI;
+
+  try {
+    const rawDataURI = mediaClient.getImageUrlSync(id, params); // We want to embed some meta context into dataURI for Copy/Paste to work.
+
+    dataURI = mediaBlobUrlAttrs ? addFileAttrsToUrl(rawDataURI, mediaBlobUrlAttrs) : rawDataURI;
+    const source = ssr === 'client' ? 'ssr-client' : 'ssr-server';
+    return {
+      dataURI,
+      source,
+      orientation: 1
+    };
+  } catch (e) {
+    const reason = ssr === 'server' ? 'ssr-server-uri' : 'ssr-client-uri';
+    throw new SsrPreviewError(reason, e);
+  }
+};
+export const isLocalPreview = preview => {
+  const localSources = ['local', 'cache-local'];
+  return localSources.includes(preview.source);
+};
+export const isSSRPreview = preview => isSSRClientPreview(preview) || isSSRServerPreview(preview);
+export const isSSRServerPreview = preview => {
+  const ssrClientSources = ['ssr-server', 'cache-ssr-server'];
+  return ssrClientSources.includes(preview.source);
+};
+export const isSSRClientPreview = preview => {
+  const ssrClientSources = ['ssr-client', 'cache-ssr-client'];
+  return ssrClientSources.includes(preview.source);
+};
+export const fetchAndCacheRemotePreview = async (mediaClient, id, dimensions, params, mediaBlobUrlAttrs) => {
+  const remotePreview = await getCardPreviewFromBackend(mediaClient, id, params);
+  return extendAndCachePreview(id, dimensions, remotePreview, mediaBlobUrlAttrs);
 };