fix(files): resolve dual audio/video containers to the kind the app presents

The viewer routes .webm to the video player, but the Type column and the
audio/video filters resolved it through EXTENSION_TO_MIME and read audio/webm,
so one file showed as Audio and opened in a <video>.

resolveEffectiveMimeType now consults a DUAL_CONTAINER_MIME map first. It stays
out of EXTENSION_TO_MIME because the speech-to-text and ElevenLabs routes read
that table directly, where a video/* label pushes a .webm into ffmpeg audio
extraction it does not need.

Author: waleedlatif1

apps/sim/lib/uploads/utils/file-utils.test.ts

@@ -5,6 +5,7 @@ import { createLogger } from '@sim/logger'
 import { describe, expect, it } from 'vitest'
 import {
   extractStorageKey,
+  getMimeTypeFromExtension,
   inferContextFromKey,
   isAbortError,
   isInternalFileUrl,
@@ -221,6 +222,19 @@ describe('resolveEffectiveMimeType', () => {
     expect(resolveEffectiveMimeType(undefined, 'clip.mp4')).toBe('video/mp4')
   })
 
+  it('resolves a dual audio/video container to video, matching how the app presents it', () => {
+    expect(resolveEffectiveMimeType('application/octet-stream', 'clip.webm')).toBe('video/webm')
+    expect(resolveEffectiveMimeType(null, 'clip.webm')).toBe('video/webm')
+  })
+
+  it('still keeps an explicit audio/webm declared by the browser', () => {
+    expect(resolveEffectiveMimeType('audio/webm', 'recording.webm')).toBe('audio/webm')
+  })
+
+  it('leaves the upload-time extension table alone for dual containers', () => {
+    expect(getMimeTypeFromExtension('webm')).toBe('audio/webm')
+  })
+
   it('stays generic when the extension identifies nothing either', () => {
     expect(resolveEffectiveMimeType('application/octet-stream', 'firmware.bin')).toBe(
       'application/octet-stream'

apps/sim/lib/uploads/utils/file-utils.ts

@@ -382,6 +382,19 @@ const EXTENSION_TO_MIME: Record<string, string> = {
 
 const GENERIC_MIME_TYPE = 'application/octet-stream'
 
+/**
+ * Containers that hold either audio or video, mapped to the kind this app presents them as.
+ * A filename cannot say which a `.webm` is, and the viewer already routes it to the video
+ * player, so everything user-facing has to agree — otherwise one file reads "Audio" in the
+ * Type column and opens in a `<video>`.
+ *
+ * Deliberately not folded into {@link EXTENSION_TO_MIME}: the speech-to-text and ElevenLabs
+ * routes read that table directly to label an upload, and a `video/*` label there sends a
+ * `.webm` down an ffmpeg extraction path it does not need. Callers that know which element
+ * they are rendering retag from here — see {@link resolveMediaMimeType}.
+ */
+const DUAL_CONTAINER_MIME: Record<string, string> = { webm: 'video/webm' }
+
 /** Every MIME type that identifies no format, including the legacy `binary/` spelling. */
 const GENERIC_MIME_TYPES = new Set([GENERIC_MIME_TYPE, 'binary/octet-stream'])
 
@@ -409,7 +422,9 @@ export function resolveEffectiveMimeType(
 ): string {
   const declared = declaredType?.trim()
   if (declared && !GENERIC_MIME_TYPES.has(declared)) return declared
-  return getMimeTypeFromExtension(getFileExtension(filename))
+
+  const extension = getFileExtension(filename)
+  return DUAL_CONTAINER_MIME[extension] ?? getMimeTypeFromExtension(extension)
 }
 
 const MEDIA_FALLBACK_MIME = { audio: 'audio/mpeg', video: 'video/mp4' } as const