diff options
| author | Maze <167211895+mazeincoding@users.noreply.github.com> | 2025-07-22 11:40:14 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-07-22 11:40:14 +0200 |
| commit | a5f7b477e65e5acba56b8761cd9cd3074cdb41ac (patch) | |
| tree | 29601f28cad5219abc87ca132f73e5d5e5785156 /apps/web/src/components/editor/timeline.tsx | |
| parent | f2a403b6780632a5b4e2e7374950614e281ee0ee (diff) | |
| parent | 205ad520f07772145a9bb6a7c7e456d7fa46e87e (diff) | |
| download | opencut-a5f7b477e65e5acba56b8761cd9cd3074cdb41ac.tar.gz | |
Merge pull request #420 from chrissshan/feature/update-timeline-snapping-icon
feat: [UI] Update Timeline icon for "Auto Snapping"
Diffstat (limited to 'apps/web/src/components/editor/timeline.tsx')
| -rw-r--r-- | apps/web/src/components/editor/timeline.tsx | 19 |
1 files changed, 8 insertions, 11 deletions
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx index 6e8c453c..59e8a201 100644 --- a/apps/web/src/components/editor/timeline.tsx +++ b/apps/web/src/components/editor/timeline.tsx @@ -15,8 +15,7 @@ import { Video, Music, TypeIcon, - Lock, - LockOpen, + Magnet, Link, } from "lucide-react"; import { @@ -288,7 +287,7 @@ export function Timeline() { Math.min( duration, (mouseX + scrollLeft) / - (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel) + (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel) ) ); @@ -806,9 +805,9 @@ export function Timeline() { <TooltipTrigger asChild> <Button variant="text" size="icon" onClick={toggleSnapping}> {snappingEnabled ? ( - <LockOpen className="h-4 w-4 text-primary" /> + <Magnet className="h-4 w-4 text-primary" /> ) : ( - <Lock className="h-4 w-4" /> + <Magnet className="h-4 w-4" /> )} </Button> </TooltipTrigger> @@ -920,21 +919,19 @@ export function Timeline() { return ( <div key={i} - className={`absolute top-0 bottom-0 ${ - isMainMarker + className={`absolute top-0 bottom-0 ${isMainMarker ? "border-l border-muted-foreground/40" : "border-l border-muted-foreground/20" - }`} + }`} style={{ left: `${time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel}px`, }} > <span - className={`absolute top-1 left-1 text-[0.6rem] ${ - isMainMarker + className={`absolute top-1 left-1 text-[0.6rem] ${isMainMarker ? "text-muted-foreground font-medium" : "text-muted-foreground/70" - }`} + }`} > {(() => { const formatTime = (seconds: number) => { |