fix music volume reset to max automatically (#573)
This commit is contained in:
parent
ecb0e6a59d
commit
d8219883a9
1 changed files with 4 additions and 1 deletions
|
@ -26,6 +26,7 @@ const AudioPreview: FC<{ file: OdFileObject }> = ({ file }) => {
|
||||||
|
|
||||||
const rapRef = useRef<ReactAudioPlayer>(null)
|
const rapRef = useRef<ReactAudioPlayer>(null)
|
||||||
const [playerStatus, setPlayerStatus] = useState(PlayerState.Loading)
|
const [playerStatus, setPlayerStatus] = useState(PlayerState.Loading)
|
||||||
|
const [playerVolume, setPlayerVolume] = useState(1)
|
||||||
|
|
||||||
// Render audio thumbnail, and also check for broken thumbnails
|
// Render audio thumbnail, and also check for broken thumbnails
|
||||||
const thumbnail = `/api/thumbnail/?path=${asPath}&size=medium${hashedToken ? `&odpt=${hashedToken}` : ''}`
|
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.
|
// 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
|
// - 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.
|
// - 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) {
|
if (rap) {
|
||||||
rap.oncanplay = () => setPlayerStatus(PlayerState.Ready)
|
rap.oncanplay = () => setPlayerStatus(PlayerState.Ready)
|
||||||
rap.onended = () => setPlayerStatus(PlayerState.Paused)
|
rap.onended = () => setPlayerStatus(PlayerState.Paused)
|
||||||
|
@ -45,6 +46,7 @@ const AudioPreview: FC<{ file: OdFileObject }> = ({ file }) => {
|
||||||
rap.onseeking = () => setPlayerStatus(PlayerState.Loading)
|
rap.onseeking = () => setPlayerStatus(PlayerState.Loading)
|
||||||
rap.onwaiting = () => setPlayerStatus(PlayerState.Loading)
|
rap.onwaiting = () => setPlayerStatus(PlayerState.Loading)
|
||||||
rap.onerror = () => setPlayerStatus(PlayerState.Paused)
|
rap.onerror = () => setPlayerStatus(PlayerState.Paused)
|
||||||
|
rap.onvolumechange = () => setPlayerVolume(rap.volume)
|
||||||
}
|
}
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
@ -98,6 +100,7 @@ const AudioPreview: FC<{ file: OdFileObject }> = ({ file }) => {
|
||||||
ref={rapRef}
|
ref={rapRef}
|
||||||
controls
|
controls
|
||||||
preload="auto"
|
preload="auto"
|
||||||
|
volume={playerVolume}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue