@atlaskit/media-card 71.0.0 → 72.0.0

package/dist/cjs/utils/metadata.js

@@ -20,8 +20,8 @@ var getProcessingStatusFromFileState = function getProcessingStatusFromFileState
   }
 };
 
-var getFileDetails = function getFileDetails(state) {
-  return !(0, _mediaClient.isErrorFileState)(state) ? {
+var getFileDetailsFromFileState = function getFileDetailsFromFileState(state) {
+  return {
     id: state.id,
     name: state.name,
     size: state.size,
@@ -29,8 +29,16 @@ var getFileDetails = function getFileDetails(state) {
     createdAt: state.createdAt,
     mediaType: state.mediaType,
     processingStatus: getProcessingStatusFromFileState(state.status)
+  };
+};
+
+var getFileDetails = function getFileDetails(identifier, fileState) {
+  return (0, _mediaClient.isFileIdentifier)(identifier) ? fileState && !(0, _mediaClient.isErrorFileState)(fileState) ? getFileDetailsFromFileState(fileState) : {
+    id: identifier.id
   } : {
-    id: state.id
+    id: identifier.mediaItemType,
+    name: identifier.name || identifier.dataURI,
+    mediaType: 'image'
   };
 };
 

package/dist/cjs/utils/objectURLCache.js

@@ -86,6 +86,12 @@ var ObjectURLCache = /*#__PURE__*/function () {
     value: function set(key, value) {
       this.cache.set(key, value);
     }
+  }, {
+    key: "remove",
+    value: function remove(key) {
+      var removed = this.cache.remove(key);
+      removed && URL.revokeObjectURL(removed.dataURI);
+    }
   }]);
   return ObjectURLCache;
 }();

package/dist/cjs/utils/shouldDisplayImageThumbnail.js

@@ -13,7 +13,7 @@ var shouldDisplayImageThumbnail = function shouldDisplayImageThumbnail(cardStatu
   }
 
   if (dataURI) {
-    return mediaItemType === 'external-image' || mimeType && (0, _mediaClient.isMimeTypeSupportedByBrowser)(mimeType) || cardStatus === 'complete';
+    return mediaItemType === 'external-image' || mimeType && (0, _mediaClient.isMimeTypeSupportedByBrowser)(mimeType) || cardStatus === 'complete' || cardStatus === 'loading-preview';
   }
 
   return false;

package/dist/cjs/version.json

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

package/dist/es2019/errors.js

@@ -27,13 +27,45 @@ export class RemotePreviewError extends MediaCardError {
     this.secondaryError = secondaryError;
   }
 
+}
+export const getImageLoadPrimaryReason = source => {
+  switch (source) {
+    case 'cache-remote':
+      return 'cache-remote-uri';
+
+    case 'cache-local':
+      return 'cache-local-uri';
+
+    case 'external':
+      return 'external-uri';
+
+    case 'local':
+      return 'local-uri';
+
+    case 'remote':
+      return 'remote-uri';
+    // This fail reason will come from a bug, most likely.
+
+    default:
+      return `unknown-uri`;
+  }
+};
+export class ImageLoadError extends MediaCardError {
+  constructor(source) {
+    super(getImageLoadPrimaryReason(source));
+  }
+
 }
 export function isMediaCardError(err) {
   return err instanceof MediaCardError;
 }
 export const isLocalPreviewError = err => err instanceof LocalPreviewError;
 export const isRemotePreviewError = err => err instanceof RemotePreviewError;
-export const isUnsupportedLocalPreviewError = err => isMediaCardError(err) && err.primaryReason === 'local-preview-unsupported'; // In a try/catch statement, the error caught is the type of any.
+export const isUnsupportedLocalPreviewError = err => isMediaCardError(err) && err.primaryReason === 'local-preview-unsupported';
+export function isImageLoadError(err) {
+  return err instanceof ImageLoadError;
+} // In a try/catch statement, the error caught is the type of any.
 // 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 ensureMediaCardError = (primaryReason, error) => isMediaCardError(error) ? error : new MediaCardError(primaryReason, error);
+export const isUploadError = error => error.primaryReason === 'upload';

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

@@ -9,12 +9,9 @@ import { CardLoading } from '../../utils/lightCards/cardLoading';
 import { shouldDisplayImageThumbnail } from '../../utils/shouldDisplayImageThumbnail';
 import { ProgressBar } from '../../utils/progressBar';
 import CardActions from '../../utils/cardActions';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { fireMediaCardEvent, RenderEventAction, getRenderSucceededEventPayload, getRenderFailedFileUriPayload, getRenderFailedExternalUriPayload } from '../../utils/analytics';
-import { withFileAttributes } from '../../utils/fileAttributesContext';
 export const fileCardImageViewSelector = 'media-file-card-view';
 export const fileCardImageViewSelectedSelector = 'media-file-card-view-selected';
-export class FileCardImageViewBase extends Component {
+export class FileCardImageView extends Component {
   constructor(...args) {
     super(...args);
 
@@ -141,54 +138,6 @@ export class FileCardImageViewBase extends Component {
       })));
     });
 
-    _defineProperty(this, "onImageLoad", () => {
-      const {
-        createAnalyticsEvent,
-        fileAttributes,
-        timeElapsedTillCommenced
-      } = this.props;
-
-      if (fileAttributes && this.shouldFireEvent(RenderEventAction.SUCCEEDED)) {
-        const timeElapsedTillSucceeded = performance.now();
-        const durationSinceCommenced = timeElapsedTillCommenced && timeElapsedTillSucceeded - timeElapsedTillCommenced;
-        const performanceAttributes = {
-          overall: {
-            durationSincePageStart: timeElapsedTillSucceeded,
-            durationSinceCommenced
-          }
-        };
-        fireMediaCardEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes), createAnalyticsEvent);
-      }
-    });
-
-    _defineProperty(this, "onImageError", () => {
-      const {
-        fileAttributes
-      } = this.props;
-
-      if (fileAttributes && this.shouldFireEvent(RenderEventAction.FAILED)) {
-        const {
-          createAnalyticsEvent,
-          mediaItemType,
-          timeElapsedTillCommenced
-        } = this.props;
-        const timeElapsedTillFailed = performance.now();
-        const durationSinceCommenced = timeElapsedTillCommenced && timeElapsedTillFailed - timeElapsedTillCommenced;
-        const performanceAttributes = {
-          overall: {
-            durationSincePageStart: timeElapsedTillFailed,
-            durationSinceCommenced
-          }
-        };
-
-        if (mediaItemType === 'file') {
-          fireMediaCardEvent(getRenderFailedFileUriPayload(fileAttributes, performanceAttributes), createAnalyticsEvent);
-        } else if (mediaItemType === 'external-image') {
-          fireMediaCardEvent(getRenderFailedExternalUriPayload(fileAttributes, performanceAttributes), createAnalyticsEvent);
-        }
-      }
-    });
-
     _defineProperty(this, "renderMediaImage", () => {
       const {
         status,
@@ -198,7 +147,9 @@ export class FileCardImageViewBase extends Component {
         mimeType,
         previewOrientation,
         onDisplayImage,
-        alt
+        alt,
+        onImageLoad,
+        onImageError
       } = this.props;
 
       if (!shouldDisplayImageThumbnail(status, mediaItemType, dataURI, mediaType, mimeType)) {
@@ -216,13 +167,11 @@ export class FileCardImageViewBase extends Component {
         crop: this.isCropped,
         stretch: this.isStretched,
         previewOrientation: previewOrientation,
-        onImageLoad: this.onImageLoad,
-        onImageError: this.onImageError
+        onImageLoad: onImageLoad,
+        onImageError: onImageError
       });
     });
 
-    _defineProperty(this, "shouldFireEvent", action => !this.lastAnalyticsAction || this.lastAnalyticsAction !== action);
-
     _defineProperty(this, "renderProgressBar", () => {
       const {
         mediaName,
@@ -345,9 +294,7 @@ export class FileCardImageViewBase extends Component {
 
 }
 
-_defineProperty(FileCardImageViewBase, "defaultProps", {
+_defineProperty(FileCardImageView, "defaultProps", {
   resizeMode: 'crop',
   disableOverlay: false
-});
-
-export const FileCardImageView = withAnalyticsEvents()(withFileAttributes(FileCardImageViewBase));
+});

package/dist/es2019/files/index.js

@@ -1 +1 @@
-export { FileCardImageView, FileCardImageViewBase } from './cardImageView';
+export { FileCardImageView } from './cardImageView';

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

@@ -1,22 +1,11 @@
 import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
-export const relevantFeatureFlagNames = ['newCardExperience', 'poll_intervalMs', 'poll_maxAttempts', 'poll_backoffFactor', 'poll_maxIntervalMs', 'captions'];
-export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, {
-  cardPreview,
-  error
-} = {}) => {
+export const relevantFeatureFlagNames = ['newCardExperience', 'captions'];
+export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, error) => {
   const fireEvent = payload => fireMediaCardEvent(payload, createAnalyticsEvent);
 
   switch (status) {
     case 'complete':
-      /**
-       * A Card that is considered Complete and has no preview,
-       * reflects an expected behaviour, and thus a legitimate
-       * success case to be logged.
-       */
-      if (!(cardPreview !== null && cardPreview !== void 0 && cardPreview.dataURI)) {
-        fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes));
-      }
-
+      fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes));
       break;
 
     case 'failed-processing':

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

@@ -7,6 +7,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * imported file only contains and depends on only what is required for it to function.
  */
 import React from 'react';
+import { imageResizeModeToFileImageMode } from '@atlaskit/media-client';
 import { MediaImage } from '@atlaskit/media-ui';
 import SpinnerIcon from '@atlaskit/spinner';
 import { getRequestedDimensions } from '../../utils/getDataURIDimension';
@@ -33,7 +34,7 @@ export const CardSSRView = ({
     } = getRequestedDimensions({
       dimensions
     });
-    const mode = resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode;
+    const mode = imageResizeModeToFileImageMode(resizeMode);
     dataURI = mediaClient.getImageUrlSync(identifier.id, {
       collection: identifier.collectionName,
       mode,
@@ -53,7 +54,7 @@ export const CardSSRView = ({
     breakpoint: calculateBreakpoint(dimensions),
     shouldUsePointerCursor: Boolean(dataURI),
     displayBackground: shouldDisplayBackground,
-    disableOverlay: disableOverlay,
+    disableOverlay: !!disableOverlay,
     selected: false,
     "data-testid": "media-card-view"
   }, /*#__PURE__*/React.createElement(CardImageContainer, {

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

@@ -17,6 +17,11 @@ export class CardPreviewCacheImpl {
       this.previewCache.set(cacheKey, cardPreview);
     });
 
+    _defineProperty(this, "remove", (id, dimensions) => {
+      const cacheKey = getCacheKey(id, dimensions);
+      this.previewCache.remove(cacheKey);
+    });
+
     this.previewCache = previewCache;
   }
 

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

@@ -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 { getCardPreviewFromFilePreview, getCardPreviewFromBackend } 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 { 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,33 @@ 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;
+
+    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 +53,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 +101,29 @@ 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.
-   */
-
 
-  cardPreview = { ...cardPreview,
-    dataURI: addContextToDataURI(cardPreview.dataURI)
-  }; // We store new cardPreview into cache
-
-  cardPreviewCache.set(id, dimensions, cardPreview);
-  return cardPreview;
+  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,3 +1,4 @@
+export const isFinalCardStatus = status => ['complete', 'error', 'failed-processing'].includes(status);
 export const getCardStatus = (fileStatus, {
   hasFilesize,
   isPreviewable,