@twick/video-editor 0.14.3 → 0.14.5

package/dist/index.mjs

@@ -6936,10 +6936,19 @@ const reorderElementsByZIndex = (canvas) => {
   objects.forEach((obj) => canvas.add(obj));
   canvas.renderAll();
 };
+const getCanvasContext = (canvas) => {
+  var _a2, _b, _c, _d;
+  if (!canvas || !((_b = (_a2 = canvas.elements) == null ? void 0 : _a2.lower) == null ? void 0 : _b.ctx)) return;
+  return (_d = (_c = canvas.elements) == null ? void 0 : _c.lower) == null ? void 0 : _d.ctx;
+};
 const clearCanvas = (canvas) => {
-  if (!canvas) return;
-  canvas.clear();
-  canvas.renderAll();
+  try {
+    if (!canvas || !getCanvasContext(canvas)) return;
+    canvas.clear();
+    canvas.renderAll();
+  } catch (error) {
+    console.warn("Error clearing canvas:", error);
+  }
 };
 const convertToCanvasPosition = (x2, y2, canvasMetadata) => {
   return {
@@ -6949,8 +6958,8 @@ const convertToCanvasPosition = (x2, y2, canvasMetadata) => {
 };
 const convertToVideoPosition = (x2, y2, canvasMetadata, videoSize) => {
   return {
-    x: x2 / canvasMetadata.scaleX - videoSize.width / 2,
-    y: y2 / canvasMetadata.scaleY - videoSize.height / 2
+    x: Number((x2 / canvasMetadata.scaleX - videoSize.width / 2).toFixed(2)),
+    y: Number((y2 / canvasMetadata.scaleY - videoSize.height / 2).toFixed(2))
   };
 };
 const getCurrentFrameEffect = (item, seekTime) => {
@@ -6985,7 +6994,7 @@ const disabledControl = new Hs({
     ctx.save();
     ctx.translate(left, top);
     ctx.fillStyle = "#red";
-    ctx.fillRect(-0 / 2, -0 / 2, size, size);
+    ctx.fillRect(-size / 2, -size / 2, size, size);
     ctx.restore();
   }
 });
@@ -7085,7 +7094,7 @@ const getThumbnail = async (videoUrl, seekTime = 0.1, playbackRate = 1) => {
     timeoutId = window.setTimeout(() => {
       cleanup();
       reject(new Error("Video loading timed out"));
-    }, 5e3);
+    }, 15e3);
     video.src = videoUrl;
     document.body.appendChild(video);
   });
@@ -7136,7 +7145,7 @@ const addTextElement = ({
   canvas,
   canvasMetadata
 }) => {
-  var _a2, _b, _c, _d, _e2, _f, _g, _h, _i2, _j, _k, _l, _m, _n2, _o2, _p, _q, _r2, _s2, _t2, _u, _v;
+  var _a2, _b, _c, _d, _e2, _f, _g, _h, _i2, _j, _k, _l, _m, _n2, _o2, _p, _q, _r2, _s2, _t2, _u, _v, _w;
   const { x: x2, y: y2 } = convertToCanvasPosition(
     ((_a2 = element.props) == null ? void 0 : _a2.x) || 0,
     ((_b = element.props) == null ? void 0 : _b.y) || 0,
@@ -7155,15 +7164,16 @@ const addTextElement = ({
     fontStyle: ((_g = element.props) == null ? void 0 : _g.fontStyle) || "normal",
     fontWeight: ((_h = element.props) == null ? void 0 : _h.fontWeight) || "normal",
     fill: ((_i2 = element.props) == null ? void 0 : _i2.fill) || DEFAULT_TEXT_PROPS.fill,
+    opacity: ((_j = element.props) == null ? void 0 : _j.opacity) ?? 1,
     skipWrapping: false,
-    textAlign: ((_j = element.props) == null ? void 0 : _j.textAlign) || "center",
-    stroke: ((_k = element.props) == null ? void 0 : _k.stroke) || DEFAULT_TEXT_PROPS.stroke,
-    strokeWidth: ((_l = element.props) == null ? void 0 : _l.lineWidth) || DEFAULT_TEXT_PROPS.lineWidth,
-    shadow: ((_m = element.props) == null ? void 0 : _m.shadowColor) ? new ds({
-      offsetX: ((_o2 = (_n2 = element.props) == null ? void 0 : _n2.shadowOffset) == null ? void 0 : _o2.length) && ((_q = (_p = element.props) == null ? void 0 : _p.shadowOffset) == null ? void 0 : _q.length) > 1 ? element.props.shadowOffset[0] / 2 : 1,
-      offsetY: ((_s2 = (_r2 = element.props) == null ? void 0 : _r2.shadowOffset) == null ? void 0 : _s2.length) && ((_t2 = element.props) == null ? void 0 : _t2.shadowOffset.length) > 1 ? element.props.shadowOffset[1] / 2 : 1,
-      blur: (((_u = element.props) == null ? void 0 : _u.shadowBlur) || 2) / 2,
-      color: (_v = element.props) == null ? void 0 : _v.shadowColor
+    textAlign: ((_k = element.props) == null ? void 0 : _k.textAlign) || "center",
+    stroke: ((_l = element.props) == null ? void 0 : _l.stroke) || DEFAULT_TEXT_PROPS.stroke,
+    strokeWidth: ((_m = element.props) == null ? void 0 : _m.lineWidth) || DEFAULT_TEXT_PROPS.lineWidth,
+    shadow: ((_n2 = element.props) == null ? void 0 : _n2.shadowColor) ? new ds({
+      offsetX: ((_p = (_o2 = element.props) == null ? void 0 : _o2.shadowOffset) == null ? void 0 : _p.length) && ((_r2 = (_q = element.props) == null ? void 0 : _q.shadowOffset) == null ? void 0 : _r2.length) > 1 ? element.props.shadowOffset[0] / 2 : 1,
+      offsetY: ((_t2 = (_s2 = element.props) == null ? void 0 : _s2.shadowOffset) == null ? void 0 : _t2.length) && ((_u = element.props) == null ? void 0 : _u.shadowOffset.length) > 1 ? element.props.shadowOffset[1] / 2 : 1,
+      blur: (((_v = element.props) == null ? void 0 : _v.shadowBlur) || 2) / 2,
+      color: (_w = element.props) == null ? void 0 : _w.shadowColor
     }) : void 0
   });
   text.set("id", element.id);
@@ -7186,7 +7196,7 @@ const setImageProps = ({
   index,
   canvasMetadata
 }) => {
-  var _a2, _b, _c, _d;
+  var _a2, _b, _c, _d, _e2;
   const width = (((_a2 = element.props) == null ? void 0 : _a2.width) || 0) * canvasMetadata.scaleX || canvasMetadata.width;
   const height = (((_b = element.props) == null ? void 0 : _b.height) || 0) * canvasMetadata.scaleY || canvasMetadata.height;
   const { x: x2, y: y2 } = convertToCanvasPosition(
@@ -7201,6 +7211,7 @@ const setImageProps = ({
   img.set("height", height);
   img.set("left", x2);
   img.set("top", y2);
+  img.set("opacity", ((_e2 = element.props) == null ? void 0 : _e2.opacity) ?? 1);
   img.set("selectable", true);
   img.set("hasControls", true);
   img.set("touchAction", "all");
@@ -7212,7 +7223,7 @@ 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;
+  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;
   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,
@@ -7231,13 +7242,14 @@ const addCaptionElement = ({
     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,
     shadow: new ds({
-      offsetX: ((_s2 = (_r2 = element.props) == null ? void 0 : _r2.shadowOffset) == null ? void 0 : _s2[0]) || ((_t2 = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _t2[0]),
-      offsetY: ((_v = (_u = element.props) == null ? void 0 : _u.shadowOffset) == null ? void 0 : _v[1]) || ((_w = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _w[1]),
-      blur: ((_x = element.props) == null ? void 0 : _x.shadowBlur) || DEFAULT_CAPTION_PROPS.shadowBlur,
-      color: ((_y = element.props) == null ? void 0 : _y.shadowColor) || DEFAULT_CAPTION_PROPS.shadowColor
+      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
     }),
-    strokeWidth: ((_z = element.props) == null ? void 0 : _z.lineWidth) || DEFAULT_CAPTION_PROPS.lineWidth
+    strokeWidth: ((_A = element.props) == null ? void 0 : _A.lineWidth) || DEFAULT_CAPTION_PROPS.lineWidth
   });
   caption.set("id", element.id);
   caption.set("zIndex", index);
@@ -7328,7 +7340,7 @@ const addMediaGroup = ({
   canvasMetadata,
   currentFrameEffect
 }) => {
-  var _a2, _b, _c, _d, _e2, _f, _g, _h, _i2, _j, _k, _l, _m;
+  var _a2, _b, _c, _d, _e2, _f, _g, _h, _i2, _j, _k, _l, _m, _n2;
   let frameSize;
   let angle;
   let framePosition;
@@ -7383,7 +7395,8 @@ const addMediaGroup = ({
     originX: "center",
     originY: "center",
     scaleX: newSize.width / img.width,
-    scaleY: newSize.height / img.height
+    scaleY: newSize.height / img.height,
+    opacity: ((_n2 = element.props) == null ? void 0 : _n2.opacity) ?? 1
   });
   const { x: x2, y: y2 } = convertToCanvasPosition(
     (framePosition == null ? void 0 : framePosition.x) || 0,
@@ -7503,6 +7516,7 @@ const useTwickCanvas = ({
   const elementFrameMap = useRef({});
   const twickCanvasRef = useRef(null);
   const videoSizeRef = useRef({ width: 1, height: 1 });
+  const canvasResolutionRef = useRef({ width: 1, height: 1 });
   const canvasMetadataRef = useRef({
     width: 0,
     height: 0,
@@ -7526,9 +7540,13 @@ const useTwickCanvas = ({
     selectionLineWidth = 2,
     uniScaleTransform = true,
     enableRetinaScaling = true,
-    touchZoomThreshold = 10
+    touchZoomThreshold = 10,
+    forceBuild = false
   }) => {
     if (!canvasRef) return;
+    if (!forceBuild && canvasResolutionRef.current.width === canvasSize.width && canvasResolutionRef.current.height === canvasSize.height) {
+      return;
+    }
     if (twickCanvasRef.current) {
       console.log("Destroying twickCanvas");
       twickCanvasRef.current.off("mouse:up", handleMouseUp);
@@ -7548,6 +7566,7 @@ const useTwickCanvas = ({
     canvasMetadataRef.current = canvasMetadata;
     videoSizeRef.current = videoSize;
     canvas == null ? void 0 : canvas.on("mouse:up", handleMouseUp);
+    canvasResolutionRef.current = canvasSize;
     setTwickCanvas(canvas);
     twickCanvasRef.current = canvas;
     if (onCanvasReady) {
@@ -7688,13 +7707,18 @@ const useTwickCanvas = ({
     captionProps,
     cleanAndAdd = false
   }) => {
-    if (!twickCanvas) {
-      console.warn("Canvas not initialized");
+    if (!twickCanvas || !getCanvasContext(twickCanvas)) {
+      console.warn("Canvas not properly initialized");
       return;
     }
     try {
-      if (cleanAndAdd) {
+      if (cleanAndAdd && getCanvasContext(twickCanvas)) {
+        const backgroundColor = twickCanvas.backgroundColor;
         clearCanvas(twickCanvas);
+        if (backgroundColor) {
+          twickCanvas.backgroundColor = backgroundColor;
+          twickCanvas.renderAll();
+        }
       }
       await Promise.all(
         elements.map(async (element, index) => {
@@ -7813,7 +7837,8 @@ const usePlayerManager = ({
   videoProps
 }) => {
   const [projectData, setProjectData] = useState(null);
-  const { timelineAction, setTimelineAction, setSelectedItem, editor } = useTimelineContext();
+  const { timelineAction, setTimelineAction, setSelectedItem, editor, changeLog } = useTimelineContext();
+  const currentChangeLog = useRef(changeLog);
   const [playerUpdating, setPlayerUpdating] = useState(false);
   const handleCanvasReady = (canvas) => {
     console.log("canvas ready", canvas);
@@ -7826,7 +7851,9 @@ const usePlayerManager = ({
         break;
       case CANVAS_OPERATIONS.ITEM_UPDATED:
         if (element) {
-          editor.updateElement(element);
+          const updatedElement = editor.updateElement(element);
+          currentChangeLog.current = currentChangeLog.current + 1;
+          setSelectedItem(updatedElement);
         }
         break;
     }
@@ -7837,6 +7864,9 @@ const usePlayerManager = ({
   });
   const updateCanvas = (seekTime) => {
     var _a2;
+    if (changeLog === currentChangeLog.current) {
+      return;
+    }
     const elements = getCurrentElements(
       seekTime,
       ((_a2 = editor.getTimelineData()) == null ? void 0 : _a2.tracks) ?? []
@@ -7847,6 +7877,7 @@ const usePlayerManager = ({
       captionProps: {},
       cleanAndAdd: true
     });
+    currentChangeLog.current = changeLog;
   };
   const onPlayerUpdate = (event) => {
     var _a2;
@@ -7888,6 +7919,7 @@ const usePlayerManager = ({
 };
 const PlayerManager = ({
   videoProps,
+  playerProps,
   canvasMode
 }) => {
   const { changeLog } = useTimelineContext();
@@ -7909,6 +7941,7 @@ const PlayerManager = ({
       height: container == null ? void 0 : container.clientHeight
     };
     buildCanvas({
+      backgroundColor: videoProps.backgroundColor,
       videoSize: {
         width: videoProps.width,
         height: videoProps.height
@@ -7953,6 +7986,7 @@ const PlayerManager = ({
           {
             seekTime,
             projectData,
+            quality: playerProps == null ? void 0 : playerProps.quality,
             videoSize: {
               width: videoProps.width,
               height: videoProps.height
@@ -9568,7 +9602,7 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$a = [
+const __iconNode$b = [
   ["circle", { cx: "9", cy: "12", r: "1", key: "1vctgf" }],
   ["circle", { cx: "9", cy: "5", r: "1", key: "hp0tcf" }],
   ["circle", { cx: "9", cy: "19", r: "1", key: "fkjjf6" }],
@@ -9576,45 +9610,56 @@ const __iconNode$a = [
   ["circle", { cx: "15", cy: "5", r: "1", key: "19l28e" }],
   ["circle", { cx: "15", cy: "19", r: "1", key: "f4zoj3" }]
 ];
-const GripVertical = createLucideIcon("grip-vertical", __iconNode$a);
+const GripVertical = createLucideIcon("grip-vertical", __iconNode$b);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$9 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-const LoaderCircle = createLucideIcon("loader-circle", __iconNode$9);
+const __iconNode$a = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+const LoaderCircle = createLucideIcon("loader-circle", __iconNode$a);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$8 = [
+const __iconNode$9 = [
   ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2", key: "1w4ew1" }],
   ["path", { d: "M7 11V7a5 5 0 0 1 10 0v4", key: "fwvmzm" }]
 ];
-const Lock = createLucideIcon("lock", __iconNode$8);
+const Lock = createLucideIcon("lock", __iconNode$9);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$7 = [
+const __iconNode$8 = [
   ["rect", { x: "14", y: "4", width: "4", height: "16", rx: "1", key: "zuxfzm" }],
   ["rect", { x: "6", y: "4", width: "4", height: "16", rx: "1", key: "1okwgv" }]
 ];
-const Pause = createLucideIcon("pause", __iconNode$7);
+const Pause = createLucideIcon("pause", __iconNode$8);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$6 = [["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]];
-const Play = createLucideIcon("play", __iconNode$6);
+const __iconNode$7 = [["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]];
+const Play = createLucideIcon("play", __iconNode$7);
+/**
+ * @license lucide-react v0.511.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$6 = [
+  ["path", { d: "M5 12h14", key: "1ays0h" }],
+  ["path", { d: "M12 5v14", key: "s699le" }]
+];
+const Plus = createLucideIcon("plus", __iconNode$6);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
@@ -12511,7 +12556,7 @@ function findSpring({ duration = springDefaults.duration, bounce = springDefault
     envelope = (undampedFreq2) => {
       const a2 = Math.exp(-undampedFreq2 * duration);
       const b2 = (undampedFreq2 - velocity) * duration + 1;
-      return -1e-3 + a2 * b2;
+      return -safeMin + a2 * b2;
     };
     derivative = (undampedFreq2) => {
       const a2 = Math.exp(-undampedFreq2 * duration);
@@ -16893,30 +16938,34 @@ const DRAG_TYPE = {
 };
 const DEFAULT_TIMELINE_ZOOM = 1.5;
 const DEFAULT_ELEMENT_COLORS = {
-  /** Fragment element color */
-  fragment: "#111111",
-  /** Video element color - muted deep violet */
-  video: "#4B2E83",
-  /** Caption element color - faded violet/blue */
-  caption: "#5C5470",
-  /** Image element color - earthy brown-orange */
-  image: "#805A38",
-  /** Audio element color - dark muted teal-green */
-  audio: "#3C665B",
-  /** Text element color - dusty steel blue */
-  text: "#375A7F",
-  /** Generic element color - muted berry purple */
-  element: "#6B3A5B",
-  /** Rectangle element color - desaturated deep indigo */
-  rect: "#4C3A72",
-  /** Frame effect color - dusty rose/maroon */
-  frameEffect: "#703C57",
-  /** Filters color - muted twilight purple */
-  filters: "#5A4C82",
-  /** Transition color - toasted copper */
-  transition: "#7A573A",
-  /** Animation color - slate pine green */
-  animation: "#32645C"
+  /** Fragment element color - deep charcoal matching UI background */
+  fragment: "#1A1A1A",
+  /** Video element color - vibrant royal purple */
+  video: "#8B5FBF",
+  /** Caption element color - soft wisteria purple */
+  caption: "#9B8ACE",
+  /** Image element color - warm copper accent */
+  image: "#D4956C",
+  /** Audio element color - deep teal */
+  audio: "#3D8B8B",
+  /** Text element color - medium lavender */
+  text: "#8D74C4",
+  /** Generic element color - muted amethyst */
+  element: "#7B68B8",
+  /** Rectangle element color - deep indigo */
+  rect: "#5B4B99",
+  /** Frame effect color - rich magenta */
+  frameEffect: "#B55B9C",
+  /** Filters color - periwinkle blue */
+  filters: "#7A89D4",
+  /** Transition color - burnished bronze */
+  transition: "#BE8157",
+  /** Animation color - muted emerald */
+  animation: "#4B9B78",
+  /** Icon element color - bright orchid */
+  icon: "#A76CD4",
+  /** Circle element color - deep byzantium */
+  circle: "#703D8B"
 };
 const AVAILABLE_TEXT_FONTS = {
   // Google Fonts
@@ -16968,6 +17017,12 @@ const AVAILABLE_TEXT_FONTS = {
   BRITTANY_SIGNATURE: "Brittany Signature"
 };
 let ELEMENT_COLORS = { ...DEFAULT_ELEMENT_COLORS };
+const setElementColors = (colors) => {
+  ELEMENT_COLORS = {
+    ...DEFAULT_ELEMENT_COLORS,
+    ...colors
+  };
+};
 const TrackElementView = ({
   element,
   parentWidth,
@@ -17002,10 +17057,12 @@ const TrackElementView = ({
       const span = prev.end - prev.start;
       let newStart = Math.max(0, prev.start + dx / parentWidth * duration);
       newStart = Math.min(newStart, prev.end - MIN_DURATION);
-      if (prevEnd !== null && !allowOverlap && newStart < prevEnd) {
-        newStart = prevEnd;
-      } else if (nextStart !== null && !allowOverlap && newStart + span > nextStart) {
-        newStart = nextStart - span;
+      if (!allowOverlap) {
+        if (prevEnd !== null && newStart < prevEnd) {
+          newStart = prevEnd;
+        } else if (nextStart !== null && !allowOverlap && newStart + span > nextStart) {
+          newStart = nextStart - span;
+        }
       }
       return {
         start: newStart,
@@ -17046,8 +17103,10 @@ const TrackElementView = ({
     setPosition((prev) => {
       let newEnd = prev.end + dx / parentWidth * duration;
       newEnd = Math.max(newEnd, prev.start + MIN_DURATION);
-      if (nextStart !== null && !allowOverlap && newEnd > nextStart) {
-        newEnd = nextStart;
+      if (!allowOverlap) {
+        if (nextStart !== null && newEnd > nextStart) {
+          newEnd = nextStart;
+        }
       }
       return {
         start: prev.start,
@@ -17084,11 +17143,19 @@ const TrackElementView = ({
   const motionProps = {
     ref,
     className: `twick-track-element ${isSelected ? "twick-track-element-selected" : "twick-track-element-default"} ${isDragging2 ? "twick-track-element-dragging" : ""}`,
-    onMouseDown: setLastPos,
-    onTouchStart: setLastPos,
+    onMouseDown: (e3) => {
+      if (e3.target === ref.current) {
+        setLastPos();
+      }
+    },
+    onTouchStart: (e3) => {
+      if (e3.target === ref.current) {
+        setLastPos();
+      }
+    },
     onMouseUp: sendUpdate,
     onTouchEnd: sendUpdate,
-    onDoubleClick: () => {
+    onClick: () => {
       if (onSelection) {
         onSelection(element);
       }
@@ -17104,7 +17171,7 @@ const TrackElementView = ({
     isSelected ? /* @__PURE__ */ jsx(
       "div",
       {
-        style: { touchAction: "none" },
+        style: { touchAction: "none", zIndex: isSelected ? 100 : 1 },
         ...bindStartHandle(),
         className: "twick-track-element-handle twick-track-element-handle-start"
       }
@@ -17113,7 +17180,7 @@ const TrackElementView = ({
     isSelected ? /* @__PURE__ */ jsx(
       "div",
       {
-        style: { touchAction: "none" },
+        style: { touchAction: "none", zIndex: isSelected ? 100 : 1 },
         ...bindEndHandle(),
         className: "twick-track-element-handle twick-track-element-handle-end"
       }
@@ -17165,7 +17232,7 @@ const TrackBase = ({
           selectedItem,
           onSelection: onItemSelection,
           onDrag,
-          nextStart: index < elements.length - 1 ? elements[index + 1].getStart() : duration,
+          nextStart: index < elements.length - 1 ? elements[index + 1].getStart() : null,
           prevEnd: index > 0 ? elements[index - 1].getEnd() : 0
         },
         element.getId()
@@ -17179,6 +17246,7 @@ function TimelineView({
   duration,
   tracks,
   seekTrack,
+  onAddTrack,
   onReorder,
   onSelectionChange,
   onElementDrag
@@ -17268,7 +17336,7 @@ function TimelineView({
       onScroll: handleScroll,
       children: [
         /* @__PURE__ */ jsx("div", { style: { width: timelineWidthPx }, children: seekTrack ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", position: "relative" }, children: [
-          /* @__PURE__ */ jsx("div", { className: "twick-seek-track-empty-space" }),
+          /* @__PURE__ */ jsx("div", { className: "twick-seek-track-empty-space", onClick: onAddTrack, children: /* @__PURE__ */ jsx(Plus, { color: "white", size: 20 }) }),
           /* @__PURE__ */ jsx("div", { style: { flexGrow: 1 }, children: seekTrack })
         ] }) : null }),
         /* @__PURE__ */ jsx("div", { ref: timelineContentRef, style: { width: timelineWidthPx }, children: (tracks || []).map((track) => /* @__PURE__ */ jsxs("div", { className: "twick-timeline-container", children: [
@@ -17302,13 +17370,7 @@ function TimelineView({
   );
 }
 const useTimelineManager = () => {
-  const {
-    selectedItem,
-    changeLog,
-    setSelectedItem,
-    totalDuration,
-    editor
-  } = useTimelineContext();
+  const { selectedItem, changeLog, setSelectedItem, totalDuration, editor } = useTimelineContext();
   const onElementDrag = ({
     element,
     dragType,
@@ -17327,7 +17389,8 @@ const useTimelineManager = () => {
     }
     element.setStart(updates.start);
     element.setEnd(updates.end);
-    editor.updateElement(element);
+    const updatedElement = editor.updateElement(element);
+    setSelectedItem(updatedElement);
   };
   const timelineData = useMemo(() => {
     const timelineDataFromEditor = editor.getTimelineData();
@@ -17344,8 +17407,14 @@ const useTimelineManager = () => {
   const onSelectionChange = (selectedItem2) => {
     setSelectedItem(selectedItem2);
   };
+  const onAddTrack = () => {
+    var _a2;
+    const tracks = ((_a2 = editor.getTimelineData()) == null ? void 0 : _a2.tracks) || [];
+    editor.addTrack(`Track_${tracks.length + 1}`);
+  };
   return {
     timelineData,
+    onAddTrack,
     onElementDrag,
     onReorder,
     onSeek,
@@ -17355,21 +17424,20 @@ const useTimelineManager = () => {
   };
 };
 const TimelineManager = ({
-  timelineControls,
   trackZoom
 }) => {
   var _a2;
-  const { timelineData, totalDuration, selectedItem, onReorder, onElementDrag, onSeek, onSelectionChange } = useTimelineManager();
+  const { timelineData, totalDuration, selectedItem, onAddTrack, onReorder, onElementDrag, onSeek, onSelectionChange } = useTimelineManager();
   return /* @__PURE__ */ jsx(
     TimelineView,
     {
-      timelineControls,
       tracks: (timelineData == null ? void 0 : timelineData.tracks) ?? [],
       zoomLevel: trackZoom,
       duration: totalDuration,
       selectedItem,
       onDeletion: () => {
       },
+      onAddTrack,
       onReorder,
       onElementDrag,
       onSeek,
@@ -17408,6 +17476,9 @@ const UndoRedoControls = ({ canUndo, canRedo, onUndo, onRedo }) => {
     )
   ] });
 };
+const MAX_ZOOM = 3;
+const MIN_ZOOM = 0.5;
+const ZOOM_STEP = 0.25;
 const PlayerControls = ({
   selectedItem,
   duration,
@@ -17420,6 +17491,8 @@ const PlayerControls = ({
   onRedo,
   onSplit,
   onDelete,
+  zoomLevel = 1,
+  setZoomLevel,
   className = ""
 }) => {
   const formatTime = useCallback((time2) => {
@@ -17437,61 +17510,92 @@ const PlayerControls = ({
       onSplit(selectedItem, currentTime);
     }
   }, [selectedItem, onSplit, currentTime]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `player-controls player-controls-card-vertical ${className}`,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "edit-controls player-controls-edit-controls", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: `control-btn delete-btn player-controls-delete-btn${!!selectedItem ? " active" : " btn-disabled"}`,
-              onClick: handleDelete,
-              disabled: !selectedItem,
-              title: "Delete",
-              children: /* @__PURE__ */ jsx(Trash2, { size: 18, strokeWidth: 2 })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: `control-btn split-btn player-controls-split-btn${selectedItem instanceof TrackElement ? " active" : " btn-disabled"}`,
-              onClick: handleSplit,
-              title: "Split",
-              children: /* @__PURE__ */ jsx(Scissors, { size: 18, strokeWidth: 2 })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            UndoRedoControls,
-            {
-              canUndo,
-              canRedo,
-              onUndo,
-              onRedo
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "playback-controls player-controls-playback-controls", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: `control-btn play-pause-btn player-controls-play-pause-btn${playerState === PLAYER_STATE.PLAYING ? " playing" : ""}${playerState === PLAYER_STATE.REFRESH ? " refreshing" : ""}`,
-              onClick: togglePlayback,
-              title: playerState === PLAYER_STATE.PLAYING ? "Pause" : playerState === PLAYER_STATE.REFRESH ? "Refreshing" : "Play",
-              disabled: playerState === PLAYER_STATE.REFRESH,
-              children: playerState === PLAYER_STATE.PLAYING ? /* @__PURE__ */ jsx(Pause, { size: 28, strokeWidth: 2 }) : playerState === PLAYER_STATE.REFRESH ? /* @__PURE__ */ jsx(LoaderCircle, { size: 28, strokeWidth: 2, className: "refreshing-spinner" }) : /* @__PURE__ */ jsx(Play, { size: 28, strokeWidth: 2 })
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "time-display player-controls-time-display", children: [
-            /* @__PURE__ */ jsx("span", { className: "current-time", children: formatTime(currentTime) }),
-            /* @__PURE__ */ jsx("span", { className: "time-separator player-controls-time-separator", children: "|" }),
-            /* @__PURE__ */ jsx("span", { className: "total-time player-controls-total-time", children: formatTime(duration) })
-          ] })
-        ] })
-      ]
-    }
-  );
+  const handleZoomIn = useCallback(() => {
+    if (setZoomLevel && zoomLevel < MAX_ZOOM) {
+      setZoomLevel(zoomLevel + ZOOM_STEP);
+    }
+  }, [zoomLevel, setZoomLevel]);
+  const handleZoomOut = useCallback(() => {
+    if (setZoomLevel && zoomLevel > MIN_ZOOM) {
+      setZoomLevel(zoomLevel - ZOOM_STEP);
+    }
+  }, [zoomLevel, setZoomLevel]);
+  return /* @__PURE__ */ jsx("div", { className: `h-16 bg-gray-800 border-t border-gray-700 p-4 ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleDelete,
+            disabled: !selectedItem,
+            title: "Delete",
+            className: `btn btn-ghost ${!!selectedItem ? "text-red-400 hover:text-red-300" : "text-gray-500 cursor-not-allowed"}`,
+            children: /* @__PURE__ */ jsx(Trash2, { className: "w-5 h-5" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleSplit,
+            disabled: !(selectedItem instanceof TrackElement),
+            title: "Split",
+            className: `btn btn-ghost ${selectedItem instanceof TrackElement ? "text-purple-400 hover:text-purple-300" : "text-gray-500 cursor-not-allowed"}`,
+            children: /* @__PURE__ */ jsx(Scissors, { className: "w-5 h-5" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          UndoRedoControls,
+          {
+            canUndo,
+            canRedo,
+            onUndo,
+            onRedo
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: togglePlayback,
+          disabled: playerState === PLAYER_STATE.REFRESH,
+          title: playerState === PLAYER_STATE.PLAYING ? "Pause" : playerState === PLAYER_STATE.REFRESH ? "Refreshing" : "Play",
+          className: "btn btn-ghost text-white",
+          children: playerState === PLAYER_STATE.PLAYING ? /* @__PURE__ */ jsx(Pause, { className: "w-6 h-6" }) : playerState === PLAYER_STATE.REFRESH ? /* @__PURE__ */ jsx(LoaderCircle, { className: "w-6 h-6 animate-spin" }) : /* @__PURE__ */ jsx(Play, { className: "w-6 h-6" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-gray-300", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: formatTime(currentTime) }),
+        /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: "/" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm", children: formatTime(duration) })
+      ] })
+    ] }),
+    setZoomLevel && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleZoomOut,
+          disabled: zoomLevel <= MIN_ZOOM,
+          title: "Zoom Out",
+          className: `btn btn-ghost ${zoomLevel > MIN_ZOOM ? "text-gray-300 hover:text-white" : "text-gray-500 cursor-not-allowed"}`,
+          children: /* @__PURE__ */ jsx(ZoomOut, { className: "w-5 h-5" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "text-sm text-gray-300 font-medium min-w-[3rem] text-center", children: [
+        Math.round(zoomLevel * 100),
+        "%"
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleZoomIn,
+          disabled: zoomLevel >= MAX_ZOOM,
+          title: "Zoom In",
+          className: `btn btn-ghost ${zoomLevel < MAX_ZOOM ? "text-gray-300 hover:text-white" : "text-gray-500 cursor-not-allowed"}`,
+          children: /* @__PURE__ */ jsx(ZoomIn, { className: "w-5 h-5" })
+        }
+      )
+    ] })
+  ] }) });
 };
 const usePlayerControl = () => {
   const { playerState, setPlayerState } = useLivePlayerContext();
@@ -17519,59 +17623,15 @@ const usePlayerControl = () => {
     togglePlayback
   };
 };
-const MAX_ZOOM = 3;
-const MIN_ZOOM = 0.5;
-const ZOOM_STEP = 0.25;
-const TimelineZoom = ({
-  zoomLevel,
-  setZoomLevel,
-  minZoom = MIN_ZOOM,
-  maxZoom = MAX_ZOOM,
-  zoomStep = ZOOM_STEP
-}) => {
-  const handleZoomIn = () => {
-    if (zoomLevel < maxZoom) {
-      setZoomLevel(zoomLevel + zoomStep);
-    }
-  };
-  const handleZoomOut = () => {
-    if (zoomLevel > minZoom) {
-      setZoomLevel(zoomLevel - zoomStep);
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "twick-track-zoom-container", children: [
-    /* @__PURE__ */ jsx(ZoomOut, { size: 28, onClick: handleZoomOut }),
-    /* @__PURE__ */ jsxs("div", { className: "twick-zoom-slider", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "twick-zoom-slider-track",
-          style: {
-            width: `${(zoomLevel - minZoom) / (maxZoom - minZoom) * 100}%`
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "twick-zoom-slider-thumb",
-          style: {
-            left: `calc(${(zoomLevel - minZoom) / (maxZoom - minZoom) * 100}%)`
-          }
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(ZoomIn, { size: 28, onClick: handleZoomIn })
-  ] });
-};
 const useTimelineControl = () => {
-  const { editor } = useTimelineContext();
+  const { editor, setSelectedItem } = useTimelineContext();
   const deleteItem = (item) => {
     if (item instanceof Track) {
       editor.removeTrack(item);
     } else if (item instanceof TrackElement) {
       editor.removeElement(item);
     }
+    setSelectedItem(null);
   };
   const splitElement = (element, currentTime) => {
     editor.splitElement(element, currentTime);
@@ -17597,56 +17657,54 @@ const ControlManager = ({
   const { togglePlayback } = usePlayerControl();
   const { canRedo, canUndo, totalDuration, selectedItem } = useTimelineContext();
   const { deleteItem, splitElement, handleUndo, handleRedo } = useTimelineControl();
-  return /* @__PURE__ */ jsxs("div", { className: "twick-editor-timeline-controls", children: [
-    /* @__PURE__ */ jsx(
-      PlayerControls,
-      {
-        selectedItem,
-        duration: totalDuration,
-        currentTime,
-        playerState,
-        togglePlayback,
-        canUndo,
-        canRedo,
-        onDelete: deleteItem,
-        onSplit: splitElement,
-        onUndo: handleUndo,
-        onRedo: handleRedo
-      }
-    ),
-    /* @__PURE__ */ jsx(TimelineZoom, { zoomLevel: trackZoom, setZoomLevel: setTrackZoom })
-  ] });
+  return /* @__PURE__ */ jsx("div", { className: "twick-editor-timeline-controls", children: /* @__PURE__ */ jsx(
+    PlayerControls,
+    {
+      selectedItem,
+      duration: totalDuration,
+      currentTime,
+      playerState,
+      togglePlayback,
+      canUndo,
+      canRedo,
+      onDelete: deleteItem,
+      onSplit: splitElement,
+      onUndo: handleUndo,
+      onRedo: handleRedo,
+      zoomLevel: trackZoom,
+      setZoomLevel: setTrackZoom
+    }
+  ) });
 };
 const VideoEditor = ({
   leftPanel,
   rightPanel,
   bottomPanel,
   editorConfig,
-  playControls,
   defaultPlayControls = true
 }) => {
   const [trackZoom, setTrackZoom] = useState(DEFAULT_TIMELINE_ZOOM);
+  const useMemoizedPlayerManager = useMemo(
+    () => /* @__PURE__ */ jsx(
+      PlayerManager,
+      {
+        videoProps: editorConfig.videoProps,
+        playerProps: editorConfig.playerProps,
+        canvasMode: editorConfig.canvasMode ?? true
+      }
+    ),
+    [editorConfig]
+  );
   return /* @__PURE__ */ jsxs("div", { className: "twick-editor-main-container", children: [
     /* @__PURE__ */ jsxs("div", { className: "twick-editor-view-section", children: [
       leftPanel ? leftPanel : /* @__PURE__ */ jsx("div", {}),
-      /* @__PURE__ */ jsx(
-        PlayerManager,
-        {
-          videoProps: editorConfig.videoProps,
-          canvasMode: editorConfig.canvasMode ?? true
-        }
-      ),
+      useMemoizedPlayerManager,
       rightPanel ? rightPanel : /* @__PURE__ */ jsx("div", {})
     ] }),
     bottomPanel ? bottomPanel : null,
     /* @__PURE__ */ jsxs("div", { className: "twick-editor-timeline-section", children: [
-      playControls ? playControls : defaultPlayControls ? /* @__PURE__ */ jsx(ControlManager, { trackZoom, setTrackZoom }) : null,
-      /* @__PURE__ */ jsx(
-        TimelineManager,
-        {
-          trackZoom
-        }
-      )
+      defaultPlayControls ? /* @__PURE__ */ jsx(ControlManager, { trackZoom, setTrackZoom }) : null,
+      /* @__PURE__ */ jsx(TimelineManager, { trackZoom })
     ] })
   ] });
 };
@@ -17817,7 +17875,7 @@ class BrowserMediaManager extends BaseMediaManager {
       request.onsuccess = async () => {
         let items = request.result;
         const filteredItems = items.filter((item) => {
-          const matchesQuery = item.url.toLowerCase().includes(options.query.toLowerCase());
+          const matchesQuery = item.url.toLowerCase().includes((options.query || "").toLowerCase());
           const matchesType = !options.type || item.type === options.type;
           const matchesMetadata = !options.metadata || Object.entries(options.metadata).every(
             ([key, value]) => {
@@ -17871,9 +17929,14 @@ const ANIMATIONS = [
   {
     name: "fade",
     interval: 1,
+    duration: 1,
+    intensity: 1,
     animate: "enter",
     options: {
-      animate: ["enter", "exit", "both"]
+      animate: ["enter", "exit", "both"],
+      interval: [0.1, 5],
+      duration: [0.1, 5],
+      intensity: [0.1, 2]
     },
     getSample: () => {
       return animationGifs.fade;
@@ -17882,11 +17945,16 @@ const ANIMATIONS = [
   {
     name: "rise",
     interval: 1,
+    duration: 1,
+    intensity: 1,
     animate: "enter",
     direction: "up",
     options: {
       animate: ["enter", "exit", "both"],
-      direction: ["up", "down"]
+      direction: ["up", "down", "left", "right", "center"],
+      interval: [0.1, 5],
+      duration: [0.1, 5],
+      intensity: [1, 300]
     },
     getSample: (animation) => {
       return (animation == null ? void 0 : animation.direction) === "down" ? animationGifs["rise-down"] : animationGifs["rise-up"];
@@ -17895,9 +17963,14 @@ const ANIMATIONS = [
   {
     name: "blur",
     interval: 1,
+    duration: 1,
+    intensity: 1,
     animate: "enter",
     options: {
-      animate: ["enter", "exit", "both"]
+      animate: ["enter", "exit", "both"],
+      interval: [0.1, 5],
+      duration: [0.1, 5],
+      intensity: [0.1, 100]
     },
     getSample: () => {
       return animationGifs.blur;
@@ -17906,11 +17979,16 @@ const ANIMATIONS = [
   {
     name: "breathe",
     interval: 1,
+    duration: 1,
+    intensity: 1,
     mode: "in",
     animate: "enter",
     options: {
       animate: ["enter", "exit", "both"],
-      mode: ["in", "out"]
+      mode: ["in", "out"],
+      interval: [0.1, 5],
+      duration: [0.1, 5],
+      intensity: [0.1, 2]
     },
     getSample: (animation) => {
       return (animation == null ? void 0 : animation.mode) === "out" ? animationGifs["breathe-out"] : animationGifs["breathe-in"];
@@ -17919,9 +17997,14 @@ const ANIMATIONS = [
   {
     name: "succession",
     interval: 1,
+    duration: 1,
+    intensity: 1,
     animate: "enter",
     options: {
-      animate: ["enter", "exit", "both"]
+      animate: ["enter", "exit", "both"],
+      interval: [0.1, 5],
+      duration: [0.1, 5],
+      intensity: [0.1, 2]
     },
     getSample: () => {
       return animationGifs.succession;
@@ -17932,6 +18015,7 @@ const TEXT_EFFECTS = [
   {
     name: "typewriter",
     delay: 0,
+    duration: 1,
     bufferTime: 0.1,
     getSample: () => {
       return "";
@@ -17940,6 +18024,7 @@ const TEXT_EFFECTS = [
   {
     name: "erase",
     delay: 0,
+    duration: 1,
     bufferTime: 0.1,
     getSample: () => {
       return "";
@@ -17948,6 +18033,7 @@ const TEXT_EFFECTS = [
   {
     name: "elastic",
     delay: 0,
+    duration: 1,
     bufferTime: 0.1,
     getSample: () => {
       return "";
@@ -17956,6 +18042,7 @@ const TEXT_EFFECTS = [
   {
     name: "stream-word",
     delay: 0,
+    duration: 1,
     bufferTime: 0.1,
     getSample: () => {
       return "";
@@ -17978,6 +18065,7 @@ export {
   animationGifs,
   VideoEditor as default,
   getAnimationGif,
+  setElementColors,
   usePlayerControl,
   useTimelineControl
 };