This commit is contained in:
ct
2025-06-15 08:27:17 +08:00
parent f686de8f29
commit 361f630293
8 changed files with 215 additions and 72 deletions

View File

@@ -1,21 +1,38 @@
"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 { useMitt } from '@/plugins/MittContext';
import useVideoEditorStore from '@/stores/VideoEditorStore';
import { Download, Edit3, Pause, Play, Type } from 'lucide-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 { videoIsPlaying } = useVideoEditorStore();
const emitter = useMitt();
{/* <Button
const handlePlay = () => {
emitter.emit('video-play');
};
const handlePause = () => {
emitter.emit('video-pause');
};
const togglePlayPause = () => {
if (videoIsPlaying) {
handlePause();
} 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 ? <Pause 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 "
@@ -23,35 +40,25 @@ const EditorControls = ({ className = '', onEditClick = () => {}, isEditActive =
<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
variant="ghost"
size="icon"
className="w-12 h-12 rounded-full shadow-sm border "
>
<Type className="h-8 w-8 " />
</Button>
<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>
<Button
variant="ghost"
size="icon"
className="w-12 h-12 rounded-full shadow-sm border "
>
<Download className="h-8 w-8 " />
</Button>
</div>
)
}
<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;