logan
4f628b1f52
The rest of #186's second table, and one thing it could not have said. .section-toggle 187x15 autotag .folders-menu-trigger 32x18 autotag .back-button 32x32 artist-details Requests / Downloads tabs 85x34, 96x34 .search-mode-tab 89x26, 79x26 explore explore search input 325x18 in a 36px box **back-button was six controls, not one.** The issue names it in artist-details because that is the view the sweep opened; the same declaration is byte-identical in artist-details, genre-details, playlist-details, smart-playlist-details, explore-artist-details and explore-album-details, 32px in all six. So it is styles/back-button. css.ts now, adopted by each, and a source sweep fails on a seventh copy -- because the failure this invites is not a size changing, it is somebody adding a detail view and writing `.back-button` out again, which no device sweep would catch for the same reason this one did not. That is icon-language.test.ts's shape, and the argument for it here is the inverse of the column arrows': one declaration covering 36 controls is cheap to fix, and six declarations of one control are six chances to miss five. It is a real 44px box rather than padding with the width handed back: a detail header runs no fit pass, and this button has a visible background, so a hit area larger than the circle would be a control bigger than it looks. The size is #55's, reached there for the same reason -- "the way out is 44px on a phone". **The explore search box was two faults.** The row was 36px *and* the input inside it was 18, so eight pixels at each edge were not a target at all: a tap near the top of the box landed on the container and did nothing. The container is 44 and the input stretches to it. **The Downloads tabs take padding rather than a min-size**, because the mark for the selected tab is its bottom border -- a min-size centres the label and leaves the underline 10px beneath it. page-action-check-now (113x29) is in that table and is not here: it is a PageAction, so #195 raised it with the rest of the header's actions and touch-targets.test.ts already covers it. **The Downloads tabs needed a min-size as well as the padding, and CI is what said so.** Padding alone made them 44px on this machine and **43px in the container**: the total is 13 + 13 + 2 + whatever line box the font gives 13px text, and ubuntu:24.04's is a pixel shorter than Arch's. A height computed from a font's line box is not a height you control -- which is #195's "stated as a property on the strength of one engine" one layer down, in the same PR that recorded it. The padding stays, because it is what keeps the underline against the label; the min-size is the floor. Caught by the new test rather than by a person, which is the half of this that worked. Verified on the device, sweeping each view the way the issue was filed: explore, downloads, autotag and artist-details now report **one** control under the floor apiece, and it is the skip link, which #186 already ruled out as keyboard-only. .search-mode-tab 89x44 and 79x44, the search input 325x44, the Downloads tabs 85x44 and 96x44, .section-toggle 174x44, .folders-menu-trigger 44x44, .back-button 44x44. All 12 new tests fail on main, the source sweep naming all six copies. make ui-test 1041 pass; make e2e 236 pass on chromium, which is half an answer -- CI had the other half, and used it. Closes #186
795 lines
28 KiB
TypeScript
795 lines
28 KiB
TypeScript
import { LitElement, html, css, nothing } from 'lit';
|
||
import { customElement, state } from 'lit/decorators.js';
|
||
import '@awesome.me/webawesome/dist/components/icon/icon.js';
|
||
import '@awesome.me/webawesome/dist/components/button/button.js';
|
||
import '@components/page-header/page-header';
|
||
import type { PageAction } from '@components/page-header/page-header';
|
||
import { designTokens } from '../../styles/tokens.css';
|
||
import { downloadStore, stateLabel } from '@store/download-store';
|
||
import type { Request, RequestSummary, DownloadView as DownloadRecord } from '@store/download-store';
|
||
import { libraryStore } from '@store/library-store';
|
||
import { notificationStore } from '@store/notification-store';
|
||
import { describeError } from '@utils/describe-error';
|
||
import { confirmAction } from '../confirm-dialog/confirm-dialog';
|
||
import { ViewLifecycleMixin } from '../../utils/view-lifecycle';
|
||
|
||
type Tab = 'requests' | 'downloads';
|
||
|
||
/**
|
||
* The downloads page: what music the user has asked for, and what has
|
||
* actually been attempted.
|
||
*
|
||
* These are two different lists on purpose. A Request is durable — "get
|
||
* this whenever available" — and stays around, retried on a backoff,
|
||
* until it is satisfied or removed. A Download is one search-and-grab
|
||
* attempt; it can fail or complete and that is the end of its story. The
|
||
* Requests tab is the list the durable, not-a-failure-just-because-it's-
|
||
* still-here content the wanted list used to be; the Downloads tab is the
|
||
* attempt history nothing rendered before this page existed.
|
||
*/
|
||
@customElement('downloads-view')
|
||
export class DownloadsView extends ViewLifecycleMixin(LitElement) {
|
||
@state() private tab: Tab = 'requests';
|
||
|
||
@state() private requests: Request[] = [];
|
||
|
||
@state() private downloads: DownloadRecord[] = [];
|
||
|
||
@state() private checking = false;
|
||
|
||
@state() private lastSummary: RequestSummary | null = null;
|
||
|
||
/** True when at least one download client is enabled. */
|
||
@state() private canDownload = false;
|
||
|
||
/** Ticks so "next check in …" ages while the page is open. */
|
||
@state() private nowMs = Date.now();
|
||
|
||
|
||
private unsubscribe: (() => void) | null = null;
|
||
|
||
static override styles = [
|
||
designTokens,
|
||
css`
|
||
:host {
|
||
display: block;
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* The header supplies its own padding and rule, so it runs
|
||
to the edge of a host that pads its own content. */
|
||
page-header {
|
||
margin: -20px -20px 1em;
|
||
}
|
||
|
||
header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
h1 {
|
||
margin: 0;
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: var(--yj-text-primary, #fff);
|
||
flex: 1;
|
||
}
|
||
|
||
.subtitle {
|
||
margin: 0 0 20px;
|
||
font-size: 13px;
|
||
color: var(--yj-text-secondary, #b3b3b3);
|
||
}
|
||
|
||
.tabs {
|
||
display: flex;
|
||
gap: 4px;
|
||
margin-bottom: 16px;
|
||
border-bottom: 1px solid var(--yj-bg-overlay, rgba(255, 255, 255, 0.08));
|
||
}
|
||
|
||
/* 85x34 and 96x34 before this (#186). A tab is the only
|
||
route to the panel it names, so it is the last control
|
||
that should be hard to hit -- and the underline that
|
||
marks the active one is drawn on the bottom border,
|
||
which a taller box moves further from the label. So the
|
||
height goes on *padding*, keeping the border against
|
||
the label rather than 10px below a centred one.
|
||
|
||
The min-size is the floor and is not redundant: padding
|
||
alone made this 44px here and **43px in CI**, because
|
||
the total is 13 + 13 + 2 + whatever line box the font
|
||
gives 13px text, and ubuntu:24.04's is a pixel shorter
|
||
than this machine's. A height computed from a font's
|
||
line box is not a height you control -- the same
|
||
mistake #195 made about a layout property measured on
|
||
one engine, one layer down, and caught here by the test
|
||
rather than by a person. */
|
||
.tab {
|
||
min-block-size: 44px;
|
||
padding: 13px 14px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--yj-text-secondary, #b3b3b3);
|
||
cursor: pointer;
|
||
border: none;
|
||
border-bottom: 2px solid transparent;
|
||
background: none;
|
||
font-family: inherit;
|
||
user-select: none;
|
||
}
|
||
|
||
.tab:focus-visible {
|
||
outline: 2px solid var(--yj-accent, #ffd43b);
|
||
outline-offset: -2px;
|
||
}
|
||
|
||
.tab:hover {
|
||
color: var(--yj-text-primary, #fff);
|
||
}
|
||
|
||
.tab.active {
|
||
color: var(--yj-text-primary, #fff);
|
||
border-bottom-color: var(--yj-accent, #ffd43b);
|
||
}
|
||
|
||
h2 {
|
||
margin: 24px 0 8px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
color: var(--yj-text-secondary, #b3b3b3);
|
||
}
|
||
|
||
.row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 10px 12px;
|
||
border-radius: 6px;
|
||
background: var(--yj-bg-surface, #181818);
|
||
}
|
||
|
||
.row + .row {
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.row-main {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.title {
|
||
font-size: 14px;
|
||
color: var(--yj-text-primary, #fff);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.detail {
|
||
font-size: 12px;
|
||
color: var(--yj-text-tertiary, #888);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.detail.error {
|
||
color: var(--wa-color-danger-fill-loud, #c65f5f);
|
||
}
|
||
|
||
.badge {
|
||
font-size: 11px;
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.08));
|
||
color: var(--yj-text-secondary, #b3b3b3);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.empty {
|
||
padding: 40px 20px;
|
||
text-align: center;
|
||
color: var(--yj-text-tertiary, #888);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.summary {
|
||
font-size: 12px;
|
||
color: var(--yj-text-secondary, #b3b3b3);
|
||
margin: 8px 0 0;
|
||
}
|
||
|
||
.notice {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 12px;
|
||
margin-bottom: 12px;
|
||
border-radius: 6px;
|
||
font-size: 12px;
|
||
background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.06));
|
||
/* The only place in the app that puts text on bgOverlay,
|
||
which is too light on the dark ramp to carry anything
|
||
but primary: secondary measured 3.90:1 here. A notice
|
||
is the last thing that should be hard to read. */
|
||
color: var(--yj-text-primary, #fff);
|
||
}
|
||
|
||
.section-hint {
|
||
margin: 0 0 8px;
|
||
font-size: 12px;
|
||
color: var(--yj-text-tertiary, #888);
|
||
}
|
||
`,
|
||
];
|
||
|
||
protected override onViewActivate(): void {
|
||
this.unsubscribe = downloadStore.subscribe(() => {
|
||
this.requests = downloadStore.requests;
|
||
this.downloads = downloadStore.downloads;
|
||
this.canDownload = downloadStore.available;
|
||
});
|
||
|
||
void downloadStore.init().then(() => {
|
||
this.requests = downloadStore.requests;
|
||
this.downloads = downloadStore.downloads;
|
||
this.canDownload = downloadStore.available;
|
||
});
|
||
|
||
// A "next check" that never moves reads as a stuck page, so the
|
||
// relative times re-render on their own — while the page is on
|
||
// screen, where a re-render can be seen.
|
||
this.intervalWhileActive(() => {
|
||
this.nowMs = Date.now();
|
||
}, 30_000);
|
||
}
|
||
|
||
protected override onViewDeactivate(): void {
|
||
this.unsubscribe?.();
|
||
this.unsubscribe = null;
|
||
}
|
||
|
||
override render() {
|
||
return html`
|
||
<page-header
|
||
heading="Downloads"
|
||
.actions=${this.tab === 'requests'
|
||
? ([
|
||
{
|
||
id: 'check-now',
|
||
label: this.checking
|
||
? 'Searching\u2026'
|
||
: 'Check now',
|
||
icon: 'rotate',
|
||
disabled: this.checking,
|
||
title: 'Search every download client for everything on this list right now, instead of waiting for the next scheduled check',
|
||
onSelect: () => void this.checkNow(),
|
||
},
|
||
] satisfies PageAction[])
|
||
: []}
|
||
></page-header>
|
||
|
||
<p class="subtitle">
|
||
Music you have requested, and the download attempts that
|
||
have run for it. A request that cannot be found today stays
|
||
on the list and is looked for again later — roughly every
|
||
six hours at first, then less often the longer it goes
|
||
unfound. “Check now” skips that wait and searches
|
||
everything on the list immediately.
|
||
</p>
|
||
|
||
<div
|
||
class="tabs"
|
||
role="tablist"
|
||
aria-label="Downloads sections"
|
||
@keydown=${this.onTabKeydown}
|
||
>
|
||
${DownloadsView.TABS.map(
|
||
([id, label]) => html`
|
||
<button
|
||
type="button"
|
||
role="tab"
|
||
id=${`tab-${id}`}
|
||
class="tab ${this.tab === id ? 'active' : ''}"
|
||
aria-selected=${this.tab === id ? 'true' : 'false'}
|
||
aria-controls=${`panel-${id}`}
|
||
tabindex=${this.tab === id ? 0 : -1}
|
||
@click=${() => (this.tab = id)}
|
||
>
|
||
${label}
|
||
</button>
|
||
`,
|
||
)}
|
||
</div>
|
||
|
||
<div
|
||
role="tabpanel"
|
||
id=${`panel-${this.tab}`}
|
||
aria-labelledby=${`tab-${this.tab}`}
|
||
>
|
||
${this.tab === 'requests' ? this.renderRequests() : this.renderDownloads()}
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
/**
|
||
* The tabs, in order, so the markup and the keyboard model read
|
||
* the same list rather than each spelling it out (a11y.2: these
|
||
* were two `<div @click>`s with no roles, no tabindex and no
|
||
* keyboard path at all, which made the Downloads half of the
|
||
* Downloads view mouse-only).
|
||
*/
|
||
private static readonly TABS: ReadonlyArray<readonly [Tab, string]> = [
|
||
['requests', 'Requests'],
|
||
['downloads', 'Downloads'],
|
||
];
|
||
|
||
/**
|
||
* A tablist moves with Left/Right/Home/End and activates as it
|
||
* moves — the panel is already rendered, so there is nothing to
|
||
* defer. Focus follows, which is what makes the roving tabindex
|
||
* mean anything.
|
||
*/
|
||
private onTabKeydown = (e: KeyboardEvent): void => {
|
||
const ids = DownloadsView.TABS.map(([id]) => id);
|
||
const at = ids.indexOf(this.tab);
|
||
|
||
let next: number | null = null;
|
||
if (e.key === 'ArrowRight') next = (at + 1) % ids.length;
|
||
else if (e.key === 'ArrowLeft') next = (at - 1 + ids.length) % ids.length;
|
||
else if (e.key === 'Home') next = 0;
|
||
else if (e.key === 'End') next = ids.length - 1;
|
||
|
||
if (next === null) return;
|
||
|
||
e.preventDefault();
|
||
this.tab = ids[next]!;
|
||
void this.updateComplete.then(() => {
|
||
this.shadowRoot
|
||
?.querySelector<HTMLButtonElement>(`#tab-${this.tab}`)
|
||
?.focus();
|
||
});
|
||
};
|
||
|
||
// -----------------------------------------------------------------
|
||
// Requests tab
|
||
// -----------------------------------------------------------------
|
||
|
||
private renderRequests() {
|
||
const subscriptions = this.requests.filter((r) => r.entity === 'artist');
|
||
const wanted = this.requests.filter(
|
||
(r) => r.entity !== 'artist' && r.state === 'wanted',
|
||
);
|
||
const paused = this.requests.filter((r) => r.state === 'paused');
|
||
const satisfied = this.requests.filter((r) => r.state === 'satisfied');
|
||
|
||
return html`
|
||
${this.renderProviderNotice()}
|
||
${this.renderSummary()}
|
||
${satisfied.length > 0
|
||
? html`
|
||
<div class="actions">
|
||
<wa-button
|
||
size="small"
|
||
appearance="plain"
|
||
@click=${() => void this.clearSatisfied()}
|
||
>
|
||
Clear found
|
||
</wa-button>
|
||
</div>
|
||
`
|
||
: nothing}
|
||
${this.requests.length === 0 ? this.renderEmptyRequests() : nothing}
|
||
${this.renderRequestSection(
|
||
'Following',
|
||
subscriptions,
|
||
(r) => this.renderSubscription(r),
|
||
)}
|
||
${wanted.length > 0
|
||
? html`
|
||
<h2>Looking for</h2>
|
||
<p class="section-hint">
|
||
Requested, not found yet. Nothing is wrong — each
|
||
of these is searched again on the schedule below,
|
||
and moves to “Found” the moment it lands in your
|
||
library, however it got there.
|
||
</p>
|
||
${wanted.map((r) => this.renderRequest(r))}
|
||
`
|
||
: nothing}
|
||
${this.renderRequestSection('Paused', paused, (r) => this.renderRequest(r))}
|
||
${this.renderRequestSection('Found', satisfied, (r) => this.renderRequest(r))}
|
||
`;
|
||
}
|
||
|
||
private renderEmptyRequests() {
|
||
return html`
|
||
<div class="empty">
|
||
Nothing requested yet. Use “Request this” on an album or artist
|
||
to add it here.
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
/**
|
||
* A request list with no download client behind it is a list that
|
||
* can never move, and that is the single most likely reason “check
|
||
* now” appears to do nothing. Say so where the button is.
|
||
*/
|
||
private renderProviderNotice() {
|
||
if (this.canDownload) return nothing;
|
||
|
||
return html`
|
||
<div class="notice">
|
||
<wa-icon name="triangle-exclamation"></wa-icon>
|
||
<span>
|
||
No download client is enabled, so nothing on this list
|
||
can be searched for. Requests are still kept — add a
|
||
client under Settings → Downloads and they start moving.
|
||
</span>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
private renderSummary() {
|
||
if (!this.lastSummary) return nothing;
|
||
|
||
const s = this.lastSummary;
|
||
|
||
const parts = [
|
||
s.expanded > 0 ? `${s.expanded} new album${s.expanded === 1 ? '' : 's'} found` : '',
|
||
s.satisfied > 0 ? `${s.satisfied} already owned` : '',
|
||
s.started > 0 ? `${s.started} downloading` : '',
|
||
s.attempted > 0
|
||
? `${s.attempted} searched, no clear match yet`
|
||
: '',
|
||
].filter(Boolean);
|
||
|
||
if (parts.length > 0) {
|
||
return html`<p class="summary">${parts.join(' · ')}</p>`;
|
||
}
|
||
|
||
// "Nothing happened" needs a reason, or the button looks broken.
|
||
const idle = s.noProviders
|
||
? 'Nothing was searched: no download client is enabled.'
|
||
: s.waiting > 0
|
||
? `Searched all ${s.waiting} request${s.waiting === 1 ? '' : 's'} — no source has anything new yet.`
|
||
: 'Nothing on the list to search for.';
|
||
|
||
return html`<p class="summary">${idle}</p>`;
|
||
}
|
||
|
||
private renderRequestSection(
|
||
title: string,
|
||
items: Request[],
|
||
renderer: (request: Request) => unknown,
|
||
) {
|
||
if (items.length === 0) return nothing;
|
||
|
||
return html`
|
||
<h2>${title}</h2>
|
||
${items.map((request) => renderer(request))}
|
||
`;
|
||
}
|
||
|
||
/**
|
||
* An artist row is a subscription, not a queued download, so it
|
||
* shows what it covers rather than a retry count — the albums it
|
||
* produced appear in their own section.
|
||
*/
|
||
private renderSubscription(request: Request) {
|
||
return html`
|
||
<div class="row">
|
||
<wa-icon name="user-group"></wa-icon>
|
||
<div class="row-main">
|
||
<div class="title">
|
||
${request.artist || request.title || request.mbid}
|
||
</div>
|
||
<div class="detail">
|
||
${request.scope === 'all'
|
||
? 'Whole discography, plus new releases'
|
||
: 'New releases only'}
|
||
</div>
|
||
</div>
|
||
<span class="badge">Following</span>
|
||
<div class="actions">
|
||
<wa-button
|
||
size="small"
|
||
appearance="plain"
|
||
@click=${() => void this.toggleScope(request)}
|
||
>
|
||
${request.scope === 'all' ? 'New only' : 'Everything'}
|
||
</wa-button>
|
||
${this.renderRemove(request)}
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
private renderRequest(request: Request) {
|
||
return html`
|
||
<div class="row">
|
||
<wa-icon
|
||
name=${request.entity === 'recording' ? 'music' : 'compact-disc'}
|
||
></wa-icon>
|
||
<div class="row-main">
|
||
<div class="title">
|
||
${request.artist ? `${request.artist} — ` : ''}${request.title ||
|
||
request.mbid}
|
||
</div>
|
||
<div class="detail">
|
||
${requestDetail(request, this.nowMs, this.canDownload)}
|
||
</div>
|
||
</div>
|
||
<div class="actions">
|
||
${request.state === 'satisfied'
|
||
? nothing
|
||
: html`
|
||
<wa-button
|
||
size="small"
|
||
appearance="plain"
|
||
@click=${() => void this.pause(request)}
|
||
>
|
||
${request.state === 'paused' ? 'Resume' : 'Pause'}
|
||
</wa-button>
|
||
`}
|
||
${this.renderRemove(request)}
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
private renderRemove(request: Request) {
|
||
return html`
|
||
<wa-button
|
||
size="small"
|
||
appearance="plain"
|
||
aria-label="Stop following"
|
||
@click=${() => void this.removeRequest(request)}
|
||
>
|
||
<wa-icon name="xmark"></wa-icon>
|
||
</wa-button>
|
||
`;
|
||
}
|
||
|
||
/** What to call a request in a sentence. */
|
||
private static describeRequest(request: Request): string {
|
||
return request.artist || request.title || request.mbid || 'that request';
|
||
}
|
||
|
||
/**
|
||
* Removing a durable request used to be one unconfirmed click with
|
||
* the promise thrown away (errors.M7) — on a subscription the user
|
||
* may have been building for months.
|
||
*/
|
||
private async removeRequest(request: Request): Promise<void> {
|
||
const name = DownloadsView.describeRequest(request);
|
||
const ok = await confirmAction({
|
||
title: `Stop following “${name}”?`,
|
||
message:
|
||
request.scope === 'all'
|
||
? 'YellowJacket will stop looking for this artist’s releases.'
|
||
: 'YellowJacket will stop looking for this release.',
|
||
impact: 'Anything already downloaded stays in your library.',
|
||
confirmLabel: 'Stop following',
|
||
danger: true,
|
||
});
|
||
|
||
if (!ok) return;
|
||
|
||
try {
|
||
await downloadStore.removeRequest(request.id);
|
||
} catch (err) {
|
||
this.report(`remove “${name}”`, err);
|
||
}
|
||
}
|
||
|
||
private async pause(request: Request): Promise<void> {
|
||
const paused = request.state !== 'paused';
|
||
|
||
try {
|
||
await downloadStore.pauseRequest(request.id, paused);
|
||
} catch (err) {
|
||
this.report(
|
||
`${paused ? 'pause' : 'resume'} “${DownloadsView.describeRequest(request)}”`,
|
||
err,
|
||
);
|
||
}
|
||
}
|
||
|
||
private async clearSatisfied(): Promise<void> {
|
||
try {
|
||
await downloadStore.clearSatisfiedRequests();
|
||
} catch (err) {
|
||
this.report('clear the found requests', err);
|
||
}
|
||
}
|
||
|
||
/** Persistent: the row is still there, and retrying is the point. */
|
||
private report(what: string, err: unknown): void {
|
||
console.error(`downloads: could not ${what}`, err);
|
||
notificationStore.persistent({
|
||
key: 'download-request',
|
||
text: `Could not ${what}. ${describeError(err)}`,
|
||
detail: String(err),
|
||
});
|
||
}
|
||
|
||
/** Widens or narrows what an artist subscription covers. */
|
||
private async toggleScope(request: Request): Promise<void> {
|
||
try {
|
||
const libraryId =
|
||
request.libraryId || (await libraryStore.getDefaultLibraryId());
|
||
if (!libraryId) {
|
||
console.error(
|
||
'Could not change what this subscription covers: no library available',
|
||
);
|
||
return;
|
||
}
|
||
|
||
await downloadStore.addRequest({
|
||
mbid: request.mbid,
|
||
entity: 'artist',
|
||
libraryId,
|
||
artist: request.artist,
|
||
title: request.title,
|
||
scope: request.scope === 'all' ? 'future' : 'all',
|
||
secondary: request.secondary,
|
||
} as never);
|
||
} catch (err) {
|
||
console.error('Could not change what this subscription covers:', err);
|
||
}
|
||
}
|
||
|
||
private async checkNow(): Promise<void> {
|
||
this.checking = true;
|
||
|
||
try {
|
||
this.lastSummary = await downloadStore.reconcileRequests();
|
||
} catch (err) {
|
||
console.error('Could not check the requests list:', err);
|
||
} finally {
|
||
this.checking = false;
|
||
}
|
||
}
|
||
|
||
// -----------------------------------------------------------------
|
||
// Downloads tab
|
||
// -----------------------------------------------------------------
|
||
|
||
private renderDownloads() {
|
||
if (this.downloads.length === 0) {
|
||
return html`
|
||
<div class="empty">
|
||
No downloads yet. Attempts made by "Download now" or the
|
||
background reconciler show up here.
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
return this.downloads.map((view) => this.renderDownload(view));
|
||
}
|
||
|
||
private renderDownload(view: DownloadRecord) {
|
||
const title = view.artist
|
||
? `${view.artist}${view.album ? ` — ${view.album}` : ''}`
|
||
: view.query || view.album || 'Untitled download';
|
||
|
||
return html`
|
||
<div class="row">
|
||
<wa-icon name="compact-disc"></wa-icon>
|
||
<div class="row-main">
|
||
<div class="title">${title}</div>
|
||
<div class="detail">${this.downloadDetail(view)}</div>
|
||
${view.error
|
||
? html`<div class="detail error">${view.error}</div>`
|
||
: nothing}
|
||
</div>
|
||
<span class="badge">${stateLabel(view.state)}</span>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
/** Provider/progress summary for a download's second line. */
|
||
private downloadDetail(view: DownloadRecord): string {
|
||
const providers = [
|
||
...new Set((view.items ?? []).map((item) => item.candidate?.origin).filter(Boolean)),
|
||
];
|
||
|
||
const parts: string[] = [];
|
||
|
||
if (providers.length > 0) parts.push(providers.join(', '));
|
||
if (view.source) parts.push(view.source);
|
||
|
||
return parts.length > 0 ? parts.join(' · ') : 'No provider info';
|
||
}
|
||
}
|
||
|
||
/**
|
||
* The second line of a request row: what is happening, in the user's
|
||
* terms.
|
||
*
|
||
* A request that has been tried and not found is reported as still being
|
||
* looked for rather than as an error, because that is what it is — the
|
||
* retry is already scheduled and there is nothing for the user to do.
|
||
*/
|
||
function requestDetail(
|
||
request: Request,
|
||
nowMs: number,
|
||
canDownload: boolean,
|
||
): string {
|
||
if (request.state === 'satisfied') return 'In your library';
|
||
if (request.state === 'paused') return 'Paused — not being looked for';
|
||
|
||
// With no client there is no search and no retry clock — the
|
||
// backend stopped scheduling one — so a row must not imply either.
|
||
// "Queued" and "next check in 6 hours" are both promises nothing is
|
||
// in a position to keep.
|
||
if (!canDownload) return 'On your list — no download client to search with';
|
||
|
||
if (request.attempts === 0) return 'Queued — not searched for yet';
|
||
|
||
const tries = `Searched ${request.attempts} time${request.attempts === 1 ? '' : 's'}`;
|
||
const reason = request.lastError ? `, ${request.lastError}` : '';
|
||
// Wails types a Go time.Time as an opaque class; over the wire it
|
||
// is the RFC 3339 string JSON marshalled it as.
|
||
const next = nextCheckPhrase(
|
||
request.nextTryAt as unknown as string | undefined,
|
||
nowMs,
|
||
);
|
||
|
||
return `${tries}${reason}${next}`;
|
||
}
|
||
|
||
/**
|
||
* "Next check" as a phrase, because the retry schedule is the part of
|
||
* this feature nothing in the UI used to admit existed — a row that
|
||
* says only "searched 3 times" gives the user no way to tell a waiting
|
||
* request from an abandoned one.
|
||
*/
|
||
function nextCheckPhrase(nextTryAt: string | undefined, nowMs: number): string {
|
||
if (!nextTryAt) return '';
|
||
|
||
const due = new Date(nextTryAt).getTime();
|
||
if (Number.isNaN(due)) return '';
|
||
|
||
const deltaMs = due - nowMs;
|
||
if (deltaMs <= 0) return ' · due for another search';
|
||
|
||
return ` · next check ${relativeFuture(deltaMs)}`;
|
||
}
|
||
|
||
/** Coarse "in 3 hours" phrasing; minutes are noise on a 6-hour cycle. */
|
||
function relativeFuture(ms: number): string {
|
||
const minutes = Math.round(ms / 60_000);
|
||
|
||
if (minutes < 60) return `in ${Math.max(1, minutes)} min`;
|
||
|
||
const hours = Math.round(minutes / 60);
|
||
if (hours < 48) return `in ${hours} hour${hours === 1 ? '' : 's'}`;
|
||
|
||
const days = Math.round(hours / 24);
|
||
|
||
return `in ${days} day${days === 1 ? '' : 's'}`;
|
||
}
|
||
|
||
declare global {
|
||
interface HTMLElementTagNameMap {
|
||
'downloads-view': DownloadsView;
|
||
}
|
||
}
|