first commit

src/app/app.component.ts

@@ -0,0 +1,127 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { VideoProcessingService } from './video-processing.service';
+import { MomentModule } from 'ngx-moment';
+import { OrderModule } from 'ngx-order-pipe';
+
+@Component({
+	selector: 'app-root',
+	standalone: true,
+	imports: [CommonModule, ReactiveFormsModule, MomentModule, OrderModule],
+	templateUrl: './app.component.html',
+	styles: []
+})
+export class AppComponent implements OnInit {
+	processingForm: FormGroup;
+	jobId: string | null = null;
+	jobStatus: string | null = null;
+	jobProgress: number = 0;
+	jobs: Array<any> = [];
+
+	initForm() {
+		this.processingForm = this.fb.group({
+			mp4Filename: ['', Validators.required],
+			mpdUrl: ['', Validators.required],
+			keys: ['', Validators.required],
+			wantedResolution: ['1080p', 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]
+		});
+	}
+
+	ngOnInit(): void {
+	    this.startPollingJobsStatus();
+	}
+
+	downloadFileFromAPI(filePath: string, filename: string, job: any) {
+		job.isDownloading = true;
+		this.videoProcessingService.downloadFile(filePath).subscribe({
+			next: (response) => {
+				const blob = new Blob([response], { type: 'video/mp4' });
+				const url = window.URL.createObjectURL(blob);
+				const a = document.createElement('a');
+				a.href = url;
+				a.download = filename;
+				a.click();
+				window.URL.revokeObjectURL(url);
+				job.isDownloading = false;
+			},
+			error: (error) => {
+				console.error('Error downloading file:', error);
+				job.isDownloading = false;
+			}
+		});
+	}
+
+	onSubmit() {
+		if (this.processingForm.valid) {
+			const formData = this.processingForm.value;
+
+			this.videoProcessingService.startProcess(Object.assign(formData, {
+				keys: this.parseKeys(formData.keys)
+			})).subscribe({
+				next: (response) => {
+					//this.jobId = response.jobId;
+				},
+				error: (error) => {
+					console.error('Error starting process:', error);
+				}
+			});
+			this.initForm();
+		}
+	}
+
+	parseKeys(keysString: string): { key: string, value: string }[] {
+		console.log('KS =', keysString);
+		return keysString.split('\n').map(line => line.trim())
+		.filter(line => line.includes(':'))
+		.map(line => {
+			const [key, value] = line.split(':').map(part => part.trim());
+			return { key, value };
+		});
+	}
+
+	// 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.jobs = response;
+					// if (['completed', 'failed'].includes(response.state)) {
+					// 	clearInterval(interval);
+					// }
+				},
+				error: (error) => {
+					console.error('Error fetching job status:', error);
+					//clearInterval(interval);
+				}
+			});
+		}, 1000);
+	}
+}