feat(video): add download button for completed videos

Implement download button UI for completed videos. Currently shows a toast notification as the functionality is not yet implemented.

src/renderer/src/pages/video/VideoPanel.tsx

@@ -69,6 +69,10 @@ export const VideoPanel = ({ provider, video, params, updateParams }: VideoPanel
     }
   }, [addOpenAIVideo, couldCreateVideo, params, t, video])
 
+  const handleDownloadVideo = (videoId: string) => {
+    window.toast.info('Not implemented')
+  }
+
   const handleUploadFile = useCallback(() => {
     fileInputRef.current?.click()
   }, [])
@@ -114,7 +118,8 @@ export const VideoPanel = ({ provider, video, params, updateParams }: VideoPanel
     <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}>
-          <VideoViewer video={video} />
+          {video && <VideoViewer video={video} onDownload={handleDownloadVideo} />}
+          {!video && <VideoViewer video={video} />}
         </Skeleton>
       </div>
       <div className="relative">

src/renderer/src/pages/video/VideoViewer.tsx

@@ -14,11 +14,17 @@ import { CheckCircleIcon, CircleXIcon } from 'lucide-react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-export interface VideoViewerProps {
-  video?: Video
-}
+export type VideoViewerProps =
+  | {
+      video: undefined
+      onDownload?: never
+    }
+  | {
+      video: Video
+      onDownload: (videoId: string) => void
+    }
 
-export const VideoViewer = ({ video }: VideoViewerProps) => {
+export const VideoViewer = ({ video, onDownload }: VideoViewerProps) => {
   const { t } = useTranslation()
   const [loadSuccess, setLoadSuccess] = useState<boolean | undefined>(undefined)
   return (
@@ -27,7 +33,7 @@ export const VideoViewer = ({ video }: VideoViewerProps) => {
         {video === undefined && t('video.undefined')}
         {video && video.status === 'queued' && <QueuedVideo />}
         {video && video.status === 'in_progress' && <InProgressVideo progress={video.progress} />}
-        {video && video.status === 'completed' && <CompletedVideo />}
+        {video && video.status === 'completed' && <CompletedVideo onDownload={() => onDownload(video.id)} />}
         {video && video.status === 'downloading' && <DownloadingVideo progress={video.progress} />}
         {video && video.status === 'downloaded' && loadSuccess !== false && (
           <video
@@ -72,12 +78,14 @@ const InProgressVideo = ({ progress }: { progress: number }) => {
   )
 }
 
-const CompletedVideo = () => {
+const CompletedVideo = ({ onDownload }: { onDownload: () => void }) => {
   const { t } = useTranslation()
+
   return (
-    <div className="flex h-full w-full flex-col items-center justify-center rounded-2xl bg-success-200">
+    <div className="flex h-full w-full flex-col items-center justify-center gap-2 rounded-2xl bg-success-200">
       <CheckCircleIcon size={64} className="text-success" />
       <span className="font-bold text-2xl">{t('video.status.completed')}</span>
+      <Button onPress={onDownload}>{t('common.download')}</Button>
     </div>
   )
 }