@twick/studio 0.15.12 → 0.15.13

package/dist/index.js

@@ -113,49 +113,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" }
@@ -164,112 +164,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
  *
@@ -566,6 +586,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);
+  };
   react.useEffect(() => {
     if (orientation === "horizontal") {
       localStorage.setItem("orientation", "horizontal");
@@ -576,10 +605,31 @@ const StudioHeader = ({
     }
   }, [orientation]);
   return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "header", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-container", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-container", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-container", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Clapperboard, { className: "icon-lg accent-purple" }),
       /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-gradient", children: "Twick Studio" })
-    ] }) }),
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-container", style: { gap: "0.5rem" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm opacity-80", children: "Orientation" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: `btn-ghost ${orientation === "vertical" ? "btn-primary" : ""}`,
+          title: "Portrait (720×1280)",
+          onClick: () => handleOrientationChange("vertical"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(RectangleVertical, { className: "icon-sm" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: `btn-ghost ${orientation === "horizontal" ? "btn-primary" : ""}`,
+          title: "Landscape (1280×720)",
+          onClick: () => handleOrientationChange("horizontal"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(RectangleHorizontal, { className: "icon-sm" })
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-container", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
@@ -3525,7 +3575,7 @@ function PropertiesPanelContainer({
   ] });
 }
 const useStudioOperation = (studioConfig) => {
-  const { editor, present } = timeline.useTimelineContext();
+  const { editor, present, videoResolution } = timeline.useTimelineContext();
   const { setSeekTime, setPlayerState } = livePlayer.useLivePlayerContext();
   const [projectName, setProjectName] = react.useState("");
   const onNewProject = () => {
@@ -3573,14 +3623,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 {