refactor player timestamp hook with fixed interval

src/renderer/store/scrobble-debug.store.ts

@@ -1,7 +1,10 @@
+import { useEffect, useState } from 'react';
 import { createWithEqualityFn } from 'zustand/traditional';
 
 import { PlayerStatus } from '/@/shared/types/types';
 
+const SCROBBLE_DEBUG_POLL_INTERVAL_MS = 1000;
+
 export type ScrobbleDebugSnapshot = {
     eligibilityMet: boolean;
     lastListenSampleTimeSec: null | number;
@@ -38,6 +41,26 @@ export const useScrobbleDebugStore = createWithEqualityFn<ScrobbleDebugStore>()(
     snapshot: initialSnapshot,
 }));
 
+export const useScrobbleDebugSnapshot = () => {
+    const [snapshot, setLocalSnapshot] = useState(() => useScrobbleDebugStore.getState().snapshot);
+
+    useEffect(() => {
+        const syncSnapshot = () => {
+            const nextSnapshot = useScrobbleDebugStore.getState().snapshot;
+            setLocalSnapshot((prevSnapshot) =>
+                prevSnapshot !== nextSnapshot ? nextSnapshot : prevSnapshot,
+            );
+        };
+
+        syncSnapshot();
+        const interval = setInterval(syncSnapshot, SCROBBLE_DEBUG_POLL_INTERVAL_MS);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    return snapshot;
+};
+
 export const publishScrobbleDebug = (partial: Partial<ScrobbleDebugSnapshot>) => {
     useScrobbleDebugStore.setState((state) => ({
         snapshot: { ...state.snapshot, ...partial },