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

@@ -4665,6 +4665,8 @@
     "prompt": {
       "placeholder": "describes the video to generate"
     },
+    "seconds": "Seconds",
+    "size": "Size",
     "status": {
       "completed": "Generation Completed",
       "downloading": "Downloading",

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>
+  )
+}