fix: render audio object previews natively

Author: ccccpj

components/object/preview-modal.tsx

@@ -10,6 +10,7 @@ import { RiFullscreenExitLine, RiFullscreenLine } from "@remixicon/react"
 import { PdfViewer } from "@/components/object/pdf-viewer"
 import { ParquetViewer } from "@/components/object/parquet-viewer"
 import { TiffViewer } from "@/components/object/tiff-viewer"
+import { getObjectPreviewMode, normalizePreviewContentType } from "@/lib/object-preview"
 import Image from "next/image"
 
 const SAFE_TEXT_MIMES = [
@@ -27,8 +28,6 @@ const SAFE_TEXT_EXTENSIONS = [".txt", ".json", ".jsonl", ".ndjson", ".xml", ".cs
 const SAFE_IMAGE_EXTENSIONS = [".png", ".jpg", ".jpeg", ".gif", ".webp", ".bmp", ".ico", ".tif", ".tiff"]
 const ALLOWED_SIZE = 1024 * 1024 * 2 // 2MB
 
-type PreviewMode = "text" | "image" | "pdf" | "parquet" | "sandbox" | "download" | "tiff"
-
 const PARQUET_MIMES = ["application/vnd.apache.parquet", "application/x-parquet", "application/parquet"]
 const PARQUET_EXTENSIONS = [".parquet", ".pq"]
 
@@ -52,10 +51,6 @@ type FullscreenElement = HTMLElement & {
   webkitRequestFullscreen?: () => Promise<void> | void
 }
 
-function normalizeContentType(contentType: string) {
-  return contentType.split(";")[0]?.trim().toLowerCase() ?? ""
-}
-
 function isSafeTextPreview(contentType: string, objectKey: string, objectSize: number) {
   if (objectSize > ALLOWED_SIZE) return false
   if (SAFE_TEXT_MIMES.includes(contentType)) return true
@@ -71,12 +66,6 @@ function isImagePreview(contentType: string, objectKey: string) {
   return SAFE_IMAGE_EXTENSIONS.some((ext) => keyLower.endsWith(ext))
 }
 
-function getPreviewMode(hasPreviewUrl: boolean, canRenderText: boolean, canRenderImage: boolean): PreviewMode {
-  if (!hasPreviewUrl) return "download"
-  if (canRenderImage) return "image"
-  return canRenderText ? "text" : "sandbox"
-}
-
 function isPdfPreview(contentType: string) {
   return contentType === "application/pdf"
 }
@@ -124,6 +113,7 @@ export function ObjectPreviewModal({ show, onShowChange, object }: ObjectPreview
   const { t } = useTranslation()
   const [textContent, setTextContent] = React.useState("")
   const [loading, setLoading] = React.useState(false)
+  const [audioLoadError, setAudioLoadError] = React.useState(false)
   const [isFormatted, setIsFormatted] = React.useState(true)
   const [imageNaturalSize, setImageNaturalSize] = React.useState<{ width: number; height: number } | null>(null)
   const [imageFitScale, setImageFitScale] = React.useState(1)
@@ -139,21 +129,23 @@ export function ObjectPreviewModal({ show, onShowChange, object }: ObjectPreview
   const objectSize = Number(object?.ContentLength ?? 0)
   const objectKey = object?.Key ?? ""
   const objectKeyLower = objectKey.toLowerCase()
-  const normalizedContentType = normalizeContentType(contentType)
+  const normalizedContentType = normalizePreviewContentType(contentType)
 
   const isJson = normalizedContentType === "application/json" || objectKeyLower.endsWith(".json")
   const canRenderText = hasPreviewUrl && isSafeTextPreview(normalizedContentType, objectKey, objectSize)
   const canRenderImage = hasPreviewUrl && isImagePreview(normalizedContentType, objectKey)
   const canRenderPdf = hasPreviewUrl && isPdfPreview(normalizedContentType)
   const canRenderParquet = hasPreviewUrl && isParquetPreview(normalizedContentType, objectKey)
   const canRenderTiff = hasPreviewUrl && isTiffPreview(objectKey)
-  const previewMode: PreviewMode = canRenderParquet
-    ? "parquet"
-    : canRenderPdf
-      ? "pdf"
-      : canRenderTiff
-        ? "tiff"
-        : getPreviewMode(hasPreviewUrl, canRenderText, canRenderImage)
+  const previewMode = getObjectPreviewMode({
+    hasPreviewUrl,
+    contentType,
+    canRenderText,
+    canRenderImage,
+    canRenderPdf,
+    canRenderParquet,
+    canRenderTiff,
+  })
   const isImageMode = previewMode === "image"
   const isSelfScrollMode = isImageMode || previewMode === "parquet" || previewMode === "tiff"
 
@@ -193,6 +185,10 @@ export function ObjectPreviewModal({ show, onShowChange, object }: ObjectPreview
     }
   }, [show, previewMode, previewUrl, t])
 
+  React.useEffect(() => {
+    setAudioLoadError(false)
+  }, [show, previewUrl])
+
   React.useEffect(() => {
     const cachedSize = previewUrl ? imageSizeCacheRef.current[previewUrl] : undefined
     setImageNaturalSize(cachedSize ?? null)
@@ -375,6 +371,20 @@ export function ObjectPreviewModal({ show, onShowChange, object }: ObjectPreview
             </div>
           </div>
         )
+      case "audio":
+        return audioLoadError ? (
+          <div className="my-auto text-center text-sm text-destructive" role="alert">
+            {t("Preview unavailable")}
+          </div>
+        ) : (
+          <audio
+            controls
+            src={previewUrl}
+            className="my-auto w-full"
+            aria-label={objectKey || t("Preview")}
+            onError={() => setAudioLoadError(true)}
+          />
+        )
       case "sandbox":
         return (
           <iframe src={previewUrl} className="h-[70vh] w-full" frameBorder={0} title="Sandbox preview" sandbox="" />

lib/object-preview.ts

@@ -0,0 +1,33 @@
+type ObjectPreviewMode = "text" | "image" | "audio" | "pdf" | "parquet" | "sandbox" | "download" | "tiff"
+
+interface ObjectPreviewOptions {
+  hasPreviewUrl: boolean
+  contentType: string
+  canRenderText: boolean
+  canRenderImage: boolean
+  canRenderPdf: boolean
+  canRenderParquet: boolean
+  canRenderTiff: boolean
+}
+
+export function normalizePreviewContentType(contentType: string) {
+  return contentType.split(";")[0]?.trim().toLowerCase() ?? ""
+}
+
+export function getObjectPreviewMode({
+  hasPreviewUrl,
+  contentType,
+  canRenderText,
+  canRenderImage,
+  canRenderPdf,
+  canRenderParquet,
+  canRenderTiff,
+}: ObjectPreviewOptions): ObjectPreviewMode {
+  if (!hasPreviewUrl) return "download"
+  if (normalizePreviewContentType(contentType).startsWith("audio/")) return "audio"
+  if (canRenderParquet) return "parquet"
+  if (canRenderPdf) return "pdf"
+  if (canRenderTiff) return "tiff"
+  if (canRenderImage) return "image"
+  return canRenderText ? "text" : "sandbox"
+}

tests/lib/object-preview-source.test.js

@@ -1,6 +1,46 @@
 import test from "node:test"
 import assert from "node:assert/strict"
 import fs from "node:fs"
+import { getObjectPreviewMode } from "../../lib/object-preview.ts"
+
+const previewOptions = {
+  hasPreviewUrl: true,
+  contentType: "application/octet-stream",
+  canRenderText: false,
+  canRenderImage: false,
+  canRenderPdf: false,
+  canRenderParquet: false,
+  canRenderTiff: false,
+}
+
+test("object preview dispatches normalized audio MIME types to the native audio mode", () => {
+  assert.equal(getObjectPreviewMode({ ...previewOptions, contentType: "audio/wav" }), "audio")
+  assert.equal(getObjectPreviewMode({ ...previewOptions, contentType: "audio/mpeg" }), "audio")
+  assert.equal(getObjectPreviewMode({ ...previewOptions, contentType: " Audio/WAV; codecs=1 " }), "audio")
+  assert.equal(
+    getObjectPreviewMode({ ...previewOptions, contentType: "audio/wav", canRenderParquet: true, canRenderTiff: true }),
+    "audio",
+  )
+})
+
+test("object preview preserves non-audio dispatch behavior", () => {
+  assert.equal(getObjectPreviewMode(previewOptions), "sandbox")
+  assert.equal(getObjectPreviewMode({ ...previewOptions, canRenderPdf: true }), "pdf")
+  assert.equal(getObjectPreviewMode({ ...previewOptions, canRenderImage: true }), "image")
+  assert.equal(getObjectPreviewMode({ ...previewOptions, canRenderText: true }), "text")
+})
+
+test("object preview renders native audio controls without relaxing the fallback sandbox", () => {
+  const source = fs.readFileSync("components/object/preview-modal.tsx", "utf8")
+
+  assert.match(source, /const previewMode = getObjectPreviewMode\(\{/)
+  assert.match(source, /switch \(previewMode\)/)
+  assert.match(source, /case "audio":[\s\S]*<audio[\s\S]*controls[\s\S]*src=\{previewUrl\}/)
+  assert.match(source, /onError=\{\(\) => setAudioLoadError\(true\)\}/)
+  assert.match(source, /role="alert"[\s\S]*\{t\("Preview unavailable"\)\}/)
+  assert.match(source, /<iframe[^>]*sandbox=""/)
+  assert.doesNotMatch(source, /allow-same-origin/)
+})
 
 test("object preview modal falls back when standard fullscreen APIs are unavailable", () => {
   const source = fs.readFileSync("components/object/preview-modal.tsx", "utf8")