perf(explore): ask the disk once, prefetch once, and menu the releases
Three things on the Explore surfaces, all about not asking twice. A portrait already on disk costs no network call. explore-view seeded only from the library store — owned artists, which on a catalog search is nearly none of the results — and sent everything else to GetArtistImageURL, the resolving entry point, one await at a time. GetArtistImagesCachedPaths asks the disk about every unresolved artist in one call, and only what it does not answer reaches the resolver, in parallel. The artist page's two sections both wanted PrefetchReleases and each called it, so the most expensive call the app makes was issued twice for an overlapping set on a 1 req/s limiter. They are collected and sent once on a microtask, and prefetchRequested stops the cold-artist refetch re-asking for what it already asked for. The release cards — most of the artist page — had no context menu at all. They have one now on both release shapes, normalised to a ReleaseMenuTarget when the menu opens so the union does not reach the action handlers. It is a discriminated union rather than one nullable field per kind because the panel is shared with the track menu: that is what keeps aria-label moving with the target, which is the fault cover-grid shipped. Which items appear is three different questions — playback is gated on a local album id, not on "owned", and the request needs a catalog MBID, so it is absent for a library-only release. Note on the docs: the CLAUDE.md and NOTES.md prose here was reconstructed after a mishandled `git stash --keep-index` destroyed the uncommitted originals. One NOTES.md section is marked as incomplete where its text could not be recovered. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UDCbcCZQepnpSQYJ6SxxZm
This commit is contained in:
@@ -6,7 +6,11 @@ import {
|
||||
} from 'lit/decorators.js';
|
||||
import { library } from '@go/models';
|
||||
import { LibraryController } from '@store/controllers/library-controller';
|
||||
import { GetArtistImageURL, GetArtistMBID } from '@go/explore/Service';
|
||||
import {
|
||||
GetArtistImageURL,
|
||||
GetArtistImageCachedPath,
|
||||
GetArtistMBID,
|
||||
} from '@go/explore/Service';
|
||||
import '@awesome.me/webawesome/dist/components/icon/icon.js';
|
||||
import '@components/cover-grid/cover-grid.js';
|
||||
import { designTokens } from '../../styles/tokens.css';
|
||||
@@ -204,6 +208,17 @@ export class ArtistDetails extends LitElement {
|
||||
if (!mbid) return;
|
||||
|
||||
try {
|
||||
// Disk cache first — the resolving call below is MB →
|
||||
// Wikidata → Wikipedia → Wikimedia, and most artists this
|
||||
// page renders have been resolved once already.
|
||||
const cached = await GetArtistImageCachedPath(mbid);
|
||||
|
||||
if (cached) {
|
||||
this.artistImageURL = cached;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const url = await GetArtistImageURL(mbid);
|
||||
|
||||
if (url) {
|
||||
|
||||
@@ -39,7 +39,7 @@ import { EventsOn } from '@runtime/runtime';
|
||||
import { Events } from '../../events';
|
||||
import '@awesome.me/webawesome/dist/components/icon/icon.js';
|
||||
import '../library-status-indicator/library-status-indicator.js';
|
||||
import { libraryStatusFor } from '@utils/library-status';
|
||||
import { libraryStatusFor, toggleRequest } from '@utils/library-status';
|
||||
import '../catalog-scope-notice/catalog-scope-notice.js';
|
||||
import type { CatalogScope } from '../catalog-scope-notice/catalog-scope-notice.js';
|
||||
import { queueStore } from '../../store/queue-store';
|
||||
@@ -61,6 +61,29 @@ import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
|
||||
/** The region the artist header's own failures are rendered in. */
|
||||
export const ExploreArtistRegion = 'explore-artist';
|
||||
|
||||
/**
|
||||
* A release the context menu can act on, whichever shape it came from.
|
||||
*
|
||||
* The page shows release groups in two forms — the top section's
|
||||
* `LBTopReleaseGroup` and the discography's `MBReleaseGroup` — and the
|
||||
* three questions the menu asks are not the same question: playback
|
||||
* needs a *local album id*, a request needs a *catalog MBID*, and
|
||||
* "owned" is neither on its own.
|
||||
*/
|
||||
interface ReleaseMenuTarget {
|
||||
/** The catalog release-group MBID, or '' for a library-only release. */
|
||||
mbid: string;
|
||||
/** The local album id, or 0 when nothing local backs it. */
|
||||
localId: number;
|
||||
title: string;
|
||||
owned: boolean;
|
||||
}
|
||||
|
||||
/** What the shared context menu panel is currently about. */
|
||||
type ContextMenuTarget =
|
||||
| { kind: 'track'; track: LBTopRecording }
|
||||
| { kind: 'release'; release: ReleaseMenuTarget };
|
||||
|
||||
/** Desired section order for grouping release types. */
|
||||
const TYPE_ORDER = ['Albums', 'EP', 'Single', 'Other Albums'];
|
||||
|
||||
@@ -147,14 +170,32 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
|
||||
@state() private similarExpanded = false;
|
||||
private libraryMBIDs = new Set<string>();
|
||||
|
||||
/* ── Track context menu ── */
|
||||
/* ── Release prefetch ── */
|
||||
|
||||
/** Top-section mbids awaiting the next coalesced prefetch. */
|
||||
private pendingTopPrefetch = new Set<string>();
|
||||
/** Discography mbids awaiting the next coalesced prefetch. */
|
||||
private pendingPrefetch = new Set<string>();
|
||||
private prefetchScheduled = false;
|
||||
/** Every mbid already sent, so a refetch does not re-ask. */
|
||||
private prefetchRequested = new Set<string>();
|
||||
|
||||
/* ── Context menu ── */
|
||||
|
||||
private ctxMenu = new ContextMenuController(this);
|
||||
|
||||
/** The top track the open context menu applies to. */
|
||||
@state() private ctxMenuTrack: LBTopRecording | null = null;
|
||||
/**
|
||||
* What the open context menu applies to.
|
||||
*
|
||||
* A discriminated union rather than one nullable field per kind,
|
||||
* because the panel is shared between the top-tracks list and the
|
||||
* release cards: that is what keeps `aria-label` moving with the
|
||||
* target, which is the fault `cover-grid` shipped — every menu
|
||||
* announced as "Album actions".
|
||||
*/
|
||||
@state() private ctxMenuTarget: ContextMenuTarget | null = null;
|
||||
|
||||
@query('#track-context-menu')
|
||||
@query('#context-menu')
|
||||
private contextMenuPopup!: WaPopup;
|
||||
|
||||
// -- ContextMenuHost interface --
|
||||
@@ -170,7 +211,21 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
|
||||
}
|
||||
|
||||
onContextMenuClose(): void {
|
||||
this.ctxMenuTrack = null;
|
||||
this.ctxMenuTarget = null;
|
||||
}
|
||||
|
||||
/** The open menu's track, or null when it is not a track menu. */
|
||||
private get ctxMenuTrack(): LBTopRecording | null {
|
||||
return this.ctxMenuTarget?.kind === 'track'
|
||||
? this.ctxMenuTarget.track
|
||||
: null;
|
||||
}
|
||||
|
||||
/** The open menu's release, or null when it is not a release menu. */
|
||||
private get ctxMenuRelease(): ReleaseMenuTarget | null {
|
||||
return this.ctxMenuTarget?.kind === 'release'
|
||||
? this.ctxMenuTarget.release
|
||||
: null;
|
||||
}
|
||||
|
||||
/* ── Styles ── */
|
||||
@@ -1464,7 +1519,7 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
|
||||
|
||||
// Warm the release/tracklist cache for the top albums — these
|
||||
// are the most likely to be clicked from the artist page.
|
||||
this.prefetchReleases(rgs?.map((r) => r.releaseGroupMbid) ?? []);
|
||||
this.prefetchReleases(rgs?.map((r) => r.releaseGroupMbid) ?? [], true);
|
||||
} catch (err) {
|
||||
console.error('[explore-artist] TopReleaseGroupsForArtist error', err);
|
||||
this.topReleaseGroups = [];
|
||||
@@ -1525,14 +1580,56 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
|
||||
|
||||
/**
|
||||
* Warm the backend's release/tracklist cache for a set of release
|
||||
* groups so opening an album from this page is instant. Fire-and-forget.
|
||||
* groups so opening an album from this page is instant.
|
||||
* Fire-and-forget.
|
||||
*
|
||||
* The page's two sections resolve independently and both want this,
|
||||
* so the mbids are collected and sent once on a microtask rather
|
||||
* than once per section — `BrowseReleases` is the most expensive
|
||||
* call the app makes, on a 1 req/s limiter, and asking twice for an
|
||||
* overlapping set spends that limiter on nothing.
|
||||
*
|
||||
* `prefetchRequested` is what stops the cold-artist refetch — which
|
||||
* re-runs every fetch on `ArtistDiscographyReady` — asking again for
|
||||
* everything it already asked for.
|
||||
*/
|
||||
private prefetchReleases(mbids: string[]) {
|
||||
const filtered = mbids.filter((m) => m);
|
||||
if (filtered.length === 0) return;
|
||||
private prefetchReleases(mbids: string[], top = false) {
|
||||
const pending = top ? this.pendingTopPrefetch : this.pendingPrefetch;
|
||||
|
||||
void PrefetchReleases(filtered).catch(() => {
|
||||
/* best-effort cache warming — ignore failures */
|
||||
for (const mbid of mbids) {
|
||||
if (mbid) pending.add(mbid);
|
||||
}
|
||||
|
||||
if (this.pendingTopPrefetch.size + this.pendingPrefetch.size === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.prefetchScheduled) return;
|
||||
|
||||
this.prefetchScheduled = true;
|
||||
|
||||
queueMicrotask(() => {
|
||||
this.prefetchScheduled = false;
|
||||
|
||||
// Top releases lead: they are what the page shows first, and
|
||||
// the backend takes the list in order.
|
||||
const batch = [
|
||||
...new Set([
|
||||
...this.pendingTopPrefetch,
|
||||
...this.pendingPrefetch,
|
||||
]),
|
||||
].filter((mbid) => !this.prefetchRequested.has(mbid));
|
||||
|
||||
this.pendingTopPrefetch.clear();
|
||||
this.pendingPrefetch.clear();
|
||||
|
||||
if (batch.length === 0) return;
|
||||
|
||||
for (const mbid of batch) this.prefetchRequested.add(mbid);
|
||||
|
||||
void PrefetchReleases(batch).catch(() => {
|
||||
/* best-effort cache warming — ignore failures */
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1950,7 +2047,7 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
|
||||
private onTrackRowKeydown(e: KeyboardEvent, track: LBTopRecording): void {
|
||||
if (isContextMenuKey(e)) {
|
||||
e.preventDefault();
|
||||
this.ctxMenuTrack = track;
|
||||
this.ctxMenuTarget = { kind: 'track', track };
|
||||
this.ctxMenu.openFrom(e.currentTarget as HTMLElement);
|
||||
|
||||
return;
|
||||
@@ -1966,10 +2063,169 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
this.ctxMenuTrack = track;
|
||||
this.ctxMenuTarget = { kind: 'track', track };
|
||||
this.ctxMenu.openAt(e.clientX, e.clientY);
|
||||
}
|
||||
|
||||
/* ── Release context menu ── */
|
||||
|
||||
// The two release shapes on this page are normalised at the moment
|
||||
// the menu opens, so the union does not reach the action handlers.
|
||||
|
||||
/** Normalise a top-section release group. */
|
||||
private topReleaseTarget(rg: LBTopReleaseGroup): ReleaseMenuTarget {
|
||||
return {
|
||||
mbid: rg.releaseGroupMbid || '',
|
||||
localId: rg.localId ?? 0,
|
||||
title: rg.title,
|
||||
owned: Boolean(rg.inLibrary || rg.localId),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Normalise a discography release group.
|
||||
*
|
||||
* A library-only release arrives as `local:<n>`, which names nothing
|
||||
* upstream — so its catalog MBID is empty and the local id is
|
||||
* unwrapped from it, the same way `navigateToAlbum` does.
|
||||
*/
|
||||
private albumTarget(rg: MBReleaseGroup): ReleaseMenuTarget {
|
||||
const isLocal =
|
||||
typeof rg.mbid === 'string' && rg.mbid.startsWith('local:');
|
||||
const localId = rg.localId || (isLocal ? Number(rg.mbid.slice(6)) : 0);
|
||||
|
||||
return {
|
||||
mbid: isLocal ? '' : rg.mbid || '',
|
||||
localId: Number.isFinite(localId) ? localId : 0,
|
||||
title: rg.title,
|
||||
owned:
|
||||
this.libraryMBIDs.has(rg.mbid) ||
|
||||
Boolean(rg.inLibrary) ||
|
||||
localId > 0,
|
||||
};
|
||||
}
|
||||
|
||||
private onReleaseContextMenu(e: MouseEvent, release: ReleaseMenuTarget): void {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
this.ctxMenuTarget = { kind: 'release', release };
|
||||
this.ctxMenu.openAt(e.clientX, e.clientY);
|
||||
}
|
||||
|
||||
private onReleaseKeydown(
|
||||
e: KeyboardEvent,
|
||||
release: ReleaseMenuTarget,
|
||||
activate: () => void,
|
||||
): void {
|
||||
if (isContextMenuKey(e)) {
|
||||
e.preventDefault();
|
||||
this.ctxMenuTarget = { kind: 'release', release };
|
||||
this.ctxMenu.openFrom(e.currentTarget as HTMLElement);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
activate();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The release's files, keyed on the local album id.
|
||||
*
|
||||
* Keyed on the id rather than the MBID for the reason the album page
|
||||
* is: an owned but untagged release has no recording MBIDs, so an
|
||||
* MBID-keyed lookup returns nothing while looking entirely correct.
|
||||
*/
|
||||
private async releaseFilePaths(
|
||||
release: ReleaseMenuTarget,
|
||||
): Promise<string[]> {
|
||||
if (release.localId <= 0) return [];
|
||||
|
||||
const libraryID = libraryStore.getSelectedLibraryId() ?? 0;
|
||||
const byAlbum = await GetFilePathsByAlbums([release.localId], libraryID);
|
||||
|
||||
return byAlbum[release.localId] ?? [];
|
||||
}
|
||||
|
||||
private async onReleaseAction(
|
||||
action: 'play' | 'add-to-queue' | 'play-next',
|
||||
): Promise<void> {
|
||||
const release = this.ctxMenuRelease;
|
||||
|
||||
this.ctxMenu.close();
|
||||
|
||||
if (!release) return;
|
||||
|
||||
try {
|
||||
const paths = await this.releaseFilePaths(release);
|
||||
|
||||
if (paths.length === 0) {
|
||||
notificationStore.inline(ExploreArtistRegion, {
|
||||
text: `No files for ${release.title} were found in your library.`,
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
switch (action) {
|
||||
case 'play':
|
||||
queueStore.setQueue(paths, 0, false, this.queueSource());
|
||||
break;
|
||||
case 'add-to-queue':
|
||||
for (const path of paths) queueStore.addToQueue(path);
|
||||
break;
|
||||
case 'play-next':
|
||||
for (const path of [...paths].reverse())
|
||||
queueStore.playNext(path);
|
||||
break;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Could not queue release:', err);
|
||||
notificationStore.inline(ExploreArtistRegion, {
|
||||
text: describeError(err, `Could not play ${release.title}.`),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private async onReleaseRequestToggle(): Promise<void> {
|
||||
const release = this.ctxMenuRelease;
|
||||
|
||||
this.ctxMenu.close();
|
||||
|
||||
if (!release?.mbid) return;
|
||||
|
||||
try {
|
||||
await toggleRequest({
|
||||
mbid: release.mbid,
|
||||
entity: 'album',
|
||||
title: release.title,
|
||||
artist: this.artist?.name ?? this.artistName,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Could not change the request:', err);
|
||||
notificationStore.inline(ExploreArtistRegion, {
|
||||
text: describeError(err, `Could not request ${release.title}.`),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private viewReleaseOnMusicBrainz(): void {
|
||||
const release = this.ctxMenuRelease;
|
||||
|
||||
this.ctxMenu.close();
|
||||
|
||||
if (!release?.mbid) return;
|
||||
|
||||
window.open(
|
||||
`https://musicbrainz.org/release-group/${release.mbid}`,
|
||||
'_blank',
|
||||
'noopener',
|
||||
);
|
||||
}
|
||||
|
||||
private onContextMenuAction(action: 'play' | 'add-to-queue' | 'play-next'): void {
|
||||
const track = this.ctxMenuTrack;
|
||||
|
||||
@@ -2196,7 +2452,7 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
|
||||
region=${ExploreArtistRegion}
|
||||
testid="artist-action-message"
|
||||
></inline-notice>
|
||||
${this.renderTrackContextMenu()}
|
||||
${this.renderContextMenu()}
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -2233,40 +2489,37 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
|
||||
`;
|
||||
}
|
||||
|
||||
private renderTrackContextMenu() {
|
||||
const track = this.ctxMenuTrack;
|
||||
/**
|
||||
* The one context menu panel, shared by the top tracks and the
|
||||
* release cards.
|
||||
*
|
||||
* The label is computed from the target rather than written down,
|
||||
* which is the fault `cover-grid` shipped — a shared panel that
|
||||
* announced every menu as "Album actions".
|
||||
*/
|
||||
private renderContextMenu() {
|
||||
const target = this.ctxMenuTarget;
|
||||
|
||||
return html`
|
||||
<wa-popup
|
||||
id="track-context-menu"
|
||||
id="context-menu"
|
||||
placement="bottom-start"
|
||||
flip
|
||||
shift
|
||||
.active=${this.ctxMenu.contextMenuOpen}
|
||||
>
|
||||
${this.ctxMenu.contextMenuOpen && track
|
||||
${this.ctxMenu.contextMenuOpen && target
|
||||
? html`
|
||||
<div class="context-menu-panel" role="menu" aria-label="Track actions">
|
||||
${this.isTrackOwned(track)
|
||||
? html`
|
||||
<wa-dropdown-item @click=${() => this.onContextMenuAction('play')}>
|
||||
<wa-icon slot="icon" name="play"></wa-icon>
|
||||
Play
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item @click=${() => this.onContextMenuAction('add-to-queue')}>
|
||||
<wa-icon slot="icon" name="plus"></wa-icon>
|
||||
Add to Queue
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item @click=${() => this.onContextMenuAction('play-next')}>
|
||||
<wa-icon slot="icon" name="forward-step"></wa-icon>
|
||||
Play Next
|
||||
</wa-dropdown-item>
|
||||
`
|
||||
: nothing}
|
||||
<wa-dropdown-item @click=${() => this.viewTrackOnMusicBrainz()}>
|
||||
<wa-icon slot="icon" name="globe"></wa-icon>
|
||||
View on MusicBrainz
|
||||
</wa-dropdown-item>
|
||||
<div
|
||||
class="context-menu-panel"
|
||||
role="menu"
|
||||
aria-label=${target.kind === 'track'
|
||||
? 'Track actions'
|
||||
: 'Release actions'}
|
||||
>
|
||||
${target.kind === 'track'
|
||||
? this.renderTrackMenuItems(target.track)
|
||||
: this.renderReleaseMenuItems(target.release)}
|
||||
</div>
|
||||
`
|
||||
: nothing}
|
||||
@@ -2274,6 +2527,83 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
|
||||
`;
|
||||
}
|
||||
|
||||
private renderTrackMenuItems(track: LBTopRecording) {
|
||||
return html`
|
||||
${this.isTrackOwned(track)
|
||||
? html`
|
||||
<wa-dropdown-item @click=${() => this.onContextMenuAction('play')}>
|
||||
<wa-icon slot="icon" name="play"></wa-icon>
|
||||
Play
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item @click=${() => this.onContextMenuAction('add-to-queue')}>
|
||||
<wa-icon slot="icon" name="plus"></wa-icon>
|
||||
Add to Queue
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item @click=${() => this.onContextMenuAction('play-next')}>
|
||||
<wa-icon slot="icon" name="forward-step"></wa-icon>
|
||||
Play Next
|
||||
</wa-dropdown-item>
|
||||
`
|
||||
: nothing}
|
||||
<wa-dropdown-item @click=${() => this.viewTrackOnMusicBrainz()}>
|
||||
<wa-icon slot="icon" name="globe"></wa-icon>
|
||||
View on MusicBrainz
|
||||
</wa-dropdown-item>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Which items a release gets, decided by what it can actually do.
|
||||
*
|
||||
* Playback is gated on a local album id rather than on "owned": a
|
||||
* release matched by MBID with no local album behind it has nothing
|
||||
* to queue. The request needs the opposite — a catalog MBID — so it
|
||||
* is absent for a library-only release, which is also the one case
|
||||
* where wanting it makes no sense.
|
||||
*/
|
||||
private renderReleaseMenuItems(release: ReleaseMenuTarget) {
|
||||
const requested =
|
||||
libraryStatusFor(release.owned, release.mbid) === 'queued';
|
||||
|
||||
return html`
|
||||
${release.localId > 0
|
||||
? html`
|
||||
<wa-dropdown-item @click=${() => void this.onReleaseAction('play')}>
|
||||
<wa-icon slot="icon" name="play"></wa-icon>
|
||||
Play
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item @click=${() => void this.onReleaseAction('add-to-queue')}>
|
||||
<wa-icon slot="icon" name="plus"></wa-icon>
|
||||
Add to Queue
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item @click=${() => void this.onReleaseAction('play-next')}>
|
||||
<wa-icon slot="icon" name="forward-step"></wa-icon>
|
||||
Play Next
|
||||
</wa-dropdown-item>
|
||||
`
|
||||
: nothing}
|
||||
${!release.owned && release.mbid
|
||||
? html`
|
||||
<wa-dropdown-item @click=${() => void this.onReleaseRequestToggle()}>
|
||||
<wa-icon
|
||||
slot="icon"
|
||||
name=${requested ? 'xmark' : 'bookmark'}
|
||||
></wa-icon>
|
||||
${requested ? 'Cancel Request' : 'Want This'}
|
||||
</wa-dropdown-item>
|
||||
`
|
||||
: nothing}
|
||||
${release.mbid
|
||||
? html`
|
||||
<wa-dropdown-item @click=${() => this.viewReleaseOnMusicBrainz()}>
|
||||
<wa-icon slot="icon" name="globe"></wa-icon>
|
||||
View on MusicBrainz
|
||||
</wa-dropdown-item>
|
||||
`
|
||||
: nothing}
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Subscribes to an artist: their new releases go on the requests
|
||||
* list as they come out.
|
||||
@@ -2550,6 +2880,7 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
|
||||
|
||||
private renderTopReleaseCard(rg: LBTopReleaseGroup) {
|
||||
const artURL = this.thumbnailURLs.get(rg.releaseGroupMbid) || '';
|
||||
const target = this.topReleaseTarget(rg);
|
||||
|
||||
return html`
|
||||
<div
|
||||
@@ -2557,12 +2888,12 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
|
||||
@click=${() => this.navigateToTopRelease(rg)}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@keydown=${(e: KeyboardEvent) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
this.navigateToTopRelease(rg);
|
||||
}
|
||||
}}
|
||||
@contextmenu=${(e: MouseEvent) =>
|
||||
this.onReleaseContextMenu(e, target)}
|
||||
@keydown=${(e: KeyboardEvent) =>
|
||||
this.onReleaseKeydown(e, target, () =>
|
||||
this.navigateToTopRelease(rg),
|
||||
)}
|
||||
>
|
||||
<div class="top-release-art">
|
||||
${artURL
|
||||
@@ -2685,18 +3016,20 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
|
||||
const inLibrary = this.libraryMBIDs.has(rg.mbid) || Boolean(rg.inLibrary);
|
||||
const status = libraryStatusFor(inLibrary, rg.mbid);
|
||||
|
||||
const target = this.albumTarget(rg);
|
||||
|
||||
return html`
|
||||
<div
|
||||
class="album-card"
|
||||
@click=${() => this.navigateToAlbum(rg)}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@keydown=${(e: KeyboardEvent) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
this.navigateToAlbum(rg);
|
||||
}
|
||||
}}
|
||||
@contextmenu=${(e: MouseEvent) =>
|
||||
this.onReleaseContextMenu(e, target)}
|
||||
@keydown=${(e: KeyboardEvent) =>
|
||||
this.onReleaseKeydown(e, target, () =>
|
||||
this.navigateToAlbum(rg),
|
||||
)}
|
||||
>
|
||||
<div class="album-art-container">
|
||||
${artURL
|
||||
|
||||
@@ -7,7 +7,7 @@ import { classMap } from 'lit/directives/class-map.js';
|
||||
import '@components/page-header/page-header';
|
||||
import { designTokens } from '../../styles/tokens.css';
|
||||
import { srOnly } from '../../styles/sr-only.css';
|
||||
import { SearchLocal, SearchLyrics, GetThumbnail, GetThumbnails, GetArtistImageURL, GetExploreShelves, RecordSearchClick } from '@go/explore/Service';
|
||||
import { SearchLocal, SearchLyrics, GetThumbnail, GetThumbnails, GetArtistImageURL, GetArtistImagesCachedPaths, GetExploreShelves, RecordSearchClick } from '@go/explore/Service';
|
||||
import { GetFilePathsByAlbums, GetFilePathsByRecordingMBIDs } from '@go/library/Library';
|
||||
import { EventsOn } from '@runtime/runtime';
|
||||
import { Events } from '../../events';
|
||||
@@ -1517,8 +1517,19 @@ export class ExploreView extends ViewLifecycleMixin(LitElement) implements Conte
|
||||
}
|
||||
|
||||
/**
|
||||
* Load artist images for all visible artist cards. Each call
|
||||
* is async and updates the cache + re-renders on success.
|
||||
* Load artist images for all visible artist cards.
|
||||
*
|
||||
* The order matters, because the three sources cost wildly
|
||||
* different things. The library store is free. `GetArtistImages‐
|
||||
* CachedPaths` is one call that asks the disk about every remaining
|
||||
* artist at once — a portrait already downloaded costs no network
|
||||
* at all, which on a catalog search is most of them, and seeding
|
||||
* only from the library (owned artists, nearly none of a search's
|
||||
* results) is what sent them to the resolver instead.
|
||||
* `GetArtistImageURL` is the *resolving* entry point — MusicBrainz
|
||||
* rels → Wikidata → Wikipedia → a download — so only what the disk
|
||||
* did not answer reaches it, and those run together rather than one
|
||||
* `await` at a time.
|
||||
*/
|
||||
private async loadArtistImages(
|
||||
artists: MBArtist[],
|
||||
@@ -1529,24 +1540,51 @@ export class ExploreView extends ViewLifecycleMixin(LitElement) implements Conte
|
||||
// Seed from library store first (instant, no API).
|
||||
this.seedArtistImagesFromLibrary(artists);
|
||||
|
||||
// Fetch remaining from API (only artists not yet resolved).
|
||||
for (const a of artists) {
|
||||
if (this.artistImageCache.has(a.mbid)) continue;
|
||||
|
||||
this.artistImageCache.set(a.mbid, '');
|
||||
// One disk existence check for everything still unresolved.
|
||||
const unresolved = artists
|
||||
.filter((a) => a.mbid && !this.artistImageCache.has(a.mbid))
|
||||
.map((a) => a.mbid);
|
||||
|
||||
if (unresolved.length > 0) {
|
||||
try {
|
||||
const url = await GetArtistImageURL(a.mbid);
|
||||
const cached = (await GetArtistImagesCachedPaths(unresolved)) || {};
|
||||
let seeded = false;
|
||||
|
||||
if (url) {
|
||||
this.artistImageCache.set(a.mbid, url);
|
||||
this.requestUpdate();
|
||||
for (const [mbid, path] of Object.entries(cached)) {
|
||||
if (path) {
|
||||
this.artistImageCache.set(mbid, path);
|
||||
seeded = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (seeded) this.requestUpdate();
|
||||
} catch {
|
||||
// No image — leave empty string.
|
||||
// The disk check is an optimisation; fall through.
|
||||
}
|
||||
}
|
||||
|
||||
// Whatever the disk did not answer goes to the resolver, in
|
||||
// parallel — these are independent lookups against different
|
||||
// upstreams and nothing about them is ordered.
|
||||
await Promise.all(
|
||||
artists.map(async (a) => {
|
||||
if (!a.mbid || this.artistImageCache.has(a.mbid)) return;
|
||||
|
||||
this.artistImageCache.set(a.mbid, '');
|
||||
|
||||
try {
|
||||
const url = await GetArtistImageURL(a.mbid);
|
||||
|
||||
if (url) {
|
||||
this.artistImageCache.set(a.mbid, url);
|
||||
this.requestUpdate();
|
||||
}
|
||||
} catch {
|
||||
// No image — leave empty string.
|
||||
}
|
||||
}),
|
||||
);
|
||||
|
||||
// Final fallback: album art for artists the API couldn't resolve.
|
||||
// Try library store first, then search-result release groups.
|
||||
let fallbackUpdated = false;
|
||||
|
||||
@@ -11,6 +11,11 @@ export function jobIcon(job: Job): string {
|
||||
return 'database';
|
||||
case 'autotag-apply':
|
||||
return 'tags';
|
||||
case 'catalog-enrich':
|
||||
// The globe rather than the database: this is catalog data
|
||||
// arriving from the network, not the local index being
|
||||
// rebuilt from it.
|
||||
return 'globe';
|
||||
default:
|
||||
return 'gear';
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user