Downloads on the home page now show the progress bar

This commit is contained in:
Isaac Grynsztein
2020-04-22 21:42:21 -04:00
parent b583305940
commit eca06a7fb1
4 changed files with 74 additions and 11 deletions

View File

@@ -170,11 +170,11 @@
<br/>
<div class="centered big" id="bar_div" *ngIf="current_download && current_download.downloading; else nofile">
<div class="margined">
<div [ngClass]="(determinateProgress && percentDownloaded === 100)?'make-room-for-spinner':'equal-sizes'" style="display: inline-block; width: 100%; padding-left: 20px" *ngIf="determinateProgress;else indeterminateprogress">
<mat-progress-bar mode="determinate" value="{{percentDownloaded}}"></mat-progress-bar>
<div [ngClass]="(percentDownloaded > 15 && percentDownloaded === 100)?'make-room-for-spinner':'equal-sizes'" style="display: inline-block; width: 100%; padding-left: 20px" *ngIf="current_download.percent_complete && current_download.percent_complete > 15;else indeterminateprogress">
<mat-progress-bar style="border-radius: 5px;" mode="determinate" value="{{percentDownloaded}}"></mat-progress-bar>
<br/>
</div>
<div *ngIf="determinateProgress && percentDownloaded === 100" class="spinner">
<div *ngIf="percentDownloaded === 100" class="spinner">
<mat-spinner [diameter]="25"></mat-spinner>
</div>
<ng-template #indeterminateprogress>

View File

@@ -284,6 +284,13 @@ export class MainComponent implements OnInit {
if (youtubeUsername && youtubeUsername !== 'null') { this.youtubeUsername = youtubeUsername };
}
// get downloads routine
setInterval(() => {
if (this.current_download) {
this.getCurrentDownload();
}
}, 500);
return true;
}, error => {
@@ -587,7 +594,7 @@ export class MainComponent implements OnInit {
}
this.postsService.makeMP3(this.url, (this.selectedQuality === '' ? null : this.selectedQuality),
customQualityConfiguration, customArgs, customOutput, youtubeUsername, youtubePassword).subscribe(posts => {
customQualityConfiguration, customArgs, customOutput, youtubeUsername, youtubePassword, new_download.uid).subscribe(posts => {
// update download object
new_download.downloading = false;
new_download.percent_complete = 100;
@@ -595,6 +602,8 @@ export class MainComponent implements OnInit {
const is_playlist = !!(posts['file_names']);
this.path = is_playlist ? posts['file_names'] : posts['audiopathEncoded'];
this.current_download = null;
if (this.path !== '-1') {
this.downloadHelperMp3(this.path, posts['uid'], is_playlist, false, new_download);
}
@@ -627,7 +636,7 @@ export class MainComponent implements OnInit {
const customQualityConfiguration = this.getSelectedVideoFormat();
this.postsService.makeMP4(this.url, (this.selectedQuality === '' ? null : this.selectedQuality),
customQualityConfiguration, customArgs, customOutput, youtubeUsername, youtubePassword).subscribe(posts => {
customQualityConfiguration, customArgs, customOutput, youtubeUsername, youtubePassword, new_download.uid).subscribe(posts => {
// update download object
new_download.downloading = false;
new_download.percent_complete = 100;
@@ -635,6 +644,8 @@ export class MainComponent implements OnInit {
const is_playlist = !!(posts['file_names']);
this.path = is_playlist ? posts['file_names'] : posts['videopathEncoded'];
this.current_download = null;
if (this.path !== '-1') {
this.downloadHelperMp4(this.path, posts['uid'], is_playlist, false, new_download);
}
@@ -1124,4 +1135,21 @@ export class MainComponent implements OnInit {
}
});
}
getCurrentDownload() {
this.postsService.getCurrentDownload(this.postsService.session_id,
this.current_download['ui_uid'] ? this.current_download['ui_uid'] : this.current_download['uid']).subscribe(res => {
const ui_uid = this.current_download['ui_uid'] ? this.current_download['ui_uid'] : this.current_download['uid'];
if (res['download']) {
console.log('got new download');
if (ui_uid === res['download']['ui_uid']) {
this.current_download = res['download'];
this.percentDownloaded = this.current_download.percent_complete;
console.log(this.percentDownloaded);
}
} else {
console.log('failed to get new download');
}
});
}
}

View File

@@ -68,25 +68,27 @@ export class PostsService {
}
// tslint:disable-next-line: max-line-length
makeMP3(url: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null, youtubeUsername: string = null, youtubePassword: string = null) {
makeMP3(url: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null, youtubeUsername: string = null, youtubePassword: string = null, ui_uid = null) {
return this.http.post(this.path + 'tomp3', {url: url,
maxBitrate: selectedQuality,
customQualityConfiguration: customQualityConfiguration,
customArgs: customArgs,
customOutput: customOutput,
youtubeUsername: youtubeUsername,
youtubePassword: youtubePassword}, this.httpOptions);
youtubePassword: youtubePassword,
ui_uid: ui_uid}, this.httpOptions);
}
// tslint:disable-next-line: max-line-length
makeMP4(url: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null, youtubeUsername: string = null, youtubePassword: string = null) {
makeMP4(url: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null, youtubeUsername: string = null, youtubePassword: string = null, ui_uid = null) {
return this.http.post(this.path + 'tomp4', {url: url,
selectedHeight: selectedQuality,
customQualityConfiguration: customQualityConfiguration,
customArgs: customArgs,
customOutput: customOutput,
youtubeUsername: youtubeUsername,
youtubePassword: youtubePassword}, this.httpOptions);
youtubePassword: youtubePassword,
ui_uid: ui_uid}, this.httpOptions);
}
getFileStatusMp3(name: string) {
@@ -225,6 +227,11 @@ export class PostsService {
return this.http.get(this.path + 'downloads', this.httpOptions);
}
// current download
getCurrentDownload(session_id, download_id) {
return this.http.post(this.path + 'download', {download_id: download_id, session_id: session_id}, this.httpOptions);
}
// clear downloads. download_id is optional, if it exists only 1 download will be cleared
clearDownloads(delete_all = false, session_id = null, download_id = null) {
return this.http.post(this.path + 'clearDownloads', {delete_all: delete_all,