Update

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

@@ -1,57 +1,80 @@
-"use client"
+'use client';
 
-import { Button } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
-import { Play, Type, Edit3, Download } from "lucide-react"
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { Download, Edit3, Loader2, Pause, Play, Type } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 const EditorControls = ({ className = '', onEditClick = () => {}, isEditActive = false }) => {
-  return (
-    <div className={cn("flex items-center justify-center gap-2", className)}>
-      <Button
-        variant="ghost"
-        size="icon"
-        className="w-12 h-12 rounded-full shadow-sm border "
-      >
-        <Play className="h-8 w-8 " />
-          </Button>
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [isExporting, setIsExporting] = useState(false);
 
-          {/* <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> */}
+    // Listen for timeline state changes
+    useEffect(() => {
+        const checkTimelineState = () => {
+            if (window.timelineControls) {
+                setIsPlaying(window.timelineControls.isPlaying);
+                setIsExporting(window.timelineControls.isExporting);
+            }
+        };
 
+        const interval = setInterval(checkTimelineState, 100);
+        return () => clearInterval(interval);
+    }, []);
 
-      <Button
-        variant="ghost"
-        size="icon"
-        className="w-12 h-12 rounded-full shadow-sm border "
-      >
-        <Type className="h-8 w-8 " />
-      </Button>
+    const handlePlayPause = () => {
+        if (window.timelineControls) {
+            if (isPlaying) {
+                window.timelineControls.pause();
+            } else {
+                window.timelineControls.play();
+            }
+        }
+    };
 
-      <Button
-        id="edit"
-        variant={isEditActive ? "default" : "ghost"}
-        size="icon"
-        className="w-12 h-12 rounded-full shadow-sm border"
-        onClick={onEditClick}
-      >
-        <Edit3 className={`h-8 w-8 ${isEditActive ? "text-white" : ""}`} />
-      </Button>
+    const handleExport = () => {
+        if (window.timelineControls && !isExporting) {
+            window.timelineControls.export();
+        }
+    };
 
-      <Button
-        variant="ghost"
-        size="icon"
-        className="w-12 h-12 rounded-full shadow-sm border "
-      >
-        <Download className="h-8 w-8 " />
-      </Button>
-    </div>
-  )
-}
+    return (
+        <div className={cn('flex items-center justify-center gap-2', className)}>
+            <Button
+                variant="default"
+                size="icon"
+                className="h-12 w-12 rounded-full border shadow-sm"
+                onClick={handlePlayPause}
+                disabled={!window.timelineControls}
+            >
+                {isPlaying ? <Pause className="h-8 w-8" /> : <Play className="h-8 w-8" />}
+            </Button>
 
+            <Button variant="default" 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' : 'default'}
+                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="default"
+                size="icon"
+                className="h-12 w-12 rounded-full border shadow-sm"
+                onClick={handleExport}
+                disabled={isExporting || !window.timelineControls}
+            >
+                {isExporting ? <Loader2 className="h-8 w-8 animate-spin" /> : <Download className="h-8 w-8" />}
+            </Button>
+        </div>
+    );
+};
 
 export default EditorControls;