@atlaskit/media-card 77.4.4 → 77.4.6

package/dist/es2019/card/v2/useFilePreview.js

@@ -0,0 +1,499 @@
+import React from 'react';
+import { addFileAttrsToUrl, imageResizeModeToFileImageMode, isImageRepresentationReady } from '@atlaskit/media-client';
+import { MediaFileStateError, useFileState } from '@atlaskit/media-client-react';
+import { getMediaTypeFromMimeType, isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
+import { getOrientation } from '@atlaskit/media-ui';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { ImageLoadError, LocalPreviewError, MediaCardError, ensureMediaCardError, isLocalPreviewError, isUnsupportedLocalPreviewError } from '../../errors';
+import { extractErrorInfo } from '../../utils/analytics';
+import { isBigger } from '../../utils/dimensionComparer';
+import { getSSRData } from '../../utils/globalScope';
+import { useCurrentValueRef } from '../../utils/useCurrentValueRef';
+import { usePrevious } from '../../utils/usePrevious';
+import { takeSnapshot } from '../../utils/videoSnapshot';
+import { fetchAndCacheRemotePreview, getCardPreviewFromCache, getSSRCardPreview, isLocalPreview, isSSRClientPreview, isSSRDataPreview, removeCardPreviewFromCache, shouldResolvePreview } from '../getCardPreview';
+import cardPreviewCache from '../getCardPreview/cache';
+import { StoreSSRDataScript } from '../../utils/globalScope';
+export const useFilePreview = ({
+  resizeMode = 'crop',
+  identifier,
+  ssr,
+  mediaClient,
+  dimensions,
+  requestedDimensions,
+  traceContext,
+  previewDidRender,
+  skipRemote,
+  mediaBlobUrlAttrs
+}) => {
+  const [error, setError] = useState();
+  const [nonCriticalError, setNonCriticalError] = useState();
+  //----------------------------------------------------------------//
+  //---------------- State Initializer Functions -------------------//
+  //----------------------------------------------------------------//
+
+  const ssrDataRef = useRef();
+  const ssrReliabilityRef = useRef({
+    server: {
+      status: 'unknown'
+    },
+    client: {
+      status: 'unknown'
+    }
+  });
+  const imageURLParams = useMemo(() => ({
+    collection: identifier.collectionName,
+    mode: resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode,
+    ...requestedDimensions,
+    allowAnimated: true
+  }), [requestedDimensions, identifier.collectionName, resizeMode]);
+  const getSSRPreview = (ssr, identifier, mediaClient) => {
+    var _ssrDataRef$current, _ssrDataRef$current2;
+    ssrDataRef.current = getSSRData(identifier);
+    if ((_ssrDataRef$current = ssrDataRef.current) !== null && _ssrDataRef$current !== void 0 && _ssrDataRef$current.error) {
+      ssrReliabilityRef.current.server = {
+        status: 'fail',
+        ...ssrDataRef.current.error
+      };
+    }
+    if (!((_ssrDataRef$current2 = ssrDataRef.current) !== null && _ssrDataRef$current2 !== void 0 && _ssrDataRef$current2.dataURI)) {
+      try {
+        return getSSRCardPreview(ssr, mediaClient, identifier.id, imageURLParams, mediaBlobUrlAttrs);
+      } catch (e) {
+        ssrReliabilityRef.current[ssr] = {
+          status: 'fail',
+          ...extractErrorInfo(e)
+        };
+      }
+    } else {
+      return {
+        dataURI: ssrDataRef.current.dataURI,
+        source: 'ssr-data'
+      };
+    }
+  };
+  const cardPreviewInitializer = () => {
+    let cardPreview;
+    const {
+      id
+    } = identifier;
+    const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
+    cardPreview = getCardPreviewFromCache(id, fileImageMode);
+    if (!cardPreview && ssr) {
+      cardPreview = getSSRPreview(ssr, identifier, mediaClient);
+    }
+    return cardPreview;
+  };
+  const [cardPreview, setCardPreview] = useState(cardPreviewInitializer);
+  const {
+    fileState
+  } = useFileState(identifier.id, {
+    skipRemote,
+    collectionName: identifier.collectionName,
+    occurrenceKey: identifier.occurrenceKey
+  });
+
+  //----------------------------------------------------------------//
+  //------------ State, Refs & Initial Values ----------------------//
+  //----------------------------------------------------------------//
+
+  const [status, setStatus] = useState('loading');
+  useEffect(() => {
+    setStatus('loading');
+  }, [identifier]);
+  const [isBannedLocalPreview, setIsBannedLocalPreview] = useState(false);
+  const wasResolvedUpfrontPreviewRef = useRef(false);
+
+  //----------------------------------------------------------------//
+  //---------------------- Helper Functions  -----------------------//
+  //----------------------------------------------------------------//
+
+  const fetchRemotePreviewRef = useCurrentValueRef(identifier => {
+    return fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, mediaBlobUrlAttrs);
+  });
+  const resolvePreviewRef = useCurrentValueRef(async (identifier, fileState) => {
+    const filePreview = isBannedLocalPreview ? undefined : fileState.status !== 'error' && 'mimeType' in fileState && isMimeTypeSupportedByBrowser(fileState.mimeType) ? fileState.preview : undefined;
+    const isRemotePreviewReady = isImageRepresentationReady(fileState);
+    try {
+      const mode = imageURLParams.mode;
+      const cachedPreview = cardPreviewCache.get(identifier.id, mode);
+      const dimensionsAreBigger = isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, dimensions);
+      if (cachedPreview && !dimensionsAreBigger) {
+        return cachedPreview;
+      }
+      let localPreview;
+      try {
+        if (filePreview) {
+          let value;
+          try {
+            const resolvedFilePreview = await filePreview;
+            value = resolvedFilePreview.value;
+          } catch (e) {
+            throw new LocalPreviewError('local-preview-rejected', e instanceof Error ? e : undefined);
+          }
+          if (typeof value === 'string') {
+            localPreview = {
+              dataURI: value,
+              orientation: 1,
+              source: 'local'
+            };
+          } else if (value instanceof Blob) {
+            const {
+              type
+            } = value;
+            const mediaType = getMediaTypeFromMimeType(type);
+            switch (mediaType) {
+              case 'image':
+                try {
+                  const orientation = await getOrientation(value);
+                  const dataURI = URL.createObjectURL(value);
+                  localPreview = {
+                    dataURI,
+                    orientation,
+                    source: 'local'
+                  };
+                } catch (e) {
+                  throw new LocalPreviewError('local-preview-image', e instanceof Error ? e : undefined);
+                }
+                break;
+              case 'video':
+                try {
+                  const dataURI = await takeSnapshot(value);
+                  localPreview = {
+                    dataURI,
+                    orientation: 1,
+                    source: 'local'
+                  };
+                } catch (e) {
+                  throw new LocalPreviewError('local-preview-video', e instanceof Error ? e : undefined);
+                }
+                break;
+              default:
+                throw new LocalPreviewError('local-preview-unsupported');
+            }
+          } else {
+            throw new LocalPreviewError('local-preview-unsupported');
+          }
+          const preview = {
+            ...localPreview,
+            dimensions
+          };
+          let source;
+          switch (preview.source) {
+            case 'local':
+              source = 'cache-local';
+              break;
+            case 'remote':
+              source = 'cache-remote';
+              break;
+            case 'ssr-server':
+              source = 'cache-ssr-server';
+              break;
+            case 'ssr-client':
+              source = 'cache-ssr-client';
+              break;
+            default:
+              source = preview.source;
+          }
+          // We want to embed some meta context into dataURI for Copy/Paste to work.
+          const dataURI = mediaBlobUrlAttrs ? addFileAttrsToUrl(preview.dataURI, mediaBlobUrlAttrs) : preview.dataURI;
+          // We store new cardPreview into cache
+          cardPreviewCache.set(identifier.id, mode, {
+            ...preview,
+            source,
+            dataURI
+          });
+          setCardPreview({
+            ...preview,
+            dataURI
+          });
+          return;
+        }
+      } catch (e) {
+        /**
+         * We report the error if:
+         * - local preview is supported and fails
+         * - local preview is unsupported and remote preview is NOT READY
+         *   i.e. the function was called for "no reason".
+         * We DON'T report the error if:
+         * - local preview is unsupported and remote preview IS READY
+         *   i.e. local preview is available and not supported,
+         *   but we are after the remote preview instead.
+         */
+        if (!isUnsupportedLocalPreviewError(e) || isUnsupportedLocalPreviewError(e) && !isRemotePreviewReady) {
+          // CXP-2723 TODO: We might have to wrap this error in MediaCardError
+          setNonCriticalError(e);
+        }
+        /**
+         * No matter the reason why the local preview failed, we break the process
+         * if there is no remote preview available
+         */
+        if (!isRemotePreviewReady) {
+          throw e;
+        }
+      }
+      if (!isRemotePreviewReady) {
+        /**
+         * We throw this in case this function has been called
+         * without checking isRemotePreviewReady first.
+         * If remote preview is not ready, the call to getCardPreviewFromBackend
+         * will generate a console error due to a 404 code
+         */
+        throw new MediaCardError('remote-preview-not-ready');
+      }
+      const remotePreview = await fetchAndCacheRemotePreview(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, mediaBlobUrlAttrs, traceContext);
+      setCardPreview(remotePreview);
+      return;
+    } 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 error should already been logged inside the getCardPreview. No need to log it here.
+        setIsBannedLocalPreview(true);
+      } else {
+        if (!['complete', 'error', 'failed-processing'].includes(status)) {
+          setStatus('error');
+          setError(wrappedError);
+        }
+      }
+    }
+  });
+
+  //----------------------------------------------------------------//
+  //------------ resolveUpfrontPreview useEffect -------------------//
+  //----------------------------------------------------------------//
+  const prevCardPreview = usePrevious(cardPreview);
+  const dimensionsRef = useCurrentValueRef(dimensions);
+  useEffect(() => {
+    const resolveUpfrontPreview = async identifier => {
+      // We block any possible future call to this method regardless of the outcome (success or fail)
+      // If it fails, the normal preview fetch should occur after the file state is fetched anyways
+      wasResolvedUpfrontPreviewRef.current = true;
+      try {
+        const fetchedDimensions = {
+          ...dimensions
+        };
+        const newCardPreview = await fetchRemotePreviewRef.current(identifier);
+        const areValidFetchedDimensions = !isBigger(fetchedDimensions, dimensionsRef.current);
+
+        // 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
+        if (areValidFetchedDimensions) {
+          setCardPreview(newCardPreview);
+        }
+      } catch (e) {
+        // NO need to log error. If this call fails, a refetch will happen after
+      }
+    };
+    const hadSSRCardPreview = ssr === 'client' && !!prevCardPreview && isSSRClientPreview(prevCardPreview);
+
+    // CXP-2723 TODO: `hadSSRCardPreview` is most likely redundant
+    if (!wasResolvedUpfrontPreviewRef.current && (!skipRemote || hadSSRCardPreview) && !cardPreview) {
+      resolveUpfrontPreview(identifier);
+    }
+  }, [cardPreview, dimensions, dimensionsRef, fetchRemotePreviewRef, identifier, skipRemote, prevCardPreview, ssr]);
+
+  //----------------------------------------------------------------//
+  //---------------- fetch and resolve card preview ----------------//
+  //----------------------------------------------------------------//
+
+  const prevDimensions = usePrevious(dimensions);
+  useEffect(() => {
+    var _ssrDataRef$current3;
+    if (cardPreview && !skipRemote && isSSRDataPreview(cardPreview) && isBigger((_ssrDataRef$current3 = ssrDataRef.current) === null || _ssrDataRef$current3 === void 0 ? void 0 : _ssrDataRef$current3.dimensions, dimensions)) {
+      // refetchSRRPreview: If dimensions from Server have changed and are bigger,
+      // we need to refetch
+      fetchRemotePreviewRef.current(identifier).then(setCardPreview).catch(e => {
+        const wrappedError = ensureMediaCardError('remote-preview-fetch-ssr', e, true);
+        setNonCriticalError(wrappedError);
+      });
+    }
+    // CXP-2723 TODO: The above and below preview fetch logic seem very similar and could be revisted
+    // Both compare dimensions, but the above is only for SSR in order to refetchSRRPreview and
+    // will swallow any errors. Below logic only applies when there is no card preview or the dimensions
+    // are bigger.
+    if (fileState && shouldResolvePreview({
+      status,
+      fileState: fileState,
+      prevDimensions,
+      dimensions,
+      hasCardPreview: !!cardPreview,
+      isBannedLocalPreview,
+      wasResolvedUpfrontPreview: wasResolvedUpfrontPreviewRef.current
+    })) {
+      resolvePreviewRef.current(identifier, fileState);
+    }
+    if (!skipRemote && ssr && !!cardPreview && isSSRClientPreview(cardPreview)) {
+      // Since the SSR preview brings the token in the query params,
+      // We need to fetch the remote preview to be able to cache it,
+      fetchRemotePreviewRef.current(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
+      });
+    }
+  }, [cardPreview, dimensions, fetchRemotePreviewRef, fileState, identifier, isBannedLocalPreview, prevDimensions, resolvePreviewRef, skipRemote, ssr, status]);
+
+  //----------------------------------------------------------------//
+  //----------------- set complete status --------------------------//
+  //----------------------------------------------------------------//
+
+  useEffect(() => {
+    if (previewDidRender &&
+    // We should't complete if status is uploading
+    ['loading-preview', 'processing'].includes(status)) {
+      setStatus('complete');
+      // TODO MEX-788: add test for "do not remove the card preview when unsubscribing".
+      setIsBannedLocalPreview(false); // CXP-2723 TODO: we might be able to remove this??
+    }
+  }, [previewDidRender, status]);
+
+  // CXP-2723 TODO: Create test cases for banning local preview after status is complete
+
+  //----------------------------------------------------------------//
+  //------------------ Subscribe to file state ---------------------//
+  //----------------------------------------------------------------//
+
+  const updateFileStateRef = useCurrentValueRef(() => {
+    if (fileState) {
+      // do not update the card status if the status is final
+      if (['complete', 'error', 'failed-processing'].includes(status)) {
+        return;
+      }
+      if (fileState.status !== 'error') {
+        const mediaType = 'mediaType' in fileState ? fileState.mediaType : undefined;
+        const isPreviewable = !!mediaType && ['audio', 'video', 'image', 'doc'].indexOf(mediaType) > -1;
+        const isPreviewableFileState = !!fileState.preview;
+        const isSupportedLocalPreview = mediaType === 'image' || mediaType === 'video';
+        const hasLocalPreview = !isBannedLocalPreview && isPreviewableFileState && isSupportedLocalPreview && !!fileState.mimeType && isMimeTypeSupportedByBrowser(fileState.mimeType);
+        const hasRemotePreview = isImageRepresentationReady(fileState);
+        const hasPreview = hasLocalPreview || hasRemotePreview;
+        let newStatus;
+        switch (fileState.status) {
+          case 'uploading':
+          case 'failed-processing':
+          case 'processing':
+            newStatus = fileState.status;
+            break;
+          case 'processed':
+            if (!isPreviewable || !hasPreview) {
+              newStatus = 'complete';
+              break;
+            }
+            newStatus = 'loading-preview';
+            break;
+          default:
+            newStatus = 'loading';
+        }
+        setStatus(newStatus);
+      } else {
+        const e = new MediaFileStateError(fileState.id, fileState.reason, fileState.message, fileState.details);
+        const errorReason = status === 'uploading' ? 'upload' : 'metadata-fetch';
+        setError(new MediaCardError(errorReason, e));
+        setStatus('error');
+      }
+    }
+  });
+  useEffect(() => {
+    updateFileStateRef.current();
+  }, [fileState, updateFileStateRef]);
+  const onImageError = newCardPreview => {
+    if (newCardPreview) {
+      const failedSSRObject = {
+        status: 'fail',
+        ...extractErrorInfo(new ImageLoadError(newCardPreview.source))
+      };
+      if (isSSRClientPreview(newCardPreview)) {
+        ssrReliabilityRef.current.client = failedSSRObject;
+      }
+
+      /*
+        If the cardPreview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
+      */
+
+      if (isSSRDataPreview(newCardPreview)) {
+        ssrReliabilityRef.current.server = failedSSRObject;
+        ssrReliabilityRef.current.client = failedSSRObject;
+      }
+    }
+
+    // If the dataURI has been replaced, we can dismiss this error
+    if ((newCardPreview === null || newCardPreview === void 0 ? void 0 : newCardPreview.dataURI) !== (cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI)) {
+      return;
+    }
+    const error = new ImageLoadError(newCardPreview === null || newCardPreview === void 0 ? void 0 : newCardPreview.source);
+    const isLocal = newCardPreview && isLocalPreview(newCardPreview);
+    const isSSR = newCardPreview && (isSSRClientPreview(newCardPreview) || isSSRDataPreview(newCardPreview));
+    if (isLocal || isSSR) {
+      if (isLocal) {
+        setIsBannedLocalPreview(true);
+        setNonCriticalError(error);
+      }
+      const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
+      removeCardPreviewFromCache(identifier.id, fileImageMode);
+      setCardPreview(undefined);
+    } else {
+      if (!['complete', 'error', 'failed-processing'].includes(status)) {
+        setStatus('error');
+        setError(error);
+      }
+    }
+  };
+  const onImageLoad = newCardPreview => {
+    if (newCardPreview) {
+      if (isSSRClientPreview(newCardPreview) && ssrReliabilityRef.current.client.status === 'unknown') {
+        ssrReliabilityRef.current.client = {
+          status: 'success'
+        };
+      }
+
+      /*
+        If the image loads successfully and it comes from server (global scope / ssrData), it means that we have reused it in client and the success counts for both: server & client.
+      */
+
+      if (isSSRDataPreview(newCardPreview) && ssrReliabilityRef.current.server.status === 'unknown') {
+        ssrReliabilityRef.current.server = {
+          status: 'success'
+        };
+        ssrReliabilityRef.current.client = {
+          status: 'success'
+        };
+      }
+    }
+
+    // If the dataURI has been replaced, we can dismiss this callback
+    if ((newCardPreview === null || newCardPreview === void 0 ? void 0 : newCardPreview.dataURI) !== (cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI)) {
+      return;
+    }
+  };
+
+  //----------------------------------------------------------------//
+  // RETURN
+  //----------------------------------------------------------------//
+
+  const StoreSSRDataScriptComponent = () => {
+    var _ssrReliabilityRef$cu;
+    return /*#__PURE__*/React.createElement(StoreSSRDataScript, {
+      identifier: identifier,
+      dataURI: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI,
+      dimensions: requestedDimensions,
+      error: ((_ssrReliabilityRef$cu = ssrReliabilityRef.current.server) === null || _ssrReliabilityRef$cu === void 0 ? void 0 : _ssrReliabilityRef$cu.status) === 'fail' ? ssrReliabilityRef.current.server : undefined
+    });
+  };
+
+  // CXP-2723 TODO: should consider simplifying our analytics, and how
+  // we might get rid of ssrReliabiltyRef from our hook
+  return {
+    cardPreview,
+    error,
+    nonCriticalError,
+    ssrReliabilityRef,
+    onImageError,
+    onImageLoad,
+    StoreSSRDataScript: StoreSSRDataScriptComponent
+  };
+};

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "77.4.4",
+      packageName: "77.4.6",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/utils/ufoExperiences.js

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