From 3c2ba15f8aa592086a7fd0249a372e8275b31c7c Mon Sep 17 00:00:00 2001 From: Your Name Date: Sun, 11 Jan 2026 20:00:48 +0100 Subject: [PATCH] Use search thumbnail in detail views for consistent images --- ui.ts | 43 +++++++++++++++++++++++++++---------------- 1 file changed, 27 insertions(+), 16 deletions(-) diff --git a/ui.ts b/ui.ts index ead1bf6..e4bc189 100644 --- a/ui.ts +++ b/ui.ts @@ -299,23 +299,25 @@ function render(f,append){ var isAlbum=bid.startsWith('MPRE')&&!isPlaylist; var isArtist=bid.startsWith('UC')||type==='artist'; + // Store thumbnail for later use + var thumb=s.thumbnails?.[0]?.url||(s.videoId?'https://img.youtube.com/vi/'+s.videoId+'/mqdefault.jpg':''); + if(playable){ click='play('+i+')'; }else if(isPlaylist&&bid){ - click="viewPlaylist('"+bid+"')"; + click="viewPlaylist('"+bid+"','"+encodeURIComponent(thumb)+"','"+encodeURIComponent(s.title||'')+"')"; type='playlist'; }else if(isAlbum&&bid){ - click="viewAlbum('"+bid+"')"; + click="viewAlbum('"+bid+"','"+encodeURIComponent(thumb)+"','"+encodeURIComponent(s.title||'')+"')"; type='album'; }else if(isArtist&&bid){ - click="viewArtist('"+bid+"')"; + click="viewArtist('"+bid+"','"+encodeURIComponent(thumb)+"','"+encodeURIComponent(s.title||'')+"')"; type='artist'; }else if(bid){ - click="viewArtist('"+bid+"')"; + click="viewArtist('"+bid+"','"+encodeURIComponent(thumb)+"','"+encodeURIComponent(s.title||'')+"')"; } - var img=s.thumbnails?.[0]?.url||(s.videoId?'https://img.youtube.com/vi/'+s.videoId+'/mqdefault.jpg':''); var badge=type!=='song'&&type!=='video'?''+type+'':''; - return '
'+esc(s.title||s.name||'Unknown')+badge+'
'+esc(s.artists?.map(a=>a.name).join(', ')||s.subtitle||'')+'
'+(s.duration||'')+'
'; + return '
'+esc(s.title||s.name||'Unknown')+badge+'
'+esc(s.artists?.map(a=>a.name).join(', ')||s.subtitle||'')+'
'+(s.duration||'')+'
'; }).join(''); if(append)el.innerHTML+=html; else el.innerHTML=html; @@ -335,7 +337,9 @@ function prev(){if(idx>0)play(idx-1)} function next(){if(idx{tracks.push({...a,resultType:'album',browseId:a.browseId,thumbnails:[{url:a.thumbnail}]})}); } songs=tracks; - // Show artist header - var thumb=artist.thumbnail||artist.thumbnails?.[0]?.url||''; - var header='
'+esc(artist.name||'Artist')+'
'+(artist.subscribers||'')+'
'; + // Use search thumbnail if available, otherwise API thumbnail + var thumb=searchThumb||artist.thumbnail||artist.thumbnails?.[0]?.url||''; + var name=searchName||artist.name||'Artist'; + var header='
'+esc(name)+'
'+(artist.subscribers||'')+'
'; document.getElementById('results').innerHTML=header; render(null,true); }catch(e){document.getElementById('results').innerHTML='
Failed to load artist
';} document.getElementById('loading').style.display='none'; } -async function viewAlbum(id){ +async function viewAlbum(id,thumbEnc,nameEnc){ + var searchThumb=thumbEnc?decodeURIComponent(thumbEnc):''; + var searchName=nameEnc?decodeURIComponent(nameEnc):''; document.getElementById('loading').style.display='block'; document.getElementById('results').innerHTML=''; try{ var res=await fetch('/api/albums/'+encodeURIComponent(id)); var data=await res.json(); var album=data.album||data; - var albumThumb=album.thumbnail||album.thumbnails?.[0]?.url||''; + var albumThumb=searchThumb||album.thumbnail||album.thumbnails?.[0]?.url||''; + var albumName=searchName||album.title||'Album'; songs=(data.tracks||[]).map(t=>({...t,resultType:'song',thumbnails:[{url:albumThumb}]})); // Show album header var artistName=data.artist?.name||album.artists?.map(a=>a.name).join(', ')||''; - var header='
'+esc(album.title||'Album')+'
'+esc(artistName)+'
'+(album.year||'')+' - '+(album.trackCount||songs.length)+' tracks
'; + var header='
'+esc(albumName)+'
'+esc(artistName)+'
'+(album.year||'')+' - '+(album.trackCount||songs.length)+' tracks
'; document.getElementById('results').innerHTML=header; render(null,true); }catch(e){document.getElementById('results').innerHTML='
Failed to load album
';} document.getElementById('loading').style.display='none'; } -async function viewPlaylist(id){ +async function viewPlaylist(id,thumbEnc,nameEnc){ + var searchThumb=thumbEnc?decodeURIComponent(thumbEnc):''; + var searchName=nameEnc?decodeURIComponent(nameEnc):''; document.getElementById('loading').style.display='block'; document.getElementById('results').innerHTML=''; try{ @@ -388,10 +398,11 @@ async function viewPlaylist(id){ var playlistId=id.startsWith('VL')?id.substring(2):id; var res=await fetch('/api/playlists/'+encodeURIComponent(playlistId)); var data=await res.json(); - var playlistThumb=data.thumbnail||data.thumbnails?.[0]?.url||''; + var playlistThumb=searchThumb||data.thumbnail||data.thumbnails?.[0]?.url||''; + var playlistName=searchName||data.title||'Playlist'; songs=(data.tracks||[]).map(t=>({...t,resultType:'song'})); // Show playlist header - var header='
'+esc(data.title||'Playlist')+'
'+esc(data.author||'')+'
'+(data.trackCount||songs.length)+' tracks
'; + var header='
'+esc(playlistName)+'
'+esc(data.author||'')+'
'+(data.trackCount||songs.length)+' tracks
'; document.getElementById('results').innerHTML=header; render(null,true); }catch(e){document.getElementById('results').innerHTML='
Failed to load playlist
';}