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

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DrawerModalVideo = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@iconify/react");
var _material = require("@mui/material");
var _reactPlayer = _interopRequireDefault(require("react-player"));
var _DrawerModal = require("../DrawerModal");
var _icons = require("../../helpers/icons");
var _components = require("../../components");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["backgroundColor", "onClose", "open", "srcVideo", "variant"];
var DrawerModalVideo = exports.DrawerModalVideo = function DrawerModalVideo(_ref) {
  var backgroundColor = _ref.backgroundColor,
    onClose = _ref.onClose,
    open = _ref.open,
    srcVideo = _ref.srcVideo,
    variant = _ref.variant,
    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  var theme = (0, _material.useTheme)();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerModal.DrawerModal, {
    open: open,
    onClose: onClose,
    background: backgroundColor,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Container, {
      sx: {
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)'
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
        sx: {
          display: 'flex',
          justifyContent: 'flex-end',
          alignItems: 'center'
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButtonComponent, {
          iconProps: {
            onClick: function onClick() {
              return onClose();
            },
            sx: {
              '&:hover': {
                backgroundColor: '#fff'
              }
            }
          },
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
            icon: _icons.ICONS_NAME.close,
            color: theme.palette.text.primary
          })
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.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__*/(0, _jsxRuntime.jsx)(_material.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__*/(0, _jsxRuntime.jsx)(_reactPlayer["default"], Object.assign({
            className: "react-player",
            controls: true,
            height: "100%",
            playing: true,
            url: srcVideo,
            width: "100%"
          }, props))
        })
      })]
    })
  });
};