fix music volume reset to max automatically (#573)

components/previews/AudioPreview.tsx

@@ -26,6 +26,7 @@ const AudioPreview: FC<{ file: OdFileObject }> = ({ file }) => {
 
   const rapRef = useRef<ReactAudioPlayer>(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}
             />
           </div>
         </div>