forked from 77media/video-flow
267 lines
9.5 KiB
TypeScript
267 lines
9.5 KiB
TypeScript
"use client"
|
|
import React, { useRef, useEffect, useCallback } from "react";
|
|
import "./style/work-flow.css";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { EditModal } from "@/components/ui/edit-modal";
|
|
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, Pause, Play, ChevronLast, MessageSquareText } from "lucide-react";
|
|
import { motion } from "framer-motion";
|
|
import { GlassIconButton } from '@/components/ui/glass-icon-button';
|
|
import { SaveEditUseCase } from "@/app/service/usecase/SaveEditUseCase";
|
|
import { useSearchParams } from "next/navigation";
|
|
import SmartChatBox from "@/components/SmartChatBox/SmartChatBox";
|
|
import { Drawer } from 'antd';
|
|
|
|
const WorkFlow = React.memo(function WorkFlow() {
|
|
useEffect(() => {
|
|
console.log("init-WorkFlow");
|
|
return () => console.log("unmount-WorkFlow");
|
|
}, []);
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const [isEditModalOpen, setIsEditModalOpen] = React.useState(false);
|
|
const [activeEditTab, setActiveEditTab] = React.useState('1');
|
|
const [isSmartChatBoxOpen, setIsSmartChatBoxOpen] = React.useState(true);
|
|
const [previewVideoUrl, setPreviewVideoUrl] = React.useState<string | null>(null);
|
|
const [previewVideoId, setPreviewVideoId] = React.useState<string | null>(null);
|
|
const [isFocusChatInput, setIsFocusChatInput] = React.useState(false);
|
|
|
|
const searchParams = useSearchParams();
|
|
const episodeId = searchParams.get('episodeId') || '';
|
|
|
|
const userId = JSON.parse(localStorage.getItem("currentUser") || '{}').id || NaN;
|
|
|
|
SaveEditUseCase.setProjectId(episodeId);
|
|
// 使用自定义 hooks 管理状态
|
|
const {
|
|
taskObject,
|
|
scriptData,
|
|
isLoading,
|
|
currentSketchIndex,
|
|
currentLoadingText,
|
|
dataLoadError,
|
|
setCurrentSketchIndex,
|
|
retryLoadData,
|
|
isPauseWorkFlow,
|
|
mode,
|
|
setIsPauseWorkFlow,
|
|
setAnyAttribute,
|
|
applyScript,
|
|
fallbackToStep,
|
|
originalText,
|
|
showGotoCutButton,
|
|
generateEditPlan
|
|
} = useWorkflowData();
|
|
|
|
const {
|
|
isVideoPlaying,
|
|
toggleVideoPlay,
|
|
} = usePlaybackControls(taskObject.videos.data, taskObject.currentStage);
|
|
|
|
useEffect(() => {
|
|
console.log('changedIndex_work-flow', currentSketchIndex, taskObject);
|
|
}, [currentSketchIndex]);
|
|
|
|
// 模拟 AI 建议 英文
|
|
const mockSuggestions = [
|
|
"Refine scene transitions",
|
|
"Adjust scene composition",
|
|
"Improve character action design",
|
|
"Add environmental atmosphere",
|
|
"Adjust lens language"
|
|
];
|
|
|
|
const handleEditModalOpen = useCallback((tab: string) => {
|
|
setActiveEditTab(tab);
|
|
setIsEditModalOpen(true);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="w-full overflow-hidden h-full px-[1rem] pb-[1rem]">
|
|
<div className="w-full h-full">
|
|
<div className="splashContainer-otuV_A">
|
|
<div className="content-vPGYx8">
|
|
<div className="info-UUGkPJ">
|
|
<TaskInfo
|
|
taskObject={taskObject}
|
|
currentLoadingText={currentLoadingText}
|
|
roles={taskObject.roles.data}
|
|
isPauseWorkFlow={isPauseWorkFlow}
|
|
showGotoCutButton={showGotoCutButton}
|
|
onGotoCut={generateEditPlan}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="media-Ocdu1O rounded-lg">
|
|
<div
|
|
className="videoContainer-qteKNi"
|
|
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 ${['final_video', 'script'].includes(taskObject.currentStage) ? 'h-[calc(100vh-6rem)] w-[calc((100vh-6rem)/9*16)]' : 'h-[calc(100vh-6rem-200px)] w-[calc((100vh-6rem-200px)/9*16)]'}`} style={{ aspectRatio: "16 / 9" }} key={taskObject.currentStage+'_'+currentSketchIndex}>
|
|
<MediaViewer
|
|
taskObject={taskObject}
|
|
scriptData={scriptData}
|
|
currentSketchIndex={currentSketchIndex}
|
|
isVideoPlaying={isVideoPlaying}
|
|
onEditModalOpen={handleEditModalOpen}
|
|
onToggleVideoPlay={toggleVideoPlay}
|
|
setIsPauseWorkFlow={setIsPauseWorkFlow}
|
|
setAnyAttribute={setAnyAttribute}
|
|
isPauseWorkFlow={isPauseWorkFlow}
|
|
applyScript={applyScript}
|
|
mode={mode}
|
|
onOpenChat={() => setIsSmartChatBoxOpen(true)}
|
|
setVideoPreview={(url, id) => {
|
|
setPreviewVideoUrl(url);
|
|
setPreviewVideoId(id);
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{taskObject.currentStage !== 'final_video' && taskObject.currentStage !== 'script' && (
|
|
<div className="h-[123px] w-[calc((100vh-6rem-200px)/9*16)]">
|
|
<ThumbnailGrid
|
|
isDisabledFocus={isEditModalOpen || isPauseWorkFlow || isFocusChatInput}
|
|
taskObject={taskObject}
|
|
currentSketchIndex={currentSketchIndex}
|
|
onSketchSelect={setCurrentSketchIndex}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 暂停/播放按钮 */}
|
|
{
|
|
(taskObject.currentStage !== 'final_video') && (
|
|
<div className="absolute right-12 bottom-16 z-[49] flex gap-4">
|
|
<GlassIconButton
|
|
icon={isPauseWorkFlow ? Play : Pause}
|
|
size='md'
|
|
tooltip={isPauseWorkFlow ? "Play" : "Pause"}
|
|
onClick={() => setIsPauseWorkFlow(!isPauseWorkFlow)}
|
|
/>
|
|
{ !mode.includes('auto') && (
|
|
<GlassIconButton
|
|
icon={ChevronLast}
|
|
size='md'
|
|
tooltip="Next"
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
{/* 智能对话按钮 */}
|
|
<div className="absolute right-12 bottom-32 z-[49] flex gap-4">
|
|
<GlassIconButton
|
|
icon={MessageSquareText}
|
|
size='md'
|
|
tooltip={"Chat"}
|
|
onClick={() => setIsSmartChatBoxOpen(true)}
|
|
/>
|
|
</div>
|
|
|
|
{/* 智能对话弹窗 */}
|
|
<Drawer
|
|
width="25%"
|
|
placement="right"
|
|
closable={false}
|
|
maskClosable={false}
|
|
open={isSmartChatBoxOpen}
|
|
getContainer={false}
|
|
autoFocus={false}
|
|
mask={false}
|
|
zIndex={49}
|
|
rootClassName="outline-none"
|
|
className="backdrop-blur-lg bg-black/30 border border-white/20 shadow-xl"
|
|
style={{
|
|
backgroundColor: 'transparent',
|
|
borderBottomLeftRadius: 10,
|
|
borderTopLeftRadius: 10,
|
|
overflow: 'hidden',
|
|
}}
|
|
styles={{
|
|
body: {
|
|
backgroundColor: 'transparent',
|
|
padding: 0,
|
|
},
|
|
}}
|
|
onClose={() => setIsSmartChatBoxOpen(false)}
|
|
>
|
|
<SmartChatBox
|
|
isSmartChatBoxOpen={isSmartChatBoxOpen}
|
|
setIsSmartChatBoxOpen={setIsSmartChatBoxOpen}
|
|
projectId={episodeId}
|
|
userId={userId}
|
|
previewVideoUrl={previewVideoUrl}
|
|
previewVideoId={previewVideoId}
|
|
setIsFocusChatInput={setIsFocusChatInput}
|
|
onClearPreview={() => {
|
|
setPreviewVideoUrl(null);
|
|
setPreviewVideoId(null);
|
|
}}
|
|
/>
|
|
</Drawer>
|
|
|
|
<EditModal
|
|
isOpen={isEditModalOpen}
|
|
activeEditTab={activeEditTab}
|
|
onClose={() => {
|
|
SaveEditUseCase.clearData();
|
|
setIsEditModalOpen(false)
|
|
}}
|
|
taskObject={taskObject}
|
|
currentSketchIndex={currentSketchIndex}
|
|
roles={taskObject.roles.data}
|
|
setIsPauseWorkFlow={setIsPauseWorkFlow}
|
|
isPauseWorkFlow={isPauseWorkFlow}
|
|
fallbackToStep={fallbackToStep}
|
|
originalText={originalText}
|
|
/>
|
|
</div>
|
|
)
|
|
});
|
|
|
|
export default WorkFlow;
|