Update

resources/js/modules/editor/editor.jsx

@@ -0,0 +1,185 @@
+import { useEffect, useLayoutEffect, useState } from 'react';
+
+import useLocalSettingsStore from '@/stores/localSettingsStore';
+import useMediaStore from '@/stores/MediaStore';
+import EditNavSidebar from './partials/edit-nav-sidebar';
+import EditSidebar from './partials/edit-sidebar';
+import EditorCanvas from './partials/editor-canvas';
+import EditorControls from './partials/editor-controls';
+import EditorHeader from './partials/editor-header';
+import { calculateOptimalMaxWidth, calculateResponsiveWidth } from './utils/layout-constants';
+
+// Hook to detect if viewport is below minimum width
+const useViewportDetection = (minWidth = 320) => {
+    const [isBelowMinWidth, setIsBelowMinWidth] = useState(false);
+
+    useLayoutEffect(() => {
+        setIsBelowMinWidth(window.innerWidth < minWidth);
+    }, [minWidth]);
+
+    useEffect(() => {
+        const checkViewport = () => {
+            setIsBelowMinWidth(window.innerWidth < minWidth);
+        };
+
+        checkViewport();
+        window.addEventListener('resize', checkViewport);
+        window.addEventListener('orientationchange', checkViewport);
+
+        let resizeObserver;
+        if (window.ResizeObserver) {
+            resizeObserver = new ResizeObserver(checkViewport);
+            resizeObserver.observe(document.body);
+        }
+
+        return () => {
+            window.removeEventListener('resize', checkViewport);
+            window.removeEventListener('orientationchange', checkViewport);
+            if (resizeObserver) resizeObserver.disconnect();
+        };
+    }, [minWidth]);
+
+    return isBelowMinWidth;
+};
+
+// Hook for responsive dimensions
+const useResponsiveDimensions = () => {
+    const [dimensions, setDimensions] = useState(() => ({
+        maxWidth: calculateOptimalMaxWidth(),
+        responsiveWidth: calculateResponsiveWidth(),
+    }));
+
+    useLayoutEffect(() => {
+        const newMaxWidth = calculateOptimalMaxWidth();
+        const newResponsiveWidth = calculateResponsiveWidth();
+        setDimensions({
+            maxWidth: newMaxWidth,
+            responsiveWidth: newResponsiveWidth,
+        });
+    }, []);
+
+    useEffect(() => {
+        const handleResize = () => {
+            const newMaxWidth = calculateOptimalMaxWidth();
+            const newResponsiveWidth = calculateResponsiveWidth();
+            setDimensions({
+                maxWidth: newMaxWidth,
+                responsiveWidth: newResponsiveWidth,
+            });
+        };
+
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('orientationchange', handleResize);
+
+        let resizeObserver;
+        if (window.ResizeObserver) {
+            resizeObserver = new ResizeObserver(handleResize);
+            resizeObserver.observe(document.body);
+        }
+
+        let mutationObserver;
+        if (window.MutationObserver) {
+            mutationObserver = new MutationObserver(() => {
+                setTimeout(handleResize, 50);
+            });
+            mutationObserver.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ['style'],
+            });
+        }
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('orientationchange', handleResize);
+            if (resizeObserver) resizeObserver.disconnect();
+            if (mutationObserver) mutationObserver.disconnect();
+        };
+    }, []);
+
+    return dimensions;
+};
+
+const Editor = () => {
+    const { init } = useMediaStore();
+
+    const { getSetting } = useLocalSettingsStore();
+
+    const [isEditNavSidebarOpen, setIsEditNavSidebarOpen] = useState(false);
+    const [isEditSidebarOpen, setIsEditSidebarOpen] = useState(false);
+    const [isMuted, setIsMuted] = useState(true); // Video starts muted by default
+    const { maxWidth, responsiveWidth } = useResponsiveDimensions();
+    const isBelowMinWidth = useViewportDetection(320);
+
+    useEffect(() => {
+        init();
+    }, []);
+
+    const handleEditNavClick = () => {
+        setIsEditNavSidebarOpen(!isEditNavSidebarOpen);
+    };
+
+    const handleEditNavClose = () => {
+        setIsEditNavSidebarOpen(false);
+    };
+
+    const handleEditClick = () => {
+        setIsEditSidebarOpen(!isEditSidebarOpen);
+    };
+
+    const handleEditClose = () => {
+        setIsEditSidebarOpen(false);
+    };
+
+    // Toggle mute functionality
+    const handleToggleMute = () => {
+        setIsMuted(!isMuted);
+    };
+
+    return (
+        <div className="relative mx-auto flex min-h-screen flex-col space-y-2 py-4" style={{ width: `${responsiveWidth}px` }}>
+            <EditSidebar isOpen={isEditSidebarOpen} onClose={handleEditClose} />
+            <EditNavSidebar isOpen={isEditNavSidebarOpen} onClose={handleEditNavClose} />
+
+            <EditorHeader
+                className="mx-auto"
+                style={{ width: `${responsiveWidth}px` }}
+                onNavClick={handleEditNavClick}
+                isNavActive={isEditNavSidebarOpen}
+            />
+
+            {isBelowMinWidth ? (
+                <div className="aspect-[9/16]">
+                    <div className="flex h-full flex-1 items-center justify-center rounded-lg border bg-white p-6 shadow-lg dark:bg-neutral-900">
+                        <div className="space-y-3">
+                            <div>
+                                <div className="relative mb-3 flex justify-center">
+                                    <img width="180" height="180" src="https://cdn.memeaigen.com/landing/dancing-potato.gif"></img>
+                                </div>
+
+                                <div className="w-full space-y-2 text-center">
+                                    <p className="text-muted-foreground text-sm leading-relaxed">
+                                        {getSetting('genAlphaSlang')
+                                            ? 'Not gonna lie, using on a potato screen is giving L vibes. Desktop hits different - that experience is straight fire, bet!'
+                                            : 'You seem to be using a potato-sized screen. Please continue with desktop for a more refined experience!'}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            ) : (
+                <>
+                    <EditorCanvas maxWidth={maxWidth} />
+                    <EditorControls
+                        className="mx-auto"
+                        style={{ width: `${responsiveWidth}px` }}
+                        onEditClick={handleEditClick}
+                        isEditActive={isEditSidebarOpen}
+                    />
+                </>
+            )}
+        </div>
+    );
+};
+
+export default Editor;