@braineet/ui/dist/esm/components/modal-media-viewer/ModalMediaViewer.js

Braineet design system

var _excluded = ["author", "date", "fileName", "url", "onClose", "isOpen", "type", "texts", "viewerConfig"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
/* eslint-disable no-nested-ternary */
/* eslint-disable no-useless-escape */

import React, { useMemo } from 'react';
import Box from '../box';
import { DocumentViewer, getEmbedUrl } from '../document-viewer';
import Heading from '../heading';
import Modal, { ModalCloseButton } from '../modal';
import Text from '../text';
import { HeaderFile, ModalIcon, ModalIconContainer, ButtonStyled } from './sc.modalMediaViewer';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
var defaultTranslations = {
  title: 'Vizualize this file',
  closeButton: 'Close modal'
};
var ModalMediaViewer = function ModalMediaViewer(_ref) {
  var author = _ref.author,
    date = _ref.date,
    fileName = _ref.fileName,
    url = _ref.url,
    onClose = _ref.onClose,
    isOpen = _ref.isOpen,
    type = _ref.type,
    texts = _ref.texts,
    _ref$viewerConfig = _ref.viewerConfig,
    viewerConfig = _ref$viewerConfig === void 0 ? {} : _ref$viewerConfig,
    restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var translations = _extends({}, defaultTranslations, texts);
  var embeddedUrl = useMemo(function () {
    if (url) {
      var embedData = getEmbedUrl(url, type);
      return embedData;
    }
    return false;
  }, [url, type]);
  var overlayRef = React.useRef();
  var downloadFile = function downloadFile() {
    var a = document.createElement('a');
    a.setAttribute('download', '');
    a.href = url;
    document.body.appendChild(a);
    a.click();
    a.remove();
  };
  var handleCloseOnOverlay = function handleCloseOnOverlay(e) {
    if (e.target === (overlayRef == null ? void 0 : overlayRef.current)) {
      onClose();
    }
  };
  if (!isOpen) return null;
  return /*#__PURE__*/_jsx(Modal, _extends({
    isOpen: isOpen,
    title: fileName || translations.title,
    closeSrText: translations.closeButton,
    onClose: onClose,
    size: "fullscreen",
    overlayStyles: {
      background: 'rgba(0,0,0,0.8)',
      backdropFilter: 'blur(4px)'
    },
    modalInnerStyles: {
      boxShadow: 'none',
      border: 'none',
      background: 'transparent',
      height: 'calc(100vh - 2rem)',
      width: 'calc(100vw - 2rem)'
    },
    isCentered: true,
    standalone: true
  }, restProps, {
    children: /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsxs(HeaderFile, {
        children: [fileName ? /*#__PURE__*/_jsxs(_Fragment, {
          children: [/*#__PURE__*/_jsx(ModalIconContainer, {
            children: /*#__PURE__*/_jsx(ModalIcon, {
              name: embeddedUrl.iconModal,
              fileType: embeddedUrl.fileType
            })
          }), /*#__PURE__*/_jsxs(Box, {
            flexGrow: 1,
            children: [/*#__PURE__*/_jsx(Heading, {
              color: "white",
              children: fileName || translations.title
            }), author || date ? /*#__PURE__*/_jsxs(Text, {
              size: "xs",
              color: "white",
              children: [author ? author.fullname : '', author && date ? ' • ' : '', date || '']
            }) : null]
          })]
        }) : /*#__PURE__*/_jsx(Box, {
          flexGrow: 1
        }), /*#__PURE__*/_jsxs(Box, {
          display: "flex",
          alignItems: "flex-end",
          children: [embeddedUrl.canDownload ? /*#__PURE__*/_jsx(ButtonStyled, {
            marginRight: 8,
            styleType: "solid",
            color: "black",
            icon: "download_cloud",
            onClick: downloadFile
          }) : null, embeddedUrl.canOpen ? /*#__PURE__*/_jsx(ButtonStyled, {
            forwardedAs: "a",
            href: url,
            rel: "noreferrer",
            target: "_blank",
            marginRight: 8,
            styleType: "solid",
            color: "black",
            icon: "share"
          }) : null, /*#__PURE__*/_jsx(ModalCloseButton, {
            color: "white",
            position: "relative",
            top: "auto",
            right: "auto"
          })]
        })]
      }), /*#__PURE__*/_jsx(Box, {
        ref: overlayRef,
        display: "flex",
        color: "white",
        alignItems: "center",
        justifyContent: "center",
        height: "100%",
        onClick: handleCloseOnOverlay,
        children: /*#__PURE__*/_jsx(DocumentViewer, _extends({
          texts: texts,
          url: url,
          type: type
        }, viewerConfig))
      })]
    })
  }));
};
export default ModalMediaViewer;