Update

resources/js/stores/AdminVideoTimelineStore.js

@@ -1,37 +0,0 @@
-import axios from 'axios';
-import { toast } from 'sonner';
-import { route } from 'ziggy-js';
-import { create } from 'zustand';
-
-const useAdminVideoTimelineStore = create((set) => ({
-    videoTimelines: [],
-    isLoadingVideoTimelines: false,
-
-    getVideoTimelines: async (uuid) => {
-        try {
-            set({ isLoadingVideoTimelines: true });
-
-            const response = await axios.get(route('render.elements.get', { uuid }));
-
-            // Just set the elements directly without any mapping
-            set({
-                videoTimelines: response.data.success.data.video_elements || [],
-                isLoadingVideoTimelines: false,
-            });
-
-            return response.data.success.data.video_elements || [];
-        } catch (error) {
-            set({ isLoadingVideoTimelines: false });
-
-            if (axios.isAxiosError(error) && error.response?.data?.error?.message) {
-                toast(error.response.data.error.message);
-            } else {
-                toast('Failed to load video timeline');
-            }
-
-            return [];
-        }
-    },
-}));
-
-export default useAdminVideoTimelineStore;

resources/js/stores/MediaStore.ts

@@ -0,0 +1,93 @@
+import axiosInstance from '@/plugins/axios-plugin';
+import { mountStoreDevtool } from 'simple-zustand-devtools';
+import { toast } from 'sonner';
+import { route } from 'ziggy-js';
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+
+const useMediaStore = create(
+    devtools((set, get) => ({
+
+        currentTab: 'memes',
+
+        memes: [],
+        backgrounds: [],
+        isFetchingMemes: false,
+        isFetchingBackgrounds: false,
+
+        setCurrentTab: (tab) => {
+            set({ currentTab: tab });
+        },
+
+        // Fetch memes (overlays)
+        fetchMemes: async () => {
+            set({ isFetchingMemes: true });
+            try {
+                const response = await axiosInstance.post(route('api.app.memes'));
+
+                if (response?.data?.success?.data?.memes) {
+                    set({
+                        memes: response.data.success.data.memes,
+                        isFetchingMemes: false,
+                    });
+                    return response.data.success.data.memes;
+                } else {
+                    throw 'Invalid API response';
+                }
+            } catch (error) {
+                console.error('Error fetching memes:', error);
+                set({ isFetchingMemes: false });
+                if (error?.response?.data?.error?.message?.length > 0) {
+                    toast.error(error.response.data.error.message);
+                }
+                throw error;
+            }
+        },
+
+        // Fetch backgrounds
+        fetchBackgrounds: async () => {
+            set({ isFetchingBackgrounds: true });
+            try {
+                const response = await axiosInstance.post(route('api.app.background'));
+
+                if (response?.data?.success?.data?.backgrounds) {
+                    set({
+                        backgrounds: response.data.success.data.backgrounds,
+                        isFetchingBackgrounds: false,
+                    });
+                    return response.data.success.data.backgrounds;
+                } else {
+                    throw 'Invalid API response';
+                }
+            } catch (error) {
+                console.error('Error fetching backgrounds:', error);
+                set({ isFetchingBackgrounds: false });
+                if (error?.response?.data?.error?.message?.length > 0) {
+                    toast.error(error.response.data.error.message);
+                }
+                throw error;
+            }
+        },
+
+        // Reset store to default state
+        restoreMemeStateToDefault: () => {
+            console.log('restoreMemeStateToDefault');
+            set({
+                memes: [],
+                backgrounds: [],
+                isFetchingMemes: false,
+                isFetchingBackgrounds: false,
+            });
+        },
+    })),
+    {
+        name: 'MemeStore',
+        store: 'MemeStore',
+    },
+);
+
+if (import.meta.env.APP_ENV === 'local') {
+    mountStoreDevtool('MediaStore', useMediaStore);
+}
+
+export default useMediaStore;

resources/js/stores/localSettingsStore.ts

@@ -77,4 +77,8 @@ const useLocalSettingsStore = create(
   )
 );
 
+if (import.meta.env.APP_ENV === "local") {
+    mountStoreDevtool("LocalSettingsStore", useLocalSettingsStore);
+}
+
 export default useLocalSettingsStore;