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

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

@@ -4,23 +4,26 @@ import { useEffect, useState } from "react";
 interface Props {
   bodyPath?: string;
   data?: Uint8Array;
+  mimeType?: string;
 }
 
-export function AudioViewer({ bodyPath, data }: Props) {
+export function AudioViewer({ 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: "audio/mpeg" });
+      // The type matters here in a way it doesn't for an image: a media element goes by what
+      // the blob declares rather than sniffing it, so an Ogg labelled as MP3 won't play
+      const blob = new Blob([new Uint8Array(data)], { type: mimeType ?? "audio/mpeg" });
       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 <audio className="w-full" controls src={src} />;

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

@@ -2,7 +2,7 @@ import { convertFileSrc } from "@tauri-apps/api/core";
 import classNames from "classnames";
 import { useEffect, useState } from "react";
 
-type Props = { className?: string } & (
+type Props = { className?: string; mimeType?: string } & (
   | {
       bodyPath: string;
     }
@@ -11,7 +11,7 @@ type Props = { className?: string } & (
     }
 );
 
-export function ImageViewer({ className, ...props }: Props) {
+export function ImageViewer({ className, mimeType, ...props }: Props) {
   const [src, setSrc] = useState<string>();
   const bodyPath = "bodyPath" in props ? props.bodyPath : null;
   const data = "data" in props ? props.data : null;
@@ -20,14 +20,14 @@ export function ImageViewer({ className, ...props }: Props) {
     if (bodyPath != null) {
       setSrc(convertFileSrc(bodyPath));
     } else if (data != null) {
-      const blob = new Blob([data], { type: "image/png" });
+      const blob = new Blob([data], { type: mimeType ?? "image/png" });
       const url = URL.createObjectURL(blob);
       setSrc(url);
       return () => URL.revokeObjectURL(url);
     } else {
       setSrc(undefined);
     }
-  }, [bodyPath, data]);
+  }, [bodyPath, data, mimeType]);
 
   return (
     <img

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

@@ -3,7 +3,7 @@ import "react-pdf/dist/Page/AnnotationLayer.css";
 import { convertFileSrc } from "@tauri-apps/api/core";
 import "./PdfViewer.css";
 import type { PDFDocumentProxy } from "pdfjs-dist";
-import { useEffect, useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { Document, Page } from "react-pdf";
 import { useContainerSize } from "@yaakapp-internal/ui";
 import { fireAndForget } from "../../lib/fireAndForget";
@@ -30,26 +30,32 @@ const options = {
 export function PdfViewer({ bodyPath, data }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [numPages, setNumPages] = useState<number>();
-  const [src, setSrc] = useState<string | { data: Uint8Array }>();
 
   const { width: containerWidth } = useContainerSize(containerRef);
 
-  useEffect(() => {
+  // During render, not in an effect: an effect leaves the first paint with no file, and
+  // `Document` renders its "Failed to load PDF file" state for that frame before recovering
+  const src = useMemo(() => {
     if (bodyPath) {
-      setSrc(convertFileSrc(bodyPath));
-    } else if (data) {
+      return convertFileSrc(bodyPath);
+    }
+    if (data) {
       // Create a copy to avoid "Buffer is already detached" errors
       // This happens when the ArrayBuffer is transferred/detached elsewhere
-      const dataCopy = new Uint8Array(data);
-      setSrc({ data: dataCopy });
-    } else {
-      setSrc(undefined);
+      return { data: new Uint8Array(data) };
     }
+    return undefined;
   }, [bodyPath, data]);
 
   const onDocumentLoadSuccess = ({ numPages: nextNumPages }: PDFDocumentProxy): void => {
     setNumPages(nextNumPages);
   };
+
+  // Nothing to show yet, rather than the failure state `Document` renders for an empty file
+  if (src == null) {
+    return null;
+  }
+
   return (
     <div ref={containerRef} className="w-full h-full overflow-y-auto">
       <Document

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} />;