Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-07 05:39:05 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat(video): add download button for completed videos

Browse Source 
Implement download button UI for completed videos. Currently shows a toast notification as the functionality is not yet implemented.
This commit is contained in:
icarus 2025-10-13 14:20:07 +08:00
parent 66b88aec74
commit 41041fa296
2 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/renderer/src/pages/video/VideoPanel.tsx
View File

@ -69,6 +69,10 @@ export const VideoPanel = ({ provider, video, params, updateParams }: VideoPanel
} }
}, [addOpenAIVideo, couldCreateVideo, params, t, video]) }, [addOpenAIVideo, couldCreateVideo, params, t, video])
const handleDownloadVideo = (videoId: string) => {
window.toast.info('Not implemented')
}
const handleUploadFile = useCallback(() => { const handleUploadFile = useCallback(() => {
fileInputRef.current?.click() 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="flex flex-1 flex-col p-2">
<div className="m-8 flex-1"> <div className="m-8 flex-1">
<Skeleton className="h-full w-full rounded-2xl" classNames={{ content: 'h-full w-full' }} isLoaded={true}> <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> </Skeleton>
</div> </div>
<div className="relative"> <div className="relative">

22
src/renderer/src/pages/video/VideoViewer.tsx
View File

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