@twick/video-editor 0.14.5 → 0.14.7

package/dist/index.js

@@ -9353,11 +9353,10 @@ This message will only show in development mode. It won't appear in production.
     duration,
     zoom = 1,
     onSeek,
-    timelineCount = 0
+    timelineCount = 0,
+    timelineTickConfigs
   }) {
-    const canvasRef = React.useRef(null);
     const containerRef = React.useRef(null);
-    const [containerWidth, setContainerWidth] = React.useState(0);
     const [isDragging2, setIsDragging] = React.useState(false);
     const [seekPosition, setSeekPosition] = React.useState(0);
     const pixelsPerSecond = 100 * zoom;
@@ -9368,61 +9367,62 @@ This message will only show in development mode. It won't appear in production.
         setSeekPosition(currentTime * pixelsPerSecond);
       }
     }, [currentTime, pixelsPerSecond, isDragging2]);
-    const drawTimeline = React.useCallback(() => {
-      const canvas = canvasRef.current;
-      if (!canvas) return;
-      const ctx = canvas.getContext("2d", { alpha: false });
-      if (!ctx) return;
-      const dpr = window.devicePixelRatio || 1;
-      const displayWidth = Math.max(totalWidth, containerWidth);
-      canvas.width = displayWidth * dpr;
-      canvas.height = 32 * dpr;
-      canvas.style.width = `${displayWidth}px`;
-      canvas.style.height = "32px";
-      ctx.scale(dpr, dpr);
-      ctx.fillStyle = "#0f0f0f";
-      ctx.fillRect(0, 0, displayWidth, 32);
-      for (let i2 = 0; i2 <= Math.ceil(duration * 10); i2++) {
-        const time2 = i2 * 0.1;
-        const x2 = Math.floor(time2 * pixelsPerSecond) + 0.5;
-        const isSecond = i2 % 10 === 0;
-        ctx.beginPath();
-        ctx.moveTo(x2, 0);
-        ctx.lineTo(x2, isSecond ? 24 : 12);
-        ctx.strokeStyle = isSecond ? "rgba(255, 255, 255, 0.7)" : "rgba(255, 255, 255, 0.3)";
-        ctx.lineWidth = 1;
-        ctx.stroke();
-        if (isSecond) {
-          ctx.font = "bold 10px system-ui, sans-serif";
-          ctx.fillStyle = "rgba(255, 255, 255, 0.7)";
-          ctx.textAlign = "center";
-          ctx.textBaseline = "bottom";
-          if (time2 === 0) ;
-          else {
-            ctx.fillText(`${Math.floor(time2)}s`, x2, 32);
+    const { majorIntervalSec, minorIntervalSec } = React.useMemo(() => {
+      if (timelineTickConfigs && timelineTickConfigs.length > 0) {
+        const sortedConfigs = [...timelineTickConfigs].sort((a2, b2) => a2.durationThreshold - b2.durationThreshold);
+        for (const config of sortedConfigs) {
+          if (duration < config.durationThreshold) {
+            return {
+              majorIntervalSec: config.majorInterval,
+              minorIntervalSec: config.minorTicks > 0 ? config.majorInterval / (config.minorTicks + 1) : config.majorInterval
+            };
           }
         }
+        const lastConfig = sortedConfigs[sortedConfigs.length - 1];
+        return {
+          majorIntervalSec: lastConfig.majorInterval,
+          minorIntervalSec: lastConfig.minorTicks > 0 ? lastConfig.majorInterval / (lastConfig.minorTicks + 1) : lastConfig.majorInterval
+        };
       }
-    }, [duration, pixelsPerSecond, totalWidth, containerWidth]);
-    React.useEffect(() => {
-      if (containerRef.current) {
-        setContainerWidth(containerRef.current.clientWidth);
+      let major = 1;
+      let minors = 5;
+      if (duration < 10) {
+        major = 1;
+        minors = 10;
+      } else if (duration < 30) {
+        major = 5;
+        minors = 5;
+      } else if (duration < 120) {
+        major = 10;
+        minors = 5;
+      } else if (duration < 300) {
+        major = 30;
+        minors = 6;
+      } else if (duration < 900) {
+        major = 60;
+        minors = 6;
+      } else if (duration < 1800) {
+        major = 120;
+        minors = 4;
+      } else if (duration < 3600) {
+        major = 300;
+        minors = 5;
+      } else if (duration < 7200) {
+        major = 600;
+        minors = 10;
+      } else {
+        major = 1800;
+        minors = 6;
       }
-      const handleResize = () => {
-        if (containerRef.current) {
-          setContainerWidth(containerRef.current.clientWidth);
-        }
+      return {
+        majorIntervalSec: major,
+        minorIntervalSec: minors > 0 ? major / (minors + 1) : major
       };
-      window.addEventListener("resize", handleResize);
-      return () => window.removeEventListener("resize", handleResize);
-    }, []);
-    React.useEffect(() => {
-      drawTimeline();
-    }, [drawTimeline, duration, zoom, containerWidth]);
+    }, [duration, timelineTickConfigs]);
     const handleSeek = (clientX) => {
       if (!containerRef.current) return;
       const rect = containerRef.current.getBoundingClientRect();
-      const x2 = clientX - rect.left;
+      const x2 = clientX - rect.left + (containerRef.current.scrollLeft || 0);
       const newTime = Math.max(0, Math.min(duration, x2 / pixelsPerSecond));
       onSeek(newTime);
     };
@@ -9433,7 +9433,7 @@ This message will only show in development mode. It won't appear in production.
       setIsDragging(active);
       if (!containerRef.current) return;
       const rect = containerRef.current.getBoundingClientRect();
-      const xPos = x2 - rect.left;
+      const xPos = x2 - rect.left + (containerRef.current.scrollLeft || 0);
       const newTime = Math.max(0, Math.min(duration, xPos / pixelsPerSecond));
       setSeekPosition(xPos);
       onSeek(newTime);
@@ -9442,24 +9442,92 @@ This message will only show in development mode. It won't appear in production.
       "div",
       {
         ref: containerRef,
-        className: "twick-seek-track-container",
+        className: "twick-seek-track-container-no-scrollbar",
         onClick: (e2) => handleSeek(e2.clientX),
+        style: {
+          overflowX: "auto",
+          position: "relative",
+          scrollbarWidth: "none",
+          // Firefox
+          msOverflowStyle: "none"
+          // IE/Edge
+        },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "canvas",
-            {
-              ref: canvasRef,
-              className: "twick-seek-track-canvas",
-              style: { minWidth: "100%" }
+          (() => {
+            const ticks = [];
+            const labels = [];
+            const epsilon = 1e-6;
+            const tickPositions = /* @__PURE__ */ new Set();
+            for (let t2 = 0; t2 <= duration + epsilon; t2 += minorIntervalSec) {
+              tickPositions.add(Math.round(t2 * 1e3) / 1e3);
             }
-          ),
+            tickPositions.forEach((t2) => {
+              const left = t2 * pixelsPerSecond;
+              const isMajor = Math.abs(t2 / majorIntervalSec - Math.round(t2 / majorIntervalSec)) < 1e-3;
+              ticks.push(
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      left,
+                      top: 0,
+                      width: "1px",
+                      height: isMajor ? "12px" : "8px",
+                      backgroundColor: isMajor ? "rgba(255,255,255,0.5)" : "rgba(255,255,255,0.2)",
+                      pointerEvents: "none"
+                    }
+                  },
+                  `tick-${t2}`
+                )
+              );
+              if (isMajor && t2 > epsilon) {
+                labels.push(
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        left,
+                        bottom: "6px",
+                        transform: "translateX(-50%)",
+                        color: "rgba(255,255,255,0.7)",
+                        font: "bold 10px system-ui, sans-serif",
+                        pointerEvents: "none",
+                        textShadow: "1px 1px 2px rgba(0,0,0,0.8)"
+                      },
+                      children: `${Math.floor(t2)}s`
+                    },
+                    `lbl-${t2}`
+                  )
+                );
+              }
+            });
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  position: "relative",
+                  width: `${Math.max(1, Math.round(totalWidth))}px`,
+                  height: "32px",
+                  backgroundColor: "#0f0f0f"
+                },
+                children: [
+                  ticks,
+                  labels
+                ]
+              }
+            );
+          })(),
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
               ...bind(),
               className: "twick-seek-track-playhead",
               style: {
+                position: "absolute",
                 left: seekPosition,
+                top: 0,
                 touchAction: "none",
                 transition: isDragging2 ? "none" : "left 0.1s linear"
               },
@@ -9483,7 +9551,8 @@ This message will only show in development mode. It won't appear in production.
     duration,
     zoom,
     timelineCount,
-    onSeek
+    onSeek,
+    timelineTickConfigs
   }) => {
     const { currentTime } = livePlayer.useLivePlayerContext();
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -9493,7 +9562,8 @@ This message will only show in development mode. It won't appear in production.
         currentTime,
         zoom,
         onSeek,
-        timelineCount
+        timelineCount,
+        timelineTickConfigs
       }
     );
   };
@@ -16937,6 +17007,90 @@ This message will only show in development mode. It won't appear in production.
     END: "end"
   };
   const DEFAULT_TIMELINE_ZOOM = 1.5;
+  const DEFAULT_TIMELINE_ZOOM_CONFIG = {
+    /** Minimum zoom level (10%) */
+    min: 0.1,
+    /** Maximum zoom level (300%) */
+    max: 3,
+    /** Zoom step increment/decrement (10%) */
+    step: 0.1,
+    /** Default zoom level (150%) */
+    default: 1.5
+  };
+  const DEFAULT_TIMELINE_TICK_CONFIGS = [
+    {
+      durationThreshold: 10,
+      // < 10 seconds
+      majorInterval: 1,
+      // 1s major ticks
+      minorTicks: 10
+      // 0.1s minor ticks (10 minors between majors)
+    },
+    {
+      durationThreshold: 30,
+      // < 30 seconds
+      majorInterval: 5,
+      // 5s major ticks
+      minorTicks: 5
+      // 1s minor ticks (5 minors between majors)
+    },
+    {
+      durationThreshold: 120,
+      // < 2 minutes
+      majorInterval: 10,
+      // 10s major ticks
+      minorTicks: 5
+      // 2s minor ticks (5 minors between majors)
+    },
+    {
+      durationThreshold: 300,
+      // < 5 minutes
+      majorInterval: 30,
+      // 30s major ticks
+      minorTicks: 6
+      // 5s minor ticks (6 minors between majors)
+    },
+    {
+      durationThreshold: 900,
+      // < 15 minutes
+      majorInterval: 60,
+      // 1m major ticks
+      minorTicks: 6
+      // 10s minor ticks (6 minors between majors)
+    },
+    {
+      durationThreshold: 1800,
+      // < 30 minutes
+      majorInterval: 120,
+      // 2m major ticks
+      minorTicks: 4
+      // 30s minor ticks (4 minors between majors)
+    },
+    {
+      durationThreshold: 3600,
+      // < 1 hour
+      majorInterval: 300,
+      // 5m major ticks
+      minorTicks: 5
+      // 1m minor ticks (5 minors between majors)
+    },
+    {
+      durationThreshold: 7200,
+      // < 2 hours
+      majorInterval: 600,
+      // 10m major ticks
+      minorTicks: 10
+      // 1m minor ticks (10 minors between majors)
+    },
+    {
+      durationThreshold: Infinity,
+      // >= 2 hours
+      majorInterval: 1800,
+      // 30m major ticks
+      minorTicks: 6
+      // 5m minor ticks (6 minors between majors)
+    }
+  ];
   const DEFAULT_ELEMENT_COLORS = {
     /** Fragment element color - deep charcoal matching UI background */
     fragment: "#1A1A1A",
@@ -17032,7 +17186,8 @@ This message will only show in development mode. It won't appear in production.
     selectedItem,
     onSelection,
     onDrag,
-    allowOverlap = false
+    allowOverlap = false,
+    elementColors
   }) => {
     const ref = React.useRef(null);
     const dragType = React.useRef(null);
@@ -17132,8 +17287,9 @@ This message will only show in development mode. It won't appear in production.
       }
     };
     const getElementColor = (elementType) => {
-      if (elementType in ELEMENT_COLORS) {
-        return ELEMENT_COLORS[elementType];
+      const colors = elementColors || ELEMENT_COLORS;
+      if (elementType in colors) {
+        return colors[elementType];
       }
       return ELEMENT_COLORS.element;
     };
@@ -17209,7 +17365,8 @@ This message will only show in development mode. It won't appear in production.
     selectedItem,
     onItemSelection,
     onDrag,
-    allowOverlap = false
+    allowOverlap = false,
+    elementColors
   }) => {
     const trackRef = React.useRef(null);
     const trackWidthStyle = `${Math.max(100, duration * zoom * 100)}px`;
@@ -17232,6 +17389,7 @@ This message will only show in development mode. It won't appear in production.
             selectedItem,
             onSelection: onItemSelection,
             onDrag,
+            elementColors,
             nextStart: index < elements.length - 1 ? elements[index + 1].getStart() : null,
             prevEnd: index > 0 ? elements[index - 1].getEnd() : 0
           },
@@ -17249,7 +17407,8 @@ This message will only show in development mode. It won't appear in production.
     onAddTrack,
     onReorder,
     onSelectionChange,
-    onElementDrag
+    onElementDrag,
+    elementColors
   }) {
     const containerRef = React.useRef(null);
     const seekContainerRef = React.useRef(null);
@@ -17361,7 +17520,8 @@ This message will only show in development mode. It won't appear in production.
                 allowOverlap: false,
                 trackWidth: timelineWidth - labelWidth,
                 onItemSelection: handleItemSelection,
-                onDrag: onElementDrag
+                onDrag: onElementDrag,
+                elementColors
               }
             )
           ] }, track.getId())) })
@@ -17424,7 +17584,9 @@ This message will only show in development mode. It won't appear in production.
     };
   };
   const TimelineManager = ({
-    trackZoom
+    trackZoom,
+    timelineTickConfigs,
+    elementColors
   }) => {
     var _a2;
     const { timelineData, totalDuration, selectedItem, onAddTrack, onReorder, onElementDrag, onSeek, onSelectionChange } = useTimelineManager();
@@ -17442,13 +17604,15 @@ This message will only show in development mode. It won't appear in production.
         onElementDrag,
         onSeek,
         onSelectionChange,
+        elementColors,
         seekTrack: /* @__PURE__ */ jsxRuntime.jsx(
           SeekControl,
           {
             duration: totalDuration,
             zoom: trackZoom,
             onSeek,
-            timelineCount: ((_a2 = timelineData == null ? void 0 : timelineData.tracks) == null ? void 0 : _a2.length) ?? 0
+            timelineCount: ((_a2 = timelineData == null ? void 0 : timelineData.tracks) == null ? void 0 : _a2.length) ?? 0,
+            timelineTickConfigs
           }
         )
       }
@@ -17476,9 +17640,6 @@ This message will only show in development mode. It won't appear in production.
       )
     ] });
   };
-  const MAX_ZOOM = 3;
-  const MIN_ZOOM = 0.5;
-  const ZOOM_STEP = 0.25;
   const PlayerControls = ({
     selectedItem,
     duration,
@@ -17493,8 +17654,12 @@ This message will only show in development mode. It won't appear in production.
     onDelete,
     zoomLevel = 1,
     setZoomLevel,
-    className = ""
+    className = "",
+    zoomConfig = DEFAULT_TIMELINE_ZOOM_CONFIG
   }) => {
+    const MAX_ZOOM = zoomConfig.max;
+    const MIN_ZOOM = zoomConfig.min;
+    const ZOOM_STEP = zoomConfig.step;
     const formatTime = React.useCallback((time2) => {
       const minutes = Math.floor(time2 / 60);
       const seconds = Math.floor(time2 % 60);
@@ -17520,67 +17685,67 @@ This message will only show in development mode. It won't appear in production.
         setZoomLevel(zoomLevel - ZOOM_STEP);
       }
     }, [zoomLevel, setZoomLevel]);
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-16 bg-gray-800 border-t border-gray-700 p-4 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: handleDelete,
-              disabled: !selectedItem,
-              title: "Delete",
-              className: `btn btn-ghost ${!!selectedItem ? "text-red-400 hover:text-red-300" : "text-gray-500 cursor-not-allowed"}`,
-              children: /* @__PURE__ */ jsxRuntime.jsx(Trash2, { className: "w-5 h-5" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: handleSplit,
-              disabled: !(selectedItem instanceof timeline.TrackElement),
-              title: "Split",
-              className: `btn btn-ghost ${selectedItem instanceof timeline.TrackElement ? "text-purple-400 hover:text-purple-300" : "text-gray-500 cursor-not-allowed"}`,
-              children: /* @__PURE__ */ jsxRuntime.jsx(Scissors, { className: "w-5 h-5" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            UndoRedoControls,
-            {
-              canUndo,
-              canRedo,
-              onUndo,
-              onRedo
-            }
-          )
-        ] }),
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `player-controls ${className}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "edit-controls", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleDelete,
+            disabled: !selectedItem,
+            title: "Delete",
+            className: `control-btn delete-btn ${!selectedItem ? "btn-disabled" : ""}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Trash2, { className: "icon-md" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleSplit,
+            disabled: !(selectedItem instanceof timeline.TrackElement),
+            title: "Split",
+            className: `control-btn split-btn ${!(selectedItem instanceof timeline.TrackElement) ? "btn-disabled" : ""}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Scissors, { className: "icon-md" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          UndoRedoControls,
+          {
+            canUndo,
+            canRedo,
+            onUndo,
+            onRedo
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "playback-controls", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             onClick: togglePlayback,
             disabled: playerState === livePlayer.PLAYER_STATE.REFRESH,
             title: playerState === livePlayer.PLAYER_STATE.PLAYING ? "Pause" : playerState === livePlayer.PLAYER_STATE.REFRESH ? "Refreshing" : "Play",
-            className: "btn btn-ghost text-white",
-            children: playerState === livePlayer.PLAYER_STATE.PLAYING ? /* @__PURE__ */ jsxRuntime.jsx(Pause, { className: "w-6 h-6" }) : playerState === livePlayer.PLAYER_STATE.REFRESH ? /* @__PURE__ */ jsxRuntime.jsx(LoaderCircle, { className: "w-6 h-6 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(Play, { className: "w-6 h-6" })
+            className: "control-btn play-pause-btn",
+            children: playerState === livePlayer.PLAYER_STATE.PLAYING ? /* @__PURE__ */ jsxRuntime.jsx(Pause, { className: "icon-lg" }) : playerState === livePlayer.PLAYER_STATE.REFRESH ? /* @__PURE__ */ jsxRuntime.jsx(LoaderCircle, { className: "icon-lg animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(Play, { className: "icon-lg" })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-gray-300", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: formatTime(currentTime) }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "/" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: formatTime(duration) })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "time-display", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "current-time", children: formatTime(currentTime) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "time-separator", children: "/" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "total-time", children: formatTime(duration) })
         ] })
       ] }),
-      setZoomLevel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+      setZoomLevel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twick-track-zoom-container", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             onClick: handleZoomOut,
             disabled: zoomLevel <= MIN_ZOOM,
             title: "Zoom Out",
-            className: `btn btn-ghost ${zoomLevel > MIN_ZOOM ? "text-gray-300 hover:text-white" : "text-gray-500 cursor-not-allowed"}`,
-            children: /* @__PURE__ */ jsxRuntime.jsx(ZoomOut, { className: "w-5 h-5" })
+            className: `control-btn ${zoomLevel <= MIN_ZOOM ? "btn-disabled" : ""}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ZoomOut, { className: "icon-md" })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-300 font-medium min-w-[3rem] text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zoom-level", children: [
           Math.round(zoomLevel * 100),
           "%"
         ] }),
@@ -17590,12 +17755,12 @@ This message will only show in development mode. It won't appear in production.
             onClick: handleZoomIn,
             disabled: zoomLevel >= MAX_ZOOM,
             title: "Zoom In",
-            className: `btn btn-ghost ${zoomLevel < MAX_ZOOM ? "text-gray-300 hover:text-white" : "text-gray-500 cursor-not-allowed"}`,
-            children: /* @__PURE__ */ jsxRuntime.jsx(ZoomIn, { className: "w-5 h-5" })
+            className: `control-btn ${zoomLevel >= MAX_ZOOM ? "btn-disabled" : ""}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ZoomIn, { className: "icon-md" })
           }
         )
       ] })
-    ] }) });
+    ] });
   };
   const usePlayerControl = () => {
     const { playerState, setPlayerState } = livePlayer.useLivePlayerContext();
@@ -17651,7 +17816,8 @@ This message will only show in development mode. It won't appear in production.
   };
   const ControlManager = ({
     trackZoom,
-    setTrackZoom
+    setTrackZoom,
+    zoomConfig
   }) => {
     const { currentTime, playerState } = livePlayer.useLivePlayerContext();
     const { togglePlayback } = usePlayerControl();
@@ -17672,7 +17838,8 @@ This message will only show in development mode. It won't appear in production.
         onUndo: handleUndo,
         onRedo: handleRedo,
         zoomLevel: trackZoom,
-        setZoomLevel: setTrackZoom
+        setZoomLevel: setTrackZoom,
+        zoomConfig
       }
     ) });
   };
@@ -17683,7 +17850,16 @@ This message will only show in development mode. It won't appear in production.
     editorConfig,
     defaultPlayControls = true
   }) => {
-    const [trackZoom, setTrackZoom] = React.useState(DEFAULT_TIMELINE_ZOOM);
+    const zoomConfig = editorConfig.timelineZoomConfig ?? DEFAULT_TIMELINE_ZOOM_CONFIG;
+    const timelineTickConfigs = (editorConfig == null ? void 0 : editorConfig.timelineTickConfigs) ?? DEFAULT_TIMELINE_TICK_CONFIGS;
+    const elementColors = React.useMemo(
+      () => ({
+        ...DEFAULT_ELEMENT_COLORS,
+        ...(editorConfig == null ? void 0 : editorConfig.elementColors) || {}
+      }),
+      [editorConfig == null ? void 0 : editorConfig.elementColors]
+    );
+    const [trackZoom, setTrackZoom] = React.useState(zoomConfig.default);
     const useMemoizedPlayerManager = React.useMemo(
       () => /* @__PURE__ */ jsxRuntime.jsx(
         PlayerManager,
@@ -17703,8 +17879,22 @@ This message will only show in development mode. It won't appear in production.
       ] }),
       bottomPanel ? bottomPanel : null,
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twick-editor-timeline-section", children: [
-        defaultPlayControls ? /* @__PURE__ */ jsxRuntime.jsx(ControlManager, { trackZoom, setTrackZoom }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(TimelineManager, { trackZoom })
+        defaultPlayControls ? /* @__PURE__ */ jsxRuntime.jsx(
+          ControlManager,
+          {
+            trackZoom,
+            setTrackZoom,
+            zoomConfig
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TimelineManager,
+          {
+            trackZoom,
+            timelineTickConfigs,
+            elementColors
+          }
+        )
       ] })
     ] });
   };
@@ -18054,7 +18244,9 @@ This message will only show in development mode. It won't appear in production.
   exports2.BaseMediaManager = BaseMediaManager;
   exports2.BrowserMediaManager = BrowserMediaManager;
   exports2.DEFAULT_ELEMENT_COLORS = DEFAULT_ELEMENT_COLORS;
+  exports2.DEFAULT_TIMELINE_TICK_CONFIGS = DEFAULT_TIMELINE_TICK_CONFIGS;
   exports2.DEFAULT_TIMELINE_ZOOM = DEFAULT_TIMELINE_ZOOM;
+  exports2.DEFAULT_TIMELINE_ZOOM_CONFIG = DEFAULT_TIMELINE_ZOOM_CONFIG;
   exports2.DRAG_TYPE = DRAG_TYPE;
   exports2.INITIAL_TIMELINE_DATA = INITIAL_TIMELINE_DATA;
   exports2.MIN_DURATION = MIN_DURATION;