Add "Format" column to frontend interface to display downloaded audio/video formats

app/ytdl.py

@@ -33,6 +33,7 @@ class DownloadQueueNotifier:
 class DownloadInfo:
     def __init__(self, id, title, url, quality, format, folder, custom_name_prefix, error):
         self.id = id if len(custom_name_prefix) == 0 else f'{custom_name_prefix}.{id}'
+        self.id = f'{id}.{format}'
         self.title = title if len(custom_name_prefix) == 0 else f'{custom_name_prefix}.{title}'
         self.url = url
         self.quality = quality
@@ -203,7 +204,7 @@ class PersistentQueue:
             return sorted(shelf.items(), key=lambda item: item[1].timestamp)
 
     def put(self, value):
-        key = value.info.url
+        key = value.info.id
         self.dict[key] = value
         with shelve.open(self.path, 'w') as shelf:
             shelf[key] = value.info
@@ -285,10 +286,10 @@ class DownloadQueue:
                     pass
             download.info.status = 'error'
         download.close()
-        if self.queue.exists(download.info.url):
+        if self.queue.exists(download.info.id):
-            self.queue.delete(download.info.url)
+            self.queue.delete(download.info.id)
             if download.canceled:
-                asyncio.create_task(self.notifier.canceled(download.info.url))
+                asyncio.create_task(self.notifier.canceled(download.info.id))
             else:
                 self.done.put(download)
                 asyncio.create_task(self.notifier.completed(download.info))
@@ -361,9 +362,9 @@ class DownloadQueue:
             return {'status': 'ok'}
         elif etype == 'video' or (etype.startswith('url') and 'id' in entry and 'title' in entry):
             log.debug('Processing as a video')
-            key = entry.get('webpage_url') or entry['url']
+            url = entry.get('webpage_url') or entry['url']
-            if not self.queue.exists(key):
+            dl = DownloadInfo(entry['id'], entry.get('title') or entry['id'], url, quality, format, folder, custom_name_prefix, error)
-                dl = DownloadInfo(entry['id'], entry.get('title') or entry['id'], key, quality, format, folder, custom_name_prefix, error)
+            if not self.queue.exists(dl.id):
                 dldirectory, error_message = self.__calc_download_path(quality, format, folder)
                 if error_message is not None:
                     return error_message

ui/src/app/app.component.html

@@ -290,7 +290,7 @@
           <th scope="col" style="width: 1rem;">
             <app-master-checkbox #queueMasterCheckbox [id]="'queue'" [list]="downloads.queue" (changed)="queueSelectionChanged($event)"></app-master-checkbox>
           </th>
-          <th scope="col">Video</th>
+          <th scope="col">Media</th>
           <th scope="col" style="width: 8rem;">Speed</th>
           <th scope="col" style="width: 7rem;">ETA</th>
           <th scope="col" style="width: 6rem;"></th>
@@ -336,7 +336,8 @@
           <th scope="col" style="width: 1rem;">
             <app-master-checkbox #doneMasterCheckbox [id]="'done'" [list]="downloads.done" (changed)="doneSelectionChanged($event)"></app-master-checkbox>
           </th>
-          <th scope="col">Video</th>
+          <th scope="col">Media</th>
+          <th scope="col">Format</th>
           <th scope="col">File Size</th>
           <th scope="col" style="width: 8rem;"></th>
         </tr>
@@ -358,6 +359,9 @@
               <span *ngIf="download.value.error"><br>Error: {{download.value.error}}</span>
             </ng-template>
           </td>
+          <td>
+            <span *ngIf="download.value.format">{{ download.value.format }}</span>
+          </td>
           <td>
             <span *ngIf="download.value.size">{{ download.value.size | fileSize }}</span>
           </td>

ui/src/app/downloads.service.ts

@@ -59,21 +59,21 @@ export class DownloadsService {
     });
     socket.fromEvent('added').subscribe((strdata: string) => {
       let data: Download = JSON.parse(strdata);
-      this.queue.set(data.url, data);
+      this.queue.set(data.id, data);
       this.queueChanged.next(null);
     });
     socket.fromEvent('updated').subscribe((strdata: string) => {
       let data: Download = JSON.parse(strdata);
-      let dl: Download = this.queue.get(data.url);
+      let dl: Download = this.queue.get(data.id);
       data.checked = dl.checked;
       data.deleting = dl.deleting;
-      this.queue.set(data.url, data);
+      this.queue.set(data.id, data);
       this.updated.next(null);
     });
     socket.fromEvent('completed').subscribe((strdata: string) => {
       let data: Download = JSON.parse(strdata);
-      this.queue.delete(data.url);
+      this.queue.delete(data.id);
-      this.done.set(data.url, data);
+      this.done.set(data.id, data);
       this.queueChanged.next(null);
       this.doneChanged.next(null);
     });
@@ -127,13 +127,13 @@ export class DownloadsService {
 
   public startByFilter(where: string, filter: (dl: Download) => boolean) {
     let ids: string[] = [];
-    this[where].forEach((dl: Download) => { if (filter(dl)) ids.push(dl.url) });
+    this[where].forEach((dl: Download) => { if (filter(dl)) ids.push(dl.id) });
     return this.startById(ids);
   }
 
   public delByFilter(where: string, filter: (dl: Download) => boolean) {
     let ids: string[] = [];
-    this[where].forEach((dl: Download) => { if (filter(dl)) ids.push(dl.url) });
+    this[where].forEach((dl: Download) => { if (filter(dl)) ids.push(dl.id) });
     return this.delById(where, ids);
   }
   public addDownloadByUrl(url: string): Promise<any> {