diff --git a/apps/web/src/components/editor/timeline/timeline-toolbar.tsx b/apps/web/src/components/editor/timeline/timeline-toolbar.tsx
index 33cf83ae..6ac6fba5 100644
--- a/apps/web/src/components/editor/timeline/timeline-toolbar.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-toolbar.tsx
@@ -51,11 +51,13 @@ export function TimelineToolbar({
setZoomLevel: ({ zoom }: { zoom: number }) => void;
}) {
const handleZoom = ({ direction }: { direction: "in" | "out" }) => {
- const zoomFactor = 1.25;
const newZoomLevel =
direction === "in"
- ? Math.min(TIMELINE_CONSTANTS.ZOOM_MAX, zoomLevel * zoomFactor)
- : Math.max(minZoom, zoomLevel / zoomFactor);
+ ? Math.min(
+ TIMELINE_CONSTANTS.ZOOM_MAX,
+ zoomLevel * TIMELINE_CONSTANTS.ZOOM_BUTTON_FACTOR,
+ )
+ : Math.max(minZoom, zoomLevel / TIMELINE_CONSTANTS.ZOOM_BUTTON_FACTOR);
setZoomLevel({ zoom: newZoomLevel });
};
@@ -297,7 +299,7 @@ function ToolbarRightSection({
type="button"
onClick={() => onZoom({ direction: "out" })}
>
-
+
onZoom({ direction: "in" })}
>
-
+
diff --git a/apps/web/src/constants/timeline-constants.tsx b/apps/web/src/constants/timeline-constants.tsx
index 692ccd65..e467de41 100644
--- a/apps/web/src/constants/timeline-constants.tsx
+++ b/apps/web/src/constants/timeline-constants.tsx
@@ -35,12 +35,10 @@ export const TRACK_GAP = 4;
export const TIMELINE_CONSTANTS = {
PIXELS_PER_SECOND: 50,
DEFAULT_ELEMENT_DURATION: 5,
- PLAYHEAD_LOOKAHEAD_SECONDS: 30, // padding ahead
PADDING_TOP_PX: 0,
- ZOOM_LEVELS: [0.1, 0.25, 0.5, 1, 1.5, 2, 3, 4, 6, 8, 10, 15, 20, 30, 50],
ZOOM_MIN: 0.1,
ZOOM_MAX: 100,
- ZOOM_STEP: 0.1,
+ ZOOM_BUTTON_FACTOR: 1.7,
} as const;
export const DEFAULT_TIMELINE_VIEW_STATE: TTimelineViewState = {
diff --git a/apps/web/src/lib/timeline/zoom-utils.ts b/apps/web/src/lib/timeline/zoom-utils.ts
index c4a64ed1..a299edb3 100644
--- a/apps/web/src/lib/timeline/zoom-utils.ts
+++ b/apps/web/src/lib/timeline/zoom-utils.ts
@@ -53,8 +53,8 @@ export function getZoomPercent({
}
/**
- * Convert linear slider position (0-1) to exponential zoom level.
- * At low slider values, zoom changes are small. At high values, changes are large.
+ * convert linear slider position (0-1) to exponential zoom level.
+ * at low slider values, zoom changes are small. at high values, changes are large.
*/
export function sliderToZoom({
sliderPosition,