TheLanc3/YoutubeDL-Material
1
0
Fork 0
mirror of https://github.com/Tzahi12345/YoutubeDL-Material.git synced 2026-03-11 07:10:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

added custom player

Browse Source 
added routing with two routes: home and player

moved most of app component to main component. app component currently just manages the top toolbar
This commit is contained in:
Isaac Grynsztein
2020-02-15 02:13:21 -05:00
parent d595de5786
commit 8e7bb4ba3b
18 changed files with 778 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,6 +15,7 @@ import 'rxjs/add/operator/debounceTime'
import 'rxjs/add/operator/do'
import 'rxjs/add/operator/switch'
import { YoutubeSearchService, Result } from './youtube-search.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
@@ -54,282 +55,26 @@ export class AppComponent implements OnInit {
@ViewChild('urlinput', { read: ElementRef, static: false }) urlInput: ElementRef;
constructor(private postsService: PostsService, private youtubeSearch: YoutubeSearchService, public snackBar: MatSnackBar) {
constructor(private postsService: PostsService, private youtubeSearch: YoutubeSearchService, public snackBar: MatSnackBar,
public router: Router) {
this.audioOnly = false;
// loading config
this.postsService.loadNavItems().subscribe(result => { // loads settings
const backendUrl = result['YoutubeDLMaterial']['Host']['backendurl'];
this.topBarTitle = result['YoutubeDLMaterial']['Extra']['title_top'];
this.fileManagerEnabled = result['YoutubeDLMaterial']['Extra']['file_manager_enabled'];
this.downloadOnlyMode = result['YoutubeDLMaterial']['Extra']['download_only_mode'];
this.baseStreamPath = result['YoutubeDLMaterial']['Downloader']['path-base'];
this.audioFolderPath = result['YoutubeDLMaterial']['Downloader']['path-audio'];
this.videoFolderPath = result['YoutubeDLMaterial']['Downloader']['path-video'];
this.youtubeSearchEnabled = result['YoutubeDLMaterial']['API'] && result['YoutubeDLMaterial']['API']['use_youtube_API'];
this.youtubeAPIKey = this.youtubeSearchEnabled ? result['YoutubeDLMaterial']['API']['youtube_API_key'] : null;
this.postsService.path = backendUrl;
this.postsService.startPath = backendUrl;
this.postsService.startPathSSL = backendUrl;
if (this.fileManagerEnabled) {
this.getMp3s();
this.getMp4s();
}
if (this.youtubeSearchEnabled && this.youtubeAPIKey) {
this.youtubeSearch.initializeAPI(this.youtubeAPIKey);
this.attachToInput();
}
}, error => {
console.log(error);
});
}
// file manager stuff
getMp3s() {
this.postsService.getMp3s().subscribe(result => {
const mp3s = result['mp3s'];
this.mp3s = mp3s;
}, error => {
console.log(error);
});
}
getMp4s() {
this.postsService.getMp4s().subscribe(result => {
const mp4s = result['mp4s'];
this.mp4s = mp4s;
},
error => {
console.log(error);
});
}
public goToFile(name, isAudio) {
if (isAudio) {
this.downloadHelperMp3(name, false, true);
} else {
this.downloadHelperMp4(name, false, true);
}
}
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) {
// console.log(name);
// console.log(this.mp4s);
for (let i = 0; i < this.mp4s.length; i++) {
if (this.mp4s[i].id === name) {
this.mp4s.splice(i, 1);
}
}
}
// app initialization.
ngOnInit() {
this.iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window['MSStream'];
}
// download helpers
downloadHelperMp3(name, is_playlist = false, forceView = false) {
this.downloadingfile = false;
// if download only mode, just download the file. no redirect
if (forceView === false && this.downloadOnlyMode && !this.iOS) {
if (is_playlist) {
for (let i = 0; i < name.length; i++) {
this.downloadAudioFile(name[i]);
}
} else {
this.downloadAudioFile(name);
}
} else {
if (is_playlist) {
window.location.href = this.baseStreamPath + this.audioFolderPath + name[0] + '.mp3';
} else {
window.location.href = this.baseStreamPath + this.audioFolderPath + name + '.mp3';
}
}
// reloads mp3s
if (this.fileManagerEnabled) {
this.getMp3s();
}
}
downloadHelperMp4(name, is_playlist = false, forceView = false) {
this.downloadingfile = false;
// if download only mode, just download the file. no redirect
if (forceView === false && this.downloadOnlyMode) {
if (is_playlist) {
for (let i = 0; i < name.length; i++) {
this.downloadVideoFile(name[i]);
}
} else {
this.downloadVideoFile(name);
}
} else {
if (is_playlist) {
window.location.href = this.baseStreamPath + this.videoFolderPath + name[0] + '.mp4';
} else {
window.location.href = this.baseStreamPath + this.videoFolderPath + name + '.mp4';
}
}
// reloads mp4s
if (this.fileManagerEnabled) {
this.getMp4s();
}
}
// download click handler
downloadClicked() {
if (this.ValidURL(this.url)) {
this.urlError = false;
this.path = '';
if (this.audioOnly) {
this.downloadingfile = true;
this.postsService.makeMP3(this.url).subscribe(posts => {
const is_playlist = !!(posts['file_names']);
this.path = is_playlist ? posts['file_names'] : posts['audiopathEncoded'];
if (this.path !== '-1') {
this.downloadHelperMp3(this.path, is_playlist);
}
}, error => { // can't access server
this.downloadingfile = false;
this.openSnackBar('Download failed!', 'OK.');
});
} else {
this.downloadingfile = true;
this.postsService.makeMP4(this.url).subscribe(posts => {
const is_playlist = !!(posts['file_names']);
this.path = is_playlist ? posts['file_names'] : posts['videopathEncoded'];
if (this.path !== '-1') {
this.downloadHelperMp4(this.path, is_playlist);
}
}, error => { // can't access server
this.downloadingfile = false;
this.openSnackBar('Download failed!', 'OK.');
});
}
} else {
this.urlError = true;
}
}
downloadAudioFile(name) {
this.postsService.downloadFileFromServer(name, 'audio').subscribe(res => {
const blob: Blob = res;
saveAs(blob, name + '.mp3');
// tell server to delete the file once downloaded
this.postsService.deleteFile(name, true).subscribe(delRes => {
});
});
}
downloadVideoFile(name) {
this.postsService.downloadFileFromServer(name, 'video').subscribe(res => {
const blob: Blob = res;
saveAs(blob, name + '.mp4');
// tell server to delete the file once downloaded
this.postsService.deleteFile(name, false).subscribe(delRes => {
});
});
}
clearInput() {
this.url = '';
this.results_showing = false;
}
onInputBlur() {
this.results_showing = false;
}
visitURL(url) {
window.open(url);
}
useURL(url) {
this.results_showing = false;
this.url = url;
}
inputChanged(new_val) {
if (new_val === '') {
this.results_showing = false;
} else {
if (this.ValidURL(new_val)) {
this.results_showing = false;
}
}
}
// checks if url is a valid URL
ValidURL(str) {
// 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);
}
// snackbar helper
public openSnackBar(message: string, action: string) {
this.snackBar.open(message, action, {
duration: 2000,
});
}
attachToInput() {
Observable.fromEvent(this.urlInput.nativeElement, 'keyup')
.map((e: any) => e.target.value) // extract the value of input
.filter((text: string) => text.length > 1) // filter out if empty
.debounceTime(250) // only once every 250ms
.do(() => this.results_loading = true) // enable loading
.map((query: string) => this.youtubeSearch.search(query))
.switch() // act on the return of the search
.subscribe(
(results: Result[]) => {
// console.log(results);
this.results_loading = false;
if (results && results.length > 0) {
this.results = results;
this.results_showing = true;
} else {
this.results_showing = false;
}
},
(err: any) => {
console.log(err)
this.results_loading = false;
this.results_showing = false;
},
() => { // on completion
this.results_loading = false;
}
);
}
onResize(event) {
this.files_cols = (event.target.innerWidth <= 450) ? 2 : 4;
goBack() {
this.router.navigate(['/home']);
}
}