${this.artistImageURL
? html`
`
: this.getInitial(this.displayName)}
${this.displayName}
${this.artist?.englishName ? html`${this.artist.name}
`
: nothing}
${this.renderArtistMeta()}
${this.artist?.popularity && this.artist.popularity > 0 && !exploreSettings.libraryOnly
? html``
: nothing}
${this.renderTopSection()} ${this.renderDiscography()}
${this.renderSimilarArtists()}
`;
}
private renderArtistMeta() {
if (this.loadingArtist) {
return html``;
}
if (this.errorArtist) {
return html``;
}
if (!this.artist) return nothing;
const parts: string[] = [];
if (this.artist.type) parts.push(this.artist.type);
if (this.artist.country) parts.push(this.artist.country);
if (this.artist.disambiguation) parts.push(this.artist.disambiguation);
if (parts.length === 0) return nothing;
return html`
`;
}
/* ── Top Section (tracks + releases side-by-side) ── */
/** Shared toggle (wide mode) — expands both at once. */
private toggleTopSection() {
const next = !(this.topTracksExpanded && this.topReleasesExpanded);
this.topTracksExpanded = next;
this.topReleasesExpanded = next;
}
/** Per-column toggle (narrow/stacked mode). */
private toggleTopTracks() {
this.topTracksExpanded = !this.topTracksExpanded;
}
private toggleTopReleases() {
this.topReleasesExpanded = !this.topReleasesExpanded;
}
private toggleDiscoGroup(type: string) {
const next = new Set(this.expandedDiscoGroups);
if (next.has(type)) {
next.delete(type);
} else {
next.add(type);
}
this.expandedDiscoGroups = next;
}
private renderTopSection() {
// Library-only mode: no top tracks/releases from LB.
if (exploreSettings.libraryOnly) return nothing;
const hasTracks = !this.loadingTracks && this.topTracks.length > 0;
const hasReleases = !this.loadingTopReleases && this.topReleaseGroups.length > 0;
const tracksLoading = this.loadingTracks;
const releasesLoading = this.loadingTopReleases;
// Both still loading — show single loading state.
if (tracksLoading && releasesLoading) {
return html`
Popular
Loading\u2026
${hasTracks
? html`
`
: nothing}
${hasReleases
? html`
${canExpandReleases
? html`
`
: nothing}
`
: releasesLoading
? html`
`
: nothing}
${canExpand
? html`
`
: nothing}
Top Tracks
${tracks.map(
(t, i) => html`
${canExpandTracks
? html`
`
: nothing}
${i + 1}
${formatListenCount(t.totalListenCount)} plays
`,
)}
${(() => {
const art = this.trackThumbnails.get(t.recordingMbid) || '';
return art
? html`
{
const img = e.target as HTMLImageElement;
img.style.display = 'none';
}} />`
: html`
${t.trackName}
${t.artistName}
Top Releases
${releases.map((rg) => this.renderTopReleaseCard(rg))}
Top Releases
Loading\u2026
this.navigateToTopRelease(rg)}
role="button"
tabindex="0"
@keydown=${(e: KeyboardEvent) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
this.navigateToTopRelease(rg);
}
}}
>
`;
}
private navigateToTopRelease(rg: LBTopReleaseGroup) {
this.dispatchEvent(
new CustomEvent('navigate', {
bubbles: true,
composed: true,
detail: {
view: 'explore-album-details',
releaseGroupMBID: rg.releaseGroupMbid,
albumName: rg.title,
},
}),
);
}
/* ── Discography Section ── */
private renderDiscography() {
if (this.loadingReleases) {
return html`
${artURL
? html`
`
: nothing}
${rg.title}
Discography
Loading\u2026
Discography
Discography
${groups.map( (g) => { const isExpanded = this.expandedDiscoGroups.has(g.type); const rowSize = this.discoRowSize; const showToggle = g.items.length > rowSize; const visibleItems = isExpanded ? g.items : g.items.slice(0, rowSize); return html`${g.type === 'Other' ? 'Other Releases' : g.type.endsWith('s') ? g.type : `${g.type}s`}
${visibleItems.map((rg) => this.renderAlbumCard(rg))}
${showToggle
? html`
`
: nothing}
this.navigateToAlbum(rg)}
role="button"
tabindex="0"
@keydown=${(e: KeyboardEvent) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
this.navigateToAlbum(rg);
}
}}
>
`;
}
/* ── Similar Artists Section ── */
private renderSimilarArtists() {
if (this.loadingSimilar || this.similarArtists.length === 0) {
return nothing;
}
// Library-only mode: show all library-matching similar artists
// (up to the 20 stored per seed). Online mode: cap at 10 to
// avoid a very long list.
const maxSimilar = exploreSettings.libraryOnly ? 20 : 10;
const artists = this.similarArtists.slice(0, maxSimilar);
const showToggle = artists.length > this.discoRowSize;
const collapsed = !this.similarExpanded && showToggle;
const visible = collapsed ? artists.slice(0, this.discoRowSize) : artists;
return html`
${artURL
? html``
: nothing}
${rg.title}
Similar Artists
${visible.map((a) => {
const hue = nameToHue(a.name);
const imgURL = this.similarImageURLs.get(a.artistMbid);
return html`
${showToggle
? html`
`
: nothing}
this.navigateToSimilarArtist(a)}
role="button"
tabindex="0"
@keydown=${(e: KeyboardEvent) => {
if (
e.key === 'Enter' ||
e.key === ' '
) {
e.preventDefault();
this.navigateToSimilarArtist(a);
}
}}
>
`;
})}
${imgURL
? html`
`
: a.name.charAt(0).toUpperCase()}
`
: a.name.charAt(0).toUpperCase()}
${a.name}