@twick/video-editor 0.14.6 → 0.14.7

package/dist/index.mjs

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 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 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) {
@@ -9353,11 +9353,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 +9367,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 +9433,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 +9442,92 @@ 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",
+        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: {
+                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 +9551,8 @@ const SeekControl = ({
   duration,
   zoom,
   timelineCount,
-  onSeek
+  onSeek,
+  timelineTickConfigs
 }) => {
   const { currentTime } = useLivePlayerContext();
   return /* @__PURE__ */ jsx(
@@ -9493,7 +9562,8 @@ const SeekControl = ({
       currentTime,
       zoom,
       onSeek,
-      timelineCount
+      timelineCount,
+      timelineTickConfigs
     }
   );
 };
@@ -16937,6 +17007,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 +17186,8 @@ const TrackElementView = ({
   selectedItem,
   onSelection,
   onDrag,
-  allowOverlap = false
+  allowOverlap = false,
+  elementColors
 }) => {
   const ref = useRef(null);
   const dragType = useRef(null);
@@ -17132,8 +17287,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 +17365,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 +17389,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 +17407,8 @@ function TimelineView({
   onAddTrack,
   onReorder,
   onSelectionChange,
-  onElementDrag
+  onElementDrag,
+  elementColors
 }) {
   const containerRef = useRef(null);
   const seekContainerRef = useRef(null);
@@ -17361,7 +17520,8 @@ function TimelineView({
               allowOverlap: false,
               trackWidth: timelineWidth - labelWidth,
               onItemSelection: handleItemSelection,
-              onDrag: onElementDrag
+              onDrag: onElementDrag,
+              elementColors
             }
           )
         ] }, track.getId())) })
@@ -17424,7 +17584,9 @@ const useTimelineManager = () => {
   };
 };
 const TimelineManager = ({
-  trackZoom
+  trackZoom,
+  timelineTickConfigs,
+  elementColors
 }) => {
   var _a2;
   const { timelineData, totalDuration, selectedItem, onAddTrack, onReorder, onElementDrag, onSeek, onSelectionChange } = useTimelineManager();
@@ -17442,13 +17604,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 +17640,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 +17654,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 +17816,8 @@ const useTimelineControl = () => {
 };
 const ControlManager = ({
   trackZoom,
-  setTrackZoom
+  setTrackZoom,
+  zoomConfig
 }) => {
   const { currentTime, playerState } = useLivePlayerContext();
   const { togglePlayback } = usePlayerControl();
@@ -17672,7 +17838,8 @@ const ControlManager = ({
       onUndo: handleUndo,
       onRedo: handleRedo,
       zoomLevel: trackZoom,
-      setZoomLevel: setTrackZoom
+      setZoomLevel: setTrackZoom,
+      zoomConfig
     }
   ) });
 };
@@ -17683,7 +17850,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,8 +17879,22 @@ 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
+        }
+      )
     ] })
   ] });
 };
@@ -18055,7 +18245,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,