Added support for modifying downloaded files

src/app/app.component.html

@@ -1,14 +1,14 @@
 <mat-toolbar color="primary" class="top">
-        <table width="100%" height="100%">
-            <td class="topbar" style="text-align: left; left:0px; font-size: 15px">
-            </td>
-            <td class="topbar" style="text-align: center">
-                <div style="margin-top: 14px">{{topBarTitle}}</div>
-            </td>
-            <td class="topbar" style="text-align: right">
-    
-            </td>
-        </table>
+    <table width="100%" height="100%">
+        <td class="topbar" style="text-align: left; left:0px; font-size: 15px">
+        </td>
+        <td class="topbar" style="text-align: center">
+            <div style="margin-top: 14px">{{topBarTitle}}</div>
+        </td>
+        <td class="topbar" style="text-align: right">
+
+        </td>
+    </table>
 </mat-toolbar>
 
 <br/>
@@ -27,19 +27,66 @@
             </form>
             <br/>
             <mat-checkbox [(ngModel)]="audioOnly" style="float: left; margin-top: -12px">Only Audio</mat-checkbox>
-            <button style="float: right; margin-top: -16px" (click)="downloadClicked()" [disabled]="downloadingfile" type="submit" mat-raised-button color="primary">Download</button>
+            <button style="float: right; margin-top: -16px" (click)="downloadClicked()" [disabled]="downloadingfile" type="submit" mat-raised-button
+                color="primary">Download</button>
         </mat-card-content>
     </div>
 </mat-card>
 <br/>
 <div class="centered big" id="bar_div" *ngIf="downloadingfile;else nofile">
-        <div *ngIf="determinateProgress;else indeterminateprogress">
-                <mat-progress-bar mode="determinate" value="{{percentDownloaded}}"></mat-progress-bar>
-        </div>
-        <ng-template #indeterminateprogress>
-                <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-        </ng-template>
+    <div *ngIf="determinateProgress;else indeterminateprogress">
+        <mat-progress-bar mode="determinate" value="{{percentDownloaded}}"></mat-progress-bar>
+    </div>
+    <ng-template #indeterminateprogress>
+        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+    </ng-template>
+    <br/>
 </div>
 <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>
+
+    </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>
+
+<ng-template #nomp3s>
+
+</ng-template>
+
+<ng-template #nomp4s>
+
+</ng-template>

src/app/app.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import {PostsService} from './posts.services';
+import {FileCardComponent} from './file-card/file-card.component';
 import { Observable } from 'rxjs/Observable';
 import {FormControl, Validators} from '@angular/forms';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@@ -23,6 +24,10 @@ export class AppComponent {
   exists: string = "";
   topBarTitle: string = "Youtube Downloader";
   percentDownloaded: number;
+
+  mp3s: any[] = [];
+  mp4s: any[] = [];
+
   constructor(private postsService: PostsService, public snackBar: MatSnackBar) { 
     this.audioOnly = true;
 
@@ -35,10 +40,14 @@ export class AppComponent {
       this.postsService.path = backendUrl;
       this.postsService.startPath = backendUrl;
       this.postsService.startPathSSL = backendUrl;
+
+      this.getMp3s();
+      this.getMp4s();
     },
     error => {
       console.log(error);
     });
+
   }
 
   urlForm = new FormControl('', [Validators.required]);
@@ -67,6 +76,48 @@ export class AppComponent {
     });
   }
 
+  getMp3s() {
+    this.postsService.getMp3s().subscribe(result => {
+      var mp3s = result;
+      this.mp3s = mp3s;
+    },
+    error => {
+      console.log(error);
+    });
+  }
+
+  getMp4s() {
+    this.postsService.getMp4s().subscribe(result => {
+      var mp4s = result;
+      this.mp4s = mp4s;
+    },
+    error => {
+      console.log(error);
+    });
+  }
+
+  public removeFromMp3(name: string)
+  {
+    for (var i = 0; i < this.mp3s.length; i++)
+    {
+      if (this.mp3s[i].id == name)
+      {
+        this.mp3s.splice(i,1);
+      }
+    }
+  }
+
+  public removeFromMp4(name: string)
+  {
+    for (var i = 0; i < this.mp4s.length; i++)
+    {
+      if (this.mp4s[i].id == name)
+      {
+        this.mp4s.splice(i,1);
+      }
+    }
+  }
+
   ngOnInit() {
   }
 
@@ -167,7 +218,7 @@ export class AppComponent {
     return re.test(str);
   }
 
-  openSnackBar(message: string, action: string) {
+  public openSnackBar(message: string, action: string) {
     this.snackBar.open(message, action, {
       duration: 2000,
     });

src/app/app.module.ts

@@ -1,8 +1,9 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import {MatNativeDateModule, MatRadioModule, MatInputModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule,
-  MatSnackBarModule, MatCardModule, MatSelectModule, MatToolbarModule, MatCheckboxModule,
-  MatProgressBarModule  } from '@angular/material';
+  MatSnackBarModule, MatCardModule, MatSelectModule, MatToolbarModule, MatCheckboxModule, MatGridListModule,
+  MatProgressBarModule, MatExpansionModule,
+  MatGridList} from '@angular/material';
   import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import { AppComponent } from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@@ -10,10 +11,12 @@ import { HttpModule } from '@angular/http';
 import { HttpClientModule } 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';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    FileCardComponent
   ],
   imports: [
     BrowserModule,
@@ -34,6 +37,8 @@ import {APP_BASE_HREF} from '@angular/common';
     MatSidenavModule,
     MatIconModule,
     MatListModule,
+    MatGridListModule,
+    MatExpansionModule,
     MatProgressBarModule
   ],
   providers: [PostsService],

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

@@ -0,0 +1,33 @@
+.example-card {
+  width: 150px;
+  height: 125px;
+  padding: 0px;
+}
+
+.deleteButton {
+  top:-5px;
+  right:-5px;
+  position:absolute;
+}
+
+/* Coerce the <span> icon container away from display:inline */
+.mat-icon-button .mat-button-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.image {
+  max-width:100%;
+  max-height:100%;
+}
+
+.example-full-width-height {
+  width: 100%;
+  height: 100%
+}
+
+.centered {
+  margin: 0 auto;
+  top: 50%;
+  left: 50%;
+}

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

@@ -0,0 +1,13 @@
+<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>
+    <br/>
+    ID: {{name}}
+</div>
+    
+
+  
+  <div class="centered example-full-width-height"><img class="image" src="{{thumbnailURL}}" alt="Thumbnail"></div>
+
+</mat-card>

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

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

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

@@ -0,0 +1,48 @@
+import { Component, OnInit, Input } from '@angular/core';
+import {PostsService} from '../posts.services';
+import {MatSnackBar} from '@angular/material';
+import {AppComponent} from '../app.component';
+
+@Component({
+  selector: 'app-file-card',
+  templateUrl: './file-card.component.html',
+  styleUrls: ['./file-card.component.css']
+})
+export class FileCardComponent implements OnInit {
+
+  @Input() title:string;
+  @Input() length:string;
+  @Input() name:string;
+  @Input() thumbnailURL: string;
+  @Input() isAudio: boolean = true;
+
+  constructor(private postsService: PostsService, public snackBar: MatSnackBar, private appComponent: AppComponent) { }
+
+  ngOnInit() {
+  }
+
+  deleteFile()
+  {
+    this.postsService.deleteFile(this.name, this.isAudio).subscribe(result => {
+      if (result == true)
+      {
+        this.openSnackBar("Delete success!", "OK.");
+        if (this.isAudio)
+          this.appComponent.removeFromMp3(name);
+        else
+          this.appComponent.removeFromMp4(name);
+      }
+      else
+      {
+        this.openSnackBar("Delete failed!", "OK.");
+      }
+    });
+  }
+
+  public openSnackBar(message: string, action: string) {
+    this.snackBar.open(message, action, {
+      duration: 2000,
+    });
+  }
+
+}

src/app/posts.services.ts

@@ -56,12 +56,12 @@ export class PostsService {
     }
 
     getFileStatusMp3(name: string): Observable<any> {
-        return this.http.post(this.path + "mp3fileexists",{name: name})
+        return this.http.post(this.path + "fileStatusMp3",{name: name})
             .map(res => res.json());
     }
 
     getFileStatusMp4(name: string): Observable<any> {
-        return this.http.post(this.path + "mp4fileexists",{name: name})
+        return this.http.post(this.path + "fileStatusMp4",{name: name})
             .map(res => res.json());
     }
 
@@ -70,6 +70,32 @@ export class PostsService {
         return this.http.get(window.location.href + "backend/config/default.json")
                         .map(res => res.json());
     }
+
+    deleteFile(name: string, isAudio: boolean)
+    {
+        if (isAudio)
+        {
+            return this.http.post(this.path + "deleteMp3",{name: name})
+                .map(res => res.json());
+        }
+        else
+        {
+            return this.http.post(this.path + "deleteMp4",{name: name})
+                .map(res => res.json());
+        }
+    }
+
+    getMp3s()
+    {
+        return this.http.post(this.path + "getMp3s", {})
+            .map(res => res.json());
+    }
+
+    getMp4s()
+    {
+        return this.http.post(this.path + "getMp4s", {})
+            .map(res => res.json());
+    }
 }