forked from 77media/video-flow
281 lines
10 KiB
TypeScript
281 lines
10 KiB
TypeScript
"use client"
|
|
import React, { useRef, useEffect } from "react";
|
|
import "./style/work-flow.css";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { AISuggestionBar } from "@/components/ai-suggestion-bar";
|
|
import { EditModal } from "@/components/ui/edit-modal";
|
|
import { ErrorBoundary } from "@/components/ui/error-boundary";
|
|
import { TaskInfo } from "./work-flow/task-info";
|
|
import { MediaViewer } from "./work-flow/media-viewer";
|
|
import { ThumbnailGrid } from "./work-flow/thumbnail-grid";
|
|
import { useWorkflowData } from "./work-flow/use-workflow-data";
|
|
import { usePlaybackControls } from "./work-flow/use-playback-controls";
|
|
import { AlertCircle, RefreshCw } from "lucide-react";
|
|
import { motion } from "framer-motion";
|
|
|
|
export default function WorkFlow() {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const [isEditModalOpen, setIsEditModalOpen] = React.useState(false);
|
|
const [activeEditTab, setActiveEditTab] = React.useState('1');
|
|
|
|
// 使用自定义 hooks 管理状态
|
|
const {
|
|
taskObject,
|
|
taskSketch,
|
|
taskVideos,
|
|
sketchCount,
|
|
isLoading,
|
|
currentStep,
|
|
currentSketchIndex,
|
|
isGeneratingSketch,
|
|
isGeneratingVideo,
|
|
currentLoadingText,
|
|
totalSketchCount,
|
|
roles,
|
|
music,
|
|
final,
|
|
dataLoadError,
|
|
setCurrentSketchIndex,
|
|
retryLoadData,
|
|
} = useWorkflowData();
|
|
|
|
const {
|
|
isPlaying,
|
|
isVideoPlaying,
|
|
showControls,
|
|
setShowControls,
|
|
setIsPlaying,
|
|
togglePlay,
|
|
toggleVideoPlay,
|
|
playTimerRef,
|
|
} = usePlaybackControls(taskSketch, taskVideos, currentStep);
|
|
|
|
// 跟踪是否已经自动开始播放过，避免重复触发
|
|
const hasAutoStartedRef = useRef(false);
|
|
|
|
// 调试：监控关键状态变化
|
|
useEffect(() => {
|
|
console.log('工作流状态:', {
|
|
currentStep,
|
|
isGeneratingSketch,
|
|
isGeneratingVideo,
|
|
isPlaying,
|
|
taskSketchLength: taskSketch.length,
|
|
sketchCount,
|
|
totalSketchCount
|
|
});
|
|
}, [isGeneratingSketch, taskSketch.length, sketchCount, totalSketchCount, currentStep, isPlaying]);
|
|
|
|
// 专门监控isPlaying状态变化
|
|
useEffect(() => {
|
|
console.log('播放状态变化:', isPlaying ? '开始播放' : '停止播放');
|
|
}, [isPlaying]);
|
|
|
|
// 检查分镜数据
|
|
useEffect(() => {
|
|
if (taskSketch.length > 0) {
|
|
console.log('分镜数据:', `${taskSketch.length}个分镜，当前索引:${currentSketchIndex}`);
|
|
}
|
|
}, [taskSketch.length, currentSketchIndex]);
|
|
|
|
// 第一个分镜视频生成完成时停止循环播放并切换到第一个
|
|
useEffect(() => {
|
|
if (taskVideos.length === 1 && isPlaying) {
|
|
console.log('第一个分镜视频生成完成，停止循环播放并切换到第一个分镜');
|
|
setIsPlaying(false); // 停止循环播放
|
|
setCurrentSketchIndex(0); // 切换到第一个分镜
|
|
}
|
|
}, [taskVideos.length, isPlaying, setIsPlaying, setCurrentSketchIndex]);
|
|
|
|
// 分镜草图生成完毕后自动开始播放
|
|
useEffect(() => {
|
|
if (
|
|
!isGeneratingSketch && // 分镜草图生成完毕
|
|
taskSketch.length > 0 && // 有分镜草图数据
|
|
sketchCount === totalSketchCount && // 确保所有分镜草图都生成完毕
|
|
(currentStep === '1' || currentStep === '2') && // 允许在步骤1或步骤2初期触发
|
|
!hasAutoStartedRef.current && // 还没有自动开始过播放
|
|
!isPlaying // 当前没有播放
|
|
) {
|
|
console.log('所有分镜草图生成完毕，自动开始播放');
|
|
// 添加小延迟确保状态完全更新
|
|
setTimeout(() => {
|
|
hasAutoStartedRef.current = true;
|
|
setIsPlaying(true); // 自动开始播放
|
|
}, 500);
|
|
}
|
|
|
|
// 当切换到步骤3及以后时重置标记
|
|
if (Number(currentStep) >= 3) {
|
|
hasAutoStartedRef.current = false;
|
|
}
|
|
}, [isGeneratingSketch, taskSketch.length, sketchCount, totalSketchCount, currentStep, isPlaying, setIsPlaying]);
|
|
|
|
// 处理自动播放的分镜切换逻辑
|
|
useEffect(() => {
|
|
if (isPlaying && taskSketch.length > 0) {
|
|
console.log('开始自动切换分镜，总数:', taskSketch.length);
|
|
const interval = setInterval(() => {
|
|
setCurrentSketchIndex((prev: number) => {
|
|
const nextIndex = (prev + 1) % taskSketch.length;
|
|
return nextIndex;
|
|
});
|
|
}, 1000);
|
|
|
|
return () => {
|
|
clearInterval(interval);
|
|
};
|
|
}
|
|
}, [isPlaying, taskSketch.length, setCurrentSketchIndex]);
|
|
|
|
// 模拟 AI 建议 英文
|
|
const mockSuggestions = [
|
|
"Refine scene transitions",
|
|
"Adjust scene composition",
|
|
"Improve character action design",
|
|
"Add environmental atmosphere",
|
|
"Adjust lens language"
|
|
];
|
|
|
|
const handleEditModalOpen = (tab: string) => {
|
|
setActiveEditTab(tab);
|
|
setIsEditModalOpen(true);
|
|
};
|
|
|
|
const handleSuggestionClick = (suggestion: string) => {
|
|
console.log('Selected suggestion:', suggestion);
|
|
};
|
|
|
|
const handleSubmit = (text: string) => {
|
|
console.log('Submitted text:', text);
|
|
};
|
|
|
|
return (
|
|
<ErrorBoundary>
|
|
<div className="w-full h-full overflow-hidden">
|
|
<div className="flex h-full flex-col p-6 justify-center items-center pt-0">
|
|
<div className="container-H2sRZG">
|
|
<div className="splashContainer-otuV_A">
|
|
<div className="content-vPGYx8">
|
|
<div className="info-UUGkPJ">
|
|
<ErrorBoundary>
|
|
<TaskInfo
|
|
isLoading={isLoading}
|
|
taskObject={taskObject}
|
|
currentLoadingText={currentLoadingText}
|
|
dataLoadError={dataLoadError}
|
|
/>
|
|
</ErrorBoundary>
|
|
</div>
|
|
</div>
|
|
<div className="media-Ocdu1O">
|
|
<div
|
|
className="videoContainer-qteKNi"
|
|
style={currentStep !== '6' ? { flex: 3 } : {}}
|
|
ref={containerRef}
|
|
>
|
|
{dataLoadError ? (
|
|
<motion.div
|
|
className="flex flex-col items-center justify-center w-full aspect-video rounded-lg bg-red-50 border-2 border-red-200"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
<motion.div
|
|
className="flex items-center gap-3 mb-4"
|
|
initial={{ scale: 0.8 }}
|
|
animate={{ scale: 1 }}
|
|
transition={{ duration: 0.3, delay: 0.2 }}
|
|
>
|
|
<AlertCircle className="w-8 h-8 text-red-500" />
|
|
<h3 className="text-lg font-medium text-red-800">数据加载失败</h3>
|
|
</motion.div>
|
|
|
|
<p className="text-red-600 text-center mb-6 max-w-md px-4">
|
|
{dataLoadError}
|
|
</p>
|
|
|
|
<motion.button
|
|
className="flex items-center gap-2 px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
|
|
onClick={() => retryLoadData?.()}
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
<RefreshCw className="w-4 h-4" />
|
|
重试加载
|
|
</motion.button>
|
|
</motion.div>
|
|
) : isLoading ? (
|
|
<Skeleton className="w-full aspect-video rounded-lg" />
|
|
) : (
|
|
<div className="heroVideo-FIzuK1" style={{ aspectRatio: "16 / 9" }}>
|
|
<ErrorBoundary>
|
|
<MediaViewer
|
|
currentStep={currentStep}
|
|
currentSketchIndex={currentSketchIndex}
|
|
taskSketch={taskSketch}
|
|
taskVideos={taskVideos}
|
|
isVideoPlaying={isVideoPlaying}
|
|
isPlaying={isPlaying}
|
|
showControls={showControls}
|
|
isGeneratingSketch={isGeneratingSketch}
|
|
isGeneratingVideo={isGeneratingVideo}
|
|
onControlsChange={setShowControls}
|
|
onEditModalOpen={handleEditModalOpen}
|
|
onToggleVideoPlay={toggleVideoPlay}
|
|
onTogglePlay={togglePlay}
|
|
final={final}
|
|
/>
|
|
</ErrorBoundary>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="imageGrid-ymZV9z hide-scrollbar">
|
|
<ErrorBoundary>
|
|
<ThumbnailGrid
|
|
isLoading={isLoading}
|
|
currentStep={currentStep}
|
|
currentSketchIndex={currentSketchIndex}
|
|
taskSketch={taskSketch}
|
|
taskVideos={taskVideos}
|
|
isGeneratingSketch={isGeneratingSketch}
|
|
isGeneratingVideo={isGeneratingVideo}
|
|
sketchCount={sketchCount}
|
|
totalSketchCount={totalSketchCount}
|
|
onSketchSelect={setCurrentSketchIndex}
|
|
/>
|
|
</ErrorBoundary>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* AI 建议栏 */}
|
|
<ErrorBoundary>
|
|
<AISuggestionBar
|
|
suggestions={mockSuggestions}
|
|
onSuggestionClick={handleSuggestionClick}
|
|
onSubmit={handleSubmit}
|
|
placeholder="Please input your ideas, or click the predefined tags to receive AI advice..."
|
|
/>
|
|
</ErrorBoundary>
|
|
|
|
<ErrorBoundary>
|
|
<EditModal
|
|
isOpen={isEditModalOpen}
|
|
activeEditTab={activeEditTab}
|
|
onClose={() => setIsEditModalOpen(false)}
|
|
taskStatus={taskObject?.taskStatus || '1'}
|
|
taskSketch={taskSketch}
|
|
sketchVideo={taskVideos}
|
|
currentSketchIndex={currentSketchIndex}
|
|
onSketchSelect={setCurrentSketchIndex}
|
|
roles={roles}
|
|
music={music}
|
|
/>
|
|
</ErrorBoundary>
|
|
</div>
|
|
</ErrorBoundary>
|
|
)
|
|
} |