vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: show recent playlists on home screen

Browse source
This commit is contained in:
Julien Maille 2025-12-23 15:37:44 +01:00 committed by Julien Maille
parent 1415c350c5
commit 46042d4851
3 changed files with 24 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -110,6 +110,10 @@
<h2 class="section-title">Recent Albums</h2>
<div class="card-grid" id="home-recent-albums"></div>
</section>
<section class="content-section">
<h2 class="section-title">Recent Playlists</h2>
<div class="card-grid" id="home-recent-playlists"></div>
</section>
<section class="content-section">
<h2 class="section-title">Recent Artists</h2>
<div class="card-grid" id="home-recent-artists"></div>

10
js/storage.js
View file

@ -193,9 +193,11 @@ export const recentActivityManager = {
_get() {
try {
const data = localStorage.getItem(this.STORAGE_KEY);
return data ? JSON.parse(data) : { artists: [], albums: [] };
const parsed = data ? JSON.parse(data) : { artists: [], albums: [], playlists: [] };
if (!parsed.playlists) parsed.playlists = [];
return parsed;
} catch (e) {
return { artists: [], albums: [] };
return { artists: [], albums: [], playlists: [] };
}
},
@ -221,6 +223,10 @@ export const recentActivityManager = {
addAlbum(album) {
this._add('albums', album);
},
addPlaylist(playlist) {
this._add('playlists', playlist);
}
};

16
js/ui.js
View file

@ -206,6 +206,7 @@ export class UIRenderer {
const albumsContainer = document.getElementById('home-recent-albums');
const artistsContainer = document.getElementById('home-recent-artists');
const playlistsContainer = document.getElementById('home-recent-playlists');
albumsContainer.innerHTML = recents.albums.length
? recents.albums.map(album => this.createAlbumCardHTML(album)).join('')
@ -214,6 +215,12 @@ export class UIRenderer {
artistsContainer.innerHTML = recents.artists.length
? recents.artists.map(artist => this.createArtistCardHTML(artist)).join('')
: createPlaceholder("You haven't viewed any artists yet. Search for music to get started!");
if (playlistsContainer) {
playlistsContainer.innerHTML = recents.playlists && recents.playlists.length
? recents.playlists.map(playlist => this.createPlaylistCardHTML(playlist)).join('')
: createPlaceholder("You haven't viewed any playlists yet. Search for music to get started!");
}
}
async renderSearchPage(query) {
@ -427,10 +434,11 @@ async renderPlaylistPage(playlistId) {
</div>
`;
this.renderListWithTracks(tracklistContainer, tracks, true);
document.title = `${playlist.title} - Monochrome`;
} catch (error) {
this.renderListWithTracks(tracklistContainer, tracks, true);
recentActivityManager.addPlaylist(playlist);
document.title = `${playlist.title || 'Artist Mix'} - Monochrome`; } catch (error) {
console.error("Failed to load playlist:", error);
tracklistContainer.innerHTML = createPlaceholder(`Could not load playlist details. ${error.message}`);
}