[apps/web] Add video file preview

apps/web/components/LocalVideo.tsx

@@ -0,0 +1,11 @@
+import { useMemo } from "react";
+
+interface LocalVideoProps extends React.ComponentPropsWithoutRef<"video"> {
+  path: string;
+}
+
+export default function LocalVideo({ path, ...props }: LocalVideoProps) {
+  const src = useMemo(() => `/api/files?path=${encodeURIComponent(path)}`, [path]);
+
+  return <video src={src} {...props} />;
+}

apps/web/src/app/_components/FilePreview.tsx

@@ -1,5 +1,6 @@
 import useLookupFile from "../../../hooks/useLookupFile";
 import { LocalImage } from "../../../components/LocalImage";
+import LocalVideo from "../../../components/LocalVideo";
 
 interface FilePreviewProps {
   path: string;
@@ -45,11 +46,7 @@ export function FilePreview({ path }: FilePreviewProps) {
   }
 
   if (data.startsWith("video")) {
-    return (
-      <div className="text-yellow-500 bg-yellow-100 rounded-xl border border-yellow-300 border-dashed p-2 w-full">
-        {data}
-      </div>
-    );
+    return <LocalVideo path={path} controls className="rounded-xl max-h-48" />;
   }
 
   return (