From d8219883a96c070e706e95f9062be4b2a4943337 Mon Sep 17 00:00:00 2001 From: DotTorrent Date: Tue, 3 May 2022 03:03:37 +0800 Subject: [PATCH] fix music volume reset to max automatically (#573) --- components/previews/AudioPreview.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/components/previews/AudioPreview.tsx b/components/previews/AudioPreview.tsx index aa16b55..9beb3a0 100644 --- a/components/previews/AudioPreview.tsx +++ b/components/previews/AudioPreview.tsx @@ -26,6 +26,7 @@ const AudioPreview: FC<{ file: OdFileObject }> = ({ file }) => { const rapRef = useRef(null) const [playerStatus, setPlayerStatus] = useState(PlayerState.Loading) + const [playerVolume, setPlayerVolume] = useState(1) // Render audio thumbnail, and also check for broken thumbnails const thumbnail = `/api/thumbnail/?path=${asPath}&size=medium${hashedToken ? `&odpt=${hashedToken}` : ''}` @@ -35,7 +36,7 @@ const AudioPreview: FC<{ file: OdFileObject }> = ({ file }) => { // Manually get the HTML audio element and set onplaying event. // - As the default event callbacks provided by the React component does not guarantee playing state to be set // - properly when the user seeks through the timeline or the audio is buffered. - const rap = (rapRef.current as ReactAudioPlayer).audioEl.current + const rap = rapRef.current?.audioEl.current if (rap) { rap.oncanplay = () => setPlayerStatus(PlayerState.Ready) rap.onended = () => setPlayerStatus(PlayerState.Paused) @@ -45,6 +46,7 @@ const AudioPreview: FC<{ file: OdFileObject }> = ({ file }) => { rap.onseeking = () => setPlayerStatus(PlayerState.Loading) rap.onwaiting = () => setPlayerStatus(PlayerState.Loading) rap.onerror = () => setPlayerStatus(PlayerState.Paused) + rap.onvolumechange = () => setPlayerVolume(rap.volume) } }, []) @@ -98,6 +100,7 @@ const AudioPreview: FC<{ file: OdFileObject }> = ({ file }) => { ref={rapRef} controls preload="auto" + volume={playerVolume} />