@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
70 lines • 2.29 kB
JavaScript
import { IconButton, useTheme, Fade, Zoom } from '@mui/material';
import { Icon } from '@iconify/react';
import { ICONS_NAME } from '../../../helpers';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export var 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 = useTheme();
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Fade, {
"in": showControls,
children: /*#__PURE__*/_jsx(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__*/_jsx(Icon, {
icon: isPlaying ? ICONS_NAME.pause : ICONS_NAME.play,
color: theme.palette.background["default"],
width: 40,
height: 40
})
})
}), variant === 'autoplay' && /*#__PURE__*/_jsx(Zoom, {
"in": true,
children: /*#__PURE__*/_jsx(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__*/_jsx(Icon, {
icon: isMuted ? ICONS_NAME.volumnenOff : ICONS_NAME.volumenUp,
color: theme.palette.background["default"],
width: 24,
height: 24
})
})
})]
});
};