@twick/video-editor 0.14.6 → 0.14.8

package/dist/index.mjs

@@ -3,8 +3,8 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useLivePlayerContext, PLAYER_STATE, LivePlayer } from "@twick/live-player";
-import { useTimelineContext, TIMELINE_ACTION, getCurrentElements, ElementDeserializer, Track, getDecimalNumber, VideoElement, AudioElement, TrackElement } from "@twick/timeline";
-import React, { useState, useRef, useEffect, useCallback, forwardRef, createElement, createContext, useContext, useId, useLayoutEffect, useMemo, useInsertionEffect, Fragment, Component } from "react";
+import { useTimelineContext, TIMELINE_ACTION, getCurrentElements, CaptionElement, ElementDeserializer, Track, getDecimalNumber, VideoElement, AudioElement, TrackElement, ValidationError, VALIDATION_ERROR_CODE } from "@twick/timeline";
+import React, { useState, useRef, useEffect, useMemo, forwardRef, createElement, createContext, useContext, useId, useCallback, useLayoutEffect, useInsertionEffect, Fragment, Component } from "react";
 function t(t2, e3, s2) {
   return (e3 = function(t3) {
     var e4 = function(t4, e5) {
@@ -6851,7 +6851,9 @@ const CANVAS_OPERATIONS = {
   /** 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 @@ const ELEMENT_TYPES = {
   /** 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 @@ const addCaptionElement = ({
   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 @@ const addRectElement = ({
   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 @@ const useTwickCanvas = ({
   const twickCanvasRef = useRef(null);
   const videoSizeRef = useRef({ width: 1, height: 1 });
   const canvasResolutionRef = useRef({ width: 1, height: 1 });
+  const captionPropsRef = useRef(null);
   const canvasMetadataRef = useRef({
     width: 0,
     height: 0,
@@ -7574,7 +7613,7 @@ const useTwickCanvas = ({
     }
   };
   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 @@ const useTwickCanvas = ({
             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 @@ const useTwickCanvas = ({
                     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 @@ const useTwickCanvas = ({
           twickCanvas.renderAll();
         }
       }
+      captionPropsRef.current = captionProps;
       await Promise.all(
         elements.map(async (element, index) => {
           try {
@@ -7758,7 +7823,10 @@ const useTwickCanvas = ({
     }
     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 @@ const useTwickCanvas = ({
           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 @@ const usePlayerManager = ({
   videoProps
 }) => {
   const [projectData, setProjectData] = useState(null);
-  const { timelineAction, setTimelineAction, setSelectedItem, editor, changeLog } = useTimelineContext();
+  const {
+    timelineAction,
+    setTimelineAction,
+    setSelectedItem,
+    editor,
+    changeLog
+  } = useTimelineContext();
   const currentChangeLog = useRef(changeLog);
+  const prevSeekTime = useRef(0);
   const [playerUpdating, setPlayerUpdating] = useState(false);
   const handleCanvasReady = (canvas) => {
     console.log("canvas ready", canvas);
   };
   const handleCanvasOperation = (operation, data) => {
-    const element = 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 = 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 @@ const usePlayerManager = ({
   });
   const updateCanvas = (seekTime) => {
     var _a2;
-    if (changeLog === currentChangeLog.current) {
+    if (changeLog === currentChangeLog.current && seekTime === prevSeekTime.current) {
       return;
     }
+    prevSeekTime.current = seekTime;
     const elements = getCurrentElements(
       seekTime,
       ((_a2 = editor.getTimelineData()) == null ? void 0 : _a2.tracks) ?? []
     );
+    let captionProps = {};
+    (elements || []).forEach((element) => {
+      if (element instanceof 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 @@ const usePlayerManager = ({
     }
   };
   useEffect(() => {
-    var _a2, _b, _c, _d;
+    var _a2, _b, _c, _d, _e2;
     switch (timelineAction.type) {
       case TIMELINE_ACTION.UPDATE_PLAYER_DATA:
         if (videoProps) {
@@ -7901,6 +7999,11 @@ const usePlayerManager = ({
               }
             };
             setProjectData(_latestProjectData);
+            if (((_e2 = timelineAction.payload) == null ? void 0 : _e2.version) === 1) {
+              setTimeout(() => {
+                setPlayerUpdating(false);
+              });
+            }
           } else {
             setTimelineAction(TIMELINE_ACTION.ON_PLAYER_UPDATED, null);
           }
@@ -9353,11 +9456,10 @@ function SeekTrack({
   duration,
   zoom = 1,
   onSeek,
-  timelineCount = 0
+  timelineCount = 0,
+  timelineTickConfigs
 }) {
-  const canvasRef = useRef(null);
   const containerRef = useRef(null);
-  const [containerWidth, setContainerWidth] = useState(0);
   const [isDragging2, setIsDragging] = useState(false);
   const [seekPosition, setSeekPosition] = useState(0);
   const pixelsPerSecond = 100 * zoom;
@@ -9368,61 +9470,62 @@ function SeekTrack({
       setSeekPosition(currentTime * pixelsPerSecond);
     }
   }, [currentTime, pixelsPerSecond, isDragging2]);
-  const drawTimeline = 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 } = 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]);
-  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);
-  }, []);
-  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 @@ function SeekTrack({
     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 @@ function SeekTrack({
     "div",
     {
       ref: containerRef,
-      className: "twick-seek-track-container",
+      className: "twick-seek-track-container-no-scrollbar",
       onClick: (e3) => handleSeek(e3.clientX),
+      style: {
+        overflowX: "auto",
+        overflowY: "hidden",
+        position: "relative",
+        scrollbarWidth: "none",
+        // Firefox
+        msOverflowStyle: "none"
+        // IE/Edge
+      },
       children: [
-        /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs(
+            "div",
+            {
+              style: {
+                overflow: "hidden",
+                position: "relative",
+                width: `${Math.max(1, Math.round(totalWidth))}px`,
+                height: "32px",
+                backgroundColor: "#0f0f0f"
+              },
+              children: [
+                ticks,
+                labels
+              ]
+            }
+          );
+        })(),
         /* @__PURE__ */ 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 @@ const SeekControl = ({
   duration,
   zoom,
   timelineCount,
-  onSeek
+  onSeek,
+  timelineTickConfigs
 }) => {
   const { currentTime } = useLivePlayerContext();
   return /* @__PURE__ */ jsx(
@@ -9493,7 +9667,8 @@ const SeekControl = ({
       currentTime,
       zoom,
       onSeek,
-      timelineCount
+      timelineCount,
+      timelineTickConfigs
     }
   );
 };
@@ -16937,6 +17112,90 @@ const DRAG_TYPE = {
   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 @@ const TrackElementView = ({
   selectedItem,
   onSelection,
   onDrag,
-  allowOverlap = false
+  allowOverlap = false,
+  elementColors
 }) => {
   const ref = useRef(null);
   const dragType = useRef(null);
@@ -17132,8 +17392,9 @@ const TrackElementView = ({
     }
   };
   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 @@ const TrackBase = ({
   selectedItem,
   onItemSelection,
   onDrag,
-  allowOverlap = false
+  allowOverlap = false,
+  elementColors
 }) => {
   const trackRef = useRef(null);
   const trackWidthStyle = `${Math.max(100, duration * zoom * 100)}px`;
@@ -17232,6 +17494,7 @@ const TrackBase = ({
           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 @@ function TimelineView({
   onAddTrack,
   onReorder,
   onSelectionChange,
-  onElementDrag
+  onElementDrag,
+  elementColors
 }) {
   const containerRef = useRef(null);
   const seekContainerRef = useRef(null);
@@ -17361,7 +17625,8 @@ function TimelineView({
               allowOverlap: false,
               trackWidth: timelineWidth - labelWidth,
               onItemSelection: handleItemSelection,
-              onDrag: onElementDrag
+              onDrag: onElementDrag,
+              elementColors
             }
           )
         ] }, track.getId())) })
@@ -17424,7 +17689,9 @@ const useTimelineManager = () => {
   };
 };
 const TimelineManager = ({
-  trackZoom
+  trackZoom,
+  timelineTickConfigs,
+  elementColors
 }) => {
   var _a2;
   const { timelineData, totalDuration, selectedItem, onAddTrack, onReorder, onElementDrag, onSeek, onSelectionChange } = useTimelineManager();
@@ -17442,13 +17709,15 @@ const TimelineManager = ({
       onElementDrag,
       onSeek,
       onSelectionChange,
+      elementColors,
       seekTrack: /* @__PURE__ */ 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 @@ const UndoRedoControls = ({ canUndo, canRedo, onUndo, onRedo }) => {
     )
   ] });
 };
-const MAX_ZOOM = 3;
-const MIN_ZOOM = 0.5;
-const ZOOM_STEP = 0.25;
 const PlayerControls = ({
   selectedItem,
   duration,
@@ -17493,8 +17759,12 @@ const PlayerControls = ({
   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 = useCallback((time2) => {
     const minutes = Math.floor(time2 / 60);
     const seconds = Math.floor(time2 % 60);
@@ -17651,7 +17921,8 @@ const useTimelineControl = () => {
 };
 const ControlManager = ({
   trackZoom,
-  setTrackZoom
+  setTrackZoom,
+  zoomConfig
 }) => {
   const { currentTime, playerState } = useLivePlayerContext();
   const { togglePlayback } = usePlayerControl();
@@ -17672,7 +17943,8 @@ const ControlManager = ({
       onUndo: handleUndo,
       onRedo: handleRedo,
       zoomLevel: trackZoom,
-      setZoomLevel: setTrackZoom
+      setZoomLevel: setTrackZoom,
+      zoomConfig
     }
   ) });
 };
@@ -17683,7 +17955,16 @@ const VideoEditor = ({
   editorConfig,
   defaultPlayControls = true
 }) => {
-  const [trackZoom, setTrackZoom] = 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 = useMemo(
+    () => ({
+      ...DEFAULT_ELEMENT_COLORS,
+      ...(editorConfig == null ? void 0 : editorConfig.elementColors) || {}
+    }),
+    [editorConfig == null ? void 0 : editorConfig.elementColors]
+  );
+  const [trackZoom, setTrackZoom] = useState(zoomConfig.default);
   const useMemoizedPlayerManager = useMemo(
     () => /* @__PURE__ */ jsx(
       PlayerManager,
@@ -17703,11 +17984,73 @@ const VideoEditor = ({
     ] }),
     bottomPanel ? bottomPanel : null,
     /* @__PURE__ */ jsxs("div", { className: "twick-editor-timeline-section", children: [
-      defaultPlayControls ? /* @__PURE__ */ jsx(ControlManager, { trackZoom, setTrackZoom }) : null,
-      /* @__PURE__ */ jsx(TimelineManager, { trackZoom })
+      defaultPlayControls ? /* @__PURE__ */ jsx(
+        ControlManager,
+        {
+          trackZoom,
+          setTrackZoom,
+          zoomConfig
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        TimelineManager,
+        {
+          trackZoom,
+          timelineTickConfigs,
+          elementColors
+        }
+      )
     ] })
   ] });
 };
+const useEditorManager = () => {
+  const { editor, selectedItem, setSelectedItem } = useTimelineContext();
+  const { getCurrentTime } = useLivePlayerContext();
+  const addElement = async (element) => {
+    const currentTime = getCurrentTime();
+    element.setStart(currentTime);
+    try {
+      if (selectedItem instanceof 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 ValidationError) {
+        if (error.errors.includes(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 {
@@ -18055,7 +18398,9 @@ export {
   BaseMediaManager,
   BrowserMediaManager,
   DEFAULT_ELEMENT_COLORS,
+  DEFAULT_TIMELINE_TICK_CONFIGS,
   DEFAULT_TIMELINE_ZOOM,
+  DEFAULT_TIMELINE_ZOOM_CONFIG,
   DRAG_TYPE,
   INITIAL_TIMELINE_DATA,
   MIN_DURATION,
@@ -18066,6 +18411,7 @@ export {
   VideoEditor as default,
   getAnimationGif,
   setElementColors,
+  useEditorManager,
   usePlayerControl,
   useTimelineControl
 };