@atlaskit/media-card 73.1.1 → 73.2.0

package/dist/es2019/root/cardView.js

@@ -30,6 +30,7 @@ import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUn
 import { isRateLimitedError, isPollingError } from '@atlaskit/media-client';
 import { newFileExperienceClassName } from './card/cardConstants';
 import { isUploadError } from '../errors';
+import { MediaCardCursor } from '../types';
 
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
@@ -45,32 +46,38 @@ export class CardViewBase extends React.Component {
 
     _defineProperty(this, "divRef", /*#__PURE__*/React.createRef());
 
-    _defineProperty(this, "onImageLoad", () => {
+    _defineProperty(this, "onImageLoad", prevCardPreview => {
       const {
-        onImageLoad
-      } = this.props; // We render the icon & icon message always, even if there is dataURI available.
+        onImageLoad,
+        cardPreview
+      } = this.props;
+
+      if (prevCardPreview.dataURI !== (cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI)) {
+        return;
+      } // We render the icon & icon message always, even if there is cardPreview available.
       // If the image fails to load/render, the icon will remain, i.e. the user won't see a change until
       // the root card decides to chage status to error.
       // If the image renders successfully, we switch this variable to hide the icon & icon message
       // behind the thumbnail in case the image has transparency.
-      // It is less likely that root component replaces a suceeded dataURI for a failed one
+      // It is less likely that root component replaces a suceeded cardPreview for a failed one
       // than the opposite case. Therefore we prefer to hide the icon instead show when the image fails,
       // for a smoother transition
 
+
       this.setState({
         didImageRender: true
       });
-      onImageLoad && onImageLoad();
+      onImageLoad && onImageLoad(cardPreview);
     });
 
-    _defineProperty(this, "onImageError", () => {
+    _defineProperty(this, "onImageError", cardPreview => {
       const {
         onImageError
       } = this.props;
       this.setState({
         didImageRender: false
       });
-      onImageError && onImageError();
+      onImageError && onImageError(cardPreview);
     });
 
     _defineProperty(this, "saveElementWidth", () => {
@@ -106,13 +113,13 @@ export class CardViewBase extends React.Component {
         selected,
         selectable,
         disableOverlay,
-        dataURI
+        cardPreview,
+        mediaCardCursor
       } = this.props;
       const {
         name
       } = metadata || {};
-      const shouldUsePointerCursor = status !== 'error' && status !== 'failed-processing';
-      const shouldDisplayBackground = !dataURI || !disableOverlay || status === 'error' || status === 'failed-processing';
+      const shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
       const isPlayButtonClickable = !!(this.shouldRenderPlayButton() && disableOverlay);
       const isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Disable tooltip for Media Single
 
@@ -126,7 +133,7 @@ export class CardViewBase extends React.Component {
         onMouseEnter: onMouseEnter,
         innerRef: this.divRef,
         breakpoint: this.breakpoint,
-        shouldUsePointerCursor: shouldUsePointerCursor,
+        mediaCardCursor: mediaCardCursor,
         disableOverlay: !!disableOverlay,
         selected: !!selected,
         displayBackground: shouldDisplayBackground,
@@ -142,21 +149,24 @@ export class CardViewBase extends React.Component {
 
     _defineProperty(this, "renderFile", () => {
       const {
+        cardPreview,
         status,
         mediaItemType,
         metadata,
-        dataURI,
         progress,
         resizeMode,
         dimensions,
         selectable,
         selected,
         disableOverlay,
-        previewOrientation,
         alt,
         onDisplayImage,
         actions
       } = this.props;
+      const {
+        dataURI,
+        orientation
+      } = cardPreview || {};
       const {
         name,
         mediaType,
@@ -183,16 +193,17 @@ export class CardViewBase extends React.Component {
         onDisplayImage: onDisplayImage,
         actions: actionsWithDetails,
         disableOverlay: disableOverlay,
-        previewOrientation: previewOrientation,
+        previewOrientation: orientation,
         alt: alt,
         onImageLoad: this.onImageLoad,
-        onImageError: this.onImageError
+        onImageError: this.onImageError,
+        cardPreview: cardPreview
       });
     });
 
     _defineProperty(this, "getRenderConfigByStatus", () => {
       const {
-        dataURI,
+        cardPreview,
         status,
         metadata,
         disableOverlay,
@@ -210,8 +221,8 @@ export class CardViewBase extends React.Component {
       const isZeroSize = !!(metadata && metadata.size === 0);
       const defaultConfig = {
         renderTypeIcon: !didImageRender,
-        renderImageRenderer: !!dataURI,
-        renderPlayButton: !!dataURI && mediaType === 'video',
+        renderImageRenderer: !!cardPreview,
+        renderPlayButton: !!cardPreview && mediaType === 'video',
         renderBlanket: !disableOverlay,
         renderTitleBox: !disableOverlay && !!name,
         renderTickBox: !disableOverlay && !!selectable
@@ -330,16 +341,16 @@ export class CardViewBase extends React.Component {
   }
 
   componentDidUpdate({
-    dataURI: prevDataURI
+    cardPreview: prevCardPreview
   }) {
     const {
-      dataURI
+      cardPreview
     } = this.props; // We should only switch didImageRender to false
-    // when dataURI goes undefined, not when it is updated.
+    // when cardPreview goes undefined, not when it is updated.
     // as this method could be triggered after onImageLoad callback,
     // falling on a race condition
 
-    prevDataURI && !dataURI && this.setState({
+    !!prevCardPreview && !cardPreview && this.setState({
       didImageRender: false
     });
   }
@@ -413,13 +424,13 @@ export class CardViewBase extends React.Component {
   shouldRenderPlayButton() {
     const {
       metadata,
-      dataURI
+      cardPreview
     } = this.props;
     const {
       mediaType
     } = metadata || {};
 
-    if (mediaType !== 'video' || !dataURI) {
+    if (mediaType !== 'video' || !cardPreview) {
       return false;
     }
 
@@ -480,21 +491,19 @@ export class CardViewBase extends React.Component {
 
   renderImageRenderer() {
     const {
-      dataURI,
+      cardPreview,
       metadata: {
         mediaType = 'unknown'
       } = {},
-      previewOrientation,
       alt,
       resizeMode,
       onDisplayImage,
       nativeLazyLoad,
       forceSyncDisplay
     } = this.props;
-    return !!dataURI && /*#__PURE__*/React.createElement(ImageRenderer, {
-      dataURI: dataURI,
+    return !!cardPreview && /*#__PURE__*/React.createElement(ImageRenderer, {
+      cardPreview: cardPreview,
       mediaType: mediaType,
-      previewOrientation: previewOrientation,
       alt: alt,
       resizeMode: resizeMode,
       onDisplayImage: onDisplayImage,
@@ -554,7 +563,8 @@ export class CardViewBase extends React.Component {
 }
 
 _defineProperty(CardViewBase, "defaultProps", {
-  appearance: 'auto'
+  appearance: 'auto',
+  mediaCardCursor: MediaCardCursor.NoAction
 });
 
 export const CardView = withAnalyticsEvents({

package/dist/es2019/root/inlinePlayer.js

@@ -216,7 +216,8 @@ export class InlinePlayerBase extends Component {
       testId,
       identifier,
       forwardRef,
-      autoplay
+      autoplay,
+      cardPreview
     } = this.props;
     const {
       fileSrc,
@@ -250,7 +251,8 @@ export class InlinePlayerBase extends Component {
         contentId: identifier.id
       },
       originalDimensions: originalDimensions,
-      showControls: checkMouseMovement
+      showControls: checkMouseMovement,
+      poster: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI
     })), isUploading ? /*#__PURE__*/React.createElement(ProgressBar, {
       progress: progress,
       breakpoint: this.breakpoint,

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

@@ -3,8 +3,7 @@ import React, { useEffect } from 'react';
 import { MediaImage } from '@atlaskit/media-ui';
 import { resizeModeToMediaImageProps } from '../../../utils/resizeModeToMediaImageProps';
 export const ImageRenderer = ({
-  dataURI,
-  previewOrientation,
+  cardPreview,
   alt,
   resizeMode,
   onImageLoad,
@@ -20,12 +19,21 @@ export const ImageRenderer = ({
       onDisplayImage();
     }
   }, [mediaType, onDisplayImage]);
+
+  const onLoad = () => {
+    onImageLoad && onImageLoad(cardPreview);
+  };
+
+  const onError = () => {
+    onImageError && onImageError(cardPreview);
+  };
+
   return /*#__PURE__*/React.createElement(MediaImage, _extends({
-    dataURI: dataURI,
+    dataURI: cardPreview.dataURI,
     alt: alt,
-    previewOrientation: previewOrientation,
-    onImageLoad: onImageLoad,
-    onImageError: onImageError,
+    previewOrientation: cardPreview.orientation,
+    onImageLoad: onLoad,
+    onImageError: onError,
     loading: nativeLazyLoad ? 'lazy' : undefined,
     forceSyncDisplay: forceSyncDisplay
   }, resizeModeToMediaImageProps(resizeMode)));

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

@@ -52,7 +52,7 @@ const getWrapperShadow = (disableOverlay, selected) => {
   return shadow ? `box-shadow: ${shadow};` : '';
 };
 
-const getCursorStyle = shouldUsePointerCursor => `cursor: ${shouldUsePointerCursor ? 'pointer' : 'default'};`;
+const getCursorStyle = cursor => `cursor: ${cursor};`;
 
 const getClickablePlayButtonStyles = isPlayButtonClickable => {
   if (!isPlayButtonClickable) {
@@ -83,13 +83,13 @@ export const NewFileExperienceWrapper = styled.div`
   breakpoint,
   dimensions,
   appearance,
-  shouldUsePointerCursor,
   disableOverlay,
   displayBackground,
   selected,
   isPlayButtonClickable,
   isTickBoxSelectable,
-  shouldDisplayTooltip
+  shouldDisplayTooltip,
+  mediaCardCursor
 }) => `
     ${transition()}
     box-sizing: border-box;
@@ -101,7 +101,7 @@ export const NewFileExperienceWrapper = styled.div`
     ${getWrapperDimensions(dimensions, appearance)}
     ${displayBackground ? `background-color: ${N20};` : ''}
     ${borderRadius}
-    ${getCursorStyle(shouldUsePointerCursor)}
+    ${getCursorStyle(mediaCardCursor)}
     ${getWrapperShadow(disableOverlay, selected)}
     ${generateResponsiveStyles(breakpoint)}
     ${hideNativeBrowserTextSelectionStyles}

package/dist/es2019/types.js

@@ -1 +1,7 @@
-export {};
+export let MediaCardCursor;
+
+(function (MediaCardCursor) {
+  MediaCardCursor["Action"] = "pointer";
+  MediaCardCursor["NoAction"] = "default";
+  MediaCardCursor["NotReady"] = "wait";
+})(MediaCardCursor || (MediaCardCursor = {}));

package/dist/es2019/utils/analytics.js

@@ -81,6 +81,13 @@ export const getRenderErrorRequestMetadata = error => {
     return error.secondaryError.metadata;
   }
 };
+export const extractErrorInfo = error => {
+  return {
+    failReason: getRenderErrorFailReason(error),
+    error: getRenderErrorErrorReason(error),
+    errorDetail: getRenderErrorErrorDetail(error)
+  };
+};
 export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes, error) => ({
   eventType: 'operational',
   action: 'failed',
@@ -89,9 +96,7 @@ export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes
     fileAttributes,
     performanceAttributes,
     status: 'fail',
-    failReason: getRenderErrorFailReason(error),
-    error: getRenderErrorErrorReason(error),
-    errorDetail: getRenderErrorErrorDetail(error),
+    ...extractErrorInfo(error),
     request: getRenderErrorRequestMetadata(error)
   }
 });

package/dist/es2019/utils/dimensionComparer.js

@@ -1,23 +1,16 @@
 import { isValidPercentageUnit } from './isValidPercentageUnit';
 import { containsPixelUnit } from './containsPixelUnit';
+
+const isPixelEquivalent = dimension => typeof dimension === 'number' || containsPixelUnit(`${dimension}`);
+
 export const canCompareDimension = (current, next) => {
   if (!current || !next) {
     return false;
   }
 
-  if (isValidPercentageUnit(current) && isValidPercentageUnit(next)) {
-    return true;
-  }
-
-  if (containsPixelUnit(`${current}`) && containsPixelUnit(`${next}`)) {
-    return true;
-  }
-
-  if (typeof current === 'number' && typeof next === 'number') {
-    return true;
-  }
-
-  return false;
+  const bothPixelEquivalent = isPixelEquivalent(current) && isPixelEquivalent(next);
+  const bothPercentage = isValidPercentageUnit(current) && isValidPercentageUnit(next);
+  return bothPixelEquivalent || bothPercentage;
 };
 export const isBigger = (current, next) => {
   if (!!current && !!next && canCompareDimension(current.width, next.width) && canCompareDimension(current.height, next.height)) {

package/dist/es2019/utils/getMediaCardCursor.js

@@ -0,0 +1,19 @@
+import { MediaCardCursor } from '../types';
+export const getMediaCardCursor = (useInlinePlayer, useMediaViewer, isErrorStatus, hasCardPreview, mediaType) => {
+  // If error status or no action is requested = NoAction
+  if (isErrorStatus || !useInlinePlayer && !useMediaViewer) {
+    return MediaCardCursor.NoAction;
+  }
+
+  if (!mediaType && (useInlinePlayer || useInlinePlayer && useMediaViewer)) {
+    return MediaCardCursor.NotReady;
+  } else if (mediaType === 'video' && hasCardPreview && useInlinePlayer) {
+    return MediaCardCursor.Action;
+  }
+
+  if (useMediaViewer) {
+    return MediaCardCursor.Action;
+  }
+
+  return MediaCardCursor.NoAction;
+};

package/dist/es2019/utils/globalScope/getSSRData.js

@@ -0,0 +1,10 @@
+import { getMediaCardSSR, getKey } from './globalScope';
+export const getSSRData = identifier => {
+  const mediaCardSsr = getMediaCardSSR();
+
+  if (!mediaCardSsr) {
+    return;
+  }
+
+  return mediaCardSsr[getKey(identifier)];
+};

package/dist/es2019/utils/globalScope/globalScope.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { printFunctionCall, printScript } from '../printScript';
+// ----- WARNING -----
+// This is a very sensitive fraction of code.
+// Any changes to this file must be tested directly in product before merging.
+// The scripts printed here might differ from what we observe in our internal tests
+// due to minimification, for example.
+export const GLOBAL_MEDIA_CARD_SSR = 'mediaCardSsr';
+export const GLOBAL_MEDIA_NAMESPACE = '__MEDIA_INTERNAL';
+export function getMediaGlobalScope(globalScope = window) {
+  // Must match GLOBAL_MEDIA_NAMESPACE. Can't reference the constant from here.
+  const namespace = '__MEDIA_INTERNAL';
+
+  if (!globalScope[namespace]) {
+    globalScope[namespace] = {};
+  }
+
+  return globalScope[namespace];
+}
+export function getMediaCardSSR(globalScope = window) {
+  const globalMedia = getMediaGlobalScope(globalScope); // Must match GLOBAL_MEDIA_CARD_SSR. Can't reference the constant from here.
+
+  const key = 'mediaCardSsr';
+
+  if (!globalMedia[key]) {
+    globalMedia[key] = {};
+  }
+
+  return globalMedia[key];
+}
+
+const dashed = param => param ? `-${param}` : '';
+
+export const getKey = ({
+  id,
+  collectionName,
+  occurrenceKey
+}) => `${id}${dashed(collectionName)}${dashed(occurrenceKey)}`;
+export const storeDataURI = (key, dataURI, dimensions, error, globalScope = window) => {
+  const mediaCardSsr = getMediaCardSSR(globalScope);
+  mediaCardSsr[key] = {
+    dataURI,
+    dimensions,
+    error
+  };
+};
+
+const generateScript = (identifier, dataURI, dimensions, error) => {
+  const functionCall = printFunctionCall(storeDataURI, getKey(identifier), dataURI, dimensions, error);
+  return printScript([getMediaCardSSR.toString(), getMediaGlobalScope.toString(), functionCall]);
+};
+
+export const StoreSSRDataScript = ({
+  dataURI,
+  identifier,
+  dimensions,
+  error
+}) => /*#__PURE__*/React.createElement("script", {
+  dangerouslySetInnerHTML: {
+    __html: generateScript(identifier, dataURI, dimensions, error)
+  }
+});

package/dist/es2019/utils/globalScope/index.js

@@ -0,0 +1,2 @@
+export { StoreSSRDataScript, GLOBAL_MEDIA_NAMESPACE, GLOBAL_MEDIA_CARD_SSR, getKey } from './globalScope';
+export { getSSRData } from './getSSRData';

package/dist/es2019/utils/globalScope/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/utils/printScript.js

@@ -0,0 +1,19 @@
+const printParam = param => {
+  if (typeof param === 'string') {
+    return `'${param}'`;
+  } else if (typeof param === 'object') {
+    return JSON.stringify(param);
+  } else if (param === undefined) {
+    return 'undefined';
+  }
+
+  return param;
+};
+
+const printParams = args => args.map(arg => printParam(arg)).join(',');
+
+export const printFunctionCall = (fn, ...args) => `(${fn.toString()})(${printParams(args)});`;
+export const printScript = statements => `(function(){
+  ${statements.join(';')}
+})();
+`;

package/dist/es2019/version.json

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

package/dist/esm/files/cardImageView/index.js

@@ -156,18 +156,30 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
       })));
     });
 
-    _defineProperty(_assertThisInitialized(_this), "renderMediaImage", function () {
+    _defineProperty(_assertThisInitialized(_this), "onImageLoad", function () {
       var _this$props6 = _this.props,
-          status = _this$props6.status,
-          mediaItemType = _this$props6.mediaItemType,
-          dataURI = _this$props6.dataURI,
-          mediaType = _this$props6.mediaType,
-          mimeType = _this$props6.mimeType,
-          previewOrientation = _this$props6.previewOrientation,
-          onDisplayImage = _this$props6.onDisplayImage,
-          alt = _this$props6.alt,
           onImageLoad = _this$props6.onImageLoad,
-          onImageError = _this$props6.onImageError;
+          cardPreview = _this$props6.cardPreview;
+      onImageLoad && onImageLoad(cardPreview);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onImageError", function () {
+      var _this$props7 = _this.props,
+          onImageError = _this$props7.onImageError,
+          cardPreview = _this$props7.cardPreview;
+      onImageError && onImageError(cardPreview);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderMediaImage", function () {
+      var _this$props8 = _this.props,
+          status = _this$props8.status,
+          mediaItemType = _this$props8.mediaItemType,
+          dataURI = _this$props8.dataURI,
+          mediaType = _this$props8.mediaType,
+          mimeType = _this$props8.mimeType,
+          previewOrientation = _this$props8.previewOrientation,
+          onDisplayImage = _this$props8.onDisplayImage,
+          alt = _this$props8.alt;
 
       if (!shouldDisplayImageThumbnail(status, mediaItemType, dataURI, mediaType, mimeType)) {
         return null;
@@ -184,17 +196,17 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
         crop: _this.isCropped,
         stretch: _this.isStretched,
         previewOrientation: previewOrientation,
-        onImageLoad: onImageLoad,
-        onImageError: onImageError
+        onImageLoad: _this.onImageLoad,
+        onImageError: _this.onImageError
       });
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderProgressBar", function () {
-      var _this$props7 = _this.props,
-          mediaName = _this$props7.mediaName,
-          progress = _this$props7.progress,
-          actions = _this$props7.actions,
-          status = _this$props7.status;
+      var _this$props9 = _this.props,
+          mediaName = _this$props9.mediaName,
+          progress = _this$props9.progress,
+          actions = _this$props9.actions,
+          status = _this$props9.status;
 
       if (status !== 'uploading') {
         return null;
@@ -213,10 +225,10 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderSuccessCardContents", function () {
-      var _this$props8 = _this.props,
-          disableOverlay = _this$props8.disableOverlay,
-          selectable = _this$props8.selectable,
-          status = _this$props8.status;
+      var _this$props10 = _this.props,
+          disableOverlay = _this$props10.disableOverlay,
+          selectable = _this$props10.selectable,
+          status = _this$props10.status;
       var overlay = null;
 
       if (!disableOverlay) {
@@ -237,15 +249,15 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderSuccessCardOverlay", function () {
-      var _this$props9 = _this.props,
-          status = _this$props9.status,
-          mediaName = _this$props9.mediaName,
-          mediaType = _this$props9.mediaType,
-          fileSize = _this$props9.fileSize,
-          dataURI = _this$props9.dataURI,
-          selectable = _this$props9.selectable,
-          selected = _this$props9.selected,
-          actions = _this$props9.actions;
+      var _this$props11 = _this.props,
+          status = _this$props11.status,
+          mediaName = _this$props11.mediaName,
+          mediaType = _this$props11.mediaType,
+          fileSize = _this$props11.fileSize,
+          dataURI = _this$props11.dataURI,
+          selectable = _this$props11.selectable,
+          selected = _this$props11.selected,
+          actions = _this$props11.actions;
       var isPersistent = mediaType === 'doc' || !dataURI;
       return /*#__PURE__*/React.createElement(CardOverlay, {
         cardStatus: status,
@@ -265,14 +277,14 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
   _createClass(FileCardImageView, [{
     key: "render",
     value: function render() {
-      var _this$props10 = this.props,
-          disableOverlay = _this$props10.disableOverlay,
-          selectable = _this$props10.selectable,
-          selected = _this$props10.selected,
-          mediaType = _this$props10.mediaType,
-          progress = _this$props10.progress,
-          status = _this$props10.status,
-          mediaName = _this$props10.mediaName;
+      var _this$props12 = this.props,
+          disableOverlay = _this$props12.disableOverlay,
+          selectable = _this$props12.selectable,
+          selected = _this$props12.selected,
+          mediaType = _this$props12.mediaType,
+          progress = _this$props12.progress,
+          status = _this$props12.status,
+          mediaName = _this$props12.mediaName;
       return /*#__PURE__*/React.createElement(Wrapper, {
         "data-testid": "media-file-card-view",
         "data-test-media-name": mediaName,
@@ -289,9 +301,9 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
   }, {
     key: "isFileCardImageReadyForDisplay",
     get: function get() {
-      var _this$props11 = this.props,
-          dataURI = _this$props11.dataURI,
-          status = _this$props11.status;
+      var _this$props13 = this.props,
+          dataURI = _this$props13.dataURI,
+          status = _this$props13.status;
       return !!dataURI || !['loading', 'processing', 'loading-preview'].includes(status);
     }
   }, {

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

@@ -208,6 +208,9 @@ export var isSSRClientPreview = function isSSRClientPreview(preview) {
   var ssrClientSources = ['ssr-client', 'cache-ssr-client'];
   return ssrClientSources.includes(preview.source);
 };
+export var isSSRDataPreview = function isSSRDataPreview(preview) {
+  return preview.source === 'ssr-data';
+};
 export var fetchAndCacheRemotePreview = /*#__PURE__*/function () {
   var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(mediaClient, id, dimensions, params, mediaBlobUrlAttrs) {
     var remotePreview;