@atlaskit/media-card 70.10.0 → 72.1.0

package/dist/es2019/root/cardView.js

@@ -12,7 +12,7 @@ import { Wrapper } from './styled';
 import { createAndFireMediaCardEvent } from '../utils/analytics';
 import { attachDetailsToActions } from '../actions';
 import { getErrorMessage } from '../utils/getErrorMessage';
-import { toHumanReadableMediaSize } from '@atlaskit/media-ui';
+import { toHumanReadableMediaSize, messages } from '@atlaskit/media-ui';
 import { NewFileExperienceWrapper, CardImageContainer, calcBreakpointSize } from './ui/styled';
 import { ImageRenderer } from './ui/imageRenderer/imageRenderer';
 import { TitleBox } from './ui/titleBox/titleBox';
@@ -26,10 +26,10 @@ import Tooltip from '@atlaskit/tooltip';
 import { IconWrapper } from './ui/iconWrapper/styled';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import SpinnerIcon from '@atlaskit/spinner';
-import { PreviewUnavailable, CreatingPreview, RateLimited, PreviewCurrentlyUnavailable } from './ui/iconMessage';
-import { LoadingRateLimited } from './ui/loadingRateLimited/loadingRateLimited';
+import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUnavailable, FailedToLoad } from './ui/iconMessage';
 import { isRateLimitedError, isPollingError } from '@atlaskit/media-client';
-export const newFileExperienceClassName = 'new-file-experience-wrapper';
+import { newFileExperienceClassName } from './card/cardConstants';
+import { isUploadError } from '../errors';
 
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
@@ -40,15 +40,37 @@ export class CardViewBase extends React.Component {
     super(...args);
 
     _defineProperty(this, "state", {
-      isImageFailedToLoad: false
+      didImageRender: false
     });
 
     _defineProperty(this, "divRef", /*#__PURE__*/React.createRef());
 
-    _defineProperty(this, "onImageLoadError", () => {
+    _defineProperty(this, "onImageLoad", () => {
+      const {
+        onImageLoad
+      } = this.props; // We render the icon & icon message always, even if there is dataURI 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
+      // behind the thumbnail in case the image has transparency.
+      // It is less likely that root component replaces a suceeded dataURI 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({
-        isImageFailedToLoad: true
+        didImageRender: true
       });
+      onImageLoad && onImageLoad();
+    });
+
+    _defineProperty(this, "onImageError", () => {
+      const {
+        onImageError
+      } = this.props;
+      this.setState({
+        didImageRender: false
+      });
+      onImageError && onImageError();
     });
 
     _defineProperty(this, "saveElementWidth", () => {
@@ -87,17 +109,14 @@ export class CardViewBase extends React.Component {
         dataURI
       } = this.props;
       const {
-        mediaType,
         name
       } = metadata || {};
       const shouldUsePointerCursor = status !== 'error' && status !== 'failed-processing';
-      const shouldDisplayBackground = !dataURI || !disableOverlay;
+      const shouldDisplayBackground = !dataURI || !disableOverlay || status === 'error' || status === 'failed-processing';
       const isPlayButtonClickable = !!(this.shouldRenderPlayButton() && disableOverlay);
-      const isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Make tooltip optional for media singles - images, videos.
-      // Intention is to show full file name when it's truncate in titlebox,
-      // and to hide it when no titlebox exists.
+      const isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Disable tooltip for Media Single
 
-      const shouldDisplayTooltip = !!name && !disableOverlay;
+      const shouldDisplayTooltip = !disableOverlay;
       return /*#__PURE__*/React.createElement(NewFileExperienceWrapper, {
         className: newFileExperienceClassName,
         "data-testid": testId || 'media-card-view',
@@ -106,7 +125,6 @@ export class CardViewBase extends React.Component {
         onClick: onClick,
         onMouseEnter: onMouseEnter,
         innerRef: this.divRef,
-        mediaType: mediaType,
         breakpoint: this.breakpoint,
         shouldUsePointerCursor: shouldUsePointerCursor,
         disableOverlay: !!disableOverlay,
@@ -166,7 +184,9 @@ export class CardViewBase extends React.Component {
         actions: actionsWithDetails,
         disableOverlay: disableOverlay,
         previewOrientation: previewOrientation,
-        alt: alt
+        alt: alt,
+        onImageLoad: this.onImageLoad,
+        onImageError: this.onImageError
       });
     });
 
@@ -177,23 +197,23 @@ export class CardViewBase extends React.Component {
         metadata,
         disableOverlay,
         error,
-        selectable
+        selectable,
+        disableAnimation
       } = this.props;
       const {
         name,
         mediaType
       } = metadata || {};
       const {
-        isImageFailedToLoad
+        didImageRender
       } = this.state;
       const isZeroSize = !!(metadata && metadata.size === 0);
       const defaultConfig = {
-        renderTypeIcon: isImageFailedToLoad || !dataURI,
-        renderImageRenderer: !!dataURI && !isImageFailedToLoad,
+        renderTypeIcon: !didImageRender,
+        renderImageRenderer: !!dataURI,
         renderPlayButton: !!dataURI && mediaType === 'video',
         renderBlanket: !disableOverlay,
-        renderTitleBox: !!name && !isImageFailedToLoad && !disableOverlay,
-        renderFailedTitleBox: !!isImageFailedToLoad,
+        renderTitleBox: !disableOverlay && !!name,
         renderTickBox: !disableOverlay && !!selectable
       };
 
@@ -206,46 +226,61 @@ export class CardViewBase extends React.Component {
           };
 
         case 'processing':
+        case 'loading-preview':
           return { ...defaultConfig,
-            iconMessage: (isImageFailedToLoad || !dataURI) && !isZeroSize ? /*#__PURE__*/React.createElement(CreatingPreview, null) : undefined
+            iconMessage: !didImageRender && !isZeroSize ? /*#__PURE__*/React.createElement(CreatingPreview, {
+              disableAnimation: disableAnimation
+            }) : undefined
           };
 
         case 'complete':
-          return { ...defaultConfig
-          };
+          return defaultConfig;
 
         case 'error':
-          if (error && isPollingError(error)) {
-            return { ...defaultConfig,
-              renderTitleBox: !!name,
-              renderFailedTitleBox: false,
-              iconMessage: !!metadata && !isZeroSize ? /*#__PURE__*/React.createElement(PreviewCurrentlyUnavailable, null) : undefined
-            };
-          } else if (isRateLimitedError(error) && !disableOverlay) {
-            return {
-              renderTypeIcon: !!metadata && (isImageFailedToLoad || !dataURI),
-              renderTitleBox: !!metadata,
-              iconMessage: !!metadata ? /*#__PURE__*/React.createElement(RateLimited, null) : undefined,
-              renderLoadingRateLimited: !metadata
-            };
+        case 'failed-processing':
+          const baseErrorConfig = { ...defaultConfig,
+            renderTypeIcon: true,
+            renderImageRenderer: false,
+            renderTitleBox: false,
+            renderPlayButton: false
+          };
+          let iconMessage;
+          let customTitleMessage;
+          const {
+            secondaryError
+          } = error || {};
+
+          if (isRateLimitedError(secondaryError) || isPollingError(secondaryError)) {
+            iconMessage = /*#__PURE__*/React.createElement(PreviewCurrentlyUnavailable, null);
+          } else if (isUploadError(error)) {
+            iconMessage = /*#__PURE__*/React.createElement(FailedToUpload, null);
+            customTitleMessage = messages.failed_to_upload;
+          } else if (!metadata) {
+            iconMessage = /*#__PURE__*/React.createElement(FailedToLoad, null);
           } else {
-            return { ...defaultConfig,
-              renderTitleBox: defaultConfig.renderTitleBox && !!dataURI,
-              renderFailedTitleBox: !!isImageFailedToLoad || !dataURI
+            iconMessage = /*#__PURE__*/React.createElement(PreviewUnavailable, null);
+          }
+
+          if (!disableOverlay) {
+            const renderFailedTitleBox = !name || !!customTitleMessage;
+            return { ...baseErrorConfig,
+              renderTitleBox: !!name && !customTitleMessage,
+              renderFailedTitleBox,
+              iconMessage: !renderFailedTitleBox ? iconMessage : undefined,
+              customTitleMessage
             };
           }
 
-        case 'failed-processing':
-          return { ...defaultConfig,
-            renderFailedTitleBox: !!isImageFailedToLoad || !dataURI && !metadata,
-            iconMessage: !!metadata && !isZeroSize ? /*#__PURE__*/React.createElement(PreviewUnavailable, null) : undefined
+          return { ...baseErrorConfig,
+            iconMessage
           };
 
         case 'loading':
         default:
           return { ...defaultConfig,
+            renderPlayButton: false,
             renderTypeIcon: false,
-            renderSpinner: true
+            renderSpinner: !didImageRender
           };
       }
     });
@@ -263,7 +298,7 @@ export class CardViewBase extends React.Component {
         renderFailedTitleBox,
         renderTickBox,
         isFixedBlanket,
-        renderLoadingRateLimited
+        customTitleMessage
       } = this.getRenderConfigByStatus();
       const {
         progress,
@@ -282,7 +317,7 @@ export class CardViewBase extends React.Component {
         "data-test-status": status,
         "data-test-progress": progress,
         "data-test-selected": selected ? true : undefined
-      }, 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(), renderProgressBar && this.renderProgressBar(!renderTitleBox), renderLoadingRateLimited && /*#__PURE__*/React.createElement(LoadingRateLimited, null), renderTickBox && this.renderTickBox()), this.renderActionsBar());
+      }, 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());
     });
   }
 
@@ -299,13 +334,14 @@ export class CardViewBase extends React.Component {
   }) {
     const {
       dataURI
-    } = this.props;
+    } = this.props; // We should only switch didImageRender to false
+    // when dataURI goes undefined, not when it is updated.
+    // as this method could be triggered after onImageLoad callback,
+    // falling on a race condition
 
-    if (prevDataURI !== dataURI) {
-      this.setState({
-        isImageFailedToLoad: false
-      });
-    }
+    prevDataURI && !dataURI && this.setState({
+      didImageRender: false
+    });
   }
 
   // This width is only used to calculate breakpoints, dimensions are passed down as
@@ -424,9 +460,10 @@ export class CardViewBase extends React.Component {
     });
   }
 
-  renderFailedTitleBox() {
+  renderFailedTitleBox(customMessage) {
     return /*#__PURE__*/React.createElement(FailedTitleBox, {
-      breakpoint: this.breakpoint
+      breakpoint: this.breakpoint,
+      customMessage: customMessage
     });
   }
 
@@ -451,17 +488,20 @@ export class CardViewBase extends React.Component {
       alt,
       resizeMode,
       onDisplayImage,
-      mediaItemType
+      nativeLazyLoad,
+      forceSyncDisplay
     } = this.props;
     return !!dataURI && /*#__PURE__*/React.createElement(ImageRenderer, {
       dataURI: dataURI,
       mediaType: mediaType,
-      mediaItemType: mediaItemType,
       previewOrientation: previewOrientation,
       alt: alt,
       resizeMode: resizeMode,
       onDisplayImage: onDisplayImage,
-      onImageError: this.onImageLoadError
+      onImageLoad: this.onImageLoad,
+      onImageError: this.onImageError,
+      nativeLazyLoad: nativeLazyLoad,
+      forceSyncDisplay: forceSyncDisplay
     });
   }
 

package/dist/es2019/root/index.js

@@ -1 +1,2 @@
-export { default as Card } from './card/cardLoader';
+export { default as Card } from './card/cardLoader';
+export { default as MediaInlineCard } from './inline/loader';

package/dist/es2019/root/inline/loader.js

@@ -1,30 +1,31 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { InlineCardResolvingView } from '@atlaskit/media-ui';
-export default class InlineMediaCardLoader extends React.PureComponent {
+import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
+export default class MediaInlineCardLoader extends React.PureComponent {
   constructor(...args) {
     super(...args);
 
     _defineProperty(this, "state", {
-      InlineMediaCard: InlineMediaCardLoader.InlineMediaCard
+      MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
+      ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
     });
   }
 
   async componentDidMount() {
-    if (!this.state.InlineMediaCard) {
+    if (!this.state.MediaInlineCard) {
       try {
         const [mediaClient, cardModule, mediaCardErrorBoundaryModule] = await Promise.all([import(
         /* webpackChunkName: "@atlaskit-internal_media-client" */
         '@atlaskit/media-client'), import(
         /* webpackChunkName: "@atlaskit-internal_inline-media-card" */
-        './inlineMediaCard'), import(
+        './mediaInlineCard'), import(
         /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */
         '../media-card-analytics-error-boundary')]);
-        InlineMediaCardLoader.InlineMediaCard = mediaClient.withMediaClient(cardModule.InlineMediaCard);
-        InlineMediaCardLoader.ErrorBoundary = mediaCardErrorBoundaryModule.default;
+        MediaInlineCardLoader.MediaInlineCard = mediaClient.withMediaClient(cardModule.MediaInlineCard);
+        MediaInlineCardLoader.ErrorBoundary = mediaCardErrorBoundaryModule.default;
         this.setState({
-          InlineMediaCard: InlineMediaCardLoader.InlineMediaCard,
-          ErrorBoundary: InlineMediaCardLoader.ErrorBoundary
+          MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
+          ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
         });
       } catch (error) {}
     }
@@ -32,19 +33,19 @@ export default class InlineMediaCardLoader extends React.PureComponent {
 
   render() {
     const {
-      InlineMediaCard,
+      MediaInlineCard,
       ErrorBoundary
     } = this.state;
 
-    if (!InlineMediaCard || !ErrorBoundary) {
-      return /*#__PURE__*/React.createElement(InlineCardResolvingView, {
-        url: ""
+    if (!MediaInlineCard || !ErrorBoundary) {
+      return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
+        message: ""
       });
     }
 
-    return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(InlineMediaCard, this.props));
+    return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(MediaInlineCard, this.props));
   }
 
 }
 
-_defineProperty(InlineMediaCardLoader, "displayName", 'InlineMediaCardLoader');
+_defineProperty(MediaInlineCardLoader, "displayName", 'MediaInlineCardLoader');

package/dist/es2019/root/inline/mediaInlineCard.js

@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { injectIntl } from 'react-intl';
+import { MediaInlineCardLoadedView, MediaInlineCardLoadingView, MediaInlineCardErroredView, messages } from '@atlaskit/media-ui';
+import { MediaTypeIcon } from '@atlaskit/media-ui/media-type-icon';
+import { MediaViewer } from '@atlaskit/media-viewer';
+import Tooltip from '@atlaskit/tooltip';
+import { formatDate } from '@atlaskit/media-ui/formatDate';
+// UI component which renders an inline link in the appropiate state based on a media file
+export const MediaInlineCardInternal = ({
+  mediaClient,
+  identifier,
+  shouldOpenMediaViewer,
+  isSelected,
+  onClick,
+  mediaViewerDataSource,
+  intl
+}) => {
+  const [fileState, setFileState] = useState();
+  const [isErrored, setIsErrored] = useState(false);
+  const [isMediaViewerVisible, setMediaViewerVisible] = useState(false);
+
+  const onMediaInlineCardClick = event => {
+    if (shouldOpenMediaViewer) {
+      setMediaViewerVisible(true);
+    }
+
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
+  const onMediaViewerClose = () => setMediaViewerVisible(false);
+
+  const renderMediaViewer = () => {
+    if (isMediaViewerVisible) {
+      const dataSource = mediaViewerDataSource || {
+        list: []
+      };
+      return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
+        collectionName: identifier.collectionName || '',
+        dataSource: dataSource,
+        mediaClientConfig: mediaClient.mediaClientConfig,
+        selectedItem: identifier,
+        onClose: onMediaViewerClose
+      }), document.body);
+    }
+
+    return null;
+  };
+
+  useEffect(() => {
+    mediaClient.file.getFileState(identifier.id, {
+      collectionName: identifier.collectionName
+    }).subscribe({
+      next: fileState => {
+        setFileState(fileState);
+      },
+      error: () => {
+        setIsErrored(true);
+      }
+    });
+  }, [identifier.collectionName, identifier.id, mediaClient.file]);
+
+  if (!fileState) {
+    return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
+      message: intl.formatMessage(messages.loading_file),
+      isSelected: isSelected
+    });
+  }
+
+  if (isErrored) {
+    return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
+      message: intl.formatMessage(messages.couldnt_load_file),
+      isSelected: isSelected
+    });
+  }
+
+  if (fileState.status === 'error') {
+    return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
+      message: fileState.message || '',
+      isSelected: isSelected
+    });
+  }
+
+  if (fileState.status === 'failed-processing') {
+    return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
+      message: intl.formatMessage(messages.couldnt_load_file),
+      isSelected: isSelected
+    });
+  }
+
+  if (fileState.status === 'uploading') {
+    return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
+      message: fileState.name,
+      isSelected: isSelected
+    });
+  }
+
+  const {
+    mediaType,
+    name
+  } = fileState;
+  const linkIcon = /*#__PURE__*/React.createElement(MediaTypeIcon, {
+    testId: 'media-inline-card-file-type-icon',
+    size: "small",
+    type: mediaType
+  });
+  const mediaViewer = renderMediaViewer();
+  let formattedDate;
+
+  if (fileState.createdAt) {
+    const {
+      locale = 'en'
+    } = intl || {
+      locale: 'en'
+    };
+    formattedDate = formatDate(fileState.createdAt, locale);
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+    position: "bottom",
+    content: formattedDate,
+    tag: "span"
+  }, /*#__PURE__*/React.createElement(MediaInlineCardLoadedView, {
+    icon: linkIcon,
+    title: name,
+    onClick: onMediaInlineCardClick,
+    isSelected: isSelected
+  })), mediaViewer);
+};
+export const MediaInlineCard = injectIntl(MediaInlineCardInternal);

package/dist/es2019/root/inlinePlayer.js

@@ -7,8 +7,6 @@ import { CustomMediaPlayer, InactivityDetector } from '@atlaskit/media-ui';
 import { InlinePlayerWrapper } from './styled';
 import { defaultImageCardDimensions } from '..';
 import { CardLoading } from '../utils/lightCards/cardLoading';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { createAndFireMediaCardEvent } from '../utils/analytics';
 export const inlinePlayerClassName = 'media-card-inline-player';
 export const getPreferredVideoArtifact = fileState => {
   if (fileState.status === 'processed' || fileState.status === 'processing') {
@@ -193,9 +191,10 @@ export class InlinePlayerBase extends Component {
       onClick: onClick,
       innerRef: forwardRef || undefined,
       dimensions: dimensions
-    }, /*#__PURE__*/React.createElement(InactivityDetector, null, () => /*#__PURE__*/React.createElement(CustomMediaPlayer, {
+    }, /*#__PURE__*/React.createElement(InactivityDetector, null, checkMouseMovement => /*#__PURE__*/React.createElement(CustomMediaPlayer, {
       type: "video",
       src: fileSrc,
+      fileId: identifier.id,
       isAutoPlay: true,
       isHDAvailable: false,
       onDownloadClick: this.onDownloadClick,
@@ -203,7 +202,8 @@ export class InlinePlayerBase extends Component {
       lastWatchTimeConfig: {
         contentId: identifier.id
       },
-      originalDimensions: originalDimensions
+      originalDimensions: originalDimensions,
+      showControls: checkMouseMovement
     })));
   }
 
@@ -218,12 +218,4 @@ const InlinePlayerForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => {
     forwardRef: ref
   }));
 });
-export const InlinePlayer = withAnalyticsEvents({
-  onClick: createAndFireMediaCardEvent({
-    eventType: 'ui',
-    action: 'clicked',
-    actionSubject: 'mediaCard',
-    actionSubjectId: 'mediaCardInlinePlayer',
-    attributes: {}
-  })
-})(InlinePlayerForwardRef);
+export const InlinePlayer = InlinePlayerForwardRef;

package/dist/es2019/root/ui/iconMessage/index.js

@@ -13,16 +13,20 @@ export const IconMessage = ({
     reducedFont: reducedFont
   }, /*#__PURE__*/React.createElement(FormattedMessage, messageDescriptor));
 };
-export const CreatingPreview = props => /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
+export const CreatingPreview = ({
+  disableAnimation
+}) => /*#__PURE__*/React.createElement(IconMessage, {
   messageDescriptor: messages.creating_preview,
-  animated: true
-}));
+  animated: !disableAnimation
+});
 export const PreviewUnavailable = props => /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
   messageDescriptor: messages.preview_unavailable
 }));
-export const RateLimited = props => /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
-  messageDescriptor: messages.preview_rateLimited,
-  reducedFont: true
+export const FailedToLoad = props => /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
+  messageDescriptor: messages.failed_to_load
+}));
+export const FailedToUpload = props => /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
+  messageDescriptor: messages.failed_to_upload
 }));
 export const PreviewCurrentlyUnavailable = props => /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
   messageDescriptor: messages.preview_currently_unavailable,