@atlaskit/media-card 70.10.0 → 72.1.0

package/dist/es2019/errors.js

@@ -27,13 +27,53 @@ export class RemotePreviewError extends MediaCardError {
     this.secondaryError = secondaryError;
   }
 
+}
+export class SsrPreviewError extends MediaCardError {
+  constructor(primaryReason, secondaryError) {
+    super(primaryReason, secondaryError);
+    this.primaryReason = primaryReason;
+    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 && error.primaryReason === 'upload';

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

@@ -9,11 +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 class FileCardImageViewBase extends Component {
+export const fileCardImageViewSelectedSelector = 'media-file-card-view-selected';
+export class FileCardImageView extends Component {
   constructor(...args) {
     super(...args);
 
@@ -34,7 +32,7 @@ export class FileCardImageViewBase extends Component {
       // immediately, even if there's no image preview
 
 
-      const isZeroSize = fileSize === '' && status === 'processing';
+      const isZeroSize = fileSize === '' && ['processing', 'loading-preview'].includes(status);
 
       if (mediaType !== 'video' && !this.isFileCardImageReadyForDisplay && !isZeroSize) {
         return this.renderLoadingContents();
@@ -140,36 +138,6 @@ export class FileCardImageViewBase extends Component {
       })));
     });
 
-    _defineProperty(this, "onImageLoad", () => {
-      const {
-        createAnalyticsEvent,
-        fileAttributes
-      } = this.props;
-
-      if (fileAttributes && this.shouldFireEvent(RenderEventAction.SUCCEEDED)) {
-        fireMediaCardEvent(getRenderSucceededEventPayload(fileAttributes), createAnalyticsEvent);
-      }
-    });
-
-    _defineProperty(this, "onImageError", () => {
-      const {
-        fileAttributes
-      } = this.props;
-
-      if (fileAttributes && this.shouldFireEvent(RenderEventAction.FAILED)) {
-        const {
-          createAnalyticsEvent,
-          mediaItemType
-        } = this.props;
-
-        if (mediaItemType === 'file') {
-          fireMediaCardEvent(getRenderFailedFileUriPayload(fileAttributes), createAnalyticsEvent);
-        } else if (mediaItemType === 'external-image') {
-          fireMediaCardEvent(getRenderFailedExternalUriPayload(fileAttributes), createAnalyticsEvent);
-        }
-      }
-    });
-
     _defineProperty(this, "renderMediaImage", () => {
       const {
         status,
@@ -179,7 +147,9 @@ export class FileCardImageViewBase extends Component {
         mimeType,
         previewOrientation,
         onDisplayImage,
-        alt
+        alt,
+        onImageLoad,
+        onImageError
       } = this.props;
 
       if (!shouldDisplayImageThumbnail(status, mediaItemType, dataURI, mediaType, mimeType)) {
@@ -197,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,
@@ -298,7 +266,7 @@ export class FileCardImageViewBase extends Component {
       selectable: selectable,
       selected: selected,
       mediaType: mediaType,
-      className: fileCardImageViewSelector
+      className: `${fileCardImageViewSelector} ${selected ? fileCardImageViewSelectedSelector : ''}`
     }, this.renderCardContents());
   }
 
@@ -307,7 +275,7 @@ export class FileCardImageViewBase extends Component {
       dataURI,
       status
     } = this.props;
-    return !!dataURI || !['loading', 'processing'].includes(status);
+    return !!dataURI || !['loading', 'processing', 'loading-preview'].includes(status);
   }
 
   get isCropped() {
@@ -326,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/index.js

@@ -1,7 +1,7 @@
-export { default as Card } from './root/card/cardLoader';
+export { Card, MediaInlineCard } from './root';
 export { CardLoading } from './utils/lightCards/cardLoading';
 export { CardError } from './utils/lightCards/cardError';
 export { defaultImageCardDimensions } from './utils/cardDimensions';
-export { fileCardImageViewSelector } from './files/cardImageView';
+export { fileCardImageViewSelector, fileCardImageViewSelectedSelector } from './files/cardImageView';
 export { inlinePlayerClassName } from './root/inlinePlayer';
-export { newFileExperienceClassName } from './root/cardView';
+export { newFileExperienceClassName } from './root/card/cardConstants';

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

@@ -1,30 +1,36 @@
-import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload } from '../../utils/analytics';
-export const relevantFeatureFlagNames = ['newCardExperience', 'poll_intervalMs', 'poll_maxAttempts', 'poll_backoffFactor', 'poll_maxIntervalMs', 'captions'];
-export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, {
-  cardPreview,
-  error
-} = {}) => {
+import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
+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));
-      }
-
+      fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes));
       break;
 
     case 'failed-processing':
-      fireEvent(getRenderFailedFileStatusPayload(fileAttributes));
+      fireEvent(getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes));
       break;
 
     case 'error':
-      error && fireEvent(getRenderErrorEventPayload(fileAttributes, error));
+      error && fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error));
       break;
   }
+};
+export const fireCommencedEvent = (createAnalyticsEvent, fileAttributes, performanceAttributes) => {
+  fireMediaCardEvent(getRenderCommencedEventPayload(fileAttributes, performanceAttributes), createAnalyticsEvent);
+};
+export const fireCopiedEvent = (createAnalyticsEvent, fileId, cardRef) => {
+  if (typeof window.getSelection === 'function') {
+    var _selection$containsNo;
+
+    const selection = window.getSelection();
+
+    if (selection !== null && selection !== void 0 && (_selection$containsNo = selection.containsNode) !== null && _selection$containsNo !== void 0 && _selection$containsNo.call(selection, cardRef, true)) {
+      fireMediaCardEvent(getCopiedFilePayload(fileId), createAnalyticsEvent);
+    }
+  }
+};
+export const fireScreenEvent = (createAnalyticsEvent, fileAttributes) => {
+  fireMediaCardEvent(getRenderPreviewableCardPayload(fileAttributes), createAnalyticsEvent);
 };

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

@@ -0,0 +1 @@
+export const newFileExperienceClassName = 'new-file-experience-wrapper';

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

@@ -1,59 +1,53 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useContext } from 'react';
+import { useMemoizeFeatureFlags } from '@atlaskit/media-common';
+import Loadable from 'react-loadable';
 import { CardLoading } from '../..';
-export default class CardLoader extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+const MediaCardContext = /*#__PURE__*/React.createContext({});
 
-    _defineProperty(this, "state", {
-      Card: CardLoader.Card,
-      MediaCardErrorBoundary: CardLoader.MediaCardErrorBoundary
-    });
-  }
+const CardLoadingWithContext = () => {
+  const props = useContext(MediaCardContext);
+  return /*#__PURE__*/React.createElement(CardLoading, props);
+};
 
-  async componentDidMount() {
-    if (!this.state.Card) {
-      try {
-        const [mediaClient, cardModule, mediaCardErrorBoundaryModule] = await Promise.all([import(
-        /* webpackChunkName: "@atlaskit-internal_media-client" */
-        '@atlaskit/media-client'), import(
-        /* webpackChunkName: "@atlaskit-internal_media-card" */
-        './index'), import(
-        /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */
-        '../media-card-analytics-error-boundary')]);
-        CardLoader.Card = mediaClient.withMediaClient(cardModule.Card, this.props.featureFlags);
-        CardLoader.MediaCardErrorBoundary = mediaCardErrorBoundaryModule.default;
-        this.setState({
-          Card: CardLoader.Card,
-          MediaCardErrorBoundary: CardLoader.MediaCardErrorBoundary
-        });
-      } catch (error) {// TODO [MS-2278]: Add operational error to catch async import error
-      }
-    }
-  }
+const MediaCard = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_media-card" */
+  './index').then(mod => mod.Card),
+  loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null)
+});
+const MediaCardErrorBoundary = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */
+  '../media-card-analytics-error-boundary').then(mod => mod.default),
+  loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null)
+});
+const MediaCardWithMediaClient = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_media-client" */
+  '@atlaskit/media-client'),
+  loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null),
+  render: (loaded, props) => /*#__PURE__*/React.createElement(CardWithMediaClient, _extends({}, props, {
+    withMediaClient: loaded.withMediaClient
+  }))
+});
 
-  render() {
-    const {
-      dimensions,
-      testId,
-      featureFlags
-    } = this.props;
-    const {
-      Card,
-      MediaCardErrorBoundary
-    } = this.state;
+const CardWithMediaClient = props => {
+  const {
+    withMediaClient,
+    featureFlags
+  } = props;
+  const memoizedFeatureFlags = useMemoizeFeatureFlags(featureFlags);
+  const Card = React.useMemo(() => {
+    return withMediaClient(MediaCard, memoizedFeatureFlags);
+  }, [withMediaClient, memoizedFeatureFlags]);
+  return /*#__PURE__*/React.createElement(MediaCardErrorBoundary, null, /*#__PURE__*/React.createElement(Card, props));
+};
 
-    if (!Card || !MediaCardErrorBoundary) {
-      return /*#__PURE__*/React.createElement(CardLoading, {
-        testId: testId,
-        dimensions: dimensions,
-        featureFlags: featureFlags
-      });
-    }
+const CardLoader = props => {
+  return /*#__PURE__*/React.createElement(MediaCardContext.Provider, {
+    value: props
+  }, /*#__PURE__*/React.createElement(MediaCardWithMediaClient, props));
+};
 
-    return /*#__PURE__*/React.createElement(MediaCardErrorBoundary, null, /*#__PURE__*/React.createElement(Card, this.props));
-  }
-
-}
-
-_defineProperty(CardLoader, "displayName", 'AsyncCard');
+export default CardLoader;

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,