@lobehub/tts
Version:
A high-quality & reliable TTS React Hooks library
112 lines (110 loc) • 3.41 kB
JavaScript
import { secondsToMinutesAndSeconds } from "../../core/utils/secondsToMinutesAndSeconds.mjs";
import { ActionIcon, Flexbox, Tag } from "@lobehub/ui";
import { Slider } from "antd";
import { Download, PauseCircle, Play, StopCircle } from "lucide-react";
import { memo, useCallback, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/react/AudioPlayer/index.tsx
const AudioPlayer = memo(({ isLoading, style, timeStyle, buttonSize, className, onLoadingStop, audio = {
canPlay: false,
currentTime: 0,
download: () => {},
duration: 0,
isPlaying: false,
pause: () => {},
play: () => {},
setTime: () => {},
stop: () => {}
}, allowPause = true, showDonload = true, buttonActive, timeType = "left", showSlider = true, showTime = true, timeRender = "text", onInitPlay, onPause, onStop, title, buttonStyle, onPlay }) => {
const { isPlaying, play, stop, pause, duration, setTime, currentTime, download } = audio;
const formattedLeftTime = secondsToMinutesAndSeconds(duration - currentTime);
const formattedCurrentTime = secondsToMinutesAndSeconds(currentTime);
const formattedDuration = secondsToMinutesAndSeconds(duration);
const Time = useMemo(() => timeRender === "tag" ? Tag : (props) => /* @__PURE__ */ jsx("div", { ...props }), [timeRender]);
const handlePlay = useCallback(() => {
if ((!duration || duration === 0) && !isLoading) onInitPlay?.();
else {
play?.();
onPlay?.();
}
}, [play, duration]);
const handlePause = useCallback(() => {
pause?.();
onPause?.();
}, [pause]);
const handleStop = useCallback(() => {
stop?.();
onStop?.();
}, [stop]);
const handleStopLoading = useCallback(() => {
if (!isLoading) return;
onLoadingStop?.();
stop?.();
onStop?.();
}, [stop, isLoading]);
return /* @__PURE__ */ jsxs(Flexbox, {
align: "center",
className,
gap: 8,
horizontal: true,
style: {
width: "100%",
...style
},
children: [
/* @__PURE__ */ jsx("div", {
onClick: handleStopLoading,
style: { flex: "none" },
children: /* @__PURE__ */ jsx(ActionIcon, {
active: buttonActive,
icon: isPlaying ? allowPause ? PauseCircle : StopCircle : Play,
loading: isLoading,
onClick: isPlaying ? allowPause ? handlePause : handleStop : handlePlay,
size: buttonSize || {
blockSize: 32,
size: 16
},
style: buttonStyle,
title
})
}),
showSlider && /* @__PURE__ */ jsx(Slider, {
disabled: duration === 0 || isLoading,
max: duration,
min: 0,
onChange: (e) => setTime(e),
step: .01,
style: { flex: 1 },
tooltip: { formatter: secondsToMinutesAndSeconds },
value: currentTime
}),
showTime && /* @__PURE__ */ jsxs(Time, {
style: {
cursor: "pointer",
flex: "none",
margin: 0,
...timeStyle
},
children: [
timeType === "left" && formattedLeftTime,
timeType === "current" && formattedCurrentTime,
timeType === "combine" && /* @__PURE__ */ jsxs("span", { children: [formattedCurrentTime, /* @__PURE__ */ jsx("span", {
style: { opacity: .66 },
children: ` / ${formattedDuration}`
})] })
]
}),
!isLoading && showDonload && /* @__PURE__ */ jsx(ActionIcon, {
icon: Download,
onClick: download,
size: buttonSize || {
blockSize: 32,
size: 16
},
style: buttonStyle
})
]
});
});
//#endregion
export { AudioPlayer as default };