lil fix + add flush queue feat

src/app/app.component.html

@@ -129,6 +129,9 @@
 		<div class="card shadow">
 			<div class="card-header">
 				Jobs Queue ({{jobs.length}})
+				<button class="btn btn-clear ms-2 mt-0 p-0 float-end">
+					<i (click)="flushQueue()" class="fa fa-trash text-danger fa-fw"></i>
+				</button>
 				<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 px-3" style="max-height: 90vh;overflow-y:scroll">
@@ -149,8 +152,8 @@
 										</div>
 										<div class="col-12 mb-1">
 											<i class="fa fa-display me-2 text-primary"></i><i>{{job.data.wantedResolution?.name || 'Unknown'}} &commat;{{humanFileSize(job.data.wantedResolution.bandwidth)}} ({{job.data.wantedResolution.codec}})</i><br>
-											<i class="fa fa-volume-high me-2 text-success"></i><i>{{displayJobAudio(job.data.wantedAudioTracks) || 'Unknown'}}</i><br>
+											<i class="fa fa-volume-high me-2 text-success"></i><i>{{displayJobAudio(job?.data?.wantedAudioTracks) || 'Unknown'}}</i><br>
-											<i class="fa fa-closed-captioning me-2 text-warning"></i><i>{{displayJobAudio(job.data.wantedSubtitles) || 'Unknown'}}</i><br>
+											<i class="fa fa-closed-captioning me-2 text-warning"></i><i>{{displayJobAudio(job?.data?.wantedSubtitles) || 'Unknown'}}</i><br>
 										</div>
 									</div>
 								</div>

src/app/app.component.spec.ts

@@ -1,29 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [AppComponent],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have the 'crawlflix' title`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('crawlflix');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, crawlflix');
-  });
-});

src/app/app.component.ts

@@ -100,6 +100,15 @@ export class AppComponent implements OnInit {
 		});
 	}
 
+	flushQueue() {
+		this.videoProcessingService.flushQueue().subscribe({
+			next: (response) => {
+			},
+			error: (error) => {
+			}
+		});
+	}
+
 	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];
@@ -132,7 +141,7 @@ export class AppComponent implements OnInit {
 	displayJobAudio(tracks: any) {
 		if (tracks.length === 0)
 			return 'None';
-		return tracks.map((elem: any) => `${elem.name} (${elem.attributes.CODECS})`).join(' + ');
+		return tracks.map((elem: any) => `${elem.name}${elem.attributes?.CODECS ? ` (${elem.attributes.CODECS || 'N/A'})` : ''}`).join(' + ');
 	}
 
 	onSubmitLoad() {

src/app/video-processing.service.ts

@@ -34,4 +34,8 @@ export class VideoProcessingService {
   downloadFile(filePath: string): Observable<Blob> {
     return this.http.get(`${this.apiUrl}/download/${filePath}`, { responseType: 'blob' });
   }
+
+  flushQueue(): Observable<any> {
+    return this.http.delete<any>(`${this.apiUrl}/jobs/completed`, {});
+  }
 }