Finished implementing video support

src/app/chat/elements/message-box/message-box.ts

@@ -127,7 +127,6 @@ export class MessageBox {
         width = videoData.width
       }
 
-      console.log("push")
       this.viewModel().files().push({
         fileId: uuidv4(),
         data: file,
@@ -169,30 +168,39 @@ export class MessageBox {
       const objectUrl = URL.createObjectURL(file);
       const video = document.createElement('video');
       video.src = objectUrl;
-      video.crossOrigin = 'anonymous';
+      video.preload = 'metadata'; // Ensure metadata is loaded
       video.muted = true;
+      video.playsInline = true;
 
       return new Promise((resolve) => {
-        video.addEventListener('loadeddata', async () => {
-          video.currentTime = 0;
+        video.addEventListener('loadeddata', () => {
+          // Step 1: Seek to a tiny bit past 0 to ensure a frame is available
+          video.currentTime = 0.1;
+        });
 
+        video.addEventListener('seeked', async () => {
+          // Step 2: Now that the seek is done, the frame is ready
           const canvas = document.createElement('canvas');
           canvas.width = video.videoWidth;
           canvas.height = video.videoHeight;
 
           const ctx = canvas.getContext('2d');
           ctx!.drawImage(video, 0, 0, canvas.width, canvas.height);
-          const thumbnail = canvas.toDataURL('image/jpeg')
-          const thumbnailResp = await fetch(thumbnail);
-          const thumbnailBlob = await thumbnailResp.blob();
-          const thumbnailBlobUrl = URL.createObjectURL(thumbnailBlob);
 
-          resolve({
-            thumbnailBlob: thumbnailBlobUrl,
-            height: video.videoHeight,
-            width: video.videoWidth,
-          });
-        });
+          // Clean up: Convert directly to blob to avoid double-processing
+          canvas.toBlob((blob) => {
+            const thumbnailBlobUrl = URL.createObjectURL(blob!);
+
+            // Revoke the original video URL to save memory
+            URL.revokeObjectURL(objectUrl);
+
+            resolve({
+              thumbnailBlob: thumbnailBlobUrl,
+              height: video.videoHeight,
+              width: video.videoWidth,
+            });
+          }, 'image/jpeg', 0.8);
+        }, { once: true }); // Only trigger once
       });
     }
   }