@twick/video-editor 0.14.6 → 0.14.8

package/dist/index.js

@@ -6851,7 +6851,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     /** An item has been selected on the canvas */
     ITEM_SELECTED: "ITEM_SELECTED",
     /** An item has been updated/modified on the canvas */
-    ITEM_UPDATED: "ITEM_UPDATED"
+    ITEM_UPDATED: "ITEM_UPDATED",
+    /** Caption properties have been updated */
+    CAPTION_PROPS_UPDATED: "CAPTION_PROPS_UPDATED"
   };
   const ELEMENT_TYPES = {
     /** Text element type */
@@ -6863,7 +6865,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     /** Video element type */
     VIDEO: "video",
     /** Rectangle element type */
-    RECT: "rect"
+    RECT: "rect",
+    /** Circle element type */
+    CIRCLE: "circle"
   };
   const isBrowser$2 = typeof window !== "undefined";
   const isCanvasSupported = isBrowser$2 && !!window.HTMLCanvasElement;
@@ -7223,33 +7227,33 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     captionProps,
     canvasMetadata
   }) => {
-    var _a2, _b, _c, _d, _e2, _f, _g, _h, _i2, _j, _k, _l, _m, _n2, _o2, _p, _q, _r2, _s2, _t2, _u, _v, _w, _x, _y, _z, _A;
+    var _a2, _b, _c, _d, _e2, _f, _g, _h, _i2, _j, _k, _l, _m, _n2, _o2, _p, _q, _r2, _s2, _t2, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G;
     const { x: x2, y: y2 } = convertToCanvasPosition(
-      ((_b = (_a2 = element.props) == null ? void 0 : _a2.pos) == null ? void 0 : _b.x) || ((_c = captionProps == null ? void 0 : captionProps.pos) == null ? void 0 : _c.x) || 0,
-      ((_e2 = (_d = element.props) == null ? void 0 : _d.pos) == null ? void 0 : _e2.y) || ((_f = captionProps == null ? void 0 : captionProps.pos) == null ? void 0 : _f.y) || 0,
+      ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.x : (_a2 = element.props) == null ? void 0 : _a2.x) ?? 0,
+      ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.y : (_b = element.props) == null ? void 0 : _b.y) ?? 0,
       canvasMetadata
     );
-    const caption = new ko(((_g = element.props) == null ? void 0 : _g.text) || element.t || "", {
+    const caption = new ko(((_c = element.props) == null ? void 0 : _c.text) || element.t || "", {
       left: x2,
       top: y2,
       originX: "center",
       originY: "center",
-      angle: ((_h = element.props) == null ? void 0 : _h.rotation) || 0,
+      angle: ((_d = element.props) == null ? void 0 : _d.rotation) || 0,
       fontSize: Math.round(
-        (((_j = (_i2 = element.props) == null ? void 0 : _i2.font) == null ? void 0 : _j.size) || ((_k = captionProps.font) == null ? void 0 : _k.size) || DEFAULT_CAPTION_PROPS.size) * canvasMetadata.scaleX
+        (((captionProps == null ? void 0 : captionProps.applyToAll) ? (_e2 = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _e2.size : ((_g = (_f = element.props) == null ? void 0 : _f.font) == null ? void 0 : _g.size) ?? ((_h = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _h.size)) ?? DEFAULT_CAPTION_PROPS.size) * canvasMetadata.scaleX
       ),
-      fontFamily: ((_m = (_l = element.props) == null ? void 0 : _l.font) == null ? void 0 : _m.family) || ((_n2 = captionProps.font) == null ? void 0 : _n2.family) || DEFAULT_CAPTION_PROPS.family,
-      fill: ((_o2 = element.props) == null ? void 0 : _o2.fill) || ((_p = captionProps.color) == null ? void 0 : _p.text) || DEFAULT_CAPTION_PROPS.fill,
-      fontWeight: DEFAULT_CAPTION_PROPS.fontWeight,
-      stroke: ((_q = element.props) == null ? void 0 : _q.stroke) || DEFAULT_CAPTION_PROPS.stroke,
-      opacity: ((_r2 = element.props) == null ? void 0 : _r2.opacity) ?? 1,
+      fontFamily: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_i2 = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _i2.family : ((_k = (_j = element.props) == null ? void 0 : _j.font) == null ? void 0 : _k.family) ?? ((_l = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _l.family)) ?? DEFAULT_CAPTION_PROPS.family,
+      fill: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_m = captionProps.color) == null ? void 0 : _m.text : ((_n2 = element.props) == null ? void 0 : _n2.fill) ?? ((_o2 = captionProps.color) == null ? void 0 : _o2.text)) ?? DEFAULT_CAPTION_PROPS.fill,
+      fontWeight: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_p = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _p.weight : ((_q = element.props) == null ? void 0 : _q.fontWeight) ?? ((_r2 = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _r2.weight)) ?? DEFAULT_CAPTION_PROPS.fontWeight,
+      stroke: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.stroke : ((_s2 = element.props) == null ? void 0 : _s2.stroke) ?? (captionProps == null ? void 0 : captionProps.stroke)) ?? DEFAULT_CAPTION_PROPS.stroke,
+      opacity: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.opacity : ((_t2 = element.props) == null ? void 0 : _t2.opacity) ?? (captionProps == null ? void 0 : captionProps.opacity)) ?? 1,
       shadow: new ds({
-        offsetX: ((_t2 = (_s2 = element.props) == null ? void 0 : _s2.shadowOffset) == null ? void 0 : _t2[0]) || ((_u = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _u[0]),
-        offsetY: ((_w = (_v = element.props) == null ? void 0 : _v.shadowOffset) == null ? void 0 : _w[1]) || ((_x = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _x[1]),
-        blur: ((_y = element.props) == null ? void 0 : _y.shadowBlur) || DEFAULT_CAPTION_PROPS.shadowBlur,
-        color: ((_z = element.props) == null ? void 0 : _z.shadowColor) || DEFAULT_CAPTION_PROPS.shadowColor
+        offsetX: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_u = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _u[0] : ((_w = (_v = element.props) == null ? void 0 : _v.shadowOffset) == null ? void 0 : _w[0]) ?? ((_x = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _x[0])) ?? ((_y = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _y[0]),
+        offsetY: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_z = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _z[1] : ((_B = (_A = element.props) == null ? void 0 : _A.shadowOffset) == null ? void 0 : _B[1]) ?? ((_C = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _C[1])) ?? ((_D = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _D[1]),
+        blur: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.shadowBlur : ((_E = element.props) == null ? void 0 : _E.shadowBlur) ?? (captionProps == null ? void 0 : captionProps.shadowBlur)) ?? DEFAULT_CAPTION_PROPS.shadowBlur,
+        color: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.shadowColor : ((_F = element.props) == null ? void 0 : _F.shadowColor) ?? (captionProps == null ? void 0 : captionProps.shadowColor)) ?? DEFAULT_CAPTION_PROPS.shadowColor
       }),
-      strokeWidth: ((_A = element.props) == null ? void 0 : _A.lineWidth) || DEFAULT_CAPTION_PROPS.lineWidth
+      strokeWidth: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.lineWidth : ((_G = element.props) == null ? void 0 : _G.lineWidth) ?? (captionProps == null ? void 0 : captionProps.lineWidth)) ?? DEFAULT_CAPTION_PROPS.lineWidth
     });
     caption.set("id", element.id);
     caption.set("zIndex", index);
@@ -7476,6 +7480,40 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     canvas.add(rect);
     return rect;
   };
+  const addCircleElement = ({
+    element,
+    index,
+    canvas,
+    canvasMetadata
+  }) => {
+    var _a2, _b, _c, _d, _e2, _f;
+    const { x: x2, y: y2 } = convertToCanvasPosition(
+      ((_a2 = element.props) == null ? void 0 : _a2.x) || 0,
+      ((_b = element.props) == null ? void 0 : _b.y) || 0,
+      canvasMetadata
+    );
+    const circle = new qn({
+      left: x2,
+      // X-coordinate on the canvas
+      top: y2,
+      // Y-coordinate on the canvas
+      radius: (((_c = element.props) == null ? void 0 : _c.radius) || 0) * canvasMetadata.scaleX,
+      fill: ((_d = element.props) == null ? void 0 : _d.fill) || "#000000",
+      stroke: ((_e2 = element.props) == null ? void 0 : _e2.stroke) || "#000000",
+      strokeWidth: (((_f = element.props) == null ? void 0 : _f.lineWidth) || 0) * canvasMetadata.scaleX,
+      originX: "center",
+      originY: "center"
+    });
+    circle.controls.mt = disabledControl;
+    circle.controls.mb = disabledControl;
+    circle.controls.ml = disabledControl;
+    circle.controls.mr = disabledControl;
+    circle.controls.mtr = disabledControl;
+    circle.set("id", element.id);
+    circle.set("zIndex", index);
+    canvas.add(circle);
+    return circle;
+  };
   const addBackgroundColor = ({
     element,
     index,
@@ -7517,6 +7555,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const twickCanvasRef = React.useRef(null);
     const videoSizeRef = React.useRef({ width: 1, height: 1 });
     const canvasResolutionRef = React.useRef({ width: 1, height: 1 });
+    const captionPropsRef = React.useRef(null);
     const canvasMetadataRef = React.useRef({
       width: 0,
       height: 0,
@@ -7574,7 +7613,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     };
     const handleMouseUp = (event) => {
-      var _a2, _b;
+      var _a2, _b, _c;
       if (event.target) {
         const object = event.target;
         const elementId = object.get("id");
@@ -7601,20 +7640,29 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               videoSizeRef.current
             );
             if (elementMap.current[elementId].type === "caption") {
-              elementMap.current[elementId] = {
-                ...elementMap.current[elementId],
-                props: {
-                  ...elementMap.current[elementId].props,
-                  pos: {
+              if ((_c = captionPropsRef.current) == null ? void 0 : _c.applyToAll) {
+                onCanvasOperation == null ? void 0 : onCanvasOperation(CANVAS_OPERATIONS.CAPTION_PROPS_UPDATED, {
+                  element: elementMap.current[elementId],
+                  props: {
+                    ...captionPropsRef.current,
                     x: x2,
                     y: y2
                   }
-                }
-              };
-              onCanvasOperation == null ? void 0 : onCanvasOperation(
-                CANVAS_OPERATIONS.ITEM_UPDATED,
-                elementMap.current[elementId]
-              );
+                });
+              } else {
+                elementMap.current[elementId] = {
+                  ...elementMap.current[elementId],
+                  props: {
+                    ...elementMap.current[elementId].props,
+                    x: x2,
+                    y: y2
+                  }
+                };
+                onCanvasOperation == null ? void 0 : onCanvasOperation(
+                  CANVAS_OPERATIONS.ITEM_UPDATED,
+                  elementMap.current[elementId]
+                );
+              }
             } else {
               if ((object == null ? void 0 : object.type) === "group") {
                 const currentFrameEffect = elementFrameMap.current[elementId];
@@ -7678,6 +7726,22 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       y: y2
                     }
                   };
+                } else if ((object == null ? void 0 : object.type) === "circle") {
+                  const radius = Number(
+                    (elementMap.current[elementId].props.radius * object.scaleX).toFixed(2)
+                  );
+                  elementMap.current[elementId] = {
+                    ...elementMap.current[elementId],
+                    props: {
+                      ...elementMap.current[elementId].props,
+                      rotation: object.angle,
+                      radius,
+                      height: radius * 2,
+                      width: radius * 2,
+                      x: x2,
+                      y: y2
+                    }
+                  };
                 } else {
                   elementMap.current[elementId] = {
                     ...elementMap.current[elementId],
@@ -7720,6 +7784,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             twickCanvas.renderAll();
           }
         }
+        captionPropsRef.current = captionProps;
         await Promise.all(
           elements.map(async (element, index) => {
             try {
@@ -7758,7 +7823,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       switch (element.type) {
         case ELEMENT_TYPES.VIDEO:
-          const currentFrameEffect = getCurrentFrameEffect(element, seekTime || 0);
+          const currentFrameEffect = getCurrentFrameEffect(
+            element,
+            seekTime || 0
+          );
           elementFrameMap.current[element.id] = currentFrameEffect;
           const snapTime = ((seekTime || 0) - ((element == null ? void 0 : element.s) || 0)) * (((_a2 = element == null ? void 0 : element.props) == null ? void 0 : _a2.playbackRate) || 1) + (((_b = element == null ? void 0 : element.props) == null ? void 0 : _b.time) || 0);
           await addVideoElement({
@@ -7802,6 +7870,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             canvasMetadata: canvasMetadataRef.current
           });
           break;
+        case ELEMENT_TYPES.CIRCLE:
+          await addCircleElement({
+            element,
+            index,
+            canvas: twickCanvas,
+            canvasMetadata: canvasMetadataRef.current
+          });
+          break;
         case ELEMENT_TYPES.TEXT:
           await addTextElement({
             element,
@@ -7837,25 +7913,39 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     videoProps
   }) => {
     const [projectData, setProjectData] = React.useState(null);
-    const { timelineAction, setTimelineAction, setSelectedItem, editor, changeLog } = timeline.useTimelineContext();
+    const {
+      timelineAction,
+      setTimelineAction,
+      setSelectedItem,
+      editor,
+      changeLog
+    } = timeline.useTimelineContext();
     const currentChangeLog = React.useRef(changeLog);
+    const prevSeekTime = React.useRef(0);
     const [playerUpdating, setPlayerUpdating] = React.useState(false);
     const handleCanvasReady = (canvas) => {
       console.log("canvas ready", canvas);
     };
     const handleCanvasOperation = (operation, data) => {
-      const element = timeline.ElementDeserializer.fromJSON(data);
-      switch (operation) {
-        case CANVAS_OPERATIONS.ITEM_SELECTED:
-          setSelectedItem(element);
-          break;
-        case CANVAS_OPERATIONS.ITEM_UPDATED:
-          if (element) {
-            const updatedElement = editor.updateElement(element);
-            currentChangeLog.current = currentChangeLog.current + 1;
-            setSelectedItem(updatedElement);
-          }
-          break;
+      if (operation === CANVAS_OPERATIONS.CAPTION_PROPS_UPDATED) {
+        const subtitlesTrack = editor.getSubtiltesTrack();
+        subtitlesTrack == null ? void 0 : subtitlesTrack.setProps(data.props);
+        setSelectedItem(data.element);
+        editor.refresh();
+      } else {
+        const element = timeline.ElementDeserializer.fromJSON(data);
+        switch (operation) {
+          case CANVAS_OPERATIONS.ITEM_SELECTED:
+            setSelectedItem(element);
+            break;
+          case CANVAS_OPERATIONS.ITEM_UPDATED:
+            if (element) {
+              const updatedElement = editor.updateElement(element);
+              currentChangeLog.current = currentChangeLog.current + 1;
+              setSelectedItem(updatedElement);
+            }
+            break;
+        }
       }
     };
     const { twickCanvas, buildCanvas, setCanvasElements } = useTwickCanvas({
@@ -7864,17 +7954,25 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     });
     const updateCanvas = (seekTime) => {
       var _a2;
-      if (changeLog === currentChangeLog.current) {
+      if (changeLog === currentChangeLog.current && seekTime === prevSeekTime.current) {
         return;
       }
+      prevSeekTime.current = seekTime;
       const elements = timeline.getCurrentElements(
         seekTime,
         ((_a2 = editor.getTimelineData()) == null ? void 0 : _a2.tracks) ?? []
       );
+      let captionProps = {};
+      (elements || []).forEach((element) => {
+        if (element instanceof timeline.CaptionElement) {
+          const track = editor.getTrackById(element.getTrackId());
+          captionProps = (track == null ? void 0 : track.getProps()) ?? {};
+        }
+      });
       setCanvasElements({
         elements,
         seekTime,
-        captionProps: {},
+        captionProps,
         cleanAndAdd: true
       });
       currentChangeLog.current = changeLog;
@@ -7887,7 +7985,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     };
     React.useEffect(() => {
-      var _a2, _b, _c, _d;
+      var _a2, _b, _c, _d, _e2;
       switch (timelineAction.type) {
         case timeline.TIMELINE_ACTION.UPDATE_PLAYER_DATA:
           if (videoProps) {
@@ -7901,6 +7999,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 }
               };
               setProjectData(_latestProjectData);
+              if (((_e2 = timelineAction.payload) == null ? void 0 : _e2.version) === 1) {
+                setTimeout(() => {
+                  setPlayerUpdating(false);
+                });
+              }
             } else {
               setTimelineAction(timeline.TIMELINE_ACTION.ON_PLAYER_UPDATED, null);
             }
@@ -9353,11 +9456,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 +9470,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 +9536,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 +9545,94 @@ 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",
+          overflowY: "hidden",
+          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: {
+                  overflow: "hidden",
+                  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 +9656,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 +9667,8 @@ This message will only show in development mode. It won't appear in production.
         currentTime,
         zoom,
         onSeek,
-        timelineCount
+        timelineCount,
+        timelineTickConfigs
       }
     );
   };
@@ -16937,6 +17112,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 +17291,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 +17392,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 +17470,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 +17494,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 +17512,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 +17625,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 +17689,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 +17709,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 +17745,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 +17759,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);
@@ -17651,7 +17921,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 +17943,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 +17955,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,11 +17984,73 @@ 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
+          }
+        )
       ] })
     ] });
   };
+  const useEditorManager = () => {
+    const { editor, selectedItem, setSelectedItem } = timeline.useTimelineContext();
+    const { getCurrentTime } = livePlayer.useLivePlayerContext();
+    const addElement = async (element) => {
+      const currentTime = getCurrentTime();
+      element.setStart(currentTime);
+      try {
+        if (selectedItem instanceof timeline.Track) {
+          const result = await editor.addElementToTrack(selectedItem, element);
+          if (result) {
+            setSelectedItem(element);
+          }
+        } else {
+          const newTrack = editor.addTrack(`Track_${Date.now()}`);
+          const result = await editor.addElementToTrack(newTrack, element);
+          if (result) {
+            setSelectedItem(element);
+          }
+        }
+      } catch (error) {
+        if (error instanceof timeline.ValidationError) {
+          if (error.errors.includes(timeline.VALIDATION_ERROR_CODE.COLLISION_ERROR)) {
+            try {
+              const newTrack = editor.addTrack(`Track_${Date.now()}`);
+              const result = await editor.addElementToTrack(newTrack, element);
+              if (result) {
+                setSelectedItem(element);
+              }
+            } catch (error2) {
+            }
+          } else {
+            console.log("TIMELINE ERROR: ", error.errors);
+          }
+        } else {
+          console.log("TIMELINE ERROR: ", error);
+        }
+      }
+    };
+    const updateElement = (element) => {
+      const updatedElement = editor.updateElement(element);
+      editor.refresh();
+      setSelectedItem(updatedElement);
+    };
+    return {
+      addElement,
+      updateElement
+    };
+  };
   class BaseMediaManager {
   }
   class BrowserMediaManager extends BaseMediaManager {
@@ -18054,7 +18397,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;
@@ -18065,6 +18410,7 @@ This message will only show in development mode. It won't appear in production.
   exports2.default = VideoEditor;
   exports2.getAnimationGif = getAnimationGif;
   exports2.setElementColors = setElementColors;
+  exports2.useEditorManager = useEditorManager;
   exports2.usePlayerControl = usePlayerControl;
   exports2.useTimelineControl = useTimelineControl;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });