@amaui/ui-react
Version:
UI for React
495 lines (494 loc) • 31 kB
JavaScript
"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("@amaui/utils");
const style_react_1 = require("@amaui/style-react");
const date_1 = require("@amaui/date");
const IconMaterialPlayArrowW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialPlayArrowW100"));
const IconMaterialPauseW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialPauseW100"));
const IconMaterialForwardMediaW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialForwardMediaW100"));
const IconMaterialVolumeDownAltW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialVolumeDownAltW100"));
const IconMaterialVolumeOffW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialVolumeOffW100"));
const IconMaterialSettingsW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialSettingsW100"));
const IconMaterialTuneW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialTuneW100"));
const IconMaterialSlowMotionVideoW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialSlowMotionVideoW100"));
const IconMaterialArrowBackIosW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialArrowBackIosW100"));
const Line_1 = __importDefault(require("../Line"));
const Surface_1 = __importDefault(require("../Surface"));
const Slider_1 = __importDefault(require("../Slider"));
const IconButton_1 = __importDefault(require("../IconButton"));
const Expand_1 = __importDefault(require("../Expand"));
const Type_1 = __importDefault(require("../Type"));
const Menu_1 = __importDefault(require("../Menu"));
const ListItem_1 = __importDefault(require("../ListItem"));
const utils_2 = require("../utils");
const useStyle = (0, style_react_1.style)(theme => ({
root: {
position: 'relative',
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: {
'&.amaui-Slider-root': {
height: '20px !important',
width: '100% !important',
margin: 'unset !important',
maxWidth: 'unset !important'
}
},
volume: {
flex: '1 1 auto',
'&.amaui-Slider-root': {
height: '24px !important',
width: '100vw !important',
maxWidth: '54px !important',
margin: 'unset !important',
borderRadius: '0px',
'& .amaui-Slider-rail': {
borderRadius: '0px'
},
'& .amaui-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: 'amaui-AudioPlayer' });
const AudioPlayer = react_1.default.forwardRef((props_, ref) => {
var _a;
const theme = (0, style_react_1.useAmauiTheme)();
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.amauiAudioPlayer) === 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(undefined),
audio: react_1.default.useRef(),
controls: react_1.default.useRef(undefined),
duration: react_1.default.useRef(undefined),
time: react_1.default.useRef(undefined),
play: react_1.default.useRef(undefined),
updating: react_1.default.useRef(undefined),
onPlay: react_1.default.useRef(undefined),
onPause: react_1.default.useRef(undefined),
onTimeChange: react_1.default.useRef(undefined),
onBackward: react_1.default.useRef(undefined),
onForward: react_1.default.useRef(undefined),
onStop: react_1.default.useRef(undefined),
startMediaSession: react_1.default.useRef(undefined),
updateMediaSession: react_1.default.useRef(undefined),
startMediaSessionOnPlay: react_1.default.useRef(undefined)
};
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]);
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) => {
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;
};
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: 'amaui-videoPlayer-option'
};
const items = [];
if (openMenu) {
items.push((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ start: ((0, jsx_runtime_1.jsx)(IconBack, { size: 'very small' })), primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: "Back" }))), onClick: () => setOpenMenu(null) }, itemProps), 'back'));
}
if (!openMenu) {
if (playbackSpeed_)
items.push((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ start: ((0, jsx_runtime_1.jsx)(IconPlaybackSpeed, { size: 'small' })), primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: "Playback speed" }))), end: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', priority: 'secondary' }, { children: playbackSpeed === 1 ? 'Normal' : playbackSpeed }))), onClick: () => setOpenMenu('playbackSpeed') }, itemProps), 'playbackSpeed'));
if (quality_)
items.push((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ start: ((0, jsx_runtime_1.jsx)(IconQuality, { size: 'small' })), primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: "Quality" }))), end: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', priority: 'secondary' }, { children: !quality ? 'Original' : `${(_a = quality === null || quality === void 0 ? void 0 : quality.meta) === null || _a === void 0 ? void 0 : _a.resolution}p` }))), onClick: () => setOpenMenu('quality') }, itemProps), 'quality'));
}
else if (openMenu === 'quality') {
items.push((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: "Original" }))), onClick: () => quality ? onQuality(null) : undefined, selected: !quality }, itemProps), 'original'));
// 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((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: option === 1 ? 'Normal' : option }))), onClick: () => onPlaybackSpeed(option), selected: playbackSpeed === option }, itemProps), option));
});
}
return items;
};
const 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) && [
'amaui-AudioPlayer-root',
`amaui-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)([
'amaui-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: 'amaui-videoPlayer', includeParentQueries: ['.amaui-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] })) })));
});
AudioPlayer.displayName = 'amaui-AudioPlayer';
exports.default = AudioPlayer;