Make video loading dynamic.

frontend/src/app/app.css

@@ -0,0 +1,12 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+}
+
+.items-container {
+  display: flex;
+  flex-direction: column;
+  gap: .7em;
+  padding: 0 .5em;
+}

frontend/src/app/app.html

@@ -4,15 +4,20 @@
 </div>
 <div class="items-container">
   @for (item of libraryItems.value(); track item.id) {
-    <div class="item">
-      [{{item.type[0]}}] ({{item.id.substring(0, 4)}}…) {{item.name}}
-    </div>
+    @if (item.type === 'VIDEO') {
+      <button type="button" (click)="activeVideo.set(item)">
+        [{{item.type[0]}}] ({{item.id.substring(0, 4)}}…) {{item.name}}
+      </button>
+    } @else {
+      <div class="item">
+        [{{item.type[0]}}] ({{item.id.substring(0, 4)}}…) {{item.name}}
+      </div>
+    }
   }
 </div>
 <div>
-  @if (firstVideo(); as firstVideo) {
-    <video controls>
-      <source src="/api/videos/{{firstVideo.id}}/stream" type="video/mp4">
+  @if (activeVideo(); as firstVideo) {
+    <video width="320" height="240" src="/api/videos/{{firstVideo.id}}/stream" controls>
       Your browser does not support the html video player.
     </video>
   }

frontend/src/app/app.ts

@@ -28,10 +28,7 @@ export class App implements OnInit {
     loader: ({}) => firstValueFrom(this.#httpClient.get<LibraryItem[]>('/api/library'))
   });
 
-  firstVideo = computed(() => {
-    const libraryItems = this.libraryItems.value() ?? [];
-    return libraryItems.length ? libraryItems[0] : null
-  });
+  activeVideo = signal<LibraryItem | null>(null);
 
   ngOnInit(): void {
     this.loadLibrary();