287 lines
12 KiB
JavaScript
287 lines
12 KiB
JavaScript
import { Button } from '@/components/ui/button';
|
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
|
import { Progress } from '@/components/ui/progress';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { Clock10Icon, Download, Droplets } from 'lucide-react';
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import useUserStore from '@/stores/UserStore';
|
|
|
|
const VideoDownloadModal = ({
|
|
nonWatermarkVideosLeft = 0,
|
|
isOpen,
|
|
onClose,
|
|
ffmpegCommand,
|
|
handleDownloadButton,
|
|
isExporting,
|
|
exportProgress,
|
|
exportStatus,
|
|
}) => {
|
|
const [showDebug, setShowDebug] = useState(false);
|
|
const [isPremiumExport, setIsPremiumExport] = useState(false);
|
|
const [estimatedTimeRemaining, setEstimatedTimeRemaining] = useState(null);
|
|
const [status, setStatus] = useState('start'); // 'start', 'processing', 'complete'
|
|
|
|
const exportStartTime = useRef(null);
|
|
const lastProgressTime = useRef(null);
|
|
const lastProgress = useRef(0);
|
|
|
|
const { premiumExportRequest, premiumExportComplete } = useUserStore();
|
|
|
|
const handleExportWithoutWatermark = async () => {
|
|
setIsPremiumExport(true);
|
|
setEstimatedTimeRemaining(null);
|
|
|
|
// Call premiumExportRequest and check response
|
|
const response = await premiumExportRequest();
|
|
|
|
if (response?.error) {
|
|
// Halt the process if there's an error
|
|
setIsPremiumExport(false);
|
|
return;
|
|
}
|
|
|
|
if (response?.success) {
|
|
// Continue with export if successful
|
|
setStatus('processing');
|
|
handleDownloadButton();
|
|
}
|
|
};
|
|
|
|
const handleExportWithWatermark = () => {
|
|
setIsPremiumExport(false);
|
|
setEstimatedTimeRemaining(null);
|
|
setStatus('processing');
|
|
handleDownloadButton();
|
|
};
|
|
|
|
const handleClose = async () => {
|
|
onClose();
|
|
setTimeout(() => {
|
|
setIsPremiumExport(false);
|
|
setEstimatedTimeRemaining(null);
|
|
setStatus('start');
|
|
exportStartTime.current = null;
|
|
lastProgressTime.current = null;
|
|
lastProgress.current = 0;
|
|
}, 300);
|
|
};
|
|
|
|
// Update status based on export progress - transition to complete immediately when 100%
|
|
useEffect(() => {
|
|
if (status === 'processing' && exportProgress >= 100) {
|
|
setStatus('complete');
|
|
// Call premiumExportComplete immediately when export completes
|
|
if (isPremiumExport) {
|
|
premiumExportComplete();
|
|
}
|
|
}
|
|
}, [exportProgress, status, isPremiumExport, premiumExportComplete]);
|
|
|
|
// Calculate estimated time remaining based on progress speed
|
|
useEffect(() => {
|
|
if (status !== 'processing' || exportProgress === 0) {
|
|
exportStartTime.current = null;
|
|
lastProgressTime.current = null;
|
|
lastProgress.current = 0;
|
|
setEstimatedTimeRemaining(null);
|
|
return;
|
|
}
|
|
|
|
// Clear estimate when complete
|
|
if (exportProgress >= 100) {
|
|
setEstimatedTimeRemaining(0);
|
|
return;
|
|
}
|
|
|
|
const now = Date.now();
|
|
|
|
// Initialize timing on first progress
|
|
if (!exportStartTime.current) {
|
|
exportStartTime.current = now;
|
|
lastProgress.current = exportProgress;
|
|
console.log('Initialized timing at', exportProgress + '%');
|
|
return;
|
|
}
|
|
|
|
// Calculate every time progress changes after initial 3 seconds
|
|
const timeSinceStart = now - exportStartTime.current;
|
|
const progressDelta = exportProgress - lastProgress.current;
|
|
|
|
console.log(
|
|
'Progress:',
|
|
exportProgress + '%',
|
|
'Time since start:',
|
|
Math.round(timeSinceStart / 1000) + 's',
|
|
'Progress delta:',
|
|
progressDelta + '%',
|
|
);
|
|
|
|
if (timeSinceStart > 2000 && progressDelta > 0) {
|
|
const progressRate = progressDelta / timeSinceStart; // progress per ms
|
|
const remainingProgress = 100 - exportProgress;
|
|
const estimatedMs = remainingProgress / progressRate;
|
|
const estimatedSeconds = Math.round(estimatedMs / 1000);
|
|
|
|
console.log('Progress rate:', progressRate, 'Estimated seconds:', estimatedSeconds);
|
|
|
|
if (estimatedSeconds >= 1 && estimatedSeconds <= 600) {
|
|
setEstimatedTimeRemaining(estimatedSeconds);
|
|
console.log('Set estimated time:', estimatedSeconds + 's');
|
|
} else {
|
|
console.log('Time estimate out of range:', estimatedSeconds + 's');
|
|
}
|
|
}
|
|
}, [status, exportProgress]);
|
|
|
|
const formatTimeRemaining = (seconds) => {
|
|
if (seconds < 60) {
|
|
return `~${seconds}s remaining`;
|
|
} else {
|
|
const minutes = Math.floor(seconds / 60);
|
|
const remainingSeconds = seconds % 60;
|
|
return `~${minutes}m ${remainingSeconds}s remaining`;
|
|
}
|
|
};
|
|
|
|
const exportTimes = [
|
|
{
|
|
icon: '🐇',
|
|
label: 'Modern and fast devices',
|
|
time: '1-2 mins',
|
|
},
|
|
{
|
|
icon: '🐢',
|
|
label: 'Medium range devices',
|
|
time: '3-5 mins',
|
|
},
|
|
{
|
|
icon: '🥔',
|
|
label: 'Older / potato devices',
|
|
time: '>5 mins',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={status !== 'processing' ? onClose : undefined}>
|
|
<DialogContent
|
|
className="border-2 shadow-2xl sm:max-w-lg [&>button]:hidden"
|
|
onInteractOutside={(e) => status === 'processing' && e.preventDefault()}
|
|
onEscapeKeyDown={(e) => status === 'processing' && e.preventDefault()}
|
|
>
|
|
<DialogHeader className="space-y-4">
|
|
<DialogTitle className="text-2xl font-semibold tracking-tight">Export Video</DialogTitle>
|
|
<DialogDescription className="hidden text-base leading-relaxed"></DialogDescription>
|
|
</DialogHeader>
|
|
|
|
{status === 'start' && (
|
|
<div className="space-y-4">
|
|
<div className="bg-muted/30 rounded-xl border p-6">
|
|
<div className="flex items-start gap-3">
|
|
<div className="space-y-3">
|
|
<p className="flex items-center gap-1 font-medium">
|
|
<Clock10Icon className="h-4 w-4" /> Estimated export time
|
|
</p>
|
|
<div className="text-muted-foreground space-y-2 text-sm">
|
|
{exportTimes.map((exportTime, index) => (
|
|
<div key={index} className="grid items-center justify-between sm:flex sm:gap-3">
|
|
<div className="grid items-center text-base sm:flex sm:gap-1">
|
|
<span className="text-2xl sm:text-base">{exportTime.icon}</span>
|
|
<span>{exportTime.label}</span>
|
|
</div>
|
|
<span className="font-mono text-xs sm:text-base">{exportTime.time}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
{nonWatermarkVideosLeft > 0 && (
|
|
<Button
|
|
onClick={handleExportWithoutWatermark}
|
|
className="h-14 w-full text-base font-medium shadow-md transition-all duration-200 hover:shadow-lg"
|
|
size="lg"
|
|
>
|
|
Premium Export, no watermark ({nonWatermarkVideosLeft} left)
|
|
</Button>
|
|
)}
|
|
<Button
|
|
onClick={handleExportWithWatermark}
|
|
variant="outline"
|
|
className="hover:bg-muted/50 h-14 w-full border-2 bg-transparent text-base font-medium transition-all duration-200"
|
|
size="lg"
|
|
>
|
|
Export
|
|
</Button>
|
|
<Button variant="link" onClick={handleClose} className="h-8 w-full">
|
|
Close
|
|
</Button>
|
|
</div>
|
|
|
|
{showDebug && <Textarea value={ffmpegCommand} readOnly className="mb-4" />}
|
|
</div>
|
|
)}
|
|
|
|
{status === 'processing' && (
|
|
<div className="space-y-8 py-4">
|
|
<div className="space-y-4 text-center">
|
|
<div className="bg-muted mx-auto flex h-16 w-16 items-center justify-center rounded-full">
|
|
{isPremiumExport ? (
|
|
<Download className="h-8 w-8 animate-pulse" />
|
|
) : (
|
|
<Droplets className="h-8 w-8 animate-pulse" />
|
|
)}
|
|
</div>
|
|
<div className="space-y-2">
|
|
<h3 className="text-xl font-semibold">Exporting {isPremiumExport ? 'without watermark' : ''}</h3>
|
|
|
|
<p className="text-muted-foreground text-sm text-wrap">
|
|
Please do not close this window while the export is in progress.
|
|
</p>
|
|
{exportStatus && <p className="text-muted-foreground text-sm text-wrap">{exportStatus}</p>}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium">Progress</span>
|
|
<span className="font-mono text-sm font-semibold">{Math.round(exportProgress)}%</span>
|
|
</div>
|
|
<Progress value={exportProgress} className="h-3" />
|
|
{estimatedTimeRemaining != null ? (
|
|
<div className="text-center">
|
|
<span className="text-muted-foreground text-xs">{formatTimeRemaining(estimatedTimeRemaining)}</span>
|
|
</div>
|
|
) : (
|
|
exportProgress > 5 && (
|
|
<div className="text-center">
|
|
<span className="text-muted-foreground text-xs">Calculating time remaining...</span>
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{status === 'complete' && (
|
|
<div className="space-y-6 py-8 text-center">
|
|
<div className="bg-muted mx-auto flex h-16 w-16 items-center justify-center rounded-full">
|
|
<Download className="h-8 w-8" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<h3 className="text-xl font-semibold">Export Complete!</h3>
|
|
<p className="text-muted-foreground text-sm">Your video has been successfully exported.</p>
|
|
</div>
|
|
<Button variant="outline" onClick={handleClose} className="w-full" size="lg">
|
|
Close
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default VideoDownloadModal;
|