Update

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

@@ -0,0 +1,64 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { useMitt } from '@/plugins/MittContext';
+import useVideoEditorStore from '@/stores/VideoEditorStore';
+import { Download, Edit3, Play, Square, Type } from 'lucide-react';
+
+const EditorControls = ({ className = '', onEditClick = () => {}, isEditActive = false }) => {
+    const { videoIsPlaying } = useVideoEditorStore();
+    const emitter = useMitt();
+
+    const handlePlay = () => {
+        emitter.emit('video-play');
+    };
+
+    const handleReset = () => {
+        emitter.emit('video-reset');
+    };
+
+    const togglePlayPause = () => {
+        if (videoIsPlaying) {
+            handleReset();
+        } else {
+            handlePlay();
+        }
+    };
+
+    return (
+        <div className={cn('flex items-center justify-center gap-2', className)}>
+            <Button onClick={togglePlayPause} variant="ghost" size="icon" className="h-12 w-12 rounded-full border shadow-sm">
+                {videoIsPlaying ? <Square className="h-8 w-8" /> : <Play className="h-8 w-8" />}
+            </Button>
+
+            {/* <Button
+        variant="ghost"
+        size="icon"
+        className="w-12 h-12 rounded-full shadow-sm border "
+      >
+         <span className="text-sm font-medium ">9:16</span>
+      </Button> */}
+
+            <Button variant="ghost" size="icon" className="h-12 w-12 rounded-full border shadow-sm">
+                <Type className="h-8 w-8" />
+            </Button>
+
+            <Button
+                id="edit"
+                variant={isEditActive ? 'default' : 'ghost'}
+                size="icon"
+                className="h-12 w-12 rounded-full border shadow-sm"
+                onClick={onEditClick}
+            >
+                <Edit3 className={`h-8 w-8 ${isEditActive ? 'text-white' : ''}`} />
+            </Button>
+
+            <Button variant="ghost" size="icon" className="h-12 w-12 rounded-full border shadow-sm">
+                <Download className="h-8 w-8" />
+            </Button>
+        </div>
+    );
+};
+
+export default EditorControls;