@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
193 lines (192 loc) • 7.66 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.VideoModalCta = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@iconify/react");
var _material = require("@mui/material");
var _icons = require("../../helpers/icons");
var _styled = require("./styled");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["sx"],
_excluded2 = ["icon", "color", "width", "height"];
/* eslint-disable no-unused-expressions */
var VideoModalCta = exports.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 = (0, _material.useTheme)();
var _React$useState = _react["default"].useState(false),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
isPlay = _React$useState2[0],
setIsPlay = _React$useState2[1];
var _React$useState3 = _react["default"].useState(false),
_React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
isMuted = _React$useState4[0],
setIsMuted = _React$useState4[1];
var videoRef = _react["default"].useRef(null);
var _ref2 = (iconCloseProps == null ? void 0 : iconCloseProps.iconButton) || {},
sxIconCloseProps = _ref2.sx,
restIconCloseProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
var _ref3 = (iconCloseProps == null ? void 0 : iconCloseProps.icon) || {},
_ref3$icon = _ref3.icon,
icon = _ref3$icon === void 0 ? _icons.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 = (0, _objectWithoutProperties2["default"])(_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["default"].useEffect(function () {
if (variant === 'autoplay') {
setIsPlay(true);
setIsMuted(false);
}
}, [variant]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.VideoModalWrapper, Object.assign({}, containerModalProps, {
className: "video__modal__wrapper ".concat(containerModalProps == null ? void 0 : containerModalProps.className),
children: [isOnlyChildren ? children : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.VideoEmbed, {
className: "video__embed__component",
children: [srcVideo && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.ContainerVideo, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
component: "video",
sx: (0, _styled.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__*/(0, _jsxRuntime.jsx)(_material.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__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
icon: isPlay ? _icons.ICONS_NAME.pause : _icons.ICONS_NAME.play,
color: (0, _material.alpha)(theme.palette.background["default"], 0.3),
width: 60,
height: 60
})
}), variant === 'autoplay' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.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__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
icon: !isMuted ? _icons.ICONS_NAME.volumenUp : _icons.ICONS_NAME.volumnenOff,
color: (0, _material.alpha)(theme.palette.background["default"], 0.3),
width: 30,
height: 30
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.BoxForm, {
className: "video__box__form",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
sx: {
position: 'relative',
zIndex: 999,
height: '100%',
width: '100%'
},
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.ContainerForm, {
sx: Object.assign({}, !srcVideo && {
maxHeight: 'unset'
}),
children: [srcVideo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.Form, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.ContainerButtonForm, {
children: children
})
}), !srcVideo && children]
})
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, Object.assign({
onClick: function onClick() {
return onClose();
},
sx: Object.assign((0, _defineProperty2["default"])({
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__*/(0, _jsxRuntime.jsx)(_react2.Icon, Object.assign({
icon: icon,
color: color,
width: width,
height: height
}, restIconProps))
}))]
}));
};