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>

14
resources/js/stores/UserStore.js
View File

@@ -68,6 +68,10 @@ const useUserStore = create(
});
}
if (response?.data?.success?.message) {
toast.success(response.data.success.message);
}
if (response?.data?.error?.message) {
toast.error(response.data.error.message);
}
@@ -78,9 +82,11 @@ const useUserStore = create(
}
},
premiumExportComplete: async () => {
premiumExportComplete: async (exportToken) => {
try {
const response = await axiosInstance.post(route('api.user.premium_export.complete'));
const response = await axiosInstance.post(route('api.user.premium_export.complete'), {
export_token: exportToken,
});
if (response?.data?.success?.data?.user_usage) {
set({
@@ -88,6 +94,10 @@ const useUserStore = create(
});
}
if (response?.data?.success?.message) {
toast.success(response.data.success.message);
}
if (response?.data?.error?.message) {
toast.error(response.data.error.message);
}