feat(web+android): gefolgte Künstler begrenzt anzeigen, mit "Alle anzeigen"
Vorher landeten alle gefolgten Künstler in der waagerechten Reihe der Favoriten — bei 200 Gefolgten 200 Karten samt Bildern, von denen man vier sieht. Am Ende steht jetzt "Alle anzeigen (+n weitere)" und springt in die Künstlerliste mit aktivem Gefolgt-Filter. Im Web richtet sich die Anzahl nach der Fensterbreite statt nach einer festen Zahl (passende Karten minus eine, damit der Knopf nicht angeschnitten klebt; Untergrenze zwei), und bei Größenänderung wird neu aufgeteilt. Android zeigt zehn; die LazyRow baut ohnehin nur Sichtbares, dort ging es allein um Durchsehbarkeit. LibraryIntent reicht die Absicht einmalig durch, weil das LibraryViewModel am Navigationseintrag hängt und einen Zielwechsel nicht überlebt. Dazu: die Zeitfenster-Chips der Android-Zeitleiste beginnen mit 90 Tagen, der Vorgabe — Web war schon so. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
cb43c3375e
commit
86810b6a51
8 files changed
+112
-7
No files matched your search
+36
-2
@@ -7,7 +7,7 @@ import { openEditPlModal } from '../ui/ui.js';
|
||||
// Circular — safe (called inside event handlers)
|
||||
import { navigate } from './navigation.js';
|
||||
import { quickPlayPlaylist } from './detail.js';
|
||||
import { getArtistImage } from './home.js';
|
||||
import { getArtistImage, loadArtists } from './home.js';
|
||||
|
||||
// Besitzer einer Playlist, sofern es nicht die eigene ist. Navidrome liefert `owner` und `public`
|
||||
// in getPlaylists/getPlaylist mit; interessant ist die Angabe nur bei geteilten (oeffentlichen)
|
||||
@@ -251,14 +251,29 @@ export async function loadStarred(sort = _starredSort) {
|
||||
|
||||
// Kuenstler, denen man folgt. Die Sortierchips oben gelten fuer die Songliste; hier waere eine
|
||||
// eigene Sortierung nur Ballast, also alphabetisch.
|
||||
// Wie viele gezeigt werden, richtet sich nach der Fensterbreite: eine Reihe voll, nicht mehr. Bei
|
||||
// 200 gefolgten Kuenstlern 200 Karten samt Bildern zu bauen, von denen man vier sieht, waere
|
||||
// Verschwendung — den Rest erreicht man ueber "Alle anzeigen" (Kuenstlerseite mit Gefolgt-Filter).
|
||||
const _KARTE = 145 + 12; // .scroll-row .card width + gap
|
||||
|
||||
function _passendeAnzahl(wrap) {
|
||||
const breite = wrap?.clientWidth || document.getElementById('main-content')?.clientWidth || 900;
|
||||
// Eine Karte weniger, damit "Alle anzeigen" am Ende sichtbar ist statt angeschnitten.
|
||||
return Math.max(2, Math.floor(breite / _KARTE) - 1);
|
||||
}
|
||||
|
||||
let _starredArtists = [];
|
||||
function _renderStarredArtists(artists) {
|
||||
_starredArtists = artists;
|
||||
const wrap = document.getElementById('starred-artists-section');
|
||||
if (!wrap) return;
|
||||
wrap.innerHTML = '';
|
||||
if (!artists.length) return;
|
||||
const sortiert = [...artists].sort((a,b) => (a.name||'').localeCompare(b.name||''));
|
||||
const zeigen = _passendeAnzahl(wrap);
|
||||
const s = mkSection(`Künstler, denen du folgst (${artists.length})`);
|
||||
const row = document.createElement('div'); row.className = 'scroll-row';
|
||||
[...artists].sort((a,b) => (a.name||'').localeCompare(b.name||'')).forEach(a => {
|
||||
sortiert.slice(0, zeigen).forEach(a => {
|
||||
const c = makeCard(dispArtistById(a.id, a.name), `${a.albumCount || 0} Alben`, null, '🎤');
|
||||
c.classList.add('artist-card');
|
||||
c.onclick = () => navigate('artist-detail', { id: a.id, name: a.name });
|
||||
@@ -273,9 +288,28 @@ function _renderStarredArtists(artists) {
|
||||
else if (a.coverArt) setzen(coverUrl(a.coverArt, 300)); // kein Extra-Aufruf noetig
|
||||
else getArtistImage(a.id).then(setzen);
|
||||
});
|
||||
if (sortiert.length > zeigen) {
|
||||
const mehr = document.createElement('div');
|
||||
mehr.className = 'card artist-card starred-more';
|
||||
mehr.innerHTML = '<div class="card-art"><div class="no-art">→</div></div>'
|
||||
+ '<div class="card-info"><div class="card-title">Alle anzeigen</div>'
|
||||
+ `<div class="card-sub">+${sortiert.length - zeigen} weitere</div></div>`;
|
||||
mehr.onclick = () => { navigate('artists'); loadArtists('followed'); };
|
||||
row.appendChild(mehr);
|
||||
}
|
||||
s.appendChild(row); wrap.appendChild(s);
|
||||
}
|
||||
|
||||
// Bei Groessenaenderung neu aufteilen — sonst bleibt die Zahl auf dem Stand des ersten Aufbaus.
|
||||
let _resizeTimer = null;
|
||||
window.addEventListener('resize', () => {
|
||||
if (!document.getElementById('page-starred')?.classList.contains('active')) return;
|
||||
clearTimeout(_resizeTimer);
|
||||
_resizeTimer = setTimeout(() => {
|
||||
if (_starredArtists.length) _renderStarredArtists(_starredArtists);
|
||||
}, 200);
|
||||
});
|
||||
|
||||
function _renderStarredAlbums(albums) {
|
||||
const wrap = document.getElementById('starred-albums-section');
|
||||
if (!wrap) return;
|
||||
|
||||
Reference in new issue
Block a user