Added configuration option for file manager

src/app/app.component.html

@@ -45,43 +45,47 @@
 <ng-template #nofile>
 
 </ng-template>
-<mat-accordion>
-    <mat-expansion-panel class="big">
-        <mat-expansion-panel-header>
-            <mat-panel-title>
-                Audio
-            </mat-panel-title>
-            <mat-panel-description>
-                Your audio files are here
-            </mat-panel-description>
-        </mat-expansion-panel-header>
-        <div *ngIf="mp3s.length > 0;else nomp3s">
-            <mat-grid-list cols="4" rowHeight="150px">
-                <mat-grid-tile *ngFor="let file of mp3s; index as i;">
-                    <app-file-card [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL" [length]="file.duration" [isAudio]="true"></app-file-card>
-                </mat-grid-tile>
-            </mat-grid-list>
-        </div>
+<div *ngIf="fileManagerEnabled">
+    <mat-accordion>
+        <mat-expansion-panel class="big">
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    Audio
+                </mat-panel-title>
+                <mat-panel-description>
+                    Your audio files are here
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+            <div *ngIf="mp3s.length > 0;else nomp3s">
+                <mat-grid-list cols="4" rowHeight="150px">
+                    <mat-grid-tile *ngFor="let file of mp3s; index as i;">
+                        <app-file-card (removeFile)="removeFromMp3($event)" [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL"
+                            [length]="file.duration" [isAudio]="true"></app-file-card>
+                    </mat-grid-tile>
+                </mat-grid-list>
+            </div>
 
-    </mat-expansion-panel>
-    <mat-expansion-panel class="big">
-        <mat-expansion-panel-header>
-            <mat-panel-title>
-                Video
-            </mat-panel-title>
-            <mat-panel-description>
-                Your video files are here
-            </mat-panel-description>
-        </mat-expansion-panel-header>
-        <div *ngIf="mp4s.length > 0;else nomp4s">
-            <mat-grid-list cols="4" rowHeight="150px">
-                <mat-grid-tile *ngFor="let file of mp4s; index as i;">
-                    <app-file-card [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL" [length]="file.duration" [isAudio]="false"></app-file-card>
-                </mat-grid-tile>
-            </mat-grid-list>
-        </div>
-    </mat-expansion-panel>
-</mat-accordion>
+        </mat-expansion-panel>
+        <mat-expansion-panel class="big">
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    Video
+                </mat-panel-title>
+                <mat-panel-description>
+                    Your video files are here
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+            <div *ngIf="mp4s.length > 0;else nomp4s">
+                <mat-grid-list cols="4" rowHeight="150px">
+                    <mat-grid-tile *ngFor="let file of mp4s; index as i;">
+                        <app-file-card (removeFile)="removeFromMp4($event)" [title]="file.title" [name]="file.id" [thumbnailURL]="file.thumbnailURL"
+                            [length]="file.duration" [isAudio]="false"></app-file-card>
+                    </mat-grid-tile>
+                </mat-grid-list>
+            </div>
+        </mat-expansion-panel>
+    </mat-accordion>
+</div>
 
 <ng-template #nomp3s>
 

src/app/app.component.ts

@@ -24,6 +24,7 @@ export class AppComponent {
   exists: string = "";
   topBarTitle: string = "Youtube Downloader";
   percentDownloaded: number;
+  fileManagerEnabled: boolean = false;
 
   mp3s: any[] = [];
   mp4s: any[] = [];
@@ -36,13 +37,17 @@ export class AppComponent {
     this.postsService.loadNavItems().subscribe(result => { // loads settings
       var backendUrl = result.YoutubeDLMaterial.Host.backendurl;
       this.topBarTitle = result.YoutubeDLMaterial.Extra.title_top;
+      this.fileManagerEnabled = result.YoutubeDLMaterial.Extra.file_manager_enabled;
 
       this.postsService.path = backendUrl;
       this.postsService.startPath = backendUrl;
       this.postsService.startPathSSL = backendUrl;
 
-      this.getMp3s();
-      this.getMp4s();
+      if (this.fileManagerEnabled)
+      {
+        this.getMp3s();
+        this.getMp4s();
+      }
     },
     error => {
       console.log(error);
@@ -96,6 +101,18 @@ export class AppComponent {
     });
   }
 
+  public goToFile(name, isAudio)
+  {
+    if (isAudio)
+    {
+      this.downloadHelperMp3(name);
+    }
+    else
+    {
+      this.downloadHelperMp4(name);
+    }
+  }
+
   public removeFromMp3(name: string)
   {
     for (var i = 0; i < this.mp3s.length; i++)
@@ -109,6 +126,8 @@ export class AppComponent {
 
   public removeFromMp4(name: string)
   {
+    console.log(name);
+    console.log(this.mp4s);
     for (var i = 0; i < this.mp4s.length; i++)
     {
       if (this.mp4s[i].id == name)

src/app/app.module.ts

@@ -8,10 +8,11 @@ import {MatNativeDateModule, MatRadioModule, MatInputModule, MatButtonModule, Ma
 import { AppComponent } from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import { HttpModule } from '@angular/http';
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { PostsService } from 'app/posts.services';
 import {APP_BASE_HREF} from '@angular/common';
 import { FileCardComponent } from './file-card/file-card.component';
+import {RouterModule} from '@angular/router';
 
 @NgModule({
   declarations: [
@@ -39,7 +40,8 @@ import { FileCardComponent } from './file-card/file-card.component';
     MatListModule,
     MatGridListModule,
     MatExpansionModule,
-    MatProgressBarModule
+    MatProgressBarModule,
+    RouterModule
   ],
   providers: [PostsService],
   bootstrap: [AppComponent]

src/app/file-card/file-card.component.html

@@ -1,7 +1,7 @@
 <mat-card class="example-card">
   <button (click)="deleteFile()" class="deleteButton" mat-icon-button><mat-icon>delete_forever</mat-icon></button>
   <div style="padding:5px">
-    <b>{{title}}</b>
+    <b><a href="javascript:void(0)" (click)="appComponent.goToFile(name, isAudio)">{{title}}</a></b>
     <br/>
     ID: {{name}}
 </div>

src/app/file-card/file-card.component.ts

@@ -1,7 +1,8 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output } from '@angular/core';
 import {PostsService} from '../posts.services';
 import {MatSnackBar} from '@angular/material';
 import {AppComponent} from '../app.component';
+import {EventEmitter} from '@angular/core';
 
 @Component({
   selector: 'app-file-card',
@@ -15,8 +16,9 @@ export class FileCardComponent implements OnInit {
   @Input() name:string;
   @Input() thumbnailURL: string;
   @Input() isAudio: boolean = true;
+  @Output() removeFile: EventEmitter<string> = new EventEmitter<string>();
 
-  constructor(private postsService: PostsService, public snackBar: MatSnackBar, private appComponent: AppComponent) { }
+  constructor(private postsService: PostsService, public snackBar: MatSnackBar, public appComponent: AppComponent) { }
 
   ngOnInit() {
   }
@@ -27,10 +29,7 @@ export class FileCardComponent implements OnInit {
       if (result == true)
       {
         this.openSnackBar("Delete success!", "OK.");
-        if (this.isAudio)
-          this.appComponent.removeFromMp3(name);
-        else
-          this.appComponent.removeFromMp4(name);
+        this.removeFile.emit(this.name);
       }
       else
       {