@twick/video-editor 0.14.7 → 0.14.9

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 { useTimelineContext, TIMELINE_ACTION, getCurrentElements, ElementDeserializer, Track, getDecimalNumber, VideoElement, AudioElement, TrackElement } from "@twick/timeline";
+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) {
@@ -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);
           }
@@ -9446,6 +9549,7 @@ function SeekTrack({
       onClick: (e3) => handleSeek(e3.clientX),
       style: {
         overflowX: "auto",
+        overflowY: "hidden",
         position: "relative",
         scrollbarWidth: "none",
         // Firefox
@@ -9507,6 +9611,7 @@ function SeekTrack({
             "div",
             {
               style: {
+                overflow: "hidden",
                 position: "relative",
                 width: `${Math.max(1, Math.round(totalWidth))}px`,
                 height: "32px",
@@ -17898,6 +18003,54 @@ const VideoEditor = ({
     ] })
   ] });
 };
+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 {
@@ -18258,6 +18411,7 @@ export {
   VideoEditor as default,
   getAnimationGif,
   setElementColors,
+  useEditorManager,
   usePlayerControl,
   useTimelineControl
 };