From e60818f93e84b826be7fdccaf3be777b0aade219 Mon Sep 17 00:00:00 2001
From: RandyJC <rchompff@gmail.com>
Date: Mon, 8 Dec 2025 20:56:17 +0100
Subject: [PATCH] fix

---
 .../web/src/components/game/QuestionMedia.tsx |  3 ++
 packages/web/src/server/media.ts              | 33 ++++++++++++-------
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/packages/web/src/components/game/QuestionMedia.tsx b/packages/web/src/components/game/QuestionMedia.tsx
index 7b7b04e..55fb353 100644
--- a/packages/web/src/components/game/QuestionMedia.tsx
+++ b/packages/web/src/components/game/QuestionMedia.tsx
@@ -33,6 +33,7 @@ const QuestionMedia = ({ media, alt, onPlayChange }: Props) => {
         <div className={clsx(containerClass, "px-4")}>
           <audio
             controls
+            crossOrigin="anonymous"
             src={media.url}
             className="mt-4 w-full rounded-md bg-black/40 p-2 shadow-lg"
             preload="none"
@@ -48,6 +49,8 @@ const QuestionMedia = ({ media, alt, onPlayChange }: Props) => {
         <div className={containerClass}>
           <video
             controls
+            crossOrigin="anonymous"
+            playsInline
             src={media.url}
             className="m-4 w-full max-w-3xl rounded-md shadow-lg"
             preload="metadata"
diff --git a/packages/web/src/server/media.ts b/packages/web/src/server/media.ts
index be9e016..2a67818 100644
--- a/packages/web/src/server/media.ts
+++ b/packages/web/src/server/media.ts
@@ -34,19 +34,30 @@ const ensureMediaFolder = () => {
 const inferMimeFromName = (fileName: string) => {
   const ext = path.extname(fileName).toLowerCase()
 
-  if ([".jpg", ".jpeg", ".png", ".gif", ".webp", ".bmp", ".svg"].includes(ext)) {
-    return `image/${ext.replace(".", "") || "jpeg"}`
+  const map: Record<string, string> = {
+    ".jpg": "image/jpeg",
+    ".jpeg": "image/jpeg",
+    ".png": "image/png",
+    ".gif": "image/gif",
+    ".webp": "image/webp",
+    ".bmp": "image/bmp",
+    ".svg": "image/svg+xml",
+    ".mp3": "audio/mpeg",
+    ".m4a": "audio/mp4",
+    ".aac": "audio/aac",
+    ".wav": "audio/wav",
+    ".ogg": "audio/ogg",
+    ".oga": "audio/ogg",
+    ".flac": "audio/flac",
+    ".mp4": "video/mp4",
+    ".m4v": "video/mp4",
+    ".mov": "video/quicktime",
+    ".webm": "video/webm",
+    ".ogv": "video/ogg",
+    ".mkv": "video/x-matroska",
   }
 
-  if ([".mp3", ".wav", ".ogg", ".aac", ".m4a", ".flac"].includes(ext)) {
-    return `audio/${ext.replace(".", "") || "mpeg"}`
-  }
-
-  if ([".mp4", ".webm", ".mov", ".ogv", ".mkv"].includes(ext)) {
-    return `video/${ext.replace(".", "") || "mp4"}`
-  }
-
-  return "application/octet-stream"
+  return map[ext] || "application/octet-stream"
 }
 
 const inferMediaType = (mime: string): QuestionMedia["type"] | null => {