Add auto start option for metube

ui/src/app/app.component.html

@@ -50,7 +50,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-md-5 add-url-component">
+        <div class="col-md-3 add-url-component">
           <div class="input-group">
             <span class="input-group-text">Quality</span>
             <select class="form-select" name="quality" [(ngModel)]="quality" (change)="qualityChanged()" [disabled]="addInProgress || downloads.loading">
@@ -58,7 +58,7 @@
             </select>
           </div>
         </div>
-        <div class="col-md-4 add-url-component">
+        <div class="col-md-3 add-url-component">
           <div class="input-group">
             <span class="input-group-text">Format</span>
             <select class="form-select" name="format" [(ngModel)]="format" (change)="formatChanged()" [disabled]="addInProgress || downloads.loading">
@@ -66,6 +66,15 @@
             </select>
           </div>
         </div>
+        <div class="col-md-3 add-url-component">
+          <div class="input-group">
+            <span class="input-group-text">Auto Start</span>
+            <select class="form-select" name="autoStart" [(ngModel)]="autoStart" (change)="autoStartChanged()" [disabled]="addInProgress || downloads.loading">
+              <option [ngValue]="true">Yes</option>
+              <option [ngValue]="false">No</option>
+            </select>
+          </div>
+        </div>
         <div class="col-md-3 add-url-component">
           <div [attr.class]="showAdvanced() ? 'btn-group add-url-group' : 'add-url-group'" ngbDropdown #advancedDropdown="ngbDropdown" display="dynamic" placement="bottom-end">
             <button class="btn btn-primary add-url" type="submit" (click)="addDownload()" [disabled]="addInProgress || downloads.loading">
@@ -111,6 +120,7 @@
         <th scope="col" style="width: 7rem;">ETA</th>
         <th scope="col" style="width: 2rem;"></th>
         <th scope="col" style="width: 2rem;"></th>
+        <th scope="col" style="width: 2rem;"></th>
       </tr>
     </thead>
     <tbody>
@@ -122,6 +132,9 @@
         <td><ngb-progressbar height="1.5rem" [showValue]="download.value.status != 'preparing'" [striped]="download.value.status == 'preparing'" [animated]="download.value.status == 'preparing'" type="success" [value]="download.value.status == 'preparing' ? 100 : download.value.percent | number:'1.0-0'"></ngb-progressbar></td>
         <td>{{ download.value.speed | speed }}</td>
         <td>{{ download.value.eta | eta }}</td>
+        <td>
+          <button *ngIf="download.value.status === 'pending'" type="button" class="btn btn-link" (click)="downloadItemByKey(download.key)"><fa-icon [icon]="faDownload"></fa-icon></button>
+        </td>
         <td><button type="button" class="btn btn-link" (click)="delDownload('queue', download.key)"><fa-icon [icon]="faTrashAlt"></fa-icon></button></td>
         <td><a href="{{download.value.url}}" target="_blank"><fa-icon [icon]="faExternalLinkAlt"></fa-icon></a></td>
       </tr>

ui/src/app/app.component.sass

@@ -3,7 +3,7 @@
     outline: 0px
 
 .add-url-box
-    max-width: 720px
+    max-width: 960px
     margin: 4rem auto
 
 .add-url-component

ui/src/app/app.component.ts

@@ -23,6 +23,7 @@ export class AppComponent implements AfterViewInit {
   format: string;
   folder: string;
   customNamePrefix: string;
+  autoStart: boolean;
   addInProgress = false;
   themes: Theme[] = Themes;
   activeTheme: Theme;
@@ -51,6 +52,8 @@ export class AppComponent implements AfterViewInit {
     // Needs to be set or qualities won't automatically be set
     this.setQualities()
     this.quality = cookieService.get('metube_quality') || 'best';
+    this.autoStart = cookieService.get('metube_auto_start') === 'true';
+
     this.activeTheme = this.getPreferredTheme(cookieService);
   }
 
@@ -154,6 +157,10 @@ export class AppComponent implements AfterViewInit {
     this.downloads.customDirsChanged.next(this.downloads.customDirs);
   }
 
+  autoStartChanged() {
+    this.cookieService.set('metube_auto_start', this.autoStart ? 'true' : 'false', { expires: 3650 });
+  }
+
   queueSelectionChanged(checked: number) {
     this.queueDelSelected.nativeElement.disabled = checked == 0;
   }
@@ -169,16 +176,17 @@ export class AppComponent implements AfterViewInit {
     this.quality = exists ? this.quality : 'best'
   }
 
-  addDownload(url?: string, quality?: string, format?: string, folder?: string, customNamePrefix?: string) {
+  addDownload(url?: string, quality?: string, format?: string, folder?: string, customNamePrefix?: string, autoStart?: boolean) {
     url = url ?? this.addUrl
     quality = quality ?? this.quality
     format = format ?? this.format
     folder = folder ?? this.folder
     customNamePrefix = customNamePrefix ?? this.customNamePrefix
+    autoStart = autoStart ?? this.autoStart
 
-    console.debug('Downloading: url='+url+' quality='+quality+' format='+format+' folder='+folder+' customNamePrefix='+customNamePrefix);
+    console.debug('Downloading: url='+url+' quality='+quality+' format='+format+' folder='+folder+' customNamePrefix='+customNamePrefix+' autoStart='+autoStart);
     this.addInProgress = true;
-    this.downloads.add(url, quality, format, folder, customNamePrefix).subscribe((status: Status) => {
+    this.downloads.add(url, quality, format, folder, customNamePrefix, autoStart).subscribe((status: Status) => {
       if (status.status === 'error') {
         alert(`Error adding URL: ${status.msg}`);
       } else {
@@ -188,8 +196,12 @@ export class AppComponent implements AfterViewInit {
     });
   }
 
+  downloadItemByKey(id: string) {
+    this.downloads.startById([id]).subscribe();
+  }
+
   retryDownload(key: string, download: Download) {
-    this.addDownload(download.url, download.quality, download.format, download.folder, download.custom_name_prefix);
+    this.addDownload(download.url, download.quality, download.format, download.folder, download.custom_name_prefix, true);
     this.downloads.delById('done', [key]).subscribe();
   }
 

ui/src/app/downloads.service.ts

@@ -99,12 +99,16 @@ export class DownloadsService {
     return of({status: 'error', msg: msg})
   }
 
-  public add(url: string, quality: string, format: string, folder: string, customNamePrefix: string) {
-    return this.http.post<Status>('add', {url: url, quality: quality, format: format, folder: folder, custom_name_prefix: customNamePrefix}).pipe(
+  public add(url: string, quality: string, format: string, folder: string, customNamePrefix: string, autoStart: boolean) {
+    return this.http.post<Status>('add', {url: url, quality: quality, format: format, folder: folder, custom_name_prefix: customNamePrefix, auto_start: autoStart}).pipe(
       catchError(this.handleHTTPError)
     );
   }
 
+  public startById(ids: string[]) {
+    return this.http.post('start', {ids: ids});
+  }
+
   public delById(where: string, ids: string[]) {
     ids.forEach(id => this[where].get(id).deleting = true);
     return this.http.post('delete', {where: where, ids: ids});