Create a basic frontend and an endpoint to get video stream.

frontend/src/app/app.ts

@@ -0,0 +1,43 @@
+import {Component, computed, inject, OnInit, resource, signal} from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import {HttpClient} from '@angular/common/http';
+import {firstValueFrom} from 'rxjs';
+
+enum LibraryItemType {
+  VIDEO = 'VIDEO',
+  FOLDER = 'FOLDER'
+}
+
+interface LibraryItem {
+  id: string;
+  name: string;
+  type: LibraryItemType
+  parentFolder: LibraryItem | null;
+}
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet],
+  templateUrl: './app.html',
+  styleUrl: './app.css'
+})
+export class App implements OnInit {
+  #httpClient = inject(HttpClient);
+
+  libraryItems = resource({
+    loader: ({}) => firstValueFrom(this.#httpClient.get<LibraryItem[]>('/api/library'))
+  });
+
+  firstVideo = computed(() => {
+    const libraryItems = this.libraryItems.value() ?? [];
+    return libraryItems.length ? libraryItems[0] : null
+  });
+
+  ngOnInit(): void {
+    this.loadLibrary();
+  }
+
+  loadLibrary(): void {
+    this.libraryItems.reload();
+  }
+}