feat: 'In Library' badges on explore artist detail page
Add CheckLibraryMBIDs call after artist data loads. Checks all release group MBIDs from the discography against the local library. Matching albums show a green 'In Library' badge in the album meta section alongside the year. Fires after Promise.allSettled completes (same timing as artist image fetch). Non-blocking — badge appears on re-render when the check completes.
This commit is contained in:
@@ -7,6 +7,7 @@ import {
|
||||
TopRecordingsForArtist,
|
||||
SimilarArtists,
|
||||
GetArtistImageURL,
|
||||
CheckLibraryMBIDs,
|
||||
} from '@go/explore/Service';
|
||||
import type {
|
||||
MBArtist,
|
||||
@@ -90,6 +91,7 @@ export class ExploreArtistDetails extends LitElement {
|
||||
@state() private similarArtists: LBSimilarArtist[] = [];
|
||||
@state() private loadingSimilar = true;
|
||||
@state() private artistImageURL = '';
|
||||
private libraryMBIDs = new Set<string>();
|
||||
|
||||
/* ── Styles ── */
|
||||
|
||||
@@ -410,6 +412,16 @@ export class ExploreArtistDetails extends LitElement {
|
||||
font-size: var(--yj-text-xs);
|
||||
}
|
||||
|
||||
.library-badge {
|
||||
background: var(--yj-accent, #1db954);
|
||||
color: #000;
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── Similar artists ── */
|
||||
.horizontal-row {
|
||||
display: flex;
|
||||
@@ -505,6 +517,9 @@ export class ExploreArtistDetails extends LitElement {
|
||||
// Artist image is fire-and-forget — doesn't block the page.
|
||||
this.fetchArtistImage(mbid);
|
||||
|
||||
// Check which release groups are in the local library.
|
||||
this.checkLibrary();
|
||||
|
||||
const summary = [
|
||||
`artist=${artistResult.status}`,
|
||||
`tracks=${tracksResult.status}`,
|
||||
@@ -585,6 +600,30 @@ export class ExploreArtistDetails extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
private async checkLibrary() {
|
||||
const mbids: string[] = [];
|
||||
|
||||
for (const rg of this.releaseGroups) {
|
||||
if (rg.mbid) mbids.push(rg.mbid);
|
||||
}
|
||||
|
||||
if (mbids.length === 0) return;
|
||||
|
||||
try {
|
||||
const found = await CheckLibraryMBIDs(mbids);
|
||||
|
||||
if (found && Object.keys(found).length > 0) {
|
||||
for (const mbid of Object.keys(found)) {
|
||||
this.libraryMBIDs.add(mbid);
|
||||
}
|
||||
|
||||
this.requestUpdate();
|
||||
}
|
||||
} catch {
|
||||
// Non-critical.
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Navigation ── */
|
||||
|
||||
private navigateBack() {
|
||||
@@ -915,6 +954,9 @@ export class ExploreArtistDetails extends LitElement {
|
||||
</div>
|
||||
<div class="album-title" title="${rg.title}">${rg.title}</div>
|
||||
<div class="album-meta">
|
||||
${this.libraryMBIDs.has(rg.mbid)
|
||||
? html`<span class="library-badge">In Library</span>`
|
||||
: nothing}
|
||||
${year ? html`<span>${year}</span>` : nothing}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user