@atlaskit/media-card 70.9.0 → 72.0.0

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

@@ -0,0 +1,26 @@
+import { isErrorFileState } from '@atlaskit/media-client';
+import { MediaCardError } from '../../errors';
+import { getCardStatus, isFinalCardStatus } from './getCardStatus';
+import { extractFilePreviewStatus } from './getCardPreview';
+export const createStateUpdater = newState => prevState => {
+  // Only override if previous status is non-final
+  // or new status is 'complete'
+  if (isFinalCardStatus(prevState.status) && newState.status !== 'complete') {
+    return prevState;
+  }
+
+  return { ...prevState,
+    ...newState
+  };
+};
+export const getCardStateFromFileState = (fileState, isBannedLocalPreview, featureFlags) => {
+  const status = getCardStatus(fileState.status, extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags));
+  const error = status === 'error' && isErrorFileState(fileState) ? new MediaCardError('error-file-state', new Error(fileState.message)) : undefined;
+  const progress = status === 'uploading' && fileState.status === 'uploading' ? fileState.progress : 1;
+  return {
+    fileState,
+    status,
+    progress,
+    error
+  };
+};

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

@@ -0,0 +1,29 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { createObjectURLCache } from '../../../utils/objectURLCache';
+// Dimensions are used to create a key.
+// Cache is invalidated when different dimensions are provided.
+export const getCacheKey = (id, dimensions) => {
+  return [id, dimensions.height, dimensions.width].join('-');
+};
+export class CardPreviewCacheImpl {
+  constructor(previewCache) {
+    _defineProperty(this, "get", (id, dimensions) => {
+      const cacheKey = getCacheKey(id, dimensions);
+      return this.previewCache.get(cacheKey);
+    });
+
+    _defineProperty(this, "set", (id, dimensions, cardPreview) => {
+      const cacheKey = getCacheKey(id, dimensions);
+      this.previewCache.set(cacheKey, cardPreview);
+    });
+
+    _defineProperty(this, "remove", (id, dimensions) => {
+      const cacheKey = getCacheKey(id, dimensions);
+      this.previewCache.remove(cacheKey);
+    });
+
+    this.previewCache = previewCache;
+  }
+
+}
+export default new CardPreviewCacheImpl(createObjectURLCache());

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

@@ -0,0 +1,35 @@
+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' || cardStatus === 'processing' && isSupportedByBrowser);
+};

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

@@ -0,0 +1,83 @@
+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);
+    const dataURI = URL.createObjectURL(value);
+    return {
+      dataURI,
+      orientation,
+      source: 'local'
+    };
+  } catch (e) {
+    throw new LocalPreviewError('local-preview-image', e);
+  }
+};
+
+const getVideoLocalPreview = async value => {
+  try {
+    const dataURI = await takeSnapshot(value);
+    return {
+      dataURI,
+      orientation: 1,
+      source: 'local'
+    };
+  } catch (e) {
+    throw new LocalPreviewError('local-preview-video', e);
+  }
+};
+
+export const getCardPreviewFromFilePreview = async filePreview => {
+  let value;
+
+  try {
+    const resolvedFilePreview = await filePreview;
+    value = resolvedFilePreview.value;
+  } catch (e) {
+    throw new LocalPreviewError('local-preview-rejected', e);
+  }
+
+  if (typeof value === 'string') {
+    return {
+      dataURI: value,
+      orientation: 1,
+      source: 'local'
+    };
+  } else if (value instanceof Blob) {
+    const {
+      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) => {
+  try {
+    const blob = await mediaClient.getImage(id, params);
+    return {
+      dataURI: URL.createObjectURL(blob),
+      orientation: 1,
+      source: 'remote'
+    };
+  } catch (e) {
+    throw new RemotePreviewError('remote-preview-fetch', e);
+  }
+};

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

@@ -0,0 +1,129 @@
+import { isPreviewableFileState, addFileAttrsToUrl } from '@atlaskit/media-client';
+import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
+import cardPreviewCache from './cache';
+import { getCardPreviewFromFilePreview, getCardPreviewFromBackend } from './helpers';
+import { MediaCardError, 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
+ */
+
+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;
+
+    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.
+ * This, in order to ensure there is always going to be a valid return value OR throw an error if the process fails.
+ * It is worth noting that local preview failures break the process if there is no remote preview available.
+ * In that case we throw an error immediately.
+ * Otherwise, if the local preview fails but there is a remote preview available, the failure does not break the process.
+ * 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,
+  dimensions = {},
+  filePreview,
+  onLocalPreviewError,
+  isRemotePreviewReady,
+  imageUrlParams,
+  mediaBlobUrlAttrs
+}) => {
+  const cachedPreview = cardPreviewCache.get(id, dimensions);
+
+  if (cachedPreview) {
+    return cachedPreview;
+  }
+
+  try {
+    if (filePreview) {
+      const localPreview = await getCardPreviewFromFilePreview(filePreview);
+      return extendAndCachePreview(id, dimensions, localPreview, mediaBlobUrlAttrs);
+    }
+  } catch (e) {
+    /**
+     * We report the error if:
+     * - local preview is supported and fails
+     * - local preview is unsupported and remote preview is NOT READY
+     *   i.e. the function was called for "no reason".
+     * We DON'T report the error if:
+     * - local preview is unsupported and remote preview IS READY
+     *   i.e. local preview is available and not supported,
+     *   but we are after the remote preview instead.
+     */
+    if (!isUnsupportedLocalPreviewError(e) || isUnsupportedLocalPreviewError(e) && !isRemotePreviewReady) {
+      onLocalPreviewError && onLocalPreviewError(e);
+    }
+    /**
+     * 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
+     * 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');
+  }
+
+  const remotePreview = await getCardPreviewFromBackend(mediaClient, id, imageUrlParams);
+  return extendAndCachePreview(id, dimensions, remotePreview, 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);
+};

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

@@ -1,15 +1,8 @@
-import { isPreviewableType, isPreviewableFileState } from '@atlaskit/media-client';
-export const extractCardStatusParams = (fileState, featureFlags) => ({
-  // TODO: align these checks with helpers from Media Client
-  // https://product-fabric.atlassian.net/browse/BMPT-1300
-  isPreviewableType: 'mediaType' in fileState && !!fileState.mediaType && isPreviewableType(fileState.mediaType, featureFlags),
-  hasFilesize: 'size' in fileState && !!fileState.size,
-  isPreviewableFileState: isPreviewableFileState(fileState)
-});
+export const isFinalCardStatus = status => ['complete', 'error', 'failed-processing'].includes(status);
 export const getCardStatus = (fileStatus, {
-  isPreviewableType,
   hasFilesize,
-  isPreviewableFileState
+  isPreviewable,
+  hasPreview
 }) => {
   switch (fileStatus) {
     case 'uploading':
@@ -19,24 +12,27 @@ export const getCardStatus = (fileStatus, {
 
     case 'processing':
       // Legacy empty files logic
-      // isPreviewableType will most likely be false for empty files,
+      // isPreviewable will most likely be false for empty files,
       // therefore we need to do this cut before that check.
       // TODO: https://product-fabric.atlassian.net/browse/BMPT-1247
       if (!hasFilesize) {
         return 'processing';
       } // If we show no preview for this file
-      // we won't show the "creating preview" message
-      // i.e. Card is "complete".
+      // we won't show the "creating preview" message, i.e. Card is "complete".
 
 
-      if (!isPreviewableType || isPreviewableFileState) {
+      if (!isPreviewable) {
         return 'complete';
       }
 
       return 'processing';
 
     case 'processed':
-      return 'complete';
+      if (!isPreviewable || !hasPreview) {
+        return 'complete';
+      }
+
+      return 'loading-preview';
 
     default:
       return 'loading';