403 lines
17 KiB
JavaScript
403 lines
17 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 { Spinner } from '@/components/ui/spinner.js';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import useUserStore from '@/stores/UserStore';
|
|
import { Clock10Icon, Download } from 'lucide-react';
|
|
import { useEffect, useRef, useState } from 'react';
|
|
|
|
const VideoDownloadModal = ({
|
|
nonWatermarkVideosLeft = 0,
|
|
isOpen,
|
|
onClose,
|
|
ffmpegCommand,
|
|
handleDownloadButton,
|
|
isExporting,
|
|
exportProgress,
|
|
exportStatus,
|
|
videoBlob,
|
|
videoBlobFilename,
|
|
}) => {
|
|
const [showDebug, setShowDebug] = useState(false);
|
|
const [isPremiumExport, setIsPremiumExport] = useState(false);
|
|
const [estimatedTimeRemaining, setEstimatedTimeRemaining] = useState(null);
|
|
const [status, setStatus] = useState('start'); // 'start', 'processing', 'complete'
|
|
const [downloadState, setDownloadState] = useState('idle'); // 'idle', 'downloading', 'downloaded'
|
|
const [exportToken, setExportToken] = useState(null);
|
|
|
|
const exportStartTime = useRef(null);
|
|
const lastProgressTime = useRef(null);
|
|
const lastProgress = useRef(0);
|
|
|
|
const { premiumExportRequest, premiumExportComplete, basicExportRequest, basicExportComplete } = useUserStore();
|
|
|
|
const handleShareOrDownload = async () => {
|
|
if (!videoBlob || !videoBlobFilename) {
|
|
console.error('No video blob available for sharing/download');
|
|
return;
|
|
}
|
|
|
|
setDownloadState('downloading');
|
|
|
|
try {
|
|
// Check if mobile and supports navigator.share
|
|
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
|
|
const canShare = isMobile && navigator.share && navigator.canShare;
|
|
|
|
if (canShare) {
|
|
try {
|
|
const files = [new File([videoBlob], videoBlobFilename, { type: 'video/mp4' })];
|
|
if (navigator.canShare({ files })) {
|
|
await navigator.share({ files });
|
|
} else {
|
|
// Fallback to download if sharing files isn't supported
|
|
const url = URL.createObjectURL(videoBlob);
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = videoBlobFilename;
|
|
link.click();
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
} catch (shareError) {
|
|
console.log('Share failed, falling back to download:', shareError);
|
|
// Fallback to download
|
|
const url = URL.createObjectURL(videoBlob);
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = videoBlobFilename;
|
|
link.click();
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
} else {
|
|
// Desktop or unsupported mobile - use download
|
|
const url = URL.createObjectURL(videoBlob);
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = videoBlobFilename;
|
|
link.click();
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
// Set to downloaded state
|
|
setDownloadState('downloaded');
|
|
|
|
// Reset to idle after 1.5 seconds
|
|
setTimeout(() => {
|
|
setDownloadState('idle');
|
|
}, 1500);
|
|
} catch (error) {
|
|
console.error('Download/share failed:', error);
|
|
setDownloadState('idle');
|
|
}
|
|
};
|
|
|
|
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) {
|
|
// Store the export token
|
|
const token = response.success.data.export_token;
|
|
console.log('Received export token:', token);
|
|
setExportToken(token);
|
|
// Continue with export if successful
|
|
setStatus('processing');
|
|
handleDownloadButton();
|
|
}
|
|
};
|
|
|
|
const handleExportWithWatermark = async () => {
|
|
setIsPremiumExport(false);
|
|
setEstimatedTimeRemaining(null);
|
|
|
|
// Call basicExportRequest and check response
|
|
const response = await basicExportRequest();
|
|
|
|
if (response?.error) {
|
|
// Halt the process if there's an error
|
|
setIsPremiumExport(false);
|
|
return;
|
|
}
|
|
|
|
if (response?.success) {
|
|
// Store the export token
|
|
const token = response.success.data.export_token;
|
|
console.log('Received basic export token:', token);
|
|
setExportToken(token);
|
|
// Continue with export if successful
|
|
setStatus('processing');
|
|
handleDownloadButton();
|
|
}
|
|
};
|
|
|
|
const handleClose = async () => {
|
|
onClose();
|
|
setTimeout(() => {
|
|
setIsPremiumExport(false);
|
|
setEstimatedTimeRemaining(null);
|
|
setStatus('start');
|
|
setExportToken(null);
|
|
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 appropriate export complete method based on export type
|
|
if (isPremiumExport && exportToken) {
|
|
console.log('Calling premiumExportComplete with token:', exportToken);
|
|
premiumExportComplete(exportToken);
|
|
} else if (!isPremiumExport && exportToken) {
|
|
console.log('Calling basicExportComplete with token:', exportToken);
|
|
basicExportComplete(exportToken);
|
|
} else if (!exportToken) {
|
|
console.error('Export completed but no token available');
|
|
}
|
|
}
|
|
}, [exportProgress, status, isPremiumExport, exportToken, premiumExportComplete, basicExportComplete]);
|
|
|
|
// 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="flex items-center justify-between gap-3">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-lg">{exportTime.icon}</span>
|
|
<span className="text-sm">{exportTime.label}</span>
|
|
</div>
|
|
<span className="font-mono text-sm font-medium">{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">
|
|
<Download className="h-8 w-8 animate-pulse" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<h3 className="text-xl font-semibold">Exporting...</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 != null && (
|
|
<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">Done!</h3>
|
|
<p className="text-muted-foreground text-sm">Your video is now ready.</p>
|
|
</div>
|
|
<div className="space-y-3">
|
|
<Button
|
|
onClick={handleShareOrDownload}
|
|
disabled={downloadState !== 'idle'}
|
|
className="h-14 w-full text-base font-medium shadow-md transition-all duration-200 hover:shadow-lg"
|
|
size="lg"
|
|
>
|
|
{downloadState === 'downloading' && (
|
|
<>
|
|
<Spinner className="mr-2 h-4 w-4" />
|
|
Saving
|
|
</>
|
|
)}
|
|
{downloadState === 'downloaded' && (
|
|
<>
|
|
<Download className="mr-2 h-5 w-5" />
|
|
Saved!
|
|
</>
|
|
)}
|
|
{downloadState === 'idle' && (
|
|
<>
|
|
<Download className="mr-2 h-5 w-5" />
|
|
Save Video
|
|
</>
|
|
)}
|
|
</Button>
|
|
<Button variant="outline" onClick={handleClose} className="w-full" size="lg">
|
|
Close
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default VideoDownloadModal;
|