@twick/studio 0.15.12 → 0.15.14

package/dist/index.mjs

@@ -114,49 +114,49 @@ 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$s = [
+const __iconNode$u = [
   ["rect", { width: "18", height: "14", x: "3", y: "5", rx: "2", ry: "2", key: "12ruh7" }],
   ["path", { d: "M7 15h4M15 15h2M7 11h2M13 11h4", key: "1ueiar" }]
 ];
-const Captions = createLucideIcon("captions", __iconNode$s);
+const Captions = createLucideIcon("captions", __iconNode$u);
 /**
  * @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$r = [
+const __iconNode$t = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
 ];
-const CircleCheck = createLucideIcon("circle-check", __iconNode$r);
+const CircleCheck = createLucideIcon("circle-check", __iconNode$t);
 /**
  * @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$q = [
+const __iconNode$s = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m15 9-6 6", key: "1uzhvr" }],
   ["path", { d: "m9 9 6 6", key: "z0biqf" }]
 ];
-const CircleX = createLucideIcon("circle-x", __iconNode$q);
+const CircleX = createLucideIcon("circle-x", __iconNode$s);
 /**
  * @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$p = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
-const Circle = createLucideIcon("circle", __iconNode$p);
+const __iconNode$r = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
+const Circle = createLucideIcon("circle", __iconNode$r);
 /**
  * @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$o = [
+const __iconNode$q = [
   [
     "path",
     { d: "M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z", key: "1tn4o7" }
@@ -165,112 +165,132 @@ const __iconNode$o = [
   ["path", { d: "m12.4 3.4 3.1 4", key: "6hsd6n" }],
   ["path", { d: "M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z", key: "ltgou9" }]
 ];
-const Clapperboard = createLucideIcon("clapperboard", __iconNode$o);
+const Clapperboard = createLucideIcon("clapperboard", __iconNode$q);
 /**
  * @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$n = [
+const __iconNode$p = [
   ["path", { d: "M12 15V3", key: "m9g1x1" }],
   ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
   ["path", { d: "m7 10 5 5 5-5", key: "brsn70" }]
 ];
-const Download = createLucideIcon("download", __iconNode$n);
+const Download = createLucideIcon("download", __iconNode$p);
 /**
  * @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$m = [
+const __iconNode$o = [
   ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
   ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }]
 ];
-const File = createLucideIcon("file", __iconNode$m);
+const File = createLucideIcon("file", __iconNode$o);
 /**
  * @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$l = [
+const __iconNode$n = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
   ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }],
   ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
 ];
-const Image = createLucideIcon("image", __iconNode$l);
+const Image = createLucideIcon("image", __iconNode$n);
 /**
  * @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$k = [
+const __iconNode$m = [
   ["path", { d: "M6 16c5 0 7-8 12-8a4 4 0 0 1 0 8c-5 0-7-8-12-8a4 4 0 1 0 0 8", key: "18ogeb" }]
 ];
-const Infinity = createLucideIcon("infinity", __iconNode$k);
+const Infinity = createLucideIcon("infinity", __iconNode$m);
 /**
  * @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$j = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-const LoaderCircle = createLucideIcon("loader-circle", __iconNode$j);
+const __iconNode$l = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+const LoaderCircle = createLucideIcon("loader-circle", __iconNode$l);
 /**
  * @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$i = [
+const __iconNode$k = [
   ["path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z", key: "1lielz" }]
 ];
-const MessageSquare = createLucideIcon("message-square", __iconNode$i);
+const MessageSquare = createLucideIcon("message-square", __iconNode$k);
 /**
  * @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$h = [
+const __iconNode$j = [
   ["path", { d: "M9 18V5l12-2v13", key: "1jmyc2" }],
   ["circle", { cx: "6", cy: "18", r: "3", key: "fqmcym" }],
   ["circle", { cx: "18", cy: "16", r: "3", key: "1hluhg" }]
 ];
-const Music = createLucideIcon("music", __iconNode$h);
+const Music = createLucideIcon("music", __iconNode$j);
 /**
  * @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$g = [
+const __iconNode$i = [
   ["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$g);
+const Pause = createLucideIcon("pause", __iconNode$i);
 /**
  * @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$f = [["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]];
-const Play = createLucideIcon("play", __iconNode$f);
+const __iconNode$h = [["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]];
+const Play = createLucideIcon("play", __iconNode$h);
 /**
  * @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$e = [
+const __iconNode$g = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-const Plus = createLucideIcon("plus", __iconNode$e);
+const Plus = createLucideIcon("plus", __iconNode$g);
+/**
+ * @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$f = [
+  ["rect", { width: "20", height: "12", x: "2", y: "6", rx: "2", key: "9lu3g6" }]
+];
+const RectangleHorizontal = createLucideIcon("rectangle-horizontal", __iconNode$f);
+/**
+ * @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$e = [
+  ["rect", { width: "12", height: "20", x: "6", y: "2", rx: "2", key: "1oxtiu" }]
+];
+const RectangleVertical = createLucideIcon("rectangle-vertical", __iconNode$e);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
@@ -567,6 +587,15 @@ const StudioHeader = ({
       setOrientation(orientation2);
     }
   }, []);
+  const handleOrientationChange = (nextOrientation) => {
+    if (nextOrientation === orientation) return;
+    const confirmMessage = "Changing orientation will create a new project with the new resolution. Do you want to continue?";
+    if (!window.confirm(confirmMessage)) {
+      return;
+    }
+    onNewProject();
+    setOrientation(nextOrientation);
+  };
   useEffect(() => {
     if (orientation === "horizontal") {
       localStorage.setItem("orientation", "horizontal");
@@ -577,10 +606,31 @@ const StudioHeader = ({
     }
   }, [orientation]);
   return /* @__PURE__ */ jsxs("header", { className: "header", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex-container", children: /* @__PURE__ */ jsxs("div", { className: "flex-container", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-container", children: [
       /* @__PURE__ */ jsx(Clapperboard, { className: "icon-lg accent-purple" }),
       /* @__PURE__ */ jsx("h1", { className: "text-gradient", children: "Twick Studio" })
-    ] }) }),
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-container", style: { gap: "0.5rem" }, children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm opacity-80", children: "Orientation" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: `btn-ghost ${orientation === "vertical" ? "btn-primary" : ""}`,
+          title: "Portrait (720×1280)",
+          onClick: () => handleOrientationChange("vertical"),
+          children: /* @__PURE__ */ jsx(RectangleVertical, { className: "icon-sm" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: `btn-ghost ${orientation === "horizontal" ? "btn-primary" : ""}`,
+          title: "Landscape (1280×720)",
+          onClick: () => handleOrientationChange("horizontal"),
+          children: /* @__PURE__ */ jsx(RectangleHorizontal, { className: "icon-sm" })
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex-container", children: [
       /* @__PURE__ */ jsxs(
         "button",
@@ -1477,6 +1527,9 @@ function TextPanel({
   applyShadow,
   shadowColor,
   strokeWidth,
+  applyBackground,
+  backgroundColor,
+  backgroundOpacity,
   fonts,
   operation,
   setTextContent,
@@ -1489,6 +1542,9 @@ function TextPanel({
   setApplyShadow,
   setShadowColor,
   setStrokeWidth,
+  setApplyBackground,
+  setBackgroundColor,
+  setBackgroundOpacity,
   handleApplyChanges
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
@@ -1657,6 +1713,69 @@ function TextPanel({
         /* @__PURE__ */ jsx("span", { className: "slider-value", children: strokeWidth })
       ] })
     ] }),
+    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Background" }),
+      /* @__PURE__ */ jsxs("div", { className: "color-section", children: [
+        /* @__PURE__ */ jsx("div", { className: "checkbox-control", children: /* @__PURE__ */ jsxs("label", { className: "checkbox-label", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: applyBackground,
+              onChange: (e) => setApplyBackground(e.target.checked),
+              className: "checkbox-purple"
+            }
+          ),
+          "Apply Background"
+        ] }) }),
+        applyBackground && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "color-control", children: [
+            /* @__PURE__ */ jsx("label", { className: "label-small", children: "Background Color" }),
+            /* @__PURE__ */ jsxs("div", { className: "color-inputs", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "color",
+                  value: backgroundColor,
+                  onChange: (e) => setBackgroundColor(e.target.value),
+                  className: "color-picker"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  value: backgroundColor,
+                  onChange: (e) => setBackgroundColor(e.target.value),
+                  className: "color-text"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+            /* @__PURE__ */ jsx("label", { className: "label-small", children: "Background Opacity" }),
+            /* @__PURE__ */ jsxs("div", { className: "slider-container", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  min: "0",
+                  max: "1",
+                  step: 0.1,
+                  value: backgroundOpacity,
+                  onChange: (e) => setBackgroundOpacity(Number(e.target.value)),
+                  className: "slider-purple"
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "slider-value", children: [
+                Math.round(backgroundOpacity * 100),
+                "%"
+              ] })
+            ] })
+          ] })
+        ] })
+      ] })
+    ] }),
     /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx("button", { onClick: handleApplyChanges, className: "btn-primary w-full", children: operation }) })
   ] });
 }
@@ -1691,6 +1810,9 @@ const useTextPanel = ({
   const [applyShadow, setApplyShadow] = useState(DEFAULT_TEXT_PROPS.applyShadow);
   const [shadowColor, setShadowColor] = useState(DEFAULT_TEXT_PROPS.shadowColor);
   const [strokeWidth, setStrokeWidth] = useState(DEFAULT_TEXT_PROPS.strokeWidth);
+  const [applyBackground, setApplyBackground] = useState(false);
+  const [backgroundColor, setBackgroundColor] = useState("#FACC15");
+  const [backgroundOpacity, setBackgroundOpacity] = useState(1);
   const fonts = Object.values(AVAILABLE_TEXT_FONTS);
   const handleApplyChanges = async () => {
     let textElement;
@@ -1705,35 +1827,41 @@ const useTextPanel = ({
       textElement.setStrokeColor(strokeColor);
       textElement.setLineWidth(strokeWidth);
       textElement.setTextAlign(DEFAULT_TEXT_PROPS.textAlign);
+      const nextProps = { ...textElement.getProps() };
       if (applyShadow) {
-        textElement.setProps({
-          ...textElement.getProps(),
-          shadowColor,
-          shadowOffset: DEFAULT_TEXT_PROPS.shadowOffset,
-          shadowBlur: DEFAULT_TEXT_PROPS.shadowBlur,
-          shadowOpacity: DEFAULT_TEXT_PROPS.shadowOpacity
-        });
+        nextProps.shadowColor = shadowColor;
+        nextProps.shadowOffset = DEFAULT_TEXT_PROPS.shadowOffset;
+        nextProps.shadowBlur = DEFAULT_TEXT_PROPS.shadowBlur;
+        nextProps.shadowOpacity = DEFAULT_TEXT_PROPS.shadowOpacity;
       } else {
-        textElement.setProps({
-          ...textElement.getProps(),
-          shadowColor: void 0,
-          shadowOffset: void 0,
-          shadowBlur: void 0,
-          shadowOpacity: void 0
-        });
+        nextProps.shadowColor = void 0;
+        nextProps.shadowOffset = void 0;
+        nextProps.shadowBlur = void 0;
+        nextProps.shadowOpacity = void 0;
+      }
+      if (applyBackground) {
+        nextProps.backgroundColor = backgroundColor;
+        nextProps.backgroundOpacity = backgroundOpacity;
+      } else {
+        nextProps.backgroundColor = void 0;
+        nextProps.backgroundOpacity = void 0;
       }
+      textElement.setProps(nextProps);
       updateElement(textElement);
     } else {
       textElement = new TextElement(textContent).setFontSize(fontSize).setFontFamily(selectedFont).setFontWeight(isBold ? 700 : 400).setFontStyle(isItalic ? "italic" : "normal").setFill(textColor).setStrokeColor(strokeColor).setLineWidth(strokeWidth).setTextAlign("center");
+      const nextProps = { ...textElement.getProps() };
       if (applyShadow) {
-        textElement.setProps({
-          ...textElement.getProps(),
-          shadowColor,
-          shadowOffset: DEFAULT_TEXT_PROPS.shadowOffset,
-          shadowBlur: DEFAULT_TEXT_PROPS.shadowBlur,
-          shadowOpacity: DEFAULT_TEXT_PROPS.shadowOpacity
-        });
+        nextProps.shadowColor = shadowColor;
+        nextProps.shadowOffset = DEFAULT_TEXT_PROPS.shadowOffset;
+        nextProps.shadowBlur = DEFAULT_TEXT_PROPS.shadowBlur;
+        nextProps.shadowOpacity = DEFAULT_TEXT_PROPS.shadowOpacity;
+      }
+      if (applyBackground) {
+        nextProps.backgroundColor = backgroundColor;
+        nextProps.backgroundOpacity = backgroundOpacity;
       }
+      textElement.setProps(nextProps);
       await addElement(textElement);
     }
   };
@@ -1753,6 +1881,12 @@ const useTextPanel = ({
       if (hasShadow) {
         setShadowColor(textProps.shadowColor ?? DEFAULT_TEXT_PROPS.shadowColor);
       }
+      const hasBackground = textProps.backgroundColor != null && textProps.backgroundColor !== "";
+      setApplyBackground(hasBackground);
+      if (hasBackground) {
+        setBackgroundColor(textProps.backgroundColor ?? "#FACC15");
+        setBackgroundOpacity(textProps.backgroundOpacity ?? 1);
+      }
     } else {
       setTextContent(DEFAULT_TEXT_PROPS.text);
       setFontSize(DEFAULT_TEXT_PROPS.fontSize);
@@ -1764,6 +1898,9 @@ const useTextPanel = ({
       setStrokeWidth(DEFAULT_TEXT_PROPS.strokeWidth);
       setApplyShadow(DEFAULT_TEXT_PROPS.applyShadow);
       setShadowColor(DEFAULT_TEXT_PROPS.shadowColor);
+      setApplyBackground(false);
+      setBackgroundColor("#FACC15");
+      setBackgroundOpacity(1);
     }
   }, [selectedElement]);
   return {
@@ -1789,6 +1926,12 @@ const useTextPanel = ({
     setApplyShadow,
     setShadowColor,
     setStrokeWidth,
+    applyBackground,
+    backgroundColor,
+    backgroundOpacity,
+    setApplyBackground,
+    setBackgroundColor,
+    setBackgroundOpacity,
     handleApplyChanges
   };
 };
@@ -2499,7 +2642,7 @@ const useSubtitlesPanel = () => {
   const subtitlesTrack = useRef(null);
   const { editor } = useTimelineContext();
   const fetchSubtitles = async () => {
-    const editorSubtitlesTrack = editor.getSubtiltesTrack();
+    const editorSubtitlesTrack = editor.getSubtitlesTrack();
     if (editorSubtitlesTrack) {
       subtitlesTrack.current = editorSubtitlesTrack;
       setSubtitles(
@@ -3526,7 +3669,7 @@ function PropertiesPanelContainer({
   ] });
 }
 const useStudioOperation = (studioConfig) => {
-  const { editor, present } = useTimelineContext();
+  const { editor, present, videoResolution } = useTimelineContext();
   const { setSeekTime, setPlayerState } = useLivePlayerContext();
   const [projectName, setProjectName] = useState("");
   const onNewProject = () => {
@@ -3574,14 +3717,13 @@ const useStudioOperation = (studioConfig) => {
     }
   };
   const onExportVideo = async () => {
-    var _a, _b;
     if ((studioConfig == null ? void 0 : studioConfig.exportVideo) && present) {
       await studioConfig.exportVideo(present, {
         outFile: "output.mp4",
         fps: 30,
         resolution: {
-          width: (_a = studioConfig.videoProps) == null ? void 0 : _a.width,
-          height: (_b = studioConfig.videoProps) == null ? void 0 : _b.height
+          width: videoResolution.width,
+          height: videoResolution.height
         }
       });
     } else {