UI updates to subscriptions

Improved translation coverage

backend/subscriptions.js

@@ -439,7 +439,11 @@ async function getAllSubscriptions() {
 }
 
 async function getSubscription(subID) {
-    return await db_api.getRecord('subscriptions', {id: subID});
+    const sub = await db_api.getRecord('subscriptions', {id: subID});
+    // now with the download_queue, we may need to override 'downloading'
+    const current_downloads = await db_api.getRecords('download_queue', {running: true, sub_id: sub.id}, true);
+    if (!sub['downloading']) sub['downloading'] = current_downloads > 0;
+    return sub;
 }
 
 async function getSubscriptionByName(subName, user_uid = null) {

src/app/dialogs/edit-subscription-dialog/edit-subscription-dialog.component.html

@@ -9,13 +9,13 @@
             <div class="col-12 mt-3">
                 <mat-checkbox (change)="downloadAllToggled()" [(ngModel)]="download_all"><ng-container i18n="Download all uploads subscription setting">Download all uploads</ng-container></mat-checkbox>
             </div>
-            <div class="col-12" *ngIf="!download_all && editor_initialized">
+            <div class="col-12" *ngIf="editor_initialized">
                 <ng-container i18n="Download time range prefix">Download videos uploaded in the last</ng-container>
                 <mat-form-field color="accent" class="amount-select">
-                    <input type="number" matInput [(ngModel)]="timerange_amount" (ngModelChange)="timerangeChanged($event, false)">
+                    <input type="number" matInput [(ngModel)]="timerange_amount" (ngModelChange)="timerangeChanged($event, false)" [disabled]="download_all">
                 </mat-form-field>
                 <mat-form-field class="unit-select">
-                    <mat-select color="accent" [(ngModel)]="timerange_unit" (ngModelChange)="timerangeChanged($event, true)">
+                    <mat-select color="accent" [(ngModel)]="timerange_unit" (ngModelChange)="timerangeChanged($event, true)" [disabled]="download_all">
                         <mat-option *ngFor="let time_unit of time_units" [value]="time_unit + (timerange_amount === 1 ? '' : 's')">
                             {{time_unit + (timerange_amount === 1 ? '' : 's')}}
                         </mat-option>

src/app/dialogs/subscribe-dialog/subscribe-dialog.component.html

@@ -24,14 +24,14 @@
             <div class="col-12">
                 <mat-checkbox [(ngModel)]="download_all"><ng-container i18n="Download all uploads subscription setting">Download all uploads</ng-container></mat-checkbox>
             </div>
-            <div class="col-12" *ngIf="!download_all">
+            <div class="col-12">
                 <span i18n="Download time range prefix">Download videos uploaded in the last</span>
                 <div>
                     <mat-form-field color="accent" style="width: 100px; text-align: center;">
-                        <input type="number" matInput [(ngModel)]="timerange_amount">
+                        <input type="number" matInput [(ngModel)]="timerange_amount" [disabled]="download_all">
                     </mat-form-field>
                     <mat-form-field class="unit-select">
-                        <mat-select color="accent" [(ngModel)]="timerange_unit">
+                        <mat-select color="accent" [(ngModel)]="timerange_unit" [disabled]="download_all">
                             <mat-option *ngFor="let time_unit of time_units" [value]="time_unit + (timerange_amount === 1 ? '' : 's')">
                                 {{time_unit + (timerange_amount === 1 ? '' : 's')}}
                             </mat-option>

src/app/dialogs/subscription-info-dialog/subscription-info-dialog.component.html

@@ -23,5 +23,5 @@
     <button mat-button mat-dialog-close><ng-container i18n="Close subscription info button">Close</ng-container></button>
     <button mat-stroked-button (click)="downloadArchive()" color="accent"><ng-container i18n="Export Archive button">Export Archive</ng-container></button>
     <span class="spacer"></span>
-    <button mat-button (click)="unsubscribe()" color="warn"><ng-container i18n="Unsubscribe button">Unsubscribe</ng-container></button>
+    <button mat-button (click)="confirmUnsubscribe()" color="warn"><ng-container i18n="Unsubscribe button">Unsubscribe</ng-container></button>
 </mat-dialog-actions>

src/app/dialogs/subscription-info-dialog/subscription-info-dialog.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { PostsService } from 'app/posts.services';
+import { ConfirmDialogComponent } from '../confirm-dialog/confirm-dialog.component';
 
 @Component({
   selector: 'app-subscription-info-dialog',
@@ -13,7 +14,8 @@ export class SubscriptionInfoDialogComponent implements OnInit {
   unsubbedEmitter = null;
 
   constructor(public dialogRef: MatDialogRef<SubscriptionInfoDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any, private postsService: PostsService) { }
+    @Inject(MAT_DIALOG_DATA) public data: any, private postsService: PostsService,
+    private dialog: MatDialog) { }
 
   ngOnInit() {
     if (this.data) {
@@ -22,6 +24,22 @@ export class SubscriptionInfoDialogComponent implements OnInit {
     }
   }
 
+  confirmUnsubscribe() {
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+      data: {
+        dialogTitle: $localize`Unsubscribe from ${this.sub['name']}:subscription name:`,
+        dialogText: $localize`Would you like to unsubscribe from ${this.sub['name']}:subscription name:?`,
+        submitText: $localize`Unsubscribe`,
+        warnSubmitColor: true
+      }
+    });
+    dialogRef.afterClosed().subscribe(confirmed => {
+      if (confirmed) {
+        this.unsubscribe();
+      }
+    });
+  }
+
   unsubscribe() {
     this.postsService.unsubscribe(this.sub, true).subscribe(res => {
       this.unsubbedEmitter.emit(true);
@@ -30,7 +48,7 @@ export class SubscriptionInfoDialogComponent implements OnInit {
   }
 
   downloadArchive() {
-    this.postsService.downloadArchive(this.sub).subscribe(res => {
+    this.postsService.downloadArchive(null, this.sub.id).subscribe(res => {
       const blob: Blob = res;
       saveAs(blob, 'archive.txt');
     });

src/app/settings/settings.component.ts

@@ -170,9 +170,9 @@ export class SettingsComponent implements OnInit {
   deleteCategory(category: Category): void {
     const dialogRef = this.dialog.open(ConfirmDialogComponent, {
       data: {
-        dialogTitle: 'Delete category',
-        dialogText: `Would you like to delete ${category['name']}?`,
-        submitText: 'Delete',
+        dialogTitle: $localize`Delete category`,
+        dialogText: $localize`Would you like to delete ${category['name']}:category name:?`,
+        submitText: $localize`Delete`,
         warnSubmitColor: true
       }
     });
@@ -180,12 +180,11 @@ export class SettingsComponent implements OnInit {
       if (confirmed) {
         this.postsService.deleteCategory(category['uid']).subscribe(res => {
           if (res['success']) {
-            // TODO: Make translatable
-            this.postsService.openSnackBar(`Successfully deleted ${category['name']}!`);
+            this.postsService.openSnackBar($localize`Successfully deleted ${category['name']}:category name:!`);
             this.postsService.reloadCategories();
           }
         }, () => {
-          this.postsService.openSnackBar(`Failed to delete ${category['name']}!`);
+          this.postsService.openSnackBar($localize`Failed to delete ${category['name']}:category name:!`);
         });
       }
     });

src/app/subscription/subscription/subscription.component.html

@@ -10,9 +10,9 @@
     <br/>
 
     <div *ngIf="subscription">
-        <app-recent-videos [sub_id]="subscription.id" [usePaginator]="false"></app-recent-videos>
+        <app-recent-videos #recentVideos [sub_id]="subscription.id" [usePaginator]="false"></app-recent-videos>
     </div>
-    <button class="edit-button" color="primary" (click)="editSubscription()" [disabled]="downloading" mat-fab><mat-icon class="save-icon">edit</mat-icon></button>
-    <button class="watch-button" color="primary" (click)="watchSubscription()" mat-fab><mat-icon class="save-icon">video_library</mat-icon></button>
-    <button class="save-button" color="primary" (click)="downloadContent()" [disabled]="downloading" mat-fab><mat-icon class="save-icon">save</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="50"></mat-spinner></button>
+    <button class="edit-button" color="primary" (click)="editSubscription()" [disabled]="downloading" matTooltip="Edit" i18n-matTooltip="Edit" mat-fab><mat-icon class="save-icon">edit</mat-icon></button>
+    <button class="watch-button" color="primary" (click)="watchSubscription()" matTooltip="Play all" i18n-matTooltip="Play all" mat-fab><mat-icon class="save-icon">video_library</mat-icon></button>
+    <button class="save-button" color="primary" (click)="downloadContent()" [disabled]="downloading" matTooltip="Download zip" i18n-matTooltip="Download zip" mat-fab><mat-icon class="save-icon">save</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="50"></mat-spinner></button>
 </div>

src/app/subscription/subscription/subscription.component.ts

@@ -54,6 +54,9 @@ export class SubscriptionComponent implements OnInit, OnDestroy {
           this.subscription['downloading'] = res['subscription']['downloading'];
         }
         return;
+      } else if (res['subscription']['videos'].length > (this.subscription?.videos.length || 0)) {
+        // only when files are added so we don't reload files when one is deleted
+        this.postsService.files_changed.next(true);
       }
       this.subscription = res['subscription'];
     });

src/app/subscriptions/subscriptions.component.html

@@ -15,10 +15,10 @@
             </div>
         </a>
         <div style="pointer-events: auto; color: unset" matListItemMeta>
-            <button mat-icon-button (click)="editSubscription(sub)">
+            <button matTooltip="Edit" i18n-matTooltip="Edit" mat-icon-button (click)="editSubscription(sub)">
                 <mat-icon>edit</mat-icon>
             </button>
-            <button mat-icon-button (click)="showSubInfo(sub)">
+            <button matTooltip="Info" i18n-matTooltip="Info" mat-icon-button (click)="showSubInfo(sub)">
                 <mat-icon>info</mat-icon>
             </button>
         </div>
@@ -39,10 +39,10 @@
             </div>
         </a>
         <div style="pointer-events: auto; color: unset" matListItemMeta>
-            <button mat-icon-button (click)="editSubscription(sub)">
+            <button matTooltip="Edit" i18n-matTooltip="Edit" mat-icon-button (click)="editSubscription(sub)">
                 <mat-icon>edit</mat-icon>
             </button>
-            <button mat-icon-button (click)="showSubInfo(sub)">
+            <button matTooltip="Info" i18n-matTooltip="Info" mat-icon-button (click)="showSubInfo(sub)">
                 <mat-icon>info</mat-icon>
             </button>
         </div>
@@ -57,4 +57,4 @@
     <mat-progress-bar mode="indeterminate"></mat-progress-bar>
 </div>
 
-<button class="add-subscription-button" (click)="openSubscribeDialog()" mat-fab><mat-icon>add</mat-icon></button>
+<button class="add-subscription-button" (click)="openSubscribeDialog()" matTooltip="Add subscription" i18n-matTooltip="Add subscription" mat-fab><mat-icon>add</mat-icon></button>