forked from 77media/video-flow
81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from 'react';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Progress } from '@/components/ui/progress';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import {
|
|
ArrowLeft,
|
|
ArrowRight,
|
|
FileText,
|
|
Users,
|
|
Film,
|
|
Music,
|
|
Video,
|
|
CheckCircle,
|
|
} from 'lucide-react';
|
|
import { InputScriptStep } from '@/components/workflow/input-script-step';
|
|
import { GenerateChaptersStep } from '@/components/workflow/generate-chapters-step';
|
|
import { GenerateShotsStep } from '@/components/workflow/generate-shots-step';
|
|
import { AddMusicStep } from '@/components/workflow/add-music-step';
|
|
import { FinalCompositionStep } from '@/components/workflow/final-composition-step';
|
|
|
|
const steps = [
|
|
{ id: 1, name: 'Input Script', icon: FileText, description: 'Enter your script and settings' },
|
|
{ id: 2, name: 'Generate Chapters', icon: Users, description: 'AI splits script and assigns actors' },
|
|
{ id: 3, name: 'Generate Shots', icon: Film, description: 'Create storyboard and scenes' },
|
|
{ id: 4, name: 'Add Music', icon: Music, description: 'Background music and audio' },
|
|
{ id: 5, name: 'Final Video', icon: Video, description: 'Compose and export video' },
|
|
];
|
|
|
|
export function CreateVideoWorkflow() {
|
|
const [currentStep, setCurrentStep] = useState(1);
|
|
const [completedSteps, setCompletedSteps] = useState<number[]>([]);
|
|
|
|
const handleNext = () => {
|
|
if (currentStep < steps.length) {
|
|
setCompletedSteps([...completedSteps, currentStep]);
|
|
setCurrentStep(currentStep + 1);
|
|
}
|
|
};
|
|
|
|
const handlePrevious = () => {
|
|
if (currentStep > 1) {
|
|
setCurrentStep(currentStep - 1);
|
|
}
|
|
};
|
|
|
|
const handleStepClick = (stepId: number) => {
|
|
if (stepId <= currentStep || completedSteps.includes(stepId)) {
|
|
setCurrentStep(stepId);
|
|
}
|
|
};
|
|
|
|
const renderStepContent = () => {
|
|
switch (currentStep) {
|
|
case 1:
|
|
return <InputScriptStep onNext={handleNext} />;
|
|
case 2:
|
|
return <GenerateChaptersStep onNext={handleNext} onPrevious={handlePrevious} />;
|
|
case 3:
|
|
return <GenerateShotsStep onNext={handleNext} onPrevious={handlePrevious} />;
|
|
case 4:
|
|
return <AddMusicStep onNext={handleNext} onPrevious={handlePrevious} />;
|
|
case 5:
|
|
return <FinalCompositionStep onPrevious={handlePrevious} />;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-6xl mx-auto space-y-8">
|
|
{/* Step Content */}
|
|
<div>
|
|
{renderStepContent()}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |