81 lines
2.7 KiB
TypeScript
81 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
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 }) => {
|
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
const [isExporting, setIsExporting] = useState(false);
|
|
|
|
// 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);
|
|
}, []);
|
|
|
|
const handlePlayPause = () => {
|
|
if (window.timelineControls) {
|
|
if (isPlaying) {
|
|
window.timelineControls.pause();
|
|
} else {
|
|
window.timelineControls.play();
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleExport = () => {
|
|
if (window.timelineControls && !isExporting) {
|
|
window.timelineControls.export();
|
|
}
|
|
};
|
|
|
|
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;
|