charlestehio/memefast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
ct
2025-07-03 20:05:53 +08:00
parent 35c7c0bebd
commit 3d7b3c428b
6 changed files with 233 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
resources/js/modules/editor/partials/canvas/video-download/video-download-modal.jsx
View File

@@ -4,7 +4,7 @@ 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, Droplets } from 'lucide-react';
import { Clock10Icon, Download } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';
const VideoDownloadModal = ({
@@ -24,6 +24,7 @@ const VideoDownloadModal = ({
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);
@@ -105,6 +106,10 @@ const VideoDownloadModal = ({
}
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();
@@ -124,6 +129,7 @@ const VideoDownloadModal = ({
setIsPremiumExport(false);
setEstimatedTimeRemaining(null);
setStatus('start');
setExportToken(null);
exportStartTime.current = null;
lastProgressTime.current = null;
lastProgress.current = 0;
@@ -135,11 +141,14 @@ const VideoDownloadModal = ({
if (status === 'processing' && exportProgress >= 100) {
setStatus('complete');
// Call premiumExportComplete immediately when export completes
if (isPremiumExport) {
premiumExportComplete();
if (isPremiumExport && exportToken) {
console.log('Calling premiumExportComplete with token:', exportToken);
premiumExportComplete(exportToken);
} else if (isPremiumExport && !exportToken) {
console.error('Premium export completed but no token available');
}
}
}, [exportProgress, status, isPremiumExport, premiumExportComplete]);
}, [exportProgress, status, isPremiumExport, exportToken, premiumExportComplete]);
// Calculate estimated time remaining based on progress speed
useEffect(() => {
@@ -291,10 +300,10 @@ const VideoDownloadModal = ({
<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" />}
<Download className="h-8 w-8 animate-pulse" />
</div>
<div className="space-y-2">
<h3 className="text-xl font-semibold">Exporting {isPremiumExport ? 'without watermark' : ''}</h3>
<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.
@@ -314,7 +323,7 @@ const VideoDownloadModal = ({
<span className="text-muted-foreground text-xs">{formatTimeRemaining(estimatedTimeRemaining)}</span>
</div>
) : (
exportProgress > 5 && (
exportProgress != null && (
<div className="text-center">
<span className="text-muted-foreground text-xs">Calculating time remaining...</span>
</div>
@@ -330,8 +339,8 @@ const VideoDownloadModal = ({
<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>
<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
@@ -342,20 +351,20 @@ const VideoDownloadModal = ({
>
{downloadState === 'downloading' && (
<>
<Spinner className="w-4 h-4 mr-2" />
Downloading
<Spinner className="mr-2 h-4 w-4" />
Saving
</>
)}
{downloadState === 'downloaded' && (
<>
<Download className="mr-2 h-5 w-5" />
Downloaded!
Saved!
</>
)}
{downloadState === 'idle' && (
<>
<Download className="mr-2 h-5 w-5" />
Download Video
Save Video
</>
)}
</Button>