@atlaskit/media-card 71.0.0 → 73.1.0

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

@@ -0,0 +1,38 @@
+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
+
+export const extractFilePreviewStatus = (fileState, isBannedLocalPreview, featureFlags) => {
+  const hasFilesize = 'size' in fileState && !!fileState.size;
+  const {
+    mediaType
+  } = 'mediaType' in fileState && fileState || {};
+  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)
+  // 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;
+  const isSupportedByBrowser = !!mimeType && isMimeTypeSupportedByBrowser(mimeType);
+  return {
+    hasFilesize,
+    isPreviewable,
+    hasPreview,
+    isSupportedByBrowser
+  };
+};
+export const isPreviewableStatus = (cardStatus, {
+  isPreviewable,
+  hasPreview,
+  isSupportedByBrowser
+}) => {
+  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/root/card/getCardPreview/helpers.js

@@ -69,19 +69,9 @@ export const getCardPreviewFromFilePreview = async filePreview => {
 
   throw new LocalPreviewError('local-preview-unsupported');
 };
-export const getCardPreviewFromBackend = async (mediaClient, id, {
-  width,
-  height
-}, collectionName, resizeMode) => {
+export const getCardPreviewFromBackend = async (mediaClient, id, params) => {
   try {
-    const mode = resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode;
-    const blob = await mediaClient.getImage(id, {
-      collection: collectionName,
-      mode,
-      width,
-      height,
-      allowAnimated: true
-    });
+    const blob = await mediaClient.getImage(id, params);
     return {
       dataURI: URL.createObjectURL(blob),
       orientation: 1,

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

@@ -1,45 +1,14 @@
-import { isPreviewableFileState, isPreviewableType, isImageRepresentationReady } from '@atlaskit/media-client';
+import { isPreviewableFileState, addFileAttrsToUrl } from '@atlaskit/media-client';
 import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
 import cardPreviewCache from './cache';
-import { getCardPreviewFromFilePreview, getCardPreviewFromBackend, isSupportedLocalPreview } from './helpers';
-import { MediaCardError, isUnsupportedLocalPreviewError } from '../../../errors';
-export { getCardPreviewFromFilePreview, getCardPreviewFromBackend, isSupportedLocalPreview } from './helpers'; // TODO: align these checks with helpers from Media Client
-// https://product-fabric.atlassian.net/browse/BMPT-1300
-
-export const extractFilePreviewStatus = (fileState, featureFlags) => {
-  const hasFilesize = 'size' in fileState && !!fileState.size;
-  const {
-    mediaType
-  } = 'mediaType' in fileState && fileState || {};
-  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)
-   * 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 = isPreviewableFileState(fileState) && isSupportedLocalPreview(mediaType) && !!mimeType && isMimeTypeSupportedByBrowser(mimeType);
-  const hasRemotePreview = isImageRepresentationReady(fileState);
-  const hasPreview = hasLocalPreview || hasRemotePreview;
-  const isSupportedByBrowser = !!mimeType && isMimeTypeSupportedByBrowser(mimeType);
-  return {
-    hasFilesize,
-    isPreviewable,
-    hasPreview,
-    isSupportedByBrowser
-  };
-};
-export const shouldGetCardPreview = (cardStatus, {
-  isPreviewable,
-  hasPreview,
-  isSupportedByBrowser
-}) => {
-  return cardStatus === 'loading-preview' || cardStatus === 'uploading' && hasPreview && isPreviewable || cardStatus === 'processing' && hasPreview && isPreviewable && isSupportedByBrowser;
-};
+import { getCardPreviewFromFilePreview, getCardPreviewFromBackend } from './helpers';
+import { MediaCardError, SsrPreviewError, isUnsupportedLocalPreviewError } from '../../../errors';
+import { isBigger } from '../../../utils/dimensionComparer';
+import { extractFilePreviewStatus, isPreviewableStatus } from './filePreviewStatus';
+export { getCardPreviewFromFilePreview, getCardPreviewFromBackend, isSupportedLocalPreview } from './helpers';
+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
@@ -47,6 +16,41 @@ export const getCardPreviewFromCache = cardPreviewCache.get;
 
 export const getFilePreviewFromFileState = fileState => 'mimeType' in fileState && isMimeTypeSupportedByBrowser(fileState.mimeType) && isPreviewableFileState(fileState) ? fileState.preview : undefined;
 
+const extendAndCachePreview = (id, dimensions, 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, dimensions, { ...preview,
+    source,
+    dataURI
+  });
+  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.
@@ -57,28 +61,29 @@ export const getFilePreviewFromFileState = fileState => 'mimeType' in fileState
  * 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,
-  collectionName,
-  requestedDimensions,
-  isRemotePreviewReady,
-  addContextToDataURI,
-  filePreview,
   dimensions = {},
-  resizeMode,
-  onLocalPreviewError
+  filePreview,
+  onLocalPreviewError,
+  isRemotePreviewReady,
+  imageUrlParams,
+  mediaBlobUrlAttrs
 }) => {
-  let cardPreview = cardPreviewCache.get(id, dimensions);
+  const cachedPreview = cardPreviewCache.get(id, dimensions);
 
-  if (cardPreview) {
-    return { ...cardPreview,
-      source: 'cache'
-    };
+  if (cachedPreview) {
+    return cachedPreview;
   }
 
   try {
-    cardPreview = filePreview && (await getCardPreviewFromFilePreview(filePreview));
+    if (filePreview) {
+      const localPreview = await getCardPreviewFromFilePreview(filePreview);
+      return extendAndCachePreview(id, dimensions, localPreview, mediaBlobUrlAttrs);
+    }
   } catch (e) {
     /**
      * We report the error if:
@@ -104,29 +109,63 @@ export const getCardPreview = async ({
     }
   }
 
-  if (!cardPreview) {
-    if (!isRemotePreviewReady) {
-      /**
-       * We throw this in case this function has been called
-       * without checking isRemotePreviewReady first.
-       * If remote preview is not ready, the call to getCardPreviewFromBackend
-       * will generate a console error due to a 404 code
-       */
-      throw new MediaCardError('remote-preview-not-ready');
-    }
-
-    cardPreview = await getCardPreviewFromBackend(mediaClient, id, requestedDimensions, collectionName, resizeMode);
+  if (!isRemotePreviewReady) {
+    /**
+     * We throw this in case this function has been called
+     * without checking isRemotePreviewReady first.
+     * If remote preview is not ready, the call to getCardPreviewFromBackend
+     * will generate a console error due to a 404 code
+     */
+    throw new MediaCardError('remote-preview-not-ready');
   }
-  /**
-   * In case we've retrieved cardPreview using one of the two methods above,
-   * we want to embed some meta context into dataURI for Copy/Paste to work.
-   */
 
+  return fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs);
+};
+export const shouldResolvePreview = ({
+  status,
+  fileState,
+  dimensions,
+  prevDimensions,
+  hasCardPreview,
+  isBannedLocalPreview,
+  featureFlags
+}) => {
+  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;
 
-  cardPreview = { ...cardPreview,
-    dataURI: addContextToDataURI(cardPreview.dataURI)
-  }; // We store new cardPreview into cache
+  try {
+    const rawDataURI = mediaClient.getImageUrlSync(id, params); // We want to embed some meta context into dataURI for Copy/Paste to work.
 
-  cardPreviewCache.set(id, dimensions, cardPreview);
-  return cardPreview;
+    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);
 };

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

@@ -1,3 +1,4 @@
+export const isFinalCardStatus = status => ['complete', 'error', 'failed-processing'].includes(status);
 export const getCardStatus = (fileStatus, {
   hasFilesize,
   isPreviewable,