@atlaskit/media-card 74.5.2 → 74.6.1

package/dist/es2019/card/card.js

@@ -26,7 +26,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "74.5.2";
+const packageVersion = "74.6.1";
 export class CardBase extends Component {
   // An internalOccurrenceKey is a randomly generated value to differentiate various instances
   // of Cards regardless of whether it shares the same file (either internal or external)
@@ -117,11 +117,7 @@ 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(() => {
+      this.fetchAndCacheRemotePreview(identifier).catch(() => {
         // No need to log this error.
         // If preview fails, it will be refetched later
         //TODO: test this catch
@@ -129,12 +125,8 @@ export class CardBase extends Component {
       });
     });
     _defineProperty(this, "refetchSSRPreview", async identifier => {
-      const {
-        mediaClient,
-        dimensions = {}
-      } = this.props;
       try {
-        const cardPreview = await fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions, this.getImageURLParams(identifier), this.getMediaBlobUrlAttrs(identifier));
+        const cardPreview = await this.fetchAndCacheRemotePreview(identifier);
         this.safeSetState({
           cardPreview
         });
@@ -143,6 +135,44 @@ export class CardBase extends Component {
         this.fireNonCriticalErrorEvent(wrappedError);
       }
     });
+    _defineProperty(this, "resolveUpfrontPreview", async identifier => {
+      const requestedDimensions = {
+        ...this.props.dimensions
+      };
+      try {
+        const cardPreview = await this.fetchAndCacheRemotePreview(identifier);
+        const {
+          dimensions: currentDimensions
+        } = this.props;
+        const areValidRequestedDimensions = !isBigger(requestedDimensions, currentDimensions);
+
+        // If there are new and bigger dimensions in the props, and the upfront preview is still resolving,
+        // the fetched preview is no longer valid, and thus, we dismiss it and set the flag wasResolvedUpfrontPreview = true
+        // to trigger a normal preview fetch.
+        if (areValidRequestedDimensions) {
+          this.safeSetState({
+            cardPreview,
+            wasResolvedUpfrontPreview: true
+          });
+        } else {
+          this.safeSetState({
+            wasResolvedUpfrontPreview: true
+          });
+        }
+      } catch (e) {
+        this.safeSetState({
+          wasResolvedUpfrontPreview: true
+        });
+        // NO need to log error. If this call fails, a refetch will happen after
+      }
+    });
+    _defineProperty(this, "fetchAndCacheRemotePreview", identifier => {
+      const {
+        mediaClient,
+        dimensions = {}
+      } = this.props;
+      return fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions, this.getImageURLParams(identifier), this.getMediaBlobUrlAttrs(identifier));
+    });
     _defineProperty(this, "resolvePreview", async (identifier, fileState) => {
       try {
         const params = this.getCardPreviewParams(identifier, fileState);
@@ -604,29 +634,7 @@ export class CardBase extends Component {
       const fileImageMode = imageResizeModeToFileImageMode(_resizeMode);
       _cardPreview = getCardPreviewFromCache(id, fileImageMode);
       if (!_cardPreview && _ssr) {
-        var _this$ssrData, _this$ssrData2;
-        this.ssrData = getSSRData(_identifier);
-        if ((_this$ssrData = this.ssrData) !== null && _this$ssrData !== void 0 && _this$ssrData.error) {
-          this.ssrReliability.server = {
-            status: 'fail',
-            ...this.ssrData.error
-          };
-        }
-        if (!((_this$ssrData2 = this.ssrData) !== null && _this$ssrData2 !== void 0 && _this$ssrData2.dataURI)) {
-          try {
-            _cardPreview = getSSRCardPreview(_ssr, _mediaClient, _identifier.id, this.getImageURLParams(_identifier), this.getMediaBlobUrlAttrs(_identifier));
-          } catch (e) {
-            this.ssrReliability[_ssr] = {
-              status: 'fail',
-              ...extractErrorInfo(e)
-            };
-          }
-        } else {
-          _cardPreview = {
-            dataURI: this.ssrData.dataURI,
-            source: 'ssr-data'
-          };
-        }
+        _cardPreview = this.getSSRPreview(_ssr, _identifier, _mediaClient);
       }
     } else if (isExternalImageIdentifier(_identifier)) {
       this.fireCommencedEvent();
@@ -655,9 +663,35 @@ export class CardBase extends Component {
       cardRef: null,
       isBannedLocalPreview: false,
       previewDidRender: false,
-      error: _error
+      error: _error,
+      wasResolvedUpfrontPreview: false
     };
   }
+  getSSRPreview(ssr, identifier, mediaClient) {
+    var _this$ssrData, _this$ssrData2;
+    this.ssrData = getSSRData(identifier);
+    if ((_this$ssrData = this.ssrData) !== null && _this$ssrData !== void 0 && _this$ssrData.error) {
+      this.ssrReliability.server = {
+        status: 'fail',
+        ...this.ssrData.error
+      };
+    }
+    if (!((_this$ssrData2 = this.ssrData) !== null && _this$ssrData2 !== void 0 && _this$ssrData2.dataURI)) {
+      try {
+        return getSSRCardPreview(ssr, mediaClient, identifier.id, this.getImageURLParams(identifier), this.getMediaBlobUrlAttrs(identifier));
+      } catch (e) {
+        this.ssrReliability[ssr] = {
+          status: 'fail',
+          ...extractErrorInfo(e)
+        };
+      }
+    } else {
+      return {
+        dataURI: this.ssrData.dataURI,
+        source: 'ssr-data'
+      };
+    }
+  }
   componentDidMount() {
     var _getDocument;
     this.hasBeenMounted = true;
@@ -672,6 +706,9 @@ export class CardBase extends Component {
     } = this.props;
     if (isCardVisible && isFileIdentifier(identifier)) {
       this.updateStateForIdentifier(identifier);
+      if (!cardPreview) {
+        this.resolveUpfrontPreview(identifier);
+      }
     }
     if (isCardVisible && !!ssr && !!cardPreview && isFileIdentifier(identifier)) {
       var _this$ssrData3;
@@ -699,7 +736,8 @@ export class CardBase extends Component {
       dimensions: prevDimensions
     } = prevProps;
     const {
-      isCardVisible: prevIsCardVisible
+      isCardVisible: prevIsCardVisible,
+      cardPreview: prevCardPreview
     } = prevState;
     const {
       mediaClient,
@@ -708,7 +746,8 @@ export class CardBase extends Component {
       featureFlags,
       useInlinePlayer,
       disableOverlay,
-      resizeMode
+      resizeMode,
+      ssr
     } = this.props;
     const {
       isCardVisible,
@@ -717,10 +756,24 @@ export class CardBase extends Component {
       fileState,
       isBannedLocalPreview,
       previewDidRender,
-      isPlayingFile
+      isPlayingFile,
+      wasResolvedUpfrontPreview
     } = this.state;
     const isDifferent = isDifferentIdentifier(prevIdentifier, identifier);
+    /**
+     * Variable turnedVisible should only be true when media card
+     * was invisible in the previous state and is visible in the current one
+     *
+     * prevIsCardVisible | isCardVisible |  turnedVisible
+     * ----------------------------------------------------
+     *       false       |    false      |      false
+     *       false       |    true       |      true
+     *       true        |    true       |      false
+     *       true        |    false      |      false       (unreachable case)
+     * ----------------------------------------------------
+     */
     const turnedVisible = !prevIsCardVisible && isCardVisible;
+    const hadSSRCardPreview = !!prevCardPreview && isSSRClientPreview(prevCardPreview) && !cardPreview;
     const isNewMediaClient = prevMediaClient !== mediaClient;
     const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
     this.updateFileStateFlag(fileState);
@@ -748,7 +801,12 @@ export class CardBase extends Component {
         this.fireScreenEvent();
       }
     }
-    if (isFileIdentifier(identifier) && fileState && shouldResolvePreview({
+    if (isFileIdentifier(identifier) && (turnedVisible || ssr === 'client' && hadSSRCardPreview) && !cardPreview && !wasResolvedUpfrontPreview) {
+      // This is a one-off call, only meant to happen once in the component's lifecycle. Mainly when either:
+      // - turnedVisible = true
+      // - ssr = client and has no preview (the dataURI failed to load in the previous state, most likely because of an initial auth issue)
+      this.resolveUpfrontPreview(identifier);
+    } else if (isFileIdentifier(identifier) && fileState && shouldResolvePreview({
       status,
       fileState,
       prevDimensions,
@@ -757,7 +815,8 @@ export class CardBase extends Component {
       fileImageMode,
       featureFlags,
       hasCardPreview: !!cardPreview,
-      isBannedLocalPreview
+      isBannedLocalPreview,
+      wasResolvedUpfrontPreview
     })) {
       this.resolvePreview(identifier, fileState);
     }

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

@@ -146,11 +146,13 @@ export const shouldResolvePreview = ({
   fileImageMode,
   hasCardPreview,
   isBannedLocalPreview,
-  featureFlags
+  featureFlags,
+  wasResolvedUpfrontPreview
 }) => {
   const statusIsPreviewable = isPreviewableStatus(status, extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags));
   const dimensionsAreBigger = isBigger(prevDimensions, dimensions);
-  return statusIsPreviewable && (!hasCardPreview || dimensionsAreBigger);
+  // We should not fetch the preview if the upfront one hasn't been resolved yet (it could be resolving now), even if there are new dimensions.
+  return wasResolvedUpfrontPreview && statusIsPreviewable && (!hasCardPreview || dimensionsAreBigger);
 };
 export const getSSRCardPreview = (ssr, mediaClient, id, params, mediaBlobUrlAttrs) => {
   let dataURI;

package/dist/es2019/card/media-card-analytics-error-boundary.js

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "74.5.2";
+const packageVersion = "74.6.1";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -54,7 +54,7 @@ class WrappedMediaInlineAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaInlineAnalyticsErrorBoundary, "displayName", 'MediaInlineAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "74.5.2";
+const packageVersion = "74.6.1";
 const MediaInlineAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/utils/ufoExperiences.js

@@ -3,7 +3,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata, LOGGED_FEATURE_FLAG_KE
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "74.5.2";
+const packageVersion = "74.6.1";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {

package/dist/es2019/version.json

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