Bertomlab/CrawlFlix-Front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add new update mech
All checks were successful
ci / Image build (push) Successful in 1m57s
Details
ci / Deployment (push) Successful in 5s
Details

Browse Source
This commit is contained in:
Joris Bertomeu
2024-10-01 17:44:55 +02:00
parent 8a1013f761
commit abcb3f9159
6 changed files with 117 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,6 +6,63 @@
<small>Paramount+ / Max HBO / Netflix / Disney+ / Amazon Prime / Canal+</small>
</div>
</div>
<div class="card shadow mt-3">
<div class="card-content p-3 text-center">
<div class="row" *ngIf="welcomeHeader">
<div class="col-6">
<b>Downloader</b>
<div class="row mt-3">
<div class="col-4">
Installed binary:
<span *ngIf="welcomeHeader.downloader.filsIsPresent">
<i class="fa fa-circle-check text-success me-1"></i>Yes
</span>
<span *ngIf="!welcomeHeader.downloader.filsIsPresent">
<i class="fa fa-exclamation-triangle text-danger me-1"></i>No
</span>
</div>
<div class="col-8">
Update available:
<span *ngIf="welcomeHeader.downloader.newReleaseAvailable">
<i class="fa fa-exclamation-triangle text-danger me-1"></i>Yes -<button [disabled]="welcomeHeader.downloader.isUpdating" (click)="processUpdate(welcomeHeader.downloader, 'downloader')" style="margin-top:-3px" class="btn btn-outline-primary btn-sm ms-2 p-0 px-1"><i *ngIf="welcomeHeader.downloader.isUpdating" class="fa fa-circle-notch fa-spin me-1"></i>Proceed</button>
</span>
<span *ngIf="!welcomeHeader.downloader.newReleaseAvailable">
<i class="fa fa-circle-check text-success me-1"></i>No
</span>
</div>
</div>
</div>
<div class="col-6">
<b>Content Decrypter</b>
<div class="row mt-3">
<div class="col-4">
Installed binary:
<span *ngIf="welcomeHeader.mp4decrypt.filsIsPresent">
<i class="fa fa-circle-check text-success me-1"></i>Yes
</span>
<span *ngIf="!welcomeHeader.mp4decrypt.filsIsPresent">
<i class="fa fa-exclamation-triangle text-danger me-1"></i>No
</span>
</div>
<div class="col-8">
Update available:
<span *ngIf="welcomeHeader.mp4decrypt.newReleaseAvailable">
<i class="fa fa-exclamation-triangle text-danger me-1"></i>Yes -<button [disabled]="welcomeHeader.mp4decrypt.isUpdating" (click)="processUpdate(welcomeHeader.mp4decrypt, 'mp4decrypt')" style="margin-top:-3px" class="btn btn-outline-primary btn-sm ms-2 p-0 px-1"><i *ngIf="welcomeHeader.mp4decrypt.isUpdating" class="fa fa-circle-notch fa-spin me-1"></i>Proceed</button>
</span>
<span *ngIf="!welcomeHeader.mp4decrypt.newReleaseAvailable">
<i class="fa fa-circle-check text-success me-1"></i>No
</span>
</div>
</div>
</div>
</div>
<div class="row p-2" *ngIf="!welcomeHeader">
<div class="col-12">
<i class="fa fa-circle-notch fa-2x fa-spin"></i>
</div>
</div>
</div>
</div>
<div class="card shadow mt-3">
<div class="card-content p-3">
<form [formGroup]="processingForm" (ngSubmit)="onSubmit()">
@@ -52,11 +109,13 @@
<div class="card shadow">
<div class="card-header">
Jobs Queue ({{jobs.length}})
<i [ngClass]="{'fa-beat-fade text-success': lastJobSuccess, 'text-danger': !lastJobSuccess}" class="fa fa-circle float-end mt-1"></i>
</div>
<div class="card-content p-2" style="max-height: 90vh;overflow-y:scroll">
<div class="row" *ngIf="jobs.length === 0">
<div class="col-12 text-center py-3">
<i class="fa fa-circle-notch fa-spin fa-2x"></i>
<!-- <i class="fa fa-circle-notch fa-spin fa-2x"></i> -->
<i>Nothing to display</i>
</div>
</div>
<div *ngFor="let job of jobs | orderBy: 'addedOn':true; let last = last" class="pb-2" [ngClass]="{'border-bottom mb-2': !last}">

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

@@ -18,6 +18,8 @@ export class AppComponent implements OnInit {
jobStatus: string | null = null;
jobProgress: number = 0;
jobs: Array<any> = [];
lastJobSuccess: boolean = false;
welcomeHeader: any = null;
initForm() {
this.processingForm = this.fb.group({
@@ -40,6 +42,7 @@ export class AppComponent implements OnInit {
ngOnInit(): void {
this.startPollingJobsStatus();
this.sayHello();
}
downloadFileFromAPI(filePath: string, filename: string, job: any) {
@@ -62,6 +65,34 @@ export class AppComponent implements OnInit {
});
}
processUpdate(item: any, binType: string) {
item.isUpdating = true;
this.videoProcessingService.processUpdate(Object.assign(item, {binType})).subscribe({
next: (response) => {
item.isUpdating = false;
this.welcomeHeader = null;
this.sayHello();
},
error: (error) => {
console.error('Hello failed', error);
item.isUpdating = false;
}
});
}
sayHello() {
this.videoProcessingService.hello().subscribe({
next: (response) => {
console.log('Hello success', response);
this.welcomeHeader = response;
},
error: (error) => {
console.error('Hello failed', error);
}
});
}
onSubmit() {
if (this.processingForm.valid) {
const formData = this.processingForm.value;
@@ -90,28 +121,11 @@ export class AppComponent implements OnInit {
});
}
// startPollingJobsStatus() {
// const interval = setInterval(() => {
// this.videoProcessingService.getJobsStatus(this.jobId!).subscribe({
// next: (response) => {
// this.jobStatus = response.state;
// this.jobProgress = response.progress;
// if (['completed', 'failed'].includes(response.state)) {
// clearInterval(interval);
// }
// },
// error: (error) => {
// console.error('Error fetching job status:', error);
// clearInterval(interval);
// }
// });
// }, 1000);
// }
startPollingJobsStatus() {
const interval = setInterval(() => {
this.videoProcessingService.getJobsStatus().subscribe({
next: (response) => {
this.lastJobSuccess = true;
this.jobs = response;
// if (['completed', 'failed'].includes(response.state)) {
// clearInterval(interval);
@@ -119,9 +133,10 @@ export class AppComponent implements OnInit {
},
error: (error) => {
console.error('Error fetching job status:', error);
this.lastJobSuccess = false;
//clearInterval(interval);
}
});
}, 1000);
}, 1500);
}
}

11
src/app/video-processing.service.ts
View File

@@ -1,12 +1,13 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '../environments/environment';
@Injectable({
providedIn: 'root'
})
export class VideoProcessingService {
private apiUrl = '/api';
private apiUrl = environment.serviceEndpoint;
constructor(private http: HttpClient) { }
@@ -18,6 +19,14 @@ export class VideoProcessingService {
return this.http.get<Array<any>>(`${this.apiUrl}/jobs-status`);
}
hello(): Observable<Array<any>> {
return this.http.get<any>(`${this.apiUrl}/hello`);
}
processUpdate(data: any): Observable<any> {
return this.http.post<any>(`${this.apiUrl}/processUpdate`, data);
}
downloadFile(filePath: string): Observable<Blob> {
return this.http.get(`${this.apiUrl}/download/${filePath}`, { responseType: 'blob' });
}

3
src/environments/environment.development.ts Normal file
View File

@@ -0,0 +1,3 @@
export const environment = {
serviceEndpoint: 'http://localhost:3000'
};

3
src/environments/environment.ts Normal file
View File

@@ -0,0 +1,3 @@
export const environment = {
serviceEndpoint: '/api'
};