@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
76 lines (75 loc) • 2.58 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.VideoControls = void 0;
var _material = require("@mui/material");
var _react = require("@iconify/react");
var _helpers = require("../../../helpers");
var _jsxRuntime = require("react/jsx-runtime");
var VideoControls = exports.VideoControls = function VideoControls(_ref) {
var isPlaying = _ref.isPlaying,
isMuted = _ref.isMuted,
showControls = _ref.showControls,
onPlayPause = _ref.onPlayPause,
onToggleMute = _ref.onToggleMute,
variant = _ref.variant;
var theme = (0, _material.useTheme)();
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Fade, {
"in": showControls,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
onClick: onPlayPause,
"aria-label": isPlaying ? 'Pause video' : 'Play video',
sx: {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
zIndex: 2,
width: 80,
height: 80,
bgcolor: 'rgba(0, 0, 0, 0.5)',
backdropFilter: 'blur(10px)',
transition: 'all 0.3s ease',
'&:hover': {
bgcolor: 'rgba(0, 0, 0, 0.7)',
transform: 'translate(-50%, -50%) scale(1.1)'
}
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
icon: isPlaying ? _helpers.ICONS_NAME.pause : _helpers.ICONS_NAME.play,
color: theme.palette.background["default"],
width: 40,
height: 40
})
})
}), variant === 'autoplay' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Zoom, {
"in": true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
onClick: onToggleMute,
"aria-label": isMuted ? 'Unmute video' : 'Mute video',
sx: {
position: 'absolute',
top: 16,
left: 16,
zIndex: 2,
width: 44,
height: 44,
bgcolor: 'rgba(0, 0, 0, 0.5)',
backdropFilter: 'blur(10px)',
transition: 'all 0.2s ease',
'&:hover': {
bgcolor: 'rgba(0, 0, 0, 0.7)'
}
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
icon: isMuted ? _helpers.ICONS_NAME.volumnenOff : _helpers.ICONS_NAME.volumenUp,
color: theme.palette.background["default"],
width: 24,
height: 24
})
})
})]
});
};