Merge PR #1059: show the queued format in the Downloading table

ui/src/app/app.html

@@ -693,6 +693,7 @@
             <app-select-all-checkbox #queueMasterCheckboxRef [id]="'queue'" [list]="downloads.queue" (changed)="queueSelectionChanged($event)" />
           </th>
           <th scope="col">Video</th>
+          <th scope="col" style="width: 7rem;">Format</th>
           <th scope="col" style="width: 8rem;">Speed</th>
           <th scope="col" style="width: 7rem;">ETA</th>
           <th scope="col" style="width: 6rem;"></th>
@@ -726,6 +727,7 @@
                 }
               </div>
             </td>
+            <td class="text-nowrap">{{ formatLabel(download.value) }}</td>
             <td>{{ download.value.speed | speed }}</td>
             <td>{{ download.value.eta | eta }}</td>
             <td>

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;

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