TheLanc3/YoutubeDL-Material
1
0
Fork 0
mirror of https://github.com/Tzahi12345/YoutubeDL-Material.git synced 2026-04-18 22:31:29 +03:00
Code Issues Packages Projects Releases Wiki Activity

Stylistic improvements and moved away from @angular/http

Browse Source
This commit is contained in:
Isaac Grynsztein
2019-10-20 19:14:01 -04:00
parent 8e445bb80d
commit 377676cda4
4 changed files with 136 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.component.css
View File

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

39
src/app/app.component.html
View File

@@ -13,25 +13,30 @@
<br/> <br/>
<mat-card id="card" class="big demo-basic"> <div class="big demo-basic">
<mat-card-title> <mat-card id="card" style="margin-right: 20px; margin-left: 20px;">
<mat-toolbar color="primary">Youtube Downloader</mat-toolbar> <mat-card-title>
</mat-card-title> Youtube Downloader
<div style="width: 100%; height: 100%; padding-left: 24px; padding-right: 24px; position: relative"> </mat-card-title>
<mat-card-content> <mat-card-content>
<form class="example-form"> <div style="position: relative;">
<mat-form-field class="example-full-width"> <form class="example-form">
<input matInput [(ngModel)]="url" placeholder="URL" type="url" name="url" [formControl]="urlForm" required> <mat-form-field class="example-full-width">
<mat-error *ngIf="urlError || urlForm.invalid">Please enter a valid URL!</mat-error> <input matInput [(ngModel)]="url" placeholder="URL" type="url" name="url" [formControl]="urlForm" required>
</mat-form-field> <mat-error *ngIf="urlError || urlForm.invalid">Please enter a valid URL!</mat-error>
</form> </mat-form-field>
<br/> </form>
<mat-checkbox [(ngModel)]="audioOnly" style="float: left; margin-top: -12px">Only Audio</mat-checkbox> <br/>
<button style="float: right; margin-top: -16px" (click)="downloadClicked()" [disabled]="downloadingfile" type="submit" mat-raised-button <mat-checkbox [(ngModel)]="audioOnly" style="float: left; margin-top: -12px">Only Audio</mat-checkbox>
color="primary">Download</button>
</div>
</mat-card-content> </mat-card-content>
</div> <mat-card-actions>
</mat-card> <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/> <br/>
<div class="centered big" id="bar_div" *ngIf="downloadingfile;else nofile"> <div class="centered big" id="bar_div" *ngIf="downloadingfile;else nofile">
<div *ngIf="determinateProgress;else indeterminateprogress"> <div *ngIf="determinateProgress;else indeterminateprogress">

169
src/app/app.component.ts
View File

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

101
src/app/posts.services.ts
View File

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