Updated configuration

LICENSE.md

@@ -0,0 +1,7 @@
+Copyright 2018 Isaac Grynsztein
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,28 +1,62 @@
-# YoutubeDLMaterial
+# YoutubeDL-Material
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.1.2.
+YoutubeDL-Material is a material design frontend for [youtube-dl](https://rg3.github.io/youtube-dl/). It's coded using [Angular 5](https://angular.io/) for the frontend, and [Nodejs](https://nodejs.org/) on the backend.
 
-## Development server
+## Getting Started
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+Check out the prerequisites, and go to the installation section. Easy as pie!
 
-## Code scaffolding
+Here's an image of what it'll look like once you're done:
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|module`.
+![frontpage](https://i.imgur.com/m3xozES.png)
 
-## Build
+### Prerequisites
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+You need to have a functioning web server for this to work. Also make sure you have these dependencies installed on your system: ffmpeg, nodejs, python. If you don't, run this command:
 
-## Running unit tests
+```
+sudo apt-get install ffmpeg nodejs python
+```
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+### Installing
 
-## Running end-to-end tests
+First, download the [latest release](https://github.com/Tzahi12345/YoutubeDL-Material/releases/latest)!
 
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-Before running the tests make sure you are serving the app via `ng serve`.
+Drag all the files in `youtubedl-material` to a location accessible to a web server. It works best if it's the root (usually right inside `public_html`. Once that's done, navigate to `backend` and edit the `default.json` file. If you're using SSL encryption, look at the `encrypted.json` file for a template. 
 
-## Further help
+Port forward `17442` if you're going to access YoutubeDL-Material from out of your network. This is an important step. Make sure the configuration reflects this appropriately.
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+Once the configuration is done, type `sudo nodejs app.js`. This will run the backend server. On your browser, navigate to your installation folder. Try putting in a youtube link to see if it works. If it does, viola! YoutubeDL-Material is now up and running.
+
+If you experience problems, know that it's usually caused by a configuration problem. The first thing you should do is check the console. To get there, right click anywhere on the page and click "Inspect element." Then on the menu that pops up, click console. Look at the error there, and try to investigate.
+
+## Deployment
+
+If you'd like to install YoutubeDL-Material, go to the Installation section. If you want to build it yourself and/or develop the repository, then this section is for you.
+
+To deploy, simply clone the repository, and go into the `youtubedl-material` directory. Type `npm install` and all the dependencies will install. Then type `cd backend` and again type `npm install` to install the dependencies for the backend.
+
+Once you do that, you're almost up and running. All you need to do is edit the configuration in `youtubedl-material/backend/config`, go back into the `youtubedl-material` directory, and type `ng build --prod`. This will build the app, and put the output files in the `youtubedl-material/dist` folder. Drag those files into a web server, and drag the `backend` directory into the same folder. This folder should have `index.html` in it as well. If it does **not**, you're in the wrong directory.
+
+The frontend is now complete. The backend is much easier. Just go into the `youtubedl-material/backend` folder, and type `sudo nodejs app.js`.
+
+Finally, port forward the port `17442` and point it to the server's IP address. Make sure the port is also allowed through the firewall.
+
+## Contributing
+
+Feel free to submit a pull request! I have no guidelines as of yet, so no need to worry about that.
+
+## Authors
+
+* **Isaac Grynsztein** (me!) - *Initial work*
+
+See also the list of [contributors](https://github.com/your/project/contributors) who participated in this project.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
+
+## Acknowledgments
+
+* youtube-dl
+* [AllTube](https://github.com/Rudloff/alltube) (for the inspiration)

backend/app.js

@@ -48,6 +48,125 @@ app.get('/using-encryption', function(req, res) {
     res.end("yes");
 });
 
+// objects
+
+function File(id, title, thumbnailURL, isAudio, duration) {
+    this.id = id;
+    this.title = title;
+    this.thumbnailURL = thumbnailURL;
+    this.isAudio = isAudio;
+    this.duration = duration;
+}
+
+// actual functions
+
+function getThumbnailMp3(name)
+{
+    var obj = getJSONMp3(name);
+    var thumbnailLink = obj.thumbnail;
+    return thumbnailLink;
+}
+
+function getThumbnailMp4(name)
+{
+    var obj = getJSONMp4(name);
+    var thumbnailLink = obj.thumbnail;
+    return thumbnailLink;
+}
+
+function getFileSizeMp3(name)
+{
+    var jsonPath = audioPath+name+".mp3.info.json";
+
+    if (fs.existsSync(jsonPath))
+        var obj = JSON.parse(fs.readFileSync(jsonPath, 'utf8'));
+    else
+        var obj = 0;
+    
+    return obj.filesize;
+}
+
+function getFileSizeMp4(name)
+{
+    var jsonPath = videoPath+name+".info.json";
+    var filesize = 0;
+    if (fs.existsSync(jsonPath))
+    {
+        var obj = JSON.parse(fs.readFileSync(jsonPath, 'utf8'));
+        var format = obj.format.substring(0,3);
+        for (i = 0; i < obj.formats.length; i++)
+        {
+            if (obj.formats[i].format_id == format)
+            {
+                filesize = obj.formats[i].filesize;
+            }
+        }
+    }
+    
+    return filesize;
+}
+
+function getJSONMp3(name)
+{
+    var jsonPath = audioPath+name+".mp3.info.json";
+    if (fs.existsSync(jsonPath))
+    var obj = JSON.parse(fs.readFileSync(jsonPath, 'utf8'));
+    else
+        var obj = 0;
+    
+    return obj;
+}
+
+function getJSONMp4(name)
+{
+    var jsonPath = videoPath+name+".info.json";
+    if (fs.existsSync(jsonPath))
+    {
+        var obj = JSON.parse(fs.readFileSync(jsonPath, 'utf8'));
+        return obj;
+    }
+    else return 0;
+}
+
+function getAmountDownloadedMp3(name)
+{
+    var partPath = audioPath+name+".mp3.part";
+    if (fs.existsSync(partPath))
+    {
+        const stats = fs.statSync(partPath);
+        const fileSizeInBytes = stats.size;
+        return fileSizeInBytes;
+    }
+    else
+        return 0;
+}
+
+
+
+function getAmountDownloadedMp4(name)
+{
+    var format = getVideoFormatID(name);
+    var partPath = videoPath+name+".f"+format+".mp4.part";
+    if (fs.existsSync(partPath))
+    {
+        const stats = fs.statSync(partPath);
+        const fileSizeInBytes = stats.size;
+        return fileSizeInBytes;
+    }
+    else
+        return 0;
+}
+
+function getVideoFormatID(name)
+{
+    var jsonPath = videoPath+name+".info.json";
+    if (fs.existsSync(jsonPath))
+    {
+        var obj = JSON.parse(fs.readFileSync(jsonPath, 'utf8'));
+        var format = obj.format.substring(0,3);
+        return format;
+    }
+}
 
 app.post('/tomp3', function(req, res) {
     var url = req.body.url;
@@ -81,76 +200,6 @@ app.post('/tomp3', function(req, res) {
     res.end("yes");
 });
 
-function getFileSizeMp3(name)
-{
-    var jsonPath = audioPath+name+".mp3.info.json";
-
-    if (fs.existsSync(jsonPath))
-        var obj = JSON.parse(fs.readFileSync(jsonPath, 'utf8'));
-    else
-        var obj = 0;
-    
-    return obj.filesize;
-}
-
-function getAmountDownloadedMp3(name)
-{
-    var partPath = audioPath+name+".mp3.part";
-    if (fs.existsSync(partPath))
-    {
-        const stats = fs.statSync(partPath);
-        const fileSizeInBytes = stats.size;
-        return fileSizeInBytes;
-    }
-    else
-        return 0;
-}
-
-function getFileSizeMp4(name)
-{
-    var jsonPath = videoPath+name+".info.json";
-    var filesize = 0;
-    if (fs.existsSync(jsonPath))
-    {
-        var obj = JSON.parse(fs.readFileSync(jsonPath, 'utf8'));
-        var format = obj.format.substring(0,3);
-        for (i = 0; i < obj.formats.length; i++)
-        {
-            if (obj.formats[i].format_id == format)
-            {
-                filesize = obj.formats[i].filesize;
-            }
-        }
-    }
-    
-    return filesize;
-}
-
-function getAmountDownloadedMp4(name)
-{
-    var format = getVideoFormatID(name);
-    var partPath = videoPath+name+".f"+format+".mp4.part";
-    if (fs.existsSync(partPath))
-    {
-        const stats = fs.statSync(partPath);
-        const fileSizeInBytes = stats.size;
-        return fileSizeInBytes;
-    }
-    else
-        return 0;
-}
-
-function getVideoFormatID(name)
-{
-    var jsonPath = videoPath+name+".info.json";
-    if (fs.existsSync(jsonPath))
-    {
-        var obj = JSON.parse(fs.readFileSync(jsonPath, 'utf8'));
-        var format = obj.format.substring(0,3);
-        return format;
-    }
-}
-
 app.post('/tomp4', function(req, res) {
     var url = req.body.url;
     var date = Date.now();
@@ -168,7 +217,8 @@ app.post('/tomp4', function(req, res) {
     res.end("yes");
 });
 
-app.post('/mp3fileexists', function(req, res) {
+// gets the status of the mp3 file that's being downloaded
+app.post('/fileStatusMp3', function(req, res) {
     var name = req.body.name + "";
     var exists = "";
     var fullpath = audioPath + name + ".mp3";
@@ -189,7 +239,8 @@ app.post('/mp3fileexists', function(req, res) {
     res.end("yes");
 });
 
-app.post('/mp4fileexists', function(req, res) {
+// gets the status of the mp4 file that's being downloaded
+app.post('/fileStatusMp4', function(req, res) {
     var name = req.body.name;
     var exists = "";
     var fullpath = videoPath + name + ".mp4";
@@ -210,6 +261,113 @@ app.post('/mp4fileexists', function(req, res) {
     res.end("yes");
 });
 
+// gets all download mp3s
+app.post('/getMp3s', function(req, res) {
+    var mp3s = [];
+    var fullpath = audioPath;
+    var files = fs.readdirSync(audioPath);
+    
+    for (var i in files)
+    {
+        var nameLength = path.basename(files[i]).length;
+        var ext = path.basename(files[i]).substring(nameLength-4, nameLength);
+        if (ext == ".mp3") 
+        {
+            var jsonobj = getJSONMp3(path.basename(files[i]).substring(0, path.basename(files[i]).length-4));
+            var id = path.basename(files[i]).substring(0, path.basename(files[i]).length-4);
+            var title = jsonobj.title;
+
+            if (title.length > 14) // edits title if it's too long
+            {
+                title = title.substring(0,12) + "...";
+            }
+
+            var thumbnail = jsonobj.thumbnail;
+            var duration = jsonobj.duration;
+            var isaudio = true;
+            var file = new File(id, title, thumbnail, isaudio, duration);
+            mp3s.push(file);
+        }
+    }
+
+    res.send(mp3s);
+    res.end("yes");
+});
+
+// gets all download mp4s
+app.post('/getMp4s', function(req, res) {
+    var mp4s = [];
+    var fullpath = videoPath;
+    var files = fs.readdirSync(videoPath);
+    
+    for (var i in files)
+    {
+        var nameLength = path.basename(files[i]).length;
+        var ext = path.basename(files[i]).substring(nameLength-4, nameLength);
+        if (ext == ".mp4") 
+        {
+            var jsonobj = getJSONMp4(path.basename(files[i]).substring(0, path.basename(files[i]).length-4));
+            var id = path.basename(files[i]).substring(0, path.basename(files[i]).length-4);
+            var title = jsonobj.title;
+
+            if (title.length > 14) // edits title if it's too long
+            {
+                title = title.substring(0,12) + "...";
+            }
+
+            var thumbnail = jsonobj.thumbnail;
+            var duration = jsonobj.duration;
+            var isaudio = false;
+            var file = new File(id, title, thumbnail, isaudio, duration);
+            mp4s.push(file);
+        }
+    }
+
+    res.send(mp4s);
+    res.end("yes");
+});
+
+// deletes mp3 file
+app.post('/deleteMp3', function(req, res) {
+    var name = req.body.name;
+    var fullpath = audioPath + name + ".mp3";
+    var wasDeleted = false;
+    if (fs.existsSync(fullpath))
+    {
+        fs.unlink(fullpath);
+        wasDeleted = true;
+        res.send(wasDeleted);
+        res.end("yes");
+    }
+    else
+    {
+        wasDeleted = false;
+        res.send(wasDeleted);
+        res.end("yes");
+    }
+});
+
+// deletes mp4 file
+app.post('/deleteMp4', function(req, res) {
+    var name = req.body.name;
+    var fullpath = videoPath + name + ".mp4";
+    var wasDeleted = false;
+    if (fs.existsSync(fullpath))
+    {
+        fs.unlink(fullpath);
+        wasDeleted = true;
+        res.send(wasDeleted);
+        res.end("yes");
+    }
+    else
+    {
+        wasDeleted = false;
+        res.send(wasDeleted);
+        res.end("yes");
+    }
+});
+
+
 app.get('/video/:id', function(req , res){
     var head;
     const path = "video/" + req.params.id + ".mp4";

backend/config/default.default

@@ -1,19 +0,0 @@
-{
-    "YoutubeDL-Material": {
-        "Host": {
-            "frontend-url": "http://localhost:4200",
-            "backend-url": "youtubedl.grynsztein.com",
-            "backend-port": "8088"
-        },
-      "Encryption": {
-        "use-encryption": false,
-        "cert-file-path": "fullchain.pem",
-        "key-file-path": "privkey.pem"
-      },
-      "Downloader": {
-        "path-base": "http://localhost:8088/",
-        "path-audio": "audio/",
-        "path-video": "video/"
-      }
-    }
-  }

backend/config/default.json

@@ -1,21 +1,22 @@
 {
     "YoutubeDLMaterial": {
         "Host": {
-            "frontendurl": "http://localhost:4200",
-            "backendurl": "https://youtubedl.grynsztein.com/"
+            "frontendurl": "http://example.com",
+            "backendurl": "http://example.com:17442/"
         },
       "Encryption": {
         "use-encryption": false,
-        "cert-file-path": "cert.pem",
-        "key-file-path": "privkey.pem"
+        "cert-file-path": "/etc/letsencrypt/live/example.com/fullchain.pem",
+        "key-file-path": "/etc/letsencrypt/live/example.com/privkey.pem"
       },
       "Downloader": {
-        "path-base": "http://localhost:8088/",
+        "path-base": "http://example.com:17442/",
         "path-audio": "audio/",
         "path-video": "video/"
       },
       "Extra": {
-        "title_top": "Youtube Downloader"
+        "title_top": "Youtube Downloader",
+		"file_manager_enabled": true
       }
     }
-  }
+  }

backend/config/encrypted.json

@@ -0,0 +1,22 @@
+{
+    "YoutubeDLMaterial": {
+        "Host": {
+            "frontendurl": "https://example.com",
+            "backendurl": "https://example.com:17442/"
+        },
+      "Encryption": {
+        "use-encryption": true,
+        "cert-file-path": "/etc/letsencrypt/live/example.com/fullchain.pem",
+        "key-file-path": "/etc/letsencrypt/live/example.com/privkey.pem"
+      },
+      "Downloader": {
+        "path-base": "https://example.com:17442/",
+        "path-audio": "audio/",
+        "path-video": "video/"
+      },
+      "Extra": {
+        "title_top": "Youtube Downloader",
+		"file_manager_enabled": true
+      }
+    }
+  }

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,70 @@
             </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>
+<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 (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>
+
+</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,11 @@ export class AppComponent {
   exists: string = "";
   topBarTitle: string = "Youtube Downloader";
   percentDownloaded: number;
+  fileManagerEnabled: boolean = false;
+
+  mp3s: any[] = [];
+  mp4s: any[] = [];
+
   constructor(private postsService: PostsService, public snackBar: MatSnackBar) { 
     this.audioOnly = true;
 
@@ -31,14 +37,22 @@ 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;
+
+      if (this.fileManagerEnabled)
+      {
+        this.getMp3s();
+        this.getMp4s();
+      }
     },
     error => {
       console.log(error);
     });
+
   }
 
   urlForm = new FormControl('', [Validators.required]);
@@ -67,6 +81,62 @@ 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 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++)
+    {
+      if (this.mp3s[i].id == name)
+      {
+        this.mp3s.splice(i,1);
+      }
+    }
+  }
+
+  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)
+      {
+        this.mp4s.splice(i,1);
+      }
+    }
+  }
+
   ngOnInit() {
   }
 
@@ -167,7 +237,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,19 +1,23 @@
 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';
 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: [
-    AppComponent
+    AppComponent,
+    FileCardComponent
   ],
   imports: [
     BrowserModule,
@@ -34,7 +38,10 @@ import {APP_BASE_HREF} from '@angular/common';
     MatSidenavModule,
     MatIconModule,
     MatListModule,
-    MatProgressBarModule
+    MatGridListModule,
+    MatExpansionModule,
+    MatProgressBarModule,
+    RouterModule
   ],
   providers: [PostsService],
   bootstrap: [AppComponent]

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><a href="javascript:void(0)" (click)="appComponent.goToFile(name, isAudio)">{{title}}</a></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,47 @@
+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',
+  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;
+  @Output() removeFile: EventEmitter<string> = new EventEmitter<string>();
+
+  constructor(private postsService: PostsService, public snackBar: MatSnackBar, public appComponent: AppComponent) { }
+
+  ngOnInit() {
+  }
+
+  deleteFile()
+  {
+    this.postsService.deleteFile(this.name, this.isAudio).subscribe(result => {
+      if (result == true)
+      {
+        this.openSnackBar("Delete success!", "OK.");
+        this.removeFile.emit(this.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());
+    }
 }