fix(media): request our own video and audio with CORS so Firefox does not block it

.changeset/firefox-media-orb.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix video and audio failing to play on Firefox with "no video with supported format and MIME type found".

src/app/components/message/content/AudioContent.tsx

@@ -275,6 +275,12 @@ export function AudioContent({
         controls={false}
         autoPlay
         ref={audioRef}
+        // See VideoContent: CORS opts this Range-streamed media out of Firefox's ORB.
+        crossOrigin={
+          srcState.status === AsyncStatus.Success && !srcState.data.startsWith('blob:')
+            ? 'anonymous'
+            : undefined
+        }
         onVolumeChange={(e) => {
           localStorage.setItem(MEDIA_VOLUME_KEY, String((e.target as HTMLAudioElement).volume));
         }}

src/app/components/message/content/VideoContent.tsx

@@ -45,6 +45,7 @@ type RenderVideoProps = {
   onError: () => void;
   autoPlay: boolean;
   controls: boolean;
+  crossOrigin?: 'anonymous';
 };
 type VideoContentProps = {
   body: string;
@@ -116,6 +117,11 @@ export const VideoContent = as<'div', VideoContentProps>(
       }
     }, [srcState.status]);
 
+    const streamsAuthenticatedMedia =
+      srcState.status === AsyncStatus.Success &&
+      !url.startsWith('http') &&
+      !srcState.data.startsWith('blob:');
+
     const handleLoad = () => {
       setLoad(true);
       setError(false);
@@ -195,6 +201,10 @@ export const VideoContent = as<'div', VideoContentProps>(
               onError: handleError,
               autoPlay: false,
               controls: true,
+              // Firefox blocks media Range responses it cannot sniff as audio/video (mozilla bug
+              // 1880289); requesting with CORS opts out. External URLs are left alone since we
+              // cannot assume they send Access-Control-Allow-Origin.
+              crossOrigin: streamsAuthenticatedMedia ? 'anonymous' : undefined,
             })}
           </Box>
         )}