Add alot of feats

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<any> = [];
 	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);
+				}
+			});
 		}
 	}