feat: YouTube/YT Music importer + album artist in view mode

- Info modal view now shows Album-Künstler row from Navidrome albumArtist
- Song Importer detects youtube.com / youtu.be URLs (red badge)
- New /api/youtube/resolve endpoint: yt-dlp --dump-json for single
  videos and playlists (up to 50 entries), enriched with iTunes lookup
  for proper album/year/genre/cover on single tracks
- New src/youtube.js renders preview card and delegates download to
  executeSpotifyDownload (which already handles sourceUrl → direct yt-dlp)
- Importer hint updated to list YouTube as a supported source

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed 2026-05-23 21:55:37 +02:00
1 parent 3df1990d41
commit ae48ed4129
6 files changed
+201 -5

No files matched your search

+13 -1
View File
@@ -386,7 +386,7 @@
<div style="display:flex;gap:8px">
<div class="search-box" style="background:var(--surface);border-color:var(--border2);flex:1">
<div id="importer-badge" style="font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;background:var(--surface2);color:var(--text3);white-space:nowrap;flex-shrink:0">URL</div>
<input id="importer-link-input" type="url" placeholder="Spotify oder SoundCloud Link einfügen…" style="font-size:14px" oninput="onImporterInput(this.value)">
<input id="importer-link-input" type="url" placeholder="Spotify, SoundCloud oder YouTube Link einfügen…" style="font-size:14px" oninput="onImporterInput(this.value)">
</div>
<button id="importer-btn" class="btn-outline" style="padding:0 16px;font-size:13px;font-weight:700;white-space:nowrap;flex-shrink:0" onclick="resolveImporterLink()">Importieren</button>
</div>
@@ -395,6 +395,7 @@
<div style="display:flex;gap:16px;flex-wrap:wrap">
<div style="display:flex;align-items:center;gap:6px"><span style="color:#1DB954;font-weight:700">Spotify</span> — Track, Album oder Playlist</div>
<div style="display:flex;align-items:center;gap:6px"><span style="color:#ff5500;font-weight:700">SoundCloud</span> — Track oder Playlist</div>
<div style="display:flex;align-items:center;gap:6px"><span style="color:#FF0000;font-weight:700">YouTube</span> — Video oder Playlist</div>
</div>
<div style="margin-top:6px;color:var(--text3);font-size:11px">Link einfügen → Metadaten werden geladen → via yt-dlp in die Navidrome Library herunterladen.</div>
</div>
@@ -425,6 +426,17 @@
<div id="sc-tracks-list" class="song-list"></div>
</div>
</div>
<!-- YOUTUBE RESULTS -->
<div id="yt-preview" style="display:none;margin-bottom:8px">
<div id="yt-preview-inner"></div>
<div id="yt-tracks-section" style="display:none">
<div class="section-header" style="margin-top:8px">
<span class="section-title" id="yt-tracks-title">Tracks</span>
</div>
<div id="yt-tracks-list" class="song-list"></div>
</div>
</div>
</div>
</main>