forked from 77media/video-flow
feat: 添加AI剪辑功能到工作流页面
- 新增AIEditingIconButton组件引用 - 添加AI剪辑进度状态管理 - 实现AI剪辑完成和错误处理回调 - 在视频阶段显示AI剪辑按钮
This commit is contained in:
parent
e2d16d0f10
commit
6555eb35a6
@ -16,6 +16,7 @@ import { SaveEditUseCase } from "@/app/service/usecase/SaveEditUseCase";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import SmartChatBox from "@/components/SmartChatBox/SmartChatBox";
|
||||
import { Drawer } from 'antd';
|
||||
import { AIEditingIconButton } from './work-flow/ai-editing-button';
|
||||
|
||||
const WorkFlow = React.memo(function WorkFlow() {
|
||||
useEffect(() => {
|
||||
@ -29,6 +30,7 @@ const WorkFlow = React.memo(function WorkFlow() {
|
||||
const [previewVideoUrl, setPreviewVideoUrl] = React.useState<string | null>(null);
|
||||
const [previewVideoId, setPreviewVideoId] = React.useState<string | null>(null);
|
||||
const [isFocusChatInput, setIsFocusChatInput] = React.useState(false);
|
||||
const [aiEditingInProgress, setAiEditingInProgress] = React.useState(false);
|
||||
|
||||
const searchParams = useSearchParams();
|
||||
const episodeId = searchParams.get('episodeId') || '';
|
||||
@ -78,6 +80,28 @@ const WorkFlow = React.memo(function WorkFlow() {
|
||||
setIsEditModalOpen(true);
|
||||
}, []);
|
||||
|
||||
// AI剪辑回调函数
|
||||
const handleAIEditingComplete = useCallback((finalVideoUrl: string) => {
|
||||
console.log('🎉 AI剪辑完成,最终视频URL:', finalVideoUrl);
|
||||
|
||||
// 更新任务对象的最终视频状态
|
||||
setAnyAttribute('final', {
|
||||
url: finalVideoUrl,
|
||||
note: 'ai_edited'
|
||||
});
|
||||
|
||||
// 切换到最终视频阶段
|
||||
setAnyAttribute('currentStage', 'final_video');
|
||||
|
||||
setAiEditingInProgress(false);
|
||||
}, [setAnyAttribute]);
|
||||
|
||||
const handleAIEditingError = useCallback((error: string) => {
|
||||
console.error('❌ AI剪辑失败:', error);
|
||||
// 这里可以显示错误提示
|
||||
setAiEditingInProgress(false);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<div className="w-full overflow-hidden h-[calc(100vh-5rem)] absolute top-[4rem] left-0 right-0 px-[1rem]">
|
||||
@ -194,6 +218,22 @@ const WorkFlow = React.memo(function WorkFlow() {
|
||||
)
|
||||
}
|
||||
|
||||
{/* AI剪辑按钮 - 当有视频片段时显示 */}
|
||||
{
|
||||
(taskObject.currentStage === 'video' && taskObject.videos.data.length > 0) && (
|
||||
<div className="absolute right-12 bottom-48 z-[49] flex gap-4">
|
||||
<AIEditingIconButton
|
||||
projectId={episodeId}
|
||||
taskObject={taskObject}
|
||||
size="md"
|
||||
disabled={aiEditingInProgress || isPauseWorkFlow}
|
||||
onComplete={handleAIEditingComplete}
|
||||
onError={handleAIEditingError}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
{/* 智能对话按钮 */}
|
||||
<div className="absolute right-12 bottom-32 z-[49] flex gap-4">
|
||||
<GlassIconButton
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user