fix: hero card shows romaji for album name and artist

loadHeroCard() now pre-fetches the romaji index (same pattern as loadAlbumRow)
and uses dispAlbumName()/dispArtistById() instead of raw album.name/artist.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed 2026-06-07 14:05:10 +02:00
1 parent 0663b1c923
commit acb15d8c00
1 file changed
+4 -3
+4 -3
View File
@@ -1,6 +1,6 @@
import { S } from '../state.js'; import { S } from '../state.js';
import { esc } from '../utils.js'; import { esc } from '../utils.js';
import { api, apiCached, apiIsCached, coverUrl, fetchRomajiIndex, dispArtistById } from '../api.js'; import { api, apiCached, apiIsCached, coverUrl, fetchRomajiIndex, dispArtistById, dispAlbumName } from '../api.js';
import { makeCard, makeAlbumCard, makeSongItem } from '../ui/components.js'; import { makeCard, makeAlbumCard, makeSongItem } from '../ui/components.js';
import { playQueue } from '../player/player.js'; import { playQueue } from '../player/player.js';
// Circular — safe (called inside event handlers) // Circular — safe (called inside event handlers)
@@ -42,6 +42,7 @@ async function loadHeroCard() {
const [freqRes, recRes] = await Promise.allSettled([ const [freqRes, recRes] = await Promise.allSettled([
api('getAlbumList2', '&type=frequent&size=5'), api('getAlbumList2', '&type=frequent&size=5'),
api('getAlbumList2', '&type=recent&size=5'), api('getAlbumList2', '&type=recent&size=5'),
S.cfg.showRomaji ? fetchRomajiIndex().catch(() => {}) : Promise.resolve(),
]); ]);
const freqList = freqRes.status === 'fulfilled' ? (freqRes.value.albumList2?.album || []) : []; const freqList = freqRes.status === 'fulfilled' ? (freqRes.value.albumList2?.album || []) : [];
const recList = recRes.status === 'fulfilled' ? (recRes.value.albumList2?.album || []) : []; const recList = recRes.status === 'fulfilled' ? (recRes.value.albumList2?.album || []) : [];
@@ -59,8 +60,8 @@ async function loadHeroCard() {
${thumbUrl ? `<img class="home-hero-cover" src="${thumbUrl}" alt="${esc(album.name)}">` : ''} ${thumbUrl ? `<img class="home-hero-cover" src="${thumbUrl}" alt="${esc(album.name)}">` : ''}
<div class="home-hero-info"> <div class="home-hero-info">
<div class="home-hero-label">${heroLabel}</div> <div class="home-hero-label">${heroLabel}</div>
<div class="home-hero-title">${esc(album.name)}</div> <div class="home-hero-title">${esc(dispAlbumName(album.name))}</div>
<div class="home-hero-artist">${esc(album.artist || '')}</div> <div class="home-hero-artist">${esc(dispArtistById(album.artistId, album.artist || ''))}</div>
</div> </div>
<button class="home-hero-play" title="Abspielen"> <button class="home-hero-play" title="Abspielen">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>