diff options
Diffstat (limited to 'apps/web')
| -rw-r--r-- | apps/web/src/components/editor/timeline-clip.tsx | 30 |
1 files changed, 18 insertions, 12 deletions
diff --git a/apps/web/src/components/editor/timeline-clip.tsx b/apps/web/src/components/editor/timeline-clip.tsx index 9b5f20f6..88767a15 100644 --- a/apps/web/src/components/editor/timeline-clip.tsx +++ b/apps/web/src/components/editor/timeline-clip.tsx @@ -281,9 +281,9 @@ export function TimelineClip({ return ( <div - className={`absolute top-0 h-full select-none transition-all duration-75 ${ + className={`absolute top-0 h-full select-none transition-all duration-75${ isBeingDragged ? "z-50" : "z-10" - } ${isSelected ? "ring-2 ring-primary" : ""}`} + }`} style={{ left: `${clipLeft}px`, width: `${clipWidth}px`, @@ -293,9 +293,11 @@ export function TimelineClip({ onMouseLeave={resizing ? handleResizeEnd : undefined} > <div - className={`relative h-full rounded border cursor-pointer overflow-hidden ${getTrackColor( + className={`relative h-full rounded-[0.15rem] cursor-pointer overflow-hidden ${getTrackColor( track.type - )} ${isSelected ? "ring-2 ring-primary ring-offset-1" : ""}`} + )} ${isSelected ? "border-b-[0.5px] border-t-[0.5px] border-primary" : ""} ${ + isBeingDragged ? "z-50" : "z-10" + }`} onClick={(e) => onClipClick && onClipClick(e, clip)} onMouseDown={handleClipMouseDown} onContextMenu={(e) => onClipMouseDown && onClipMouseDown(e, clip)} @@ -304,14 +306,18 @@ export function TimelineClip({ {renderClipContent()} </div> - <div - className="absolute left-0 top-0 bottom-0 w-1 cursor-w-resize hover:bg-primary/50 transition-colors" - onMouseDown={(e) => handleResizeStart(e, clip.id, "left")} - /> - <div - className="absolute right-0 top-0 bottom-0 w-1 cursor-e-resize hover:bg-primary/50 transition-colors" - onMouseDown={(e) => handleResizeStart(e, clip.id, "right")} - /> + {isSelected && ( + <> + <div + className="absolute left-0 top-0 bottom-0 w-1 cursor-w-resize bg-foreground z-50" + onMouseDown={(e) => handleResizeStart(e, clip.id, "left")} + /> + <div + className="absolute right-0 top-0 bottom-0 w-1 cursor-e-resize bg-foreground z-50" + onMouseDown={(e) => handleResizeStart(e, clip.id, "right")} + /> + </> + )} <div className="absolute top-1 right-1"> <DropdownMenu open={clipMenuOpen} onOpenChange={setClipMenuOpen}> |