Update

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

@@ -3,6 +3,7 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } f
 import { Progress } from '@/components/ui/progress';
 import { Spinner } from '@/components/ui/spinner.js';
 import { Textarea } from '@/components/ui/textarea';
+import useMediaStore from '@/stores/MediaStore';
 import useUserStore from '@/stores/UserStore';
 import { Clock10Icon, Download } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
@@ -18,6 +19,9 @@ const VideoDownloadModal = ({
     exportStatus,
     videoBlob,
     videoBlobFilename,
+    selectedMeme,
+    selectedBackground,
+    currentCaption,
 }) => {
     const [showDebug, setShowDebug] = useState(false);
     const [isPremiumExport, setIsPremiumExport] = useState(false);
@@ -31,6 +35,7 @@ const VideoDownloadModal = ({
     const lastProgress = useRef(0);
 
     const { premiumExportRequest, premiumExportComplete, basicExportRequest, basicExportComplete } = useUserStore();
+    const { saveMeme } = useMediaStore();
 
     const handleShareOrDownload = async () => {
         if (!videoBlob || !videoBlobFilename) {
@@ -40,6 +45,10 @@ const VideoDownloadModal = ({
 
         setDownloadState('downloading');
 
+        // Track the save action before actual download/share
+        const captionTexts = currentCaption ? [currentCaption] : ['Default caption'];
+        await saveMeme(captionTexts, isPremiumExport);
+
         try {
             // Check if mobile and supports navigator.share
             const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
@@ -96,8 +105,13 @@ const VideoDownloadModal = ({
         setIsPremiumExport(true);
         setEstimatedTimeRemaining(null);
 
+        // Prepare export data
+        const memeMediaIds = selectedMeme?.ids || null;
+        const backgroundMediaIds = selectedBackground?.ids || null;
+        const captionTexts = currentCaption ? [currentCaption] : ['Default caption'];
+
         // Call premiumExportRequest and check response
-        const response = await premiumExportRequest();
+        const response = await premiumExportRequest(memeMediaIds, backgroundMediaIds, captionTexts);
 
         if (response?.error) {
             // Halt the process if there's an error
@@ -120,8 +134,23 @@ const VideoDownloadModal = ({
         setIsPremiumExport(false);
         setEstimatedTimeRemaining(null);
 
+        // Prepare export data
+        const memeMediaIds = selectedMeme?.ids || null;
+        const backgroundMediaIds = selectedBackground?.ids || null;
+        const captionTexts = currentCaption ? [currentCaption] : ['Default caption'];
+
+        // Debug logging
+        console.log('Export data:', {
+            selectedMeme,
+            selectedBackground,
+            currentCaption,
+            memeMediaIds,
+            backgroundMediaIds,
+            captionTexts
+        });
+
         // Call basicExportRequest and check response
-        const response = await basicExportRequest();
+        const response = await basicExportRequest(memeMediaIds, backgroundMediaIds, captionTexts);
 
         if (response?.error) {
             // Halt the process if there's an error

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

@@ -622,6 +622,9 @@ const VideoEditor = ({ width, height, onOpenTextSidebar }) => {
                 exportStatus={exportStatus}
                 videoBlob={videoBlob}
                 videoBlobFilename={videoBlobFilename}
+                selectedMeme={selectedMeme}
+                selectedBackground={selectedBackground}
+                currentCaption={currentCaption}
             />
         </>
     );

resources/js/stores/MediaStore.js

@@ -30,12 +30,26 @@ const useMediaStore = create(
         },
 
         // Selection actions
-        selectMeme: (meme) => {
+        selectMeme: async (meme) => {
             set({ selectedMeme: meme });
+            try {
+                await axiosInstance.post(route('api.app.select.meme'), {
+                    meme_ids: meme.ids,
+                });
+            } catch (error) {
+                console.error('Error meme selection:', error);
+            }
         },
 
-        selectBackground: (background) => {
+        selectBackground: async (background) => {
             set({ selectedBackground: background });
+            try {
+                await axiosInstance.post(route('api.app.select.background'), {
+                    background_ids: background.ids,
+                });
+            } catch (error) {
+                console.error('Error background selection:', error);
+            }
         },
 
         // Update current caption when user edits text
@@ -52,6 +66,23 @@ const useMediaStore = create(
             set({ selectedBackground: null });
         },
 
+        // Save meme action
+        saveMeme: async (captionTexts, isPremiumExport = false) => {
+            try {
+                const { selectedMeme, selectedBackground } = get();
+                
+                await axiosInstance.post(route('api.app.save.meme'), {
+                    meme_media_ids: selectedMeme?.ids || null,
+                    background_media_ids: selectedBackground?.ids || null,
+                    caption_texts: captionTexts,
+                    is_premium_export: isPremiumExport,
+                });
+            } catch (error) {
+                console.error('Error saving meme:', error);
+                // Silently ignore save tracking errors
+            }
+        },
+
         // Fetch AI hints
         fetchAIHints: async () => {
             set({ isLoadingAIHints: true });

resources/js/stores/UserStore.js

@@ -58,9 +58,13 @@ const useUserStore = create(
             }
         },
 
-        premiumExportRequest: async () => {
+        premiumExportRequest: async (memeMediaIds, backgroundMediaIds, captionTexts) => {
             try {
-                const response = await axiosInstance.post(route('api.user.premium_export.request'));
+                const response = await axiosInstance.post(route('api.user.premium_export.request'), {
+                    meme_media_ids: memeMediaIds,
+                    background_media_ids: backgroundMediaIds,
+                    caption_texts: captionTexts,
+                });
 
                 if (response?.data?.success?.data?.user_usage) {
                     set({
@@ -109,9 +113,13 @@ const useUserStore = create(
             }
         },
 
-        basicExportRequest: async () => {
+        basicExportRequest: async (memeMediaIds, backgroundMediaIds, captionTexts) => {
             try {
-                const response = await axiosInstance.post(route('api.basic_export.request'));
+                const response = await axiosInstance.post(route('api.basic_export.request'), {
+                    meme_media_ids: memeMediaIds,
+                    background_media_ids: backgroundMediaIds,
+                    caption_texts: captionTexts,
+                });
 
                 if (response?.data?.success?.message) {
                     toast.success(response.data.success.message);