@onesy/ui-react
Version:
UI for React
872 lines (864 loc) • 33.9 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["ref", "name", "src", "meta", "versions", "thumbnails", "mime", "duration", "tonal", "color", "size", "start", "end", "startControls", "endControls", "startButtons", "endButtons", "startButtonsEnd", "endButtonsEnd", "forward", "backward", "settings", "quality", "playbackSpeed", "pictureInPicture", "fullScreen", "startMediaSessionOnPlay", "disabled", "IconPlay", "IconPause", "IconForward", "IconBackward", "IconVolume", "IconVolumeMuted", "IconBack", "IconSettings", "IconQuality", "IconPlaybackSpeed", "IconPictureInPicture", "IconFullScreen", "IconFullScreenExit", "PlayButtonProps", "ForwardButtonProps", "BackwardButtonProps", "VolumeButtonProps", "IconButtonProps", "TypeProps", "TimelineProps", "VolumeProps", "SliderProps", "SettingsButtonProps", "SettingsMenuProps", "QualityButtonProps", "PictureInPictureButtonProps", "FullScreenButtonProps", "className", "Component"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import { clamp, getLeadingZerosNumber, is, isEnvironment } from '@onesy/utils';
import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
import { OnesyDate, duration as durationMethod } from '@onesy/date';
import IconMaterialPlayArrow from '@onesy/icons-material-rounded-react/IconMaterialPlayArrowW100';
import IconMaterialPause from '@onesy/icons-material-rounded-react/IconMaterialPauseW100';
import IconMaterialForwardMedia from '@onesy/icons-material-rounded-react/IconMaterialForwardMediaW100';
import IconMaterialVolumeDownAlt from '@onesy/icons-material-rounded-react/IconMaterialVolumeDownAltW100';
import IconMaterialVolumeOff from '@onesy/icons-material-rounded-react/IconMaterialVolumeOffW100';
import IconMaterialFullscreen from '@onesy/icons-material-rounded-react/IconMaterialFullscreenW100';
import IconMaterialFullscreenExit from '@onesy/icons-material-rounded-react/IconMaterialFullscreenExitW100';
import IconMaterialSettings from '@onesy/icons-material-rounded-react/IconMaterialSettingsW100';
import IconMaterialTune from '@onesy/icons-material-rounded-react/IconMaterialTuneW100';
import IconMaterialSlowMotionVideo from '@onesy/icons-material-rounded-react/IconMaterialSlowMotionVideoW100';
import IconMaterialPictureInPictureAlt from '@onesy/icons-material-rounded-react/IconMaterialPictureInPictureAltW100';
import IconMaterialArrowBackIos from '@onesy/icons-material-rounded-react/IconMaterialArrowBackIosW100';
import LineElement from '../Line';
import SurfaceElement from '../Surface';
import SliderElement from '../Slider';
import IconButtonElement from '../IconButton';
import ExpandElement from '../Expand';
import TypeElement from '../Type';
import MenuElement from '../Menu';
import ListItemElement from '../ListItem';
import { staticClassName } from '../utils';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const useStyle = styleMethod(theme => ({
root: {
position: 'relative'
},
wrapper: {
position: 'relative',
borderRadius: 'inherit'
},
wrapperFullScreen: {
height: '100vh',
width: '100vw'
},
video: {
background: 'black',
flex: '1 1 auto',
borderRadius: 'inherit',
cursor: 'pointer',
userSelect: 'none'
},
size_small: {
borderRadius: theme.methods.shape.radius.value(0.5, 'px')
},
size_regular: {
borderRadius: theme.methods.shape.radius.value(1.5, 'px')
},
size_large: {
borderRadius: theme.methods.shape.radius.value(2, 'px')
},
fullScreen: {
borderRadius: '0px'
},
controls: {
position: 'absolute',
bottom: '0px',
left: '0px',
width: '100%',
borderRadius: 'inherit',
transition: theme.methods.transitions.make('opacity'),
'&.onesy-Surface-root': {
background: 'linear-gradient(0deg, rgb(0, 0, 0, 0.24), transparent)'
}
},
controlsHiddden: {
opacity: 0,
pointerEvents: 'none'
},
controlsFullScreen: {},
controls_size_small: {
padding: `${theme.methods.space.value(0.75, 'px')} ${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(0.5, 'px')}`
},
controls_size_regular: {
padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(1, 'px')}`
},
controls_size_large: {
padding: `${theme.methods.space.value(2.25, 'px')} ${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(1.5, 'px')}`
},
wrapperTimeline: {
padding: `0 ${theme.methods.space.value(1.5, 'px')}`
},
timeline: {
'&.onesy-Slider-root': {
height: '20px !important',
width: '100% !important',
margin: 'unset !important',
maxWidth: 'unset !important'
}
},
volume: {
flex: '1 1 auto',
'&.onesy-Slider-root': {
height: '24px !important',
width: '100vw !important',
maxWidth: '54px !important',
margin: 'unset !important',
borderRadius: '0px',
'& .onesy-Slider-rail': {
borderRadius: '0px'
},
'& .onesy-Slider-track': {
borderRadius: '0px'
}
}
},
volumeExpand: {
display: 'flex',
alignItems: 'center',
height: '100%'
},
time: {
cursor: 'default',
userSelect: 'none'
},
menuSettings: {
maxHeight: 194,
overflowY: 'auto'
},
endControls: {
position: 'relative'
},
placeholder: {},
bottomControls: {
scrollbarWidth: 'none',
overflow: 'auto hidden',
'& > *': {
flex: '0 0 auto'
},
'&::-webkit-scrollbar': {
display: 'none'
}
},
menuSettingsFullScreen: {
'&.onesy-Modal-root': {
position: 'fixed !important',
transform: 'none !important',
left: 'unset !important',
right: '12px !important',
bottom: '47.8906px !important'
}
}
}), {
name: 'onesy-VideoPlayer'
});
const VideoPlayer = props_ => {
const theme = useOnesyTheme();
const l = theme.l;
const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyVideoPlayer?.props?.default), props_);
const Line = theme?.elements?.Line || LineElement;
const Surface = theme?.elements?.Surface || SurfaceElement;
const Slider = theme?.elements?.Slider || SliderElement;
const IconButton = theme?.elements?.IconButton || IconButtonElement;
const Expand = theme?.elements?.Expand || ExpandElement;
const Type = theme?.elements?.Type || TypeElement;
const Menu = theme?.elements?.Menu || MenuElement;
const ListItem = theme?.elements?.ListItem || ListItemElement;
const {
ref,
name,
src,
meta,
versions,
thumbnails,
mime,
duration: duration_,
tonal = true,
color,
size = 'regular',
start,
end,
startControls,
endControls,
startButtons,
endButtons,
startButtonsEnd,
endButtonsEnd,
forward,
backward,
settings = true,
quality: quality_ = true,
playbackSpeed: playbackSpeed_ = true,
pictureInPicture: pictureInPicture_ = true,
fullScreen: fullScreen_ = true,
startMediaSessionOnPlay,
disabled,
IconPlay = IconMaterialPlayArrow,
IconPause = IconMaterialPause,
IconForward = IconMaterialForwardMedia,
IconBackward = IconMaterialForwardMedia,
IconVolume = IconMaterialVolumeDownAlt,
IconVolumeMuted = IconMaterialVolumeOff,
IconBack = IconMaterialArrowBackIos,
IconSettings = IconMaterialSettings,
IconQuality = IconMaterialTune,
IconPlaybackSpeed = IconMaterialSlowMotionVideo,
IconPictureInPicture = IconMaterialPictureInPictureAlt,
IconFullScreen = IconMaterialFullscreen,
IconFullScreenExit = IconMaterialFullscreenExit,
PlayButtonProps,
ForwardButtonProps,
BackwardButtonProps,
VolumeButtonProps,
IconButtonProps,
TypeProps,
TimelineProps,
VolumeProps,
SliderProps,
SettingsButtonProps,
SettingsMenuProps,
QualityButtonProps,
PictureInPictureButtonProps,
FullScreenButtonProps,
className,
Component
} = props,
other = _objectWithoutProperties(props, _excluded);
const {
classes
} = useStyle();
const [loaded, setLoaded] = React.useState(false);
const [duration, setDuration] = React.useState(is('number', meta?.duration) ? meta.duration : undefined);
const [time, setTime] = React.useState(0);
const [play, setPlay] = React.useState(false);
const [muted, setMuted] = React.useState(false);
const [volume, setVolume] = React.useState(1);
const [volumeVisible, setVolumeVisible] = React.useState(false);
const [updating, setUpdating] = React.useState(false);
const [mouseMoved, setMouseMoved] = React.useState();
const [quality, setQuality] = React.useState();
const [posterShow, setPosterShow] = React.useState(true);
const [pictureInPicture, setPictureInPicture] = React.useState(false);
const [fullScreen, setFullScreen] = React.useState(false);
const [playbackSpeed, setPlaybackSpeed] = React.useState(1);
const [openMenu, setOpenMenu] = React.useState();
const refs = {
root: React.useRef(null),
video: React.useRef(null),
controls: React.useRef(null),
duration: React.useRef(null),
time: React.useRef(null),
play: React.useRef(null),
updating: React.useRef(null),
onPlay: React.useRef(null),
onPause: React.useRef(null),
onTimeChange: React.useRef(null),
onBackward: React.useRef(null),
onForward: React.useRef(null),
onStop: React.useRef(null),
startMediaSession: React.useRef(null),
updateMediaSession: React.useRef(null),
startMediaSessionOnPlay: React.useRef(null),
fullScreen: React.useRef(fullScreen),
mouseMoved: React.useRef(mouseMoved),
timeoutMouseMoved: React.useRef(null)
};
refs.duration.current = duration;
refs.time.current = time;
refs.play.current = play;
refs.updating.current = updating;
refs.startMediaSessionOnPlay.current = startMediaSessionOnPlay;
refs.fullScreen.current = fullScreen;
refs.mouseMoved.current = mouseMoved;
const allowedPictureInPicture = () => {
if (isEnvironment('browser')) {
const rootDocument = refs.root.current?.ownerDocument || window.document;
return rootDocument.pictureInPictureEnabled;
}
};
const startMediaSession = () => {
if ('mediaSession' in navigator) {
window.navigator.mediaSession.metadata = new MediaMetadata({
title: name
});
const methods = [{
name: 'play',
method: refs.onPlay.current
}, {
name: 'pause',
method: refs.onPause.current
}, {
name: 'previoustrack',
method: () => {}
}, {
name: 'nexttrack',
method: () => {}
}, {
name: 'seekbackward',
method: refs.onBackward.current
}, {
name: 'seekforward',
method: refs.onForward.current
}, {
name: 'seekto',
method: details => refs.onTimeChange.current(details.seekTime)
}, {
name: 'stop',
method: refs.onStop.current
}];
for (const method of methods) {
try {
window.navigator.mediaSession.setActionHandler(method.name, method.method);
} catch (error) {
console.log(`MediaSession action ${method.name}, is not supported`);
}
}
}
};
const updateMediaSession = () => {
if ('mediaSession' in navigator) {
window.navigator.mediaSession.setPositionState({
duration: refs.duration.current,
playbackRate: 1,
position: clamp(refs.time.current, 0, refs.duration.current)
});
}
};
refs.startMediaSession.current = startMediaSession;
refs.updateMediaSession.current = updateMediaSession;
const durationTime = duration_ || meta?.duration;
const onVolumeChange = value => {
setVolume(value);
refs.video.current.volume = value;
};
const onTimeChange = value_0 => {
setTime(value_0);
refs.video.current.currentTime = value_0;
// update MediaSession
refs.updateMediaSession.current();
};
const onPlaybackSpeed = value_ => {
const value_1 = clamp(value_, 0, 2);
setPlaybackSpeed(value_1);
setOpenMenu(null);
refs.video.current.playbackRate = value_1;
};
const onForward = details_0 => {
const part = refs.duration.current * 0.1;
const toMove = clamp(details_0?.seekOffset || part, 1, refs.duration.current);
const value_2 = clamp(refs.time.current + toMove, 0, refs.duration.current);
refs.onTimeChange.current(value_2);
};
const onBackward = details_1 => {
const part_0 = refs.duration.current * 0.1;
const toMove_0 = clamp(details_1?.seekOffset || part_0, 1, refs.duration.current);
const value_3 = clamp(refs.time.current - toMove_0, 0, refs.duration.current);
refs.onTimeChange.current(value_3);
};
const onPlay = () => {
try {
setPlay(true);
refs.video.current.play();
// start MediaSession
if (refs.startMediaSessionOnPlay.current) refs.startMediaSession.current();
// update MediaSession
refs.updateMediaSession.current();
} catch (error_0) {
console.error(`videoPlayer`, error_0);
}
};
const onPause = () => {
setPlay(false);
refs.video.current.pause();
};
const onStop = () => {
setPlay(false);
refs.video.current.pause();
refs.video.current.currentTime = 0;
};
const onMute = () => {
setMuted(true);
refs.video.current.muted = true;
};
const onUnmute = () => {
setMuted(false);
refs.video.current.muted = false;
};
refs.onPlay.current = onPlay;
refs.onPause.current = onPause;
refs.onTimeChange.current = onTimeChange;
refs.onForward.current = onForward;
refs.onBackward.current = onBackward;
refs.onStop.current = onStop;
const init = () => {
setLoaded(false);
const video = refs.video.current;
video.addEventListener('loadedmetadata', () => {
const value_4 = video.duration;
if (!is('number', durationTime) && is('number', value_4)) {
if (refs.duration.current === undefined) setDuration(value_4);
setLoaded(true);
}
});
video.addEventListener('ended', () => {
refs.onStop.current();
});
video.addEventListener('timeupdate', () => {
const value_5 = video.currentTime;
if (!refs.updating.current && refs.time.current !== value_5) {
setTime(value_5);
// update MediaSession
refs.updateMediaSession.current();
}
});
video.addEventListener('ratechange', () => {
const value_6 = video.playbackRate;
setPlaybackSpeed(value_6);
});
// start MediaSession
startMediaSession();
if (is('number', durationTime)) {
if (refs.duration.current === undefined) setDuration(durationTime);
setLoaded(true);
}
const rootDocument_0 = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
const methodPictureInPicture = () => {
if (rootDocument_0.pictureInPictureElement) {
setPictureInPicture(true);
} else {
setPictureInPicture(false);
}
};
const methodFullScreen = () => {
if (rootDocument_0.fullscreenElement) {
setFullScreen(true);
} else {
setFullScreen(false);
}
};
const methodMouseMove = () => {
if (refs.play.current) {
clearTimeout(refs.timeoutMouseMoved.current);
setMouseMoved({
moved: true,
unix: OnesyDate.unix
});
refs.timeoutMouseMoved.current = setTimeout(() => {
setMouseMoved({
moved: false,
unix: OnesyDate.unix
});
}, 4000);
}
};
refs.root.current?.addEventListener('mousemove', methodMouseMove);
refs.root.current?.addEventListener('touchstart', methodMouseMove);
refs.root.current?.addEventListener('touchmove', methodMouseMove);
rootDocument_0.addEventListener('enterpictureinpicture', methodPictureInPicture);
rootDocument_0.addEventListener('leavepictureinpicture', methodPictureInPicture);
rootDocument_0.addEventListener('fullscreenchange', methodFullScreen);
video.src = src;
return () => {
refs.root.current?.removeEventListener('mousemove', methodMouseMove);
refs.root.current?.removeEventListener('touchstart', methodMouseMove);
refs.root.current?.removeEventListener('touchmove', methodMouseMove);
rootDocument_0.removeEventListener('enterpictureinpicture', methodPictureInPicture);
rootDocument_0.removeEventListener('leavepictureinpicture', methodPictureInPicture);
rootDocument_0.removeEventListener('fullscreenchange', methodFullScreen);
};
};
React.useEffect(() => {
if (loaded) {
let urlNew = src;
if (quality) {
if (quality?.meta?.resolution) urlNew += `?version=${quality?.meta?.resolution}`;
}
const currentTime = refs.video.current.currentTime;
const playbackRate = refs.video.current.playbackRate;
const playing = refs.play.current;
// pause
if (playing) refs.onPause.current();
// poster remove
setPosterShow(false);
refs.video.current.poster = '';
refs.video.current.src = urlNew;
refs.video.current.load();
refs.video.current.currentTime = currentTime;
refs.video.current.playbackRate = playbackRate;
// play
if (playing) refs.onPlay.current();
}
}, [quality]);
const onMouseEnter = () => {
setVolumeVisible(true);
};
const onMouseLeave = () => {
setVolumeVisible(false);
};
const onUpdating = () => {
setUpdating(refs.play.current ? 'play' : true);
if (refs.play.current) onPause();
};
const onUpdatingDone = () => {
const updatingPrevious = refs.updating.current;
setUpdating(false);
if (updatingPrevious === 'play') onPlay();
};
const onFullScreen = async () => {
const root = refs.root.current;
try {
if (root.requestFullscreen) await root.requestFullscreen();else if (root.webkitRequestFullscreen) await root.webkitRequestFullscreen();else if (root.msRequestFullscreen) await root.msRequestFullscreen();
} catch (error_1) {}
};
const onFullScreenExit = async () => {
const rootDocument_1 = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
try {
if (rootDocument_1.exitFullscreen) await rootDocument_1.exitFullscreen();else if (rootDocument_1.webkitExitFullscreen) await rootDocument_1.webkitExitFullscreen();else if (rootDocument_1.msExitFullscreen) await rootDocument_1.msExitFullscreen();
} catch (error_2) {}
};
const onPictureInPicture = async () => {
const video_0 = refs.video.current;
try {
if (video_0.requestPictureInPicture) await video_0.requestPictureInPicture();else if (video_0.webkitRequestPictureInPicture) await video_0.webkitRequestPictureInPicture();else if (video_0.msRequestPictureInPicture) await video_0.msRequestPictureInPicture();
} catch (error_3) {}
};
const onPictureInPictureExit = async () => {
const rootDocument_2 = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
try {
if (rootDocument_2.exitPictureInPicture) await rootDocument_2.exitPictureInPicture();else if (rootDocument_2.webkitExitPictureInPicture) await rootDocument_2.webkitExitPictureInPicture();else if (rootDocument_2.msExitPictureInPicture) await rootDocument_2.msExitPictureInPicture();
} catch (error_4) {}
};
const onVideoClick = event => {
if (event.detail === 1) {
!play ? onPlay() : onPause();
}
if (event.detail === 2) {
!fullScreen ? onFullScreen() : onFullScreenExit();
}
};
React.useEffect(() => {
const rootDocument_3 = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
rootDocument_3.addEventListener('mouseup', onUpdatingDone);
rootDocument_3.addEventListener('touchend', onUpdatingDone);
return () => {
rootDocument_3.removeEventListener('mouseup', onUpdatingDone);
rootDocument_3.removeEventListener('touchend', onUpdatingDone);
};
}, []);
React.useEffect(() => {
// init
init();
}, [src]);
const durationToValue = item => {
let value_7 = '';
const separator = ':';
if (item.hour) value_7 += `${getLeadingZerosNumber(item.hour, {
leadingZeros: 0
})}`;
if (item.minute) {
if (value_7) value_7 += separator;
value_7 += `${getLeadingZerosNumber(item.minute, {
leadingZeros: 0
})}`;
} else {
if (value_7) value_7 += separator;
value_7 += '0';
}
if (item.second) {
if (value_7) value_7 += separator;
value_7 += `${getLeadingZerosNumber(item.second, {
leadingZeros: 1
})}`;
} else {
if (value_7) value_7 += separator;
value_7 += '00';
}
return value_7;
};
const onQuality = version => {
setQuality(version);
setOpenMenu(null);
};
const onSettingsMenuClose = () => {
setOpenMenu(null);
};
const getSettingsMenuItems = () => {
const itemProps = {
button: true,
startAlign: 'center',
endAlign: 'center',
size: 'small',
className: 'onesy-videoPlayer-option'
};
const items = [];
if (openMenu) {
items.push(/*#__PURE__*/_jsx(ListItem, _objectSpread({
start: /*#__PURE__*/_jsx(IconBack, {
size: "very small"
}),
primary: /*#__PURE__*/_jsx(Type, {
version: "b3",
children: l('Back')
}),
onClick: () => setOpenMenu(null)
}, itemProps), 'back'));
}
if (!openMenu) {
if (playbackSpeed_) items.push(/*#__PURE__*/_jsx(ListItem, _objectSpread({
start: /*#__PURE__*/_jsx(IconPlaybackSpeed, {
size: "small"
}),
primary: /*#__PURE__*/_jsx(Type, {
version: "b3",
children: l('Playback speed')
}),
end: /*#__PURE__*/_jsx(Type, {
version: "b3",
priority: "secondary",
children: playbackSpeed === 1 ? l('Normal') : playbackSpeed
}),
onClick: () => setOpenMenu('playbackSpeed')
}, itemProps), 'playbackSpeed'));
if (quality_) items.push(/*#__PURE__*/_jsx(ListItem, _objectSpread({
start: /*#__PURE__*/_jsx(IconQuality, {
size: "small"
}),
primary: /*#__PURE__*/_jsx(Type, {
version: "b3",
children: l('Quality')
}),
end: /*#__PURE__*/_jsx(Type, {
version: "b3",
priority: "secondary",
children: !quality ? l('Original') : `${quality?.meta?.resolution}p`
}),
onClick: () => setOpenMenu('quality')
}, itemProps), 'quality'));
} else if (openMenu === 'quality') {
items.push(/*#__PURE__*/_jsx(ListItem, _objectSpread({
primary: /*#__PURE__*/_jsx(Type, {
version: "b3",
children: `${meta?.resolution}p (original)`
}),
onClick: () => quality ? onQuality(null) : undefined,
selected: !quality
}, itemProps), 'original'));
versions?.forEach((version_0, index) => {
const isSelected = quality?.id === version_0?.id;
items.push(/*#__PURE__*/_jsx(ListItem, _objectSpread({
primary: /*#__PURE__*/_jsxs(Type, {
version: "b3",
children: [version_0?.meta?.resolution, "p"]
}),
onClick: () => !isSelected ? onQuality(version_0) : undefined,
selected: isSelected
}, itemProps), index));
});
} else if (openMenu === 'playbackSpeed') {
const options = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
options.forEach(option => {
items.push(/*#__PURE__*/_jsx(ListItem, _objectSpread({
primary: /*#__PURE__*/_jsx(Type, {
version: "b3",
children: option === 1 ? l('Normal') : option
}),
onClick: () => onPlaybackSpeed(option),
selected: playbackSpeed === option
}, itemProps), option));
});
}
return items;
};
const thumbnailsToUse = thumbnails || quality?.thumbnails;
const thumbnail = thumbnailsToUse ? 1 : undefined;
const typeProps = _objectSpread({
version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
}, TypeProps);
const iconButtonProps = _objectSpread({
version: 'text',
size,
disabled
}, IconButtonProps);
const sliderProps = _objectSpread({
color,
size,
disabled
}, SliderProps);
let url = src;
let poster;
if (quality) {
if (quality?.meta?.resolution) url += `?version=${quality?.meta?.resolution}`;
}
if (is('number', thumbnail)) {
poster = `${url}${url?.includes('?') ? '&' : '?'}thumbnail=${thumbnail}`;
}
return /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
ref: item_0 => {
if (ref) {
if (is('function', ref)) ref(item_0);else ref.current = item_0;
}
refs.root.current = item_0;
},
gap: 1,
direction: "column",
align: "unset",
justify: "unset",
fullWidth: true,
Component: Component,
className: classNames([staticClassName('VideoPlayer', theme) && [`onesy-VideoPlayer-root`, `onesy-VideoPlayer-size-${size}`, fullScreen && `onesy-VideoPlayer-full-screen`], className, classes.root, classes[`size_${size}`], fullScreen && classes.fullScreen])
}, other), {}, {
children: /*#__PURE__*/_jsxs(Line, {
gap: 0,
direction: "column",
align: "unset",
justify: "unset",
fullWidth: true,
className: classNames([classes.wrapper, fullScreen && classes.wrapperFullScreen]),
children: [start, /*#__PURE__*/_jsx("video", {
ref: refs.video,
onClick: onVideoClick,
poster: posterShow ? poster : undefined,
controls: false,
className: classNames([classes.video, fullScreen && classes.videoFullScreen]),
children: /*#__PURE__*/_jsx("source", {
src: url,
type: mime
})
}), /*#__PURE__*/_jsxs(Surface, {
ref: refs.controls,
gap: 0,
fullWidth: true,
tonal: tonal,
color: color !== undefined ? color : theme.palette.light ? 'inverted' : 'default',
Component: Line,
className: classNames([classes.controls, classes[`controls_size_${size}`], fullScreen && classes.controlsFullScreen, !mouseMoved?.moved && play && classes.controlsHiddden]),
children: [startControls, /*#__PURE__*/_jsx(Line, {
fullWidth: true,
className: classes.wrapperTimeline,
children: /*#__PURE__*/_jsx(Slider, _objectSpread(_objectSpread(_objectSpread({
value: time,
onChange: onTimeChange,
min: 0,
max: duration,
onMouseDown: onUpdating,
onTouchStart: onUpdating,
onMouseUp: onUpdatingDone,
onToucheEnd: onUpdatingDone
}, sliderProps), TimelineProps), {}, {
className: classNames([sliderProps?.className, TimelineProps?.className, classes.timeline])
}))
}), /*#__PURE__*/_jsxs(Line, {
direction: "row",
align: "center",
fullWidth: true,
onMouseLeave: onMouseLeave,
className: classes.bottomControls,
style: {
color: theme.palette.color[color] ? theme.palette.color[color][90] : theme.palette.color.neutral[90]
},
children: [startButtons, /*#__PURE__*/_jsxs(Line, {
gap: 1,
direction: "row",
align: "center",
justify: "space-between",
flexNo: true,
fullWidth: true,
children: [/*#__PURE__*/_jsxs(Line, {
gap: 1.5,
direction: "row",
align: "center",
flexNo: true,
children: [/*#__PURE__*/_jsxs(Line, {
gap: 0,
direction: "row",
align: "center",
children: [/*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread(_objectSpread({
onClick: play ? onPause : onPlay
}, iconButtonProps), PlayButtonProps), {}, {
children: play ? /*#__PURE__*/_jsx(IconPause, {}) : /*#__PURE__*/_jsx(IconPlay, {})
})), backward && /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread(_objectSpread({
onClick: onBackward
}, iconButtonProps), BackwardButtonProps), {}, {
children: /*#__PURE__*/_jsx(IconBackward, {
style: {
transform: 'rotateY(180deg)'
}
})
})), forward && /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread(_objectSpread({
onClick: onForward
}, iconButtonProps), ForwardButtonProps), {}, {
children: /*#__PURE__*/_jsx(IconForward, {})
})), /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread(_objectSpread({
onClick: muted ? onUnmute : onMute,
onMouseEnter: onMouseEnter
}, iconButtonProps), VolumeButtonProps), {}, {
children: !muted ? /*#__PURE__*/_jsx(IconVolume, {}) : /*#__PURE__*/_jsx(IconVolumeMuted, {})
})), /*#__PURE__*/_jsx(Expand, {
in: volumeVisible,
parent: refs.controls.current,
orientation: "horizontal",
className: classes.volumeExpand,
children: /*#__PURE__*/_jsx(Slider, _objectSpread(_objectSpread(_objectSpread({
value: volume,
onChange: onVolumeChange,
min: 0,
max: 1,
orientation: "horizontal"
}, sliderProps), {}, {
size: ['small', 'regular'].includes(size) ? 'small' : 'regular'
}, VolumeProps), {}, {
className: classNames([sliderProps?.className, VolumeProps?.className, classes.volume])
}))
})]
}), /*#__PURE__*/_jsxs(Line, {
gap: 0.5,
direction: "row",
align: "center",
flexNo: true,
className: classNames(['onesy-Audio-time', classes.time]),
children: [/*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({}, typeProps), {}, {
children: durationToValue(durationMethod(time * 1000, false, true))
})), /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({}, typeProps), {}, {
children: "/"
})), /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({}, typeProps), {}, {
children: durationToValue(durationMethod(duration * 1000, false, true))
}))]
})]
}), /*#__PURE__*/_jsxs(Line, {
gap: 0.5,
direction: "row",
align: "center",
className: classes.endControls,
children: [startButtonsEnd, settings && /*#__PURE__*/_jsx(Menu, _objectSpread(_objectSpread({
menuItems: getSettingsMenuItems(),
position: "top",
switch: false,
portal: !fullScreen,
onClose: onSettingsMenuClose,
includeParentQueries: ['.onesy-videoPlayer']
}, SettingsMenuProps), {}, {
ListProps: {
className: classNames([SettingsMenuProps?.ListProps?.className, classes.menuSettings]),
size: 'small'
},
className: classNames(['onesy-videoPlayer', SettingsMenuProps?.className, fullScreen && classes.menuSettingsFullScreen]),
children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread(_objectSpread({}, iconButtonProps), SettingsButtonProps), {}, {
children: /*#__PURE__*/_jsx(IconSettings, {})
}))
})), pictureInPicture_ && allowedPictureInPicture() && /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread(_objectSpread({
onClick: !pictureInPicture ? onPictureInPicture : onPictureInPictureExit
}, iconButtonProps), PictureInPictureButtonProps), {}, {
children: /*#__PURE__*/_jsx(IconPictureInPicture, {})
})), fullScreen_ && /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread(_objectSpread({
onClick: !fullScreen ? onFullScreen : onFullScreenExit
}, iconButtonProps), FullScreenButtonProps), {}, {
children: fullScreen ? /*#__PURE__*/_jsx(IconFullScreenExit, {}) : /*#__PURE__*/_jsx(IconFullScreen, {})
})), endButtonsEnd]
})]
}), endButtons]
}), endControls]
}), end]
})
}));
};
VideoPlayer.displayName = 'onesy-VideoPlayer';
export default VideoPlayer;