@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
187 lines • 6.92 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
var _excluded = ["sx"],
_excluded2 = ["icon", "color", "width", "height"];
import * as React from 'react';
import { Box, Fade } from '@mui/material';
import { VideoModalWrapper, VideoEmbed, ContainerVideo, BoxForm, ContainerForm, videoCustom } from './styled';
import { ICONS_NAME } from '../../helpers';
import { CloseButton } from './components/close-button';
import { VideoControls } from './components/video-controls';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export var VideoModalCta = function VideoModalCta(_ref) {
var srcVideo = _ref.srcVideo,
children = _ref.children,
onClose = _ref.onClose,
open = _ref.open,
containerModalProps = _ref.containerModalProps,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'autoplay' : _ref$variant,
_ref$isOnlyChildren = _ref.isOnlyChildren,
isOnlyChildren = _ref$isOnlyChildren === void 0 ? false : _ref$isOnlyChildren,
iconCloseProps = _ref.iconCloseProps;
var videoRef = React.useRef(null);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
isPlaying = _React$useState2[0],
setIsPlaying = _React$useState2[1];
var _React$useState3 = React.useState(variant === 'autoplay'),
_React$useState4 = _slicedToArray(_React$useState3, 2),
isMuted = _React$useState4[0],
setIsMuted = _React$useState4[1];
var _React$useState5 = React.useState(true),
_React$useState6 = _slicedToArray(_React$useState5, 2),
showControls = _React$useState6[0],
setShowControls = _React$useState6[1];
var controlsTimeoutRef = React.useRef(null);
var _ref2 = (iconCloseProps == null ? void 0 : iconCloseProps.iconButton) || {},
sxIconButton = _ref2.sx,
restIconButton = _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,
color = _ref3.color,
_ref3$width = _ref3.width,
width = _ref3$width === void 0 ? 24 : _ref3$width,
_ref3$height = _ref3.height,
height = _ref3$height === void 0 ? 24 : _ref3$height,
restIcon = _objectWithoutProperties(_ref3, _excluded2);
var handlePlayPause = React.useCallback(function () {
if (!videoRef.current) return;
if (isPlaying) {
videoRef.current.pause();
} else {
videoRef.current.play();
}
setIsPlaying(!isPlaying);
}, [isPlaying]);
var handleToggleMute = React.useCallback(function () {
setIsMuted(function (prev) {
return !prev;
});
}, []);
var handleVideoEnd = React.useCallback(function () {
setIsPlaying(false);
}, []);
var handleMouseMove = React.useCallback(function () {
setShowControls(true);
if (controlsTimeoutRef.current) {
clearTimeout(controlsTimeoutRef.current);
}
controlsTimeoutRef.current = setTimeout(function () {
if (isPlaying) {
setShowControls(false);
}
}, 2000);
}, [isPlaying]);
var handleKeyDown = React.useCallback(function (e) {
if (!open) return;
if (e.key === 'Escape') {
onClose();
} else if (e.key === ' ' || e.key === 'k') {
e.preventDefault();
handlePlayPause();
} else if (e.key === 'm') {
handleToggleMute();
}
}, [open, onClose, handlePlayPause, handleToggleMute]);
React.useEffect(function () {
if (open) {
document.addEventListener('keydown', handleKeyDown);
}
return function () {
document.removeEventListener('keydown', handleKeyDown);
if (controlsTimeoutRef.current) {
clearTimeout(controlsTimeoutRef.current);
}
};
}, [open, handleKeyDown]);
React.useEffect(function () {
if (open && variant === 'autoplay' && videoRef.current) {
var playPromise = videoRef.current.play();
if (playPromise !== undefined) {
playPromise.then(function () {
setIsPlaying(true);
})["catch"](function (error) {
console.warn('Autoplay failed:', error);
setIsPlaying(false);
});
}
}
if (!open && videoRef.current) {
videoRef.current.pause();
setIsPlaying(false);
}
}, [open, variant]);
if (!open) return null;
var modalContent = isOnlyChildren ? /*#__PURE__*/_jsxs(VideoModalWrapper, Object.assign({}, containerModalProps, {
className: "video__modal__wrapper ".concat((containerModalProps == null ? void 0 : containerModalProps.className) || ''),
children: [children, /*#__PURE__*/_jsx(CloseButton, {
onClose: onClose,
sxIconButton: sxIconButton,
restIconButton: restIconButton,
icon: icon,
color: color,
width: width,
height: height,
restIcon: restIcon
})]
})) : /*#__PURE__*/_jsxs(VideoModalWrapper, Object.assign({}, containerModalProps, {
className: "video__modal__wrapper ".concat((containerModalProps == null ? void 0 : containerModalProps.className) || ''),
children: [/*#__PURE__*/_jsx(VideoEmbed, {
className: "video__embed__component",
children: srcVideo ? /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsxs(ContainerVideo, {
onMouseMove: handleMouseMove,
children: [/*#__PURE__*/_jsx(Box, {
component: "video",
ref: videoRef,
sx: videoCustom(),
id: "video-player",
playsInline: true,
preload: "auto",
src: srcVideo,
muted: isMuted,
onEnded: handleVideoEnd,
"aria-label": "Video player",
loop: false
}), /*#__PURE__*/_jsx(VideoControls, {
isPlaying: isPlaying,
isMuted: isMuted,
showControls: showControls,
onPlayPause: handlePlayPause,
onToggleMute: handleToggleMute,
variant: variant
})]
}), /*#__PURE__*/_jsx(BoxForm, {
className: "video__box__form",
children: /*#__PURE__*/_jsx(ContainerForm, {
children: children
})
})]
}) : /*#__PURE__*/_jsx(BoxForm, {
className: "video__box__form",
children: /*#__PURE__*/_jsx(ContainerForm, {
children: children
})
})
}), /*#__PURE__*/_jsx(CloseButton, {
onClose: onClose,
sxIconButton: sxIconButton,
restIconButton: restIconButton,
icon: icon,
color: color,
width: width,
height: height,
restIcon: restIcon
})]
}));
return /*#__PURE__*/_jsx(Fade, {
"in": open,
mountOnEnter: true,
unmountOnExit: true,
timeout: 400,
children: modalContent
});
};
VideoModalCta.displayName = 'VideoModalCta';