diff options
Diffstat (limited to 'apps/web/src/components/editor/timeline/timeline-toolbar.tsx')
| -rw-r--r-- | apps/web/src/components/editor/timeline/timeline-toolbar.tsx | 31 |
1 files changed, 15 insertions, 16 deletions
diff --git a/apps/web/src/components/editor/timeline/timeline-toolbar.tsx b/apps/web/src/components/editor/timeline/timeline-toolbar.tsx index 822bb438..6ac6fba5 100644 --- a/apps/web/src/components/editor/timeline/timeline-toolbar.tsx +++ b/apps/web/src/components/editor/timeline/timeline-toolbar.tsx @@ -16,6 +16,7 @@ import { import { Slider } from "@/components/ui/slider"; import { formatTimeCode } from "@/lib/time"; import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants"; +import { sliderToZoom, zoomToSlider } from "@/lib/timeline/zoom-utils"; import { EditableTimecode } from "@/components/editable-timecode"; import { ScenesView } from "../scenes-view"; import { type TAction, invokeAction } from "@/lib/actions"; @@ -54,9 +55,9 @@ export function TimelineToolbar({ direction === "in" ? Math.min( TIMELINE_CONSTANTS.ZOOM_MAX, - zoomLevel + TIMELINE_CONSTANTS.ZOOM_STEP, + zoomLevel * TIMELINE_CONSTANTS.ZOOM_BUTTON_FACTOR, ) - : Math.max(minZoom, zoomLevel - TIMELINE_CONSTANTS.ZOOM_STEP); + : Math.max(minZoom, zoomLevel / TIMELINE_CONSTANTS.ZOOM_BUTTON_FACTOR); setZoomLevel({ zoom: newZoomLevel }); }; @@ -127,17 +128,13 @@ function ToolbarLeftSection() { <ToolbarButton icon={<HugeiconsIcon icon={ScissorIcon} />} tooltip="Split element" - onClick={({ event }) => - handleAction({ action: "split", event }) - } + onClick={({ event }) => handleAction({ action: "split", event })} /> <ToolbarButton icon={<HugeiconsIcon icon={AlignLeftIcon} />} tooltip="Split left" - onClick={({ event }) => - handleAction({ action: "split-left", event }) - } + onClick={({ event }) => handleAction({ action: "split-left", event })} /> <ToolbarButton @@ -302,15 +299,17 @@ function ToolbarRightSection({ type="button" onClick={() => onZoom({ direction: "out" })} > - <HugeiconsIcon icon={SearchAddIcon} /> + <HugeiconsIcon icon={SearchMinusIcon} /> </Button> <Slider - className="w-24" - value={[zoomLevel]} - onValueChange={(values) => onZoomChange(values[0])} - min={minZoom} - max={TIMELINE_CONSTANTS.ZOOM_MAX} - step={TIMELINE_CONSTANTS.ZOOM_STEP} + className="w-28" + value={[zoomToSlider({ zoomLevel, minZoom })]} + onValueChange={(values) => + onZoomChange(sliderToZoom({ sliderPosition: values[0], minZoom })) + } + min={0} + max={1} + step={0.005} /> <Button variant="text" @@ -318,7 +317,7 @@ function ToolbarRightSection({ type="button" onClick={() => onZoom({ direction: "in" })} > - <HugeiconsIcon icon={SearchMinusIcon} /> + <HugeiconsIcon icon={SearchAddIcon} /> </Button> </div> </div> |