diff --git a/index.html b/index.html index efbfaa9..da8c652 100644 --- a/index.html +++ b/index.html @@ -193,6 +193,13 @@
+
+ + + + + +
@@ -218,6 +225,13 @@
+
+ + + + + +
diff --git a/src/main.js b/src/main.js index 371765a..26db326 100644 --- a/src/main.js +++ b/src/main.js @@ -15,7 +15,7 @@ import { navigate, _navGoBack, _navLoad, onLocalSearch, onMobileSearch, onGlobalSearch, s_goArtist, s_goAlbum, playerBarGoArtist, playerBarGoAlbum, searchSimilarArtist, searchAndPreview, loadItunesAlbum, expandArtistBio, - loadRandom, + loadAlbums, loadStarred, loadRandom, } from './views.js'; import { loadSpotifyImporter, resolveSpotifyLink, clearSpotifyPreview, spotifyDlAll } from './spotify.js'; import { @@ -282,7 +282,7 @@ Object.assign(window, { openSettings, closeSettings, saveSettings, confirmDisconnect, checkBackend, openSidebar, closeSidebar, switchNavMode, showCtxMenu, // Views - loadRandom, loadSpotifyImporter, resolveSpotifyLink, clearSpotifyPreview, spotifyDlAll, + loadAlbums, loadStarred, loadRandom, loadSpotifyImporter, resolveSpotifyLink, clearSpotifyPreview, spotifyDlAll, executeSpotifyDownload, openPlModal, closePlModal, addSongsToPlaylist, createAndAddPlaylist, createPlaylistPrompt, showSongInfo, closeInfoModal, diff --git a/src/views.js b/src/views.js index 77907fa..740c799 100644 --- a/src/views.js +++ b/src/views.js @@ -154,11 +154,16 @@ export async function loadArtists() { } // ─── ALBUMS ─── -export async function loadAlbums() { +let _albumSort = 'alphabeticalByName'; + +export async function loadAlbums(type = _albumSort) { + _albumSort = type; + document.querySelectorAll('#albums-sort-chips .sort-chip').forEach(c => + c.classList.toggle('active', c.dataset.sort === type)); const g = document.getElementById('albums-grid'); g.innerHTML = '
'; try { - const r = await api('getAlbumList2', '&type=alphabeticalByName&size=500'); + const r = await api('getAlbumList2', `&type=${type}&size=500`); g.innerHTML = ''; (r.albumList2?.album || []).forEach(a => g.appendChild(makeAlbumCard(a))); } catch(e) { g.innerHTML = `

${e.message}

`; } @@ -632,12 +637,22 @@ export async function quickPlayAlbum(a) { } // ─── STARRED / RANDOM ─── -export async function loadStarred() { +let _starredSort = 'newest'; + +export async function loadStarred(sort = _starredSort) { + _starredSort = sort; + document.querySelectorAll('#starred-sort-chips .sort-chip').forEach(c => + c.classList.toggle('active', c.dataset.sort === sort)); const el = document.getElementById('starred-songs'); el.innerHTML = '
'; try { const r = await api('getStarred2'); - const songs = (r.starred2?.song || []).map(s => ({...s,_starred:true})); + let songs = (r.starred2?.song || []).map(s => ({...s, _starred: true})); + if (sort === 'newest') songs.sort((a, b) => new Date(b.starred||0) - new Date(a.starred||0)); + else if (sort === 'oldest') songs.sort((a, b) => new Date(a.starred||0) - new Date(b.starred||0)); + else if (sort === 'az') songs.sort((a, b) => (a.title||'').localeCompare(b.title||'')); + else if (sort === 'artist') songs.sort((a, b) => (a.artist||'').localeCompare(b.artist||'')); + else if (sort === 'plays') songs.sort((a, b) => (b.playCount||0) - (a.playCount||0)); el.innerHTML = ''; if(!songs.length) { el.innerHTML = '
⭐

Noch keine Favoriten

'; return; } songs.forEach((s,i) => el.appendChild(makeSongItem(s, i, songs))); diff --git a/styles.css b/styles.css index d513e21..0b61d0f 100644 --- a/styles.css +++ b/styles.css @@ -713,6 +713,11 @@ nav{flex:1;overflow-y:auto;padding:4px 10px} .similar-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px} .similar-chip{padding:6px 12px;background:var(--surface);border:1px solid var(--border2);border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s} .similar-chip:hover{border-color:var(--accent);color:var(--accent)} +.sort-chips{display:flex;flex-wrap:nowrap;gap:6px;margin-bottom:16px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none} +.sort-chips::-webkit-scrollbar{display:none} +.sort-chip{padding:6px 14px;background:var(--surface);border:1px solid var(--border2);border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;color:var(--text2);font-family:var(--font);transition:border-color .15s,color .15s,background .15s} +.sort-chip:hover{border-color:var(--accent);color:var(--accent)} +.sort-chip.active{background:var(--accent);border-color:var(--accent);color:#000} .topsong-item{display:grid;grid-template-columns:28px 44px 1fr auto;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;cursor:pointer;transition:background .15s} .topsong-item:hover{background:var(--surface)} .topsong-num{font-size:11px;color:var(--text3);font-family:var(--mono);text-align:center}