@wulperstudio/cms/organisms/DrawerModalVideo/DrawerModalVideo.js

Wulper Studio Library Components CMS

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["backgroundColor", "onClose", "open", "srcVideo", "variant"];
import React from 'react';
import { Icon } from '@iconify/react';
import { Box, useTheme, Container } from '@mui/material';
import ReactPlayer from 'react-player';
import { DrawerModal } from '../DrawerModal';
import { ICONS_NAME } from '../../helpers/icons';
import { IconButtonComponent } from '../../components';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var DrawerModalVideo = function DrawerModalVideo(_ref) {
  var backgroundColor = _ref.backgroundColor,
    onClose = _ref.onClose,
    open = _ref.open,
    srcVideo = _ref.srcVideo,
    variant = _ref.variant,
    props = _objectWithoutProperties(_ref, _excluded);
  var theme = useTheme();
  return /*#__PURE__*/_jsx(DrawerModal, {
    open: open,
    onClose: onClose,
    background: backgroundColor,
    children: /*#__PURE__*/_jsxs(Container, {
      sx: {
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)'
      },
      children: [/*#__PURE__*/_jsx(Box, {
        sx: {
          display: 'flex',
          justifyContent: 'flex-end',
          alignItems: 'center'
        },
        children: /*#__PURE__*/_jsx(IconButtonComponent, {
          iconProps: {
            onClick: function onClick() {
              return onClose();
            },
            sx: {
              '&:hover': {
                backgroundColor: '#fff'
              }
            }
          },
          children: /*#__PURE__*/_jsx(Icon, {
            icon: ICONS_NAME.close,
            color: theme.palette.text.primary
          })
        })
      }), /*#__PURE__*/_jsx(Box, {
        sx: Object.assign({
          maxWidth: '960px',
          padding: 0,
          position: 'relative',
          width: '100%',
          margin: 'auto',
          boxShadow: theme.shadows[1],
          borderRadius: '16px',
          mt: '1rem'
        }, variant === 'fullscreen' && {
          maxWidth: '100%'
        }),
        children: /*#__PURE__*/_jsx(Box, {
          sx: {
            position: 'relative',
            borderRadius: '16px',
            overflow: 'hidden',
            '&::before': {
              content: '" "',
              display: 'block',
              paddingBottom: '56.25%'
            },
            '& .react-player': {
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: '100%'
            }
          },
          children: /*#__PURE__*/_jsx(ReactPlayer, Object.assign({
            className: "react-player",
            controls: true,
            height: "100%",
            playing: true,
            url: srcVideo,
            width: "100%"
          }, props))
        })
      })]
    })
  });
};