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,
|
TopRecordingsForArtist,
|
||||||
SimilarArtists,
|
SimilarArtists,
|
||||||
GetArtistImageURL,
|
GetArtistImageURL,
|
||||||
|
CheckLibraryMBIDs,
|
||||||
} from '@go/explore/Service';
|
} from '@go/explore/Service';
|
||||||
import type {
|
import type {
|
||||||
MBArtist,
|
MBArtist,
|
||||||
@@ -90,6 +91,7 @@ export class ExploreArtistDetails extends LitElement {
|
|||||||
@state() private similarArtists: LBSimilarArtist[] = [];
|
@state() private similarArtists: LBSimilarArtist[] = [];
|
||||||
@state() private loadingSimilar = true;
|
@state() private loadingSimilar = true;
|
||||||
@state() private artistImageURL = '';
|
@state() private artistImageURL = '';
|
||||||
|
private libraryMBIDs = new Set<string>();
|
||||||
|
|
||||||
/* ── Styles ── */
|
/* ── Styles ── */
|
||||||
|
|
||||||
@@ -410,6 +412,16 @@ export class ExploreArtistDetails extends LitElement {
|
|||||||
font-size: var(--yj-text-xs);
|
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 ── */
|
/* ── Similar artists ── */
|
||||||
.horizontal-row {
|
.horizontal-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -505,6 +517,9 @@ export class ExploreArtistDetails extends LitElement {
|
|||||||
// Artist image is fire-and-forget — doesn't block the page.
|
// Artist image is fire-and-forget — doesn't block the page.
|
||||||
this.fetchArtistImage(mbid);
|
this.fetchArtistImage(mbid);
|
||||||
|
|
||||||
|
// Check which release groups are in the local library.
|
||||||
|
this.checkLibrary();
|
||||||
|
|
||||||
const summary = [
|
const summary = [
|
||||||
`artist=${artistResult.status}`,
|
`artist=${artistResult.status}`,
|
||||||
`tracks=${tracksResult.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 ── */
|
/* ── Navigation ── */
|
||||||
|
|
||||||
private navigateBack() {
|
private navigateBack() {
|
||||||
@@ -915,6 +954,9 @@ export class ExploreArtistDetails extends LitElement {
|
|||||||
</div>
|
</div>
|
||||||
<div class="album-title" title="${rg.title}">${rg.title}</div>
|
<div class="album-title" title="${rg.title}">${rg.title}</div>
|
||||||
<div class="album-meta">
|
<div class="album-meta">
|
||||||
|
${this.libraryMBIDs.has(rg.mbid)
|
||||||
|
? html`<span class="library-badge">In Library</span>`
|
||||||
|
: nothing}
|
||||||
${year ? html`<span>${year}</span>` : nothing}
|
${year ? html`<span>${year}</span>` : nothing}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user