forked from 77media/video-flow
127 lines
4.7 KiB
TypeScript
127 lines
4.7 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { Loader2 } from 'lucide-react';
|
|
|
|
interface ScriptLoadingProps {
|
|
/** When true, progress snaps to 100% */
|
|
isCompleted?: boolean;
|
|
/** Estimated total duration in ms to reach ~95% (default 80s) */
|
|
estimatedMs?: number;
|
|
}
|
|
|
|
/**
|
|
* Dark-themed loading with spinner, staged copy and progress bar.
|
|
* Progress linearly approaches 95% over estimatedMs, then snaps to 100% if isCompleted=true.
|
|
*/
|
|
export const ScriptLoading: React.FC<ScriptLoadingProps> = ({ isCompleted = false, estimatedMs = 80000 }) => {
|
|
const [progress, setProgress] = useState<number>(0);
|
|
const intervalRef = useRef<NodeJS.Timeout | null>(null);
|
|
|
|
const targetWhenPending = 95; // cap before data arrives
|
|
const tickMs = 200; // update cadence
|
|
|
|
// staged messages by progress
|
|
const stageMessage = useMemo(() => {
|
|
if (progress >= 100) return 'Done';
|
|
if (progress >= 95) return 'Almost done, please wait...';
|
|
if (progress >= 82) return 'Generating script and prompt...';
|
|
if (progress >= 63) return 'Polishing dialogue and transitions...';
|
|
if (progress >= 45) return 'Arranging shots and rhythm...';
|
|
if (progress >= 28) return 'Shaping characters and scene details...';
|
|
if (progress >= 12) return 'Outlining the story...';
|
|
return 'Waking up the creative engine...';
|
|
}, [progress]);
|
|
|
|
// progress auto-increment
|
|
useEffect(() => {
|
|
const desiredTarget = isCompleted ? 100 : targetWhenPending;
|
|
|
|
// when completed, quickly animate to 100
|
|
if (isCompleted) {
|
|
setProgress((prev) => (prev < 100 ? Math.max(prev, 96) : 100));
|
|
}
|
|
|
|
if (intervalRef.current) clearInterval(intervalRef.current);
|
|
|
|
// compute linear increment to reach target in remaining estimated time
|
|
const totalTicks = Math.ceil(estimatedMs / tickMs);
|
|
const baseIncrement = (targetWhenPending - 0) / Math.max(totalTicks, 1);
|
|
|
|
intervalRef.current = setInterval(() => {
|
|
setProgress((prev) => {
|
|
const target = isCompleted ? 100 : desiredTarget;
|
|
if (prev >= target) return prev;
|
|
const remaining = target - prev;
|
|
const step = Math.max(Math.min(baseIncrement, remaining * 0.25), 0.2);
|
|
const next = Math.min(prev + step, target);
|
|
return Number(next.toFixed(2));
|
|
});
|
|
}, tickMs);
|
|
|
|
return () => {
|
|
if (intervalRef.current) clearInterval(intervalRef.current);
|
|
};
|
|
}, [isCompleted, estimatedMs]);
|
|
|
|
const widthStyle = { width: `${Math.min(progress, 100)}%` };
|
|
|
|
return (
|
|
<div data-alt="script-loading-container" className="flex w-full h-full items-center justify-center">
|
|
<div data-alt="loading-stack" className="flex w-full h-full flex-col items-center justify-center gap-6 px-4">
|
|
{/* subtle animated halo */}
|
|
{/* <div data-alt="spinner-wrapper" className="relative">
|
|
<motion.div
|
|
className="absolute inset-0 rounded-full blur-2xl"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.8 }}
|
|
style={{
|
|
background: 'conic-gradient(from 0deg, rgba(139,92,246,0.25), rgba(34,211,238,0.25), rgba(139,92,246,0.25))',
|
|
width: 120,
|
|
height: 120
|
|
}}
|
|
/>
|
|
<div className="relative flex items-center justify-center">
|
|
<Loader2 className="h-10 w-10 text-cyan-300 animate-spin" />
|
|
</div>
|
|
</div> */}
|
|
|
|
<AnimatePresence mode="wait">
|
|
<motion.div
|
|
key={stageMessage}
|
|
data-alt="loading-message"
|
|
initial={{ opacity: 0, y: 6 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -6 }}
|
|
transition={{ duration: 0.25 }}
|
|
className="text-center text-base md:text-lg text-white/90"
|
|
>
|
|
{stageMessage}
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
|
|
<div data-alt="progress-wrapper" className="w-full max-w-xl">
|
|
<div className="h-2 w-full rounded-full bg-white/10 overflow-hidden">
|
|
<motion.div
|
|
data-alt="progress-bar"
|
|
className="h-full rounded-full bg-gradient-to-r from-indigo-400 via-cyan-300 to-indigo-400"
|
|
animate={widthStyle}
|
|
transition={{ type: 'tween', ease: 'easeOut', duration: 0.25 }}
|
|
/>
|
|
</div>
|
|
<div className="mt-2 flex items-center justify-between text-xs text-white/60">
|
|
<span data-alt="progress-label">Generating Script...</span>
|
|
<span data-alt="progress-percent">{Math.round(progress)}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ScriptLoading;
|
|
|
|
|