@wulperstudio/cms/organisms/Blocks/BlockVideoModal/index.js

Wulper Studio Library Components CMS

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["variant", "backgroundImage", "srcVideo", "backgroundColor", "iconName", "reactPlayerProps"],
  _excluded2 = ["sx"];
import React from 'react';
import ReactPlayer from 'react-player';
import { Icon } from '@iconify/react';
import { Box, useTheme, IconButton, Container, alpha } from '@mui/material';
import { DrawerModal } from '../../DrawerModal';
import { consts } from '../../../helpers/consts';
import { BoxContainer } from '../../BoxContainer';
import { ICONS_NAME } from '../../../helpers/icons';
import { IconButtonComponent } from '../../../components';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export var BlockVideoModal = function BlockVideoModal(_ref) {
  var _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? 'center' : _ref$variant,
    _ref$backgroundImage = _ref.backgroundImage,
    backgroundImage = _ref$backgroundImage === void 0 ? consts.backgroundImageDefault : _ref$backgroundImage,
    srcVideo = _ref.srcVideo,
    backgroundColor = _ref.backgroundColor,
    iconName = _ref.iconName,
    reactPlayerProps = _ref.reactPlayerProps,
    props = _objectWithoutProperties(_ref, _excluded);
  var theme = useTheme();
  var _React$useState = React.useState(false),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    isOpenModal = _React$useState2[0],
    setIsOpenModal = _React$useState2[1];
  var sx = props.sx,
    rest = _objectWithoutProperties(props, _excluded2);
  var handleOpenModal = function handleOpenModal() {
    return setIsOpenModal(function (prev) {
      return !prev;
    });
  };
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(Box, Object.assign({
      component: "article",
      sx: Object.assign(_defineProperty({
        background: "url(".concat(backgroundImage, ") no-repeat top"),
        height: '100%',
        minWidth: '100%',
        borderRadius: '30px',
        position: 'relative',
        backgroundSize: 'cover',
        backgroundColor: 'background.paper',
        boxShadow: theme.shadows[1],
        aspectRatio: '16/9'
      }, theme.breakpoints.down('md'), {
        minWidth: '100%'
      }), sx)
    }, rest, {
      children: /*#__PURE__*/_jsx(IconButton, {
        onClick: function onClick() {
          return handleOpenModal();
        },
        sx: {
          position: 'absolute',
          backgroundColor: alpha('#000', 0.04),
          top: '50%',
          left: '50%',
          zIndex: 2,
          transform: 'translate(-50%,-50%)',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          transition: 'color .2s',
          width: '90px',
          height: '90px',
          '&:hover': {
            cursor: 'pointer',
            backgroundColor: alpha('#000', 0.09)
          }
        },
        children: /*#__PURE__*/_jsx(Icon, {
          icon: iconName || ICONS_NAME.play,
          color: "#fff",
          width: 60,
          height: 60
        })
      })
    })), /*#__PURE__*/_jsx(DrawerModal, {
      open: isOpenModal,
      onClose: handleOpenModal,
      background: backgroundColor,
      children: /*#__PURE__*/_jsxs(Container, {
        sx: {
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)'
        },
        children: [/*#__PURE__*/_jsx(Box, {
          sx: Object.assign({
            display: 'flex',
            justifyContent: 'flex-end',
            alignItems: 'center',
            maxWidth: '960px',
            marginLeft: 'auto',
            marginRight: 'auto'
          }, variant === 'fullscreen' && {
            maxWidth: '100%'
          }),
          children: /*#__PURE__*/_jsx(IconButtonComponent, {
            iconProps: {
              onClick: function onClick() {
                return handleOpenModal();
              },
              color: 'inherit',
              disableFocusRipple: true,
              disableRipple: true,
              sx: {
                backgroundColor: alpha(theme.palette.background["default"], 0.8),
                boxShadow: 'unset',
                '&:hover': {
                  boxShadow: theme.shadows[1],
                  backgroundColor: alpha(theme.palette.background["default"], 1)
                }
              }
            },
            children: /*#__PURE__*/_jsx(Icon, {
              icon: ICONS_NAME.close,
              color: theme.palette.text.primary
            })
          })
        }), /*#__PURE__*/_jsx(BoxContainer, {
          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%'
              },
              '& iframe': {
                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%"
            }, reactPlayerProps))
          })
        })]
      })
    })]
  });
};