@atlaskit/media-card 77.2.3 → 77.4.0

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

@@ -0,0 +1,289 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 var ExternalImageCard = function ExternalImageCard(_ref) {
+  var mediaClient = _ref.mediaClient,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'auto' : _ref$appearance,
+    _ref$resizeMode = _ref.resizeMode,
+    resizeMode = _ref$resizeMode === void 0 ? 'crop' : _ref$resizeMode,
+    _ref$disableOverlay = _ref.disableOverlay,
+    disableOverlay = _ref$disableOverlay === void 0 ? false : _ref$disableOverlay,
+    _ref$featureFlags = _ref.featureFlags,
+    featureFlags = _ref$featureFlags === void 0 ? {} : _ref$featureFlags,
+    identifier = _ref.identifier,
+    dimensions = _ref.dimensions,
+    contextId = _ref.contextId,
+    alt = _ref.alt,
+    actions = _ref.actions,
+    shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
+    selectable = _ref.selectable,
+    selected = _ref.selected,
+    testId = _ref.testId,
+    titleBoxBgColor = _ref.titleBoxBgColor,
+    titleBoxIcon = _ref.titleBoxIcon,
+    shouldHideTooltip = _ref.shouldHideTooltip,
+    mediaViewerItems = _ref.mediaViewerItems,
+    _onClick = _ref.onClick,
+    _onMouseEnter = _ref.onMouseEnter,
+    createAnalyticsEvent = _ref.createAnalyticsEvent;
+  var internalOccurrenceKey = useMemo(function () {
+    return generateUniqueId();
+  }, []);
+  var timeElapsedTillCommenced = useMemo(function () {
+    return performance.now();
+  }, []);
+
+  // Generate unique traceId for file
+  var traceContext = useMemo(function () {
+    return {
+      traceId: getRandomHex(8)
+    };
+  }, []);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    cardElement = _useState2[0],
+    setCardElement = _useState2[1];
+  var fileStateFlagsRef = useRef({
+    wasStatusUploading: false,
+    wasStatusProcessing: false
+  });
+  var fireCommencedEventRef = useCurrentValueRef(function () {
+    createAnalyticsEvent && fireCommencedEvent(createAnalyticsEvent, fileAttributes, {
+      overall: {
+        durationSincePageStart: timeElapsedTillCommenced
+      }
+    }, traceContext);
+    startUfoExperience(internalOccurrenceKey);
+  });
+  var _useState3 = useState('loading-preview'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    status = _useState4[0],
+    setStatus = _useState4[1];
+  useEffect(function () {
+    fireCommencedEventRef.current();
+    setStatus('loading-preview');
+  }, [fireCommencedEventRef, identifier]);
+  var cardPreview = useMemo(function () {
+    return {
+      dataURI: identifier.dataURI,
+      orientation: 1,
+      source: 'external'
+    };
+  }, [identifier.dataURI]);
+  var metadata = {
+    id: identifier.mediaItemType,
+    name: identifier.name || identifier.dataURI,
+    mediaType: 'image'
+  };
+  var fileAttributes = {
+    fileMediatype: 'image',
+    fileId: metadata.id
+  };
+
+  // for analytics
+  var ssrReliability = {
+    server: {
+      status: 'unknown'
+    },
+    client: {
+      status: 'unknown'
+    }
+  };
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    previewDidRender = _useState6[0],
+    setPreviewDidRender = _useState6[1];
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    error = _useState8[0],
+    setError = _useState8[1];
+  var _useState9 = useState(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    mediaViewerSelectedItem = _useState10[0],
+    setMediaViewerSelectedItem = _useState10[1];
+
+  //----------------------------------------------------------------//
+  //---------------------- Analytics  ------------------------------//
+  //----------------------------------------------------------------//
+
+  var fireOperationalEventRef = useCurrentValueRef(function () {
+    var timeElapsedTillEvent = performance.now();
+    var durationSinceCommenced = timeElapsedTillEvent - timeElapsedTillCommenced;
+    var performanceAttributes = {
+      overall: {
+        durationSincePageStart: timeElapsedTillEvent,
+        durationSinceCommenced: durationSinceCommenced
+      }
+    };
+    createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error, traceContext, undefined);
+    completeUfoExperience(internalOccurrenceKey, status, fileAttributes, fileStateFlagsRef.current, ssrReliability, error);
+  });
+  var fireScreenEventRef = useCurrentValueRef(function () {
+    createAnalyticsEvent && fireScreenEvent(createAnalyticsEvent, fileAttributes);
+  });
+  var fireAbortedEventRef = useCurrentValueRef(function () {
+    // UFO won't abort if it's already in a final state (succeeded, failed, aborted, etc)
+    abortUfoExperience(internalOccurrenceKey, {
+      fileAttributes: fileAttributes,
+      fileStateFlags: fileStateFlagsRef === null || fileStateFlagsRef === void 0 ? void 0 : fileStateFlagsRef.current,
+      ssrReliability: ssrReliability
+    });
+  });
+
+  //----------------------------------------------------------------//
+  //------------------------ useEffects ----------------------------//
+  //----------------------------------------------------------------//
+
+  useEffect(function () {
+    var _getDocument;
+    var fireCopiedCardEvent = function 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 || _getDocument.addEventListener('copy', fireCopiedCardEvent);
+    return function () {
+      var _getDocument2;
+      (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 || _getDocument2.removeEventListener('copy', fireCopiedCardEvent);
+    };
+  }, [cardElement, createAnalyticsEvent, metadata.id]);
+  var prevStatus = usePrevious(status);
+  useEffect(function () {
+    if (prevStatus !== undefined && status !== prevStatus) {
+      fireOperationalEventRef.current();
+    }
+  }, [fireOperationalEventRef, prevStatus, status]);
+  useEffect(function () {
+    if (previewDidRender && status === 'loading-preview') {
+      setStatus('complete');
+    }
+  }, [previewDidRender, status]);
+  useEffect(function () {
+    if (prevStatus !== undefined && status !== prevStatus) {
+      if (status === 'complete') {
+        fireScreenEventRef.current();
+      }
+    }
+  }, [fireScreenEventRef, prevStatus, status]);
+  useEffect(function () {
+    return function () {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      fireAbortedEventRef.current();
+    };
+  }, [fireAbortedEventRef]);
+
+  //----------------------------------------------------------------//
+  //---------------------- Render Functions ------------------------//
+  //----------------------------------------------------------------//
+
+  var renderMediaViewer = function renderMediaViewer() {
+    if (!mediaViewerSelectedItem) {
+      return;
+    }
+    return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
+      collectionName: '',
+      items: mediaViewerItems || [],
+      mediaClientConfig: mediaClient.config,
+      selectedItem: mediaViewerSelectedItem,
+      onClose: function onClose() {
+        setMediaViewerSelectedItem(null);
+      },
+      contextId: contextId,
+      featureFlags: featureFlags
+    }), document.body);
+  };
+
+  //----------------------------------------------------------------//
+  //-------------------------- RENDER ------------------------------//
+  //----------------------------------------------------------------//
+
+  var 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: function onClick(event, analyticsEvent) {
+      if (_onClick) {
+        var cardEvent = {
+          event: event,
+          mediaItemDetails: metadata
+        };
+        _onClick(cardEvent, analyticsEvent);
+      }
+      if (shouldOpenMediaViewer) {
+        setMediaViewerSelectedItem({
+          mediaItemType: 'external-image',
+          dataURI: identifier.dataURI,
+          name: identifier.name
+        });
+      }
+    },
+    onMouseEnter: function onMouseEnter(event) {
+      _onMouseEnter === null || _onMouseEnter === void 0 || _onMouseEnter({
+        event: event,
+        mediaItemDetails: metadata
+      });
+    },
+    disableOverlay: disableOverlay,
+    onDisplayImage: function onDisplayImage() {
+      var payloadPart = {
+        fileId: identifier.dataURI,
+        isUserCollection: false
+      };
+      globalMediaEventEmitter.emit('media-viewed', _objectSpread({
+        viewingLevel: 'minimal'
+      }, payloadPart));
+    },
+    innerRef: setCardElement,
+    testId: testId,
+    featureFlags: featureFlags,
+    titleBoxBgColor: titleBoxBgColor,
+    titleBoxIcon: titleBoxIcon,
+    onImageError: function 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;
+      }
+      var error = new ImageLoadError(newCardPreview === null || newCardPreview === void 0 ? void 0 : newCardPreview.source);
+      setStatus('error');
+      setError(error);
+    },
+    onImageLoad: function 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);
+};