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();
|