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

Media plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MediaViewerContainer = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _isType = require("../../pm-plugins/utils/is-type");
var _utils = require("../../ui/toolbar/utils");
var _PortalWrapper = require("./PortalWrapper");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports

var interactiveStyles = (0, _react2.css)({
  cursor: 'pointer'
});
var mediaViewerContainerTestID = 'media-viewer-container-test';
var MediaViewerContainer = exports.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 = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    showViewer = _useState2[0],
    setShowMediaViewer = _useState2[1];
  (0, _react.useEffect)(function () {
    setShowMediaViewer(isSelected);
  }, [isSelected]);
  var selectedNodeAttrs = (0, _utils.getSelectedNearestMediaContainerNodeAttrsFunction)(selectedMediaContainerNode);
  var showMediaViewer = function showMediaViewer() {
    setShowMediaViewer(true);
  };
  var closeMediaViewer = function closeMediaViewer() {
    setShowMediaViewer(false);
  };
  var isVideoMedia = (0, _isType.isVideo)((_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.__fileMimeType);
  var shouldShowViewer = isEditorViewMode && showViewer && selectedNodeAttrs && mediaClientConfig && !isVideoMedia && (0, _experiments.editorExperiment)('platform_editor_controls', 'control');
  return (0, _react2.jsx)(_react.Fragment, null, isEditorViewMode ? (0, _react2.jsx)(_react.Fragment, null, isInline ? (0, _react2.jsx)("span", {
    onClick: showMediaViewer,
    css: interactiveStyles,
    "data-testid": mediaViewerContainerTestID,
    role: "none"
  }, children) : (0, _react2.jsx)("div", {
    onClick: showMediaViewer,
    css: interactiveStyles,
    "data-testid": mediaViewerContainerTestID,
    role: "none"
  }, children), shouldShowViewer && (0, _react2.jsx)(_PortalWrapper.RenderMediaViewer, {
    selectedNodeAttrs: selectedNodeAttrs,
    mediaClientConfig: mediaClientConfig,
    onClose: closeMediaViewer,
    extensions: mediaViewerExtensions
  })) : children);
};