@atlaskit/media-card 71.0.0 → 72.0.0

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

@@ -5,22 +5,20 @@ import { version as packageVersion, name as packageName } from '../../version.js
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
-import { addFileAttrsToUrl, globalMediaEventEmitter, isDifferentIdentifier, isFileIdentifier, isErrorFileState, RECENTS_COLLECTION, isImageRepresentationReady, isExternalImageIdentifier } from '@atlaskit/media-client';
+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 { CardView } from '../cardView';
 import { ViewportDetector } from '../../utils/viewportDetector';
 import { getRequestedDimensions } from '../../utils/getDataURIDimension';
-import { shouldGetCardPreview, extractFilePreviewStatus, getCardPreview, getCardPreviewFromCache, getFilePreviewFromFileState } from './getCardPreview';
+import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview } from './getCardPreview';
 import { getFileDetails } from '../../utils/metadata';
-import { isBigger } from '../../utils/dimensionComparer';
-import { getCardStatus } from './getCardStatus';
 import { InlinePlayer } from '../inlinePlayer';
 import { getFileAttributes } from '../../utils/analytics';
-import { FileAttributesProvider } from '../../utils/fileAttributesContext';
-import { isRemotePreviewError, MediaCardError, ensureMediaCardError } from '../../errors';
+import { isLocalPreviewError, MediaCardError, ensureMediaCardError, ImageLoadError } from '../../errors';
 import { fireOperationalEvent, fireCommencedEvent, relevantFeatureFlagNames, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
 import getDocument from '../../utils/document';
+import { getCardStateFromFileState, createStateUpdater } from './cardState';
 export class CardBase extends Component {
   // We initialise timeElapsedTillCommenced
   // to avoid extra branching on a possibly undefined value.
@@ -31,75 +29,136 @@ export class CardBase extends Component {
 
     _defineProperty(this, "timeElapsedTillCommenced", performance.now());
 
-    _defineProperty(this, "shouldRefetchImage", (current, next) => {
-      if (!current || !next) {
-        return false;
-      }
-
-      return isBigger(current, next);
-    });
-
-    _defineProperty(this, "isLatestCardStatusUpdate", cardStatusUpdateTimestamp => !this.lastCardStatusUpdateTimestamp || this.lastCardStatusUpdateTimestamp <= cardStatusUpdateTimestamp);
-
-    _defineProperty(this, "onLocalPreviewError", error => {// TODO: track local preview success rate
-      // https://product-fabric.atlassian.net/browse/MEX-774
-    });
+    _defineProperty(this, "getImageURLParams", ({
+      collectionName: collection
+    }) => ({
+      collection,
+      mode: imageResizeModeToFileImageMode(this.props.resizeMode),
+      ...this.requestedDimensions,
+      allowAnimated: true
+    }));
 
-    _defineProperty(this, "createAddContextToDataURI", (fileId, fileState, {
-      width,
-      height
-    }, collectionName) => dataURI => {
+    _defineProperty(this, "getMediaBlobUrlAttrs", (identifier, fileState) => {
       const {
+        id,
+        collectionName: collection
+      } = identifier;
+      const {
+        originalDimensions,
         contextId,
         alt
       } = this.props;
-
-      if (!contextId) {
-        return dataURI;
-      }
-
-      const metadata = getFileDetails(fileState);
-      return addFileAttrsToUrl(dataURI, {
-        id: fileId,
-        collection: collectionName,
+      const {
+        mimeType,
+        name,
+        size
+      } = getFileDetails(identifier, fileState);
+      return contextId ? {
+        id,
+        collection,
         contextId,
-        mimeType: metadata.mimeType,
-        name: metadata.name,
-        size: metadata.size,
-        width,
-        height,
+        mimeType,
+        name,
+        size,
+        ...(originalDimensions || this.requestedDimensions),
         alt
-      });
+      } : undefined;
     });
 
-    _defineProperty(this, "getCardPreviewParams", (id, collectionName, fileState) => {
+    _defineProperty(this, "getCardPreviewParams", (identifier, fileState) => {
+      const {
+        isBannedLocalPreview
+      } = this.state;
+      const {
+        id
+      } = identifier;
       const {
         dimensions = {},
-        originalDimensions,
-        resizeMode,
         mediaClient
       } = this.props;
-      const {
-        cardRef
-      } = this.state;
-      const requestedDimensions = getRequestedDimensions({
-        dimensions,
-        element: cardRef
-      });
       return {
         mediaClient,
         id,
-        collectionName,
         dimensions,
-        resizeMode,
-        requestedDimensions,
-        onLocalPreviewError: this.onLocalPreviewError,
-        filePreview: getFilePreviewFromFileState(fileState),
+        onLocalPreviewError: this.fireLocalPreviewErrorEvent,
+        filePreview: isBannedLocalPreview ? undefined : getFilePreviewFromFileState(fileState),
         isRemotePreviewReady: isImageRepresentationReady(fileState),
-        addContextToDataURI: this.createAddContextToDataURI(id, fileState, originalDimensions || requestedDimensions, collectionName)
+        imageUrlParams: this.getImageURLParams(identifier),
+        mediaBlobUrlAttrs: this.getMediaBlobUrlAttrs(identifier, fileState)
+      };
+    });
+
+    _defineProperty(this, "resolvePreview", async (identifier, fileState) => {
+      try {
+        const params = this.getCardPreviewParams(identifier, fileState);
+        const cardPreview = await getCardPreview(params);
+        this.safeSetState({
+          cardPreview
+        });
+      } catch (e) {
+        const wrappedError = ensureMediaCardError('preview-fetch', e); //  If remote preview fails, we set status 'error'
+        //  If local preview fails (i.e, no remote preview available),
+        //  we can stay in the same status until there is a remote preview available
+        //  If it's any other error we set status 'error'
+
+        if (isLocalPreviewError(wrappedError)) {
+          this.safeSetState({
+            isBannedLocalPreview: true
+          });
+        } else {
+          this.safeSetState({
+            status: 'error',
+            error: wrappedError
+          });
+        }
+      }
+    });
+
+    _defineProperty(this, "getPerformanceAttributes", () => {
+      const {
+        timeElapsedTillCommenced
+      } = this;
+      const timeElapsedTillEvent = performance.now();
+      const durationSinceCommenced = timeElapsedTillCommenced && timeElapsedTillEvent - timeElapsedTillCommenced;
+      return {
+        overall: {
+          durationSincePageStart: timeElapsedTillEvent,
+          durationSinceCommenced
+        }
       };
     });
 
+    _defineProperty(this, "onImageError", () => {
+      const {
+        cardPreview
+      } = this.state;
+      const error = new ImageLoadError(cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source);
+
+      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);
+      } else {
+        this.safeSetState({
+          status: 'error',
+          error
+        });
+      }
+    });
+
+    _defineProperty(this, "onImageLoad", () => {
+      this.safeSetState({
+        previewDidRender: true
+      });
+    });
+
     _defineProperty(this, "fireCopiedEvent", () => {
       const {
         createAnalyticsEvent
@@ -117,9 +176,17 @@ export class CardBase extends Component {
       createAnalyticsEvent && fireScreenEvent(createAnalyticsEvent, this.fileAttributes);
     });
 
+    _defineProperty(this, "fireLocalPreviewErrorEvent", error => {// TODO: track local preview success rate
+      // https://product-fabric.atlassian.net/browse/MEX-774
+    });
+
     _defineProperty(this, "safeSetState", state => {
       if (this.hasBeenMounted) {
-        this.setState(state);
+        // If it's setting the status, we need to use a state updater function,
+        // which ensures that no non-final status overrides a final status.
+        // If no status is set, we don't need a sate updater
+        const updater = !!state.status ? createStateUpdater(state) : state;
+        this.setState(updater);
       }
     });
 
@@ -129,8 +196,9 @@ export class CardBase extends Component {
       }
 
       if (this.hasBeenMounted) {
+        // TODO MEX-788: add test for "do not remove the card preview when unsubscribing".
         this.setState({
-          cardPreview: undefined
+          isBannedLocalPreview: false
         });
       }
     });
@@ -311,8 +379,7 @@ export class CardBase extends Component {
         cardRef
       } = this.state;
       const {
-        metadata,
-        timeElapsedTillCommenced
+        metadata
       } = this;
       const {
         onCardViewClick,
@@ -322,7 +389,7 @@ export class CardBase extends Component {
       } = this;
       const card = /*#__PURE__*/React.createElement(CardView, {
         status: status,
-        error: error && error.secondaryError,
+        error: error,
         mediaItemType: mediaItemType,
         metadata: metadata,
         dataURI: dataURI,
@@ -344,7 +411,8 @@ export class CardBase extends Component {
         featureFlags: featureFlags,
         titleBoxBgColor: titleBoxBgColor,
         titleBoxIcon: titleBoxIcon,
-        timeElapsedTillCommenced: timeElapsedTillCommenced
+        onImageError: this.onImageError,
+        onImageLoad: this.onImageLoad
       });
       return isLazy ? /*#__PURE__*/React.createElement(ViewportDetector, {
         targetRef: cardRef,
@@ -408,7 +476,7 @@ export class CardBase extends Component {
       _cardPreview = getCardPreviewFromCache(id, _dimensions);
     } else if (isExternalImageIdentifier(_identifier)) {
       this.fireCommencedEvent();
-      _status = 'complete';
+      _status = 'loading-preview';
       const {
         dataURI
       } = _identifier;
@@ -417,11 +485,8 @@ 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, `isCardVisible`
+    //  should be true to avoid flickers during re-mount of the component
 
 
     const isCardVisible = _cardPreview ? true : !this.props.isLazy;
@@ -430,7 +495,9 @@ export class CardBase extends Component {
       isCardVisible,
       isPlayingFile: false,
       cardPreview: _cardPreview,
-      cardRef: null
+      cardRef: null,
+      isBannedLocalPreview: false,
+      previewDidRender: false
     };
   }
 
@@ -466,14 +533,20 @@ export class CardBase extends Component {
     const {
       mediaClient,
       identifier,
-      dimensions
+      dimensions,
+      featureFlags
     } = this.props;
     const {
       isCardVisible,
-      cardPreview
+      cardPreview,
+      status,
+      fileState,
+      isBannedLocalPreview,
+      previewDidRender
     } = this.state;
     const isDifferent = isDifferentIdentifier(prevIdentifier, identifier);
     const turnedVisible = !prevIsCardVisible && isCardVisible;
+    const isNewMediaClient = prevMediaClient !== mediaClient;
 
     if (isExternalImageIdentifier(identifier) && isDifferent) {
       this.fireCommencedEvent();
@@ -481,7 +554,7 @@ export class CardBase extends Component {
         dataURI
       } = identifier;
       this.setState({
-        status: 'complete',
+        status: 'loading-preview',
         cardPreview: {
           dataURI,
           orientation: 1,
@@ -491,8 +564,7 @@ export class CardBase extends Component {
       });
     }
 
-    if (isFileIdentifier(identifier) && (turnedVisible || prevMediaClient !== mediaClient || isDifferent || // TODO: should not resubscribe on resize. Only refetch
-    this.shouldRefetchImage(prevDimensions, dimensions))) {
+    if (isFileIdentifier(identifier) && (turnedVisible || !!this.subscription && (isNewMediaClient || isDifferent))) {
       this.updateStateForIdentifier(identifier);
     }
 
@@ -503,6 +575,26 @@ export class CardBase extends Component {
         this.fireScreenEvent();
       }
     }
+
+    if (isFileIdentifier(identifier) && fileState && shouldResolvePreview({
+      status,
+      fileState,
+      dimensions,
+      prevDimensions,
+      featureFlags,
+      hasCardPreview: !!cardPreview,
+      isBannedLocalPreview
+    })) {
+      this.resolvePreview(identifier, fileState);
+    }
+
+    if (previewDidRender && // We should't complete if status is uploading
+    ['loading', 'loading-preview', 'processing'].includes(status)) {
+      this.safeSetState({
+        status: 'complete'
+      });
+      this.unsubscribe();
+    }
   }
 
   componentWillUnmount() {
@@ -520,6 +612,9 @@ export class CardBase extends Component {
     const {
       mediaClient
     } = this.props;
+    const {
+      isBannedLocalPreview
+    } = this.state;
     const {
       id,
       collectionName,
@@ -530,126 +625,58 @@ export class CardBase extends Component {
       collectionName,
       occurrenceKey
     }).subscribe({
-      next: async fileState => {
-        this.lastFileState = fileState;
-        const thisCardStatusUpdateTimestamp = (performance || Date).now();
-        const filePreviewStatus = extractFilePreviewStatus(fileState, this.props.featureFlags);
-        let status = getCardStatus(fileState.status, filePreviewStatus);
-        this.safeSetState({
-          fileState
-        });
-        let cardPreview;
-        let error;
-
-        if (shouldGetCardPreview(status, filePreviewStatus)) {
-          try {
-            cardPreview = await getCardPreview(this.getCardPreviewParams(id, collectionName, fileState));
-
-            if (['loading-preview', 'processing'].includes(status)) {
-              status = 'complete';
-            }
-          } catch (e) {
-            const wrappedError = ensureMediaCardError('preview-fetch', e); // If remote preview fails, we set status 'error'
-            // If the local preview fails (i.e, no remote preview available),
-            // we can stay in the same status until there is a remote preview available
-
-            if (isRemotePreviewError(wrappedError)) {
-              status = 'error';
-              error = wrappedError;
-            }
-          }
-        }
-
-        if (this.isLatestCardStatusUpdate(thisCardStatusUpdateTimestamp)) {
-          // These status and progress must not override values representing more recent FileState
-
-          /* next() start        some await() delay in next()        status & progress update
-           * -------                    ------------------           ------------------------
-           *   |----[1]FileState:uploading------>|                                 |
-           *   |                                 |                                 |
-           *   |----[2]FileState:uploading------>|                                 |
-           *   |                                 |                                 |
-           *   |                                 |----[2]FileState:uploading------>| Update status to `uploading`
-           *   |----[3]FileState:processing----->|                                 |
-           *   |                                 |----[3]FileState:processing----->| Update status to `complete`
-           *   |                                 |                                 |
-           *   |                                 |----[1]FileState:uploading------>| We do not want to update status to `uploading` again!
-           *
-           */
-          if (status === 'error' && isErrorFileState(fileState) && !error) {
-            error = new MediaCardError('error-file-state', new Error(fileState.message));
-          }
-
-          this.safeSetState({
-            status,
-            cardPreview,
-            progress: status === 'uploading' && fileState.status === 'uploading' ? fileState.progress : 1,
-            error: status === 'error' && error ? error : undefined
-          });
-          this.lastCardStatusUpdateTimestamp = thisCardStatusUpdateTimestamp;
-        }
+      next: fileState => {
+        const {
+          featureFlags
+        } = this.props;
+        const newState = getCardStateFromFileState(fileState, isBannedLocalPreview, featureFlags);
+        this.safeSetState(newState);
       },
       error: e => {
-        // If file state subscription decides that the card is complete
-        // and later there is an error, we won't change the card's status.
-        if (this.state.status === 'complete') {
-          return;
-        }
-
-        const errorReason = this.fileAttributes.fileStatus === 'uploading' ? 'upload' : 'metadata-fetch';
+        const errorReason = this.state.status === 'uploading' ? 'upload' : 'metadata-fetch';
         const error = new MediaCardError(errorReason, e);
         this.safeSetState({
           error,
           status: 'error'
         });
-        this.lastCardStatusUpdateTimestamp = (performance || Date).now();
       }
     });
   }
 
-  get metadata() {
+  get requestedDimensions() {
     const {
-      identifier
+      dimensions
     } = this.props;
-    return isFileIdentifier(identifier) ? this.state.fileState ? getFileDetails(this.state.fileState) : {
-      id: identifier.id
-    } : {
-      id: identifier.mediaItemType,
-      name: identifier.name || identifier.dataURI,
-      mediaType: 'image'
-    };
+    const {
+      cardRef: element
+    } = this.state;
+    return getRequestedDimensions({
+      dimensions,
+      element
+    });
+  }
+
+  get metadata() {
+    var _this$state;
+
+    return getFileDetails(this.props.identifier, (_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.fileState);
   }
 
   get fileAttributes() {
-    var _this$lastFileState;
+    var _this$state2, _this$state2$fileStat;
 
-    return getFileAttributes(this.metadata, (_this$lastFileState = this.lastFileState) === null || _this$lastFileState === void 0 ? void 0 : _this$lastFileState.status);
+    return getFileAttributes(this.metadata, (_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : (_this$state2$fileStat = _this$state2.fileState) === null || _this$state2$fileStat === void 0 ? void 0 : _this$state2$fileStat.status);
   }
 
   fireOperationalEvent() {
-    const {
-      timeElapsedTillCommenced
-    } = this;
     const {
       status,
-      cardPreview,
       error
     } = this.state;
     const {
       createAnalyticsEvent
     } = this.props;
-    const timeElapsedTillEvent = performance.now();
-    const durationSinceCommenced = timeElapsedTillCommenced && timeElapsedTillEvent - timeElapsedTillCommenced;
-    const performanceAttributes = {
-      overall: {
-        durationSincePageStart: timeElapsedTillEvent,
-        durationSinceCommenced
-      }
-    };
-    createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, performanceAttributes, {
-      cardPreview,
-      error
-    });
+    createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), error);
   }
 
   fireCommencedEvent() {
@@ -692,19 +719,14 @@ export class CardBase extends Component {
   }
 
   render() {
-    var _this$lastFileState2;
-
     const {
       isPlayingFile,
       mediaViewerSelectedItem
     } = this.state;
     const innerContent = /*#__PURE__*/React.createElement(React.Fragment, null, isPlayingFile ? this.renderInlinePlayer() : this.renderCard(), mediaViewerSelectedItem ? this.renderMediaViewer() : null);
-    const content = this.context.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
+    return this.context.intl ? innerContent : /*#__PURE__*/React.createElement(IntlProvider, {
       locale: "en"
     }, innerContent);
-    return /*#__PURE__*/React.createElement(FileAttributesProvider, {
-      data: getFileAttributes(this.metadata, (_this$lastFileState2 = this.lastFileState) === null || _this$lastFileState2 === void 0 ? void 0 : _this$lastFileState2.status)
-    }, content);
   }
 
 }