Merge pull request #24 from LacLic/master

src/hooks/usePlayer.ts

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
-import { NowPlayingInfoState, PlayerState, PlayerStatusState } from "@/state/player";
+import { NowPlayingInfoState, PlayerDurationState, PlayerState, PlayerStatusState } from "@/state/player";
 import { PlayerStatus, PlayQueueItem } from "@/types/common";
 import { addQueries } from "@/utils/url";
 import useLocalStorageValue from "./useLocalStorageValue";
@@ -50,7 +50,7 @@ async function getAudioPlayInfo(url: string, quality?: string): Promise<AudioPla
         }
 
         if (!MediaSource.isTypeSupported(mime)) {
-            resolveAudioPlayInfo({ url, useMSE: false });
+            resolveAudioPlayInfo({ url, useMSE: false, duration: +duration });
             return;
         }
 
@@ -100,6 +100,7 @@ async function getAudioPlayInfo(url: string, quality?: string): Promise<AudioPla
 
 export default function usePlayer() {
     const player = useRecoilValue(PlayerState);
+    const [playerDuration, setPlayerDuration] = useRecoilState(PlayerDurationState);
     const [quality] = useLocalStorageValue("player.quality", "lossless");
     const [playerStatus, setPlayerStatus] = useRecoilState(PlayerStatusState);
     const setNowPlayingInfo = useSetRecoilState(NowPlayingInfoState);
@@ -119,14 +120,15 @@ export default function usePlayer() {
                 return;
             }
             setPlayerStatus(PlayerStatus.BUFFERING);
-            // TODO: make use of audioInfo.useMSE and audioInfo.duration
+            // TODO: make use of audioInfo.useMSE
             const audioInfo = await getAudioPlayInfo(playUrl, quality);
             player.src = audioInfo.url;
             player.addEventListener(
                 "canplay",
                 () => {
                     player.play();
                     setPlayerStatus(PlayerStatus.PLAYING);
+                    if(!!audioInfo.duration) setPlayerDuration(+audioInfo.duration);
                     setNowPlayingInfo({
                         title,
                         artist,

src/hooks/usePlayerTime.ts

@@ -1,23 +1,20 @@
 import { useEffect, useState } from "react";
 import usePlayer from "./usePlayer";
+import { useRecoilValue } from "recoil";
+import { PlayerDurationState } from "@/state/player";
 
 export default function usePlayerTime() {
-    const [player] = usePlayer();
     const [currentTime, setCurrentTime] = useState(0);
-    const [duration, setDuration] = useState(0);
+    const duration = useRecoilValue(PlayerDurationState);
+    const [player] = usePlayer();
     useEffect(() => {
         const onTimeUpdate = () => {
             setCurrentTime(player.currentTime);
         };
-        const onDurationChange = () => {
-            setDuration(player.duration);
-        };
         player.addEventListener("timeupdate", onTimeUpdate);
-        player.addEventListener("durationchange", onDurationChange);
         return () => {
             player.removeEventListener("timeupdate", onTimeUpdate);
-            player.removeEventListener("durationchange", onDurationChange);
         };
-    }, [player]);
+    }, [player, duration]);
     return [currentTime, duration] as const;
 }

src/state/player.ts

@@ -19,3 +19,8 @@ export const NowPlayingInfoState = atom<Partial<PlayQueueItem>>({
     key: "NowPlayingInfoState",
     default: {},
 });
+
+export const PlayerDurationState = atom({
+    key: "PlayerDurationState",
+    default: 0,
+});