feat: keep Japanese in main tags, romaji in sort tags + frontend toggle
- Downloads now store original Japanese in TITLE/ARTIST/ALBUM tags so Apple Music, iTunes, YTM etc. all see the authentic original text - Sort tags (TITLESORT/ARTISTSORT/ALBUMSORT) written with romaji for apps that use them for sorting/display - iTunes-resolved English artist name used for ARTISTSORT and folder names when available (more accurate than kuromoji for known artists) - rawArtist parameter added to downloadTrack so YTM search query uses the original Japanese channel name (fixes wrong song downloads) - spotify.js: artistName preserved as original; itunesArtistName stored separately so the Spotify importer shows Japanese titles - romaji index now includes titleRomaji/artistRomaji/albumRomaji fields - Frontend: showRomaji setting (Settings > Bibliothek) — when on, player bar, now-playing, queue, and song lists all show romaji via index lookup - refreshDisplayMode() updates all live UI when the toggle is saved Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed
1 parent
f1eabf7099
commit
1aff19e319
10 files changed
+129
-44
No files matched your search
@@ -135,6 +135,9 @@ async function buildRomajiIndex(ndUrl, user, pass) {
|
||||
title: s.title,
|
||||
artist: s.artist || '',
|
||||
album: s.album || '',
|
||||
titleRomaji: romajiForStorage(s.title) || s.title,
|
||||
artistRomaji: romajiForStorage(s.artist) || s.artist || '',
|
||||
albumRomaji: romajiForStorage(s.album) || s.album || '',
|
||||
coverArt: s.coverArt || '',
|
||||
duration: s.duration || 0,
|
||||
albumId: s.albumId || '',
|
||||
|
||||
+37
-20
@@ -48,8 +48,11 @@ function buildVariantFilter(title) {
|
||||
return parts.length ? parts.join(' & ') : '';
|
||||
}
|
||||
|
||||
async function downloadTrack({ jobId, artist, albumArtist, title, album, year, trackNum, totalTracks, discNum, discTotal, compilation, genre, artworkUrl, explicit, outputDir, durationMs, sourceUrl }) {
|
||||
async function downloadTrack({ jobId, artist, rawArtist, albumArtist, title, album, year, trackNum, totalTracks, discNum, discTotal, compilation, genre, artworkUrl, explicit, outputDir, durationMs, sourceUrl }) {
|
||||
const mainArtist = albumArtist || artist;
|
||||
|
||||
// Folder / filename: romaji of the resolved artist (iTunes name if available — already in English,
|
||||
// otherwise kuromoji). rawArtist (original Japanese) is only used for tags + YTM search.
|
||||
const mainArtistRomaji = romajiForStorage(mainArtist) || mainArtist;
|
||||
const artistRomaji = romajiForStorage(artist) || artist;
|
||||
const titleRomaji = romajiForStorage(title) || title;
|
||||
@@ -73,11 +76,12 @@ async function downloadTrack({ jobId, artist, albumArtist, title, album, year, t
|
||||
}
|
||||
|
||||
const outputTemplate = path.join(dir, `${fileBase}.%(ext)s`);
|
||||
// Strip only Unicode symbol chars (☆ ★ ♥ etc.) for ytsearch — YouTube search chokes on them
|
||||
// and returns 0 results. Keep ASCII punctuation (!&-) so e.g. "N!GHT" stays "N!GHT" rather
|
||||
// than collapsing to "NGHT" which YouTube misreads as the word "night".
|
||||
const searchArtist = mainArtist.replace(/\p{S}/gu, '').trim();
|
||||
const query = `${searchArtist} - ${title}`;
|
||||
// For YTM search: use the original (raw) artist when available — the YTM channel is registered
|
||||
// under the Japanese/original name, not the iTunes-resolved English name.
|
||||
// rawArtist is undefined for non-Japanese tracks, so fall back to mainArtist.
|
||||
const ytmArtist = (rawArtist || mainArtist).replace(/\p{S}/gu, '').trim();
|
||||
const searchArtist = ytmArtist;
|
||||
const query = `${ytmArtist} - ${title}`;
|
||||
|
||||
const baseArgs = [
|
||||
'--extract-audio',
|
||||
@@ -112,8 +116,8 @@ async function downloadTrack({ jobId, artist, albumArtist, title, album, year, t
|
||||
});
|
||||
|
||||
const YTM_SONGS_PARAM = 'EgWKAQIIAWoKEAkQBRAKEAMQBA%3D%3D';
|
||||
// Use original artist name (with special chars) for YTM URL — better search ranking than stripped version
|
||||
const ytmQuery = `${mainArtist} - ${title}`;
|
||||
// Use original (raw) artist for YTM URL — better ranking since channel is in original language
|
||||
const ytmQuery = `${rawArtist || mainArtist} - ${title}`;
|
||||
const ytmUrl = `https://music.youtube.com/search?q=${encodeURIComponent(ytmQuery)}¶ms=${YTM_SONGS_PARAM}`;
|
||||
const expectedAudio = path.join(dir, `${fileBase}.${CONFIG.audioFmt}`);
|
||||
const hasAudio = () => fs.existsSync(expectedAudio);
|
||||
@@ -124,7 +128,7 @@ async function downloadTrack({ jobId, artist, albumArtist, title, album, year, t
|
||||
await spawnYtdlp([sourceUrl, '--no-playlist', ...baseArgs]);
|
||||
const audioFile = hasAudio() ? expectedAudio : null;
|
||||
if (!audioFile) { log(jobId, '⚠️ Download fehlgeschlagen'); return { success: true, dir }; }
|
||||
return embedMetadata({ jobId, audioFile, dir, trackPrefix, safeTitle, artist, mainArtist, album, year, trackNum, totalTracks, discNum, discTotal, compilation, genre, artworkUrl, explicit, title });
|
||||
return embedMetadata({ jobId, audioFile, dir, trackPrefix, safeTitle, rawArtist, artist, mainArtist, album, year, trackNum, totalTracks, discNum, discTotal, compilation, genre, artworkUrl, explicit, title });
|
||||
}
|
||||
|
||||
// Fetch YTM search result URLs as a flat list (no channel expansion) and return only
|
||||
@@ -172,7 +176,7 @@ async function downloadTrack({ jobId, artist, albumArtist, title, album, year, t
|
||||
// downloading a same-title song by a different artist (e.g. wrong "Moonlight" for N!GHT).
|
||||
// Dropped in later fallback steps so genuine mismatches (label channels etc.) still get found.
|
||||
const escRe = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
const artistFirstWord = mainArtist.split(/[\s,/]+/)[0];
|
||||
const artistFirstWord = (rawArtist || mainArtist).split(/[\s,/]+/)[0];
|
||||
const artistChannelPart = artistFirstWord.length >= 3
|
||||
? ` & channel ~= (?i)${escRe(artistFirstWord)}` : '';
|
||||
|
||||
@@ -287,11 +291,11 @@ async function downloadTrack({ jobId, artist, albumArtist, title, album, year, t
|
||||
return { success: true, dir };
|
||||
}
|
||||
|
||||
return embedMetadata({ jobId, audioFile, dir, trackPrefix, safeTitle, artist, mainArtist, album, year, trackNum, totalTracks, discNum, discTotal, compilation, genre, artworkUrl, explicit, title });
|
||||
return embedMetadata({ jobId, audioFile, dir, trackPrefix, safeTitle, rawArtist, artist, mainArtist, album, year, trackNum, totalTracks, discNum, discTotal, compilation, genre, artworkUrl, explicit, title });
|
||||
}
|
||||
|
||||
// Shared ffmpeg metadata embedding — used by both yt-dlp and squid paths
|
||||
async function embedMetadata({ jobId, audioFile, dir, trackPrefix, safeTitle, artist, mainArtist, album, year, trackNum, totalTracks, discNum, discTotal, compilation, genre, artworkUrl, explicit, title }) {
|
||||
async function embedMetadata({ jobId, audioFile, dir, trackPrefix, safeTitle, rawArtist, artist, mainArtist, album, year, trackNum, totalTracks, discNum, discTotal, compilation, genre, artworkUrl, explicit, title }) {
|
||||
const coverPath = await downloadArtwork(artworkUrl, dir);
|
||||
const hasCover = !!(coverPath && fs.existsSync(coverPath));
|
||||
|
||||
@@ -304,19 +308,32 @@ async function embedMetadata({ jobId, audioFile, dir, trackPrefix, safeTitle, ar
|
||||
if (hasCover) ffArgs.push('-i', coverPath);
|
||||
ffArgs.push('-map', '0:a');
|
||||
if (hasCover) ffArgs.push('-map', '1:v');
|
||||
const storedTitle = romajiForStorage(title) || title;
|
||||
const storedArtist = romajiForStorage(navidromeArtist(artist)) || navidromeArtist(artist);
|
||||
const storedAlbumArtist = romajiForStorage(mainArtist.replace(/\s+&\s+/g, ', ')) || mainArtist.replace(/\s+&\s+/g, ', ');
|
||||
const storedAlbum = album ? (romajiForStorage(album) || album) : null;
|
||||
// Main tags: store original text (Japanese or whatever was passed in).
|
||||
// rawArtist = original Spotify/source artist (may be Japanese); artist = iTunes-resolved (may be English).
|
||||
// Use rawArtist for the stored tag so Apple Music / other apps see the authentic original.
|
||||
const tagArtist = navidromeArtist(rawArtist || artist);
|
||||
const tagAlbumArtist = (rawArtist || mainArtist).replace(/\s+&\s+/g, ', ');
|
||||
// Sort tags: romaji for display / sorting in apps that support them (TITLESORT, ARTISTSORT, etc.)
|
||||
// artist is already the iTunes-resolved English name when available — use directly (more accurate
|
||||
// than kuromoji). For non-iTunes tracks romajiForStorage acts as kuromoji fallback.
|
||||
const sortTitle = romajiForStorage(title) || title;
|
||||
const sortArtist = romajiForStorage(navidromeArtist(artist)) || navidromeArtist(artist);
|
||||
const sortAlbumArtist = romajiForStorage(mainArtist.replace(/\s+&\s+/g, ', ')) || mainArtist.replace(/\s+&\s+/g, ', ');
|
||||
const sortAlbum = album ? (romajiForStorage(album) || album) : null;
|
||||
ffArgs.push(
|
||||
'-c', 'copy',
|
||||
'-map_metadata', '-1',
|
||||
'-id3v2_version', '3',
|
||||
'-metadata', `title=${storedTitle}`,
|
||||
'-metadata', `artist=${storedArtist}`,
|
||||
'-metadata', `album_artist=${storedAlbumArtist}`,
|
||||
'-metadata', `title=${title}`,
|
||||
'-metadata', `artist=${tagArtist}`,
|
||||
'-metadata', `album_artist=${tagAlbumArtist}`,
|
||||
);
|
||||
if (storedAlbum) ffArgs.push('-metadata', `album=${storedAlbum}`);
|
||||
if (album) ffArgs.push('-metadata', `album=${album}`);
|
||||
// Sort tags — only write when they differ from main (no-op for non-Japanese tracks)
|
||||
if (sortTitle !== title) ffArgs.push('-metadata', `TITLESORT=${sortTitle}`);
|
||||
if (sortArtist !== tagArtist) ffArgs.push('-metadata', `ARTISTSORT=${sortArtist}`);
|
||||
if (sortAlbumArtist !== tagAlbumArtist) ffArgs.push('-metadata', `ALBUMARTISTSORT=${sortAlbumArtist}`);
|
||||
if (sortAlbum && sortAlbum !== album) ffArgs.push('-metadata', `ALBUMSORT=${sortAlbum}`);
|
||||
if (year) ffArgs.push('-metadata', `date=${String(year)}`);
|
||||
if (trackNum) ffArgs.push('-metadata', `track=${totalTracks ? `${trackNum}/${totalTracks}` : String(trackNum)}`);
|
||||
if (totalTracks) ffArgs.push('-metadata', `totaltracks=${String(totalTracks)}`);
|
||||
|
||||
@@ -373,7 +373,7 @@ app.post('/api/download', async (req, res) => {
|
||||
log(jobId, `📋 Album aus Spotify: "${meta.album}"`);
|
||||
}
|
||||
const finalArtist = meta.itunesArtistName || artist;
|
||||
const result = await downloadTrack({ jobId, artist: finalArtist, title, ...meta, sourceUrl: sourceUrl || sp.sourceUrl || undefined });
|
||||
const result = await downloadTrack({ jobId, artist: finalArtist, rawArtist: artist, title, ...meta, sourceUrl: sourceUrl || sp.sourceUrl || undefined });
|
||||
if (result?.skipped) {
|
||||
updateJob(jobId, { status: 'done', progress: 100, message: 'Bereits vorhanden – übersprungen', skipped: true });
|
||||
} else {
|
||||
@@ -447,10 +447,13 @@ app.post('/api/download', async (req, res) => {
|
||||
log(jobId, `📋 iTunes: "${trackArtist} – ${trackTitle}"`);
|
||||
itunes = await lookupItunesTrackMeta(searchArtist, trackTitle);
|
||||
}
|
||||
const resolvedArtist = itunes.itunesArtistName || trackArtist;
|
||||
// Prefer iTunes-resolved name (from server lookup or frontend enrichment) for sort tags / folders.
|
||||
// trackArtist stays as rawArtist for main tags and YTM search.
|
||||
const resolvedArtist = itunes.itunesArtistName || track.itunesArtistName || trackArtist;
|
||||
return downloadTrack({
|
||||
jobId,
|
||||
artist: resolvedArtist,
|
||||
artist: resolvedArtist, // iTunes English name → used for sort tags + folder names
|
||||
rawArtist: trackArtist, // original Spotify/Japanese name → used for main tag + YTM search
|
||||
albumArtist: resolvedArtist,
|
||||
title: trackTitle,
|
||||
album: itunes.album || track.collectionName || track.album || '',
|
||||
@@ -689,11 +692,18 @@ app.post('/api/edit-metadata', async (req, res) => {
|
||||
ffArgs.push('-map', '0:v?'); // '?' = optional, no error if file has no cover
|
||||
}
|
||||
ffArgs.push('-c', 'copy', '-map_metadata', '-1', '-id3v2_version', '3');
|
||||
if (romajiTitle) ffArgs.push('-metadata', `title=${romajiTitle}`);
|
||||
if (romajiArtist) ffArgs.push('-metadata', `artist=${romajiArtist}`);
|
||||
const resolvedAlbumArtist = romajiAlbumArtist || (romajiArtist ? romajiArtist.split(';')[0].trim() : null);
|
||||
// Main tags: store original user input (may be Japanese — Apple Music / other apps see authentic text)
|
||||
if (title) ffArgs.push('-metadata', `title=${title}`);
|
||||
if (normalArtist) ffArgs.push('-metadata', `artist=${normalArtist}`);
|
||||
const resolvedAlbumArtist = normalAlbumArtist || (normalArtist ? normalArtist.split(';')[0].trim() : null);
|
||||
if (resolvedAlbumArtist) ffArgs.push('-metadata', `album_artist=${resolvedAlbumArtist}`);
|
||||
if (romajiAlbum) ffArgs.push('-metadata', `album=${romajiAlbum}`);
|
||||
if (album) ffArgs.push('-metadata', `album=${album}`);
|
||||
// Sort tags: romaji versions for apps that use them for sorting / display
|
||||
if (romajiTitle && romajiTitle !== title) ffArgs.push('-metadata', `TITLESORT=${romajiTitle}`);
|
||||
if (romajiArtist && romajiArtist !== normalArtist) ffArgs.push('-metadata', `ARTISTSORT=${romajiArtist}`);
|
||||
const resolvedRomajiAA = romajiAlbumArtist || (romajiArtist ? romajiArtist.split(';')[0].trim() : null);
|
||||
if (resolvedRomajiAA && resolvedRomajiAA !== resolvedAlbumArtist) ffArgs.push('-metadata', `ALBUMARTISTSORT=${resolvedRomajiAA}`);
|
||||
if (romajiAlbum && romajiAlbum !== album) ffArgs.push('-metadata', `ALBUMSORT=${romajiAlbum}`);
|
||||
if (year) ffArgs.push('-metadata', `date=${year}`);
|
||||
if (trackNum) ffArgs.push('-metadata', `track=${totalTracks ? `${trackNum}/${totalTracks}` : String(trackNum)}`);
|
||||
if (totalTracks) ffArgs.push('-metadata', `totaltracks=${String(totalTracks)}`);
|
||||
|
||||
@@ -656,6 +656,11 @@
|
||||
<div id="s-show-playcount" class="toggle" onclick="this.classList.toggle('on')"></div>
|
||||
</div>
|
||||
<div class="hint" style="margin-top:6px">Zeigt Wiedergabezahl in Album- und Playlist-Ansichten. Künstlerseite zeigt sie immer.</div>
|
||||
<div class="edit-pl-toggle-row" style="margin-top:12px">
|
||||
<span>Romaji anzeigen</span>
|
||||
<div id="s-show-romaji" class="toggle" onclick="this.classList.toggle('on')"></div>
|
||||
</div>
|
||||
<div class="hint" style="margin-top:6px">Zeigt japanische Titel und Künstlernamen in Romaji (lateinische Umschrift). Originaltitel bleiben in den Datei-Tags erhalten.</div>
|
||||
</div>
|
||||
<div class="settings-section">
|
||||
<h3 style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
|
||||
|
||||
+36
-2
@@ -52,8 +52,15 @@ export async function ndAuth() {
|
||||
// ─── ROMAJI INDEX ───
|
||||
// Fetched once per session from the backend, cached in memory.
|
||||
let _romajiIndex = null;
|
||||
let _romajiMap = null; // Map<songId, { titleRomaji, artistRomaji, albumRomaji }>
|
||||
let _romajiIndexFetch = null; // in-flight promise dedup
|
||||
|
||||
function _buildRomajiMap(idx) {
|
||||
const m = new Map();
|
||||
if (Array.isArray(idx)) idx.forEach(e => m.set(String(e.id), e));
|
||||
return m;
|
||||
}
|
||||
|
||||
export async function fetchRomajiIndex() {
|
||||
if (!S.cfg.backendUrl || !S.cfg.url || !S.cfg.user || !S.cfg.pass) return null;
|
||||
if (_romajiIndex) return _romajiIndex;
|
||||
@@ -61,12 +68,39 @@ export async function fetchRomajiIndex() {
|
||||
_romajiIndexFetch = fetch(
|
||||
`${S.cfg.backendUrl}/api/romaji-index?ndUrl=${encodeURIComponent(S.cfg.url)}&user=${encodeURIComponent(S.cfg.user)}&pass=${encodeURIComponent(S.cfg.pass)}`
|
||||
).then(r => r.ok ? r.json() : null)
|
||||
.then(idx => { _romajiIndex = idx; _romajiIndexFetch = null; return idx; })
|
||||
.then(idx => { _romajiIndex = idx; _romajiMap = _buildRomajiMap(idx); _romajiIndexFetch = null; return idx; })
|
||||
.catch(() => { _romajiIndexFetch = null; return null; });
|
||||
return _romajiIndexFetch;
|
||||
}
|
||||
|
||||
export function invalidateRomajiIndex() { _romajiIndex = null; }
|
||||
export function invalidateRomajiIndex() { _romajiIndex = null; _romajiMap = null; }
|
||||
|
||||
// Synchronous lookup — returns index entry for a song ID, or null if not in index.
|
||||
export function romajiLookup(id) { return _romajiMap?.get(String(id)) ?? null; }
|
||||
|
||||
// Display helpers — return romaji when showRomaji is on and the song is in the index,
|
||||
// otherwise fall back to the original Navidrome values.
|
||||
export function dispTitle(s) {
|
||||
if (!S.cfg.showRomaji) return s.title || '';
|
||||
return romajiLookup(s.id)?.titleRomaji || s.title || '';
|
||||
}
|
||||
export function dispArtist(s) {
|
||||
if (!S.cfg.showRomaji) return s.artist || '';
|
||||
return romajiLookup(s.id)?.artistRomaji || s.artist || '';
|
||||
}
|
||||
export function dispAlbum(s) {
|
||||
if (!S.cfg.showRomaji) return s.album || '';
|
||||
return romajiLookup(s.id)?.albumRomaji || s.album || '';
|
||||
}
|
||||
// Returns [{name, id}] like parseArtists but with romaji display names when showRomaji is on.
|
||||
// Multi-artist romaji is collapsed into one entry since we can't reliably split the converted string.
|
||||
export function dispArtistParts(s, parseArtistsFn) {
|
||||
const parts = parseArtistsFn(s);
|
||||
if (!S.cfg.showRomaji) return parts;
|
||||
const info = romajiLookup(s.id);
|
||||
if (!info?.artistRomaji) return parts;
|
||||
return [{ name: info.artistRomaji, id: parts[0]?.id || '' }];
|
||||
}
|
||||
|
||||
export async function romajiConvert(texts) {
|
||||
if (!S.cfg.backendUrl || !texts.length) return texts;
|
||||
|
||||
+3
-3
@@ -1,6 +1,6 @@
|
||||
import { S } from './state.js';
|
||||
import { esc, formatDur } from './utils.js';
|
||||
import { coverUrl } from './api.js';
|
||||
import { coverUrl, dispTitle, dispArtistParts, dispAlbum } from './api.js';
|
||||
// Circular imports — safe (only used inside event handlers after module init)
|
||||
import { playQueue, toggleStar, playPreview, parseArtists } from './player.js';
|
||||
import { showCtxMenu, openDlModal } from './ui.js';
|
||||
@@ -33,7 +33,7 @@ export function makeSongItem(s, idx, list, { noArtistLink = false } = {}) {
|
||||
el.className = 'song-item' + (S.queue[S.qIdx]?.id === s.id ? ' playing' : '');
|
||||
el.dataset.songId = s.id;
|
||||
const cv = coverUrl(s.coverArt, 128);
|
||||
const artistParts = parseArtists(s);
|
||||
const artistParts = dispArtistParts(s, parseArtists);
|
||||
const artistHtml = artistParts.length
|
||||
? artistParts.map(a => noArtistLink
|
||||
? `<span style="color:var(--text2)">${esc(a.name)}</span>`
|
||||
@@ -47,7 +47,7 @@ export function makeSongItem(s, idx, list, { noArtistLink = false } = {}) {
|
||||
el.innerHTML = `<div class="song-num">${idx+1}</div>
|
||||
<div class="song-thumb">${cv ? `<img src="${cv}" loading="lazy" onerror="this.parentNode.innerHTML='<div class=\\'no-art\\'>♪</div>'">` : '<div class="no-art">♪</div>'}</div>
|
||||
<div class="song-info">
|
||||
<div class="song-title">${esc(s.title)}</div>
|
||||
<div class="song-title">${esc(dispTitle(s))}</div>
|
||||
<div class="song-artist">${artistHtml}</div>
|
||||
</div>
|
||||
<div class="song-meta">
|
||||
|
||||
+16
-8
@@ -1,6 +1,6 @@
|
||||
import { S } from './state.js';
|
||||
import { esc, formatDur, toast } from './utils.js';
|
||||
import { api, streamUrl, coverUrl, downloadUrl } from './api.js';
|
||||
import { api, streamUrl, coverUrl, downloadUrl, dispTitle, dispArtist, dispArtistParts, dispAlbum } from './api.js';
|
||||
// views.js/ui.js circular imports — safe (only used inside function bodies)
|
||||
import { loadRecommendations } from './views.js';
|
||||
import { updateLyricsHighlight, onNpSongChange } from './nowplaying.js';
|
||||
@@ -451,13 +451,13 @@ export function parseArtists(s) {
|
||||
}
|
||||
|
||||
export function updatePlayerUI(s, _skipMediaSession = false) {
|
||||
document.getElementById('player-title').textContent = s.title;
|
||||
const artistParts = parseArtists(s);
|
||||
document.getElementById('player-title').textContent = dispTitle(s);
|
||||
const artistParts = dispArtistParts(s, parseArtists);
|
||||
document.getElementById('player-artist-name').innerHTML = artistParts.length
|
||||
? artistParts.map(a => `<span style="cursor:pointer" onclick="s_goArtist(event,'${esc(a.name)}','${a.id||''}')">${esc(a.name)}</span>`)
|
||||
.join('<span style="color:var(--text3)"> • </span>')
|
||||
: '—';
|
||||
document.getElementById('player-album-name').textContent = s.album || '';
|
||||
document.getElementById('player-album-name').textContent = dispAlbum(s);
|
||||
const art = document.getElementById('player-art');
|
||||
const cv = coverUrl(s.coverArt, 256);
|
||||
const existingImg = art.querySelector('img');
|
||||
@@ -518,16 +518,16 @@ export function _syncNpDirect(s) {
|
||||
else cover.innerHTML = cv ? `<img src="${cv}" style="width:100%;height:100%;object-fit:cover">` : '<div class="no-art">♪</div>';
|
||||
}
|
||||
_crossfadeNpBg(cv);
|
||||
const t = document.getElementById('np-title'); if(t) t.textContent = s.title || '—';
|
||||
const t = document.getElementById('np-title'); if(t) t.textContent = dispTitle(s) || '—';
|
||||
const an = document.getElementById('np-artist-name');
|
||||
if(an) {
|
||||
const parts = parseArtists(s);
|
||||
const parts = dispArtistParts(s, parseArtists);
|
||||
an.innerHTML = parts.length
|
||||
? parts.map(a => `<span style="cursor:pointer" onclick="closeNowPlaying();s_goArtist(event,'${esc(a.name)}','${a.id||''}')">${esc(a.name)}</span>`)
|
||||
.join('<span style="opacity:.5"> • </span>')
|
||||
: '—';
|
||||
}
|
||||
const aln = document.getElementById('np-album-name'); if(aln) aln.textContent = s.album || '';
|
||||
const aln = document.getElementById('np-album-name'); if(aln) aln.textContent = dispAlbum(s);
|
||||
syncNpStar();
|
||||
}
|
||||
|
||||
@@ -994,7 +994,7 @@ export function renderQueue() {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'queue-item' + (i === S.qIdx ? ' active' : '');
|
||||
const cv = coverUrl(s.coverArt, 128);
|
||||
item.innerHTML = `<div class="qi-idx">${i+1}</div><div class="qi-art">${cv ? `<img src="${cv}">` : '♪'}</div><div class="qi-info"><div class="qi-title">${esc(s.title)}</div><div class="qi-artist">${esc(s.artist||'')}</div></div>`;
|
||||
item.innerHTML = `<div class="qi-idx">${i+1}</div><div class="qi-art">${cv ? `<img src="${cv}">` : '♪'}</div><div class="qi-info"><div class="qi-title">${esc(dispTitle(s))}</div><div class="qi-artist">${esc(dispArtist(s))}</div></div>`;
|
||||
item.onclick = () => { S.qIdx = i; playCurrent(); };
|
||||
el.appendChild(item);
|
||||
});
|
||||
@@ -1008,6 +1008,14 @@ export function toggleQueue() {
|
||||
_syncOverlayState();
|
||||
}
|
||||
|
||||
// Called after showRomaji is toggled — re-renders all live player UI with new display mode.
|
||||
export function refreshDisplayMode() {
|
||||
_renderedQueueKey = ''; // force queue re-render
|
||||
if (S.queueOpen) renderQueue();
|
||||
const s = S.queue[S.qIdx];
|
||||
if (s) { updatePlayerUI(s, true); _syncNpDirect(s); }
|
||||
}
|
||||
|
||||
// ─── DOWNLOAD ─────────────────────────────────────────────────────────────
|
||||
|
||||
export function dlSongLocal(s) {
|
||||
|
||||
+3
-2
@@ -295,8 +295,9 @@ async function _loadSpotifyTrackArtwork(tracks, listEl) {
|
||||
if (match.trackExplicitness) t.trackExplicitness = match.trackExplicitness;
|
||||
if (match.previewUrl) t.previewUrl = match.previewUrl;
|
||||
if (match.trackTimeMillis) t.durationMs = match.trackTimeMillis;
|
||||
// Use iTunes canonical English/romaji artist name (Spotify may have Japanese or wrong order)
|
||||
if (match.artistName) t.artistName = match.artistName;
|
||||
// Store iTunes canonical name separately — keeps original Spotify/Japanese in artistName
|
||||
// so the UI shows the original and YTM search uses the original channel name.
|
||||
if (match.artistName) t.itunesArtistName = match.artistName;
|
||||
if (window._spotifyResolved?.tracks?.[idx]) Object.assign(window._spotifyResolved.tracks[idx], t);
|
||||
const url = match.artworkUrl100 || match.artworkUrl60 || '';
|
||||
if (url) _setArt(artEls[idx], url);
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
// Shared mutable state — imported as { S } in every module
|
||||
export const S = {
|
||||
cfg: { url: '', user: '', pass: '', lastfmKey: '', backendUrl: '', showPlayCount: false },
|
||||
cfg: { url: '', user: '', pass: '', lastfmKey: '', backendUrl: '', showPlayCount: false, showRomaji: false },
|
||||
|
||||
// Playback
|
||||
queue: [],
|
||||
|
||||
@@ -3,7 +3,7 @@ import { esc, formatDur, toast } from './utils.js';
|
||||
import { api, coverUrl, ndAuth, fetchRomajiIndex, romajiConvert } from './api.js';
|
||||
import { THEMES, applyTheme, getCurrentThemeId } from './themes.js';
|
||||
// Circular imports — safe (only used inside function bodies)
|
||||
import { playQueue, dlSongLocal, toggleStar, togglePlay, renderQueue, syncNpStar, updateStarBtn, npToggleStar, playCurrent, _syncNpDirect, setPlayIcon, nativeInsertAt } from './player.js';
|
||||
import { playQueue, dlSongLocal, toggleStar, togglePlay, renderQueue, syncNpStar, updateStarBtn, npToggleStar, playCurrent, _syncNpDirect, setPlayIcon, nativeInsertAt, refreshDisplayMode } from './player.js';
|
||||
import { navigate, loadPlaylists } from './views.js';
|
||||
|
||||
// ─── SIDEBAR ───
|
||||
@@ -60,6 +60,7 @@ export function openSettings() {
|
||||
document.getElementById('s-lastfm').value = S.cfg.lastfmKey || '';
|
||||
document.getElementById('s-backend').value = S.cfg.backendUrl || '';
|
||||
document.getElementById('s-show-playcount').classList.toggle('on', !!S.cfg.showPlayCount);
|
||||
document.getElementById('s-show-romaji').classList.toggle('on', !!S.cfg.showRomaji);
|
||||
_renderThemePicker();
|
||||
document.getElementById('settings-modal').classList.add('open');
|
||||
checkBackend();
|
||||
@@ -93,8 +94,14 @@ export function saveSettings() {
|
||||
S.cfg.lastfmKey = document.getElementById('s-lastfm').value.trim();
|
||||
S.cfg.backendUrl = document.getElementById('s-backend').value.trim().replace(/\/$/,'');
|
||||
S.cfg.showPlayCount = document.getElementById('s-show-playcount').classList.contains('on');
|
||||
const romajiChanged = S.cfg.showRomaji !== document.getElementById('s-show-romaji').classList.contains('on');
|
||||
S.cfg.showRomaji = document.getElementById('s-show-romaji').classList.contains('on');
|
||||
localStorage.setItem('ns_cfg', JSON.stringify(S.cfg));
|
||||
closeSettings(); toast('✅ Gespeichert');
|
||||
if (romajiChanged) {
|
||||
// Pre-load the index so display is instant, then refresh all live UI
|
||||
fetchRomajiIndex().then(() => refreshDisplayMode());
|
||||
}
|
||||
}
|
||||
export async function checkBackend() {
|
||||
const dot = document.getElementById('backend-status-dot');
|
||||
|
||||
Reference in new issue
Block a user