From 1fd7b0b6673c22f032b0ff9c55d4586034838778 Mon Sep 17 00:00:00 2001
From: icarus <eurfelux@gmail.com>
Date: Sun, 12 Oct 2025 05:45:58 +0800
Subject: [PATCH] feat(video): add settings component for OpenAI video params

Add OpenAIParamSettings component to handle video duration and size selection
Include new i18n translations for seconds and size labels
---
 src/renderer/src/i18n/locales/en-us.json      |  2 +
 .../video/settings/OpenAIParamSettings.tsx    | 73 +++++++++++++++++++
 2 files changed, 75 insertions(+)
 create mode 100644 src/renderer/src/pages/video/settings/OpenAIParamSettings.tsx

diff --git a/src/renderer/src/i18n/locales/en-us.json b/src/renderer/src/i18n/locales/en-us.json
index 363e8747e4..e27bd9cd0a 100644
--- a/src/renderer/src/i18n/locales/en-us.json
+++ b/src/renderer/src/i18n/locales/en-us.json
@@ -4665,6 +4665,8 @@
     "prompt": {
       "placeholder": "describes the video to generate"
     },
+    "seconds": "Seconds",
+    "size": "Size",
     "status": {
       "completed": "Generation Completed",
       "downloading": "Downloading",
diff --git a/src/renderer/src/pages/video/settings/OpenAIParamSettings.tsx b/src/renderer/src/pages/video/settings/OpenAIParamSettings.tsx
new file mode 100644
index 0000000000..cbae9d0461
--- /dev/null
+++ b/src/renderer/src/pages/video/settings/OpenAIParamSettings.tsx
@@ -0,0 +1,73 @@
+import { VideoSeconds, VideoSize } from '@cherrystudio/openai/resources'
+import { Select, SelectItem } from '@heroui/react'
+import { OpenAICreateVideoParams } from '@renderer/types/video'
+import { DeepPartial } from 'ai'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { SettingItem, SettingsGroup } from './shared'
+
+export type OpenAIParamSettingsProps = {
+  params: OpenAICreateVideoParams
+  updateParams: (update: DeepPartial<Omit<OpenAICreateVideoParams, 'type'>>) => void
+}
+
+export const OpenAIParamSettings = ({ params, updateParams }: OpenAIParamSettingsProps) => {
+  const { t } = useTranslation()
+
+  const secondItems = [{ key: '4' }, { key: '8' }, { key: '12' }] as const satisfies { key: VideoSeconds }[]
+  const sizeItems = [
+    { key: '720x1280' },
+    { key: '1280x720' },
+    { key: '1024x1792' },
+    { key: '1792x1024' }
+  ] as const satisfies { key: VideoSize }[]
+
+  const updateSeconds = useCallback(
+    (seconds: VideoSeconds) => {
+      updateParams({ params: { seconds } })
+    },
+    [updateParams]
+  )
+
+  return (
+    <SettingsGroup>
+      <SettingItem>
+        <Select
+          label={t('video.seconds')}
+          labelPlacement="outside"
+          selectedKeys={[params.params.seconds ?? '4']}
+          onSelectionChange={(keys) => {
+            if (keys.currentKey) updateSeconds(keys.currentKey as VideoSeconds)
+          }}
+          items={secondItems}
+          selectionMode="single"
+          disallowEmptySelection>
+          {(item) => (
+            <SelectItem key={item.key} textValue={item.key}>
+              <span>{item.key}</span>
+            </SelectItem>
+          )}
+        </Select>
+      </SettingItem>
+      <SettingItem>
+        <Select
+          label={t('video.size')}
+          labelPlacement="outside"
+          selectedKeys={[params.params.size ?? '720x1280']}
+          onSelectionChange={(keys) => {
+            if (keys.currentKey) updateParams({ params: { size: keys.currentKey as VideoSize } })
+          }}
+          items={sizeItems}
+          selectionMode="single"
+          disallowEmptySelection>
+          {(item) => (
+            <SelectItem key={item.key} textValue={item.key}>
+              <span>{item.key}</span>
+            </SelectItem>
+          )}
+        </Select>
+      </SettingItem>
+    </SettingsGroup>
+  )
+}