@atlaskit/media-card 72.0.0 → 73.1.1

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

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { Component } from 'react';
+import React, { Component, createRef } from 'react';
 import ReactDOM from 'react-dom';
 import { version as packageVersion, name as packageName } from '../../version.json';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -7,11 +7,11 @@ import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import { globalMediaEventEmitter, isDifferentIdentifier, isFileIdentifier, RECENTS_COLLECTION, isImageRepresentationReady, isExternalImageIdentifier, imageResizeModeToFileImageMode } from '@atlaskit/media-client';
 import { MediaViewer } from '@atlaskit/media-viewer';
-import { IntlProvider, intlShape } from 'react-intl';
+import { injectIntl, IntlProvider } from 'react-intl-next';
 import { CardView } from '../cardView';
-import { ViewportDetector } from '../../utils/viewportDetector';
+import { ABS_VIEWPORT_ANCHOR_OFFSET_TOP, ViewportDetector, ViewportAnchor } from '../../utils/viewportDetector';
 import { getRequestedDimensions } from '../../utils/getDataURIDimension';
-import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview } from './getCardPreview';
+import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview, getSSRCardPreview, isLocalPreview, isSSRPreview, isSSRClientPreview, fetchAndCacheRemotePreview } from './getCardPreview';
 import { getFileDetails } from '../../utils/metadata';
 import { InlinePlayer } from '../inlinePlayer';
 import { getFileAttributes } from '../../utils/analytics';
@@ -19,6 +19,8 @@ import { isLocalPreviewError, MediaCardError, ensureMediaCardError, ImageLoadErr
 import { fireOperationalEvent, fireCommencedEvent, relevantFeatureFlagNames, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
 import getDocument from '../../utils/document';
 import { getCardStateFromFileState, createStateUpdater } from './cardState';
+import { isProcessedFileState } from '@atlaskit/media-client';
+import { getMediaFeatureFlag } from '@atlaskit/media-common';
 export class CardBase extends Component {
   // We initialise timeElapsedTillCommenced
   // to avoid extra branching on a possibly undefined value.
@@ -27,6 +29,10 @@ export class CardBase extends Component {
 
     _defineProperty(this, "hasBeenMounted", false);
 
+    _defineProperty(this, "viewportPreAnchorRef", /*#__PURE__*/createRef());
+
+    _defineProperty(this, "viewportPostAnchorRef", /*#__PURE__*/createRef());
+
     _defineProperty(this, "timeElapsedTillCommenced", performance.now());
 
     _defineProperty(this, "getImageURLParams", ({
@@ -88,6 +94,30 @@ export class CardBase extends Component {
       };
     });
 
+    _defineProperty(this, "setCacheSSRPreview", identifier => {
+      const {
+        mediaClient,
+        dimensions = {}
+      } = this.props;
+      fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions, this.getImageURLParams(identifier), this.getMediaBlobUrlAttrs(identifier)).catch(() => {// No need to log this error.
+        // If preview fails, it will be refetched later
+        //TODO: test this catch
+        // https://product-fabric.atlassian.net/browse/MEX-1071
+      });
+    });
+
+    _defineProperty(this, "resolveSSRPreview", (identifier, ssr) => {
+      const {
+        mediaClient
+      } = this.props;
+
+      try {
+        return getSSRCardPreview(ssr, mediaClient, identifier.id, this.getImageURLParams(identifier), this.getMediaBlobUrlAttrs(identifier));
+      } catch (e) {// TODO: log SSR reliability 'failed'
+        // https://product-fabric.atlassian.net/browse/MEX-770
+      }
+    });
+
     _defineProperty(this, "resolvePreview", async (identifier, fileState) => {
       try {
         const params = this.getCardPreviewParams(identifier, fileState);
@@ -133,18 +163,29 @@ export class CardBase extends Component {
         cardPreview
       } = this.state;
       const error = new ImageLoadError(cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source);
+      const isLocal = cardPreview && isLocalPreview(cardPreview);
+      const isSSR = cardPreview && isSSRClientPreview(cardPreview);
+
+      if (isLocal || isSSR) {
+        const updateState = {
+          cardPreview: undefined
+        };
+
+        if (isLocal) {
+          updateState.isBannedLocalPreview = true;
+          this.fireLocalPreviewErrorEvent(error);
+        }
+
+        if (isSSR) {// TODO: set SSR-client reliability 'failed'.
+          // https://product-fabric.atlassian.net/browse/MEX-770
+        }
 
-      if (cardPreview !== null && cardPreview !== void 0 && cardPreview.source && ['local', 'cache-local'].includes(cardPreview.source)) {
         const {
           identifier,
           dimensions = {}
         } = this.props;
         isFileIdentifier(identifier) && removeCardPreviewFromCache(identifier.id, dimensions);
-        this.safeSetState({
-          cardPreview: undefined,
-          isBannedLocalPreview: true
-        });
-        this.fireLocalPreviewErrorEvent(error);
+        this.safeSetState(updateState);
       } else {
         this.safeSetState({
           status: 'error',
@@ -225,7 +266,8 @@ export class CardBase extends Component {
 
       if (useInlinePlayer && isVideo && !!cardPreview) {
         this.setState({
-          isPlayingFile: true
+          isPlayingFile: true,
+          shouldAutoplay: true
         });
       } else if (shouldOpenMediaViewer) {
         let mediaViewerSelectedItem;
@@ -272,11 +314,15 @@ export class CardBase extends Component {
         testId,
         originalDimensions
       } = this.props;
+      const {
+        shouldAutoplay
+      } = this.state;
       return /*#__PURE__*/React.createElement(InlinePlayer, {
         mediaClient: mediaClient,
         dimensions: dimensions,
         originalDimensions: originalDimensions,
         identifier: identifier,
+        autoplay: !!shouldAutoplay,
         onError: this.onInlinePlayerError,
         onClick: this.onClick,
         selected: selected,
@@ -360,7 +406,8 @@ export class CardBase extends Component {
         testId,
         featureFlags,
         titleBoxBgColor,
-        titleBoxIcon
+        titleBoxIcon,
+        ssr
       } = this.props;
       const {
         mediaItemType
@@ -376,7 +423,8 @@ export class CardBase extends Component {
           orientation: 1
         },
         error,
-        cardRef
+        cardRef,
+        isCardVisible
       } = this.state;
       const {
         metadata
@@ -386,7 +434,12 @@ export class CardBase extends Component {
         onDisplayImage,
         actions,
         onMouseEnter
-      } = this;
+      } = this; // Card can be artificially turned visible before entering the viewport
+      // For example, when we have the image in cache
+
+      const nativeLazyLoad = isLazy && !isCardVisible; // Force Media Image to always display img for SSR
+
+      const forceSyncDisplay = !!ssr;
       const card = /*#__PURE__*/React.createElement(CardView, {
         status: status,
         error: error,
@@ -412,12 +465,22 @@ export class CardBase extends Component {
         titleBoxBgColor: titleBoxBgColor,
         titleBoxIcon: titleBoxIcon,
         onImageError: this.onImageError,
-        onImageLoad: this.onImageLoad
+        onImageLoad: this.onImageLoad,
+        nativeLazyLoad: nativeLazyLoad,
+        forceSyncDisplay: forceSyncDisplay
       });
       return isLazy ? /*#__PURE__*/React.createElement(ViewportDetector, {
-        targetRef: cardRef,
+        cardEl: cardRef,
+        preAnchorRef: this.viewportPreAnchorRef,
+        postAnchorRef: this.viewportPostAnchorRef,
         onVisible: this.onCardInViewport
-      }, card) : card;
+      }, /*#__PURE__*/React.createElement(ViewportAnchor, {
+        ref: this.viewportPreAnchorRef,
+        offsetTop: -ABS_VIEWPORT_ANCHOR_OFFSET_TOP
+      }), card, /*#__PURE__*/React.createElement(ViewportAnchor, {
+        ref: this.viewportPostAnchorRef,
+        offsetTop: ABS_VIEWPORT_ANCHOR_OFFSET_TOP
+      })) : card;
     });
 
     _defineProperty(this, "onCardInViewport", () => {
@@ -466,7 +529,8 @@ export class CardBase extends Component {
 
     const {
       identifier: _identifier,
-      dimensions: _dimensions = {}
+      dimensions: _dimensions = {},
+      ssr: _ssr
     } = this.props;
 
     if (isFileIdentifier(_identifier)) {
@@ -474,6 +538,11 @@ export class CardBase extends Component {
         id
       } = _identifier;
       _cardPreview = getCardPreviewFromCache(id, _dimensions);
+
+      if (!_cardPreview && _ssr) {
+        this.fireCommencedEvent();
+        _cardPreview = this.resolveSSRPreview(_identifier, _ssr);
+      }
     } else if (isExternalImageIdentifier(_identifier)) {
       this.fireCommencedEvent();
       _status = 'loading-preview';
@@ -485,15 +554,19 @@ export class CardBase extends Component {
         orientation: 1,
         source: 'external'
       };
-    } //  If cardPreview is available from local cache, `isCardVisible`
-    //  should be true to avoid flickers during re-mount of the component
+    } // If cardPreview is available from local cache or external, `isCardVisible`
+    // should be true to avoid flickers during re-mount of the component
+    // should not be visible for SSR preview, otherwise we'll fire the metadata fetch from
+    // outside the viewport
+
 
+    const _isCardVisible = !this.props.isLazy || !!_cardPreview && !isSSRPreview(_cardPreview);
 
-    const isCardVisible = _cardPreview ? true : !this.props.isLazy;
     this.state = {
       status: _status,
-      isCardVisible,
+      isCardVisible: _isCardVisible,
       isPlayingFile: false,
+      shouldAutoplay: false,
       cardPreview: _cardPreview,
       cardRef: null,
       isBannedLocalPreview: false,
@@ -504,14 +577,22 @@ export class CardBase extends Component {
   componentDidMount() {
     this.hasBeenMounted = true;
     const {
-      isCardVisible
+      isCardVisible,
+      cardPreview
     } = this.state;
     const {
-      identifier
+      identifier,
+      ssr
     } = this.props;
 
     if (isCardVisible && isFileIdentifier(identifier)) {
       this.updateStateForIdentifier(identifier);
+    }
+
+    if (isCardVisible && !!ssr && !!cardPreview && isSSRClientPreview(cardPreview) && isFileIdentifier(identifier)) {
+      // Since the SSR preview brings the token in the query params,
+      // We need to fetch the remote preview to be able to cache it,
+      this.setCacheSSRPreview(identifier);
     } // we add a listener for each of the cards on the page
     // and then check if the triggered listener is from the card
     // that contains a div in current window.getSelection()
@@ -534,7 +615,9 @@ export class CardBase extends Component {
       mediaClient,
       identifier,
       dimensions,
-      featureFlags
+      featureFlags,
+      useInlinePlayer,
+      disableOverlay
     } = this.props;
     const {
       isCardVisible,
@@ -542,7 +625,8 @@ export class CardBase extends Component {
       status,
       fileState,
       isBannedLocalPreview,
-      previewDidRender
+      previewDidRender,
+      isPlayingFile
     } = this.state;
     const isDifferent = isDifferentIdentifier(prevIdentifier, identifier);
     const turnedVisible = !prevIsCardVisible && isCardVisible;
@@ -588,13 +672,28 @@ export class CardBase extends Component {
       this.resolvePreview(identifier, fileState);
     }
 
+    if (turnedVisible && this.props.ssr && !!cardPreview && isSSRClientPreview(cardPreview) && isFileIdentifier(identifier)) {
+      // Since the SSR preview brings the token in the query params,
+      // We need to fetch the remote preview to be able to cache it,
+      this.setCacheSSRPreview(identifier);
+    }
+
     if (previewDidRender && // We should't complete if status is uploading
-    ['loading', 'loading-preview', 'processing'].includes(status)) {
+    ['loading-preview', 'processing'].includes(status)) {
       this.safeSetState({
         status: 'complete'
       });
       this.unsubscribe();
     }
+
+    const isVideo = this.fileAttributes.fileMediatype === 'video';
+    const videoAvailableToPlay = fileState && isProcessedFileState(fileState);
+
+    if (isVideo && !isPlayingFile && disableOverlay && useInlinePlayer && videoAvailableToPlay && getMediaFeatureFlag('timestampOnVideo', this.props.featureFlags)) {
+      this.setState({
+        isPlayingFile: true
+      });
+    }
   }
 
   componentWillUnmount() {
@@ -649,7 +748,7 @@ export class CardBase extends Component {
     } = this.props;
     const {
       cardRef: element
-    } = this.state;
+    } = this.state || {};
     return getRequestedDimensions({
       dimensions,
       element
@@ -724,7 +823,7 @@ export class CardBase extends Component {
       mediaViewerSelectedItem
     } = this.state;
     const innerContent = /*#__PURE__*/React.createElement(React.Fragment, null, isPlayingFile ? this.renderInlinePlayer() : this.renderCard(), mediaViewerSelectedItem ? this.renderMediaViewer() : null);
-    return this.context.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
+    return this.props.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
       locale: "en"
     }, innerContent);
   }
@@ -740,11 +839,6 @@ _defineProperty(CardBase, "defaultProps", {
   featureFlags: {}
 });
 
-_defineProperty(CardBase, "contextTypes", {
-  // Required to detect a parent IntlProvider
-  intl: intlShape
-});
-
 export const Card = withMediaAnalyticsContext({
   packageVersion,
   packageName,
@@ -752,4 +846,6 @@ export const Card = withMediaAnalyticsContext({
   component: 'mediaCard'
 }, {
   filterFeatureFlags: relevantFeatureFlagNames
-})(withAnalyticsEvents()(CardBase));
+})(withAnalyticsEvents()(injectIntl(CardBase, {
+  enforceContext: false
+})));

package/dist/es2019/root/cardView.js

@@ -13,8 +13,7 @@ import { createAndFireMediaCardEvent } from '../utils/analytics';
 import { attachDetailsToActions } from '../actions';
 import { getErrorMessage } from '../utils/getErrorMessage';
 import { toHumanReadableMediaSize, messages } from '@atlaskit/media-ui';
-import { NewFileExperienceWrapper } from './ui/styled';
-import { CardImageContainer, calcBreakpointSize } from './ui/styledSSR';
+import { NewFileExperienceWrapper, CardImageContainer, calcBreakpointSize } from './ui/styled';
 import { ImageRenderer } from './ui/imageRenderer/imageRenderer';
 import { TitleBox } from './ui/titleBox/titleBox';
 import { FailedTitleBox } from './ui/titleBox/failedTitleBox';
@@ -115,11 +114,9 @@ export class CardViewBase extends React.Component {
       const shouldUsePointerCursor = status !== 'error' && status !== 'failed-processing';
       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',
@@ -248,42 +245,29 @@ export class CardViewBase extends React.Component {
             renderPlayButton: false
           };
           let iconMessage;
-
-          if (!!metadata) {
-            if (error) {
-              const {
-                secondaryError
-              } = error;
-
-              if (isRateLimitedError(secondaryError) || secondaryError && isPollingError(secondaryError)) {
-                iconMessage = /*#__PURE__*/React.createElement(PreviewCurrentlyUnavailable, null);
-              }
-            } else if (!isZeroSize) {
-              iconMessage = /*#__PURE__*/React.createElement(PreviewUnavailable, null);
-            }
-          } else if (!!disableOverlay) {
+          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);
-          }
-
-          if (error && isUploadError(error)) {
-            if (!disableOverlay) {
-              return { ...baseErrorConfig,
-                renderFailedTitleBox: true,
-                customTitleMessage: messages.failed_to_upload
-              };
-            }
-
-            return { ...baseErrorConfig,
-              renderTitleBox: !metadata && !!name,
-              iconMessage: /*#__PURE__*/React.createElement(FailedToUpload, null)
-            };
+          } else {
+            iconMessage = /*#__PURE__*/React.createElement(PreviewUnavailable, null);
           }
 
           if (!disableOverlay) {
+            const renderFailedTitleBox = !name || !!customTitleMessage;
             return { ...baseErrorConfig,
-              renderTitleBox: !!name,
-              renderFailedTitleBox: !metadata,
-              iconMessage
+              renderTitleBox: !!name && !customTitleMessage,
+              renderFailedTitleBox,
+              iconMessage: !renderFailedTitleBox ? iconMessage : undefined,
+              customTitleMessage
             };
           }
 
@@ -504,18 +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,
       onImageLoad: this.onImageLoad,
-      onImageError: this.onImageError
+      onImageError: this.onImageError,
+      nativeLazyLoad: nativeLazyLoad,
+      forceSyncDisplay: forceSyncDisplay
     });
   }
 

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

@@ -5,6 +5,8 @@ export default class MediaInlineCardLoader extends React.PureComponent {
   constructor(...args) {
     super(...args);
 
+    _defineProperty(this, "isMounted", false);
+
     _defineProperty(this, "state", {
       MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
       ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
@@ -12,6 +14,8 @@ export default class MediaInlineCardLoader extends React.PureComponent {
   }
 
   async componentDidMount() {
+    this.isMounted = true;
+
     if (!this.state.MediaInlineCard) {
       try {
         const [mediaClient, cardModule, mediaCardErrorBoundaryModule] = await Promise.all([import(
@@ -23,14 +27,21 @@ export default class MediaInlineCardLoader extends React.PureComponent {
         '../media-card-analytics-error-boundary')]);
         MediaInlineCardLoader.MediaInlineCard = mediaClient.withMediaClient(cardModule.MediaInlineCard);
         MediaInlineCardLoader.ErrorBoundary = mediaCardErrorBoundaryModule.default;
-        this.setState({
-          MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
-          ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
-        });
+
+        if (this.isMounted) {
+          this.setState({
+            MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
+            ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
+          });
+        }
       } catch (error) {}
     }
   }
 
+  async componentWillUnmount() {
+    this.isMounted = false;
+  }
+
   render() {
     const {
       MediaInlineCard,

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
-import { injectIntl } from 'react-intl';
+import { injectIntl, IntlProvider, createIntl } from 'react-intl-next';
 import { MediaInlineCardLoadedView, MediaInlineCardLoadingView, MediaInlineCardErroredView, messages } from '@atlaskit/media-ui';
 import { MediaTypeIcon } from '@atlaskit/media-ui/media-type-icon';
 import { MediaViewer } from '@atlaskit/media-viewer';
@@ -49,46 +49,64 @@ export const MediaInlineCardInternal = ({
     return null;
   };
 
+  const renderContent = children => {
+    return intl ? children : /*#__PURE__*/React.createElement(IntlProvider, {
+      locale: "en"
+    }, children);
+  };
+
+  const defaultIntl = createIntl({
+    locale: 'en'
+  });
   useEffect(() => {
-    mediaClient.file.getFileState(identifier.id, {
+    const subscription = mediaClient.file.getFileState(identifier.id, {
       collectionName: identifier.collectionName
     }).subscribe({
       next: fileState => {
         setFileState(fileState);
+        setIsErrored(false);
       },
       error: () => {
         setIsErrored(true);
       }
     });
+    return () => {
+      subscription.unsubscribe();
+    };
   }, [identifier.collectionName, identifier.id, mediaClient.file]);
 
   if (!fileState) {
     return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
-      message: intl.formatMessage(messages.loading_file)
+      message: (intl || defaultIntl).formatMessage(messages.loading_file),
+      isSelected: isSelected
     });
   }
 
   if (isErrored) {
     return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
-      message: intl.formatMessage(messages.couldnt_load_file)
+      message: (intl || defaultIntl).formatMessage(messages.couldnt_load_file),
+      isSelected: isSelected
     });
   }
 
   if (fileState.status === 'error') {
     return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
-      message: fileState.message || ''
+      message: fileState.message || '',
+      isSelected: isSelected
     });
   }
 
   if (fileState.status === 'failed-processing') {
     return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
-      message: intl.formatMessage(messages.couldnt_load_file)
+      message: (intl || defaultIntl).formatMessage(messages.couldnt_load_file),
+      isSelected: isSelected
     });
   }
 
   if (fileState.status === 'uploading') {
     return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
-      message: fileState.name
+      message: fileState.name,
+      isSelected: isSelected
     });
   }
 
@@ -113,7 +131,7 @@ export const MediaInlineCardInternal = ({
     formattedDate = formatDate(fileState.createdAt, locale);
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+  return renderContent( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
     position: "bottom",
     content: formattedDate,
     tag: "span"
@@ -122,6 +140,8 @@ export const MediaInlineCardInternal = ({
     title: name,
     onClick: onMediaInlineCardClick,
     isSelected: isSelected
-  })), mediaViewer);
+  })), mediaViewer));
 };
-export const MediaInlineCard = injectIntl(MediaInlineCardInternal);
+export const MediaInlineCard = injectIntl(MediaInlineCardInternal, {
+  enforceContext: false
+});