@onesy/ui-react 1.0.130 → 1.0.132

package/AudioPlayer/AudioPlayer.js

@@ -1,477 +1,694 @@
 "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("@onesy/icons-material-rounded-react/IconMaterialPlayArrowW100"));
-const IconMaterialPauseW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialPauseW100"));
-const IconMaterialForwardMediaW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialForwardMediaW100"));
-const IconMaterialVolumeDownAltW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialVolumeDownAltW100"));
-const IconMaterialVolumeOffW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialVolumeOffW100"));
-const IconMaterialSettingsW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialSettingsW100"));
-const IconMaterialTuneW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialTuneW100"));
-const IconMaterialSlowMotionVideoW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialSlowMotionVideoW100"));
-const IconMaterialArrowBackIosW100_1 = __importDefault(require("@onesy/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',
-        minWidth: '254px'
-    },
-    wrapper: {
-        position: 'relative',
-        borderRadius: 'inherit'
-    },
-    audio: {},
-    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')
-    },
-    controls: {
-        position: 'relative',
-        borderRadius: 'inherit'
-    },
-    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'
-    },
-    endControls: {
-        position: 'relative'
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _date = require("@onesy/date");
+var _IconMaterialPlayArrowW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialPlayArrowW100"));
+var _IconMaterialPauseW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialPauseW100"));
+var _IconMaterialForwardMediaW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialForwardMediaW100"));
+var _IconMaterialVolumeDownAltW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialVolumeDownAltW100"));
+var _IconMaterialVolumeOffW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialVolumeOffW100"));
+var _IconMaterialSettingsW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialSettingsW100"));
+var _IconMaterialTuneW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialTuneW100"));
+var _IconMaterialSlowMotionVideoW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialSlowMotionVideoW100"));
+var _IconMaterialArrowBackIosW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialArrowBackIosW100"));
+var _Line = _interopRequireDefault(require("../Line"));
+var _Surface = _interopRequireDefault(require("../Surface"));
+var _Slider = _interopRequireDefault(require("../Slider"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _Expand = _interopRequireDefault(require("../Expand"));
+var _Type = _interopRequireDefault(require("../Type"));
+var _Menu = _interopRequireDefault(require("../Menu"));
+var _ListItem = _interopRequireDefault(require("../ListItem"));
+var _utils2 = require("../utils");
+const _excluded = ["name", "src", "meta", "versions", "mime", "duration", "tonal", "color", "size", "start", "end", "startControls", "endControls", "startButtons", "endButtons", "startButtonsEnd", "endButtonsEnd", "forward", "backward", "settings", "quality", "playbackSpeed", "startMediaSessionOnPlay", "disabled", "IconPlay", "IconPause", "IconForward", "IconBackward", "IconVolume", "IconVolumeMuted", "IconBack", "IconSettings", "IconQuality", "IconPlaybackSpeed", "PlayButtonProps", "ForwardButtonProps", "BackwardButtonProps", "VolumeButtonProps", "IconButtonProps", "TypeProps", "TimelineProps", "VolumeProps", "SliderProps", "SettingsButtonProps", "SettingsMenuProps", "QualityButtonProps", "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) { (0, _defineProperty2.default)(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; }
+const useStyle = (0, _styleReact.style)(theme => ({
+  root: {
+    position: 'relative',
+    minWidth: '254px'
+  },
+  wrapper: {
+    position: 'relative',
+    borderRadius: 'inherit'
+  },
+  audio: {},
+  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')
+  },
+  controls: {
+    position: 'relative',
+    borderRadius: 'inherit'
+  },
+  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'
+  },
+  endControls: {
+    position: 'relative'
+  },
+  placeholder: {},
+  bottomControls: {
+    scrollbarWidth: 'none',
+    overflow: 'auto hidden',
+    '& > *': {
+      flex: '0 0 auto'
     },
-    placeholder: {},
-    bottomControls: {
-        scrollbarWidth: 'none',
-        overflow: 'auto hidden',
-        '& > *': {
-            flex: '0 0 auto'
-        },
-        '&::-webkit-scrollbar': {
-            display: 'none'
-        }
+    '&::-webkit-scrollbar': {
+      display: 'none'
     }
-}), { name: 'onesy-AudioPlayer' });
-const AudioPlayer = react_1.default.forwardRef((props_, ref) => {
-    var _a;
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const l = theme.l;
-    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.onesyAudioPlayer) === 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, mime, duration: duration_, tonal = true, color = 'primary', size = 'regular', start, end, startControls, endControls, startButtons, endButtons, startButtonsEnd, endButtonsEnd, forward, backward, settings = true, quality: quality_ = true, playbackSpeed: playbackSpeed_ = 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, PlayButtonProps, ForwardButtonProps, BackwardButtonProps, VolumeButtonProps, IconButtonProps, TypeProps, TimelineProps, VolumeProps, SliderProps, SettingsButtonProps, SettingsMenuProps, QualityButtonProps, className, Component } = props, other = __rest(props, ["name", "src", "meta", "versions", "mime", "duration", "tonal", "color", "size", "start", "end", "startControls", "endControls", "startButtons", "endButtons", "startButtonsEnd", "endButtonsEnd", "forward", "backward", "settings", "quality", "playbackSpeed", "startMediaSessionOnPlay", "disabled", "IconPlay", "IconPause", "IconForward", "IconBackward", "IconVolume", "IconVolumeMuted", "IconBack", "IconSettings", "IconQuality", "IconPlaybackSpeed", "PlayButtonProps", "ForwardButtonProps", "BackwardButtonProps", "VolumeButtonProps", "IconButtonProps", "TypeProps", "TimelineProps", "VolumeProps", "SliderProps", "SettingsButtonProps", "SettingsMenuProps", "QualityButtonProps", "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 [quality, setQuality] = react_1.default.useState();
-    const [playbackSpeed, setPlaybackSpeed] = react_1.default.useState(1);
-    const [openMenu, setOpenMenu] = react_1.default.useState();
-    const refs = {
-        root: react_1.default.useRef(null),
-        audio: react_1.default.useRef(null),
-        controls: react_1.default.useRef(null),
-        duration: react_1.default.useRef(null),
-        time: react_1.default.useRef(null),
-        play: react_1.default.useRef(null),
-        updating: react_1.default.useRef(null),
-        onPlay: react_1.default.useRef(null),
-        onPause: react_1.default.useRef(null),
-        onTimeChange: react_1.default.useRef(null),
-        onBackward: react_1.default.useRef(null),
-        onForward: react_1.default.useRef(null),
-        onStop: react_1.default.useRef(null),
-        startMediaSession: react_1.default.useRef(null),
-        updateMediaSession: react_1.default.useRef(null),
-        startMediaSessionOnPlay: react_1.default.useRef(null)
-    };
-    refs.duration.current = duration;
-    refs.time.current = time;
-    refs.play.current = play;
-    refs.updating.current = updating;
-    refs.startMediaSessionOnPlay.current = startMediaSessionOnPlay;
-    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: 'onesy-AudioPlayer'
+});
+const AudioPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _SettingsMenuProps$Li;
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const l = theme.l;
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyAudioPlayer) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const Line = _react.default.useMemo(() => {
+    var _theme$elements;
+    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  }, [theme]);
+  const Surface = _react.default.useMemo(() => {
+    var _theme$elements2;
+    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
+  }, [theme]);
+  const Slider = _react.default.useMemo(() => {
+    var _theme$elements3;
+    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Slider) || _Slider.default;
+  }, [theme]);
+  const IconButton = _react.default.useMemo(() => {
+    var _theme$elements4;
+    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.IconButton) || _IconButton.default;
+  }, [theme]);
+  const Expand = _react.default.useMemo(() => {
+    var _theme$elements5;
+    return (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Expand) || _Expand.default;
+  }, [theme]);
+  const Type = _react.default.useMemo(() => {
+    var _theme$elements6;
+    return (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Type) || _Type.default;
+  }, [theme]);
+  const Menu = _react.default.useMemo(() => {
+    var _theme$elements7;
+    return (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Menu) || _Menu.default;
+  }, [theme]);
+  const ListItem = _react.default.useMemo(() => {
+    var _theme$elements8;
+    return (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.ListItem) || _ListItem.default;
+  }, [theme]);
+  const {
+      name,
+      src,
+      meta,
+      versions,
+      mime,
+      duration: duration_,
+      tonal = true,
+      color = 'primary',
+      size = 'regular',
+      start,
+      end,
+      startControls,
+      endControls,
+      startButtons,
+      endButtons,
+      startButtonsEnd,
+      endButtonsEnd,
+      forward,
+      backward,
+      settings = true,
+      quality: quality_ = true,
+      playbackSpeed: playbackSpeed_ = true,
+      startMediaSessionOnPlay,
+      disabled,
+      IconPlay = _IconMaterialPlayArrowW.default,
+      IconPause = _IconMaterialPauseW.default,
+      IconForward = _IconMaterialForwardMediaW.default,
+      IconBackward = _IconMaterialForwardMediaW.default,
+      IconVolume = _IconMaterialVolumeDownAltW.default,
+      IconVolumeMuted = _IconMaterialVolumeOffW.default,
+      IconBack = _IconMaterialArrowBackIosW.default,
+      IconSettings = _IconMaterialSettingsW.default,
+      IconQuality = _IconMaterialTuneW.default,
+      IconPlaybackSpeed = _IconMaterialSlowMotionVideoW.default,
+      PlayButtonProps,
+      ForwardButtonProps,
+      BackwardButtonProps,
+      VolumeButtonProps,
+      IconButtonProps,
+      TypeProps,
+      TimelineProps,
+      VolumeProps,
+      SliderProps,
+      SettingsButtonProps,
+      SettingsMenuProps,
+      QualityButtonProps,
+      className,
+      Component
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [loaded, setLoaded] = _react.default.useState(false);
+  const [duration, setDuration] = _react.default.useState((0, _utils.is)('number', meta === null || meta === void 0 ? void 0 : meta.duration) ? meta.duration : undefined);
+  const [time, setTime] = _react.default.useState(0);
+  const [play, setPlay] = _react.default.useState(false);
+  const [muted, setMuted] = _react.default.useState(false);
+  const [volume, setVolume] = _react.default.useState(1);
+  const [volumeVisible, setVolumeVisible] = _react.default.useState(false);
+  const [updating, setUpdating] = _react.default.useState(false);
+  const [quality, setQuality] = _react.default.useState();
+  const [playbackSpeed, setPlaybackSpeed] = _react.default.useState(1);
+  const [openMenu, setOpenMenu] = _react.default.useState();
+  const refs = {
+    root: _react.default.useRef(null),
+    audio: _react.default.useRef(null),
+    controls: _react.default.useRef(null),
+    duration: _react.default.useRef(null),
+    time: _react.default.useRef(null),
+    play: _react.default.useRef(null),
+    updating: _react.default.useRef(null),
+    onPlay: _react.default.useRef(null),
+    onPause: _react.default.useRef(null),
+    onTimeChange: _react.default.useRef(null),
+    onBackward: _react.default.useRef(null),
+    onForward: _react.default.useRef(null),
+    onStop: _react.default.useRef(null),
+    startMediaSession: _react.default.useRef(null),
+    updateMediaSession: _react.default.useRef(null),
+    startMediaSessionOnPlay: _react.default.useRef(null)
+  };
+  refs.duration.current = duration;
+  refs.time.current = time;
+  refs.play.current = play;
+  refs.updating.current = updating;
+  refs.startMediaSessionOnPlay.current = startMediaSessionOnPlay;
+  const startMediaSession = _react.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]);
-    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.audio.current.volume = value;
-    }, []);
-    const onTimeChange = react_1.default.useCallback((value) => {
+      }
+    }
+  }, [name]);
+  const updateMediaSession = _react.default.useCallback(() => {
+    if ('mediaSession' in navigator) {
+      window.navigator.mediaSession.setPositionState({
+        duration: refs.duration.current,
+        playbackRate: 1,
+        position: (0, _utils.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.default.useCallback(value => {
+    setVolume(value);
+    refs.audio.current.volume = value;
+  }, []);
+  const onTimeChange = _react.default.useCallback(value => {
+    setTime(value);
+    refs.audio.current.currentTime = value;
+
+    // update MediaSession
+    refs.updateMediaSession.current();
+  }, []);
+  const onPlaybackSpeed = _react.default.useCallback(value_ => {
+    const value = (0, _utils.clamp)(value_, 0, 2);
+    setPlaybackSpeed(value);
+    setOpenMenu(null);
+    refs.audio.current.playbackRate = value;
+  }, []);
+  const onForward = _react.default.useCallback(details => {
+    const part = refs.duration.current * 0.1;
+    const toMove = (0, _utils.clamp)((details === null || details === void 0 ? void 0 : details.seekOffset) || part, 1, refs.duration.current);
+    const value = (0, _utils.clamp)(refs.time.current + toMove, 0, refs.duration.current);
+    refs.onTimeChange.current(value);
+  }, []);
+  const onBackward = _react.default.useCallback(details => {
+    const part = refs.duration.current * 0.1;
+    const toMove = (0, _utils.clamp)((details === null || details === void 0 ? void 0 : details.seekOffset) || part, 1, refs.duration.current);
+    const value = (0, _utils.clamp)(refs.time.current - toMove, 0, refs.duration.current);
+    refs.onTimeChange.current(value);
+  }, []);
+  const onPlay = _react.default.useCallback(() => {
+    try {
+      setPlay(true);
+      refs.audio.current.play();
+
+      // start MediaSession
+      if (refs.startMediaSessionOnPlay.current) refs.startMediaSession.current();
+
+      // update MediaSession
+      refs.updateMediaSession.current();
+    } catch (error) {
+      console.error(`AudioPlayer`, error);
+    }
+  }, []);
+  const onPause = _react.default.useCallback(() => {
+    setPlay(false);
+    refs.audio.current.pause();
+  }, []);
+  const onStop = _react.default.useCallback(() => {
+    setPlay(false);
+    refs.audio.current.pause();
+    refs.audio.current.currentTime = 0;
+  }, []);
+  const onMute = _react.default.useCallback(() => {
+    setMuted(true);
+    refs.audio.current.muted = true;
+  }, []);
+  const onUnmute = _react.default.useCallback(() => {
+    setMuted(false);
+    refs.audio.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.default.useCallback(() => {
+    var _refs$root$current;
+    setLoaded(false);
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
+    refs.audio.current = rootDocument.createElement('audio');
+    const audio = refs.audio.current;
+    audio.addEventListener('loadedmetadata', () => {
+      const value = audio.duration;
+      if (!(0, _utils.is)('number', durationTime) && (0, _utils.is)('number', value)) {
+        if (refs.duration.current === undefined) setDuration(value);
+        setLoaded(true);
+      }
+    });
+    audio.addEventListener('ended', () => {
+      refs.onStop.current();
+    });
+    audio.addEventListener('timeupdate', () => {
+      const value = audio.currentTime;
+      if (!refs.updating.current && refs.time.current !== value) {
         setTime(value);
-        refs.audio.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.audio.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.audio.current.play();
-            // start MediaSession
-            if (refs.startMediaSessionOnPlay.current)
-                refs.startMediaSession.current();
-            // update MediaSession
-            refs.updateMediaSession.current();
-        }
-        catch (error) {
-            console.error(`AudioPlayer`, error);
-        }
-    }, []);
-    const onPause = react_1.default.useCallback(() => {
-        setPlay(false);
-        refs.audio.current.pause();
-    }, []);
-    const onStop = react_1.default.useCallback(() => {
-        setPlay(false);
-        refs.audio.current.pause();
-        refs.audio.current.currentTime = 0;
-    }, []);
-    const onMute = react_1.default.useCallback(() => {
-        setMuted(true);
-        refs.audio.current.muted = true;
-    }, []);
-    const onUnmute = react_1.default.useCallback(() => {
-        setMuted(false);
-        refs.audio.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;
-        setLoaded(false);
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        refs.audio.current = rootDocument.createElement('audio');
-        const audio = refs.audio.current;
-        audio.addEventListener('loadedmetadata', () => {
-            const value = audio.duration;
-            if (!(0, utils_1.is)('number', durationTime) && (0, utils_1.is)('number', value)) {
-                if (refs.duration.current === undefined)
-                    setDuration(value);
-                setLoaded(true);
-            }
-        });
-        audio.addEventListener('ended', () => {
-            refs.onStop.current();
-        });
-        audio.addEventListener('timeupdate', () => {
-            const value = audio.currentTime;
-            if (!refs.updating.current && refs.time.current !== value) {
-                setTime(value);
-                // update MediaSession
-                refs.updateMediaSession.current();
-            }
-        });
-        audio.addEventListener('ratechange', () => {
-            const value = audio.playbackRate;
-            setPlaybackSpeed(value);
-        });
-        // start MediaSession
-        startMediaSession();
-        if ((0, utils_1.is)('number', durationTime)) {
-            if (refs.duration.current === undefined)
-                setDuration(durationTime);
-            setLoaded(true);
-        }
-        audio.src = src;
-    }, [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.audio.current.currentTime;
-            const playing = refs.play.current;
-            // pause
-            if (playing)
-                refs.onPause.current();
-            refs.audio.current.src = urlNew;
-            refs.audio.current.load();
-            refs.audio.current.currentTime = currentTime;
-            // 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]);
-    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;
+      }
+    });
+    audio.addEventListener('ratechange', () => {
+      const value = audio.playbackRate;
+      setPlaybackSpeed(value);
+    });
+
+    // start MediaSession
+    startMediaSession();
+    if ((0, _utils.is)('number', durationTime)) {
+      if (refs.duration.current === undefined) setDuration(durationTime);
+      setLoaded(true);
+    }
+    audio.src = src;
+  }, [src, durationTime, startMediaSession]);
+  _react.default.useEffect(() => {
+    if (loaded) {
+      let urlNew = src;
+      if (quality) {
+        var _quality$meta, _quality$meta2;
+        if (quality !== null && quality !== void 0 && (_quality$meta = quality.meta) !== null && _quality$meta !== void 0 && _quality$meta.resolution) urlNew += `?version=${quality === null || quality === void 0 || (_quality$meta2 = quality.meta) === null || _quality$meta2 === void 0 ? void 0 : _quality$meta2.resolution}`;
+      }
+      const currentTime = refs.audio.current.currentTime;
+      const playing = refs.play.current;
+
+      // pause
+      if (playing) refs.onPause.current();
+      refs.audio.current.src = urlNew;
+      refs.audio.current.load();
+      refs.audio.current.currentTime = currentTime;
+
+      // play
+      if (playing) refs.onPlay.current();
+    }
+  }, [quality]);
+  const onMouseEnter = _react.default.useCallback(() => {
+    setVolumeVisible(true);
+  }, []);
+  const onMouseLeave = _react.default.useCallback(() => {
+    setVolumeVisible(false);
+  }, []);
+  const onUpdating = _react.default.useCallback(() => {
+    setUpdating(refs.play.current ? 'play' : true);
+    if (refs.play.current) onPause();
+  }, [onPause]);
+  const onUpdatingDone = _react.default.useCallback(() => {
+    const updatingPrevious = refs.updating.current;
+    setUpdating(false);
+    if (updatingPrevious === 'play') onPlay();
+  }, [onPlay]);
+  _react.default.useEffect(() => {
+    var _refs$root$current2;
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.ownerDocument) || window.document : undefined;
+    rootDocument.addEventListener('mouseup', onUpdatingDone);
+    rootDocument.addEventListener('touchend', onUpdatingDone);
+    return () => {
+      rootDocument.removeEventListener('mouseup', onUpdatingDone);
+      rootDocument.removeEventListener('touchend', onUpdatingDone);
     };
-    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: l('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: l('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: l('Quality') }))), end: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', priority: 'secondary' }, { children: !quality ? l('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: l('Original') }))), onClick: () => quality ? onQuality(null) : undefined, selected: !quality }, itemProps), 'original'));
-        }
-        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 ? l('Normal') : option }))), onClick: () => onPlaybackSpeed(option), selected: playbackSpeed === option }, itemProps), option));
-            });
-        }
-        return items;
+  }, []);
+  _react.default.useEffect(() => {
+    // init
+    init();
+  }, [src]);
+  const durationToValue = item => {
+    let value = '';
+    const separator = ':';
+    if (item.hour) value += `${(0, _utils.getLeadingZerosNumber)(item.hour, {
+      leadingZeros: 0
+    })}`;
+    if (item.minute) {
+      if (value) value += separator;
+      value += `${(0, _utils.getLeadingZerosNumber)(item.minute, {
+        leadingZeros: 0
+      })}`;
+    } else {
+      if (value) value += separator;
+      value += '0';
+    }
+    if (item.second) {
+      if (value) value += separator;
+      value += `${(0, _utils.getLeadingZerosNumber)(item.second, {
+        leadingZeros: 1
+      })}`;
+    } else {
+      if (value) value += separator;
+      value += '00';
+    }
+    return value;
+  };
+  const onQuality = _react.default.useCallback(version => {
+    setQuality(version);
+    setOpenMenu(null);
+  }, []);
+  const onSettingsMenuClose = _react.default.useCallback(() => {
+    setOpenMenu(null);
+  }, []);
+  const getSettingsMenuItems = () => {
+    const itemProps = {
+      button: true,
+      startAlign: 'center',
+      endAlign: 'center',
+      size: 'small',
+      className: 'onesy-videoPlayer-option'
     };
-    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);
-    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)('AudioPlayer', theme) && [
-                'onesy-AudioPlayer-root',
-                `onesy-AudioPlayer-size-${size}`
-            ],
-            className,
-            classes.root,
-            classes[`size_${size}`]
-        ]) }, 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
-            ]) }, { children: [start, (0, jsx_runtime_1.jsxs)(Surface, Object.assign({ ref: refs.controls, gap: 0, fullWidth: true, tonal: tonal, color: color, Component: Line, className: (0, style_react_1.classNames)([
-                        classes.controls,
-                        classes[`controls_size_${size}`]
-                    ]) }, { 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 }, { children: [startButtons, (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'space-between', fullWidth: true, flexNo: 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: true, onClose: onSettingsMenuClose, className: 'onesy-videoPlayer', includeParentQueries: ['.onesy-videoPlayer'] }, SettingsMenuProps, { ListProps: {
-                                                        className: (0, style_react_1.classNames)([
-                                                            (_a = SettingsMenuProps === null || SettingsMenuProps === void 0 ? void 0 : SettingsMenuProps.ListProps) === null || _a === void 0 ? void 0 : _a.className,
-                                                            classes.menuSettings
-                                                        ]),
-                                                        size: 'small'
-                                                    } }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({}, iconButtonProps, SettingsButtonProps, { children: (0, jsx_runtime_1.jsx)(IconSettings, {}) })) }))), endButtonsEnd] }))] })), endButtons] })), endControls] })), end] })) })));
+    const items = [];
+    if (openMenu) {
+      items.push(/*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
+        key: "back",
+        start: /*#__PURE__*/_react.default.createElement(IconBack, {
+          size: "very small"
+        }),
+        primary: /*#__PURE__*/_react.default.createElement(Type, {
+          version: "b3"
+        }, l('Back')),
+        onClick: () => setOpenMenu(null)
+      }, itemProps)));
+    }
+    if (!openMenu) {
+      var _quality$meta3;
+      if (playbackSpeed_) items.push(/*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
+        key: "playbackSpeed",
+        start: /*#__PURE__*/_react.default.createElement(IconPlaybackSpeed, {
+          size: "small"
+        }),
+        primary: /*#__PURE__*/_react.default.createElement(Type, {
+          version: "b3"
+        }, l('Playback speed')),
+        end: /*#__PURE__*/_react.default.createElement(Type, {
+          version: "b3",
+          priority: "secondary"
+        }, playbackSpeed === 1 ? 'Normal' : playbackSpeed),
+        onClick: () => setOpenMenu('playbackSpeed')
+      }, itemProps)));
+      if (quality_) items.push(/*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
+        key: "quality",
+        start: /*#__PURE__*/_react.default.createElement(IconQuality, {
+          size: "small"
+        }),
+        primary: /*#__PURE__*/_react.default.createElement(Type, {
+          version: "b3"
+        }, l('Quality')),
+        end: /*#__PURE__*/_react.default.createElement(Type, {
+          version: "b3",
+          priority: "secondary"
+        }, !quality ? l('Original') : `${quality === null || quality === void 0 || (_quality$meta3 = quality.meta) === null || _quality$meta3 === void 0 ? void 0 : _quality$meta3.resolution}p`),
+        onClick: () => setOpenMenu('quality')
+      }, itemProps)));
+    } else if (openMenu === 'quality') {
+      items.push(/*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
+        key: "original",
+        primary: /*#__PURE__*/_react.default.createElement(Type, {
+          version: "b3"
+        }, l('Original')),
+        onClick: () => quality ? onQuality(null) : undefined,
+        selected: !quality
+      }, 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.default.createElement(ListItem, (0, _extends2.default)({
+          key: option,
+          primary: /*#__PURE__*/_react.default.createElement(Type, {
+            version: "b3"
+          }, option === 1 ? l('Normal') : option),
+          onClick: () => onPlaybackSpeed(option),
+          selected: playbackSpeed === option
+        }, itemProps)));
+      });
+    }
+    return items;
+  };
+  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);
+  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.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, _styleReact.classNames)([(0, _utils2.staticClassName)('AudioPlayer', theme) && ['onesy-AudioPlayer-root', `onesy-AudioPlayer-size-${size}`], className, classes.root, classes[`size_${size}`]])
+  }, other), /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 0,
+    direction: "column",
+    align: "unset",
+    justify: "unset",
+    fullWidth: true,
+    className: (0, _styleReact.classNames)([classes.wrapper])
+  }, start, /*#__PURE__*/_react.default.createElement(Surface, {
+    ref: refs.controls,
+    gap: 0,
+    fullWidth: true,
+    tonal: tonal,
+    color: color,
+    Component: Line,
+    className: (0, _styleReact.classNames)([classes.controls, classes[`controls_size_${size}`]])
+  }, startControls, /*#__PURE__*/_react.default.createElement(Line, {
+    fullWidth: true,
+    className: classes.wrapperTimeline
+  }, /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({
+    value: time,
+    onChange: onTimeChange,
+    min: 0,
+    max: duration,
+    onMouseDown: onUpdating,
+    onTouchStart: onUpdating,
+    onMouseUp: onUpdatingDone,
+    onToucheEnd: onUpdatingDone
+  }, sliderProps, TimelineProps, {
+    className: (0, _styleReact.classNames)([sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.className, TimelineProps === null || TimelineProps === void 0 ? void 0 : TimelineProps.className, classes.timeline])
+  }))), /*#__PURE__*/_react.default.createElement(Line, {
+    direction: "row",
+    align: "center",
+    fullWidth: true,
+    onMouseLeave: onMouseLeave,
+    className: classes.bottomControls
+  }, startButtons, /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1,
+    direction: "row",
+    align: "center",
+    justify: "space-between",
+    fullWidth: true,
+    flexNo: true
+  }, /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1.5,
+    direction: "row",
+    align: "center",
+    flexNo: true
+  }, /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 0,
+    direction: "row",
+    align: "center"
+  }, /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onClick: play ? onPause : onPlay
+  }, iconButtonProps, PlayButtonProps), play ? /*#__PURE__*/_react.default.createElement(IconPause, null) : /*#__PURE__*/_react.default.createElement(IconPlay, null)), backward && /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onClick: onBackward
+  }, iconButtonProps, BackwardButtonProps), /*#__PURE__*/_react.default.createElement(IconBackward, {
+    style: {
+      transform: 'rotateY(180deg)'
+    }
+  })), forward && /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onClick: onForward
+  }, iconButtonProps, ForwardButtonProps), /*#__PURE__*/_react.default.createElement(IconForward, null)), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onClick: muted ? onUnmute : onMute,
+    onMouseEnter: onMouseEnter
+  }, iconButtonProps, VolumeButtonProps), !muted ? /*#__PURE__*/_react.default.createElement(IconVolume, null) : /*#__PURE__*/_react.default.createElement(IconVolumeMuted, null)), /*#__PURE__*/_react.default.createElement(Expand, {
+    in: volumeVisible,
+    parent: refs.controls.current,
+    orientation: "horizontal",
+    className: classes.volumeExpand
+  }, /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({
+    value: volume,
+    onChange: onVolumeChange,
+    min: 0,
+    max: 1,
+    orientation: "horizontal"
+  }, sliderProps, {
+    size: ['small', 'regular'].includes(size) ? 'small' : 'regular'
+  }, VolumeProps, {
+    className: (0, _styleReact.classNames)([sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.className, VolumeProps === null || VolumeProps === void 0 ? void 0 : VolumeProps.className, classes.volume])
+  })))), /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 0.5,
+    direction: "row",
+    align: "center",
+    flexNo: true,
+    className: (0, _styleReact.classNames)(['onesy-Audio-time', classes.time])
+  }, /*#__PURE__*/_react.default.createElement(Type, typeProps, durationToValue((0, _date.duration)(time * 1000, false, true))), /*#__PURE__*/_react.default.createElement(Type, typeProps, "/"), /*#__PURE__*/_react.default.createElement(Type, typeProps, durationToValue((0, _date.duration)(duration * 1000, false, true))))), /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 0.5,
+    direction: "row",
+    align: "center",
+    className: classes.endControls
+  }, startButtonsEnd, settings && /*#__PURE__*/_react.default.createElement(Menu, (0, _extends2.default)({
+    menuItems: getSettingsMenuItems(),
+    position: "top",
+    switch: false,
+    portal: true,
+    onClose: onSettingsMenuClose,
+    className: "onesy-videoPlayer",
+    includeParentQueries: ['.onesy-videoPlayer']
+  }, SettingsMenuProps, {
+    ListProps: {
+      className: (0, _styleReact.classNames)([SettingsMenuProps === null || SettingsMenuProps === void 0 || (_SettingsMenuProps$Li = SettingsMenuProps.ListProps) === null || _SettingsMenuProps$Li === void 0 ? void 0 : _SettingsMenuProps$Li.className, classes.menuSettings]),
+      size: 'small'
+    }
+  }), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({}, iconButtonProps, SettingsButtonProps), /*#__PURE__*/_react.default.createElement(IconSettings, null))), endButtonsEnd)), endButtons), endControls), end));
 });
 AudioPlayer.displayName = 'onesy-AudioPlayer';
-exports.default = AudioPlayer;
+var _default = exports.default = AudioPlayer;