diff options
Diffstat (limited to 'apps/web/src/components/editor')
8 files changed, 226 insertions, 92 deletions
diff --git a/apps/web/src/components/editor/media-panel/index.tsx b/apps/web/src/components/editor/media-panel/index.tsx index 2c743618..359612f8 100644 --- a/apps/web/src/components/editor/media-panel/index.tsx +++ b/apps/web/src/components/editor/media-panel/index.tsx @@ -46,9 +46,9 @@ export function MediaPanel() { }; return ( - <div className="h-full flex flex-col bg-panel rounded-sm overflow-hidden"> + <div className="h-full flex flex-col bg-panel rounded-sm"> <TabBar /> - <div className="flex-1">{viewMap[activeTab]}</div> + <div className="flex-1 overflow-y-auto">{viewMap[activeTab]}</div> </div> ); } diff --git a/apps/web/src/components/editor/media-panel/views/media.tsx b/apps/web/src/components/editor/media-panel/views/media.tsx index 66d0d00d..f218dc14 100644 --- a/apps/web/src/components/editor/media-panel/views/media.tsx +++ b/apps/web/src/components/editor/media-panel/views/media.tsx @@ -25,6 +25,7 @@ import { import { DraggableMediaItem } from "@/components/ui/draggable-item"; import { useProjectStore } from "@/stores/project-store"; import { useTimelineStore } from "@/stores/timeline-store"; +import { ScrollArea } from "@/components/ui/scroll-area"; export function MediaView() { const { mediaItems, addMediaItem, removeMediaItem } = useMediaStore(); @@ -204,7 +205,7 @@ export function MediaView() { className={`h-full flex flex-col gap-1 transition-colors relative ${isDragOver ? "bg-accent/30" : ""}`} {...dragProps} > - <div className="p-3 pb-2"> + <div className="p-3 pb-2 bg-panel"> {/* Search and filter controls */} <div className="flex gap-2"> <Select value={mediaFilter} onValueChange={setMediaFilter}> @@ -241,57 +242,59 @@ export function MediaView() { </div> </div> - <div className="flex-1 overflow-y-auto p-3 pt-0"> - {isDragOver || filteredMediaItems.length === 0 ? ( - <MediaDragOverlay - isVisible={true} - isProcessing={isProcessing} - progress={progress} - onClick={handleFileSelect} - isEmptyState={filteredMediaItems.length === 0 && !isDragOver} - /> - ) : ( - <div - className="grid gap-2" - style={{ - gridTemplateColumns: "repeat(auto-fill, 160px)", - }} - > - {/* Render each media item as a draggable button */} - {filteredMediaItems.map((item) => ( - <ContextMenu key={item.id}> - <ContextMenuTrigger> - <DraggableMediaItem - name={item.name} - preview={renderPreview(item)} - dragData={{ - id: item.id, - type: item.type, - name: item.name, - }} - showPlusOnDrag={false} - onAddToTimeline={(currentTime) => - useTimelineStore - .getState() - .addMediaAtTime(item, currentTime) - } - rounded={false} - /> - </ContextMenuTrigger> - <ContextMenuContent> - <ContextMenuItem>Export clips</ContextMenuItem> - <ContextMenuItem - variant="destructive" - onClick={(e) => handleRemove(e, item.id)} - > - Delete - </ContextMenuItem> - </ContextMenuContent> - </ContextMenu> - ))} - </div> - )} - </div> + <ScrollArea className="h-full"> + <div className="flex-1 p-3 pt-0"> + {isDragOver || filteredMediaItems.length === 0 ? ( + <MediaDragOverlay + isVisible={true} + isProcessing={isProcessing} + progress={progress} + onClick={handleFileSelect} + isEmptyState={filteredMediaItems.length === 0 && !isDragOver} + /> + ) : ( + <div + className="grid gap-2" + style={{ + gridTemplateColumns: "repeat(auto-fill, 160px)", + }} + > + {/* Render each media item as a draggable button */} + {filteredMediaItems.map((item) => ( + <ContextMenu key={item.id}> + <ContextMenuTrigger> + <DraggableMediaItem + name={item.name} + preview={renderPreview(item)} + dragData={{ + id: item.id, + type: item.type, + name: item.name, + }} + showPlusOnDrag={false} + onAddToTimeline={(currentTime) => + useTimelineStore + .getState() + .addMediaAtTime(item, currentTime) + } + rounded={false} + /> + </ContextMenuTrigger> + <ContextMenuContent> + <ContextMenuItem>Export clips</ContextMenuItem> + <ContextMenuItem + variant="destructive" + onClick={(e) => handleRemove(e, item.id)} + > + Delete + </ContextMenuItem> + </ContextMenuContent> + </ContextMenu> + ))} + </div> + )} + </div> + </ScrollArea> </div> </> ); diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx index f09e8462..639858d0 100644 --- a/apps/web/src/components/editor/preview-panel.tsx +++ b/apps/web/src/components/editor/preview-panel.tsx @@ -23,6 +23,7 @@ import { formatTimeCode } from "@/lib/time"; import { FONT_CLASS_MAP } from "@/lib/font-config"; import { BackgroundSettings } from "../background-settings"; import { useProjectStore } from "@/stores/project-store"; +import { TextElementDragState } from "@/types/editor"; interface ActiveElement { element: TimelineElement; @@ -31,7 +32,7 @@ interface ActiveElement { } export function PreviewPanel() { - const { tracks, getTotalDuration } = useTimelineStore(); + const { tracks, getTotalDuration, updateTextElement } = useTimelineStore(); const { mediaItems } = useMediaStore(); const { currentTime, toggle, setCurrentTime, isPlaying } = usePlaybackStore(); const { canvasSize } = useEditorStore(); @@ -43,6 +44,19 @@ export function PreviewPanel() { }); const [isExpanded, setIsExpanded] = useState(false); const { activeProject } = useProjectStore(); + const [dragState, setDragState] = useState<TextElementDragState>({ + isDragging: false, + elementId: null, + trackId: null, + startX: 0, + startY: 0, + initialElementX: 0, + initialElementY: 0, + currentX: 0, + currentY: 0, + elementWidth: 0, + elementHeight: 0, + }); useEffect(() => { const updatePreviewSize = () => { @@ -129,6 +143,86 @@ export function PreviewPanel() { }; }, [isExpanded]); + useEffect(() => { + const handleMouseMove = (e: MouseEvent) => { + if (!dragState.isDragging) return; + + const deltaX = e.clientX - dragState.startX; + const deltaY = e.clientY - dragState.startY; + + const scaleRatio = previewDimensions.width / canvasSize.width; + const newX = dragState.initialElementX + deltaX / scaleRatio; + const newY = dragState.initialElementY + deltaY / scaleRatio; + + const halfWidth = dragState.elementWidth / scaleRatio / 2; + const halfHeight = dragState.elementHeight / scaleRatio / 2; + + const constrainedX = Math.max( + -canvasSize.width / 2 + halfWidth, + Math.min(canvasSize.width / 2 - halfWidth, newX) + ); + const constrainedY = Math.max( + -canvasSize.height / 2 + halfHeight, + Math.min(canvasSize.height / 2 - halfHeight, newY) + ); + + setDragState((prev) => ({ + ...prev, + currentX: constrainedX, + currentY: constrainedY, + })); + }; + + const handleMouseUp = () => { + if (dragState.isDragging && dragState.trackId && dragState.elementId) { + updateTextElement(dragState.trackId, dragState.elementId, { + x: dragState.currentX, + y: dragState.currentY, + }); + } + setDragState((prev) => ({ ...prev, isDragging: false })); + }; + + if (dragState.isDragging) { + document.addEventListener("mousemove", handleMouseMove); + document.addEventListener("mouseup", handleMouseUp); + document.body.style.cursor = "grabbing"; + document.body.style.userSelect = "none"; + } + + return () => { + document.removeEventListener("mousemove", handleMouseMove); + document.removeEventListener("mouseup", handleMouseUp); + document.body.style.cursor = ""; + document.body.style.userSelect = ""; + }; + }, [dragState, previewDimensions, canvasSize, updateTextElement]); + + const handleTextMouseDown = ( + e: React.MouseEvent<HTMLDivElement>, + element: any, + trackId: string + ) => { + e.preventDefault(); + e.stopPropagation(); + + const rect = e.currentTarget.getBoundingClientRect(); + + setDragState({ + isDragging: true, + elementId: element.id, + trackId: trackId, + startX: e.clientX, + startY: e.clientY, + initialElementX: element.x, + initialElementY: element.y, + currentX: element.x, + currentY: element.y, + elementWidth: rect.width, + elementHeight: rect.height, + }); + }; + const toggleExpanded = useCallback(() => { setIsExpanded((prev) => !prev); }, []); @@ -256,10 +350,13 @@ export function PreviewPanel() { return ( <div key={element.id} - className="absolute flex items-center justify-center" + className="absolute flex items-center justify-center cursor-grab" + onMouseDown={(e) => + handleTextMouseDown(e, element, elementData.track.id) + } style={{ - left: `${50 + (element.x / canvasSize.width) * 100}%`, - top: `${50 + (element.y / canvasSize.height) * 100}%`, + left: `${50 + ((dragState.isDragging && dragState.elementId === element.id ? dragState.currentX : element.x) / canvasSize.width) * 100}%`, + top: `${50 + ((dragState.isDragging && dragState.elementId === element.id ? dragState.currentY : element.y) / canvasSize.height) * 100}%`, transform: `translate(-50%, -50%) rotate(${element.rotation}deg) scale(${scaleRatio})`, opacity: element.opacity, zIndex: 100 + index, // Text elements on top diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx index 4fc5d89d..720c4a26 100644 --- a/apps/web/src/components/editor/properties-panel/index.tsx +++ b/apps/web/src/components/editor/properties-panel/index.tsx @@ -1,14 +1,12 @@ "use client"; -import { useProjectStore } from "@/stores/project-store"; +import { FPS_PRESETS } from "@/constants/timeline-constants"; import { useAspectRatio } from "@/hooks/use-aspect-ratio"; +import { useMediaStore } from "@/stores/media-store"; +import { useProjectStore } from "@/stores/project-store"; +import { useTimelineStore } from "@/stores/timeline-store"; import { Label } from "../../ui/label"; import { ScrollArea } from "../../ui/scroll-area"; -import { useTimelineStore } from "@/stores/timeline-store"; -import { useMediaStore } from "@/stores/media-store"; -import { AudioProperties } from "./audio-properties"; -import { MediaProperties } from "./media-properties"; -import { TextProperties } from "./text-properties"; import { Select, SelectContent, @@ -16,7 +14,14 @@ import { SelectTrigger, SelectValue, } from "../../ui/select"; -import { FPS_PRESETS } from "@/constants/timeline-constants"; +import { AudioProperties } from "./audio-properties"; +import { MediaProperties } from "./media-properties"; +import { + PropertyItem, + PropertyItemLabel, + PropertyItemValue, +} from "./property-item"; +import { TextProperties } from "./text-properties"; export function PropertiesPanel() { const { activeProject, updateProjectFps } = useProjectStore(); @@ -35,13 +40,31 @@ export function PropertiesPanel() { <div className="space-y-4 p-5"> {/* Media Properties */} <div className="flex flex-col gap-3"> - <PropertyItem label="Name:" value={activeProject?.name || ""} /> - <PropertyItem label="Aspect ratio:" value={getDisplayName()} /> - <PropertyItem - label="Resolution:" - value={`${canvasSize.width} × ${canvasSize.height}`} - /> - <div className="flex justify-between items-center"> + <PropertyItem direction="column"> + <PropertyItemLabel className="text-xs text-muted-foreground"> + Name: + </PropertyItemLabel> + <PropertyItemValue className="text-xs truncate"> + {activeProject?.name || ""} + </PropertyItemValue> + </PropertyItem> + <PropertyItem direction="column"> + <PropertyItemLabel className="text-xs text-muted-foreground"> + Aspect ratio: + </PropertyItemLabel> + <PropertyItemValue className="text-xs truncate"> + {getDisplayName()} + </PropertyItemValue> + </PropertyItem> + <PropertyItem direction="column"> + <PropertyItemLabel className="text-xs text-muted-foreground"> + Resolution: + </PropertyItemLabel> + <PropertyItemValue className="text-xs truncate"> + {`${canvasSize.width} × ${canvasSize.height}`} + </PropertyItemValue> + </PropertyItem> + <div className="flex flex-col gap-1"> <Label className="text-xs text-muted-foreground">Frame rate:</Label> <Select value={(activeProject?.fps || 30).toString()} @@ -83,7 +106,7 @@ export function PropertiesPanel() { ); if (mediaItem?.type === "audio") { - return <AudioProperties element={element} />; + return <AudioProperties key={elementId} element={element} />; } return ( @@ -98,14 +121,3 @@ export function PropertiesPanel() { </ScrollArea> ); } - -function PropertyItem({ label, value }: { label: string; value: string }) { - return ( - <div className="flex justify-between"> - <Label className="text-xs text-muted-foreground">{label}</Label> - <span className="text-xs text-right truncate w-40" title={value}> - {value} - </span> - </div> - ); -} diff --git a/apps/web/src/components/editor/properties-panel/text-properties.tsx b/apps/web/src/components/editor/properties-panel/text-properties.tsx index c55c3dae..e147ea65 100644 --- a/apps/web/src/components/editor/properties-panel/text-properties.tsx +++ b/apps/web/src/components/editor/properties-panel/text-properties.tsx @@ -71,6 +71,20 @@ export function TextProperties({ </div> </PropertyItemValue> </PropertyItem> + <PropertyItem direction="row"> + <PropertyItemLabel>Color</PropertyItemLabel> + <PropertyItemValue> + <Input + type="color" + value={element.color || "#ffffff"} + onChange={(e) => { + const color = e.target.value; + updateTextElement(trackId, element.id, { color }); + }} + className="w-full cursor-pointer rounded-full" + /> + </PropertyItemValue> + </PropertyItem> </div> ); } diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx index fd2b2a11..bcaece89 100644 --- a/apps/web/src/components/editor/timeline/index.tsx +++ b/apps/web/src/components/editor/timeline/index.tsx @@ -744,13 +744,16 @@ export function Timeline() { /> </div> </ContextMenuTrigger> - <ContextMenuContent> + <ContextMenuContent className="z-[200]"> <ContextMenuItem - onClick={() => toggleTrackMute(track.id)} + onClick={(e) => { + e.stopPropagation(); + toggleTrackMute(track.id); + }} > {track.muted ? "Unmute Track" : "Mute Track"} </ContextMenuItem> - <ContextMenuItem> + <ContextMenuItem onClick={(e) => e.stopPropagation()}> Track settings (soon) </ContextMenuItem> </ContextMenuContent> diff --git a/apps/web/src/components/editor/timeline/timeline-element.tsx b/apps/web/src/components/editor/timeline/timeline-element.tsx index 8aadde82..c66e9fcb 100644 --- a/apps/web/src/components/editor/timeline/timeline-element.tsx +++ b/apps/web/src/components/editor/timeline/timeline-element.tsx @@ -102,7 +102,8 @@ export function TimelineElement({ // Element should always be positioned at startTime - trimStart only affects content, not position const elementLeft = elementStartTime * 50 * zoomLevel; - const handleElementSplitContext = () => { + const handleElementSplitContext = (e: React.MouseEvent) => { + e.stopPropagation(); const effectiveStart = element.startTime; const effectiveEnd = element.startTime + @@ -118,7 +119,8 @@ export function TimelineElement({ } }; - const handleElementDuplicateContext = () => { + const handleElementDuplicateContext = (e: React.MouseEvent) => { + e.stopPropagation(); const { id, ...elementWithoutId } = element; addElementToTrack(track.id, { ...elementWithoutId, @@ -130,7 +132,8 @@ export function TimelineElement({ }); }; - const handleElementDeleteContext = () => { + const handleElementDeleteContext = (e: React.MouseEvent) => { + e.stopPropagation(); if (rippleEditingEnabled) { removeElementFromTrackWithRipple(track.id, element.id); } else { @@ -138,7 +141,8 @@ export function TimelineElement({ } }; - const handleReplaceClip = () => { + const handleReplaceClip = (e: React.MouseEvent) => { + e.stopPropagation(); if (element.type !== "media") { toast.error("Replace is only available for media clips"); return; @@ -354,7 +358,7 @@ export function TimelineElement({ </div> </div> </ContextMenuTrigger> - <ContextMenuContent> + <ContextMenuContent className="z-[200]"> <ContextMenuItem onClick={handleElementSplitContext}> <Scissors className="h-4 w-4 mr-2" /> Split at playhead diff --git a/apps/web/src/components/editor/timeline/timeline-playhead.tsx b/apps/web/src/components/editor/timeline/timeline-playhead.tsx index 509ce9d7..d0aea7fa 100644 --- a/apps/web/src/components/editor/timeline/timeline-playhead.tsx +++ b/apps/web/src/components/editor/timeline/timeline-playhead.tsx @@ -72,6 +72,7 @@ export function TimelinePlayhead({ top: 0, height: `${totalHeight}px`, width: "2px", // Slightly wider for better click target + zIndex: 100, }} onMouseDown={handlePlayheadMouseDown} > |