@atlaskit/media-card 77.2.3 → 77.3.0

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

@@ -0,0 +1,261 @@
+import { globalMediaEventEmitter } from '@atlaskit/media-client';
+import { getRandomHex } from '@atlaskit/media-common';
+import { MediaViewer } from '@atlaskit/media-viewer';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { ImageLoadError } from '../../errors';
+import getDocument from '../../utils/document';
+import { generateUniqueId } from '../../utils/generateUniqueId';
+import { getMediaCardCursor } from '../../utils/getMediaCardCursor';
+import { abortUfoExperience, completeUfoExperience, startUfoExperience } from '../../utils/ufoExperiences';
+import { useCurrentValueRef } from '../../utils/useCurrentValueRef';
+import { usePrevious } from '../../utils/usePrevious';
+import { fireCommencedEvent, fireCopiedEvent, fireOperationalEvent, fireScreenEvent } from '../cardAnalytics';
+import { CardViewV2 } from './cardViewV2';
+export const ExternalImageCard = ({
+  mediaClient,
+  appearance = 'auto',
+  resizeMode = 'crop',
+  disableOverlay = false,
+  // Media Feature Flag defaults are defined in @atlaskit/media-common
+  featureFlags = {},
+  identifier,
+  dimensions,
+  contextId,
+  alt,
+  actions,
+  shouldOpenMediaViewer,
+  selectable,
+  selected,
+  testId,
+  titleBoxBgColor,
+  titleBoxIcon,
+  shouldHideTooltip,
+  mediaViewerItems,
+  onClick,
+  onMouseEnter,
+  createAnalyticsEvent
+}) => {
+  const internalOccurrenceKey = useMemo(() => generateUniqueId(), []);
+  const timeElapsedTillCommenced = useMemo(() => performance.now(), []);
+
+  // Generate unique traceId for file
+  const traceContext = useMemo(() => ({
+    traceId: getRandomHex(8)
+  }), []);
+  const [cardElement, setCardElement] = useState(null);
+  const fileStateFlagsRef = useRef({
+    wasStatusUploading: false,
+    wasStatusProcessing: false
+  });
+  const fireCommencedEventRef = useCurrentValueRef(() => {
+    createAnalyticsEvent && fireCommencedEvent(createAnalyticsEvent, fileAttributes, {
+      overall: {
+        durationSincePageStart: timeElapsedTillCommenced
+      }
+    }, traceContext);
+    startUfoExperience(internalOccurrenceKey);
+  });
+  const [status, setStatus] = useState('loading-preview');
+  useEffect(() => {
+    fireCommencedEventRef.current();
+    setStatus('loading-preview');
+  }, [fireCommencedEventRef, identifier]);
+  const cardPreview = useMemo(() => ({
+    dataURI: identifier.dataURI,
+    orientation: 1,
+    source: 'external'
+  }), [identifier.dataURI]);
+  const metadata = {
+    id: identifier.mediaItemType,
+    name: identifier.name || identifier.dataURI,
+    mediaType: 'image'
+  };
+  const fileAttributes = {
+    fileMediatype: 'image',
+    fileId: metadata.id
+  };
+
+  // for analytics
+  const ssrReliability = {
+    server: {
+      status: 'unknown'
+    },
+    client: {
+      status: 'unknown'
+    }
+  };
+  const [previewDidRender, setPreviewDidRender] = useState(false);
+  const [error, setError] = useState();
+  const [mediaViewerSelectedItem, setMediaViewerSelectedItem] = useState(null);
+
+  //----------------------------------------------------------------//
+  //---------------------- Analytics  ------------------------------//
+  //----------------------------------------------------------------//
+
+  const fireOperationalEventRef = useCurrentValueRef(() => {
+    const timeElapsedTillEvent = performance.now();
+    const durationSinceCommenced = timeElapsedTillEvent - timeElapsedTillCommenced;
+    const performanceAttributes = {
+      overall: {
+        durationSincePageStart: timeElapsedTillEvent,
+        durationSinceCommenced
+      }
+    };
+    createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error, traceContext, undefined);
+    completeUfoExperience(internalOccurrenceKey, status, fileAttributes, fileStateFlagsRef.current, ssrReliability, error);
+  });
+  const fireScreenEventRef = useCurrentValueRef(() => {
+    createAnalyticsEvent && fireScreenEvent(createAnalyticsEvent, fileAttributes);
+  });
+  const fireAbortedEventRef = useCurrentValueRef(() => {
+    // UFO won't abort if it's already in a final state (succeeded, failed, aborted, etc)
+    abortUfoExperience(internalOccurrenceKey, {
+      fileAttributes,
+      fileStateFlags: fileStateFlagsRef === null || fileStateFlagsRef === void 0 ? void 0 : fileStateFlagsRef.current,
+      ssrReliability: ssrReliability
+    });
+  });
+
+  //----------------------------------------------------------------//
+  //------------------------ useEffects ----------------------------//
+  //----------------------------------------------------------------//
+
+  useEffect(() => {
+    var _getDocument;
+    const fireCopiedCardEvent = () => {
+      cardElement && createAnalyticsEvent && fireCopiedEvent(createAnalyticsEvent, metadata.id, cardElement);
+    };
+
+    // 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()
+    // won't work in IE11
+    (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.addEventListener('copy', fireCopiedCardEvent);
+    return () => {
+      var _getDocument2;
+      (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.removeEventListener('copy', fireCopiedCardEvent);
+    };
+  }, [cardElement, createAnalyticsEvent, metadata.id]);
+  const prevStatus = usePrevious(status);
+  useEffect(() => {
+    if (prevStatus !== undefined && status !== prevStatus) {
+      fireOperationalEventRef.current();
+    }
+  }, [fireOperationalEventRef, prevStatus, status]);
+  useEffect(() => {
+    if (previewDidRender && status === 'loading-preview') {
+      setStatus('complete');
+    }
+  }, [previewDidRender, status]);
+  useEffect(() => {
+    if (prevStatus !== undefined && status !== prevStatus) {
+      if (status === 'complete') {
+        fireScreenEventRef.current();
+      }
+    }
+  }, [fireScreenEventRef, prevStatus, status]);
+  useEffect(() => {
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      fireAbortedEventRef.current();
+    };
+  }, [fireAbortedEventRef]);
+
+  //----------------------------------------------------------------//
+  //---------------------- Render Functions ------------------------//
+  //----------------------------------------------------------------//
+
+  const renderMediaViewer = () => {
+    if (!mediaViewerSelectedItem) {
+      return;
+    }
+    return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
+      collectionName: '',
+      items: mediaViewerItems || [],
+      mediaClientConfig: mediaClient.config,
+      selectedItem: mediaViewerSelectedItem,
+      onClose: () => {
+        setMediaViewerSelectedItem(null);
+      },
+      contextId: contextId,
+      featureFlags: featureFlags
+    }), document.body);
+  };
+
+  //----------------------------------------------------------------//
+  //-------------------------- RENDER ------------------------------//
+  //----------------------------------------------------------------//
+
+  const mediaCardCursor = getMediaCardCursor(false, !!shouldOpenMediaViewer, status === 'error', !!cardPreview, metadata.mediaType);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardViewV2, {
+    status: status,
+    error: error,
+    mediaItemType: identifier.mediaItemType,
+    metadata: metadata,
+    cardPreview: cardPreview,
+    alt: alt,
+    appearance: appearance,
+    resizeMode: resizeMode,
+    dimensions: dimensions,
+    actions: actions,
+    selectable: selectable,
+    selected: selected,
+    onClick: (event, analyticsEvent) => {
+      if (onClick) {
+        const cardEvent = {
+          event,
+          mediaItemDetails: metadata
+        };
+        onClick(cardEvent, analyticsEvent);
+      }
+      if (shouldOpenMediaViewer) {
+        setMediaViewerSelectedItem({
+          mediaItemType: 'external-image',
+          dataURI: identifier.dataURI,
+          name: identifier.name
+        });
+      }
+    },
+    onMouseEnter: event => {
+      onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter({
+        event,
+        mediaItemDetails: metadata
+      });
+    },
+    disableOverlay: disableOverlay,
+    onDisplayImage: () => {
+      const payloadPart = {
+        fileId: identifier.dataURI,
+        isUserCollection: false
+      };
+      globalMediaEventEmitter.emit('media-viewed', {
+        viewingLevel: 'minimal',
+        ...payloadPart
+      });
+    },
+    innerRef: setCardElement,
+    testId: testId,
+    featureFlags: featureFlags,
+    titleBoxBgColor: titleBoxBgColor,
+    titleBoxIcon: titleBoxIcon,
+    onImageError: newCardPreview => {
+      // 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);
+      setStatus('error');
+      setError(error);
+    },
+    onImageLoad: newCardPreview => {
+      // 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;
+      }
+      setPreviewDidRender(true);
+    },
+    mediaCardCursor: mediaCardCursor,
+    shouldHideTooltip: shouldHideTooltip
+  }), mediaViewerSelectedItem ? renderMediaViewer() : null);
+};