Identify collapsed values and open them in a viewer (#533)

apps/yaak-client/components/responseViewers/VideoViewer.tsx

@@ -4,23 +4,25 @@ import { useEffect, useState } from "react";
 interface Props {
   bodyPath?: string;
   data?: Uint8Array;
+  mimeType?: string;
 }
 
-export function VideoViewer({ bodyPath, data }: Props) {
+export function VideoViewer({ bodyPath, data, mimeType }: Props) {
   const [src, setSrc] = useState<string>();
 
   useEffect(() => {
     if (bodyPath) {
       setSrc(convertFileSrc(bodyPath));
     } else if (data) {
-      const blob = new Blob([new Uint8Array(data)], { type: "video/mp4" });
+      // As in AudioViewer: a media element trusts the declared type instead of sniffing
+      const blob = new Blob([new Uint8Array(data)], { type: mimeType ?? "video/mp4" });
       const url = URL.createObjectURL(blob);
       setSrc(url);
       return () => URL.revokeObjectURL(url);
     } else {
       setSrc(undefined);
     }
-  }, [bodyPath, data]);
+  }, [bodyPath, data, mimeType]);
 
   // oxlint-disable-next-line jsx-a11y/media-has-caption
   return <video className="w-full" controls src={src} />;