Make video loading dynamic.

backend/exposition/src/video/handler.rs

@@ -28,7 +28,6 @@ pub async fn get_video_stream(
 ) -> impl Responder {
     let video_result = video_service.get_video_stream(video_id.into_inner());
 
-
     match video_result {
         Ok(video) => {
             if let Some(tokio_video_file) = video.file.as_any().downcast_ref::<TokioVideoFile>() {
@@ -39,6 +38,7 @@ pub async fn get_video_stream(
                     Ok(file) => HttpResponse::Ok()
                         .content_type("application/octet-stream")
                         .streaming(async_stream::stream! {
+                            let file = tokio::fs::File::from_std(file);
                             let mut stream = FramedRead::new(file, BytesCodec::new());
                             while let Some(chunk) = stream.next().await {
                                 yield chunk.map(|bytes| bytes.freeze());

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) {
+    @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) {
+  @if (activeVideo(); as firstVideo) {
-    <video controls>
+    <video width="320" height="240" src="/api/videos/{{firstVideo.id}}/stream" controls>
-      <source src="/api/videos/{{firstVideo.id}}/stream" type="video/mp4">
       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(() => {
+  activeVideo = signal<LibraryItem | null>(null);
-    const libraryItems = this.libraryItems.value() ?? [];
-    return libraryItems.length ? libraryItems[0] : null
-  });
 
   ngOnInit(): void {
     this.loadLibrary();