diff options
| author | Kha Nguyen <hi@khanguyen.com> | 2025-07-24 16:50:14 -0500 |
|---|---|---|
| committer | Kha Nguyen <hi@khanguyen.com> | 2025-07-24 16:50:14 -0500 |
| commit | 262a7d53d63cc9997f730c7f64b7f8ec29723926 (patch) | |
| tree | 894d6e3986b3ca339dc3ff7ec62fb31b3690be82 /apps/web/src/components/editor/timeline/index.tsx | |
| parent | 5a7745f806edf4a386b8cfd079861f96c3b92baf (diff) | |
| parent | 5931ddb77aac23ffe1b82d9d7c03afde3e671109 (diff) | |
| download | opencut-262a7d53d63cc9997f730c7f64b7f8ec29723926.tar.gz | |
Merge branch 'main' into fix/improve-shortcuts
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) => ( |