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

Added download button to player component

Browse Source
This commit is contained in:
Isaac Grynsztein
2020-02-18 17:29:34 -05:00
parent 8e3d6a0af6
commit b41d10f514
3 changed files with 74 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/player/player.component.css
View File

@@ -22,4 +22,29 @@
max-width: 100%;
padding-left: 0px;
padding-right: 0px;
}
.progress-bar {
position: absolute;
left: 0px;
bottom: -1px;
}
.spinner {
width: 50px;
height: 50px;
bottom: 3px;
left: 3px;
position: absolute;
}
.save-button {
right: 25px;
position: absolute;
bottom: 25px;
}
.video-col {
padding-right: 0px;
padding-left: 0.01px;
}

11
src/app/player/player.component.html
View File

@@ -1,7 +1,7 @@
<div *ngIf="playlist.length > 0">
<div [ngClass]="(type === 'audio') ? null : 'container-video'" class="container">
<div class="row">
<div [ngClass]="(type === 'audio') ? 'my-2 px-1' : null" class="col px-1">
<div style="max-width: 100%; margin-left: 0px;" class="row">
<div [ngClass]="(type === 'audio') ? 'my-2 px-1' : 'video-col'" class="col">
<vg-player (onPlayerReady)="onPlayerReady($event)" [style.background-color]="(type === 'audio') ? 'transparent' : 'black'">
<video [ngClass]="(type === 'audio') ? 'audio-styles' : 'video-styles'" #media class="video-player" [vgMedia]="media" [src]="currentItem.src" id="singleVideo" preload="auto" controls>
</video>
@@ -14,4 +14,11 @@
</div>
</div>
</div>
<div *ngIf="playlist.length > 1">
<button class="save-button" color="primary" (click)="downloadContent()" [disabled]="downloading" mat-fab><mat-icon>save</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="50"></mat-spinner></button>
</div>
<div *ngIf="playlist.length === 1">
<button class="save-button" color="primary" (click)="downloadFile()" [disabled]="downloading" mat-fab><mat-icon>save</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="50"></mat-spinner></button>
</div>
</div>

40
src/app/player/player.component.ts
View File

@@ -31,6 +31,8 @@ export class PlayerComponent implements OnInit {
videoFolderPath = null;
innerWidth: number;
downloading = false;
@HostListener('window:resize', ['$event'])
onResize(event) {
this.innerWidth = window.innerWidth;
@@ -47,6 +49,12 @@ export class PlayerComponent implements OnInit {
this.baseStreamPath = result['YoutubeDLMaterial']['Downloader']['path-base'];
this.audioFolderPath = result['YoutubeDLMaterial']['Downloader']['path-audio'];
this.videoFolderPath = result['YoutubeDLMaterial']['Downloader']['path-video'];
const backendUrl = result['YoutubeDLMaterial']['Host']['backendurl'];
this.postsService.path = backendUrl;
this.postsService.startPath = backendUrl;
this.postsService.startPathSSL = backendUrl;
let fileType = null;
if (this.type === 'audio') {
fileType = 'audio/mp3';
@@ -117,4 +125,36 @@ export class PlayerComponent implements OnInit {
return decodeURI(string);
}
downloadContent() {
const fileNames = [];
for (let i = 0; i < this.playlist.length; i++) {
fileNames.push(this.playlist[i].title);
}
const zipName = fileNames[0].split(' ')[0] + fileNames[1].split(' ')[0];
this.downloading = true;
this.postsService.downloadFileFromServer(fileNames, this.type, zipName).subscribe(res => {
this.downloading = false;
const blob: Blob = res;
saveAs(blob, zipName + '.zip');
}, err => {
console.log(err);
this.downloading = false;
});
}
downloadFile() {
const ext = (this.type === 'audio') ? '.mp3' : '.mp4';
const filename = this.playlist[0].title;
this.downloading = true;
this.postsService.downloadFileFromServer(filename, this.type).subscribe(res => {
this.downloading = false;
const blob: Blob = res;
saveAs(blob, filename + ext);
}, err => {
console.log(err);
this.downloading = false;
});
}
}