From 7bde37680edb011ed0b7061f6924f7962910d2ce Mon Sep 17 00:00:00 2001
From: icarus <eurfelux@gmail.com>
Date: Sun, 12 Oct 2025 08:05:02 +0800
Subject: [PATCH] fix(video): handle undefined video case and add new video
 button

Add fallback for undefined video case in VideoPanel to clear prompt params
Add PlusIcon button in VideoList to allow creating new videos by setting activeVideoId to undefined
---
 src/renderer/src/pages/video/VideoList.tsx  | 13 +++++++++++--
 src/renderer/src/pages/video/VideoPanel.tsx |  2 ++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/pages/video/VideoList.tsx b/src/renderer/src/pages/video/VideoList.tsx
index 4445eb7bc6..c15694ce07 100644
--- a/src/renderer/src/pages/video/VideoList.tsx
+++ b/src/renderer/src/pages/video/VideoList.tsx
@@ -2,10 +2,14 @@ import { cn, Progress, Spinner } from '@heroui/react'
 import { mockVideos } from '@renderer/config/models/video'
 import { useVideos } from '@renderer/hooks/video/useVideos'
 import { Video } from '@renderer/types'
-import { CheckCircleIcon, CircleXIcon, ClockIcon, DownloadIcon } from 'lucide-react'
+import { CheckCircleIcon, CircleXIcon, ClockIcon, DownloadIcon, PlusIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 
-export type VideoListProps = { providerId: string; activeVideoId?: string; setActiveVideoId: (id: string) => void }
+export type VideoListProps = {
+  providerId: string
+  activeVideoId?: string
+  setActiveVideoId: (id: string | undefined) => void
+}
 
 export const VideoList = ({ providerId, activeVideoId, setActiveVideoId }: VideoListProps) => {
   const { videos } = useVideos(providerId)
@@ -15,6 +19,11 @@ export const VideoList = ({ providerId, activeVideoId, setActiveVideoId }: Video
 
   return (
     <div className="w-40 space-y-3 overflow-auto p-2">
+      <div
+        className="group relative flex aspect-square cursor-pointer items-center justify-center overflow-hidden rounded-xl border-2 transition-all hover:scale-105 hover:shadow-lg"
+        onClick={() => setActiveVideoId(undefined)}>
+        <PlusIcon size={24} />
+      </div>
       {displayVideos.map((video) => (
         <VideoListItem
           key={video.id}
diff --git a/src/renderer/src/pages/video/VideoPanel.tsx b/src/renderer/src/pages/video/VideoPanel.tsx
index 4968391bac..7418443248 100644
--- a/src/renderer/src/pages/video/VideoPanel.tsx
+++ b/src/renderer/src/pages/video/VideoPanel.tsx
@@ -39,6 +39,8 @@ export const VideoPanel = ({ provider, video, params, updateParams }: VideoPanel
   useEffect(() => {
     if (video) {
       updateParams({ params: { prompt: video.prompt } })
+    } else {
+      updateParams({ params: { prompt: undefined } })
     }
   }, [updateParams, video])