feat: refine video playground settings

apps/web/src/pages/PlaygroundPage.tsx

@@ -130,8 +130,10 @@ export function PlaygroundPage(props: {
   const mediaCapabilities = useMemo(
     () => props.mode === 'chat'
       ? undefined
-      : deriveMediaModelCapabilities(activeModelOption?.models, props.mode, videoMode),
-    [activeModelOption, props.mode, videoMode],
+      : activeModelOption
+        ? deriveMediaModelCapabilities(activeModelOption.models, props.mode, videoMode, mediaSettings.resolution)
+        : undefined,
+    [activeModelOption, mediaSettings.resolution, props.mode, videoMode],
   );
 
   useEffect(() => {
@@ -230,7 +232,7 @@ export function PlaygroundPage(props: {
       const requestPayload = {
         model: selectedModel,
         prompt: trimmedPrompt,
-        ...mediaRequestPayload(runSettings),
+        ...mediaRequestPayload(runSettings, runMode),
       };
       const response = runMode === 'video'
         ? await createVideoGenerationTask(credential, requestPayload)
@@ -1117,8 +1119,10 @@ function mediaSettingsFromStorage(value: unknown): MediaGenerationSettings {
     aspectRatio: stringFromUnknown(record.aspectRatio) || fallback.aspectRatio,
     countPreset: countPresetFromStorage(record.countPreset, fallback.countPreset),
     customCount: numberFromUnknown(record.customCount, fallback.customCount, 1, 20),
+    durationSeconds: numberFromUnknown(record.durationSeconds ?? record.duration_seconds ?? record.duration, fallback.durationSeconds, 1, 3600),
     height: numberFromUnknown(record.height, fallback.height, 128, 8192),
     outputMode: record.outputMode === 'group' ? 'group' : 'single',
+    outputAudio: booleanFromUnknown(record.outputAudio ?? record.output_audio ?? record.audio, fallback.outputAudio),
     resolution: stringFromUnknown(record.resolution) || fallback.resolution,
     width: numberFromUnknown(record.width, fallback.width, 128, 8192),
   };
@@ -1159,6 +1163,12 @@ function numberFromUnknown(value: unknown, fallback: number, min: number, max: n
   return Math.min(max, Math.max(min, Math.round(number)));
 }
 
+function booleanFromUnknown(value: unknown, fallback: boolean) {
+  if (value === true || value === 'true') return true;
+  if (value === false || value === 'false') return false;
+  return fallback;
+}
+
 function delay(ms: number) {
   return new Promise((resolve) => window.setTimeout(resolve, ms));
 }