Skip to content

Commit 2d97d5c

Browse files
committed
refactor musicbrainz badge
1 parent 22eb62b commit 2d97d5c

File tree

2 files changed

+8
-43
lines changed

2 files changed

+8
-43
lines changed

webui/static/script.js

Lines changed: 7 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,9 @@ let artistsSearchController = null;
9191
let artistCompletionController = null; // Track ongoing completion check to cancel when navigating away
9292
let similarArtistsController = null; // Track ongoing similar artists stream to cancel when navigating away
9393

94+
// --- MusicBrainz Integration Constants ---
95+
const MUSICBRAINZ_LOGO_URL = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/MusicBrainz_Logo_%282016%29.svg/500px-MusicBrainz_Logo_%282016%29.svg.png';
96+
9497
// --- Wishlist Modal Persistence State Management ---
9598
const WishlistModalState = {
9699
// Track if wishlist modal was visible before page refresh
@@ -20014,10 +20017,9 @@ function createArtistCardHTML(artist) {
2001420017
// Check for MusicBrainz ID
2001520018
let mbIconHTML = '';
2001620019
if (artist.musicbrainz_id) {
20017-
const mbLogoUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/MusicBrainz_Logo_%282016%29.svg/500px-MusicBrainz_Logo_%282016%29.svg.png'; // Use official SVG logo
2001820020
mbIconHTML = `
2001920021
<div class="mb-card-icon" title="View on MusicBrainz" onclick="event.stopPropagation(); window.open('https://musicbrainz.org/artist/${artist.musicbrainz_id}', '_blank')">
20020-
<img src="${mbLogoUrl}" style="width: 20px; height: auto; display: block;">
20022+
<img src="${MUSICBRAINZ_LOGO_URL}" style="width: 20px; height: auto; display: block;">
2002120023
</div>
2002220024
`;
2002320025
}
@@ -21144,13 +21146,8 @@ function updateArtistDetailHeader(artist) {
2114421146
if (nameElement) {
2114521147
nameElement.textContent = artist.name;
2114621148

21147-
// DEBUG: Log the artist object to check for MBID
21148-
console.log(`🔍 [DEBUG] Updating header for ${artist.name}`, artist);
21149-
console.log(`🔍 [DEBUG] MBID present?`, artist.musicbrainz_id);
21150-
2115121149
// Add MusicBrainz link if available
2115221150
if (artist.musicbrainz_id) {
21153-
console.log('✅ [DEBUG] Adding MusicBrainz link to header');
2115421151
// Remove existing MB link if any
2115521152
const existingMb = nameElement.parentNode.querySelector('.mb-link-btn');
2115621153
if (existingMb) existingMb.remove();
@@ -25178,10 +25175,7 @@ function createLibraryArtistCard(artist) {
2517825175
const mbIcon = document.createElement('div');
2517925176
mbIcon.className = 'mb-card-icon';
2518025177
mbIcon.title = 'View on MusicBrainz';
25181-
25182-
// Use official SVG logo
25183-
const mbLogoUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/MusicBrainz_Logo_%282016%29.svg/500px-MusicBrainz_Logo_%282016%29.svg.png';
25184-
mbIcon.innerHTML = `<img src="${mbLogoUrl}" style="width: 20px; height: auto; display: block;">`;
25178+
mbIcon.innerHTML = `<img src="${MUSICBRAINZ_LOGO_URL}" style="width: 20px; height: auto; display: block;">`;
2518525179

2518625180
mbIcon.onclick = (e) => {
2518725181
e.stopPropagation();
@@ -25430,15 +25424,6 @@ function updateArtistDetailPageHeader(artistName) {
2543025424
const mainTitle = document.getElementById("artist-info-name");
2543125425
if (mainTitle) {
2543225426
mainTitle.textContent = artistName;
25433-
25434-
// Try to find the artist object in memory to get the MBID
25435-
// We can look at the data passed to populateArtistDetailPage if this function accepted the full object
25436-
// Or access the state if it was saved
25437-
25438-
// Actually, let's look at how this is invoked. It's called from loadArtistDetailData which has the full 'data' object.
25439-
// But this function only accepts 'artistName'.
25440-
// We should query the state or modify the function signature.
25441-
// For now, let's try to find the MB link element and update it if we can find the artist in data.
2544225427
}
2544325428
}
2544425429

@@ -25447,18 +25432,9 @@ function updateArtistDetailPageHeaderWithData(artist) {
2544725432
const mainTitle = document.getElementById("artist-detail-name");
2544825433

2544925434
if (mainTitle) {
25450-
console.log('✅ [DEBUG] Updating header for:', artist.name);
25451-
// We assume textContent is set by updateArtistHeroSection, so we just APPEND the link
25452-
// But to be safe, we can ensure name is there.
25453-
// If we run AFTER populateArtistDetailPage, textContent is already set.
25454-
25455-
// If we reset textContent here, we might lose other formatting?
25456-
// artist-detail-name usually just contains text.
2545725435
mainTitle.textContent = artist.name;
2545825436

2545925437
if (artist.musicbrainz_id) {
25460-
console.log('✅ [DEBUG] Adding MusicBrainz link to DETAIL page header for', artist.name);
25461-
2546225438
// Remove existing link if any (to prevent duplicates)
2546325439
const existingMb = mainTitle.querySelector('.mb-link-btn');
2546425440
if (existingMb) existingMb.remove();
@@ -25468,11 +25444,9 @@ function updateArtistDetailPageHeaderWithData(artist) {
2546825444
mbLink.href = `https://musicbrainz.org/artist/${artist.musicbrainz_id}`;
2546925445
mbLink.target = '_blank';
2547025446
mbLink.title = 'View on MusicBrainz';
25471-
// Use the specific logo requested by user
25472-
const mbLogoUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/MusicBrainz_Logo_%282016%29.svg/500px-MusicBrainz_Logo_%282016%29.svg.png";
2547325447

2547425448
mbLink.innerHTML = `
25475-
<img src="${mbLogoUrl}" style="height: 24px; width: auto; vertical-align: middle; display: inline-block;">
25449+
<img src="${MUSICBRAINZ_LOGO_URL}" style="height: 24px; width: auto; vertical-align: middle; display: inline-block;">
2547625450
<span style="color:rgba(255,255,255,0.9); margin-left:10px; font-size: 13px; font-weight: 600; vertical-align: middle;">View on MusicBrainz</span>
2547725451
`;
2547825452
mbLink.style.padding = '5px 14px';
@@ -25731,28 +25705,19 @@ function createReleaseCard(release) {
2573125705
card.setAttribute("data-release-id", release.id || "");
2573225706
card.setAttribute("data-spotify-id", release.spotify_id || "");
2573325707

25734-
// DEBUG: Log release to check for MBID
25735-
// console.log(`🔍 [DEBUG] Release: ${release.title}`, release);
25736-
2573725708
// Add MusicBrainz icon if available
2573825709
let mbIcon = null;
2573925710
if (release.musicbrainz_release_id) {
25740-
console.log(`✅ [DEBUG] Adding MB icon for release: ${release.title}`);
25741-
const mbLogoUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/MusicBrainz_Logo_%282016%29.svg/500px-MusicBrainz_Logo_%282016%29.svg.png";
2574225711
mbIcon = document.createElement("div");
2574325712
mbIcon.className = "mb-card-icon";
2574425713
mbIcon.title = "View on MusicBrainz";
25745-
// Use image instead of text
25746-
mbIcon.innerHTML = `<img src="${mbLogoUrl}" style="width: 20px; height: auto; display: block;">`;
25714+
mbIcon.innerHTML = `<img src="${MUSICBRAINZ_LOGO_URL}" style="width: 20px; height: auto; display: block;">`;
2574725715
mbIcon.onclick = (e) => {
2574825716
e.stopPropagation();
2574925717
window.open(`https://musicbrainz.org/release/${release.musicbrainz_release_id}`, '_blank');
2575025718
};
25751-
// Will append last
2575225719
}
2575325720

25754-
25755-
2575625721
// Create image
2575725722
const imageContainer = document.createElement("div");
2575825723
if (release.image_url && release.image_url.trim() !== "") {

webui/static/style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21785,4 +21785,4 @@ body {
2178521785
transform: scale(1.1);
2178621786
background: #d466a9;
2178721787
opacity: 1 !important;
21788-
}
21788+
}

0 commit comments

Comments
 (0)