@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
179 lines (178 loc) • 6.77 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BlockVideoModal = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _reactPlayer = _interopRequireDefault(require("react-player"));
var _react2 = require("@iconify/react");
var _material = require("@mui/material");
var _DrawerModal = require("../../DrawerModal");
var _consts = require("../../../helpers/consts");
var _BoxContainer = require("../../BoxContainer");
var _icons = require("../../../helpers/icons");
var _components = require("../../../components");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["variant", "backgroundImage", "srcVideo", "backgroundColor", "iconName", "reactPlayerProps"],
_excluded2 = ["sx"];
var BlockVideoModal = exports.BlockVideoModal = function BlockVideoModal(_ref) {
var _ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'center' : _ref$variant,
_ref$backgroundImage = _ref.backgroundImage,
backgroundImage = _ref$backgroundImage === void 0 ? _consts.consts.backgroundImageDefault : _ref$backgroundImage,
srcVideo = _ref.srcVideo,
backgroundColor = _ref.backgroundColor,
iconName = _ref.iconName,
reactPlayerProps = _ref.reactPlayerProps,
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
var theme = (0, _material.useTheme)();
var _React$useState = _react["default"].useState(false),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
isOpenModal = _React$useState2[0],
setIsOpenModal = _React$useState2[1];
var sx = props.sx,
rest = (0, _objectWithoutProperties2["default"])(props, _excluded2);
var handleOpenModal = function handleOpenModal() {
return setIsOpenModal(function (prev) {
return !prev;
});
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, Object.assign({
component: "article",
sx: Object.assign((0, _defineProperty2["default"])({
background: "url(".concat(backgroundImage, ") no-repeat top"),
height: '100%',
minWidth: '100%',
borderRadius: '30px',
position: 'relative',
backgroundSize: 'cover',
backgroundColor: 'background.paper',
boxShadow: theme.shadows[1],
aspectRatio: '16/9'
}, theme.breakpoints.down('md'), {
minWidth: '100%'
}), sx)
}, rest, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
onClick: function onClick() {
return handleOpenModal();
},
sx: {
position: 'absolute',
backgroundColor: (0, _material.alpha)('#000', 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',
backgroundColor: (0, _material.alpha)('#000', 0.09)
}
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
icon: iconName || _icons.ICONS_NAME.play,
color: "#fff",
width: 60,
height: 60
})
})
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerModal.DrawerModal, {
open: isOpenModal,
onClose: handleOpenModal,
background: backgroundColor,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Container, {
sx: {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
sx: Object.assign({
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
maxWidth: '960px',
marginLeft: 'auto',
marginRight: 'auto'
}, variant === 'fullscreen' && {
maxWidth: '100%'
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButtonComponent, {
iconProps: {
onClick: function onClick() {
return handleOpenModal();
},
color: 'inherit',
disableFocusRipple: true,
disableRipple: true,
sx: {
backgroundColor: (0, _material.alpha)(theme.palette.background["default"], 0.8),
boxShadow: 'unset',
'&:hover': {
boxShadow: theme.shadows[1],
backgroundColor: (0, _material.alpha)(theme.palette.background["default"], 1)
}
}
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
icon: _icons.ICONS_NAME.close,
color: theme.palette.text.primary
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_BoxContainer.BoxContainer, {
sx: Object.assign({
maxWidth: '960px',
padding: 0,
position: 'relative',
width: '100%',
margin: 'auto',
boxShadow: theme.shadows[1],
borderRadius: '16px',
mt: '1rem'
}, variant === 'fullscreen' && {
maxWidth: '100%'
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
sx: {
position: 'relative',
borderRadius: '16px',
overflow: 'hidden',
'&::before': {
content: '" "',
display: 'block',
paddingBottom: '56.25%'
},
'& iframe': {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%'
}
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlayer["default"], Object.assign({
className: "react-player",
controls: true,
height: "100%",
playing: true,
url: srcVideo,
width: "100%"
}, reactPlayerProps))
})
})]
})
})]
});
};