Added support for modifying downloaded files

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,
+    });
+  }
+
+}