diff --git a/ui/src/app/app.html b/ui/src/app/app.html index 5707495..0f705cb 100644 --- a/ui/src/app/app.html +++ b/ui/src/app/app.html @@ -693,6 +693,7 @@ Video + Format Speed ETA @@ -726,6 +727,7 @@ } + {{ formatLabel(download.value) }} {{ download.value.speed | speed }} {{ download.value.eta | eta }} diff --git a/ui/src/app/app.spec.ts b/ui/src/app/app.spec.ts index fb529e8..9ba4546 100644 --- a/ui/src/app/app.spec.ts +++ b/ui/src/app/app.spec.ts @@ -6,6 +6,7 @@ import { DownloadsService } from './services/downloads.service'; import { SubscriptionsService } from './services/subscriptions.service'; import { ToastService } from './services/toast.service'; import { CookieService } from 'ngx-cookie-service'; +import { Download } from './interfaces'; class DownloadsServiceStub { loading = false; @@ -229,6 +230,46 @@ describe('App', () => { expect(root.textContent).toContain('starts in'); }); + it('shows the queued format in the Downloading table', () => { + downloads.queue.set('https://example.com/v', { + id: 'v1', + title: 'Some Video', + url: 'https://example.com/v', + download_type: 'audio', + quality: 'best', + format: 'flac', + folder: '', + custom_name_prefix: '', + playlist_item_limit: 0, + status: 'downloading', + msg: '', + percent: 10, + speed: 0, + eta: 0, + filename: '', + checked: false, + }); + downloads.queueChanged.next(); + + const fixture = TestBed.createComponent(App); + fixture.detectChanges(); + + const row = (fixture.nativeElement as HTMLElement).querySelector('tbody tr'); + expect(row?.textContent).toContain('FLAC'); + }); + + it('labels formats the way the form does, and copes with an unknown one', () => { + const app = TestBed.createComponent(App).componentInstance; + const base = { format: '' } as Download; + + expect(app.formatLabel({ ...base, format: 'any' })).toBe('Auto'); + expect(app.formatLabel({ ...base, format: 'mp4' })).toBe('MP4'); + expect(app.formatLabel({ ...base, format: 'srt' })).toBe('SRT'); + // A format from a record older than the option list still reads sensibly. + expect(app.formatLabel({ ...base, format: 'mkv' })).toBe('MKV'); + expect(app.formatLabel(base)).toBe('-'); + }); + it('includes titleRegex in subscribe payload', () => { const fixture = TestBed.createComponent(App); const app = fixture.componentInstance; diff --git a/ui/src/app/app.ts b/ui/src/app/app.ts index 717daee..c486085 100644 --- a/ui/src/app/app.ts +++ b/ui/src/app/app.ts @@ -912,6 +912,22 @@ export class App implements AfterViewInit, OnInit, OnDestroy { return type.charAt(0).toUpperCase() + type.slice(1); } + // The format the download was queued with, labelled the way the form labels + // it, so a queued item can be told apart while it is still downloading. + formatLabel(download: Download): string { + const format = (download.format || '').trim(); + if (!format) { + return '-'; + } + const options: Option[] = [ + ...this.videoFormats, + ...this.audioFormats, + ...this.captionFormats, + ...this.thumbnailFormats, + ]; + return options.find(o => o.id === format)?.text ?? format.toUpperCase(); + } + formatCodecLabel(download: Download): string { if (download.download_type !== 'video') { const format = (download.format || '').toUpperCase();