logan
2518385330
The remaining views, brought onto the two mechanisms added earlier in this series. The lifecycle: every cached primary view moves its document listeners, intervals and event subscriptions off connect/disconnect and onto `viewActivated`/`viewDeactivated`, so `autotag-view` stops fielding keystrokes from Settings, `downloads-view`'s 30 s clock stops ticking for the session, and an off-screen view stops rendering on every search keystroke. `autotag-view` keeps a document listener only for Escape, whose dialogs Phase 5 migrates to wa-dialog anyway. The voice: the silent failures now speak — scan and full rescan (with a guard against the double-click the coalescing window allowed), job pause/resume/cancel, playlist delete, download request pause/remove/ clear, add and rename library, add-to-playlist, playlist track removal, autotag's dialogs and its apply, and favourite reverts. Both private toasts are gone, along with their CSS and keyframes. Playlist delete (single and the multi-select loop), download-request removal, download-client removal and a queue clear over 20 tracks ask first. Loading, empty and failed become three states rather than one, in `track-list` and `genre-details` — the first is on the first screen a new user ever sees — and the Settings index panel seeds itself with `GetIndexStatus()` instead of waiting forever for a change event. `smart-playlist-editor` and `download-picker` take the request-version guard `explore-view` already had. `track-details` loads through one memoised dynamic import in all ten openers, which is what takes its 42 kB out of the startup chunk: an un-upgraded custom element is a real HTMLElement on which `?.show()` throws, so each opener awaits it before touching the element its template already rendered.
319 lines
8.9 KiB
TypeScript
319 lines
8.9 KiB
TypeScript
import { LitElement, html, css } from 'lit';
|
|
import {
|
|
customElement,
|
|
property,
|
|
state,
|
|
} from 'lit/decorators.js';
|
|
import { library } from '@go/models';
|
|
import {
|
|
GetTracksByGenre,
|
|
GetTracksByGenreByLibrary,
|
|
} from '@go/library/Library';
|
|
import { EventsOn } from '@runtime/runtime';
|
|
import { Events } from '../../events';
|
|
import { libraryStore } from '@store/library-store';
|
|
import { describeError } from '@utils/describe-error';
|
|
import '@awesome.me/webawesome/dist/components/icon/icon.js';
|
|
import '@components/track-list/track-list.js';
|
|
import { designTokens } from '../../styles/tokens.css';
|
|
|
|
@customElement('genre-details')
|
|
export class GenreDetails extends LitElement {
|
|
@property({ type: String, attribute: 'genre-name' })
|
|
genreName = '';
|
|
|
|
@state()
|
|
private tracks: library.Track[] = [];
|
|
|
|
@state()
|
|
private loading = true;
|
|
|
|
/** A failed genre query used to be handed to `<track-list>` as an
|
|
* empty array, so it was indistinguishable from a slow one
|
|
* (errors.M2). */
|
|
@state()
|
|
private loadError = '';
|
|
|
|
private scanCompleteCleanup: (() => void) | null =
|
|
null;
|
|
|
|
static override styles = [designTokens, css`
|
|
:host {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
}
|
|
|
|
.load-error {
|
|
color: var(--yj-text-secondary, #b3b3b3);
|
|
padding: 1em;
|
|
}
|
|
|
|
.load-error button {
|
|
background: none;
|
|
border: 1px solid var(--yj-border, #495057);
|
|
border-radius: 4px;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
padding: 4px 10px;
|
|
}
|
|
|
|
/* ====================================
|
|
* Header
|
|
* ==================================== */
|
|
|
|
.genre-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
padding: 16px 20px;
|
|
flex-shrink: 0;
|
|
border-bottom: 1px solid
|
|
var(
|
|
--yj-border-subtle,
|
|
rgba(255, 255, 255, 0.06)
|
|
);
|
|
}
|
|
|
|
.back-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background: var(
|
|
--yj-bg-overlay,
|
|
rgba(255, 255, 255, 0.06)
|
|
);
|
|
color: var(--yj-text-primary, #fff);
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
.back-button:hover {
|
|
background: var(
|
|
--yj-bg-hover,
|
|
rgba(255, 255, 255, 0.12)
|
|
);
|
|
}
|
|
|
|
.back-button wa-icon {
|
|
font-size: 16px; /* back button — outside type scale */
|
|
}
|
|
|
|
.genre-avatar {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--yj-bg-overlay, #404040) 0%,
|
|
var(--yj-bg-surface, #282828) 100%
|
|
);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.genre-avatar .initial {
|
|
color: var(
|
|
--yj-text-secondary,
|
|
#b3b3b3
|
|
);
|
|
font-size: 32px; /* large decorative initial */
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
user-select: none;
|
|
line-height: 1;
|
|
}
|
|
|
|
.genre-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.genre-title {
|
|
font-size: 24px; /* page title — outside type scale */
|
|
font-weight: 700;
|
|
color: var(--yj-text-primary, #fff);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin: 0;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.track-count {
|
|
font-size: var(--yj-text-md);
|
|
color: var(
|
|
--yj-text-secondary,
|
|
#b3b3b3
|
|
);
|
|
}
|
|
|
|
/* ====================================
|
|
* Content
|
|
* ==================================== */
|
|
|
|
.content {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
track-list {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
`];
|
|
|
|
override connectedCallback() {
|
|
super.connectedCallback();
|
|
this.loadTracks();
|
|
|
|
this.scanCompleteCleanup = EventsOn(
|
|
Events.LibraryScanComplete,
|
|
() => this.loadTracks(),
|
|
);
|
|
}
|
|
|
|
override disconnectedCallback() {
|
|
super.disconnectedCallback();
|
|
|
|
if (this.scanCompleteCleanup) {
|
|
this.scanCompleteCleanup();
|
|
this.scanCompleteCleanup = null;
|
|
}
|
|
}
|
|
|
|
/* ================================================================
|
|
* Data loading
|
|
* ================================================================ */
|
|
|
|
private async loadTracks() {
|
|
if (!this.genreName) return;
|
|
|
|
this.loadError = '';
|
|
|
|
try {
|
|
const libId =
|
|
libraryStore.getSelectedLibraryId();
|
|
|
|
this.tracks = libId !== null
|
|
? await GetTracksByGenreByLibrary(
|
|
this.genreName,
|
|
libId,
|
|
)
|
|
: await GetTracksByGenre(
|
|
this.genreName,
|
|
);
|
|
} catch (error) {
|
|
console.error('Error loading genre tracks:', error);
|
|
this.tracks = [];
|
|
this.loadError = describeError(
|
|
error,
|
|
`The tracks for “${this.genreName}” could not be loaded.`,
|
|
);
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
}
|
|
|
|
/* ================================================================
|
|
* Navigation
|
|
* ================================================================ */
|
|
|
|
private navigateBack() {
|
|
this.dispatchEvent(
|
|
new CustomEvent('navigate', {
|
|
bubbles: true,
|
|
composed: true,
|
|
detail: { view: 'genres' },
|
|
}),
|
|
);
|
|
}
|
|
|
|
/* ================================================================
|
|
* Helpers
|
|
* ================================================================ */
|
|
|
|
private getInitial(name: string): string {
|
|
if (!name) return '?';
|
|
|
|
return name.charAt(0).toUpperCase();
|
|
}
|
|
|
|
/* ================================================================
|
|
* Rendering
|
|
* ================================================================ */
|
|
|
|
override render() {
|
|
const trackCount = this.tracks.length;
|
|
const trackLabel =
|
|
trackCount === 1 ? 'track' : 'tracks';
|
|
|
|
return html`
|
|
<div class="genre-header">
|
|
<button
|
|
class="back-button"
|
|
@click=${this.navigateBack}
|
|
title="Back to genres"
|
|
aria-label="Back to genres"
|
|
>
|
|
<wa-icon
|
|
name="arrow-left"
|
|
></wa-icon>
|
|
</button>
|
|
<div class="genre-avatar">
|
|
<span class="initial">
|
|
${this.getInitial(
|
|
this.genreName,
|
|
)}
|
|
</span>
|
|
</div>
|
|
<div class="genre-info">
|
|
<h1
|
|
class="genre-title"
|
|
title="${this.genreName}"
|
|
>
|
|
${this.genreName}
|
|
</h1>
|
|
${!this.loading
|
|
? html`
|
|
<span
|
|
class="track-count"
|
|
>
|
|
${trackCount}
|
|
${trackLabel}
|
|
</span>
|
|
`
|
|
: ''}
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
${this.loadError
|
|
? html`<div class="load-error" data-testid="genre-error">
|
|
<p>${this.loadError}</p>
|
|
<button
|
|
type="button"
|
|
@click=${() => void this.loadTracks()}
|
|
>
|
|
Try again
|
|
</button>
|
|
</div>`
|
|
: html`<track-list
|
|
.externalTracks=${this.tracks}
|
|
></track-list>`}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|