@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
186 lines • 6.89 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
var _excluded = ["sx"],
_excluded2 = ["icon", "color", "width", "height"];
/* eslint-disable no-unused-expressions */
import React from 'react';
import { Icon } from '@iconify/react';
import { Box, IconButton, alpha, useTheme } from '@mui/material';
import { ICONS_NAME } from '../../helpers/icons';
import { BoxForm, ContainerForm, ContainerVideo, Form, VideoEmbed, VideoModalWrapper, ContainerButtonForm, videoCustom } from './styled';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var VideoModalCta = function VideoModalCta(_ref) {
var srcVideo = _ref.srcVideo,
children = _ref.children,
onClose = _ref.onClose,
containerModalProps = _ref.containerModalProps,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'autoplay' : _ref$variant,
isOnlyChildren = _ref.isOnlyChildren,
iconCloseProps = _ref.iconCloseProps;
var theme = useTheme();
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
isPlay = _React$useState2[0],
setIsPlay = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
isMuted = _React$useState4[0],
setIsMuted = _React$useState4[1];
var videoRef = React.useRef(null);
var _ref2 = (iconCloseProps == null ? void 0 : iconCloseProps.iconButton) || {},
sxIconCloseProps = _ref2.sx,
restIconCloseProps = _objectWithoutProperties(_ref2, _excluded);
var _ref3 = (iconCloseProps == null ? void 0 : iconCloseProps.icon) || {},
_ref3$icon = _ref3.icon,
icon = _ref3$icon === void 0 ? ICONS_NAME.close : _ref3$icon,
_ref3$color = _ref3.color,
color = _ref3$color === void 0 ? theme.palette.background["default"] : _ref3$color,
_ref3$width = _ref3.width,
width = _ref3$width === void 0 ? 20 : _ref3$width,
_ref3$height = _ref3.height,
height = _ref3$height === void 0 ? 20 : _ref3$height,
restIconProps = _objectWithoutProperties(_ref3, _excluded2);
var handlePlay = function handlePlay() {
var _videoRef$current, _videoRef$current2;
setIsPlay(function (prev) {
return !prev;
});
isPlay ? videoRef == null || (_videoRef$current = videoRef.current) == null ? void 0 : _videoRef$current.pause() : videoRef == null || (_videoRef$current2 = videoRef.current) == null ? void 0 : _videoRef$current2.play();
};
var handleVolumen = function handleVolumen() {
setIsMuted(function (prev) {
return !prev;
});
};
React.useEffect(function () {
if (variant === 'autoplay') {
setIsPlay(true);
setIsMuted(false);
}
}, [variant]);
return /*#__PURE__*/_jsxs(VideoModalWrapper, Object.assign({}, containerModalProps, {
className: "video__modal__wrapper ".concat(containerModalProps == null ? void 0 : containerModalProps.className),
children: [isOnlyChildren ? children : /*#__PURE__*/_jsxs(VideoEmbed, {
className: "video__embed__component",
children: [srcVideo && /*#__PURE__*/_jsxs(ContainerVideo, {
children: [/*#__PURE__*/_jsx(Box, {
component: "video",
sx: videoCustom(),
id: "player",
playsInline: true,
preload: "auto",
src: srcVideo,
ref: videoRef,
autoPlay: variant === 'autoplay',
muted: isMuted,
onEnded: function onEnded() {
setIsPlay(function (prev) {
return !prev;
});
}
}), /*#__PURE__*/_jsx(IconButton, {
onClick: function onClick() {
return handlePlay();
},
sx: {
position: 'absolute',
backgroundColor: 'rgba(0, 0, 0, 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'
}
},
children: /*#__PURE__*/_jsx(Icon, {
icon: isPlay ? ICONS_NAME.pause : ICONS_NAME.play,
color: alpha(theme.palette.background["default"], 0.3),
width: 60,
height: 60
})
}), variant === 'autoplay' && /*#__PURE__*/_jsx(IconButton, {
onClick: function onClick() {
return handleVolumen();
},
sx: {
position: 'absolute',
backgroundColor: 'rgba(0, 0, 0, 0.04)',
top: '10px',
left: '10px',
zIndex: 2,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
transition: 'color .2s',
width: '40px',
height: '40px',
'&:hover': {
cursor: 'pointer'
}
},
children: /*#__PURE__*/_jsx(Icon, {
icon: !isMuted ? ICONS_NAME.volumenUp : ICONS_NAME.volumnenOff,
color: alpha(theme.palette.background["default"], 0.3),
width: 30,
height: 30
})
})]
}), /*#__PURE__*/_jsx(BoxForm, {
className: "video__box__form",
children: /*#__PURE__*/_jsx(Box, {
sx: {
position: 'relative',
zIndex: 999,
height: '100%',
width: '100%'
},
children: /*#__PURE__*/_jsxs(ContainerForm, {
sx: Object.assign({}, !srcVideo && {
maxHeight: 'unset'
}),
children: [srcVideo && /*#__PURE__*/_jsx(Form, {
children: /*#__PURE__*/_jsx(ContainerButtonForm, {
children: children
})
}), !srcVideo && children]
})
})
})]
}), /*#__PURE__*/_jsx(IconButton, Object.assign({
onClick: function onClick() {
return onClose();
},
sx: Object.assign(_defineProperty({
position: 'absolute',
zIndex: theme.zIndex.fab,
width: theme.spacing(4.1),
height: theme.spacing(4.1),
top: '-12px',
right: '-12px',
backgroundColor: '#000',
'&:hover': {
backgroundColor: '#000'
}
}, theme.breakpoints.down('md'), {
top: 12,
right: 12
}), sxIconCloseProps)
}, restIconCloseProps, {
children: /*#__PURE__*/_jsx(Icon, Object.assign({
icon: icon,
color: color,
width: width,
height: height
}, restIconProps))
}))]
}));
};