diff --git a/src/app/app.component.html b/src/app/app.component.html index 3025918..17f3fb1 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -65,33 +65,53 @@
-
-
-
- - -
-
- - -
+ +
+ +
+ + +
+
+
+
+
+
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
- +
@@ -120,11 +140,21 @@
-
- {{job.data.mp4Filename}}
-
-
- {{job.data.wantedResolution || '1080p'}} +
+
+
+
+
+
{{job.data.mp4Filename}}
+
+
+ {{job.data.wantedResolution?.name || 'Unknown'}} @{{humanFileSize(job.data.wantedResolution.bandwidth)}} ({{job.data.wantedResolution.codec}})
+ {{displayJobAudio(job.data.wantedAudioTracks) || 'Unknown'}}
+ {{displayJobAudio(job.data.wantedSubtitles) || 'Unknown'}}
+
+
+
+

Job ID: {{ job.id }}

@@ -142,7 +172,7 @@

Duration: {{ ((job.finishedOn - job.processedOn)/1000) | amDuration:'seconds' }}

-
+
{{job.failedReason}}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 4ba1112..c6cdde3 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { ReactiveFormsModule, FormBuilder, FormGroup, Validators, FormsModule } from '@angular/forms'; import { VideoProcessingService } from './video-processing.service'; import { MomentModule } from 'ngx-moment'; import { OrderModule } from 'ngx-order-pipe'; @@ -8,35 +8,41 @@ import { OrderModule } from 'ngx-order-pipe'; @Component({ selector: 'app-root', standalone: true, - imports: [CommonModule, ReactiveFormsModule, MomentModule, OrderModule], + imports: [CommonModule, ReactiveFormsModule, MomentModule, OrderModule, FormsModule], templateUrl: './app.component.html', styles: [] }) export class AppComponent implements OnInit { processingForm: FormGroup; + loadForm: FormGroup; jobId: string | null = null; jobStatus: string | null = null; jobProgress: number = 0; jobs: Array = []; lastJobSuccess: boolean = false; welcomeHeader: any = null; + loaded: any = null; initForm() { this.processingForm = this.fb.group({ - mp4Filename: ['', Validators.required], - mpdUrl: ['', Validators.required], keys: ['', Validators.required], - wantedResolution: ['1080p', Validators.required] + wantedResolution: ['1920x1080', Validators.required] + }); + this.loadForm = this.fb.group({ + mp4Filename: ['test', Validators.required], + mpdUrl: ['https://bakery.pplus.paramount.tech/l(de,it,no,fi,da,sv,es-MX,pt-BR,es-mx,pt-br)/paramountplus/2023/11/06/2279898691624/2416513_cenc_precon_dash/stream.mpd?CMCD=ot%3Dm%2Csf%3Dd%2Csid%3D%22295d7a15-c79d-4229-b593-7abdacd727c9%22%2Csu', Validators.required], }); } constructor(private fb: FormBuilder, private videoProcessingService: VideoProcessingService) { this.processingForm = this.fb.group({ - mp4Filename: ['', Validators.required], - mpdUrl: ['', Validators.required], keys: ['', Validators.required], - wantedResolution: ['1080p', Validators.required] + wantedResolution: ['1920x1080', Validators.required] + }); + this.loadForm = this.fb.group({ + mp4Filename: ['test', Validators.required], + mpdUrl: ['https://bakery.pplus.paramount.tech/l(de,it,no,fi,da,sv,es-MX,pt-BR,es-mx,pt-br)/paramountplus/2023/11/06/2279898691624/2416513_cenc_precon_dash/stream.mpd?CMCD=ot%3Dm%2Csf%3Dd%2Csid%3D%22295d7a15-c79d-4229-b593-7abdacd727c9%22%2Csu', Validators.required], }); } @@ -93,13 +99,24 @@ export class AppComponent implements OnInit { }); } + humanFileSize(size: number) { + var i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024)); + return +((size / Math.pow(1024, i)).toFixed(2)) * 1 + ' ' + ['bps', 'kbps', 'mbps', 'gbps', 'tbps'][i]; + } + onSubmit() { if (this.processingForm.valid) { const formData = this.processingForm.value; - - this.videoProcessingService.startProcess(Object.assign(formData, { - keys: this.parseKeys(formData.keys) - })).subscribe({ + const data = Object.assign(formData, { + keys: this.parseKeys(formData.keys), + wantedAudioTracks: this.loaded.audioTracks.filter((track: any) => track.selected), + wantedSubtitles: this.loaded.subtitles.filter((sub: any) => sub.selected), + wantedResolution: this.loaded.videoTracks.find((res: any) => res.name === formData.wantedResolution), + mpdUrl: this.loadForm.get('mpdUrl')?.value, + mp4Filename: this.loadForm.get('mp4Filename')?.value, + }); + console.log(data); + this.videoProcessingService.startProcess(data).subscribe({ next: (response) => { //this.jobId = response.jobId; }, @@ -107,7 +124,31 @@ export class AppComponent implements OnInit { console.error('Error starting process:', error); } }); - this.initForm(); + //this.initForm(); + } + } + + displayJobAudio(tracks: any) { + if (tracks.length === 0) + return 'None'; + return tracks.map((elem: any) => `${elem.name} (${elem.attributes.CODECS})`).join(' + '); + } + + onSubmitLoad() { + if (this.loadForm.valid) { + this.loaded = null; + const formData = this.loadForm.value; + + this.videoProcessingService.load(formData).subscribe({ + next: (response) => { + console.log(response); + this.loaded = response; + //this.jobId = response.jobId; + }, + error: (error) => { + console.error('Error starting process:', error); + } + }); } } diff --git a/src/app/video-processing.service.ts b/src/app/video-processing.service.ts index 302b001..026b48c 100644 --- a/src/app/video-processing.service.ts +++ b/src/app/video-processing.service.ts @@ -15,6 +15,10 @@ export class VideoProcessingService { return this.http.post<{ jobId: string }>(`${this.apiUrl}/start-process`, data); } + load(data: any): Observable { + return this.http.post(`${this.apiUrl}/processMPD`, data); + } + getJobsStatus(): Observable> { return this.http.get>(`${this.apiUrl}/jobs-status`); }