@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
214 lines • 8.64 kB
JavaScript
import _objectDestructuringEmpty from "@babel/runtime/helpers/esm/objectDestructuringEmpty";
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["srcVideo", "backgroundImage", "iconName", "containerProps", "contentProps", "children", "variant", "maxHeightVideo", "variantAspectRatio", "variantVideoProps", "videoPreviewProps"],
_excluded2 = ["variantAspectRatio", "maxHeightVideo"],
_excluded3 = ["ref", "src", "autoPlay", "muted", "controls", "playsInline", "onPlay", "onPause", "preload"];
import React from 'react';
import { Icon } from '@iconify/react';
import ReactPlayer from 'react-player';
import { useTheme, useMediaQuery, alpha, Box } from '@mui/material';
import { ICONS_NAME } from '../../../helpers/icons';
import { ContainerVariantDefault, ContainerVideo, CustomIconPlay, CustomVideo, VariantDefault } from './styled';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var BlockVideoCustom = function BlockVideoCustom(_ref) {
var srcVideo = _ref.srcVideo,
backgroundImage = _ref.backgroundImage,
iconName = _ref.iconName,
containerProps = _ref.containerProps,
contentProps = _ref.contentProps,
children = _ref.children,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'default' : _ref$variant,
maxHeightVideo = _ref.maxHeightVideo,
_ref$variantAspectRat = _ref.variantAspectRatio,
variantAspectRatio = _ref$variantAspectRat === void 0 ? '16:9' : _ref$variantAspectRat,
variantVideoProps = _ref.variantVideoProps,
videoPreviewProps = _ref.videoPreviewProps,
props = _objectWithoutProperties(_ref, _excluded);
var theme = useTheme();
var _React$useState = React.useState('play'),
_React$useState2 = _slicedToArray(_React$useState, 2),
iconButtonPlayPause = _React$useState2[0],
setIconButtonPlayPause = _React$useState2[1];
var isMqMd = useMediaQuery(theme.breakpoints.down('md'));
var videoRef = React.useRef(null);
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
isPlayButton = _React$useState4[0],
setIsPlayButton = _React$useState4[1];
var _ref2 = containerProps || {},
restContainerProps = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
var _ref3 = contentProps || {},
restContentProps = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
var _ref4 = variantVideoProps || {},
containerVideoProps = _ref4.containerVideoProps,
iconPlayProps = _ref4.iconPlayProps,
customVideoProps = _ref4.customVideoProps;
var _ref5 = containerVideoProps || {},
variantAspectRatioContainerVideo = _ref5.variantAspectRatio,
maxHeightVideoContainerVideo = _ref5.maxHeightVideo,
restContainerVideoProps = _objectWithoutProperties(_ref5, _excluded2);
var _ref6 = iconPlayProps || {},
restIconPlayProps = _extends({}, (_objectDestructuringEmpty(_ref6), _ref6));
var _ref7 = customVideoProps || {},
_ref7$ref = _ref7.ref,
refCustomVideoProps = _ref7$ref === void 0 ? videoRef : _ref7$ref,
_ref7$src = _ref7.src,
src = _ref7$src === void 0 ? "".concat(srcVideo, "#t=0.1") : _ref7$src,
_ref7$autoPlay = _ref7.autoPlay,
autoPlay = _ref7$autoPlay === void 0 ? false : _ref7$autoPlay,
_ref7$muted = _ref7.muted,
muted = _ref7$muted === void 0 ? false : _ref7$muted,
_ref7$controls = _ref7.controls,
controls = _ref7$controls === void 0 ? true : _ref7$controls,
_ref7$playsInline = _ref7.playsInline,
playsInline = _ref7$playsInline === void 0 ? true : _ref7$playsInline,
_ref7$onPlay = _ref7.onPlay,
onPlay = _ref7$onPlay === void 0 ? function () {
return setIconButtonPlayPause('pause');
} : _ref7$onPlay,
_ref7$onPause = _ref7.onPause,
onPause = _ref7$onPause === void 0 ? function () {
return setIconButtonPlayPause('play');
} : _ref7$onPause,
_ref7$preload = _ref7.preload,
preload = _ref7$preload === void 0 ? 'metadata' : _ref7$preload,
restCustomVideoProps = _objectWithoutProperties(_ref7, _excluded3);
var ICON_COLOR = alpha('#fff', 0.4);
var handlePlayVideo = function handlePlayVideo() {
setIsPlayButton(function (prev) {
return !prev;
});
};
var handlePlayPauseVideo = function handlePlayPauseVideo() {
if (videoRef != null && videoRef.current) {
if (videoRef.current.paused) {
setIconButtonPlayPause('pause');
videoRef.current.play();
videoRef.current.muted = false;
} else {
setIconButtonPlayPause('play');
videoRef.current.pause();
}
}
};
if (variant === 'video') {
return /*#__PURE__*/_jsxs(ContainerVideo, _extends({
variantAspectRatio: variantAspectRatioContainerVideo,
maxHeightVideo: maxHeightVideoContainerVideo
}, restContainerVideoProps, {
children: [!isMqMd && /*#__PURE__*/_jsx(CustomIconPlay, _extends({
onClick: handlePlayPauseVideo
}, restIconPlayProps, {
children: /*#__PURE__*/_jsx(Icon, {
icon: iconName || iconButtonPlayPause === 'pause' ? ICONS_NAME.pause : ICONS_NAME.play,
color: ICON_COLOR,
width: 60,
height: 60
})
})), /*#__PURE__*/_jsx(CustomVideo, _extends({
ref: refCustomVideoProps,
src: src,
onPlay: onPlay,
onPause: onPause,
autoPlay: autoPlay,
muted: muted,
controls: controls,
playsInline: playsInline,
preload: preload
}, restCustomVideoProps)), children]
}));
}
if (variant === 'videoPlayer') {
return /*#__PURE__*/_jsxs(VariantDefault, _extends({
backgroundImage: backgroundImage,
maxHeightVideo: maxHeightVideo,
variantAspectRatio: variantAspectRatio
}, restContainerProps, {
children: [/*#__PURE__*/_jsx(ContainerVariantDefault, _extends({
variantAspectRatio: variantAspectRatio
}, restContentProps, {
children: /*#__PURE__*/_jsx(ReactPlayer, _extends({
className: "react-player",
controls: true,
height: "100%",
playing: true,
muted: true,
url: srcVideo,
width: "100%"
}, props))
})), children]
}));
}
if (variant === 'videoPreview') {
return /*#__PURE__*/_jsxs(ContainerVariantDefault, _extends({
variantAspectRatio: variantAspectRatio
}, restContentProps, {
children: [!isPlayButton && /*#__PURE__*/_jsx(CustomIconPlay, {
onClick: function onClick() {
return handlePlayVideo();
},
children: /*#__PURE__*/_jsx(Icon, {
icon: iconName || ICONS_NAME.play,
color: ICON_COLOR,
width: 60,
height: 60
})
}), /*#__PURE__*/_jsxs(Box, {
component: "video",
autoPlay: true,
muted: true,
loop: true,
controls: false,
sx: {
widows: '100%',
height: '100%',
position: 'absolute',
inset: 0,
zIndex: -1
},
children: [/*#__PURE__*/_jsx("source", {
src: videoPreviewProps == null ? void 0 : videoPreviewProps.src,
type: videoPreviewProps == null ? void 0 : videoPreviewProps.type
}), "Your browser does not support the video tag."]
}), isPlayButton && /*#__PURE__*/_jsx(ReactPlayer, _extends({
className: "react-player",
controls: true,
height: "100%",
playing: true,
url: srcVideo,
width: "100%"
}, props))]
}));
}
return /*#__PURE__*/_jsxs(VariantDefault, _extends({
backgroundImage: backgroundImage,
maxHeightVideo: maxHeightVideo,
variantAspectRatio: variantAspectRatio
}, restContainerProps, {
children: [/*#__PURE__*/_jsxs(ContainerVariantDefault, _extends({
variantAspectRatio: variantAspectRatio
}, restContentProps, {
children: [!isPlayButton && /*#__PURE__*/_jsx(CustomIconPlay, {
onClick: function onClick() {
return handlePlayVideo();
},
children: /*#__PURE__*/_jsx(Icon, {
icon: iconName || ICONS_NAME.play,
color: ICON_COLOR,
width: 60,
height: 60
})
}), isPlayButton && /*#__PURE__*/_jsx(ReactPlayer, _extends({
className: "react-player",
controls: true,
height: "100%",
playing: true,
url: srcVideo,
width: "100%"
}, props))]
})), children]
}));
};