@onesy/ui-react
Version:
UI for React
699 lines (691 loc) • 30.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
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");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "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'
},
'&::-webkit-scrollbar': {
display: 'none'
}
}
}), {
name: 'onesy-AudioPlayer'
});
const AudioPlayer = props_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _SettingsMenuProps$Li;
const theme = (0, _styleReact.useOnesyTheme)();
const l = theme.l;
const props = _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_);
const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
const Surface = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
const Slider = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Slider) || _Slider.default;
const IconButton = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.IconButton) || _IconButton.default;
const Expand = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Expand) || _Expand.default;
const Type = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Type) || _Type.default;
const Menu = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Menu) || _Menu.default;
const ListItem = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.ListItem) || _ListItem.default;
const {
ref,
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 = () => {
if ('mediaSession' in navigator) {
window.navigator.mediaSession.metadata = new MediaMetadata({
title: name
});
const methods = [{
name: 'play',
method: refs.onPlay.current
}, {
name: 'pause',
method: refs.onPause.current
}, {
name: 'previoustrack',
method: () => {}
}, {
name: 'nexttrack',
method: () => {}
}, {
name: 'seekbackward',
method: refs.onBackward.current
}, {
name: 'seekforward',
method: refs.onForward.current
}, {
name: 'seekto',
method: details => refs.onTimeChange.current(details.seekTime)
}, {
name: 'stop',
method: refs.onStop.current
}];
for (const method of methods) {
try {
window.navigator.mediaSession.setActionHandler(method.name, method.method);
} catch (error) {
console.log(`MediaSession action ${method.name}, is not supported`);
}
}
}
};
const updateMediaSession = () => {
if ('mediaSession' in navigator) {
window.navigator.mediaSession.setPositionState({
duration: refs.duration.current,
playbackRate: 1,
position: (0, _utils.clamp)(refs.time.current, 0, refs.duration.current)
});
}
};
refs.startMediaSession.current = startMediaSession;
refs.updateMediaSession.current = updateMediaSession;
const durationTime = duration_ || (meta === null || meta === void 0 ? void 0 : meta.duration);
const onVolumeChange = value => {
setVolume(value);
refs.audio.current.volume = value;
};
const onTimeChange = value_0 => {
setTime(value_0);
refs.audio.current.currentTime = value_0;
// update MediaSession
refs.updateMediaSession.current();
};
const onPlaybackSpeed = value_ => {
const value_1 = (0, _utils.clamp)(value_, 0, 2);
setPlaybackSpeed(value_1);
setOpenMenu(null);
refs.audio.current.playbackRate = value_1;
};
const onForward = details_0 => {
const part = refs.duration.current * 0.1;
const toMove = (0, _utils.clamp)((details_0 === null || details_0 === void 0 ? void 0 : details_0.seekOffset) || part, 1, refs.duration.current);
const value_2 = (0, _utils.clamp)(refs.time.current + toMove, 0, refs.duration.current);
refs.onTimeChange.current(value_2);
};
const onBackward = details_1 => {
const part_0 = refs.duration.current * 0.1;
const toMove_0 = (0, _utils.clamp)((details_1 === null || details_1 === void 0 ? void 0 : details_1.seekOffset) || part_0, 1, refs.duration.current);
const value_3 = (0, _utils.clamp)(refs.time.current - toMove_0, 0, refs.duration.current);
refs.onTimeChange.current(value_3);
};
const onPlay = () => {
try {
setPlay(true);
refs.audio.current.play();
// start MediaSession
if (refs.startMediaSessionOnPlay.current) refs.startMediaSession.current();
// update MediaSession
refs.updateMediaSession.current();
} catch (error_0) {
console.error(`AudioPlayer`, error_0);
}
};
const onPause = () => {
setPlay(false);
refs.audio.current.pause();
};
const onStop = () => {
setPlay(false);
refs.audio.current.pause();
refs.audio.current.currentTime = 0;
};
const onMute = () => {
setMuted(true);
refs.audio.current.muted = true;
};
const onUnmute = () => {
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 = () => {
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_4 = audio.duration;
if (!(0, _utils.is)('number', durationTime) && (0, _utils.is)('number', value_4)) {
if (refs.duration.current === undefined) setDuration(value_4);
setLoaded(true);
}
});
audio.addEventListener('ended', () => {
refs.onStop.current();
});
audio.addEventListener('timeupdate', () => {
const value_5 = audio.currentTime;
if (!refs.updating.current && refs.time.current !== value_5) {
setTime(value_5);
// update MediaSession
refs.updateMediaSession.current();
}
});
audio.addEventListener('ratechange', () => {
const value_6 = audio.playbackRate;
setPlaybackSpeed(value_6);
});
// start MediaSession
startMediaSession();
if ((0, _utils.is)('number', durationTime)) {
if (refs.duration.current === undefined) setDuration(durationTime);
setLoaded(true);
}
audio.src = src;
};
_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 = () => {
setVolumeVisible(true);
};
const onMouseLeave = () => {
setVolumeVisible(false);
};
const onUpdating = () => {
setUpdating(refs.play.current ? 'play' : true);
if (refs.play.current) onPause();
};
const onUpdatingDone = () => {
const updatingPrevious = refs.updating.current;
setUpdating(false);
if (updatingPrevious === 'play') onPlay();
};
_react.default.useEffect(() => {
var _refs$root$current2;
const rootDocument_0 = (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_0.addEventListener('mouseup', onUpdatingDone);
rootDocument_0.addEventListener('touchend', onUpdatingDone);
return () => {
rootDocument_0.removeEventListener('mouseup', onUpdatingDone);
rootDocument_0.removeEventListener('touchend', onUpdatingDone);
};
}, []);
_react.default.useEffect(() => {
// init
init();
}, [src]);
const durationToValue = item => {
let value_7 = '';
const separator = ':';
if (item.hour) value_7 += `${(0, _utils.getLeadingZerosNumber)(item.hour, {
leadingZeros: 0
})}`;
if (item.minute) {
if (value_7) value_7 += separator;
value_7 += `${(0, _utils.getLeadingZerosNumber)(item.minute, {
leadingZeros: 0
})}`;
} else {
if (value_7) value_7 += separator;
value_7 += '0';
}
if (item.second) {
if (value_7) value_7 += separator;
value_7 += `${(0, _utils.getLeadingZerosNumber)(item.second, {
leadingZeros: 1
})}`;
} else {
if (value_7) value_7 += separator;
value_7 += '00';
}
return value_7;
};
const onQuality = version => {
setQuality(version);
setOpenMenu(null);
};
const onSettingsMenuClose = () => {
setOpenMenu(null);
};
const getSettingsMenuItems = () => {
const itemProps = {
button: true,
startAlign: 'center',
endAlign: 'center',
size: 'small',
className: 'onesy-videoPlayer-option'
};
const items = [];
if (openMenu) {
items.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, _objectSpread({
start: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBack, {
size: "very small"
}),
primary: /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b3",
children: l('Back')
}),
onClick: () => setOpenMenu(null)
}, itemProps), 'back'));
}
if (!openMenu) {
var _quality$meta3;
if (playbackSpeed_) items.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, _objectSpread({
start: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconPlaybackSpeed, {
size: "small"
}),
primary: /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b3",
children: l('Playback speed')
}),
end: /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b3",
priority: "secondary",
children: playbackSpeed === 1 ? 'Normal' : playbackSpeed
}),
onClick: () => setOpenMenu('playbackSpeed')
}, itemProps), 'playbackSpeed'));
if (quality_) items.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, _objectSpread({
start: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconQuality, {
size: "small"
}),
primary: /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b3",
children: l('Quality')
}),
end: /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b3",
priority: "secondary",
children: !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), 'quality'));
} else if (openMenu === 'quality') {
items.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, _objectSpread({
primary: /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
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(/*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, _objectSpread({
primary: /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b3",
children: option === 1 ? l('Normal') : option
}),
onClick: () => onPlaybackSpeed(option),
selected: playbackSpeed === option
}, itemProps), option));
});
}
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__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
ref: item_0 => {
if (ref) {
if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
}
refs.root.current = item_0;
},
gap: 1,
direction: "column",
align: "unset",
justify: "unset",
fullWidth: true,
Component: Component,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('AudioPlayer', theme) && ['onesy-AudioPlayer-root', `onesy-AudioPlayer-size-${size}`], className, classes.root, classes[`size_${size}`]])
}, other), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 0,
direction: "column",
align: "unset",
justify: "unset",
fullWidth: true,
className: (0, _styleReact.classNames)([classes.wrapper]),
children: [start, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, {
ref: refs.controls,
gap: 0,
fullWidth: true,
tonal: tonal,
color: color,
Component: Line,
className: (0, _styleReact.classNames)([classes.controls, classes[`controls_size_${size}`]]),
children: [startControls, /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
fullWidth: true,
className: classes.wrapperTimeline,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, _objectSpread(_objectSpread(_objectSpread({
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__*/(0, _jsxRuntime.jsxs)(Line, {
direction: "row",
align: "center",
fullWidth: true,
onMouseLeave: onMouseLeave,
className: classes.bottomControls,
children: [startButtons, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1,
direction: "row",
align: "center",
justify: "space-between",
fullWidth: true,
flexNo: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1.5,
direction: "row",
align: "center",
flexNo: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 0,
direction: "row",
align: "center",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread(_objectSpread({
onClick: play ? onPause : onPlay
}, iconButtonProps), PlayButtonProps), {}, {
children: play ? /*#__PURE__*/(0, _jsxRuntime.jsx)(IconPause, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(IconPlay, {})
})), backward && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread(_objectSpread({
onClick: onBackward
}, iconButtonProps), BackwardButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBackward, {
style: {
transform: 'rotateY(180deg)'
}
})
})), forward && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread(_objectSpread({
onClick: onForward
}, iconButtonProps), ForwardButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconForward, {})
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread(_objectSpread({
onClick: muted ? onUnmute : onMute,
onMouseEnter: onMouseEnter
}, iconButtonProps), VolumeButtonProps), {}, {
children: !muted ? /*#__PURE__*/(0, _jsxRuntime.jsx)(IconVolume, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(IconVolumeMuted, {})
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(Expand, {
in: volumeVisible,
parent: refs.controls.current,
orientation: "horizontal",
className: classes.volumeExpand,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, _objectSpread(_objectSpread(_objectSpread({
value: volume,
onChange: onVolumeChange,
min: 0,
max: 1,
orientation: "horizontal"
}, sliderProps), {}, {
size: ['small', 'regular'].includes(size) ? 'small' : 'regular'
}, VolumeProps), {}, {
className: (0, _styleReact.classNames)([sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.className, VolumeProps === null || VolumeProps === void 0 ? void 0 : VolumeProps.className, classes.volume])
}))
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 0.5,
direction: "row",
align: "center",
flexNo: true,
className: (0, _styleReact.classNames)(['onesy-Audio-time', classes.time]),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({}, typeProps), {}, {
children: durationToValue((0, _date.duration)(time * 1000, false, true))
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({}, typeProps), {}, {
children: "/"
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({}, typeProps), {}, {
children: durationToValue((0, _date.duration)(duration * 1000, false, true))
}))]
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 0.5,
direction: "row",
align: "center",
className: classes.endControls,
children: [startButtonsEnd, settings && /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu, _objectSpread(_objectSpread({
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'
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread(_objectSpread({}, iconButtonProps), SettingsButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconSettings, {})
}))
})), endButtonsEnd]
})]
}), endButtons]
}), endControls]
}), end]
})
}));
};
AudioPlayer.displayName = 'onesy-AudioPlayer';
var _default = exports.default = AudioPlayer;