@onesy/ui-react 1.0.0

package/VideoPlayer/VideoPlayer.js

@@ -0,0 +1,670 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("@onesy/utils");
+const style_react_1 = require("@onesy/style-react");
+const date_1 = require("@onesy/date");
+const IconMaterialPlayArrowW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialPlayArrowW100"));
+const IconMaterialPauseW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialPauseW100"));
+const IconMaterialForwardMediaW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialForwardMediaW100"));
+const IconMaterialVolumeDownAltW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialVolumeDownAltW100"));
+const IconMaterialVolumeOffW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialVolumeOffW100"));
+const IconMaterialFullscreenW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialFullscreenW100"));
+const IconMaterialFullscreenExitW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialFullscreenExitW100"));
+const IconMaterialSettingsW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialSettingsW100"));
+const IconMaterialTuneW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialTuneW100"));
+const IconMaterialSlowMotionVideoW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialSlowMotionVideoW100"));
+const IconMaterialPictureInPictureAltW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialPictureInPictureAltW100"));
+const IconMaterialArrowBackIosW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialArrowBackIosW100"));
+const Line_1 = __importDefault(require("../Line"));
+const Surface_1 = __importDefault(require("../Surface"));
+const Slider_1 = __importDefault(require("../Slider"));
+const IconButton_1 = __importDefault(require("../IconButton"));
+const Expand_1 = __importDefault(require("../Expand"));
+const Type_1 = __importDefault(require("../Type"));
+const Menu_1 = __importDefault(require("../Menu"));
+const ListItem_1 = __importDefault(require("../ListItem"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(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 = react_1.default.forwardRef((props_, ref) => {
+    var _a, _b, _c;
+    const theme = (0, style_react_1.useOnesyTheme)();
+    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyVideoPlayer) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
+    const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
+    const Slider = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Slider) || Slider_1.default; }, [theme]);
+    const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
+    const Expand = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Expand) || Expand_1.default; }, [theme]);
+    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
+    const Menu = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Menu) || Menu_1.default; }, [theme]);
+    const ListItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ListItem) || ListItem_1.default; }, [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 = IconMaterialPlayArrowW100_1.default, IconPause = IconMaterialPauseW100_1.default, IconForward = IconMaterialForwardMediaW100_1.default, IconBackward = IconMaterialForwardMediaW100_1.default, IconVolume = IconMaterialVolumeDownAltW100_1.default, IconVolumeMuted = IconMaterialVolumeOffW100_1.default, IconBack = IconMaterialArrowBackIosW100_1.default, IconSettings = IconMaterialSettingsW100_1.default, IconQuality = IconMaterialTuneW100_1.default, IconPlaybackSpeed = IconMaterialSlowMotionVideoW100_1.default, IconPictureInPicture = IconMaterialPictureInPictureAltW100_1.default, IconFullScreen = IconMaterialFullscreenW100_1.default, IconFullScreenExit = IconMaterialFullscreenExitW100_1.default, PlayButtonProps, ForwardButtonProps, BackwardButtonProps, VolumeButtonProps, IconButtonProps, TypeProps, TimelineProps, VolumeProps, SliderProps, SettingsButtonProps, SettingsMenuProps, QualityButtonProps, PictureInPictureButtonProps, FullScreenButtonProps, className, Component } = props, other = __rest(props, ["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"]);
+    const { classes } = useStyle();
+    const [loaded, setLoaded] = react_1.default.useState(false);
+    const [duration, setDuration] = react_1.default.useState((0, utils_1.is)('number', meta === null || meta === void 0 ? void 0 : meta.duration) ? meta.duration : undefined);
+    const [time, setTime] = react_1.default.useState(0);
+    const [play, setPlay] = react_1.default.useState(false);
+    const [muted, setMuted] = react_1.default.useState(false);
+    const [volume, setVolume] = react_1.default.useState(1);
+    const [volumeVisible, setVolumeVisible] = react_1.default.useState(false);
+    const [updating, setUpdating] = react_1.default.useState(false);
+    const [mouseMoved, setMouseMoved] = react_1.default.useState();
+    const [quality, setQuality] = react_1.default.useState();
+    const [posterShow, setPosterShow] = react_1.default.useState(true);
+    const [pictureInPicture, setPictureInPicture] = react_1.default.useState(false);
+    const [fullScreen, setFullScreen] = react_1.default.useState(false);
+    const [playbackSpeed, setPlaybackSpeed] = react_1.default.useState(1);
+    const [openMenu, setOpenMenu] = react_1.default.useState();
+    const refs = {
+        root: react_1.default.useRef(undefined),
+        video: react_1.default.useRef(),
+        controls: react_1.default.useRef(undefined),
+        duration: react_1.default.useRef(undefined),
+        time: react_1.default.useRef(undefined),
+        play: react_1.default.useRef(undefined),
+        updating: react_1.default.useRef(undefined),
+        onPlay: react_1.default.useRef(undefined),
+        onPause: react_1.default.useRef(undefined),
+        onTimeChange: react_1.default.useRef(undefined),
+        onBackward: react_1.default.useRef(undefined),
+        onForward: react_1.default.useRef(undefined),
+        onStop: react_1.default.useRef(undefined),
+        startMediaSession: react_1.default.useRef(undefined),
+        updateMediaSession: react_1.default.useRef(undefined),
+        startMediaSessionOnPlay: react_1.default.useRef(undefined),
+        fullScreen: react_1.default.useRef(fullScreen),
+        mouseMoved: react_1.default.useRef(mouseMoved),
+        timeoutMouseMoved: react_1.default.useRef(undefined)
+    };
+    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 = () => {
+        var _a;
+        if ((0, utils_1.isEnvironment)('browser')) {
+            const rootDocument = (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document);
+            return rootDocument.pictureInPictureEnabled;
+        }
+    };
+    const startMediaSession = react_1.default.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_1.default.useCallback(() => {
+        if ('mediaSession' in navigator) {
+            window.navigator.mediaSession.setPositionState({
+                duration: refs.duration.current,
+                playbackRate: 1,
+                position: (0, utils_1.clamp)(refs.time.current, 0, refs.duration.current)
+            });
+        }
+    }, [name]);
+    refs.startMediaSession.current = startMediaSession;
+    refs.updateMediaSession.current = updateMediaSession;
+    const durationTime = duration_ || (meta === null || meta === void 0 ? void 0 : meta.duration);
+    const onVolumeChange = react_1.default.useCallback((value) => {
+        setVolume(value);
+        refs.video.current.volume = value;
+    }, []);
+    const onTimeChange = react_1.default.useCallback((value) => {
+        setTime(value);
+        refs.video.current.currentTime = value;
+        // update MediaSession
+        refs.updateMediaSession.current();
+    }, []);
+    const onPlaybackSpeed = react_1.default.useCallback((value_) => {
+        const value = (0, utils_1.clamp)(value_, 0, 2);
+        setPlaybackSpeed(value);
+        setOpenMenu(null);
+        refs.video.current.playbackRate = value;
+    }, []);
+    const onForward = react_1.default.useCallback((details) => {
+        const part = refs.duration.current * 0.1;
+        const toMove = (0, utils_1.clamp)((details === null || details === void 0 ? void 0 : details.seekOffset) || part, 1, refs.duration.current);
+        const value = (0, utils_1.clamp)(refs.time.current + toMove, 0, refs.duration.current);
+        refs.onTimeChange.current(value);
+    }, []);
+    const onBackward = react_1.default.useCallback((details) => {
+        const part = refs.duration.current * 0.1;
+        const toMove = (0, utils_1.clamp)((details === null || details === void 0 ? void 0 : details.seekOffset) || part, 1, refs.duration.current);
+        const value = (0, utils_1.clamp)(refs.time.current - toMove, 0, refs.duration.current);
+        refs.onTimeChange.current(value);
+    }, []);
+    const onPlay = react_1.default.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_1.default.useCallback(() => {
+        setPlay(false);
+        refs.video.current.pause();
+    }, []);
+    const onStop = react_1.default.useCallback(() => {
+        setPlay(false);
+        refs.video.current.pause();
+        refs.video.current.currentTime = 0;
+    }, []);
+    const onMute = react_1.default.useCallback(() => {
+        setMuted(true);
+        refs.video.current.muted = true;
+    }, []);
+    const onUnmute = react_1.default.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_1.default.useCallback(() => {
+        var _a, _b, _c, _d;
+        setLoaded(false);
+        const video = refs.video.current;
+        video.addEventListener('loadedmetadata', () => {
+            const value = video.duration;
+            if (!(0, utils_1.is)('number', durationTime) && (0, utils_1.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 ((0, utils_1.is)('number', durationTime)) {
+            if (refs.duration.current === undefined)
+                setDuration(durationTime);
+            setLoaded(true);
+        }
+        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.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: date_1.OnesyDate.unix
+                });
+                refs.timeoutMouseMoved.current = setTimeout(() => {
+                    setMouseMoved({
+                        moved: false,
+                        unix: date_1.OnesyDate.unix
+                    });
+                }, 4000);
+            }
+        };
+        (_b = refs.root.current) === null || _b === void 0 ? void 0 : _b.addEventListener('mousemove', methodMouseMove);
+        (_c = refs.root.current) === null || _c === void 0 ? void 0 : _c.addEventListener('touchstart', methodMouseMove);
+        (_d = refs.root.current) === null || _d === void 0 ? void 0 : _d.addEventListener('touchmove', methodMouseMove);
+        rootDocument.addEventListener('enterpictureinpicture', methodPictureInPicture);
+        rootDocument.addEventListener('leavepictureinpicture', methodPictureInPicture);
+        rootDocument.addEventListener('fullscreenchange', methodFullScreen);
+        video.src = src;
+        return () => {
+            var _a, _b, _c;
+            (_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mousemove', methodMouseMove);
+            (_b = refs.root.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('touchstart', methodMouseMove);
+            (_c = refs.root.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('touchmove', methodMouseMove);
+            rootDocument.removeEventListener('enterpictureinpicture', methodPictureInPicture);
+            rootDocument.removeEventListener('leavepictureinpicture', methodPictureInPicture);
+            rootDocument.removeEventListener('fullscreenchange', methodFullScreen);
+        };
+    }, [src, durationTime, startMediaSession]);
+    react_1.default.useEffect(() => {
+        var _a, _b;
+        if (loaded) {
+            let urlNew = src;
+            if (quality) {
+                if ((_a = quality === null || quality === void 0 ? void 0 : quality.meta) === null || _a === void 0 ? void 0 : _a.resolution)
+                    urlNew += `?version=${(_b = quality === null || quality === void 0 ? void 0 : quality.meta) === null || _b === void 0 ? void 0 : _b.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_1.default.useCallback(() => {
+        setVolumeVisible(true);
+    }, []);
+    const onMouseLeave = react_1.default.useCallback(() => {
+        setVolumeVisible(false);
+    }, []);
+    const onUpdating = react_1.default.useCallback(() => {
+        setUpdating(refs.play.current ? 'play' : true);
+        if (refs.play.current)
+            onPause();
+    }, [onPause]);
+    const onUpdatingDone = react_1.default.useCallback(() => {
+        const updatingPrevious = refs.updating.current;
+        setUpdating(false);
+        if (updatingPrevious === 'play')
+            onPlay();
+    }, [onPlay]);
+    const onFullScreen = react_1.default.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_1.default.useCallback(async () => {
+        var _a;
+        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.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_1.default.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_1.default.useCallback(async () => {
+        var _a;
+        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.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_1.default.useCallback((event) => {
+        if (event.detail === 1) {
+            !play ? onPlay() : onPause();
+        }
+        if (event.detail === 2) {
+            !fullScreen ? onFullScreen() : onFullScreenExit();
+        }
+    }, [play, fullScreen, onPlay, onPause, onFullScreen, onFullScreenExit]);
+    react_1.default.useEffect(() => {
+        var _a;
+        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
+        rootDocument.addEventListener('mouseup', onUpdatingDone);
+        rootDocument.addEventListener('touchend', onUpdatingDone);
+        return () => {
+            rootDocument.removeEventListener('mouseup', onUpdatingDone);
+            rootDocument.removeEventListener('touchend', onUpdatingDone);
+        };
+    }, []);
+    react_1.default.useEffect(() => {
+        // init
+        init();
+    }, [src]);
+    const durationToValue = (item) => {
+        let value = '';
+        const separator = ':';
+        if (item.hour)
+            value += `${(0, utils_1.getLeadingZerosNumber)(item.hour, { leadingZeros: 0 })}`;
+        if (item.minute) {
+            if (value)
+                value += separator;
+            value += `${(0, utils_1.getLeadingZerosNumber)(item.minute, { leadingZeros: 0 })}`;
+        }
+        else {
+            if (value)
+                value += separator;
+            value += '0';
+        }
+        if (item.second) {
+            if (value)
+                value += separator;
+            value += `${(0, utils_1.getLeadingZerosNumber)(item.second, { leadingZeros: 1 })}`;
+        }
+        else {
+            if (value)
+                value += separator;
+            value += '00';
+        }
+        return value;
+    };
+    const onQuality = react_1.default.useCallback((version) => {
+        setQuality(version);
+        setOpenMenu(null);
+    }, []);
+    const onSettingsMenuClose = react_1.default.useCallback(() => {
+        setOpenMenu(null);
+    }, []);
+    const getSettingsMenuItems = () => {
+        var _a;
+        const itemProps = {
+            button: true,
+            startAlign: 'center',
+            endAlign: 'center',
+            size: 'small',
+            className: 'onesy-videoPlayer-option'
+        };
+        const items = [];
+        if (openMenu) {
+            items.push((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ start: ((0, jsx_runtime_1.jsx)(IconBack, { size: 'very small' })), primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: "Back" }))), onClick: () => setOpenMenu(null) }, itemProps), 'back'));
+        }
+        if (!openMenu) {
+            if (playbackSpeed_)
+                items.push((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ start: ((0, jsx_runtime_1.jsx)(IconPlaybackSpeed, { size: 'small' })), primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: "Playback speed" }))), end: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', priority: 'secondary' }, { children: playbackSpeed === 1 ? 'Normal' : playbackSpeed }))), onClick: () => setOpenMenu('playbackSpeed') }, itemProps), 'playbackSpeed'));
+            if (quality_)
+                items.push((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ start: ((0, jsx_runtime_1.jsx)(IconQuality, { size: 'small' })), primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: "Quality" }))), end: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', priority: 'secondary' }, { children: !quality ? 'Original' : `${(_a = quality === null || quality === void 0 ? void 0 : quality.meta) === null || _a === void 0 ? void 0 : _a.resolution}p` }))), onClick: () => setOpenMenu('quality') }, itemProps), 'quality'));
+        }
+        else if (openMenu === 'quality') {
+            items.push((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: `${meta === null || meta === void 0 ? void 0 : meta.resolution}p (original)` }))), onClick: () => quality ? onQuality(null) : undefined, selected: !quality }, itemProps), 'original'));
+            versions === null || versions === void 0 ? void 0 : versions.forEach((version, index) => {
+                var _a;
+                const isSelected = (quality === null || quality === void 0 ? void 0 : quality.id) === (version === null || version === void 0 ? void 0 : version.id);
+                items.push((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ primary: ((0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'b3' }, { children: [(_a = version === null || version === void 0 ? void 0 : version.meta) === null || _a === void 0 ? void 0 : _a.resolution, "p"] }))), onClick: () => !isSelected ? onQuality(version) : 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((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: option === 1 ? 'Normal' : option }))), onClick: () => onPlaybackSpeed(option), selected: playbackSpeed === option }, itemProps), option));
+            });
+        }
+        return items;
+    };
+    const thumbnailsToUse = thumbnails || (quality === null || quality === void 0 ? void 0 : quality.thumbnails);
+    const thumbnail = thumbnailsToUse ? 1 : undefined;
+    const typeProps = Object.assign({ version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3' }, TypeProps);
+    const iconButtonProps = Object.assign({ version: 'text', size,
+        disabled }, IconButtonProps);
+    const sliderProps = Object.assign({ color,
+        size,
+        disabled }, SliderProps);
+    let url = src;
+    let poster;
+    if (quality) {
+        if ((_a = quality === null || quality === void 0 ? void 0 : quality.meta) === null || _a === void 0 ? void 0 : _a.resolution)
+            url += `?version=${(_b = quality === null || quality === void 0 ? void 0 : quality.meta) === null || _b === void 0 ? void 0 : _b.resolution}`;
+    }
+    if ((0, utils_1.is)('number', thumbnail)) {
+        poster = `${url}${(url === null || url === void 0 ? void 0 : url.includes('?')) ? '&' : '?'}thumbnail=${thumbnail}`;
+    }
+    return ((0, jsx_runtime_1.jsx)(Line, Object.assign({ ref: item => {
+            if (ref) {
+                if ((0, utils_1.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: (0, style_react_1.classNames)([
+            (0, utils_2.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: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'column', align: 'unset', justify: 'unset', fullWidth: true, className: (0, style_react_1.classNames)([
+                classes.wrapper,
+                fullScreen && classes.wrapperFullScreen
+            ]) }, { children: [start, (0, jsx_runtime_1.jsx)("video", Object.assign({ ref: refs.video, onClick: onVideoClick, poster: posterShow ? poster : undefined, controls: false, className: (0, style_react_1.classNames)([
+                        classes.video,
+                        fullScreen && classes.videoFullScreen
+                    ]) }, { children: (0, jsx_runtime_1.jsx)("source", { src: url, type: mime }) })), (0, jsx_runtime_1.jsxs)(Surface, Object.assign({ ref: refs.controls, gap: 0, fullWidth: true, tonal: tonal, color: color !== undefined ? color : theme.palette.light ? 'inverted' : 'default', Component: Line, className: (0, style_react_1.classNames)([
+                        classes.controls,
+                        classes[`controls_size_${size}`],
+                        fullScreen && classes.controlsFullScreen,
+                        !(mouseMoved === null || mouseMoved === void 0 ? void 0 : mouseMoved.moved) && play && classes.controlsHiddden
+                    ]) }, { children: [startControls, (0, jsx_runtime_1.jsx)(Line, Object.assign({ fullWidth: true, className: classes.wrapperTimeline }, { children: (0, jsx_runtime_1.jsx)(Slider, Object.assign({ value: time, onChange: onTimeChange, min: 0, max: duration, onMouseDown: onUpdating, onTouchStart: onUpdating, onMouseUp: onUpdatingDone, onToucheEnd: onUpdatingDone }, sliderProps, TimelineProps, { className: (0, style_react_1.classNames)([
+                                    sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.className,
+                                    TimelineProps === null || TimelineProps === void 0 ? void 0 : TimelineProps.className,
+                                    classes.timeline
+                                ]) })) })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ 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, (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'space-between', flexNo: true, fullWidth: true }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1.5, direction: 'row', align: 'center', flexNo: true }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: play ? onPause : onPlay }, iconButtonProps, PlayButtonProps, { children: play ? (0, jsx_runtime_1.jsx)(IconPause, {}) : (0, jsx_runtime_1.jsx)(IconPlay, {}) })), backward && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onBackward }, iconButtonProps, BackwardButtonProps, { children: (0, jsx_runtime_1.jsx)(IconBackward, { style: {
+                                                                    transform: 'rotateY(180deg)'
+                                                                } }) }))), forward && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onForward }, iconButtonProps, ForwardButtonProps, { children: (0, jsx_runtime_1.jsx)(IconForward, {}) }))), (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: muted ? onUnmute : onMute, onMouseEnter: onMouseEnter }, iconButtonProps, VolumeButtonProps, { children: !muted ? (0, jsx_runtime_1.jsx)(IconVolume, {}) : (0, jsx_runtime_1.jsx)(IconVolumeMuted, {}) })), (0, jsx_runtime_1.jsx)(Expand, Object.assign({ in: volumeVisible, parent: refs.controls.current, orientation: 'horizontal', className: classes.volumeExpand }, { children: (0, jsx_runtime_1.jsx)(Slider, Object.assign({ value: volume, onChange: onVolumeChange, min: 0, max: 1, orientation: 'horizontal' }, sliderProps, { size: ['small', 'regular'].includes(size) ? 'small' : 'regular' }, VolumeProps, { className: (0, style_react_1.classNames)([
+                                                                    sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.className,
+                                                                    VolumeProps === null || VolumeProps === void 0 ? void 0 : VolumeProps.className,
+                                                                    classes.volume
+                                                                ]) })) }))] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'row', align: 'center', flexNo: true, className: (0, style_react_1.classNames)([
+                                                        'onesy-Audio-time',
+                                                        classes.time
+                                                    ]) }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({}, typeProps, { children: durationToValue((0, date_1.duration)(time * 1000, false, true)) })), (0, jsx_runtime_1.jsx)(Type, Object.assign({}, typeProps, { children: "/" })), (0, jsx_runtime_1.jsx)(Type, Object.assign({}, typeProps, { children: durationToValue((0, date_1.duration)(duration * 1000, false, true)) }))] }))] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'row', align: 'center', className: classes.endControls }, { children: [startButtonsEnd, settings && ((0, jsx_runtime_1.jsx)(Menu, Object.assign({ menuItems: getSettingsMenuItems(), position: 'top', switch: false, portal: !fullScreen, onClose: onSettingsMenuClose, includeParentQueries: ['.onesy-videoPlayer'] }, SettingsMenuProps, { ListProps: {
+                                                        className: (0, style_react_1.classNames)([
+                                                            (_c = SettingsMenuProps === null || SettingsMenuProps === void 0 ? void 0 : SettingsMenuProps.ListProps) === null || _c === void 0 ? void 0 : _c.className,
+                                                            classes.menuSettings,
+                                                        ]),
+                                                        size: 'small'
+                                                    }, className: (0, style_react_1.classNames)([
+                                                        'onesy-videoPlayer',
+                                                        SettingsMenuProps === null || SettingsMenuProps === void 0 ? void 0 : SettingsMenuProps.className,
+                                                        fullScreen && classes.menuSettingsFullScreen
+                                                    ]) }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({}, iconButtonProps, SettingsButtonProps, { children: (0, jsx_runtime_1.jsx)(IconSettings, {}) })) }))), pictureInPicture_ && allowedPictureInPicture() && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: !pictureInPicture ? onPictureInPicture : onPictureInPictureExit }, iconButtonProps, PictureInPictureButtonProps, { children: (0, jsx_runtime_1.jsx)(IconPictureInPicture, {}) }))), fullScreen_ && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: !fullScreen ? onFullScreen : onFullScreenExit }, iconButtonProps, FullScreenButtonProps, { children: fullScreen ? (0, jsx_runtime_1.jsx)(IconFullScreenExit, {}) : (0, jsx_runtime_1.jsx)(IconFullScreen, {}) }))), endButtonsEnd] }))] })), endButtons] })), endControls] })), end] })) })));
+});
+VideoPlayer.displayName = 'onesy-VideoPlayer';
+exports.default = VideoPlayer;