From 377676cda4865523535f6627585b56e86c27d122 Mon Sep 17 00:00:00 2001 From: Isaac Grynsztein Date: Sun, 20 Oct 2019 19:14:01 -0400 Subject: [PATCH] Stylistic improvements and moved away from @angular/http --- src/app/app.component.css | 2 +- src/app/app.component.html | 39 ++++---- src/app/app.component.ts | 179 +++++++++++++++---------------------- src/app/posts.services.ts | 103 +++++++++------------ 4 files changed, 137 insertions(+), 186 deletions(-) diff --git a/src/app/app.component.css b/src/app/app.component.css index 2a8b31f..9360a0e 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -22,7 +22,7 @@ mat-toolbar.top { }*/ .big { - width: 60%; + max-width: 800px; margin: 0 auto; } diff --git a/src/app/app.component.html b/src/app/app.component.html index d675494..6462413 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -13,25 +13,30 @@
- - - Youtube Downloader - -
+
+ + + Youtube Downloader + -
- - - Please enter a valid URL! - -
-
- Only Audio - +
+
+ + + Please enter a valid URL! + +
+
+ Only Audio + +
-
- + + + + +

diff --git a/src/app/app.component.ts b/src/app/app.component.ts index a511f5a..3093217 100644 --- a/src/app/app.component.ts +++ b/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); } diff --git a/src/app/posts.services.ts b/src/app/posts.services.ts index b1da4fd..45a8803 100644 --- a/src/app/posts.services.ts +++ b/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; - - constructor(private http: Http){ + path = ''; + audioFolder = ''; + videoFolder = ''; + startPath = 'http://localhost:17442/'; + startPathSSL = 'https://localhost:17442/' + handShakeComplete = false; + + constructor(private http: HttpClient) { console.log('PostsService Initialized...'); } - startHandshake(url: string): Observable - { - return this.http.get(url + "geturl") - .map(res => res.json()); + startHandshake(url: string) { + return this.http.get(url + 'geturl'); } - startHandshakeSSL(url: string): Observable - { - return this.http.get(url + "geturl") - .map(res => res.json()); + startHandshakeSSL(url: string) { + return this.http.get(url + 'geturl'); } - getVideoFolder(): Observable - { - return this.http.get(this.startPath + "videofolder") - .map(res => res.json()); + getVideoFolder() { + return this.http.get(this.startPath + 'videofolder'); } - getAudioFolder(): Observable - { - return this.http.get(this.startPath + "audiofolder") - .map(res => res.json()); + getAudioFolder() { + return this.http.get(this.startPath + 'audiofolder'); } - makeMP3(url: string): Observable - { - 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 - { - 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 { - 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 { - 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', {}); } }