@onesy/ui-react 1.0.0

package/esm/AudioPlayer/AudioPlayer.js

@@ -0,0 +1,678 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["name", "src", "meta", "versions", "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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { clamp, getLeadingZerosNumber, is, isEnvironment } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import { duration as durationMethod } from '@onesy/date';
+import IconMaterialPlayArrow from '@amaui/icons-material-rounded-react/IconMaterialPlayArrowW100';
+import IconMaterialPause from '@amaui/icons-material-rounded-react/IconMaterialPauseW100';
+import IconMaterialForwardMedia from '@amaui/icons-material-rounded-react/IconMaterialForwardMediaW100';
+import IconMaterialVolumeDownAlt from '@amaui/icons-material-rounded-react/IconMaterialVolumeDownAltW100';
+import IconMaterialVolumeOff from '@amaui/icons-material-rounded-react/IconMaterialVolumeOffW100';
+import IconMaterialSettings from '@amaui/icons-material-rounded-react/IconMaterialSettingsW100';
+import IconMaterialTune from '@amaui/icons-material-rounded-react/IconMaterialTuneW100';
+import IconMaterialSlowMotionVideo from '@amaui/icons-material-rounded-react/IconMaterialSlowMotionVideoW100';
+import IconMaterialArrowBackIos from '@amaui/icons-material-rounded-react/IconMaterialArrowBackIosW100';
+import LineElement from '../Line';
+import SurfaceElement from '../Surface';
+import SliderElement from '../Slider';
+import IconButtonElement from '../IconButton';
+import ExpandElement from '../Expand';
+import TypeElement from '../Type';
+import MenuElement from '../Menu';
+import ListItemElement from '../ListItem';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    position: 'relative',
+    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'
+    },
+    '&::-webkit-scrollbar': {
+      display: 'none'
+    }
+  }
+}), {
+  name: 'onesy-AudioPlayer'
+});
+const AudioPlayer = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyAudioPlayer?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const Slider = React.useMemo(() => theme?.elements?.Slider || SliderElement, [theme]);
+  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
+  const Expand = React.useMemo(() => theme?.elements?.Expand || ExpandElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const Menu = React.useMemo(() => theme?.elements?.Menu || MenuElement, [theme]);
+  const ListItem = React.useMemo(() => theme?.elements?.ListItem || ListItemElement, [theme]);
+  const {
+      name,
+      src,
+      meta,
+      versions,
+      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 = IconMaterialPlayArrow,
+      IconPause = IconMaterialPause,
+      IconForward = IconMaterialForwardMedia,
+      IconBackward = IconMaterialForwardMedia,
+      IconVolume = IconMaterialVolumeDownAlt,
+      IconVolumeMuted = IconMaterialVolumeOff,
+      IconBack = IconMaterialArrowBackIos,
+      IconSettings = IconMaterialSettings,
+      IconQuality = IconMaterialTune,
+      IconPlaybackSpeed = IconMaterialSlowMotionVideo,
+      PlayButtonProps,
+      ForwardButtonProps,
+      BackwardButtonProps,
+      VolumeButtonProps,
+      IconButtonProps,
+      TypeProps,
+      TimelineProps,
+      VolumeProps,
+      SliderProps,
+      SettingsButtonProps,
+      SettingsMenuProps,
+      QualityButtonProps,
+      className,
+      Component
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [loaded, setLoaded] = React.useState(false);
+  const [duration, setDuration] = React.useState(is('number', meta?.duration) ? meta.duration : undefined);
+  const [time, setTime] = React.useState(0);
+  const [play, setPlay] = React.useState(false);
+  const [muted, setMuted] = React.useState(false);
+  const [volume, setVolume] = React.useState(1);
+  const [volumeVisible, setVolumeVisible] = React.useState(false);
+  const [updating, setUpdating] = React.useState(false);
+  const [quality, setQuality] = React.useState();
+  const [playbackSpeed, setPlaybackSpeed] = React.useState(1);
+  const [openMenu, setOpenMenu] = React.useState();
+  const refs = {
+    root: React.useRef(undefined),
+    audio: React.useRef(),
+    controls: React.useRef(undefined),
+    duration: React.useRef(undefined),
+    time: React.useRef(undefined),
+    play: React.useRef(undefined),
+    updating: React.useRef(undefined),
+    onPlay: React.useRef(undefined),
+    onPause: React.useRef(undefined),
+    onTimeChange: React.useRef(undefined),
+    onBackward: React.useRef(undefined),
+    onForward: React.useRef(undefined),
+    onStop: React.useRef(undefined),
+    startMediaSession: React.useRef(undefined),
+    updateMediaSession: React.useRef(undefined),
+    startMediaSessionOnPlay: React.useRef(undefined)
+  };
+  refs.duration.current = duration;
+  refs.time.current = time;
+  refs.play.current = play;
+  refs.updating.current = updating;
+  refs.startMediaSessionOnPlay.current = startMediaSessionOnPlay;
+  const startMediaSession = React.useCallback(() => {
+    if ('mediaSession' in navigator) {
+      window.navigator.mediaSession.metadata = new MediaMetadata({
+        title: name
+      });
+      const methods = [{
+        name: 'play',
+        method: refs.onPlay.current
+      }, {
+        name: 'pause',
+        method: refs.onPause.current
+      }, {
+        name: 'previoustrack',
+        method: () => {}
+      }, {
+        name: 'nexttrack',
+        method: () => {}
+      }, {
+        name: 'seekbackward',
+        method: refs.onBackward.current
+      }, {
+        name: 'seekforward',
+        method: refs.onForward.current
+      }, {
+        name: 'seekto',
+        method: details => refs.onTimeChange.current(details.seekTime)
+      }, {
+        name: 'stop',
+        method: refs.onStop.current
+      }];
+      for (const method of methods) {
+        try {
+          window.navigator.mediaSession.setActionHandler(method.name, method.method);
+        } catch (error) {
+          console.log(`MediaSession action ${method.name}, is not supported`);
+        }
+      }
+    }
+  }, [name]);
+  const updateMediaSession = React.useCallback(() => {
+    if ('mediaSession' in navigator) {
+      window.navigator.mediaSession.setPositionState({
+        duration: refs.duration.current,
+        playbackRate: 1,
+        position: clamp(refs.time.current, 0, refs.duration.current)
+      });
+    }
+  }, [name]);
+  refs.startMediaSession.current = startMediaSession;
+  refs.updateMediaSession.current = updateMediaSession;
+  const durationTime = duration_ || meta?.duration;
+  const onVolumeChange = React.useCallback(value => {
+    setVolume(value);
+    refs.audio.current.volume = value;
+  }, []);
+  const onTimeChange = React.useCallback(value => {
+    setTime(value);
+    refs.audio.current.currentTime = value;
+
+    // update MediaSession
+    refs.updateMediaSession.current();
+  }, []);
+  const onPlaybackSpeed = React.useCallback(value_ => {
+    const value = clamp(value_, 0, 2);
+    setPlaybackSpeed(value);
+    setOpenMenu(null);
+    refs.audio.current.playbackRate = value;
+  }, []);
+  const onForward = React.useCallback(details => {
+    const part = refs.duration.current * 0.1;
+    const toMove = clamp(details?.seekOffset || part, 1, refs.duration.current);
+    const value = clamp(refs.time.current + toMove, 0, refs.duration.current);
+    refs.onTimeChange.current(value);
+  }, []);
+  const onBackward = React.useCallback(details => {
+    const part = refs.duration.current * 0.1;
+    const toMove = clamp(details?.seekOffset || part, 1, refs.duration.current);
+    const value = clamp(refs.time.current - toMove, 0, refs.duration.current);
+    refs.onTimeChange.current(value);
+  }, []);
+  const onPlay = React.useCallback(() => {
+    try {
+      setPlay(true);
+      refs.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.useCallback(() => {
+    setPlay(false);
+    refs.audio.current.pause();
+  }, []);
+  const onStop = React.useCallback(() => {
+    setPlay(false);
+    refs.audio.current.pause();
+    refs.audio.current.currentTime = 0;
+  }, []);
+  const onMute = React.useCallback(() => {
+    setMuted(true);
+    refs.audio.current.muted = true;
+  }, []);
+  const onUnmute = React.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.useCallback(() => {
+    setLoaded(false);
+    const rootDocument = isEnvironment('browser') ? 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 (!is('number', durationTime) && 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 (is('number', durationTime)) {
+      if (refs.duration.current === undefined) setDuration(durationTime);
+      setLoaded(true);
+    }
+    audio.src = src;
+  }, [src, durationTime, startMediaSession]);
+  React.useEffect(() => {
+    if (loaded) {
+      let urlNew = src;
+      if (quality) {
+        if (quality?.meta?.resolution) urlNew += `?version=${quality?.meta?.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.useCallback(() => {
+    setVolumeVisible(true);
+  }, []);
+  const onMouseLeave = React.useCallback(() => {
+    setVolumeVisible(false);
+  }, []);
+  const onUpdating = React.useCallback(() => {
+    setUpdating(refs.play.current ? 'play' : true);
+    if (refs.play.current) onPause();
+  }, [onPause]);
+  const onUpdatingDone = React.useCallback(() => {
+    const updatingPrevious = refs.updating.current;
+    setUpdating(false);
+    if (updatingPrevious === 'play') onPlay();
+  }, [onPlay]);
+  React.useEffect(() => {
+    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+    rootDocument.addEventListener('mouseup', onUpdatingDone);
+    rootDocument.addEventListener('touchend', onUpdatingDone);
+    return () => {
+      rootDocument.removeEventListener('mouseup', onUpdatingDone);
+      rootDocument.removeEventListener('touchend', onUpdatingDone);
+    };
+  }, []);
+  React.useEffect(() => {
+    // init
+    init();
+  }, [src]);
+  const durationToValue = item => {
+    let value = '';
+    const separator = ':';
+    if (item.hour) value += `${getLeadingZerosNumber(item.hour, {
+      leadingZeros: 0
+    })}`;
+    if (item.minute) {
+      if (value) value += separator;
+      value += `${getLeadingZerosNumber(item.minute, {
+        leadingZeros: 0
+      })}`;
+    } else {
+      if (value) value += separator;
+      value += '0';
+    }
+    if (item.second) {
+      if (value) value += separator;
+      value += `${getLeadingZerosNumber(item.second, {
+        leadingZeros: 1
+      })}`;
+    } else {
+      if (value) value += separator;
+      value += '00';
+    }
+    return value;
+  };
+  const onQuality = React.useCallback(version => {
+    setQuality(version);
+    setOpenMenu(null);
+  }, []);
+  const onSettingsMenuClose = React.useCallback(() => {
+    setOpenMenu(null);
+  }, []);
+  const getSettingsMenuItems = () => {
+    const itemProps = {
+      button: true,
+      startAlign: 'center',
+      endAlign: 'center',
+      size: 'small',
+      className: 'onesy-videoPlayer-option'
+    };
+    const items = [];
+    if (openMenu) {
+      items.push(/*#__PURE__*/React.createElement(ListItem, _extends({
+        key: "back",
+        start: /*#__PURE__*/React.createElement(IconBack, {
+          size: "very small"
+        }),
+        primary: /*#__PURE__*/React.createElement(Type, {
+          version: "b3"
+        }, "Back"),
+        onClick: () => setOpenMenu(null)
+      }, itemProps)));
+    }
+    if (!openMenu) {
+      if (playbackSpeed_) items.push(/*#__PURE__*/React.createElement(ListItem, _extends({
+        key: "playbackSpeed",
+        start: /*#__PURE__*/React.createElement(IconPlaybackSpeed, {
+          size: "small"
+        }),
+        primary: /*#__PURE__*/React.createElement(Type, {
+          version: "b3"
+        }, "Playback speed"),
+        end: /*#__PURE__*/React.createElement(Type, {
+          version: "b3",
+          priority: "secondary"
+        }, playbackSpeed === 1 ? 'Normal' : playbackSpeed),
+        onClick: () => setOpenMenu('playbackSpeed')
+      }, itemProps)));
+      if (quality_) items.push(/*#__PURE__*/React.createElement(ListItem, _extends({
+        key: "quality",
+        start: /*#__PURE__*/React.createElement(IconQuality, {
+          size: "small"
+        }),
+        primary: /*#__PURE__*/React.createElement(Type, {
+          version: "b3"
+        }, "Quality"),
+        end: /*#__PURE__*/React.createElement(Type, {
+          version: "b3",
+          priority: "secondary"
+        }, !quality ? 'Original' : `${quality?.meta?.resolution}p`),
+        onClick: () => setOpenMenu('quality')
+      }, itemProps)));
+    } else if (openMenu === 'quality') {
+      items.push(/*#__PURE__*/React.createElement(ListItem, _extends({
+        key: "original",
+        primary: /*#__PURE__*/React.createElement(Type, {
+          version: "b3"
+        }, "Original"),
+        onClick: () => quality ? onQuality(null) : undefined,
+        selected: !quality
+      }, itemProps)));
+
+      // versions?.forEach((version: any, index: number) => {
+      //   const isSelected = quality?.id === version?.id;
+
+      //   items.push(
+      //     <ListItem
+      //       key={index}
+
+      //       primary={(
+      //         <Type
+      //           version='b3'
+      //         >
+      //           {version?.meta?.resolution}p
+      //         </Type>
+      //       )}
+
+      //       onClick={() => !isSelected ? onQuality(version) : undefined}
+
+      //       selected={isSelected}
+
+      //       {...itemProps}
+      //     />
+      //   );
+      // });
+    } else if (openMenu === 'playbackSpeed') {
+      const options = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+      options.forEach(option => {
+        items.push(/*#__PURE__*/React.createElement(ListItem, _extends({
+          key: option,
+          primary: /*#__PURE__*/React.createElement(Type, {
+            version: "b3"
+          }, option === 1 ? 'Normal' : option),
+          onClick: () => onPlaybackSpeed(option),
+          selected: playbackSpeed === option
+        }, itemProps)));
+      });
+    }
+    return items;
+  };
+  const 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.createElement(Line, _extends({
+    ref: item => {
+      if (ref) {
+        if (is('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    gap: 1,
+    direction: "column",
+    align: "unset",
+    justify: "unset",
+    fullWidth: true,
+    Component: Component,
+    className: classNames([staticClassName('AudioPlayer', theme) && ['onesy-AudioPlayer-root', `onesy-AudioPlayer-size-${size}`], className, classes.root, classes[`size_${size}`]])
+  }, other), /*#__PURE__*/React.createElement(Line, {
+    gap: 0,
+    direction: "column",
+    align: "unset",
+    justify: "unset",
+    fullWidth: true,
+    className: classNames([classes.wrapper])
+  }, start, /*#__PURE__*/React.createElement(Surface, {
+    ref: refs.controls,
+    gap: 0,
+    fullWidth: true,
+    tonal: tonal,
+    color: color,
+    Component: Line,
+    className: classNames([classes.controls, classes[`controls_size_${size}`]])
+  }, startControls, /*#__PURE__*/React.createElement(Line, {
+    fullWidth: true,
+    className: classes.wrapperTimeline
+  }, /*#__PURE__*/React.createElement(Slider, _extends({
+    value: time,
+    onChange: onTimeChange,
+    min: 0,
+    max: duration,
+    onMouseDown: onUpdating,
+    onTouchStart: onUpdating,
+    onMouseUp: onUpdatingDone,
+    onToucheEnd: onUpdatingDone
+  }, sliderProps, TimelineProps, {
+    className: classNames([sliderProps?.className, TimelineProps?.className, classes.timeline])
+  }))), /*#__PURE__*/React.createElement(Line, {
+    direction: "row",
+    align: "center",
+    fullWidth: true,
+    onMouseLeave: onMouseLeave,
+    className: classes.bottomControls
+  }, startButtons, /*#__PURE__*/React.createElement(Line, {
+    gap: 1,
+    direction: "row",
+    align: "center",
+    justify: "space-between",
+    fullWidth: true,
+    flexNo: true
+  }, /*#__PURE__*/React.createElement(Line, {
+    gap: 1.5,
+    direction: "row",
+    align: "center",
+    flexNo: true
+  }, /*#__PURE__*/React.createElement(Line, {
+    gap: 0,
+    direction: "row",
+    align: "center"
+  }, /*#__PURE__*/React.createElement(IconButton, _extends({
+    onClick: play ? onPause : onPlay
+  }, iconButtonProps, PlayButtonProps), play ? /*#__PURE__*/React.createElement(IconPause, null) : /*#__PURE__*/React.createElement(IconPlay, null)), backward && /*#__PURE__*/React.createElement(IconButton, _extends({
+    onClick: onBackward
+  }, iconButtonProps, BackwardButtonProps), /*#__PURE__*/React.createElement(IconBackward, {
+    style: {
+      transform: 'rotateY(180deg)'
+    }
+  })), forward && /*#__PURE__*/React.createElement(IconButton, _extends({
+    onClick: onForward
+  }, iconButtonProps, ForwardButtonProps), /*#__PURE__*/React.createElement(IconForward, null)), /*#__PURE__*/React.createElement(IconButton, _extends({
+    onClick: muted ? onUnmute : onMute,
+    onMouseEnter: onMouseEnter
+  }, iconButtonProps, VolumeButtonProps), !muted ? /*#__PURE__*/React.createElement(IconVolume, null) : /*#__PURE__*/React.createElement(IconVolumeMuted, null)), /*#__PURE__*/React.createElement(Expand, {
+    in: volumeVisible,
+    parent: refs.controls.current,
+    orientation: "horizontal",
+    className: classes.volumeExpand
+  }, /*#__PURE__*/React.createElement(Slider, _extends({
+    value: volume,
+    onChange: onVolumeChange,
+    min: 0,
+    max: 1,
+    orientation: "horizontal"
+  }, sliderProps, {
+    size: ['small', 'regular'].includes(size) ? 'small' : 'regular'
+  }, VolumeProps, {
+    className: classNames([sliderProps?.className, VolumeProps?.className, classes.volume])
+  })))), /*#__PURE__*/React.createElement(Line, {
+    gap: 0.5,
+    direction: "row",
+    align: "center",
+    flexNo: true,
+    className: classNames(['onesy-Audio-time', classes.time])
+  }, /*#__PURE__*/React.createElement(Type, typeProps, durationToValue(durationMethod(time * 1000, false, true))), /*#__PURE__*/React.createElement(Type, typeProps, "/"), /*#__PURE__*/React.createElement(Type, typeProps, durationToValue(durationMethod(duration * 1000, false, true))))), /*#__PURE__*/React.createElement(Line, {
+    gap: 0.5,
+    direction: "row",
+    align: "center",
+    className: classes.endControls
+  }, startButtonsEnd, settings && /*#__PURE__*/React.createElement(Menu, _extends({
+    menuItems: getSettingsMenuItems(),
+    position: "top",
+    switch: false,
+    portal: true,
+    onClose: onSettingsMenuClose,
+    className: "onesy-videoPlayer",
+    includeParentQueries: ['.onesy-videoPlayer']
+  }, SettingsMenuProps, {
+    ListProps: {
+      className: classNames([SettingsMenuProps?.ListProps?.className, classes.menuSettings]),
+      size: 'small'
+    }
+  }), /*#__PURE__*/React.createElement(IconButton, _extends({}, iconButtonProps, SettingsButtonProps), /*#__PURE__*/React.createElement(IconSettings, null))), endButtonsEnd)), endButtons), endControls), end));
+});
+AudioPlayer.displayName = 'onesy-AudioPlayer';
+export default AudioPlayer;

package/esm/AudioPlayer/index.js

@@ -0,0 +1 @@
+export { default } from './AudioPlayer';