feat: add listening history page with grouped track display and clear history functionality

- Implemented HistoryPage component to display user's listening history.
- Tracks are grouped by date and displayed with play and add to queue options.
- Added clear history functionality with confirmation dialog.
- Created AlertDialog component for consistent alert dialog UI.
This commit is contained in:
2025-06-23 20:00:56 -05:00
parent 507951a478
commit 779ed06e35
8 changed files with 994 additions and 53 deletions

View File

@@ -37,6 +37,8 @@ interface AudioPlayerContextProps {
toggleShuffle: () => void;
shuffleAllAlbums: () => Promise<void>;
playArtist: (artistId: string) => Promise<void>;
playedTracks: Track[];
clearHistory: () => void;
}
const AudioPlayerContext = createContext<AudioPlayerContextProps | undefined>(undefined);
@@ -534,6 +536,27 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
}
}, [api, songToTrack, toast, shuffle, playTrack]);
const clearHistory = useCallback(() => {
setPlayedTracks([]);
localStorage.removeItem('navidrome-playedTracks');
}, []);
// Persist played tracks to localStorage
useEffect(() => {
localStorage.setItem('navidrome-playedTracks', JSON.stringify(playedTracks));
}, [playedTracks]);
// Load played tracks from localStorage on mount
useEffect(() => {
const savedPlayedTracks = localStorage.getItem('navidrome-playedTracks');
if (savedPlayedTracks) {
try {
setPlayedTracks(JSON.parse(savedPlayedTracks));
} catch (error) {
console.error('Failed to parse saved played tracks:', error);
}
}
}, []);
const contextValue = useMemo(() => ({
currentTrack,
playTrack,
@@ -552,7 +575,9 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
shuffle,
toggleShuffle,
shuffleAllAlbums,
playArtist
playArtist,
playedTracks,
clearHistory
}), [
currentTrack,
queue,
@@ -571,7 +596,9 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
shuffle,
toggleShuffle,
shuffleAllAlbums,
playArtist
playArtist,
playedTracks,
clearHistory
]);
return (