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 17:51:10 +08:00
parent f183d1ff13
commit 35c7c0bebd
3 changed files with 110 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,11 @@
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, Droplets } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';
import useUserStore from '@/stores/UserStore';
const VideoDownloadModal = ({
nonWatermarkVideosLeft = 0,
@@ -15,11 +16,14 @@ const VideoDownloadModal = ({
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 exportStartTime = useRef(null);
const lastProgressTime = useRef(null);
@@ -27,6 +31,66 @@ const VideoDownloadModal = ({
const { premiumExportRequest, premiumExportComplete } = 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);
@@ -227,11 +291,7 @@ 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" />
)}
{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>
@@ -273,10 +333,37 @@ const VideoDownloadModal = ({
<h3 className="text-xl font-semibold">Export Complete!</h3>
<p className="text-muted-foreground text-sm">Your video has been successfully exported.</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="w-4 h-4 mr-2" />
Downloading
</>
)}
{downloadState === 'downloaded' && (
<>
<Download className="mr-2 h-5 w-5" />
Downloaded!
</>
)}
{downloadState === 'idle' && (
<>
<Download className="mr-2 h-5 w-5" />
Download Video
</>
)}
</Button>
<Button variant="outline" onClick={handleClose} className="w-full" size="lg">
Close
</Button>
</div>
</div>
)}
</DialogContent>
</Dialog>

4
resources/js/modules/editor/partials/canvas/video-editor.jsx
View File

@@ -216,7 +216,7 @@ const VideoEditor = ({ width, height, onOpenTextSidebar }) => {
const totalDuration = Math.max(...timelineElements.map((el) => el.startTime + el.duration));
const { isExporting, exportProgress, exportStatus, ffmpegCommand, copyFFmpegCommand, exportVideo } = useVideoExport({
const { isExporting, exportProgress, exportStatus, ffmpegCommand, copyFFmpegCommand, exportVideo, videoBlob, videoBlobFilename } = useVideoExport({
timelineElements,
dimensions,
totalDuration,
@@ -620,6 +620,8 @@ const VideoEditor = ({ width, height, onOpenTextSidebar }) => {
isExporting={isExporting}
exportProgress={exportProgress}
exportStatus={exportStatus}
videoBlob={videoBlob}
videoBlobFilename={videoBlobFilename}
/>
</>
);

44
resources/js/modules/editor/partials/canvas/video-export.jsx
View File

@@ -13,6 +13,8 @@ const useVideoExport = ({ timelineElements, dimensions, totalDuration, watermark
const [isExporting, setIsExporting] = useState(false);
const [exportProgress, setExportProgress] = useState(0);
const [exportStatus, setExportStatus] = useState('');
const [videoBlob, setVideoBlob] = useState(null);
const [videoBlobFilename, setVideoBlobFilename] = useState(null);
useEffect(() => {
console.log(JSON.stringify(timelineElements));
@@ -692,43 +694,9 @@ const useVideoExport = ({ timelineElements, dimensions, totalDuration, watermark
const epochTimestamp = Date.now();
const fileName = `memeaigen-${epochTimestamp}.mp4`;
// 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([blob], fileName, { 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(blob);
const link = document.createElement('a');
link.href = url;
link.download = fileName;
link.click();
URL.revokeObjectURL(url);
}
} catch (shareError) {
console.log('Share failed, falling back to download:', shareError);
// Fallback to download
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = fileName;
link.click();
URL.revokeObjectURL(url);
}
} else {
// Desktop or unsupported mobile - use download
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = fileName;
link.click();
URL.revokeObjectURL(url);
}
// Store the blob and filename in state instead of auto-downloading
setVideoBlob(blob);
setVideoBlobFilename(fileName);
setExportProgress(100);
setExportStatus('Complete!');
@@ -763,6 +731,8 @@ const useVideoExport = ({ timelineElements, dimensions, totalDuration, watermark
exportProgress,
exportStatus,
ffmpegCommand,
videoBlob,
videoBlobFilename,
// Functions
copyFFmpegCommand,