81 lines
2.6 KiB
JavaScript
81 lines
2.6 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, Play, Square, SquarePen } 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 handleDownloadButton = () => {
|
|
emitter.emit('video-open-download-modal');
|
|
};
|
|
|
|
const handleAIButton = () => {
|
|
emitter.emit('open-ai-editor-sheet');
|
|
};
|
|
|
|
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
|
|
id="edit"
|
|
variant={isEditActive ? 'outline' : 'outline'}
|
|
size="icon"
|
|
className="h-12 w-12 rounded-full border shadow-sm"
|
|
onClick={onEditClick}
|
|
>
|
|
<SquarePen className={`h-8 w-8 ${isEditActive ? 'text-white' : ''}`} />
|
|
</Button>
|
|
|
|
<Button onClick={handleDownloadButton} variant="outline" size="icon" className="h-12 w-12 rounded-full border shadow-sm">
|
|
<Download className="h-8 w-8" />
|
|
</Button>
|
|
|
|
{/* <Button variant="outline" size="icon" className="h-12 w-12 rounded-full border shadow-sm">
|
|
<Share2 className="h-8 w-8" />
|
|
</Button> */}
|
|
|
|
{/* <Button onClick={handleAIButton} variant="outline" size="icon" className="font-display h-12 w-12 rounded-full border font-bold shadow-sm">
|
|
AI
|
|
</Button> */}
|
|
|
|
{/* <Button variant="outline" size="icon" className="h-12 w-12 rounded-full border shadow-sm">
|
|
<GraduationCap className="h-8 w-8" />
|
|
</Button> */}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EditorControls;
|