diff options
| author | Maze Winther <mazewinther@gmail.com> | 2025-07-25 15:34:53 +0200 |
|---|---|---|
| committer | Maze Winther <mazewinther@gmail.com> | 2025-07-25 15:34:53 +0200 |
| commit | d667c1095c58490bfdabbf50e044384e7fee943d (patch) | |
| tree | d1ee64ed535843a83ff14211a92708dcbadf765e /apps/web/src/components/editor/timeline/index.tsx | |
| parent | 9a18a7a4e961375f80417d50a3c326c63e74dfe8 (diff) | |
| parent | 65c3f9f7f78f787262a88c75b96a118ca5bee15c (diff) | |
| download | opencut-d667c1095c58490bfdabbf50e044384e7fee943d.tar.gz | |
Merge branch 'staging' of https://github.com/mazeincoding/AppCut into staging
Diffstat (limited to 'apps/web/src/components/editor/timeline/index.tsx')
| -rw-r--r-- | apps/web/src/components/editor/timeline/index.tsx | 27 |
1 files changed, 16 insertions, 11 deletions
diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx index 2360eb8a..fd2b2a11 100644 --- a/apps/web/src/components/editor/timeline/index.tsx +++ b/apps/web/src/components/editor/timeline/index.tsx @@ -278,7 +278,7 @@ export function Timeline() { Math.min( duration, (mouseX + scrollLeft) / - (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel) + (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel) ) ); @@ -501,7 +501,9 @@ export function Timeline() { return ( <div - className={`h-full flex flex-col transition-colors duration-200 relative bg-panel rounded-sm overflow-hidden`} + className={ + "h-full flex flex-col transition-colors duration-200 relative bg-panel rounded-sm overflow-hidden" + } {...dragProps} onMouseEnter={() => setIsInTimeline(true)} onMouseLeave={() => setIsInTimeline(false)} @@ -598,19 +600,21 @@ 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) => { @@ -620,13 +624,14 @@ export function Timeline() { if (hours > 0) { return `${hours}:${minutes.toString().padStart(2, "0")}:${Math.floor(secs).toString().padStart(2, "0")}`; - } else if (minutes > 0) { + } + if (minutes > 0) { return `${minutes}:${Math.floor(secs).toString().padStart(2, "0")}`; - } else if (interval >= 1) { + } + if (interval >= 1) { return `${Math.floor(secs)}s`; - } else { - return `${secs.toFixed(1)}s`; } + return `${secs.toFixed(1)}s`; }; return formatTime(time); })()} @@ -709,7 +714,7 @@ export function Timeline() { }} > {tracks.length === 0 ? ( - <div></div> + <div /> ) : ( <> {tracks.map((track, index) => ( |