small fix

jbilcke-hf · Sep 5, 2024 · e93dbe0 · e93dbe0
1 parent ef82923
commit e93dbe0
Show file tree

Hide file tree

Showing 9 changed files with 518 additions and 374 deletions.
diff --git a/packages/app/src/app/main.tsx b/packages/app/src/app/main.tsx
@@ -34,6 +34,7 @@ import { useDynamicWorkflows } from '@/services/editors/workflow-editor/useDynam
 
 import { useQueryStringLoader } from '@/components/toolbars/top-menu/file/useQueryStringLoader'
 import { useSetupIframeOnce } from './embed/useSetupIframeOnce'
+import { TimelineZoom } from '@/components/core/timeline/TimelineZoom'
 
 export enum ClapperIntegrationMode {
   APP = 'APP',
@@ -244,6 +245,11 @@ function MainContent({ mode }: { mode: ClapperIntegrationMode }) {
         defaultX={375}
         defaultY={527}
         canBeClosed={false}
+        toolbar={({ isFocused }) => (
+          <>
+            <TimelineZoom />
+          </>
+        )}
       >
         <Timeline />
       </FruityWindow>

diff --git a/packages/app/src/components/core/timeline/Slider.tsx b/packages/app/src/components/core/timeline/Slider.tsx
@@ -20,7 +20,7 @@ const Slider = React.forwardRef<
   >
     <SliderPrimitive.Track
       className={cn(
-        `relative grow overflow-hidden rounded border border-neutral-900 bg-neutral-100 dark:bg-neutral-700/70`,
+        `relative grow overflow-hidden rounded border border-neutral-900 bg-neutral-100 dark:bg-neutral-50/20`,
         `h-1.5 w-full`,
         trackClass
       )}

diff --git a/packages/app/src/components/core/timeline/TimelineZoom.tsx b/packages/app/src/components/core/timeline/TimelineZoom.tsx
@@ -8,13 +8,24 @@ import { Slider } from './Slider'
 import { useDebounceFn } from '@/lib/hooks'
 
 export function TimelineZoom() {
+  // .. yeah sorry about this.. we don't have a zoom level actually,
+  // we have a CELL WIDTH :)
+  const cellWidth = useTimeline((s) => s.cellWidth)
+  const horizontalZoomLevel = cellWidth
+
   const setHorizontalZoomLevel = useTimeline((s) => s.setHorizontalZoomLevel)
   const minHorizontalZoomLevel = useTimeline((s) => s.minHorizontalZoomLevel)
   const maxHorizontalZoomLevel = useTimeline((s) => s.maxHorizontalZoomLevel)
 
+  const onValueChange = (values: number[]) => {
+    setHorizontalZoomLevel(values[0])
+  }
+
+  /*
   const onValueChange = useDebounceFn((values: number[]) => {
     setHorizontalZoomLevel(values[0])
   }, 250)
+  */
 
   return (
     <div
@@ -30,6 +41,8 @@ export function TimelineZoom() {
         min={minHorizontalZoomLevel}
         max={maxHorizontalZoomLevel}
         onValueChange={onValueChange}
+        value={[horizontalZoomLevel]}
+        defaultValue={[horizontalZoomLevel]}
       />
       <BiSolidZoomOut className="" />
     </div>