Update

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

@@ -4,6 +4,7 @@ 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,
@@ -16,32 +17,47 @@ const VideoDownloadModal = ({
     exportStatus,
 }) => {
     const [showDebug, setShowDebug] = useState(false);
-    const [exportType, setExportType] = useState(null);
+    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 = () => {
-        setExportType('without');
+    const handleExportWithoutWatermark = async () => {
+        setIsPremiumExport(true);
         setEstimatedTimeRemaining(null);
-        setStatus('processing');
-        handleDownloadButton();
+        
+        // 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 = () => {
-        setExportType('with');
+        setIsPremiumExport(false);
         setEstimatedTimeRemaining(null);
         setStatus('processing');
         handleDownloadButton();
     };
 
-    const handleClose = () => {
+    const handleClose = async () => {
         onClose();
         setTimeout(() => {
-            setExportType(null);
+            setIsPremiumExport(false);
             setEstimatedTimeRemaining(null);
             setStatus('start');
             exportStartTime.current = null;
@@ -54,8 +70,12 @@ const VideoDownloadModal = ({
     useEffect(() => {
         if (status === 'processing' && exportProgress >= 100) {
             setStatus('complete');
+            // Call premiumExportComplete immediately when export completes
+            if (isPremiumExport) {
+                premiumExportComplete();
+            }
         }
-    }, [exportProgress, status]);
+    }, [exportProgress, status, isPremiumExport, premiumExportComplete]);
 
     // Calculate estimated time remaining based on progress speed
     useEffect(() => {
@@ -183,7 +203,7 @@ const VideoDownloadModal = ({
                                     className="h-14 w-full text-base font-medium shadow-md transition-all duration-200 hover:shadow-lg"
                                     size="lg"
                                 >
-                                    Export without watermark ({nonWatermarkVideosLeft} left)
+                                    Premium Export, no watermark ({nonWatermarkVideosLeft} left)
                                 </Button>
                             )}
                             <Button
@@ -207,14 +227,14 @@ 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">
-                                {exportType === 'without' ? (
+                                {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 {exportType === 'without' ? 'without watermark' : ''}</h3>
+                                <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.

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

@@ -689,13 +689,46 @@ const useVideoExport = ({ timelineElements, dimensions, totalDuration, watermark
             const data = new Uint8Array(fileData);
 
             const blob = new Blob([data.buffer], { type: 'video/mp4' });
-            const url = URL.createObjectURL(blob);
+            const epochTimestamp = Date.now();
+            const fileName = `memeaigen-${epochTimestamp}.mp4`;
 
-            const link = document.createElement('a');
-            link.href = url;
-            link.download = 'exported_video.mp4';
-            link.click();
-            URL.revokeObjectURL(url);
+            // 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);
+            }
 
             setExportProgress(100);
             setExportStatus('Complete!');

resources/js/modules/editor/partials/editor-header.jsx

@@ -15,7 +15,7 @@ const EditorHeader = ({ className = '', onNavClick = () => {}, isNavActive = fal
     };
 
     return (
-        <div className={cn('flex w-full items-center justify-between rounded-xl bg-white p-2 shadow-sm dark:bg-neutral-700', className)}>
+        <div className={cn('flex w-full items-center justify-between rounded-xl bg-white p-2 shadow-sm dark:bg-neutral-800', className)}>
             <Button onClick={onNavClick} variant="outline" size="icon" className="rounded">
                 <Menu className="h-8 w-8" />
             </Button>

resources/js/modules/upgrade/upgrade-sheet.jsx

@@ -122,7 +122,7 @@ const UpgradeSheet = () => {
                         <div id="stats">
                             <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                                 {/* Non-watermark Exports */}
-                                {user_usage?.non_watermark_videos_left && (
+                                {user_usage?.non_watermark_videos_left != null && (
                                     <div className="bg-card relative overflow-hidden rounded-xl border p-6 shadow-sm">
                                         <div className="relative z-10">
                                             <div className="mb-2 flex items-center gap-2">