some extra checks for the progress saver

src/components/player/internals/ProgressSaver.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from "react";
 import { useInterval } from "react-use";
 
+import { playerStatus } from "@/stores/player/slices/source";
 import { usePlayerStore } from "@/stores/player/store";
 import { useProgressStore } from "@/stores/progress";
 
@@ -8,26 +9,31 @@ export function ProgressSaver() {
   const meta = usePlayerStore((s) => s.meta);
   const progress = usePlayerStore((s) => s.progress);
   const updateItem = useProgressStore((s) => s.updateItem);
+  const status = usePlayerStore((s) => s.status);
+  const hasPlayedOnce = usePlayerStore((s) => s.mediaPlaying.hasPlayedOnce);
 
-  const updateItemRef = useRef(updateItem);
+  const dataRef = useRef({
-  useEffect(() => {
+    updateItem,
-    updateItemRef.current = updateItem;
+    meta,
-  }, [updateItem]);
+    progress,
-
+    status,
-  const metaRef = useRef(meta);
+    hasPlayedOnce,
-  useEffect(() => {
+  });
-    metaRef.current = meta;
-  }, [meta]);
-
-  const progressRef = useRef(progress);
   useEffect(() => {
-    progressRef.current = progress;
+    dataRef.current.updateItem = updateItem;
-  }, [progress]);
+    dataRef.current.meta = meta;
+    dataRef.current.progress = progress;
+    dataRef.current.status = status;
+    dataRef.current.hasPlayedOnce = hasPlayedOnce;
+  }, [updateItem, progress, meta, status, hasPlayedOnce]);
 
   useInterval(() => {
-    if (updateItemRef.current && metaRef.current && progressRef.current)
+    const d = dataRef.current;
-      updateItemRef.current({
+    if (!d.progress || !d.meta || !d.updateItem) return;
-        meta: metaRef.current,
+    if (d.status !== playerStatus.PLAYING) return;
+    if (!hasPlayedOnce) return;
+    d.updateItem({
+      meta: d.meta,
       progress: {
         duration: progress.duration,
         watched: progress.time,