From 85c8d5fca23df3007623cec4ec9b7f9a3eb4d13a Mon Sep 17 00:00:00 2001
From: icarus <eurfelux@gmail.com>
Date: Sun, 12 Oct 2025 02:49:15 +0800
Subject: [PATCH] refactor(video): rename Video component to VideoPlayer and
 pass video prop

Update VideoPanel to use VideoPlayer component instead of Video and accept video as a prop
---
 src/renderer/src/pages/video/VideoPanel.tsx            | 10 +++++-----
 .../src/pages/video/{Video.tsx => VideoPlayer.tsx}     |  5 +++--
 2 files changed, 8 insertions(+), 7 deletions(-)
 rename src/renderer/src/pages/video/{Video.tsx => VideoPlayer.tsx} (85%)

diff --git a/src/renderer/src/pages/video/VideoPanel.tsx b/src/renderer/src/pages/video/VideoPanel.tsx
index 9291afe356..0d0bc82560 100644
--- a/src/renderer/src/pages/video/VideoPanel.tsx
+++ b/src/renderer/src/pages/video/VideoPanel.tsx
@@ -3,24 +3,24 @@ import { loggerService } from '@logger'
 import { useAddOpenAIVideo } from '@renderer/hooks/video/useOpenAIVideos'
 import { createVideo } from '@renderer/services/ApiService'
 import { Provider } from '@renderer/types'
+import { Video } from '@renderer/types/video'
 import { ArrowUp } from 'lucide-react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { Video } from './Video'
+import { VideoPlayer } from './VideoPlayer'
 
 export type VideoPanelProps = {
   provider: Provider
+  video?: Video
 }
 
 const logger = loggerService.withContext('VideoPanel')
 
-export const VideoPanel = ({ provider }: VideoPanelProps) => {
+export const VideoPanel = ({ provider, video }: VideoPanelProps) => {
   const { t } = useTranslation()
   const [prompt, setPrompt] = useState('')
   const addOpenAIVideo = useAddOpenAIVideo(provider.id)
-  // TODO: get video job from api
-  const video = { success: false, data: undefined }
 
   const sendRequest = useCallback(async () => {
     const result = await createVideo({
@@ -44,7 +44,7 @@ export const VideoPanel = ({ provider }: VideoPanelProps) => {
     <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} />
+          <VideoPlayer video={video} />
         </Skeleton>
       </div>
       <div className="relative">
diff --git a/src/renderer/src/pages/video/Video.tsx b/src/renderer/src/pages/video/VideoPlayer.tsx
similarity index 85%
rename from src/renderer/src/pages/video/Video.tsx
rename to src/renderer/src/pages/video/VideoPlayer.tsx
index 9d893ee121..25cf63f896 100644
--- a/src/renderer/src/pages/video/Video.tsx
+++ b/src/renderer/src/pages/video/VideoPlayer.tsx
@@ -1,11 +1,12 @@
+import { Video } from '@renderer/types/video'
 import { CircleXIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 
 export interface VideoProps {
-  video: null | undefined
+  video?: Video | null
 }
 
-export const Video = ({ video }: VideoProps) => {
+export const VideoPlayer = ({ video }: VideoProps) => {
   const { t } = useTranslation()
   return (
     <div className="flex h-full w-full items-center justify-center rounded-2xl bg-foreground-200">