From 50d4c399e9c14a8b8bca9ede4e9c246bb6ad7ab2 Mon Sep 17 00:00:00 2001
From: bennykok <itechbenny@gmail.com>
Date: Wed, 31 Jan 2024 21:23:00 +0800
Subject: [PATCH] feat: output render support mp4 and webm

---
 web/src/components/OutputRender.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/web/src/components/OutputRender.tsx b/web/src/components/OutputRender.tsx
index d88756c..d42046e 100644
--- a/web/src/components/OutputRender.tsx
+++ b/web/src/components/OutputRender.tsx
@@ -5,6 +5,20 @@ export async function OutputRender(props: {
   run_id: string;
   filename: string;
 }) {
+  if (props.filename.endsWith(".mp4") || props.filename.endsWith(".webm")) {
+    const url = await getFileDownloadUrl(
+      `outputs/runs/${props.run_id}/${props.filename}`,
+    );
+
+    return (
+      <video controls autoPlay className="w-[400px]">
+        <source src={url} type="video/mp4" />
+        <source src={url} type="video/webm" />
+        Your browser does not support the video tag.
+      </video>
+    );
+  }
+
   if (
     props.filename.endsWith(".png") ||
     props.filename.endsWith(".gif") ||
@@ -12,13 +26,13 @@ export async function OutputRender(props: {
     props.filename.endsWith(".jpeg")
   ) {
     const url = await getFileDownloadUrl(
-      `outputs/runs/${props.run_id}/${props.filename}`
+      `outputs/runs/${props.run_id}/${props.filename}`,
     );
 
     return <img className="max-w-[200px]" alt={props.filename} src={url} />;
   } else {
     const url = await getFileDownloadUrl(
-      `outputs/runs/${props.run_id}/${props.filename}`
+      `outputs/runs/${props.run_id}/${props.filename}`,
     );
     // console.log(url);