adding probe button in quizeditor and fix player size in cooldown

packages/web/src/components/game/QuestionMedia.tsx

@@ -14,7 +14,7 @@ const QuestionMedia = ({ media, alt, onPlayChange }: Props) => {
     return null
   }
 
-  const containerClass = "mx-auto flex w-full max-w-3xl justify-center"
+  const containerClass = "mx-auto flex w-full max-w-5xl justify-center"
 
   switch (media.type) {
     case "image":
@@ -52,7 +52,7 @@ const QuestionMedia = ({ media, alt, onPlayChange }: Props) => {
             crossOrigin="anonymous"
             playsInline
             src={media.url}
-            className="m-4 w-full max-w-3xl rounded-md shadow-lg"
+            className="m-4 w-full max-w-5xl rounded-md shadow-lg"
             preload="metadata"
             onPlay={() => onPlayChange?.(true)}
             onPause={() => onPlayChange?.(false)}

packages/web/src/components/game/create/QuizEditor.tsx

@@ -258,7 +258,6 @@ const QuizEditor = ({ quizzList, onBack, onListUpdate }: Props) => {
     }
 
     setQuestionMedia(qIndex, nextMedia)
-    adjustTimingWithMedia(qIndex, nextMedia)
   }
 
   const clearQuestionMedia = (qIndex: number) => {
@@ -272,6 +271,7 @@ const QuizEditor = ({ quizzList, onBack, onListUpdate }: Props) => {
 
     try {
       const el = document.createElement(type)
+      el.crossOrigin = "anonymous"
       el.preload = "metadata"
       el.src = url
 
@@ -371,11 +371,6 @@ const QuizEditor = ({ quizzList, onBack, onListUpdate }: Props) => {
         url: uploaded.url,
         fileName: uploaded.fileName,
       })
-      adjustTimingWithMedia(qIndex, {
-        type,
-        url: uploaded.url,
-        fileName: uploaded.fileName,
-      })
       toast.success("Media uploaded")
       refreshMediaLibrary()
     } catch (error) {
@@ -662,6 +657,19 @@ const QuizEditor = ({ quizzList, onBack, onListUpdate }: Props) => {
                     </span>
                   </label>
 
+                  <div className="flex flex-wrap items-center gap-2">
+                    <Button
+                      className="bg-gray-800"
+                      onClick={() => adjustTimingWithMedia(qIndex, question.media)}
+                      disabled={!question.media?.url || probing[qIndex]}
+                    >
+                      {probing[qIndex] ? "Probing..." : "Set timing from media"}
+                    </Button>
+                    <span className="text-xs text-gray-500">
+                      Probes audio/video duration and bumps cooldown/answer time if needed.
+                    </span>
+                  </div>
+
                   <div className="flex flex-wrap gap-2">
                     <Button
                       className="bg-gray-700"