@atlaskit/media-card 74.5.1 → 74.6.0

package/dist/es2019/card/cardView.js

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import React from 'react';
@@ -33,7 +32,6 @@ import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUn
 import { isUploadError } from '../errors';
 import { NewFileExperienceWrapper } from './ui/newFileExperience/newFileExperienceWrapper';
 import { Wrapper } from './cardImageView/cardViewWrapper';
-
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
  * `createAnalyticsEvent` prop to satisfy it's Analytics Events needs.
@@ -41,22 +39,19 @@ import { Wrapper } from './cardImageView/cardViewWrapper';
 export class CardViewBase extends React.Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "state", {
       didImageRender: false
     });
-
     _defineProperty(this, "divRef", /*#__PURE__*/React.createRef());
-
     _defineProperty(this, "onImageLoad", prevCardPreview => {
       const {
         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.
+      }
+      // 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
@@ -64,14 +59,11 @@ export class CardViewBase extends React.Component {
       // 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(cardPreview);
     });
-
     _defineProperty(this, "onImageError", cardPreview => {
       const {
         onImageError
@@ -81,20 +73,16 @@ export class CardViewBase extends React.Component {
       });
       onImageError && onImageError(cardPreview);
     });
-
     _defineProperty(this, "saveElementWidth", () => {
       const {
         dimensions
       } = this.props;
-
       if (!dimensions) {
         return;
       }
-
       const {
         width
       } = dimensions;
-
       if (width && isValidPercentageUnit(width) && !!this.divRef.current) {
         const elementWidth = getElementDimension(this.divRef.current, 'width');
         this.setState({
@@ -102,7 +90,6 @@ export class CardViewBase extends React.Component {
         });
       }
     });
-
     _defineProperty(this, "renderFileNewExperience", () => {
       const {
         dimensions,
@@ -123,8 +110,8 @@ export class CardViewBase extends React.Component {
       } = metadata || {};
       const shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
       const isPlayButtonClickable = !!(this.shouldRenderPlayButton() && disableOverlay);
-      const isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Disable tooltip for Media Single
-
+      const isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
+      // Disable tooltip for Media Single
       const shouldDisplayTooltip = !disableOverlay;
       return jsx(NewFileExperienceWrapper, {
         testId: testId || 'media-card-view',
@@ -147,7 +134,6 @@ export class CardViewBase extends React.Component {
         tag: 'div'
       }, this.renderNewExperienceCard()) : this.renderNewExperienceCard());
     });
-
     _defineProperty(this, "renderFile", () => {
       const {
         cardPreview,
@@ -201,7 +187,6 @@ export class CardViewBase extends React.Component {
         cardPreview: cardPreview
       });
     });
-
     _defineProperty(this, "getRenderConfigByStatus", () => {
       const {
         cardPreview,
@@ -228,28 +213,27 @@ export class CardViewBase extends React.Component {
         renderTitleBox: !disableOverlay && !!name,
         renderTickBox: !disableOverlay && !!selectable
       };
-
       switch (status) {
         case 'uploading':
-          return { ...defaultConfig,
+          return {
+            ...defaultConfig,
             renderBlanket: !disableOverlay || mediaType !== 'video',
             isFixedBlanket: true,
             renderProgressBar: true
           };
-
         case 'processing':
-          return { ...defaultConfig,
+          return {
+            ...defaultConfig,
             iconMessage: !didImageRender && !isZeroSize ? jsx(CreatingPreview, {
               disableAnimation: disableAnimation
             }) : undefined
           };
-
         case 'complete':
           return defaultConfig;
-
         case 'error':
         case 'failed-processing':
-          const baseErrorConfig = { ...defaultConfig,
+          const baseErrorConfig = {
+            ...defaultConfig,
             renderTypeIcon: true,
             renderImageRenderer: false,
             renderTitleBox: false,
@@ -260,7 +244,6 @@ export class CardViewBase extends React.Component {
           const {
             secondaryError
           } = error || {};
-
           if (isRateLimitedError(secondaryError) || isPollingError(secondaryError)) {
             iconMessage = jsx(PreviewCurrentlyUnavailable, null);
           } else if (isUploadError(error)) {
@@ -271,32 +254,31 @@ export class CardViewBase extends React.Component {
           } else {
             iconMessage = jsx(PreviewUnavailable, null);
           }
-
           if (!disableOverlay) {
             const renderFailedTitleBox = !name || !!customTitleMessage;
-            return { ...baseErrorConfig,
+            return {
+              ...baseErrorConfig,
               renderTitleBox: !!name && !customTitleMessage,
               renderFailedTitleBox,
               iconMessage: !renderFailedTitleBox ? iconMessage : undefined,
               customTitleMessage
             };
           }
-
-          return { ...baseErrorConfig,
+          return {
+            ...baseErrorConfig,
             iconMessage
           };
-
         case 'loading-preview':
         case 'loading':
         default:
-          return { ...defaultConfig,
+          return {
+            ...defaultConfig,
             renderPlayButton: false,
             renderTypeIcon: false,
             renderSpinner: !didImageRender
           };
       }
     });
-
     _defineProperty(this, "renderNewExperienceCard", () => {
       const {
         renderTypeIcon,
@@ -333,7 +315,6 @@ export class CardViewBase extends React.Component {
       }, renderTypeIcon && this.renderMediaTypeIcon(hasTitleBox, iconMessage), renderSpinner && this.renderSpinner(hasTitleBox), renderImageRenderer && this.renderImageRenderer(), renderPlayButton && this.renderPlayButton(hasTitleBox), renderBlanket && this.renderBlanket(!!isFixedBlanket), renderTitleBox && this.renderTitleBox(), renderFailedTitleBox && this.renderFailedTitleBox(customTitleMessage), renderProgressBar && this.renderProgressBar(!hasTitleBox), renderTickBox && this.renderTickBox()), this.renderActionsBar());
     });
   }
-
   componentDidMount() {
     this.saveElementWidth();
     const {
@@ -341,62 +322,54 @@ export class CardViewBase extends React.Component {
     } = this.props;
     !!innerRef && !!this.divRef.current && innerRef(this.divRef.current);
   }
-
   componentDidUpdate({
     cardPreview: prevCardPreview
   }) {
     const {
       cardPreview
-    } = this.props; // We should only switch didImageRender to false
+    } = this.props;
+    // We should only switch didImageRender to false
     // when cardPreview goes undefined, not when it is updated.
     // as this method could be triggered after onImageLoad callback,
     // falling on a race condition
-
     !!prevCardPreview && !cardPreview && this.setState({
       didImageRender: false
     });
   }
-
   // This width is only used to calculate breakpoints, dimensions are passed down as
   // integrator pass it to the root component
   get width() {
     const {
       elementWidth
     } = this.state;
-
     if (elementWidth) {
       return elementWidth;
     }
-
     const {
       width
     } = this.props.dimensions || {
       width: undefined
     };
-
     if (!width) {
       return defaultImageCardDimensions.width;
     }
-
     return getCSSUnitValue(width);
   }
-
   get breakpoint() {
     const width = this.state.elementWidth || (this.props.dimensions ? this.props.dimensions.width : '') || defaultImageCardDimensions.width;
     return calcBreakpointSize(parseInt(`${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.
+  }
 
+  // If the dimensions.width is a percentage, we need to transform it
+  // into a pixel value in order to get the right breakpoints applied.
 
   render() {
     const {
       featureFlags
     } = this.props;
-
     if (getMediaFeatureFlag('newCardExperience', featureFlags)) {
       return this.renderFileNewExperience();
     }
-
     const {
       dimensions,
       appearance,
@@ -415,14 +388,12 @@ export class CardViewBase extends React.Component {
       innerRef: this.divRef
     }, this.renderFile());
   }
-
   renderSpinner(hasTitleBox) {
     return jsx(IconWrapper, {
       breakpoint: this.breakpoint,
       hasTitleBox: hasTitleBox
     }, jsx(SpinnerIcon, null));
   }
-
   shouldRenderPlayButton() {
     const {
       metadata,
@@ -431,29 +402,25 @@ export class CardViewBase extends React.Component {
     const {
       mediaType
     } = metadata || {};
-
     if (mediaType !== 'video' || !cardPreview) {
       return false;
     }
-
     return true;
   }
-
   renderPlayButton(hasTitleBox) {
     return jsx(IconWrapper, {
       breakpoint: this.breakpoint,
       hasTitleBox: hasTitleBox
     }, jsx(PlayButton, null));
-  } //This Blanket will provide a shadow backround for uploading status by
-  //setting isFixed.
-
+  }
 
+  //This Blanket will provide a shadow backround for uploading status by
+  //setting isFixed.
   renderBlanket(isFixed) {
     return jsx(Blanket, {
       isFixed: isFixed
     });
   }
-
   renderTitleBox() {
     const {
       metadata,
@@ -472,14 +439,12 @@ export class CardViewBase extends React.Component {
       titleBoxBgColor: titleBoxBgColor
     });
   }
-
   renderFailedTitleBox(customMessage) {
     return jsx(FailedTitleBox, {
       breakpoint: this.breakpoint,
       customMessage: customMessage
     });
   }
-
   renderProgressBar(positionBottom) {
     const {
       progress
@@ -490,7 +455,6 @@ export class CardViewBase extends React.Component {
       positionBottom: positionBottom
     });
   }
-
   renderImageRenderer() {
     const {
       cardPreview,
@@ -515,7 +479,6 @@ export class CardViewBase extends React.Component {
       forceSyncDisplay: forceSyncDisplay
     });
   }
-
   renderTickBox() {
     const {
       selected
@@ -524,7 +487,6 @@ export class CardViewBase extends React.Component {
       selected: selected
     });
   }
-
   renderMediaTypeIcon(hasTitleBox, iconMessage) {
     const {
       metadata
@@ -544,7 +506,6 @@ export class CardViewBase extends React.Component {
       name: name
     }), iconMessage);
   }
-
   renderActionsBar() {
     const {
       disableOverlay,
@@ -552,22 +513,17 @@ export class CardViewBase extends React.Component {
       metadata
     } = this.props;
     const actionsWithDetails = metadata && actions ? attachDetailsToActions(actions, metadata) : [];
-
     if (disableOverlay || !actions || actions.length === 0) {
       return null;
     }
-
     return jsx(ActionsBar, {
       actions: actionsWithDetails
     });
   }
-
 }
-
 _defineProperty(CardViewBase, "defaultProps", {
   appearance: 'auto'
 });
-
 export const CardView = withAnalyticsEvents({
   onClick: createAndFireMediaCardEvent({
     eventType: 'ui',

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

@@ -10,19 +10,15 @@ export class CardPreviewCacheImpl {
       const cacheKey = getCacheKey(id, mode);
       return this.previewCache.get(cacheKey);
     });
-
     _defineProperty(this, "set", (id, mode, cardPreview) => {
       const cacheKey = getCacheKey(id, mode);
       this.previewCache.set(cacheKey, cardPreview);
     });
-
     _defineProperty(this, "remove", (id, mode) => {
       const cacheKey = getCacheKey(id, mode);
       this.previewCache.remove(cacheKey);
     });
-
     this.previewCache = previewCache;
   }
-
 }
 export default new CardPreviewCacheImpl(createObjectURLCache());

package/dist/es2019/card/getCardPreview/filePreviewStatus.js

@@ -1,8 +1,9 @@
 import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
 import { isPreviewableFileState, isPreviewableType, isImageRepresentationReady } from '@atlaskit/media-client';
-import { isSupportedLocalPreview } from './helpers'; // TODO: align these checks with helpers from Media Client
-// https://product-fabric.atlassian.net/browse/BMPT-1300
+import { isSupportedLocalPreview } from './helpers';
 
+// TODO: align these checks with helpers from Media Client
+// https://product-fabric.atlassian.net/browse/BMPT-1300
 export const extractFilePreviewStatus = (fileState, isBannedLocalPreview, featureFlags) => {
   const hasFilesize = 'size' in fileState && !!fileState.size;
   const {
@@ -11,10 +12,11 @@ export const extractFilePreviewStatus = (fileState, isBannedLocalPreview, featur
   const {
     mimeType
   } = 'mimeType' in fileState && fileState || {};
-  const isPreviewable = !!mediaType && isPreviewableType(mediaType, featureFlags); // Local preview is available only if it's supported by browser and supported by Media Card (isSupportedLocalPreview)
+  const isPreviewable = !!mediaType && isPreviewableType(mediaType, featureFlags);
+
+  // Local preview is available only if it's supported by browser and supported by Media Card (isSupportedLocalPreview)
   // For example, SVGs are mime type NOT supported by browser but media type supported by Media Card (image)
   // Then, local Preview NOT available
-
   const hasLocalPreview = !isBannedLocalPreview && isPreviewableFileState(fileState) && isSupportedLocalPreview(mediaType) && !!mimeType && isMimeTypeSupportedByBrowser(mimeType);
   const hasRemotePreview = isImageRepresentationReady(fileState);
   const hasPreview = hasLocalPreview || hasRemotePreview;
@@ -31,7 +33,8 @@ export const isPreviewableStatus = (cardStatus, {
   hasPreview,
   isSupportedByBrowser
 }) => {
-  return hasPreview && isPreviewable && (cardStatus === 'complete' || cardStatus === 'loading-preview' || cardStatus === 'uploading' || // For Video, we can have local or remote preview while processing.
+  return hasPreview && isPreviewable && (cardStatus === 'complete' || cardStatus === 'loading-preview' || cardStatus === 'uploading' ||
+  // For Video, we can have local or remote preview while processing.
   // Then, we only want to show the thumbnail if the file is supported by the browser,
   // this way we prevent playing unsupported videos that are not procesed
   cardStatus === 'processing' && isSupportedByBrowser);

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

@@ -2,13 +2,11 @@ import { takeSnapshot } from '../../utils/videoSnapshot';
 import { getMediaTypeFromMimeType } from '@atlaskit/media-common';
 import { getOrientation } from '@atlaskit/media-ui';
 import { LocalPreviewError, RemotePreviewError } from '../../errors';
-
 /**
  * This method tells the support for the media
  * types covered in getCardPreviewFromFilePreview
  */
 export const isSupportedLocalPreview = mediaType => mediaType === 'image' || mediaType === 'video';
-
 const getImageLocalPreview = async value => {
   try {
     const orientation = await getOrientation(value);
@@ -22,7 +20,6 @@ const getImageLocalPreview = async value => {
     throw new LocalPreviewError('local-preview-image', e instanceof Error ? e : undefined);
   }
 };
-
 const getVideoLocalPreview = async value => {
   try {
     const dataURI = await takeSnapshot(value);
@@ -35,17 +32,14 @@ const getVideoLocalPreview = async value => {
     throw new LocalPreviewError('local-preview-video', e instanceof Error ? e : undefined);
   }
 };
-
 export const getCardPreviewFromFilePreview = async filePreview => {
   let value;
-
   try {
     const resolvedFilePreview = await filePreview;
     value = resolvedFilePreview.value;
   } catch (e) {
     throw new LocalPreviewError('local-preview-rejected', e instanceof Error ? e : undefined);
   }
-
   if (typeof value === 'string') {
     return {
       dataURI: value,
@@ -57,16 +51,13 @@ export const getCardPreviewFromFilePreview = async filePreview => {
       type
     } = value;
     const mediaType = getMediaTypeFromMimeType(type);
-
     switch (mediaType) {
       case 'image':
         return getImageLocalPreview(value);
-
       case 'video':
         return getVideoLocalPreview(value);
     }
   }
-
   throw new LocalPreviewError('local-preview-unsupported');
 };
 export const getCardPreviewFromBackend = async (mediaClient, id, params, traceContext) => {

package/dist/es2019/card/getCardPreview/imageRefetchingAnalytics.js

@@ -1,12 +1,10 @@
 import { fireMediaCardEvent, getCacheHitEventPayload, getRemoteSuccessEventPayload } from '../../utils/analytics';
 export const fireImageFetchingOperationalEvent = (createAnalyticsEvent, action, cardPreviewAttributes) => {
   const fireEvent = payload => fireMediaCardEvent(payload, createAnalyticsEvent);
-
   switch (action) {
     case 'cache-hit':
       fireEvent(getCacheHitEventPayload(cardPreviewAttributes));
       break;
-
     case 'remote-success':
       fireEvent(getRemoteSuccessEventPayload(cardPreviewAttributes));
       break;
@@ -16,7 +14,6 @@ export const calculatePercentageDifference = (prevDimensions, currentDimensions)
   if (!prevDimensions) {
     return undefined;
   }
-
   const prevWidth = parseInt(`${prevDimensions === null || prevDimensions === void 0 ? void 0 : prevDimensions.width}`, 10);
   const currWidth = parseInt(`${currentDimensions === null || currentDimensions === void 0 ? void 0 : currentDimensions.width}`, 10);
   const prevHeight = parseInt(`${prevDimensions === null || prevDimensions === void 0 ? void 0 : prevDimensions.height}`, 10);

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

@@ -11,48 +11,44 @@ export { getCardPreviewFromFilePreview, getCardPreviewFromBackend, isSupportedLo
 export { extractFilePreviewStatus } from './filePreviewStatus';
 export const getCardPreviewFromCache = cardPreviewCache.get;
 export const removeCardPreviewFromCache = cardPreviewCache.remove;
+
 /**
  * Will return the preview if available and supported by the browser
  * See extractFilePreviewStatus "hasLocalPreview" logic
  */
-
 export const getFilePreviewFromFileState = fileState => 'mimeType' in fileState && isMimeTypeSupportedByBrowser(fileState.mimeType) && isPreviewableFileState(fileState) ? fileState.preview : undefined;
-
 const extendAndCachePreview = (id, mode, preview, mediaBlobUrlAttrs) => {
   let source;
-
   switch (preview.source) {
     case 'local':
       source = 'cache-local';
       break;
-
     case 'remote':
       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.
-
-
-  const dataURI = mediaBlobUrlAttrs ? addFileAttrsToUrl(preview.dataURI, mediaBlobUrlAttrs) : preview.dataURI; // We store new cardPreview into cache
-
-  cardPreviewCache.set(id, mode, { ...preview,
+  }
+  // We want to embed some meta context into dataURI for Copy/Paste to work.
+  const dataURI = mediaBlobUrlAttrs ? addFileAttrsToUrl(preview.dataURI, mediaBlobUrlAttrs) : preview.dataURI;
+  // We store new cardPreview into cache
+  cardPreviewCache.set(id, mode, {
+    ...preview,
     source,
     dataURI
   });
-  return { ...preview,
+  return {
+    ...preview,
     dataURI
   };
 };
+
 /**
  * This function will try to return a Card preview, either from cache, local preview or remote preview.
  * It should only be called if there is a chance to get either a remote or a local preview, or both.
@@ -63,8 +59,6 @@ const extendAndCachePreview = (id, mode, preview, mediaBlobUrlAttrs) => {
  * In that case, we still want to report the local preview error to the caller, for feature realiability track.
  * hence the use of the optional callback onLocalPreviewError
  */
-
-
 export const getCardPreview = async ({
   mediaClient,
   id,
@@ -81,7 +75,6 @@ export const getCardPreview = async ({
   const mode = imageUrlParams.mode;
   const cachedPreview = cardPreviewCache.get(id, mode);
   const dimensionsAreBigger = isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, dimensions);
-
   if (cachedPreview && !dimensionsAreBigger) {
     if (getMediaFeatureFlag('memoryCacheLogging', featureFlags)) {
       createAnalyticsEvent && fireImageFetchingOperationalEvent(createAnalyticsEvent, 'cache-hit', {
@@ -91,14 +84,13 @@ export const getCardPreview = async ({
         source: cachedPreview.source
       });
     }
-
     return cachedPreview;
   }
-
   try {
     if (filePreview) {
       const localPreview = await getCardPreviewFromFilePreview(filePreview);
-      return extendAndCachePreview(id, mode, { ...localPreview,
+      return extendAndCachePreview(id, mode, {
+        ...localPreview,
         dimensions
       }, mediaBlobUrlAttrs);
     }
@@ -120,13 +112,10 @@ export const getCardPreview = async ({
      * No matter the reason why the local preview failed, we break the process
      * if there is no remote preview available
      */
-
-
     if (!isRemotePreviewReady) {
       throw e;
     }
   }
-
   if (!isRemotePreviewReady) {
     /**
      * We throw this in case this function has been called
@@ -136,9 +125,7 @@ export const getCardPreview = async ({
      */
     throw new MediaCardError('remote-preview-not-ready');
   }
-
   const remotePreview = await fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs, traceContext);
-
   if (getMediaFeatureFlag('memoryCacheLogging', featureFlags)) {
     createAnalyticsEvent && fireImageFetchingOperationalEvent(createAnalyticsEvent, 'remote-success', {
       fileId: id,
@@ -148,7 +135,6 @@ export const getCardPreview = async ({
       source: remotePreview.source
     });
   }
-
   return remotePreview;
 };
 export const shouldResolvePreview = ({
@@ -160,18 +146,19 @@ export const shouldResolvePreview = ({
   fileImageMode,
   hasCardPreview,
   isBannedLocalPreview,
-  featureFlags
+  featureFlags,
+  wasResolvedUpfrontPreview
 }) => {
   const statusIsPreviewable = isPreviewableStatus(status, extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags));
   const dimensionsAreBigger = isBigger(prevDimensions, dimensions);
-  return statusIsPreviewable && (!hasCardPreview || dimensionsAreBigger);
+  // We should not fetch the preview if the upfront one hasn't been resolved yet (it could be resolving now), even if there are new dimensions.
+  return wasResolvedUpfrontPreview && 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.
-
+    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 {
@@ -200,7 +187,8 @@ export const isSSRClientPreview = preview => {
 export const isSSRDataPreview = preview => preview.source === 'ssr-data';
 export const fetchAndCacheRemotePreview = async (mediaClient, id, dimensions, params, mediaBlobUrlAttrs, traceContext) => {
   const remotePreview = await getCardPreviewFromBackend(mediaClient, id, params, traceContext);
-  return extendAndCachePreview(id, params.mode, { ...remotePreview,
+  return extendAndCachePreview(id, params.mode, {
+    ...remotePreview,
     dimensions
   }, mediaBlobUrlAttrs);
 };