@twick/studio 0.15.3 → 0.15.5

package/dist/index.mjs

@@ -4,11 +4,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef, createElement, useState, useEffect, useRef, createContext, useContext, useCallback, useMemo } from "react";
 import { useTimelineContext, TrackElement, Track, ImageElement, AudioElement, VideoElement, TextElement, IconElement, RectElement, CircleElement, CAPTION_STYLE, CaptionElement, ElementTextEffect, ElementAnimation, PLAYER_STATE } from "@twick/timeline";
-import { INITIAL_TIMELINE_DATA, TimelineProvider } from "@twick/timeline";
+import { AudioElement as AudioElement2, CAPTION_COLOR, CAPTION_FONT, CAPTION_STYLE as CAPTION_STYLE2, CAPTION_STYLE_OPTIONS, CaptionElement as CaptionElement2, CircleElement as CircleElement2, ElementAdder, ElementAnimation as ElementAnimation2, ElementCloner, ElementDeserializer, ElementFrameEffect, ElementRemover, ElementSerializer, ElementSplitter, ElementTextEffect as ElementTextEffect2, ElementUpdater, ElementValidator, INITIAL_TIMELINE_DATA, IconElement as IconElement2, ImageElement as ImageElement2, PROCESS_STATE, RectElement as RectElement2, TIMELINE_ACTION, TIMELINE_ELEMENT_TYPE, TextElement as TextElement2, TimelineEditor, TimelineProvider, Track as Track2, TrackElement as TrackElement2, VideoElement as VideoElement2, WORDS_PER_PHRASE, generateShortUuid, getCurrentElements, getTotalDuration, isElementId, isTrackId } from "@twick/timeline";
 import VideoEditor, { useEditorManager, BrowserMediaManager, AVAILABLE_TEXT_FONTS, TEXT_EFFECTS, ANIMATIONS } from "@twick/video-editor";
-import { default as default2 } from "@twick/video-editor";
+import { ANIMATIONS as ANIMATIONS2, BaseMediaManager, BrowserMediaManager as BrowserMediaManager2, PlayerControls, TEXT_EFFECTS as TEXT_EFFECTS2, TimelineManager, default as default2, animationGifs, getAnimationGif, setElementColors, useEditorManager as useEditorManager2, usePlayerControl, useTimelineControl } from "@twick/video-editor";
 import { useLivePlayerContext } from "@twick/live-player";
-import { LivePlayer, LivePlayerProvider } from "@twick/live-player";
+import { LivePlayer, LivePlayerProvider, PLAYER_STATE as PLAYER_STATE2, generateId, getBaseProject, useLivePlayerContext as useLivePlayerContext2 } from "@twick/live-player";
 /**
  * @license lucide-react v0.511.0 - ISC
  *
@@ -2834,11 +2834,25 @@ function PropsToolbar({
   }) });
 }
 function ElementProps({ selectedElement, updateElement }) {
-  const elementProps = (selectedElement == null ? void 0 : selectedElement.getProps()) || {};
-  const { x, y, opacity, rotation } = elementProps;
-  const handleUpdateElement = (props) => {
+  const opacity = (selectedElement == null ? void 0 : selectedElement.getOpacity()) || 1;
+  const rotation = (selectedElement == null ? void 0 : selectedElement.getRotation()) || 0;
+  const position = (selectedElement == null ? void 0 : selectedElement.getPosition()) || { x: 0, y: 0 };
+  const handleRotationChange = (rotation2) => {
     if (selectedElement) {
-      updateElement == null ? void 0 : updateElement(selectedElement == null ? void 0 : selectedElement.setProps({ ...elementProps, ...props }));
+      selectedElement.setRotation(rotation2);
+      updateElement == null ? void 0 : updateElement(selectedElement);
+    }
+  };
+  const handleOpacityChange = (opacity2) => {
+    if (selectedElement) {
+      selectedElement.setOpacity(opacity2);
+      updateElement == null ? void 0 : updateElement(selectedElement);
+    }
+  };
+  const handlePositionChange = (props) => {
+    if (selectedElement) {
+      selectedElement.setPosition({ x: props.x ?? 0, y: props.y ?? 0 });
+      updateElement == null ? void 0 : updateElement(selectedElement);
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
@@ -2852,8 +2866,8 @@ function ElementProps({ selectedElement, updateElement }) {
             "input",
             {
               type: "number",
-              value: x ?? 0,
-              onChange: (e) => handleUpdateElement({ x: Number(e.target.value) }),
+              value: position.x ?? 0,
+              onChange: (e) => handlePositionChange({ x: Number(e.target.value) }),
               className: "input-dark"
             }
           )
@@ -2864,8 +2878,8 @@ function ElementProps({ selectedElement, updateElement }) {
             "input",
             {
               type: "number",
-              value: y ?? 0,
-              onChange: (e) => handleUpdateElement({ y: Number(e.target.value) }),
+              value: position.y ?? 0,
+              onChange: (e) => handlePositionChange({ y: Number(e.target.value) }),
               className: "input-dark"
             }
           )
@@ -2882,7 +2896,7 @@ function ElementProps({ selectedElement, updateElement }) {
             min: "0",
             max: "100",
             value: (opacity ?? 1) * 100,
-            onChange: (e) => handleUpdateElement({ opacity: Number(e.target.value) / 100 }),
+            onChange: (e) => handleOpacityChange(Number(e.target.value) / 100),
             className: "slider-purple"
           }
         ),
@@ -2902,7 +2916,7 @@ function ElementProps({ selectedElement, updateElement }) {
             min: "0",
             max: "360",
             value: rotation ?? 0,
-            onChange: (e) => handleUpdateElement({ rotation: Number(e.target.value) }),
+            onChange: (e) => handleRotationChange(Number(e.target.value)),
             className: "slider-purple"
           }
         ),
@@ -3749,25 +3763,76 @@ function TwickStudio({ studioConfig }) {
   ] }) });
 }
 export {
+  ANIMATIONS2 as ANIMATIONS,
+  AudioElement2 as AudioElement,
   AudioPanel,
+  BaseMediaManager,
+  BrowserMediaManager2 as BrowserMediaManager,
+  CAPTION_COLOR,
+  CAPTION_FONT,
   CAPTION_PROPS,
+  CAPTION_STYLE2 as CAPTION_STYLE,
+  CAPTION_STYLE_OPTIONS,
+  CaptionElement2 as CaptionElement,
+  CircleElement2 as CircleElement,
   CirclePanel,
+  ElementAdder,
+  ElementAnimation2 as ElementAnimation,
+  ElementCloner,
+  ElementDeserializer,
+  ElementFrameEffect,
+  ElementRemover,
+  ElementSerializer,
+  ElementSplitter,
+  ElementTextEffect2 as ElementTextEffect,
+  ElementUpdater,
+  ElementValidator,
   INITIAL_TIMELINE_DATA,
+  IconElement2 as IconElement,
   IconPanel,
+  ImageElement2 as ImageElement,
   ImagePanel,
   LivePlayer,
   LivePlayerProvider,
+  PLAYER_STATE2 as PLAYER_STATE,
+  PROCESS_STATE,
+  PlayerControls,
+  RectElement2 as RectElement,
   RectPanel,
   StudioHeader,
   SubtitlesPanel,
+  TEXT_EFFECTS2 as TEXT_EFFECTS,
+  TIMELINE_ACTION,
+  TIMELINE_ELEMENT_TYPE,
+  TextElement2 as TextElement,
   TextPanel,
+  TimelineEditor,
+  TimelineManager,
   TimelineProvider,
   Toolbar,
+  Track2 as Track,
+  TrackElement2 as TrackElement,
   TwickStudio,
   default2 as VideoEditor,
+  VideoElement2 as VideoElement,
   VideoPanel,
+  WORDS_PER_PHRASE,
+  animationGifs,
   TwickStudio as default,
+  generateId,
+  generateShortUuid,
+  getAnimationGif,
+  getBaseProject,
+  getCurrentElements,
+  getTotalDuration,
+  isElementId,
+  isTrackId,
+  setElementColors,
+  useEditorManager2 as useEditorManager,
   useGenerateSubtitles,
-  useStudioManager
+  useLivePlayerContext2 as useLivePlayerContext,
+  usePlayerControl,
+  useStudioManager,
+  useTimelineControl
 };
 //# sourceMappingURL=index.mjs.map