@onesy/ui-react 1.0.59 → 1.0.63

package/esm/VideoPlayer/VideoPlayer.js

@@ -1,834 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["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';
-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 = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyVideoPlayer?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const Slider = React.useMemo(() => theme?.elements?.Slider || SliderElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
-  const Expand = React.useMemo(() => theme?.elements?.Expand || ExpandElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Menu = React.useMemo(() => theme?.elements?.Menu || MenuElement, [theme]);
-  const ListItem = React.useMemo(() => theme?.elements?.ListItem || ListItemElement, [theme]);
-  const {
-      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 = React.useCallback(() => {
-    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`);
-        }
-      }
-    }
-  }, [name]);
-  const updateMediaSession = React.useCallback(() => {
-    if ('mediaSession' in navigator) {
-      window.navigator.mediaSession.setPositionState({
-        duration: refs.duration.current,
-        playbackRate: 1,
-        position: clamp(refs.time.current, 0, refs.duration.current)
-      });
-    }
-  }, [name]);
-  refs.startMediaSession.current = startMediaSession;
-  refs.updateMediaSession.current = updateMediaSession;
-  const durationTime = duration_ || meta?.duration;
-  const onVolumeChange = React.useCallback(value => {
-    setVolume(value);
-    refs.video.current.volume = value;
-  }, []);
-  const onTimeChange = React.useCallback(value => {
-    setTime(value);
-    refs.video.current.currentTime = value;
-
-    // update MediaSession
-    refs.updateMediaSession.current();
-  }, []);
-  const onPlaybackSpeed = React.useCallback(value_ => {
-    const value = clamp(value_, 0, 2);
-    setPlaybackSpeed(value);
-    setOpenMenu(null);
-    refs.video.current.playbackRate = value;
-  }, []);
-  const onForward = React.useCallback(details => {
-    const part = refs.duration.current * 0.1;
-    const toMove = clamp(details?.seekOffset || part, 1, refs.duration.current);
-    const value = clamp(refs.time.current + toMove, 0, refs.duration.current);
-    refs.onTimeChange.current(value);
-  }, []);
-  const onBackward = React.useCallback(details => {
-    const part = refs.duration.current * 0.1;
-    const toMove = clamp(details?.seekOffset || part, 1, refs.duration.current);
-    const value = clamp(refs.time.current - toMove, 0, refs.duration.current);
-    refs.onTimeChange.current(value);
-  }, []);
-  const onPlay = React.useCallback(() => {
-    try {
-      setPlay(true);
-      refs.video.current.play();
-
-      // start MediaSession
-      if (refs.startMediaSessionOnPlay.current) refs.startMediaSession.current();
-
-      // update MediaSession
-      refs.updateMediaSession.current();
-    } catch (error) {
-      console.error(`videoPlayer`, error);
-    }
-  }, []);
-  const onPause = React.useCallback(() => {
-    setPlay(false);
-    refs.video.current.pause();
-  }, []);
-  const onStop = React.useCallback(() => {
-    setPlay(false);
-    refs.video.current.pause();
-    refs.video.current.currentTime = 0;
-  }, []);
-  const onMute = React.useCallback(() => {
-    setMuted(true);
-    refs.video.current.muted = true;
-  }, []);
-  const onUnmute = React.useCallback(() => {
-    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 = React.useCallback(() => {
-    setLoaded(false);
-    const video = refs.video.current;
-    video.addEventListener('loadedmetadata', () => {
-      const value = video.duration;
-      if (!is('number', durationTime) && is('number', value)) {
-        if (refs.duration.current === undefined) setDuration(value);
-        setLoaded(true);
-      }
-    });
-    video.addEventListener('ended', () => {
-      refs.onStop.current();
-    });
-    video.addEventListener('timeupdate', () => {
-      const value = video.currentTime;
-      if (!refs.updating.current && refs.time.current !== value) {
-        setTime(value);
-
-        // update MediaSession
-        refs.updateMediaSession.current();
-      }
-    });
-    video.addEventListener('ratechange', () => {
-      const value = video.playbackRate;
-      setPlaybackSpeed(value);
-    });
-
-    // start MediaSession
-    startMediaSession();
-    if (is('number', durationTime)) {
-      if (refs.duration.current === undefined) setDuration(durationTime);
-      setLoaded(true);
-    }
-    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
-    const methodPictureInPicture = () => {
-      if (rootDocument.pictureInPictureElement) {
-        setPictureInPicture(true);
-      } else {
-        setPictureInPicture(false);
-      }
-    };
-    const methodFullScreen = () => {
-      if (rootDocument.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.addEventListener('enterpictureinpicture', methodPictureInPicture);
-    rootDocument.addEventListener('leavepictureinpicture', methodPictureInPicture);
-    rootDocument.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.removeEventListener('enterpictureinpicture', methodPictureInPicture);
-      rootDocument.removeEventListener('leavepictureinpicture', methodPictureInPicture);
-      rootDocument.removeEventListener('fullscreenchange', methodFullScreen);
-    };
-  }, [src, durationTime, startMediaSession]);
-  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 = React.useCallback(() => {
-    setVolumeVisible(true);
-  }, []);
-  const onMouseLeave = React.useCallback(() => {
-    setVolumeVisible(false);
-  }, []);
-  const onUpdating = React.useCallback(() => {
-    setUpdating(refs.play.current ? 'play' : true);
-    if (refs.play.current) onPause();
-  }, [onPause]);
-  const onUpdatingDone = React.useCallback(() => {
-    const updatingPrevious = refs.updating.current;
-    setUpdating(false);
-    if (updatingPrevious === 'play') onPlay();
-  }, [onPlay]);
-  const onFullScreen = React.useCallback(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) {}
-  }, []);
-  const onFullScreenExit = React.useCallback(async () => {
-    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
-    try {
-      if (rootDocument.exitFullscreen) await rootDocument.exitFullscreen();else if (rootDocument.webkitExitFullscreen) await rootDocument.webkitExitFullscreen();else if (rootDocument.msExitFullscreen) await rootDocument.msExitFullscreen();
-    } catch (error) {}
-  }, []);
-  const onPictureInPicture = React.useCallback(async () => {
-    const video = refs.video.current;
-    try {
-      if (video.requestPictureInPicture) await video.requestPictureInPicture();else if (video.webkitRequestPictureInPicture) await video.webkitRequestPictureInPicture();else if (video.msRequestPictureInPicture) await video.msRequestPictureInPicture();
-    } catch (error) {}
-  }, []);
-  const onPictureInPictureExit = React.useCallback(async () => {
-    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
-    try {
-      if (rootDocument.exitPictureInPicture) await rootDocument.exitPictureInPicture();else if (rootDocument.webkitExitPictureInPicture) await rootDocument.webkitExitPictureInPicture();else if (rootDocument.msExitPictureInPicture) await rootDocument.msExitPictureInPicture();
-    } catch (error) {}
-  }, []);
-  const onVideoClick = React.useCallback(event => {
-    if (event.detail === 1) {
-      !play ? onPlay() : onPause();
-    }
-    if (event.detail === 2) {
-      !fullScreen ? onFullScreen() : onFullScreenExit();
-    }
-  }, [play, fullScreen, onPlay, onPause, onFullScreen, onFullScreenExit]);
-  React.useEffect(() => {
-    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
-    rootDocument.addEventListener('mouseup', onUpdatingDone);
-    rootDocument.addEventListener('touchend', onUpdatingDone);
-    return () => {
-      rootDocument.removeEventListener('mouseup', onUpdatingDone);
-      rootDocument.removeEventListener('touchend', onUpdatingDone);
-    };
-  }, []);
-  React.useEffect(() => {
-    // init
-    init();
-  }, [src]);
-  const durationToValue = item => {
-    let value = '';
-    const separator = ':';
-    if (item.hour) value += `${getLeadingZerosNumber(item.hour, {
-      leadingZeros: 0
-    })}`;
-    if (item.minute) {
-      if (value) value += separator;
-      value += `${getLeadingZerosNumber(item.minute, {
-        leadingZeros: 0
-      })}`;
-    } else {
-      if (value) value += separator;
-      value += '0';
-    }
-    if (item.second) {
-      if (value) value += separator;
-      value += `${getLeadingZerosNumber(item.second, {
-        leadingZeros: 1
-      })}`;
-    } else {
-      if (value) value += separator;
-      value += '00';
-    }
-    return value;
-  };
-  const onQuality = React.useCallback(version => {
-    setQuality(version);
-    setOpenMenu(null);
-  }, []);
-  const onSettingsMenuClose = React.useCallback(() => {
-    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__*/React.createElement(ListItem, _extends({
-        key: "back",
-        start: /*#__PURE__*/React.createElement(IconBack, {
-          size: "very small"
-        }),
-        primary: /*#__PURE__*/React.createElement(Type, {
-          version: "b3"
-        }, "Back"),
-        onClick: () => setOpenMenu(null)
-      }, itemProps)));
-    }
-    if (!openMenu) {
-      if (playbackSpeed_) items.push(/*#__PURE__*/React.createElement(ListItem, _extends({
-        key: "playbackSpeed",
-        start: /*#__PURE__*/React.createElement(IconPlaybackSpeed, {
-          size: "small"
-        }),
-        primary: /*#__PURE__*/React.createElement(Type, {
-          version: "b3"
-        }, "Playback speed"),
-        end: /*#__PURE__*/React.createElement(Type, {
-          version: "b3",
-          priority: "secondary"
-        }, playbackSpeed === 1 ? 'Normal' : playbackSpeed),
-        onClick: () => setOpenMenu('playbackSpeed')
-      }, itemProps)));
-      if (quality_) items.push(/*#__PURE__*/React.createElement(ListItem, _extends({
-        key: "quality",
-        start: /*#__PURE__*/React.createElement(IconQuality, {
-          size: "small"
-        }),
-        primary: /*#__PURE__*/React.createElement(Type, {
-          version: "b3"
-        }, "Quality"),
-        end: /*#__PURE__*/React.createElement(Type, {
-          version: "b3",
-          priority: "secondary"
-        }, !quality ? 'Original' : `${quality?.meta?.resolution}p`),
-        onClick: () => setOpenMenu('quality')
-      }, itemProps)));
-    } else if (openMenu === 'quality') {
-      items.push(/*#__PURE__*/React.createElement(ListItem, _extends({
-        key: "original",
-        primary: /*#__PURE__*/React.createElement(Type, {
-          version: "b3"
-        }, `${meta?.resolution}p (original)`),
-        onClick: () => quality ? onQuality(null) : undefined,
-        selected: !quality
-      }, itemProps)));
-      versions?.forEach((version, index) => {
-        const isSelected = quality?.id === version?.id;
-        items.push(/*#__PURE__*/React.createElement(ListItem, _extends({
-          key: index,
-          primary: /*#__PURE__*/React.createElement(Type, {
-            version: "b3"
-          }, version?.meta?.resolution, "p"),
-          onClick: () => !isSelected ? onQuality(version) : undefined,
-          selected: isSelected
-        }, itemProps)));
-      });
-    } 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__*/React.createElement(ListItem, _extends({
-          key: option,
-          primary: /*#__PURE__*/React.createElement(Type, {
-            version: "b3"
-          }, option === 1 ? 'Normal' : option),
-          onClick: () => onPlaybackSpeed(option),
-          selected: playbackSpeed === option
-        }, itemProps)));
-      });
-    }
-    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__*/React.createElement(Line, _extends({
-    ref: item => {
-      if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
-      }
-      refs.root.current = item;
-    },
-    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), /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: "column",
-    align: "unset",
-    justify: "unset",
-    fullWidth: true,
-    className: classNames([classes.wrapper, fullScreen && classes.wrapperFullScreen])
-  }, start, /*#__PURE__*/React.createElement("video", {
-    ref: refs.video,
-    onClick: onVideoClick,
-    poster: posterShow ? poster : undefined,
-    controls: false,
-    className: classNames([classes.video, fullScreen && classes.videoFullScreen])
-  }, /*#__PURE__*/React.createElement("source", {
-    src: url,
-    type: mime
-  })), /*#__PURE__*/React.createElement(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])
-  }, startControls, /*#__PURE__*/React.createElement(Line, {
-    fullWidth: true,
-    className: classes.wrapperTimeline
-  }, /*#__PURE__*/React.createElement(Slider, _extends({
-    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__*/React.createElement(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]
-    }
-  }, startButtons, /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    align: "center",
-    justify: "space-between",
-    flexNo: true,
-    fullWidth: true
-  }, /*#__PURE__*/React.createElement(Line, {
-    gap: 1.5,
-    direction: "row",
-    align: "center",
-    flexNo: true
-  }, /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center"
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: play ? onPause : onPlay
-  }, iconButtonProps, PlayButtonProps), play ? /*#__PURE__*/React.createElement(IconPause, null) : /*#__PURE__*/React.createElement(IconPlay, null)), backward && /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: onBackward
-  }, iconButtonProps, BackwardButtonProps), /*#__PURE__*/React.createElement(IconBackward, {
-    style: {
-      transform: 'rotateY(180deg)'
-    }
-  })), forward && /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: onForward
-  }, iconButtonProps, ForwardButtonProps), /*#__PURE__*/React.createElement(IconForward, null)), /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: muted ? onUnmute : onMute,
-    onMouseEnter: onMouseEnter
-  }, iconButtonProps, VolumeButtonProps), !muted ? /*#__PURE__*/React.createElement(IconVolume, null) : /*#__PURE__*/React.createElement(IconVolumeMuted, null)), /*#__PURE__*/React.createElement(Expand, {
-    in: volumeVisible,
-    parent: refs.controls.current,
-    orientation: "horizontal",
-    className: classes.volumeExpand
-  }, /*#__PURE__*/React.createElement(Slider, _extends({
-    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__*/React.createElement(Line, {
-    gap: 0.5,
-    direction: "row",
-    align: "center",
-    flexNo: true,
-    className: classNames(['onesy-Audio-time', classes.time])
-  }, /*#__PURE__*/React.createElement(Type, typeProps, durationToValue(durationMethod(time * 1000, false, true))), /*#__PURE__*/React.createElement(Type, typeProps, "/"), /*#__PURE__*/React.createElement(Type, typeProps, durationToValue(durationMethod(duration * 1000, false, true))))), /*#__PURE__*/React.createElement(Line, {
-    gap: 0.5,
-    direction: "row",
-    align: "center",
-    className: classes.endControls
-  }, startButtonsEnd, settings && /*#__PURE__*/React.createElement(Menu, _extends({
-    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])
-  }), /*#__PURE__*/React.createElement(IconButton, _extends({}, iconButtonProps, SettingsButtonProps), /*#__PURE__*/React.createElement(IconSettings, null))), pictureInPicture_ && allowedPictureInPicture() && /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: !pictureInPicture ? onPictureInPicture : onPictureInPictureExit
-  }, iconButtonProps, PictureInPictureButtonProps), /*#__PURE__*/React.createElement(IconPictureInPicture, null)), fullScreen_ && /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: !fullScreen ? onFullScreen : onFullScreenExit
-  }, iconButtonProps, FullScreenButtonProps), fullScreen ? /*#__PURE__*/React.createElement(IconFullScreenExit, null) : /*#__PURE__*/React.createElement(IconFullScreen, null)), endButtonsEnd)), endButtons), endControls), end));
-});
-VideoPlayer.displayName = 'onesy-VideoPlayer';
-export default VideoPlayer;