From ab2aa8380f69a5f700aa6394ab8d375ee64fd499 Mon Sep 17 00:00:00 2001
From: icarus <eurfelux@gmail.com>
Date: Sat, 11 Oct 2025 17:22:14 +0800
Subject: [PATCH] feat(video): add video panel component with error handling

Implement video panel with placeholder prompt input and video display area
Add error states for invalid and undefined video cases
Update i18n strings for video related messages
---
 src/renderer/src/i18n/locales/en-us.json    |  9 ++++-
 src/renderer/src/pages/video/Video.tsx      | 22 ++++++++++++
 src/renderer/src/pages/video/VideoPage.tsx  |  5 +--
 src/renderer/src/pages/video/VideoPanel.tsx | 39 +++++++++++++++++++++
 4 files changed, 72 insertions(+), 3 deletions(-)
 create mode 100644 src/renderer/src/pages/video/Video.tsx
 create mode 100644 src/renderer/src/pages/video/VideoPanel.tsx

diff --git a/src/renderer/src/i18n/locales/en-us.json b/src/renderer/src/i18n/locales/en-us.json
index 1054f199b2..b78ea22cf2 100644
--- a/src/renderer/src/i18n/locales/en-us.json
+++ b/src/renderer/src/i18n/locales/en-us.json
@@ -4646,7 +4646,14 @@
     "title": "Update"
   },
   "video": {
-    "title": "Video"
+    "error": {
+      "invalid": "Invalid video"
+    },
+    "prompt": {
+      "placeholder": "describes the video to generate"
+    },
+    "title": "Video",
+    "undefined": "No available video"
   },
   "warning": {
     "missing_provider": "The supplier does not exist; reverted to the default supplier {{provider}}. This may cause issues."
diff --git a/src/renderer/src/pages/video/Video.tsx b/src/renderer/src/pages/video/Video.tsx
new file mode 100644
index 0000000000..e005454de1
--- /dev/null
+++ b/src/renderer/src/pages/video/Video.tsx
@@ -0,0 +1,22 @@
+import { CircleXIcon } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
+export interface VideoProps {
+  video: null | undefined
+}
+
+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">
+      {video && <video></video>}
+      {video === undefined && t('video.undefined')}
+      {video === null && (
+        <div className="flex h-full w-full flex-col items-center justify-center rounded-2xl bg-danger-100">
+          <CircleXIcon size={64} className="fill-danger text-danger-100" />
+          <span className="font-bold text-2xl">{t('video.error.invalid')}</span>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/renderer/src/pages/video/VideoPage.tsx b/src/renderer/src/pages/video/VideoPage.tsx
index 128436a279..89bf125067 100644
--- a/src/renderer/src/pages/video/VideoPage.tsx
+++ b/src/renderer/src/pages/video/VideoPage.tsx
@@ -7,6 +7,7 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { ProviderSetting } from './settings/ProviderSetting'
+import { VideoPanel } from './VideoPanel'
 
 export const VideoPage = () => {
   const { t } = useTranslation()
@@ -21,9 +22,9 @@ export const VideoPage = () => {
           <ProviderSetting providerId={providerId} setProviderId={setProviderId} />
         </div>
         <Divider orientation="vertical" />
-        <div className="flex-1 p-2"></div>
+        <VideoPanel />
         <Divider orientation="vertical" />
-        <div className="w-25"></div>
+        <div className="w-40"></div>
       </div>
     </div>
   )
diff --git a/src/renderer/src/pages/video/VideoPanel.tsx b/src/renderer/src/pages/video/VideoPanel.tsx
new file mode 100644
index 0000000000..42d5553797
--- /dev/null
+++ b/src/renderer/src/pages/video/VideoPanel.tsx
@@ -0,0 +1,39 @@
+import { Button, Skeleton, Textarea } from '@heroui/react'
+import { ArrowUp } from 'lucide-react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { Video } from './Video'
+
+export const VideoPanel = () => {
+  const { t } = useTranslation()
+  const [prompt, setPrompt] = useState('')
+  // TODO: get video job from api
+  const video = { success: false, data: undefined }
+  return (
+    <div className="flex flex-1 flex-col p-2">
+      <div className="m-8 flex-1">
+        <Skeleton className="h-full w-full rounded-2xl" classNames={{ content: 'h-full w-full' }} isLoaded={true}>
+          <Video video={video.data} />
+        </Skeleton>
+      </div>
+      <div className="relative">
+        <Textarea
+          label={t('common.prompt')}
+          placeholder={t('video.prompt.placeholder')}
+          value={prompt}
+          onValueChange={setPrompt}
+          isClearable
+          classNames={{ inputWrapper: 'pb-8' }}
+        />
+        <Button
+          color="primary"
+          radius="full"
+          startContent={<ArrowUp size={16} className="text-primary-foreground" />}
+          isIconOnly
+          className="absolute right-1 bottom-1 h-6 w-6 min-w-0"
+        />
+      </div>
+    </div>
+  )
+}