@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
197 lines (196 loc) • 8.43 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.VideoModalCta = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var React = _interopRequireWildcard(require("react"));
var _material = require("@mui/material");
var _styled = require("./styled");
var _helpers = require("../../helpers");
var _closeButton = require("./components/close-button");
var _videoControls = require("./components/video-controls");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["sx"],
_excluded2 = ["icon", "color", "width", "height"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var VideoModalCta = exports.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 = (0, _slicedToArray2["default"])(_React$useState, 2),
isPlaying = _React$useState2[0],
setIsPlaying = _React$useState2[1];
var _React$useState3 = React.useState(variant === 'autoplay'),
_React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
isMuted = _React$useState4[0],
setIsMuted = _React$useState4[1];
var _React$useState5 = React.useState(true),
_React$useState6 = (0, _slicedToArray2["default"])(_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 = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
var _ref3 = (iconCloseProps == null ? void 0 : iconCloseProps.icon) || {},
_ref3$icon = _ref3.icon,
icon = _ref3$icon === void 0 ? _helpers.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 = (0, _objectWithoutProperties2["default"])(_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__*/(0, _jsxRuntime.jsxs)(_styled.VideoModalWrapper, Object.assign({}, containerModalProps, {
className: "video__modal__wrapper ".concat((containerModalProps == null ? void 0 : containerModalProps.className) || ''),
children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_closeButton.CloseButton, {
onClose: onClose,
sxIconButton: sxIconButton,
restIconButton: restIconButton,
icon: icon,
color: color,
width: width,
height: height,
restIcon: restIcon
})]
})) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.VideoModalWrapper, Object.assign({}, containerModalProps, {
className: "video__modal__wrapper ".concat((containerModalProps == null ? void 0 : containerModalProps.className) || ''),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.VideoEmbed, {
className: "video__embed__component",
children: srcVideo ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.ContainerVideo, {
onMouseMove: handleMouseMove,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
component: "video",
ref: videoRef,
sx: (0, _styled.videoCustom)(),
id: "video-player",
playsInline: true,
preload: "auto",
src: srcVideo,
muted: isMuted,
onEnded: handleVideoEnd,
"aria-label": "Video player",
loop: false
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_videoControls.VideoControls, {
isPlaying: isPlaying,
isMuted: isMuted,
showControls: showControls,
onPlayPause: handlePlayPause,
onToggleMute: handleToggleMute,
variant: variant
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.BoxForm, {
className: "video__box__form",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.ContainerForm, {
children: children
})
})]
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.BoxForm, {
className: "video__box__form",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.ContainerForm, {
children: children
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_closeButton.CloseButton, {
onClose: onClose,
sxIconButton: sxIconButton,
restIconButton: restIconButton,
icon: icon,
color: color,
width: width,
height: height,
restIcon: restIcon
})]
}));
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Fade, {
"in": open,
mountOnEnter: true,
unmountOnExit: true,
timeout: 400,
children: modalContent
});
};
VideoModalCta.displayName = 'VideoModalCta';