feat(video): add setActiveVideoId prop to VideoPanel

Enable VideoPanel to update active video ID after processing and track processing state
This commit is contained in:
icarus 2025-10-14 01:01:44 +08:00
parent 3c6f32dbac
commit a0abf7fe62
2 changed files with 15 additions and 4 deletions

View File

@ -144,7 +144,13 @@ export const VideoPage = () => {
{provider.type === 'openai-response' && <OpenAIParamSettings params={params} updateParams={updateParams} />}
</div>
<Divider orientation="vertical" />
<VideoPanel provider={provider} params={params} updateParams={updateParams} video={activeVideo} />
<VideoPanel
provider={provider}
params={params}
updateParams={updateParams}
setActiveVideoId={setActiveVideoId}
video={activeVideo}
/>
<Divider orientation="vertical" />
{/* Video list */}
<VideoList

View File

@ -15,7 +15,7 @@ import dayjs from 'dayjs'
import { isEmpty } from 'lodash'
import { ArrowUp, CircleXIcon, ImageIcon } from 'lucide-react'
import mime from 'mime-types'
import { useCallback, useEffect, useMemo, useRef } from 'react'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { VideoViewer } from './VideoViewer'
@ -25,16 +25,18 @@ export type VideoPanelProps = {
video?: Video
params: CreateVideoParams
updateParams: (upadte: DeepPartial<Omit<CreateVideoParams, 'type'>>) => void
setActiveVideoId: (id: string) => void
}
const logger = loggerService.withContext('VideoPanel')
export const VideoPanel = ({ provider, video, params, updateParams }: VideoPanelProps) => {
export const VideoPanel = ({ provider, video, params, updateParams, setActiveVideoId }: VideoPanelProps) => {
const { t } = useTranslation()
const addOpenAIVideo = useAddOpenAIVideo(provider.id)
const { setVideo } = useProviderVideos(provider.id)
const { pendingMap, setPending: setPendingById } = usePending()
const [isProcessing, setIsProcessing] = useState<boolean | undefined>()
const fileInputRef = useRef<HTMLInputElement>(null)
const inputReference = params.params.input_reference
@ -56,11 +58,13 @@ export const VideoPanel = ({ provider, video, params, updateParams }: VideoPanel
}
}, [updateParams, video])
const isPending = video ? pendingMap[video.id] : false
const isPending = (video ? pendingMap[video.id] : false) || isProcessing
const setPending = useCallback(
(value: boolean) => {
if (video) {
setPendingById(video.id, value ? value : undefined)
} else {
setIsProcessing(value)
}
},
[setPendingById, video]
@ -80,6 +84,7 @@ export const VideoPanel = ({ provider, video, params, updateParams }: VideoPanel
default:
logger.error(`Invalid video type ${result.type}.`)
}
setActiveVideoId(result.video.id)
} else {
// TODO: remix video
window.toast.info('Remix video is not implemented.')