Stylistic improvements and moved away from @angular/http

src/app/app.component.css

@@ -22,7 +22,7 @@ mat-toolbar.top {
   }*/
 
 .big {
-    width: 60%;
+    max-width: 800px;
     margin: 0 auto;
 }
 

src/app/app.component.html

@@ -13,25 +13,30 @@
 
 <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">

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/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', {});
     }
 }