angel/mice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: streamline localStorage handling for track time in AudioPlayer

Browse Source
This commit is contained in:
angel
2025-06-19 21:53:58 +00:00
committed by GitHub
parent 6f33c35c47
commit 77614fed97
1 changed files with 24 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/components/AudioPlayer.tsx
View File

@@ -30,6 +30,16 @@ export const AudioPlayer: React.FC = () => {
useEffect(() => { useEffect(() => {
setIsClient(true); setIsClient(true);
// Clean up old localStorage entries with track IDs
const keysToRemove: string[] = [];
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (key && key.startsWith('navidrome-track-time-')) {
keysToRemove.push(key);
}
}
keysToRemove.forEach(key => localStorage.removeItem(key));
}, []); }, []);
// Save position when component unmounts or track changes // Save position when component unmounts or track changes
@@ -37,7 +47,7 @@ export const AudioPlayer: React.FC = () => {
const audioCurrent = audioRef.current; const audioCurrent = audioRef.current;
return () => { return () => {
if (audioCurrent && currentTrack && audioCurrent.currentTime > 10) { if (audioCurrent && currentTrack && audioCurrent.currentTime > 10) {
localStorage.setItem(`navidrome-track-time-${currentTrack.id}`, audioCurrent.currentTime.toString()); localStorage.setItem('navidrome-current-track-time', audioCurrent.currentTime.toString());
} }
}; };
}, [currentTrack]); }, [currentTrack]);
@@ -49,7 +59,7 @@ export const AudioPlayer: React.FC = () => {
audioCurrent.src = currentTrack.url; audioCurrent.src = currentTrack.url;
// Check for saved timestamp (only restore if more than 10 seconds in) // Check for saved timestamp (only restore if more than 10 seconds in)
const savedTime = localStorage.getItem(`navidrome-track-time-${currentTrack.id}`); const savedTime = localStorage.getItem('navidrome-current-track-time');
if (savedTime) { if (savedTime) {
const time = parseFloat(savedTime); const time = parseFloat(savedTime);
// Only restore if we were at least 10 seconds in and not near the end // Only restore if we were at least 10 seconds in and not near the end
@@ -66,7 +76,13 @@ export const AudioPlayer: React.FC = () => {
} else { } else {
audioCurrent.addEventListener('loadeddata', restorePosition); audioCurrent.addEventListener('loadeddata', restorePosition);
} }
} else {
// Clear saved time if we're not restoring it
localStorage.removeItem('navidrome-current-track-time');
} }
} else {
// Clear saved time if no saved time exists
localStorage.removeItem('navidrome-current-track-time');
} }
audioCurrent.play(); audioCurrent.play();
@@ -82,10 +98,10 @@ export const AudioPlayer: React.FC = () => {
if (audioCurrent && currentTrack) { if (audioCurrent && currentTrack) {
setProgress((audioCurrent.currentTime / audioCurrent.duration) * 100); setProgress((audioCurrent.currentTime / audioCurrent.duration) * 100);
// Save current time every 10 seconds, but only if we've moved forward significantly // Save current time every 30 seconds, but only if we've moved forward significantly
const currentTime = audioCurrent.currentTime; const currentTime = audioCurrent.currentTime;
if (Math.abs(currentTime - lastSavedTime) >= 10 && currentTime > 10) { if (Math.abs(currentTime - lastSavedTime) >= 30 && currentTime > 10) {
localStorage.setItem(`navidrome-track-time-${currentTrack.id}`, currentTime.toString()); localStorage.setItem('navidrome-current-track-time', currentTime.toString());
lastSavedTime = currentTime; lastSavedTime = currentTime;
} }
} }
@@ -94,7 +110,7 @@ export const AudioPlayer: React.FC = () => {
const handleTrackEnd = () => { const handleTrackEnd = () => {
if (currentTrack) { if (currentTrack) {
// Clear saved time when track ends // Clear saved time when track ends
localStorage.removeItem(`navidrome-track-time-${currentTrack.id}`); localStorage.removeItem('navidrome-current-track-time');
} }
playNextTrack(); playNextTrack();
}; };
@@ -102,7 +118,7 @@ export const AudioPlayer: React.FC = () => {
const handleSeeked = () => { const handleSeeked = () => {
if (audioCurrent && currentTrack) { if (audioCurrent && currentTrack) {
// Save immediately when user seeks // Save immediately when user seeks
localStorage.setItem(`navidrome-track-time-${currentTrack.id}`, audioCurrent.currentTime.toString()); localStorage.setItem('navidrome-current-track-time', audioCurrent.currentTime.toString());
lastSavedTime = audioCurrent.currentTime; lastSavedTime = audioCurrent.currentTime;
} }
}; };
@@ -190,7 +206,7 @@ export const AudioPlayer: React.FC = () => {
audioCurrent.currentTime = newTime; audioCurrent.currentTime = newTime;
// Save the new position immediately // Save the new position immediately
localStorage.setItem(`navidrome-track-time-${currentTrack.id}`, newTime.toString()); localStorage.setItem('navidrome-current-track-time', newTime.toString());
} }
}; };