quick dependency fix

Created dev configuration

.angular-cli.json

@@ -1,61 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "youtube-dl-material"
-  },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "dist",
-      "assets": [
-        "assets",
-        "favicon.ico",
-        "backend/audio",
-        "backend/video",
-        "backend",
-        { "glob": "default.json", "input": "./", "output": "../backend/config/", "allowOutsideOutDir": true }
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
-      "styles": [
-        "styles.css"
-      ],
-      "scripts": [],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    }
-  ],
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [
-    {
-      "project": "src/tsconfig.app.json"
-    },
-    {
-      "project": "src/tsconfig.spec.json"
-    },
-    {
-      "project": "e2e/tsconfig.e2e.json"
-    }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "css",
-    "component": {}
-  }
-}

README.md

@@ -10,6 +10,10 @@ Here's an image of what it'll look like once you're done:
 
 ![frontpage](https://i.imgur.com/m3xozES.png)
 
+With optional file management enabled (default):
+
+![frontpage_with_files](https://i.imgur.com/z9vME2O.png)
+
 ### Prerequisites
 
 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:

angular.json

@@ -0,0 +1,134 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "youtube-dl-material": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico",
+              "src/backend/audio",
+              "src/backend/video",
+              "src/backend"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "youtube-dl-material:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "youtube-dl-material:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "youtube-dl-material:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [],
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": [
+              "src/assets",
+              "src/favicon.ico",
+              "src/backend/audio",
+              "src/backend/video",
+              "src/backend"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    },
+    "youtube-dl-material-e2e": {
+      "root": "e2e",
+      "sourceRoot": "e2e",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "youtube-dl-material:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "youtube-dl-material",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "css"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}

backend/app.js

@@ -6,9 +6,10 @@ var config = require('config');
 var https = require('https');
 var express = require("express");
 var bodyParser = require("body-parser");
-var pem = require('https-pem');
 var app = express();
 
+var URL = require('url').URL;
+
 var frontendUrl = config.get("YoutubeDLMaterial.Host.frontendurl");
 var backendUrl = config.get("YoutubeDLMaterial.Host.backendurl")
 var backendPort = 17442;
@@ -37,8 +38,10 @@ if (usingEncryption)
 app.use(bodyParser.urlencoded({ extended: false }));
 app.use(bodyParser.json());
 
+var url_domain = new URL(frontendUrl);
+
 app.use(function(req, res, next) {
-    res.header("Access-Control-Allow-Origin", frontendUrl);
+    res.header("Access-Control-Allow-Origin", url_domain.origin);
     res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
     next();
 });
@@ -173,7 +176,7 @@ app.post('/tomp3', function(req, res) {
     var date = Date.now();
     var path = audioPath;
     var audiopath = Date.now();
-    youtubedl.exec(url, ['-o', path + audiopath + ".mp3", '-x', '--audio-format', 'mp3', '--write-info-json'], {}, function(err, output) {
+    youtubedl.exec(url, ['--external-downloader', 'aria2c', '-o', path + audiopath + ".mp3", '-x', '--audio-format', 'mp3', '--write-info-json'], {}, function(err, output) {
         if (err) {
             audiopath = "-1";
             throw err;
@@ -182,6 +185,7 @@ app.post('/tomp3', function(req, res) {
 
     // write file info
 
+    /*
     youtubedl.getInfo(url, function(err, info) {
         if (err) throw err;
        
@@ -194,9 +198,12 @@ app.post('/tomp3', function(req, res) {
             console.log("The file was saved!");
         }); 
       });
+      */
     var completeString = "done";
     var audiopathEncoded = encodeURIComponent(audiopath);
-    res.send(audiopathEncoded);
+    res.send({
+        audiopathEncoded: audiopathEncoded
+    });
     res.end("yes");
 });
 
@@ -205,7 +212,7 @@ app.post('/tomp4', function(req, res) {
     var date = Date.now();
     var path = videoPath;
     var videopath = Date.now();
-    youtubedl.exec(url, ['-o', path + videopath + ".mp4", '-f', 'bestvideo[ext=mp4]+bestaudio[ext=m4a]/mp4', '--write-info-json'], {}, function(err, output) {
+    youtubedl.exec(url, ['--external-downloader', 'aria2c', '-o', path + videopath + ".mp4", '-f', 'bestvideo[ext=mp4]+bestaudio[ext=m4a]/mp4', '--write-info-json'], {}, function(err, output) {
         if (err) {
             videopath = "-1";
             throw err;
@@ -213,7 +220,9 @@ app.post('/tomp4', function(req, res) {
     });
     var completeString = "done";
     var videopathEncoded = encodeURIComponent(videopath);
-    res.send(videopathEncoded);
+    res.send({
+        videopathEncoded: videopathEncoded
+    });
     res.end("yes");
 });
 
@@ -274,6 +283,7 @@ app.post('/getMp3s', function(req, res) {
         if (ext == ".mp3") 
         {
             var jsonobj = getJSONMp3(path.basename(files[i]).substring(0, path.basename(files[i]).length-4));
+            if (!jsonobj) continue;
             var id = path.basename(files[i]).substring(0, path.basename(files[i]).length-4);
             var title = jsonobj.title;
 
@@ -290,7 +300,9 @@ app.post('/getMp3s', function(req, res) {
         }
     }
 
-    res.send(mp3s);
+    res.send({
+        mp3s: mp3s
+    });
     res.end("yes");
 });
 
@@ -307,6 +319,7 @@ app.post('/getMp4s', function(req, res) {
         if (ext == ".mp4") 
         {
             var jsonobj = getJSONMp4(path.basename(files[i]).substring(0, path.basename(files[i]).length-4));
+            if (!jsonobj) continue;
             var id = path.basename(files[i]).substring(0, path.basename(files[i]).length-4);
             var title = jsonobj.title;
 
@@ -323,7 +336,9 @@ app.post('/getMp4s', function(req, res) {
         }
     }
 
-    res.send(mp4s);
+    res.send({
+        mp4s: mp4s
+    });
     res.end("yes");
 });
 
@@ -334,7 +349,9 @@ app.post('/deleteMp3', function(req, res) {
     var wasDeleted = false;
     if (fs.existsSync(fullpath))
     {
-        fs.unlink(fullpath);
+        fs.unlink(fullpath, call => {
+
+        });
         wasDeleted = true;
         res.send(wasDeleted);
         res.end("yes");
@@ -354,7 +371,9 @@ app.post('/deleteMp4', function(req, res) {
     var wasDeleted = false;
     if (fs.existsSync(fullpath))
     {
-        fs.unlink(fullpath);
+        fs.unlink(fullpath, call => {
+            // console.log(call);
+        });
         wasDeleted = true;
         res.send(wasDeleted);
         res.end("yes");

backend/package.json

@@ -17,7 +17,10 @@
   },
   "homepage": "https://github.com/Tzahi12345/hda-backend#readme",
   "dependencies": {
+    "async": "^3.1.0",
+    "config": "^3.2.3",
     "exe": "^1.0.2",
-    "youtube-dl": "1.11.1"
+    "express": "^4.17.1",
+    "youtube-dl": "^2.0.1"
   }
 }

browserslist

@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

karma.conf.js

@@ -4,24 +4,22 @@
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma')
     ],
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true
     },
-    angularCli: {
-      environment: 'dev'
-    },
+    
     reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,

package.json

@@ -12,40 +12,44 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^5.2.0",
-    "@angular/cdk": "^5.0.4",
-    "@angular/common": "^5.2.0",
-    "@angular/compiler": "^5.2.0",
-    "@angular/core": "^5.2.0",
-    "@angular/forms": "^5.0.0",
-    "@angular/http": "^5.0.0",
-    "@angular/material": "^5.0.4",
-    "@angular/platform-browser": "^5.0.0",
-    "@angular/platform-browser-dynamic": "^5.0.0",
-    "@angular/router": "^5.0.0",
+    "@angular-devkit/core": "^8.3.12",
+    "@angular/animations": "^8.2.11",
+    "@angular/cdk": "^8.2.3",
+    "@angular/common": "^8.2.11",
+    "@angular/compiler": "^8.2.11",
+    "@angular/core": "^8.2.11",
+    "@angular/forms": "^8.2.11",
+    "@angular/http": "^7.2.15",
+    "@angular/material": "^8.2.3",
+    "@angular/platform-browser": "^8.2.11",
+    "@angular/platform-browser-dynamic": "^8.2.11",
+    "@angular/router": "^8.2.11",
     "core-js": "^2.4.1",
     "ng4-configure": "^0.1.7",
-    "rxjs": "^5.5.3",
-    "zone.js": "^0.8.4"
+    "rxjs": "^6.5.3",
+    "rxjs-compat": "^6.0.0-rc.0",
+    "tslib": "^1.10.0",
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular/cli": "1.5.5",
-    "@angular/compiler-cli": "^5.0.0",
-    "@angular/language-service": "^4.0.0",
+    "@angular-devkit/build-angular": "~0.803.12",
+    "@angular/cli": "^8.3.12",
+    "@angular/compiler-cli": "^8.2.11",
+    "@angular/language-service": "^8.2.11",
     "@types/jasmine": "2.5.45",
     "@types/node": "~6.0.60",
-    "codelyzer": "~3.0.1",
+    "codelyzer": "^5.0.1",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
     "karma": "~1.7.0",
     "karma-chrome-launcher": "~2.1.1",
     "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
     "protractor": "~5.1.2",
     "ts-node": "~3.0.4",
     "tslint": "~5.3.2",
-    "typescript": "~2.5.3"
+    "typescript": "~3.5.3"
   }
 }

src/app/app.component.css

@@ -22,7 +22,7 @@ mat-toolbar.top {
   }*/
 
 .big {
-    width: 60%;
+    max-width: 800px;
     margin: 0 auto;
 }
 
@@ -38,4 +38,19 @@ mat-toolbar.top {
 
 mat-form-field.mat-form-field {
     font-size: 24px;
-  }
+  }
+
+.spinner {
+    position: absolute;
+    display: inline-block;
+    margin-left: -28px;
+    margin-top: -10px;
+}
+
+.make-room-for-spinner {
+    padding-right: 40px;
+}
+
+.equal-sizes {
+    padding-right: 20px;
+}

src/app/app.component.html

@@ -13,29 +13,38 @@
 
 <br/>
 
-<mat-card id="card" class="big demo-basic">
-    <mat-card-title>
-        <mat-toolbar color="primary">Youtube Downloader</mat-toolbar>
-    </mat-card-title>
-    <div style="width: 100%; height: 100%; padding-left: 24px; padding-right: 24px; position: relative">
+<div class="big demo-basic">
+    <mat-card id="card" style="margin-right: 20px; margin-left: 20px;">
+        <mat-card-title>
+            Youtube Downloader
+        </mat-card-title>
         <mat-card-content>
-            <form class="example-form">
-                <mat-form-field class="example-full-width">
-                    <input matInput [(ngModel)]="url" placeholder="URL" type="url" name="url" [formControl]="urlForm" required>
-                    <mat-error *ngIf="urlError || urlForm.invalid">Please enter a valid URL!</mat-error>
-                </mat-form-field>
-            </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>
+            <div style="position: relative;">
+                <form class="example-form">
+                    <mat-form-field class="example-full-width">
+                        <input matInput [(ngModel)]="url" placeholder="URL" type="url" name="url" [formControl]="urlForm" required>
+                        <mat-error *ngIf="urlError || urlForm.invalid">Please enter a valid URL!</mat-error>
+                    </mat-form-field>
+                </form>
+                <br/>
+                <mat-checkbox [(ngModel)]="audioOnly" style="float: left; margin-top: -12px">Only Audio</mat-checkbox>
+                
+            </div>
         </mat-card-content>
-    </div>
-</mat-card>
+        <mat-card-actions>
+            <button style="margin-left: 8px; margin-bottom: 8px" (click)="downloadClicked()" [disabled]="downloadingfile" type="submit" mat-stroked-button
+                color="primary">Download</button>
+        </mat-card-actions>
+    </mat-card>
+</div>
 <br/>
 <div class="centered big" id="bar_div" *ngIf="downloadingfile;else nofile">
-    <div *ngIf="determinateProgress;else indeterminateprogress">
+    <div [ngClass]="(determinateProgress && percentDownloaded === 100)?'make-room-for-spinner':'equal-sizes'" style="display: inline-block; width: 100%; padding-left: 20px" *ngIf="determinateProgress;else indeterminateprogress">
         <mat-progress-bar mode="determinate" value="{{percentDownloaded}}"></mat-progress-bar>
+        <br/>
+    </div>
+    <div *ngIf="determinateProgress && percentDownloaded === 100" class="spinner">
+        <mat-spinner [diameter]="25"></mat-spinner>
     </div>
     <ng-template #indeterminateprogress>
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>
@@ -45,7 +54,7 @@
 <ng-template #nofile>
 
 </ng-template>
-<div *ngIf="fileManagerEnabled">
+<div style="margin: 20px" *ngIf="fileManagerEnabled">
     <mat-accordion>
         <mat-expansion-panel class="big">
             <mat-expansion-panel-header>

src/app/app.component.ts

@@ -15,56 +15,54 @@ import 'rxjs/add/operator/toPromise';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  determinateProgress: boolean = false;
-  downloadingfile: boolean = false;
+  determinateProgress = false;
+  downloadingfile = false;
   audioOnly: boolean;
-  urlError: boolean = false;
-  path: string = '';
-  url: string = '';
-  exists: string = "";
-  topBarTitle: string = "Youtube Downloader";
+  urlError = false;
+  path = '';
+  url = '';
+  exists = '';
+  topBarTitle = 'Youtube Downloader';
   percentDownloaded: number;
-  fileManagerEnabled: boolean = false;
+  fileManagerEnabled = false;
 
   mp3s: any[] = [];
   mp4s: any[] = [];
 
-  constructor(private postsService: PostsService, public snackBar: MatSnackBar) { 
-    this.audioOnly = true;
+  urlForm = new FormControl('', [Validators.required]);
+
+  constructor(private postsService: PostsService, public snackBar: MatSnackBar) {
+    this.audioOnly = false;
+
 
-    
 
     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;
+      const 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)
-      {
+      if (this.fileManagerEnabled) {
         this.getMp3s();
         this.getMp4s();
       }
-    },
-    error => {
+    }, error => {
       console.log(error);
     });
 
   }
-
-  urlForm = new FormControl('', [Validators.required]);
+  /*
 
   doHandshake(url: string) {
     this.postsService.startHandshake(url).subscribe(theurl => {
       this.postsService.path = theurl;
       this.postsService.handShakeComplete = true;
-      console.log("Handshake complete!");
-    },
-    error => {
-      console.log("Initial handshake failed on http.");
+      console.log('Handshake complete!');
+    }, error => {
+      console.log('Initial handshake failed on http.');
       this.doHandshakeSSL(url);
     });
   }
@@ -73,27 +71,26 @@ export class AppComponent {
     this.postsService.startHandshakeSSL(url).subscribe(theurl => {
       this.postsService.path = theurl;
       this.postsService.handShakeComplete = true;
-      console.log("Handshake complete!");
+      console.log('Handshake complete!');
     },
     error => {
-      console.log("Initial handshake failed on https too! Make sure port 17442 is open.");
+      console.log('Initial handshake failed on https too! Make sure port 17442 is open.');
       this.postsService.handShakeComplete = false;
     });
-  }
+  }*/
 
   getMp3s() {
     this.postsService.getMp3s().subscribe(result => {
-      var mp3s = result;
+      const mp3s = result['mp3s'];
       this.mp3s = mp3s;
-    },
-    error => {
+    }, error => {
       console.log(error);
     });
   }
 
   getMp4s() {
     this.postsService.getMp4s().subscribe(result => {
-      var mp4s = result;
+      const mp4s = result['mp4s'];
       this.mp4s = mp4s;
     },
     error => {
@@ -101,38 +98,28 @@ export class AppComponent {
     });
   }
 
-  public goToFile(name, isAudio)
-  {
-    if (isAudio)
-    {
+  public goToFile(name, isAudio) {
+    if (isAudio) {
       this.downloadHelperMp3(name);
-    }
-    else
-    {
+    } 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 removeFromMp3(name: string) {
+    for (let i = 0; i < this.mp3s.length; i++) {
+      if (this.mp3s[i].id === name) {
+        this.mp3s.splice(i, 1);
       }
     }
   }
 
-  public removeFromMp4(name: string)
-  {
+  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);
+    for (let i = 0; i < this.mp4s.length; i++) {
+      if (this.mp4s[i].id === name) {
+        this.mp4s.splice(i, 1);
       }
     }
   }
@@ -140,100 +127,80 @@ export class AppComponent {
   ngOnInit() {
   }
 
-  downloadHelperMp3(name: string)
-  {
+  downloadHelperMp3(name: string) {
     this.postsService.getFileStatusMp3(name).subscribe(fileExists => {
-      var exists = fileExists;
+      const exists = fileExists;
       this.exists = exists[0];
-      if (exists[0] == "failed")
-      {
-        var percent = exists[2];
+      if (exists[0] === 'failed') {
+        const percent = exists[2];
         console.log(percent);
-        if (percent > 0.30)
-        {
+        if (percent > 0.30) {
           this.determinateProgress = true;
-          this.percentDownloaded = percent*100;
+          this.percentDownloaded = percent * 100;
         }
         setTimeout(() => this.downloadHelperMp3(name), 500);
-      }
-      else
-      {
+      } else {
         window.location.href = this.exists;
       }
     });
-    
+
   }
 
-  downloadHelperMp4(name: string)
-  {
+  downloadHelperMp4(name: string) {
     this.postsService.getFileStatusMp4(name).subscribe(fileExists => {
-      var exists = fileExists;
+      const exists = fileExists;
       this.exists = exists[0];
-      if (exists[0] == "failed")
-      {
-        var percent = exists[2];
-        if (percent > 0.30)
-        {
+      if (exists[0] === 'failed') {
+        const percent = exists[2];
+        if (percent > 0.30) {
           this.determinateProgress = true;
-          this.percentDownloaded = percent*100;
+          this.percentDownloaded = percent * 100;
         }
         setTimeout(() => this.downloadHelperMp4(name), 500);
-      }
-      else
-      {
+      } else {
         window.location.href = this.exists;
       }
     });
-    
+
   }
 
-  downloadClicked()
-  {
-    if (this.ValidURL(this.url))
-    {
+  downloadClicked() {
+    if (this.ValidURL(this.url)) {
       this.urlError = false;
-      this.path = "";
-      
-      if (this.audioOnly)
-      {
+      this.path = '';
+
+      if (this.audioOnly) {
         this.downloadingfile = true;
         this.postsService.makeMP3(this.url).subscribe(posts => {
-          this.path = posts;
-          if (this.path != "-1")
-          {
+          this.path = posts['audiopathEncoded'];
+          if (this.path !== '-1') {
             this.downloadHelperMp3(this.path);
           }
-        },
-        error => { // can't access server
+        }, error => { // can't access server
           this.downloadingfile = false;
-          this.openSnackBar("Download failed!", "OK.");
+          this.openSnackBar('Download failed!', 'OK.');
         });
-      }
-      else
-      {
+      } else {
         this.downloadingfile = true;
         this.postsService.makeMP4(this.url).subscribe(posts => {
-          this.path = posts;
-          if (this.path != "-1")
-          {
+          this.path = posts['videopathEncoded'];
+          if (this.path !== '-1') {
             this.downloadHelperMp4(this.path);
           }
-        },
-        error => { // can't access server
+        }, error => { // can't access server
           this.downloadingfile = false;
-          this.openSnackBar("Download failed!", "OK.");
+          this.openSnackBar('Download failed!', 'OK.');
       });
       }
-    }
-    else
-    {
+    } else {
       this.urlError = true;
     }
   }
 
   ValidURL(str) {
-    var strRegex = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/;
-    var re=new RegExp(strRegex);
+    // tslint:disable-next-line: max-line-length
+    const strRegex = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/;
+    const re = new RegExp(strRegex);
     return re.test(str);
   }
 

src/app/app.module.ts

@@ -3,7 +3,8 @@ import { NgModule } from '@angular/core';
 import {MatNativeDateModule, MatRadioModule, MatInputModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule,
   MatSnackBarModule, MatCardModule, MatSelectModule, MatToolbarModule, MatCheckboxModule, MatGridListModule,
   MatProgressBarModule, MatExpansionModule,
-  MatGridList} from '@angular/material';
+  MatGridList,
+  MatProgressSpinnerModule} from '@angular/material';
   import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import { AppComponent } from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@@ -41,6 +42,7 @@ import {RouterModule} from '@angular/router';
     MatGridListModule,
     MatExpansionModule,
     MatProgressBarModule,
+    MatProgressSpinnerModule,
     RouterModule
   ],
   providers: [PostsService],

src/app/posts.services.ts

@@ -1,5 +1,6 @@
-import {Injectable} from '@angular/core';
-import {Http} from '@angular/http';
+import {Injectable, isDevMode} from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import config from '../assets/default.json';
 import 'rxjs/add/operator/map';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
@@ -8,93 +9,71 @@ import 'rxjs/add/observable/throw';
 
 @Injectable()
 export class PostsService {
-    path: string = "";
-    audioFolder: string = "";
-    videoFolder: string = "";
-    startPath: string = "http://localhost:17442/";
-    startPathSSL: string = "https://localhost:17442/"
-    handShakeComplete: boolean = false;
+    path = '';
+    audioFolder = '';
+    videoFolder = '';
+    startPath = 'http://localhost:17442/';
+    startPathSSL = 'https://localhost:17442/'
+    handShakeComplete = false;
 
-    constructor(private http: Http){
+    constructor(private http: HttpClient) {
         console.log('PostsService Initialized...');
     }
 
-    startHandshake(url: string): Observable<string>
-    {
-        return this.http.get(url + "geturl")
-            .map(res => res.json());
+    startHandshake(url: string) {
+        return this.http.get(url + 'geturl');
     }
 
-    startHandshakeSSL(url: string): Observable<string>
-    {
-        return this.http.get(url + "geturl")
-            .map(res => res.json());
+    startHandshakeSSL(url: string) {
+        return this.http.get(url + 'geturl');
     }
 
-    getVideoFolder(): Observable<string>
-    {
-        return this.http.get(this.startPath + "videofolder")
-            .map(res => res.json());
+    getVideoFolder() {
+        return this.http.get(this.startPath + 'videofolder');
     }
 
-    getAudioFolder(): Observable<string>
-    {
-        return this.http.get(this.startPath + "audiofolder")
-            .map(res => res.json());
+    getAudioFolder() {
+        return this.http.get(this.startPath + 'audiofolder');
     }
 
-    makeMP3(url: string): Observable<string>
-    {
-        return this.http.post(this.path + "tomp3",{url: url})
-            .map(res => res.json());
+    makeMP3(url: string) {
+        return this.http.post(this.path + 'tomp3', {url: url});
     }
 
-    makeMP4(url: string): Observable<string>
-    {
-        return this.http.post(this.path + "tomp4",{url: url})
-            .map(res => res.json());
+    makeMP4(url: string) {
+        return this.http.post(this.path + 'tomp4', {url: url});
     }
 
-    getFileStatusMp3(name: string): Observable<any> {
-        return this.http.post(this.path + "fileStatusMp3",{name: name})
-            .map(res => res.json());
+    getFileStatusMp3(name: string) {
+        return this.http.post(this.path + 'fileStatusMp3', {name: name});
     }
 
-    getFileStatusMp4(name: string): Observable<any> {
-        return this.http.post(this.path + "fileStatusMp4",{name: name})
-            .map(res => res.json());
+    getFileStatusMp4(name: string) {
+        return this.http.post(this.path + 'fileStatusMp4', {name: name});
     }
 
     loadNavItems() {
-        console.log("Config location: " + window.location.href + "backend/config/default.json");
-        return this.http.get(window.location.href + "backend/config/default.json")
-                        .map(res => res.json());
+        if (isDevMode()) {
+            return this.http.get('./assets/default.json');
+        }
+        console.log('Config location: ' + window.location.href + 'backend/config/default.json');
+        return this.http.get(window.location.href + 'backend/config/default.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());
+    deleteFile(name: string, isAudio: boolean) {
+        if (isAudio) {
+            return this.http.post(this.path + 'deleteMp3', {name: name});
+        } else {
+            return this.http.post(this.path + 'deleteMp4', {name: name});
         }
     }
 
-    getMp3s()
-    {
-        return this.http.post(this.path + "getMp3s", {})
-            .map(res => res.json());
+    getMp3s() {
+        return this.http.post(this.path + 'getMp3s', {});
     }
 
-    getMp4s()
-    {
-        return this.http.post(this.path + "getMp4s", {})
-            .map(res => res.json());
+    getMp4s() {
+        return this.http.post(this.path + 'getMp4s', {});
     }
 }
 

src/assets/default.json

@@ -0,0 +1,22 @@
+{
+    "YoutubeDLMaterial": {
+        "Host": {
+            "frontendurl": "http://localhost:4200",
+            "backendurl": "http://localhost:17442/"
+        },
+      "Encryption": {
+        "use-encryption": false,
+        "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:17442/",
+        "path-audio": "audio/",
+        "path-video": "video/"
+      },
+      "Extra": {
+        "title_top": "Youtube Downloader",
+		"file_manager_enabled": true
+      }
+    }
+  }

src/polyfills.ts

@@ -43,7 +43,6 @@
 
 /** Evergreen browsers require these. **/
 import 'core-js/es6/reflect';
-import 'core-js/es7/reflect';
 
 
 /** ALL Firefox browsers require the following to support `@angular/animation`. **/

src/tsconfig.app.json

@@ -2,7 +2,6 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
-    "module": "es2015",
     "baseUrl": "",
     "types": []
   },

src/tsconfig.spec.json

@@ -1,20 +1,19 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/spec",
-    "module": "commonjs",
-    "target": "es5",
-    "baseUrl": "",
-    "types": [
-      "jasmine",
-      "node"
-    ]
-  },
-  "files": [
-    "test.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "baseUrl": "",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts",
+    "polyfills.ts"
+
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]

tsconfig.json

@@ -1,6 +1,8 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "downlevelIteration": true,
+    "importHelpers": true,
     "outDir": "./dist/out-tsc",
     "baseUrl": "src",
     "sourceMap": true,
@@ -8,13 +10,16 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es5",
+    "target": "es2015",
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
     "typeRoots": [
       "node_modules/@types"
     ],
     "lib": [
       "es2016",
       "dom"
-    ]
+    ],
+    "module": "esnext"
   }
-}
+}

tslint.json

@@ -14,8 +14,7 @@
     "eofline": true,
     "forin": true,
     "import-blacklist": [
-      true,
-      "rxjs"
+      true
     ],
     "import-spacing": true,
     "indent": [
@@ -119,12 +118,12 @@
       "app",
       "kebab-case"
     ],
-    "use-input-property-decorator": true,
-    "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
+    "no-inputs-metadata-property": true,
+    "no-outputs-metadata-property": true,
+    "no-host-metadata-property": true,
     "no-input-rename": true,
     "no-output-rename": true,
-    "use-life-cycle-interface": true,
+    "use-lifecycle-interface": true,
     "use-pipe-transform-interface": true,
     "component-class-suffix": true,
     "directive-class-suffix": true,