@twick/video-editor 0.15.20 → 0.15.21

package/dist/index.mjs

@@ -3,7 +3,7 @@ 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 { ImageElement as ImageElement$1, AudioElement, VideoElement as VideoElement$1, useTimelineContext, TIMELINE_ACTION, ElementDeserializer, getCurrentElements, CaptionElement as CaptionElement$1, getDecimalNumber, resolveIds, TrackElement, TRACK_TYPES, resolveId, Track, getElementIdsInRange, ValidationError, VALIDATION_ERROR_CODE, formatTimeWithFrames } from "@twick/timeline";
+import { ImageElement as ImageElement$1, AudioElement, VideoElement as VideoElement$1, useTimelineContext, TIMELINE_ACTION, ElementDeserializer, getCurrentElements, CaptionElement as CaptionElement$1, TIMELINE_ELEMENT_TYPE, getDecimalNumber, resolveIds, TrackElement, TRACK_TYPES, resolveId, Track, getElementIdsInRange, ValidationError, VALIDATION_ERROR_CODE, formatTimeWithFrames } from "@twick/timeline";
 import React, { useState, useRef, useCallback, useEffect, useMemo, forwardRef, createElement, createContext, useContext, useId, useLayoutEffect, useInsertionEffect, Fragment, Component } from "react";
 function t(t2, e3, s2) {
   return (e3 = function(t3) {
@@ -6900,7 +6900,13 @@ const ELEMENT_TYPES = {
   /** Rectangle element type */
   RECT: "rect",
   /** Circle element type */
-  CIRCLE: "circle"
+  CIRCLE: "circle",
+  /** Arrow annotation element type */
+  ARROW: "arrow",
+  /** Line annotation / shape element type */
+  LINE: "line",
+  /** Global / adjustment-layer style effect element */
+  EFFECT: "effect"
 };
 const isBrowser$2 = typeof window !== "undefined";
 const isCanvasSupported = isBrowser$2 && !!window.HTMLCanvasElement;
@@ -7644,7 +7650,7 @@ const addCaptionElement = ({
   canvasMetadata,
   lockAspectRatio = false
 }) => {
-  var _a, _b, _c, _d, _e2, _f, _g, _h2, _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, _H, _I, _J, _K;
+  var _a, _b, _c, _d, _e2, _f, _g, _h2, _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, _H, _I, _J, _K, _L;
   const applyToAll = (captionProps == null ? void 0 : captionProps.applyToAll) ?? false;
   const captionTextColor = ((_a = captionProps == null ? void 0 : captionProps.colors) == null ? void 0 : _a.text) ?? ((_b = captionProps == null ? void 0 : captionProps.color) == null ? void 0 : _b.text);
   const { x: x2, y: y2 } = convertToCanvasPosition(
@@ -7669,19 +7675,19 @@ const addCaptionElement = ({
     ),
     fontFamily: (applyToAll ? (_o2 = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _o2.family : ((_q = (_p = element.props) == null ? void 0 : _p.font) == null ? void 0 : _q.family) ?? ((_r2 = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _r2.family)) ?? DEFAULT_CAPTION_PROPS.family,
     fill: resolvedFill,
-    fontWeight: (applyToAll ? (_s2 = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _s2.weight : ((_t2 = element.props) == null ? void 0 : _t2.fontWeight) ?? ((_u = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _u.weight)) ?? DEFAULT_CAPTION_PROPS.fontWeight,
-    stroke: (applyToAll ? captionProps == null ? void 0 : captionProps.stroke : ((_v = element.props) == null ? void 0 : _v.stroke) ?? (captionProps == null ? void 0 : captionProps.stroke)) ?? DEFAULT_CAPTION_PROPS.stroke,
-    opacity: (applyToAll ? captionProps == null ? void 0 : captionProps.opacity : ((_w = element.props) == null ? void 0 : _w.opacity) ?? (captionProps == null ? void 0 : captionProps.opacity)) ?? 1,
+    fontWeight: (applyToAll ? (_s2 = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _s2.weight : ((_u = (_t2 = element.props) == null ? void 0 : _t2.font) == null ? void 0 : _u.weight) ?? ((_v = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _v.weight)) ?? DEFAULT_CAPTION_PROPS.fontWeight,
+    stroke: (applyToAll ? captionProps == null ? void 0 : captionProps.stroke : ((_w = element.props) == null ? void 0 : _w.stroke) ?? (captionProps == null ? void 0 : captionProps.stroke)) ?? DEFAULT_CAPTION_PROPS.stroke,
+    opacity: (applyToAll ? captionProps == null ? void 0 : captionProps.opacity : ((_x = element.props) == null ? void 0 : _x.opacity) ?? (captionProps == null ? void 0 : captionProps.opacity)) ?? 1,
     width,
     splitByGrapheme: false,
-    textAlign: ((_x = element.props) == null ? void 0 : _x.textAlign) ?? "center",
+    textAlign: ((_y = element.props) == null ? void 0 : _y.textAlign) ?? "center",
     shadow: new Ds({
-      offsetX: (applyToAll ? (_y = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _y[0] : ((_A = (_z = element.props) == null ? void 0 : _z.shadowOffset) == null ? void 0 : _A[0]) ?? ((_B = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _B[0])) ?? ((_C = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _C[0]),
-      offsetY: (applyToAll ? (_D = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _D[1] : ((_F = (_E = element.props) == null ? void 0 : _E.shadowOffset) == null ? void 0 : _F[1]) ?? ((_G = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _G[1])) ?? ((_H = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _H[1]),
-      blur: (applyToAll ? captionProps == null ? void 0 : captionProps.shadowBlur : ((_I = element.props) == null ? void 0 : _I.shadowBlur) ?? (captionProps == null ? void 0 : captionProps.shadowBlur)) ?? DEFAULT_CAPTION_PROPS.shadowBlur,
-      color: (applyToAll ? captionProps == null ? void 0 : captionProps.shadowColor : ((_J = element.props) == null ? void 0 : _J.shadowColor) ?? (captionProps == null ? void 0 : captionProps.shadowColor)) ?? DEFAULT_CAPTION_PROPS.shadowColor
+      offsetX: (applyToAll ? (_z = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _z[0] : ((_B = (_A = element.props) == null ? void 0 : _A.shadowOffset) == null ? void 0 : _B[0]) ?? ((_C = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _C[0])) ?? ((_D = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _D[0]),
+      offsetY: (applyToAll ? (_E = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _E[1] : ((_G = (_F = element.props) == null ? void 0 : _F.shadowOffset) == null ? void 0 : _G[1]) ?? ((_H = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _H[1])) ?? ((_I = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _I[1]),
+      blur: (applyToAll ? captionProps == null ? void 0 : captionProps.shadowBlur : ((_J = element.props) == null ? void 0 : _J.shadowBlur) ?? (captionProps == null ? void 0 : captionProps.shadowBlur)) ?? DEFAULT_CAPTION_PROPS.shadowBlur,
+      color: (applyToAll ? captionProps == null ? void 0 : captionProps.shadowColor : ((_K = element.props) == null ? void 0 : _K.shadowColor) ?? (captionProps == null ? void 0 : captionProps.shadowColor)) ?? DEFAULT_CAPTION_PROPS.shadowColor
     }),
-    strokeWidth: (applyToAll ? captionProps == null ? void 0 : captionProps.lineWidth : ((_K = element.props) == null ? void 0 : _K.lineWidth) ?? (captionProps == null ? void 0 : captionProps.lineWidth)) ?? DEFAULT_CAPTION_PROPS.lineWidth
+    strokeWidth: (applyToAll ? captionProps == null ? void 0 : captionProps.lineWidth : ((_L = element.props) == null ? void 0 : _L.lineWidth) ?? (captionProps == null ? void 0 : captionProps.lineWidth)) ?? DEFAULT_CAPTION_PROPS.lineWidth
   });
   caption.set("id", element.id);
   caption.set("zIndex", index);
@@ -8392,6 +8398,148 @@ const WatermarkElement = {
     };
   }
 };
+const ArrowElement = {
+  name: ELEMENT_TYPES.ARROW,
+  async add(params) {
+    var _a, _b, _c, _d, _e2, _f, _g, _h2, _i2;
+    const { element, index, canvas, canvasMetadata, lockAspectRatio } = params;
+    const baseWidth = ((_a = element.props) == null ? void 0 : _a.width) ?? 220;
+    const baseHeight = ((_b = element.props) == null ? void 0 : _b.height) ?? 14;
+    const { x: x2, y: y2 } = convertToCanvasPosition(
+      ((_c = element.props) == null ? void 0 : _c.x) ?? 0,
+      ((_d = element.props) == null ? void 0 : _d.y) ?? 0,
+      canvasMetadata
+    );
+    const fill = ((_e2 = element.props) == null ? void 0 : _e2.fill) || "#f59e0b";
+    const radius = (((_f = element.props) == null ? void 0 : _f.radius) ?? 4) * canvasMetadata.scaleX;
+    const barWidth = baseWidth * canvasMetadata.scaleX;
+    const barHeight = baseHeight * canvasMetadata.scaleY;
+    const headSize = barHeight * 1.8;
+    const barLength = barWidth - headSize * 0.5;
+    const bar = new jr({
+      left: -barWidth / 2,
+      top: -barHeight / 2,
+      originX: "left",
+      originY: "top",
+      width: barLength,
+      height: barHeight,
+      rx: radius,
+      ry: radius,
+      fill
+    });
+    const arrowHead = new yo({
+      left: barWidth / 2 - headSize * 0.25,
+      top: 0,
+      originX: "center",
+      originY: "center",
+      width: headSize,
+      height: headSize,
+      fill,
+      angle: 90
+    });
+    const opacity = ((_g = element.props) == null ? void 0 : _g.opacity) ?? 1;
+    const group = new Ur([bar, arrowHead], {
+      left: x2,
+      top: y2,
+      originX: "center",
+      originY: "center",
+      angle: ((_h2 = element.props) == null ? void 0 : _h2.rotation) || 0,
+      opacity,
+      selectable: true,
+      hasControls: true
+    });
+    group.set(
+      "lockUniScaling",
+      lockAspectRatio ?? ((_i2 = element.props) == null ? void 0 : _i2.lockAspectRatio) ?? true
+    );
+    group.set("id", element.id);
+    group.set("zIndex", index);
+    canvas.add(group);
+  },
+  updateFromFabricObject(object, element, context) {
+    var _a, _b, _c;
+    const canvasCenter = getObjectCanvasCenter(object);
+    const { x: x2, y: y2 } = convertToVideoPosition(
+      canvasCenter.x,
+      canvasCenter.y,
+      context.canvasMetadata,
+      context.videoSize
+    );
+    const baseWidth = ((_a = element.props) == null ? void 0 : _a.width) ?? 220;
+    const baseHeight = ((_b = element.props) == null ? void 0 : _b.height) ?? 14;
+    const opacity = object.opacity ?? ((_c = element.props) == null ? void 0 : _c.opacity) ?? 1;
+    return {
+      element: {
+        ...element,
+        props: {
+          ...element.props,
+          rotation: getObjectCanvasAngle(object),
+          width: baseWidth * object.scaleX,
+          height: baseHeight * object.scaleY,
+          x: x2,
+          y: y2,
+          opacity
+        }
+      }
+    };
+  }
+};
+const LineElement = {
+  name: ELEMENT_TYPES.LINE,
+  async add(params) {
+    var _a;
+    const { element, index, canvas, canvasMetadata, lockAspectRatio } = params;
+    const lineProps = element.props ?? {};
+    const lineElement = {
+      ...element,
+      props: {
+        ...lineProps,
+        // Use fill as stroke color when a stroke is desired; otherwise rely
+        // on fill-only rendering. Avoid the generic "#000000" fallback.
+        stroke: lineProps.stroke ?? lineProps.fill,
+        // If a specific lineWidth is provided, keep it; otherwise default to 0
+        // so the stroke does not override the visual fill color.
+        lineWidth: lineProps.lineWidth ?? 0
+      }
+    };
+    await addRectElement({
+      element: lineElement,
+      index,
+      canvas,
+      canvasMetadata,
+      lockAspectRatio: lockAspectRatio ?? ((_a = lineElement.props) == null ? void 0 : _a.lockAspectRatio)
+    });
+  },
+  updateFromFabricObject(object, element, context) {
+    var _a, _b;
+    const canvasCenter = getObjectCanvasCenter(object);
+    const { x: x2, y: y2 } = convertToVideoPosition(
+      canvasCenter.x,
+      canvasCenter.y,
+      context.canvasMetadata,
+      context.videoSize
+    );
+    return {
+      element: {
+        ...element,
+        props: {
+          ...element.props,
+          rotation: getObjectCanvasAngle(object),
+          width: (((_a = element.props) == null ? void 0 : _a.width) ?? 0) * object.scaleX,
+          height: (((_b = element.props) == null ? void 0 : _b.height) ?? 0) * object.scaleY,
+          x: x2,
+          y: y2
+        }
+      }
+    };
+  }
+};
+const EffectElement = {
+  name: ELEMENT_TYPES.EFFECT,
+  async add() {
+    return;
+  }
+};
 class ElementController {
   constructor() {
     __publicField2(this, "elements", /* @__PURE__ */ new Map());
@@ -8415,6 +8563,9 @@ function registerElements() {
   elementController.register(TextElement);
   elementController.register(CaptionElement);
   elementController.register(WatermarkElement);
+  elementController.register(ArrowElement);
+  elementController.register(LineElement);
+  elementController.register(EffectElement);
 }
 registerElements();
 const useTwickCanvas = ({
@@ -8995,7 +9146,9 @@ const DEFAULT_ELEMENT_COLORS = {
   /** Icon element color - bright orchid */
   icon: "#A76CD4",
   /** Circle element color - deep byzantium */
-  circle: "#703D8B"
+  circle: "#703D8B",
+  /** Effect element color - cyan accent for global effects */
+  effect: "#22C3EE"
 };
 const AVAILABLE_TEXT_FONTS = {
   // Google Fonts
@@ -18886,6 +19039,7 @@ const TrackElementView = ({
   onDragStateChange,
   elementColors
 }) => {
+  var _a, _b;
   const ref = useRef(null);
   const dragType = useRef(null);
   const lastPosRef = useRef(null);
@@ -18975,12 +19129,12 @@ const TrackElementView = ({
     lastPosRef.current = position;
   };
   const sendUpdate = (e3) => {
-    var _a, _b, _c;
+    var _a2, _b2, _c;
     let dropPointer;
     if (e3) {
       if ("clientX" in e3) {
         dropPointer = { clientX: e3.clientX, clientY: e3.clientY };
-      } else if ("changedTouches" in e3 && ((_a = e3.changedTouches) == null ? void 0 : _a[0])) {
+      } else if ("changedTouches" in e3 && ((_a2 = e3.changedTouches) == null ? void 0 : _a2[0])) {
         const t2 = e3.changedTouches[0];
         dropPointer = { clientX: t2.clientX, clientY: t2.clientY };
       }
@@ -18995,15 +19149,16 @@ const TrackElementView = ({
       },
       dragType: dragType.current || ""
     };
-    const didChange = ((_b = lastPosRef.current) == null ? void 0 : _b.start) !== position.start || ((_c = lastPosRef.current) == null ? void 0 : _c.end) !== position.end;
+    const didChange = ((_b2 = lastPosRef.current) == null ? void 0 : _b2.start) !== position.start || ((_c = lastPosRef.current) == null ? void 0 : _c.end) !== position.end;
     if (didChange || dropPointer) {
       onDrag(payload, dropPointer);
     }
   };
   const getElementColor = (elementType) => {
     const colors = elementColors || ELEMENT_COLORS;
-    if (elementType in colors) {
-      return colors[elementType];
+    const key = elementType === TIMELINE_ELEMENT_TYPE.VIDEO ? "video" : elementType === TIMELINE_ELEMENT_TYPE.AUDIO ? "audio" : elementType === TIMELINE_ELEMENT_TYPE.IMAGE ? "image" : elementType === TIMELINE_ELEMENT_TYPE.TEXT ? "text" : elementType === TIMELINE_ELEMENT_TYPE.CAPTION ? "caption" : elementType === TIMELINE_ELEMENT_TYPE.RECT ? "rect" : elementType === TIMELINE_ELEMENT_TYPE.CIRCLE ? "circle" : elementType === TIMELINE_ELEMENT_TYPE.ICON ? "icon" : elementType === TIMELINE_ELEMENT_TYPE.EFFECT ? "effect" : "element";
+    if (key in colors) {
+      return colors[key];
     }
     return ELEMENT_COLORS.element;
   };
@@ -19047,7 +19202,7 @@ const TrackElementView = ({
         className: "twick-track-element-handle twick-track-element-handle-start"
       }
     ) : null,
-    /* @__PURE__ */ jsx("div", { className: "twick-track-element-content", children: element.getText ? element.getText() : element.getName() || element.getType() }),
+    /* @__PURE__ */ jsx("div", { className: "twick-track-element-content", children: element.getType() === TIMELINE_ELEMENT_TYPE.EFFECT ? ((_b = (_a = element.getProps) == null ? void 0 : _a.call(element)) == null ? void 0 : _b.effectKey) ?? "Effect" : element.getText ? element.getText() : element.getName() || element.getType() }),
     hasHandles ? /* @__PURE__ */ jsx(
       "div",
       {
@@ -19405,13 +19560,15 @@ function TimelineView({
   onMarqueeSelect,
   onElementDrag,
   onElementDrop,
+  onSeek,
   elementColors,
   selectedIds,
   playheadPositionPx = 0,
   isPlayheadActive = false,
   onDropOnTimeline,
   videoResolution,
-  enableDropOnTimeline = true
+  enableDropOnTimeline = true,
+  chapters = []
 }) {
   const containerRef = useRef(null);
   const seekContainerRef = useRef(null);
@@ -19573,9 +19730,36 @@ function TimelineView({
       className: "twick-timeline-scroll-container",
       onScroll: handleScroll,
       children: [
-        /* @__PURE__ */ jsx("div", { style: { width: timelineWidthPx }, children: seekTrack ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", position: "relative" }, children: [
+        /* @__PURE__ */ jsx("div", { style: { width: timelineWidthPx }, children: seekTrack ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", position: "relative", minHeight: 34 }, children: [
           /* @__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 })
+          /* @__PURE__ */ jsx("div", { style: { flexGrow: 1 }, children: seekTrack }),
+          chapters.map((chapter) => {
+            const left = LABEL_WIDTH + chapter.time / Math.max(duration, 1e-3) * (timelineWidth - LABEL_WIDTH);
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "btn-ghost",
+                title: chapter.title,
+                onClick: (e3) => {
+                  e3.stopPropagation();
+                  onSeek(chapter.time);
+                },
+                style: {
+                  position: "absolute",
+                  left,
+                  top: 0,
+                  height: "100%",
+                  padding: "0 4px",
+                  borderRadius: 0,
+                  borderLeft: "1px solid rgba(255,255,255,0.4)",
+                  borderRight: "none",
+                  minWidth: 0
+                },
+                children: /* @__PURE__ */ jsx("span", { style: { fontSize: 10, opacity: 0.9 }, children: chapter.title })
+              },
+              chapter.id
+            );
+          })
         ] }) : null }),
         /* @__PURE__ */ jsxs(
           "div",
@@ -19890,7 +20074,7 @@ const TimelineManager = ({
   timelineTickConfigs,
   elementColors
 }) => {
-  var _a;
+  var _a, _b;
   const { playerState } = useLivePlayerContext();
   const { followPlayheadEnabled, editor, videoResolution, setSelectedItem } = useTimelineContext();
   const {
@@ -19962,6 +20146,7 @@ const TimelineManager = ({
       elementColors,
       playheadPositionPx: playheadState.positionPx,
       isPlayheadActive,
+      chapters: ((_a = timelineData == null ? void 0 : timelineData.metadata) == null ? void 0 : _a.chapters) ?? [],
       onDropOnTimeline: handleDropOnTimeline,
       videoResolution,
       enableDropOnTimeline: true,
@@ -19971,7 +20156,7 @@ const TimelineManager = ({
           duration: totalDuration,
           zoom: trackZoom,
           onSeek,
-          timelineCount: ((_a = timelineData == null ? void 0 : timelineData.tracks) == null ? void 0 : _a.length) ?? 0,
+          timelineCount: ((_b = timelineData == null ? void 0 : timelineData.tracks) == null ? void 0 : _b.length) ?? 0,
           timelineTickConfigs,
           onPlayheadUpdate: handlePlayheadUpdate
         }