From c6a0ad3fc04acd677d2f3faf7dc052130a2e53c4 Mon Sep 17 00:00:00 2001
From: icarus <eurfelux@gmail.com>
Date: Sat, 11 Oct 2025 17:40:15 +0800
Subject: [PATCH] feat(video): add model selection to video settings

Add ModelSetting component to allow selecting video generation models
---
 src/renderer/src/pages/video/Video.tsx        |  1 +
 src/renderer/src/pages/video/VideoPage.tsx    |  5 ++
 .../src/pages/video/settings/ModelSetting.tsx | 48 +++++++++++++++++++
 3 files changed, 54 insertions(+)
 create mode 100644 src/renderer/src/pages/video/settings/ModelSetting.tsx

diff --git a/src/renderer/src/pages/video/Video.tsx b/src/renderer/src/pages/video/Video.tsx
index e005454de1..9d893ee121 100644
--- a/src/renderer/src/pages/video/Video.tsx
+++ b/src/renderer/src/pages/video/Video.tsx
@@ -9,6 +9,7 @@ export const Video = ({ video }: VideoProps) => {
   const { t } = useTranslation()
   return (
     <div className="flex h-full w-full items-center justify-center rounded-2xl bg-foreground-200">
+      {/* TODO: complete video widget */}
       {video && <video></video>}
       {video === undefined && t('video.undefined')}
       {video === null && (
diff --git a/src/renderer/src/pages/video/VideoPage.tsx b/src/renderer/src/pages/video/VideoPage.tsx
index 89bf125067..177c857c8c 100644
--- a/src/renderer/src/pages/video/VideoPage.tsx
+++ b/src/renderer/src/pages/video/VideoPage.tsx
@@ -6,24 +6,29 @@ import { SystemProviderIds } from '@renderer/types'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { ModelSetting } from './settings/ModelSetting'
 import { ProviderSetting } from './settings/ProviderSetting'
 import { VideoPanel } from './VideoPanel'
 
 export const VideoPage = () => {
   const { t } = useTranslation()
   const [providerId, setProviderId] = useState<string>(SystemProviderIds.openai)
+  const [modelId, setModelId] = useState('sora-2')
   return (
     <div className="flex flex-1 flex-col">
       <Navbar>
         <NavbarCenter style={{ borderRight: 'none' }}>{t('video.title')}</NavbarCenter>
       </Navbar>
       <div id="content-container" className="flex flex-1">
+        {/* Settings */}
         <div className="flex w-70 flex-col p-2">
           <ProviderSetting providerId={providerId} setProviderId={setProviderId} />
+          <ModelSetting providerId={providerId} modelId={modelId} setModelId={setModelId} />
         </div>
         <Divider orientation="vertical" />
         <VideoPanel />
         <Divider orientation="vertical" />
+        {/* Video list */}
         <div className="w-40"></div>
       </div>
     </div>
diff --git a/src/renderer/src/pages/video/settings/ModelSetting.tsx b/src/renderer/src/pages/video/settings/ModelSetting.tsx
new file mode 100644
index 0000000000..b6ed460136
--- /dev/null
+++ b/src/renderer/src/pages/video/settings/ModelSetting.tsx
@@ -0,0 +1,48 @@
+import { Select, SelectItem } from '@heroui/react'
+import { Model, SystemProviderId } from '@renderer/types'
+import { Dispatch, SetStateAction } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { SettingItem, SettingTitle } from './shared'
+
+export interface ModelSettingProps {
+  providerId: string
+  modelId: string
+  setModelId: Dispatch<SetStateAction<string>>
+}
+
+interface ModelSelectItem extends Model {
+  key: string
+  label: string
+}
+
+// Hard-encoded for now. We may implement a function to filter video generation model from provider.models.
+const videoModelsMap = {
+  openai: ['sora-2', 'sora-2-pro'] as const
+} as const satisfies Partial<Record<SystemProviderId, string[]>>
+
+export const ModelSetting = ({ providerId, modelId, setModelId }: ModelSettingProps) => {
+  const { t } = useTranslation()
+
+  const items: ModelSelectItem[] = videoModelsMap[providerId]?.map((m: string) => ({ key: m, label: m })) ?? []
+
+  return (
+    <SettingItem>
+      <SettingTitle name={t('common.model')} />
+      <Select
+        selectionMode="single"
+        items={items}
+        defaultSelectedKeys={[modelId]}
+        disallowEmptySelection
+        onSelectionChange={(keys) => {
+          if (keys.currentKey) setModelId(keys.currentKey)
+        }}>
+        {(model) => (
+          <SelectItem textValue={model.label}>
+            <span>{model.label}</span>
+          </SelectItem>
+        )}
+      </Select>
+    </SettingItem>
+  )
+}