@twick/video-editor 0.14.7 → 0.14.8

package/dist/components/player/player-manager.d.ts

@@ -1,4 +1,25 @@
 
+/**
+ * PlayerManager component that manages video playback and canvas rendering.
+ * Integrates the live player with canvas operations, handling both video playback
+ * and static canvas display modes. Automatically updates canvas when paused and
+ * manages player state transitions.
+ *
+ * @param props - Component configuration props
+ * @param props.videoProps - Video dimensions and background color
+ * @param props.playerProps - Optional player quality settings
+ * @param props.canvasMode - Whether to show canvas overlay when paused
+ * @returns JSX element containing player and canvas components
+ *
+ * @example
+ * ```tsx
+ * <PlayerManager
+ *   videoProps={{ width: 1920, height: 1080, backgroundColor: '#000' }}
+ *   playerProps={{ quality: 720 }}
+ *   canvasMode={true}
+ * />
+ * ```
+ */
 export declare const PlayerManager: ({ videoProps, playerProps, canvasMode, }: {
     videoProps: {
         width: number;

package/dist/hooks/use-editor-manager.d.ts

@@ -0,0 +1,27 @@
+import { TrackElement } from '@twick/timeline';
+
+/**
+ * Custom hook for managing video editor operations.
+ * Provides functionality to add and update timeline elements with automatic
+ * collision detection and error handling. Integrates with live player context
+ * to position elements at the current playback time.
+ *
+ * @returns Object containing editor management functions
+ * @property {Function} addElement - Add a new element to the timeline
+ * @property {Function} updateElement - Update an existing timeline element
+ *
+ * @example
+ * ```tsx
+ * const { addElement, updateElement } = useEditorManager();
+ *
+ * // Add a new element at current playback time
+ * await addElement(newElement);
+ *
+ * // Update an existing element
+ * updateElement(modifiedElement);
+ * ```
+ */
+export declare const useEditorManager: () => {
+    addElement: (element: TrackElement) => Promise<void>;
+    updateElement: (element: TrackElement) => void;
+};

package/dist/hooks/use-timeline-manager.d.ts

@@ -32,6 +32,6 @@ export declare const useTimelineManager: () => {
     onReorder: (reorderedItems: Track[]) => void;
     onSeek: (time: number) => void;
     onSelectionChange: (selectedItem: TrackElement | Track | null) => void;
-    selectedItem: TrackElement | Track | null;
+    selectedItem: Track | TrackElement | null;
     totalDuration: number;
 };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import { default as VideoEditor, VideoEditorProps, VideoEditorConfig, TimelineTi
 import { default as PlayerControls, PlayerControlsProps } from './components/controls/player-controls';
 import { default as TimelineManager } from './components/timeline/timeline-manager';
 import { usePlayerControl } from './hooks/use-player-control';
+import { useEditorManager } from './hooks/use-editor-manager';
 import { default as BrowserMediaManager } from './helpers/media-manager/browser-media-manager';
 import { MediaItem, PaginationOptions, SearchOptions, Animation, TextEffect, ElementColors } from './helpers/types';
 import { default as BaseMediaManager } from './helpers/media-manager/base-media-manager';
@@ -15,6 +16,6 @@ export { setElementColors };
 export type { MediaItem, PaginationOptions, SearchOptions, Animation, TextEffect, ElementColors };
 export type { PlayerControlsProps, VideoEditorProps, VideoEditorConfig, TimelineTickConfig, TimelineZoomConfig };
 export { ANIMATIONS, TEXT_EFFECTS };
-export { usePlayerControl, BrowserMediaManager, BaseMediaManager, animationGifs, getAnimationGif, PlayerControls, TimelineManager, useTimelineControl };
+export { usePlayerControl, useEditorManager, BrowserMediaManager, BaseMediaManager, animationGifs, getAnimationGif, PlayerControls, TimelineManager, useTimelineControl };
 export * from './helpers/constants';
 export default VideoEditor;

package/dist/index.js

@@ -6851,7 +6851,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     /** 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 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     /** 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 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     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 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     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 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const twickCanvasRef = React.useRef(null);
     const videoSizeRef = React.useRef({ width: 1, height: 1 });
     const canvasResolutionRef = React.useRef({ width: 1, height: 1 });
+    const captionPropsRef = React.useRef(null);
     const canvasMetadataRef = React.useRef({
       width: 0,
       height: 0,
@@ -7574,7 +7613,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     };
     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 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               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 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       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 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             twickCanvas.renderAll();
           }
         }
+        captionPropsRef.current = captionProps;
         await Promise.all(
           elements.map(async (element, index) => {
             try {
@@ -7758,7 +7823,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       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 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             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 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     videoProps
   }) => {
     const [projectData, setProjectData] = React.useState(null);
-    const { timelineAction, setTimelineAction, setSelectedItem, editor, changeLog } = timeline.useTimelineContext();
+    const {
+      timelineAction,
+      setTimelineAction,
+      setSelectedItem,
+      editor,
+      changeLog
+    } = timeline.useTimelineContext();
     const currentChangeLog = React.useRef(changeLog);
+    const prevSeekTime = React.useRef(0);
     const [playerUpdating, setPlayerUpdating] = React.useState(false);
     const handleCanvasReady = (canvas) => {
       console.log("canvas ready", canvas);
     };
     const handleCanvasOperation = (operation, data) => {
-      const element = timeline.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 = timeline.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 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     });
     const updateCanvas = (seekTime) => {
       var _a2;
-      if (changeLog === currentChangeLog.current) {
+      if (changeLog === currentChangeLog.current && seekTime === prevSeekTime.current) {
         return;
       }
+      prevSeekTime.current = seekTime;
       const elements = timeline.getCurrentElements(
         seekTime,
         ((_a2 = editor.getTimelineData()) == null ? void 0 : _a2.tracks) ?? []
       );
+      let captionProps = {};
+      (elements || []).forEach((element) => {
+        if (element instanceof timeline.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 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     };
     React.useEffect(() => {
-      var _a2, _b, _c, _d;
+      var _a2, _b, _c, _d, _e2;
       switch (timelineAction.type) {
         case timeline.TIMELINE_ACTION.UPDATE_PLAYER_DATA:
           if (videoProps) {
@@ -7901,6 +7999,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 }
               };
               setProjectData(_latestProjectData);
+              if (((_e2 = timelineAction.payload) == null ? void 0 : _e2.version) === 1) {
+                setTimeout(() => {
+                  setPlayerUpdating(false);
+                });
+              }
             } else {
               setTimelineAction(timeline.TIMELINE_ACTION.ON_PLAYER_UPDATED, null);
             }
@@ -9446,6 +9549,7 @@ This message will only show in development mode. It won't appear in production.
         onClick: (e2) => handleSeek(e2.clientX),
         style: {
           overflowX: "auto",
+          overflowY: "hidden",
           position: "relative",
           scrollbarWidth: "none",
           // Firefox
@@ -9507,6 +9611,7 @@ This message will only show in development mode. It won't appear in production.
               "div",
               {
                 style: {
+                  overflow: "hidden",
                   position: "relative",
                   width: `${Math.max(1, Math.round(totalWidth))}px`,
                   height: "32px",
@@ -17898,6 +18003,54 @@ This message will only show in development mode. It won't appear in production.
       ] })
     ] });
   };
+  const useEditorManager = () => {
+    const { editor, selectedItem, setSelectedItem } = timeline.useTimelineContext();
+    const { getCurrentTime } = livePlayer.useLivePlayerContext();
+    const addElement = async (element) => {
+      const currentTime = getCurrentTime();
+      element.setStart(currentTime);
+      try {
+        if (selectedItem instanceof timeline.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 timeline.ValidationError) {
+          if (error.errors.includes(timeline.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 {
@@ -18257,6 +18410,7 @@ This message will only show in development mode. It won't appear in production.
   exports2.default = VideoEditor;
   exports2.getAnimationGif = getAnimationGif;
   exports2.setElementColors = setElementColors;
+  exports2.useEditorManager = useEditorManager;
   exports2.usePlayerControl = usePlayerControl;
   exports2.useTimelineControl = useTimelineControl;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });