NoRoutes/vibesonic
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make the now-playing bar's title/artist clickable and add a cover art lightbox

Browse Source 
The song title links to its album, the artist name links to the artist
page, and clicking the cover art opens a larger version in a modal.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014r98AtcBbevpscWLsfwVvv
This commit is contained in:
owen
2026-08-23 22:04:36 -05:00
co-authored by Claude Sonnet 5
parent 866f243f1b
commit 9a3f1e4a24
6 changed files with 68 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/js/app.js
+18
View File
@@ -114,7 +114,9 @@
if (!song) return;
this.audio.src = "/stream/" + encodeURIComponent(song.id);
this.ui.title.textContent = song.title || "";
this.ui.title.href = song.albumId ? "/albums/" + encodeURIComponent(song.albumId) : "javascript:void(0)";
this.ui.artist.textContent = song.artist || "";
this.ui.artist.href = song.artistId ? "/artists/" + encodeURIComponent(song.artistId) : "javascript:void(0)";
this.ui.art.src = song.cover ? "/cover-art/" + encodeURIComponent(song.cover) + "?size=100" : "/static/img/default-art.svg";
this.ui.starBtn.dataset.itemType = "song";
this.ui.starBtn.dataset.itemId = song.id;
@@ -307,7 +309,9 @@
id: node.dataset.songId,
title: node.dataset.title,
artist: node.dataset.artist,
artistId: node.dataset.artistId,
album: node.dataset.album,
albumId: node.dataset.albumId,
cover: node.dataset.cover,
starred: node.dataset.starred === "1",
});
@@ -348,6 +352,20 @@
});
}
var artModalEl = document.getElementById("vs-player-art-modal");
if (ui.art && artModalEl && window.bootstrap) {
var artModalImg = document.getElementById("vs-player-art-modal-img");
var artModal = new bootstrap.Modal(artModalEl);
ui.art.addEventListener("click", function () {
var song = player.queue[player.index];
artModalImg.src = song && song.cover
? "/cover-art/" + encodeURIComponent(song.cover) + "?size=1200"
: "/static/img/default-art.svg";
artModalImg.alt = song ? (song.title || "") : "";
artModal.show();
});
}
var lyricsBtn = document.getElementById("vs-lyrics-btn");
if (lyricsBtn && ui.lyricsPanel) {
lyricsBtn.addEventListener("click", function () {