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 { useSearchParams } from "next/navigation";
|
||||||
import SmartChatBox from "@/components/SmartChatBox/SmartChatBox";
|
import SmartChatBox from "@/components/SmartChatBox/SmartChatBox";
|
||||||
import { Drawer } from 'antd';
|
import { Drawer } from 'antd';
|
||||||
|
import { AIEditingIconButton } from './work-flow/ai-editing-button';
|
||||||
|
|
||||||
const WorkFlow = React.memo(function WorkFlow() {
|
const WorkFlow = React.memo(function WorkFlow() {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -29,6 +30,7 @@ const WorkFlow = React.memo(function WorkFlow() {
|
|||||||
const [previewVideoUrl, setPreviewVideoUrl] = React.useState<string | null>(null);
|
const [previewVideoUrl, setPreviewVideoUrl] = React.useState<string | null>(null);
|
||||||
const [previewVideoId, setPreviewVideoId] = React.useState<string | null>(null);
|
const [previewVideoId, setPreviewVideoId] = React.useState<string | null>(null);
|
||||||
const [isFocusChatInput, setIsFocusChatInput] = React.useState(false);
|
const [isFocusChatInput, setIsFocusChatInput] = React.useState(false);
|
||||||
|
const [aiEditingInProgress, setAiEditingInProgress] = React.useState(false);
|
||||||
|
|
||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
const episodeId = searchParams.get('episodeId') || '';
|
const episodeId = searchParams.get('episodeId') || '';
|
||||||
@ -78,6 +80,28 @@ const WorkFlow = React.memo(function WorkFlow() {
|
|||||||
setIsEditModalOpen(true);
|
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 (
|
return (
|
||||||
<ErrorBoundary>
|
<ErrorBoundary>
|
||||||
<div className="w-full overflow-hidden h-[calc(100vh-5rem)] absolute top-[4rem] left-0 right-0 px-[1rem]">
|
<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">
|
<div className="absolute right-12 bottom-32 z-[49] flex gap-4">
|
||||||
<GlassIconButton
|
<GlassIconButton
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user