danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Add clickable artist name link in download modal hero subtitle

Browse source 
The artist name in album download modals is now a clickable link
that navigates to the Artists page with that artist's discography.
Uses the correct source-specific artist ID from the album data.
Works on enhanced search, artists page, and discover page modals.
Excluded from playlist, wishlist, and default contexts where the
subtitle isn't an artist name.
This commit is contained in:
Broque Thomas 2026-03-26 08:22:52 -07:00
parent 77b6d4927c
commit 1e9abb588c
2 changed files with 35 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
webui/static/script.js
View file

@ -8261,10 +8261,13 @@ function initializeSearchModeToggle() {
// Format playlist name
const playlistName = `[${album.artist}] ${albumData.name}`;
// Create minimal artist object for the modal
// Create artist object for the modal — extract ID from album data
const firstArtist = (albumData.artists || [])[0] || {};
const artistObject = {
id: null, // No artist ID from enhanced search
name: album.artist
id: firstArtist.id || album.id?.split?.('_')?.[0] || '',
name: firstArtist.name || album.artist,
image_url: firstArtist.image_url || firstArtist.images?.[0]?.url || '',
source: _activeSearchSource || '',
};
// Prepare full album object for modal
@ -10710,7 +10713,7 @@ function generateDownloadModalHeroSection(context) {
</div>
<div class="download-missing-modal-hero-metadata">
<h1 class="download-missing-modal-hero-title">${escapeHtml(album.name || 'Unknown Album')}</h1>
<div class="download-missing-modal-hero-subtitle">by ${escapeHtml(artist.name || 'Unknown Artist')}</div>
<div class="download-missing-modal-hero-subtitle">by <a href="#" class="hero-artist-link" onclick="event.preventDefault();_navigateToArtistFromModal('${escapeHtml(artist.id || '')}','${escapeForInlineJs(artist.name || '')}','${escapeHtml(artist.image_url || '')}','${escapeHtml(artist.source || '')}','${escapeHtml(context.playlistId || '')}')">${escapeHtml(artist.name || 'Unknown Artist')}</a></div>
<div class="download-missing-modal-hero-details">
<span class="download-missing-modal-hero-detail">${album.album_type || 'Album'}</span>
<span class="download-missing-modal-hero-detail">${trackCount} tracks</span>
@ -11445,6 +11448,22 @@ async function openDownloadMissingModalForYouTube(virtualPlaylistId, playlistNam
hideLoadingOverlay();
}
function _navigateToArtistFromModal(artistId, artistName, imageUrl, source, playlistId) {
if (!artistName) return;
// Close the download modal
if (playlistId) closeDownloadMissingModal(playlistId);
// Navigate to Artists page and load discography
navigateToPage('artists');
setTimeout(() => {
// If we have an artist ID, use it directly
// If not, search by name — selectArtistForDetail handles both
selectArtistForDetail(
{ id: artistId || artistName, name: artistName, image_url: imageUrl || '' },
source ? { source: source } : undefined
);
}, 200);
}
async function closeDownloadMissingModal(playlistId) {
const process = activeDownloadProcesses[playlistId];
if (!process) {

12
webui/static/style.css
View file

@ -15339,6 +15339,18 @@ body.helper-mode-active #dashboard-activity-feed:hover {
font-weight: 500;
margin: 0;
opacity: 0.9;
}
.hero-artist-link {
color: rgb(var(--accent-light-rgb));
text-decoration: none;
transition: color 0.15s ease, opacity 0.15s ease;
cursor: pointer;
}
.hero-artist-link:hover {
color: rgb(var(--accent-rgb));
text-decoration: underline;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;