downloads refactor half done - videos are now implement, but audo files are now

Added downloads manager in the UI where downloads can be viewed/cleared

src/app/app-routing.module.ts

@@ -4,11 +4,13 @@ import { MainComponent } from './main/main.component';
 import { PlayerComponent } from './player/player.component';
 import { SubscriptionsComponent } from './subscriptions/subscriptions.component';
 import { SubscriptionComponent } from './subscription/subscription/subscription.component';
+import { DownloadsComponent } from './components/downloads/downloads.component';
 const routes: Routes = [
   { path: 'home', component: MainComponent },
   { path: 'player', component: PlayerComponent},
   { path: 'subscriptions', component: SubscriptionsComponent },
   { path: 'subscription', component: SubscriptionComponent },
+  { path: 'downloads', component: DownloadsComponent },
   { path: '', redirectTo: '/home', pathMatch: 'full' },
 ];
 

src/app/app.component.html

@@ -3,7 +3,7 @@
         <mat-toolbar color="primary" class="sticky-toolbar top-toolbar">
             <div class="flex-row" width="100%" height="100%">
                 <div class="flex-column" style="text-align: left; margin-top: 1px;">
-                    <button #hamburgerMenu style="outline: none" *ngIf="router.url.split(';')[0] !== '/player' && allowSubscriptions" mat-icon-button aria-label="Toggle side navigation" (click)="toggleSidenav()"><mat-icon>menu</mat-icon></button>
+                    <button #hamburgerMenu style="outline: none" *ngIf="router.url.split(';')[0] !== '/player'" mat-icon-button aria-label="Toggle side navigation" (click)="toggleSidenav()"><mat-icon>menu</mat-icon></button>
                     <button (click)="goBack()" *ngIf="router.url.split(';')[0] === '/player'" mat-icon-button><mat-icon>arrow_back</mat-icon></button>
                 </div>
                 <div class="flex-column" style="text-align: center; margin-top: 5px;">
@@ -37,7 +37,8 @@
             <mat-sidenav #sidenav>
                 <mat-nav-list>
                     <a mat-list-item (click)="sidenav.close()" routerLink='/home'><ng-container i18n="Navigation menu Home Page title">Home</ng-container></a>
-                    <a mat-list-item (click)="sidenav.close()" routerLink='/subscriptions'><ng-container i18n="Navigation menu Subscriptions Page title">Subscriptions</ng-container></a>
+                    <a *ngIf="allowSubscriptions" mat-list-item (click)="sidenav.close()" routerLink='/subscriptions'><ng-container i18n="Navigation menu Subscriptions Page title">Subscriptions</ng-container></a>
+                    <a mat-list-item (click)="sidenav.close()" routerLink='/downloads'><ng-container i18n="Navigation menu Downloads Page title">Downloads</ng-container></a>
                 </mat-nav-list>
             </mat-sidenav>
             <mat-sidenav-content [style.background]="postsService.theme ? postsService.theme.background_color : null">

src/app/app.module.ts

@@ -57,6 +57,7 @@ import { ArgModifierDialogComponent, HighlightPipe } from './dialogs/arg-modifie
 import { UpdaterComponent } from './updater/updater.component';
 import { UpdateProgressDialogComponent } from './dialogs/update-progress-dialog/update-progress-dialog.component';
 import { ShareMediaDialogComponent } from './dialogs/share-media-dialog/share-media-dialog.component';
+import { DownloadsComponent } from './components/downloads/downloads.component';
 registerLocaleData(es, 'es');
 
 export function isVisible({ event, element, scrollContainer, offset }: IsVisibleProps<any>) {
@@ -85,7 +86,8 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     HighlightPipe,
     UpdaterComponent,
     UpdateProgressDialogComponent,
-    ShareMediaDialogComponent
+    ShareMediaDialogComponent,
+    DownloadsComponent
   ],
   imports: [
     CommonModule,

src/app/components/downloads/downloads.component.html

@@ -0,0 +1,24 @@
+<div style="padding: 20px;">
+    <div *ngFor="let session_downloads of downloads | keyvalue">
+        <ng-container *ngIf="keys(session_downloads.value).length > 0">
+            <mat-card style="padding-bottom: 30px; margin-bottom: 15px;">
+                <h4 style="text-align: center;"><ng-container i18n="Session ID">Session ID:</ng-container>&nbsp;{{session_downloads.key}}
+                    <span *ngIf="session_downloads.key === postsService.session_id">&nbsp;<ng-container i18n="Current session">(current)</ng-container></span>
+                </h4>
+                <div class="container">
+                    <div class="row">
+                        <div *ngFor="let download of session_downloads.value | keyvalue; let i = index;" class="col-12 my-1">
+                            <mat-card *ngIf="download.value" class="mat-elevation-z3">
+                                <app-download-item [download]="download.value" [queueNumber]="i+1" (cancelDownload)="clearDownload(session_downloads.key, download.value.uid)"></app-download-item>
+                            </mat-card>
+                        </div>
+                    </div>
+                </div>
+            </mat-card>
+        </ng-container>
+    </div>
+
+    <div *ngIf="downloads && !downloadsValid()">
+        <h4 style="text-align: center;" i18n="No downloads label">No downloads available!</h4>
+    </div>
+</div>

src/app/components/downloads/downloads.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DownloadsComponent } from './downloads.component';
+
+describe('DownloadsComponent', () => {
+  let component: DownloadsComponent;
+  let fixture: ComponentFixture<DownloadsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DownloadsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DownloadsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/downloads/downloads.component.ts

@@ -0,0 +1,106 @@
+import { Component, OnInit, ViewChildren, QueryList, ElementRef } from '@angular/core';
+import { PostsService } from 'app/posts.services';
+import { trigger, transition, animateChild, stagger, query, style, animate } from '@angular/animations';
+
+@Component({
+  selector: 'app-downloads',
+  templateUrl: './downloads.component.html',
+  styleUrls: ['./downloads.component.scss'],
+  animations: [
+    // nice stagger effect when showing existing elements
+    trigger('list', [
+      transition(':enter', [
+        // child animation selector + stagger
+        query('@items',
+          stagger(100, animateChild()), { optional: true }
+        )
+      ]),
+    ]),
+    trigger('items', [
+      // cubic-bezier for a tiny bouncing feel
+      transition(':enter', [
+        style({ transform: 'scale(0.5)', opacity: 0 }),
+        animate('500ms cubic-bezier(.8,-0.6,0.2,1.5)',
+          style({ transform: 'scale(1)', opacity: 1 }))
+      ]),
+      transition(':leave', [
+        style({ transform: 'scale(1)', opacity: 1, height: '*' }),
+        animate('1s cubic-bezier(.8,-0.6,0.2,1.5)',
+          style({ transform: 'scale(0.5)', opacity: 0, height: '0px', margin: '0px' }))
+      ]),
+    ])
+  ],
+})
+export class DownloadsComponent implements OnInit {
+
+  downloads_check_interval = 500;
+  downloads = null;
+
+  keys = Object.keys;
+
+  valid_sessions_length = 0;
+
+  constructor(public postsService: PostsService) { }
+
+  ngOnInit(): void {
+    this.getCurrentDownloads();
+    setInterval(() => {
+      this.getCurrentDownloads();
+    }, this.downloads_check_interval);
+  }
+
+  getCurrentDownloads() {
+    this.postsService.getCurrentDownloads().subscribe(res => {
+      if (res['downloads']) {
+        if (JSON.stringify(this.downloads) !== JSON.stringify(res['downloads'])) {
+          // if they're not the same, then replace
+          this.downloads = res['downloads'];
+        }
+      } else {
+        // failed to get downloads
+      }
+    });
+  }
+
+  clearDownload(session_id, download_uid) {
+    this.postsService.clearDownloads(false, session_id, download_uid).subscribe(res => {
+      if (res['success']) {
+        this.downloads = res['downloads'];
+      } else {
+      }
+    });
+  }
+
+  clearDownloads(session_id) {
+    this.postsService.clearDownloads(false, session_id).subscribe(res => {
+      if (res['success']) {
+        this.downloads = res['downloads'];
+      } else {
+      }
+    });
+  }
+
+  clearAllDownloads() {
+    this.postsService.clearDownloads(true).subscribe(res => {
+      if (res['success']) {
+        this.downloads = res['downloads'];
+      } else {
+      }
+    });
+  }
+
+  downloadsValid() {
+    let valid = false;
+    const keys = this.keys(this.downloads);
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      const value = this.downloads[key];
+      if (this.keys(value).length > 0) {
+        valid = true;
+        break;
+      }
+    }
+    return valid;
+  }
+
+}

src/app/download-item/download-item.component.html

@@ -1,16 +1,21 @@
 <div>
     <mat-grid-list [rowHeight]="50" [cols]="24">
-        <mat-grid-tile [colspan]="2">
-            <h5 style="display: inline-block; margin-right: 5px; position: relative; top: 5px;">{{queueNumber}}.</h5>
-        </mat-grid-tile>
-        <mat-grid-tile [colspan]="6">
-            <div style="display: inline-block; text-align: center;"><ng-container i18n="Download ID">ID:</ng-container>&nbsp;{{url_id}}</div>
+        <mat-grid-tile [colspan]="7">
+            <div style="display: inline-block; text-align: center; width: 100%;"><span class="shorten"><ng-container i18n="Download ID">ID:</ng-container>&nbsp;{{url_id ? url_id : download.uid}}</span></div>
         </mat-grid-tile>
         <mat-grid-tile [colspan]="13">
-                <mat-progress-bar style="width: 80%" [value]="download.percent_complete" [mode]="(download.percent_complete === 0) ? 'indeterminate' : 'determinate'"></mat-progress-bar>
+                <mat-progress-bar [value]="(download.complete || download.error) ? 100 : download.percent_complete" [mode]="(!download.complete && download.percent_complete === 0 && !download.error) ? 'indeterminate' : 'determinate'"></mat-progress-bar>
+                <mat-icon *ngIf="download.complete" style="margin-left: 25px; cursor: default" matTooltip="The download is complete" matTooltip-i18n>done</mat-icon>
+                <mat-icon *ngIf="download.error" style="margin-left: 25px; cursor: default" matTooltip="An error has occurred" matTooltip-i18n>error</mat-icon>
         </mat-grid-tile>
-        <mat-grid-tile [colspan]="3">
-            <button (click)="cancelTheDownload()" mat-icon-button color="warn"><mat-icon fontSet="material-icons-outlined">cancel</mat-icon></button>
+        <mat-grid-tile [colspan]="4">
+            <button style="margin-bottom: 2px;" (click)="cancelTheDownload()" mat-icon-button color="warn"><mat-icon fontSet="material-icons-outlined">cancel</mat-icon></button>
         </mat-grid-tile>
     </mat-grid-list>
+    <mat-expansion-panel class="ignore-margin" *ngIf="download.error">
+        <mat-expansion-panel-header>
+            Error
+        </mat-expansion-panel-header>
+        {{download.error}}
+    </mat-expansion-panel>
 </div>

src/app/download-item/download-item.component.scss

@@ -0,0 +1,16 @@
+.shorten {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: block;
+}
+
+.mat-expansion-panel:not([class*='mat-elevation-z']) {
+    box-shadow: none;
+}
+
+.ignore-margin {
+    margin-left: -15px;
+    margin-right: -15px;
+    margin-bottom: -15px;
+}

src/app/download-item/download-item.component.ts

@@ -13,9 +13,11 @@ export class DownloadItemComponent implements OnInit {
     uid: null,
     type: 'audio',
     percent_complete: 0,
+    complete: false,
     url: 'http://youtube.com/watch?v=17848rufj',
     downloading: true,
-    is_playlist: false
+    is_playlist: false,
+    error: false
   };
   @Output() cancelDownload = new EventEmitter<Download>();
 

src/app/main/main.component.ts

@@ -34,7 +34,9 @@ export interface Download {
   percent_complete: number;
   downloading: boolean;
   is_playlist: boolean;
+  error: boolean | string;
   fileNames?: string[];
+  complete?: boolean;
 }
 
 @Component({
@@ -207,7 +209,8 @@ export class MainComponent implements OnInit {
     percent_complete: 0,
     url: 'http://youtube.com/watch?v=17848rufj',
     downloading: true,
-    is_playlist: false
+    is_playlist: false,
+    error: false
   };
 
   simulatedOutput = '';
@@ -571,7 +574,8 @@ export class MainComponent implements OnInit {
           percent_complete: 0,
           url: this.url,
           downloading: true,
-          is_playlist: this.url.includes('playlist')
+          is_playlist: this.url.includes('playlist'),
+          error: false
         };
         this.downloads.push(new_download);
         if (!this.current_download && !this.multiDownloadMode) { this.current_download = new_download };
@@ -613,7 +617,8 @@ export class MainComponent implements OnInit {
           percent_complete: 0,
           url: this.url,
           downloading: true,
-          is_playlist: this.url.includes('playlist')
+          is_playlist: this.url.includes('playlist'),
+          error: false
         };
         this.downloads.push(new_download);
         if (!this.current_download && !this.multiDownloadMode) { this.current_download = new_download };

src/app/posts.services.ts

@@ -8,6 +8,7 @@ import { THEMES_CONFIG } from '../themes';
 import { Router } from '@angular/router';
 import { DOCUMENT } from '@angular/common';
 import { BehaviorSubject } from 'rxjs';
+import { v4 as uuid } from 'uuid';
 
 @Injectable()
 export class PostsService {
@@ -21,7 +22,9 @@ export class PostsService {
     theme;
     settings_changed = new BehaviorSubject<boolean>(false);
     auth_token = '4241b401-7236-493e-92b5-b72696b9d853';
+    session_id = null;
     httpOptions = null;
+    http_params: string = null;
 
     debugMode = false;
     constructor(private http: HttpClient, private router: Router, @Inject(DOCUMENT) private document: Document) {
@@ -29,15 +32,17 @@ export class PostsService {
         // this.startPath = window.location.href + '/api/';
         // this.startPathSSL = window.location.href + '/api/';
         this.path = this.document.location.origin + '/api/';
-
+        this.session_id = uuid();
         if (isDevMode()) {
             this.debugMode = true;
             this.path = 'http://localhost:17442/api/';
         }
 
+        this.http_params = `apiKey=${this.auth_token}&sessionID=${this.session_id}`
+
         this.httpOptions = {
             params: new HttpParams({
-              fromString: `apiKey=${this.auth_token}`
+              fromString: this.http_params
             }),
         };
     }
@@ -220,6 +225,13 @@ export class PostsService {
         return this.http.get(this.path + 'downloads', this.httpOptions);
     }
 
+    // clear downloads. download_id is optional, if it exists only 1 download will be cleared
+    clearDownloads(delete_all = false, session_id = null, download_id = null) {
+        return this.http.post(this.path + 'clearDownloads', {delete_all: delete_all,
+                                                            download_id: download_id,
+                                                            session_id: session_id ? session_id : this.session_id}, this.httpOptions);
+    }
+
     // updates the server to the latest version
     updateServer(tag) {
         return this.http.post(this.path + 'updateServer', {tag: tag}, this.httpOptions);