65 lines
2.0 KiB
JavaScript
65 lines
2.0 KiB
JavaScript
'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 } 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="outline" 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 ? 'outline' : 'outline'}
|
|
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="outline" size="icon" className="h-12 w-12 rounded-full border shadow-sm">
|
|
<Download className="h-8 w-8" />
|
|
</Button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EditorControls;
|