aiden
/
YoutubeDL-Material
mirror of https://github.com/Tzahi12345/YoutubeDL-Material
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Stylistic improvements and moved away from @angular/http

Browse Source
pull/11/head
Isaac Grynsztein 5 years ago
parent 8e445bb80d
commit 377676cda4
4 changed files with 137 additions and 186 deletions
Show Stats Download Patch File Download Diff File

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

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

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

@ -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">

179
src/app/app.component.ts
Unescape Escape View File

@ -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);
}

103
src/app/posts.services.ts
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save