@atlaskit/editor-plugin-media/dist/esm/ui/MediaViewer/MediaViewerContainer.js

Media plugin for @atlaskit/editor-core

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React, { Fragment, useEffect, useState } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { css, jsx } from '@emotion/react';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { isVideo } from '../../pm-plugins/utils/is-type';
import { getSelectedNearestMediaContainerNodeAttrsFunction } from '../../ui/toolbar/utils';
import { RenderMediaViewer } from './PortalWrapper';
var interactiveStyles = css({
  cursor: 'pointer'
});
var mediaViewerContainerTestID = 'media-viewer-container-test';
export var MediaViewerContainer = function MediaViewerContainer(_ref) {
  var _mediaNode$firstChild;
  var mediaNode = _ref.mediaNode,
    selectedMediaContainerNode = _ref.selectedMediaContainerNode,
    mediaClientConfig = _ref.mediaClientConfig,
    _ref$isEditorViewMode = _ref.isEditorViewMode,
    isEditorViewMode = _ref$isEditorViewMode === void 0 ? false : _ref$isEditorViewMode,
    _ref$isSelected = _ref.isSelected,
    isSelected = _ref$isSelected === void 0 ? true : _ref$isSelected,
    _ref$isInline = _ref.isInline,
    isInline = _ref$isInline === void 0 ? false : _ref$isInline,
    mediaViewerExtensions = _ref.mediaViewerExtensions,
    children = _ref.children;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    showViewer = _useState2[0],
    setShowMediaViewer = _useState2[1];
  useEffect(function () {
    setShowMediaViewer(isSelected);
  }, [isSelected]);
  var selectedNodeAttrs = getSelectedNearestMediaContainerNodeAttrsFunction(selectedMediaContainerNode);
  var showMediaViewer = function showMediaViewer() {
    setShowMediaViewer(true);
  };
  var closeMediaViewer = function closeMediaViewer() {
    setShowMediaViewer(false);
  };
  var isVideoMedia = isVideo((_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.__fileMimeType);
  var shouldShowViewer = isEditorViewMode && showViewer && selectedNodeAttrs && mediaClientConfig && !isVideoMedia && editorExperiment('platform_editor_controls', 'control');
  return jsx(Fragment, null, isEditorViewMode ? jsx(Fragment, null, isInline ? jsx("span", {
    onClick: showMediaViewer,
    css: interactiveStyles,
    "data-testid": mediaViewerContainerTestID,
    role: "none"
  }, children) : jsx("div", {
    onClick: showMediaViewer,
    css: interactiveStyles,
    "data-testid": mediaViewerContainerTestID,
    role: "none"
  }, children), shouldShowViewer && jsx(RenderMediaViewer, {
    selectedNodeAttrs: selectedNodeAttrs,
    mediaClientConfig: mediaClientConfig,
    onClose: closeMediaViewer,
    extensions: mediaViewerExtensions
  })) : children);
};