@twick/studio 0.14.11 → 0.14.13

package/dist/index.js

@@ -110,15 +110,49 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
    */
-  const __iconNode$o = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
-  const Circle = createLucideIcon("circle", __iconNode$o);
+  const __iconNode$s = [
+    ["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);
   /**
    * @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$r = [
+    ["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);
+  /**
+   * @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 = [
+    ["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);
+  /**
+   * @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);
+  /**
+   * @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 = [
     [
       "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" }
@@ -127,119 +161,119 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     ["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$n);
+  const Clapperboard = createLucideIcon("clapperboard", __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$m = [
+  const __iconNode$n = [
     ["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$m);
+  const Download = createLucideIcon("download", __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$l = [
+  const __iconNode$m = [
     ["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$l);
+  const File = createLucideIcon("file", __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$k = [
+  const __iconNode$l = [
     ["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$k);
+  const Image = createLucideIcon("image", __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$j = [
+  const __iconNode$k = [
     ["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$j);
+  const Infinity = createLucideIcon("infinity", __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$i = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-  const LoaderCircle = createLucideIcon("loader-circle", __iconNode$i);
+  const __iconNode$j = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+  const LoaderCircle = createLucideIcon("loader-circle", __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$h = [
+  const __iconNode$i = [
     ["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$h);
+  const MessageSquare = createLucideIcon("message-square", __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$g = [
+  const __iconNode$h = [
     ["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$g);
+  const Music = createLucideIcon("music", __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$f = [
+  const __iconNode$g = [
     ["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$f);
+  const Pause = createLucideIcon("pause", __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$e = [["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]];
-  const Play = createLucideIcon("play", __iconNode$e);
+  const __iconNode$f = [["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]];
+  const Play = createLucideIcon("play", __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$d = [
+  const __iconNode$e = [
     ["path", { d: "M5 12h14", key: "1ays0h" }],
     ["path", { d: "M12 5v14", key: "s699le" }]
   ];
-  const Plus = createLucideIcon("plus", __iconNode$d);
+  const Plus = createLucideIcon("plus", __iconNode$e);
   /**
    * @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$c = [
+  const __iconNode$d = [
     [
       "path",
       {
@@ -250,39 +284,39 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     ["path", { d: "M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7", key: "1ydtos" }],
     ["path", { d: "M7 3v4a1 1 0 0 0 1 1h7", key: "t51u73" }]
   ];
-  const Save = createLucideIcon("save", __iconNode$c);
+  const Save = createLucideIcon("save", __iconNode$d);
   /**
    * @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$b = [
+  const __iconNode$c = [
     ["circle", { cx: "6", cy: "6", r: "3", key: "1lh9wr" }],
     ["path", { d: "M8.12 8.12 12 12", key: "1alkpv" }],
     ["path", { d: "M20 4 8.12 15.88", key: "xgtan2" }],
     ["circle", { cx: "6", cy: "18", r: "3", key: "fqmcym" }],
     ["path", { d: "M14.8 14.8 20 20", key: "ptml3r" }]
   ];
-  const Scissors = createLucideIcon("scissors", __iconNode$b);
+  const Scissors = createLucideIcon("scissors", __iconNode$c);
   /**
    * @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$a = [
+  const __iconNode$b = [
     ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
     ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
   ];
-  const Search = createLucideIcon("search", __iconNode$a);
+  const Search = createLucideIcon("search", __iconNode$b);
   /**
    * @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$9 = [
+  const __iconNode$a = [
     [
       "path",
       {
@@ -292,14 +326,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     ],
     ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
   ];
-  const Settings = createLucideIcon("settings", __iconNode$9);
+  const Settings = createLucideIcon("settings", __iconNode$a);
   /**
    * @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$8 = [
+  const __iconNode$9 = [
     [
       "path",
       {
@@ -312,62 +346,62 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     ["path", { d: "M4 17v2", key: "vumght" }],
     ["path", { d: "M5 18H3", key: "zchphs" }]
   ];
-  const Sparkles = createLucideIcon("sparkles", __iconNode$8);
+  const Sparkles = createLucideIcon("sparkles", __iconNode$9);
   /**
    * @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$7 = [
+  const __iconNode$8 = [
     ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }]
   ];
-  const Square = createLucideIcon("square", __iconNode$7);
+  const Square = createLucideIcon("square", __iconNode$8);
   /**
    * @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$6 = [
+  const __iconNode$7 = [
     ["path", { d: "M3 6h18", key: "d0wm0j" }],
     ["path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6", key: "4alrt4" }],
     ["path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2", key: "v07s0e" }],
     ["line", { x1: "10", x2: "10", y1: "11", y2: "17", key: "1uufr5" }],
     ["line", { x1: "14", x2: "14", y1: "11", y2: "17", key: "xtxkd" }]
   ];
-  const Trash2 = createLucideIcon("trash-2", __iconNode$6);
+  const Trash2 = createLucideIcon("trash-2", __iconNode$7);
   /**
    * @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$5 = [
+  const __iconNode$6 = [
     ["path", { d: "M12 4v16", key: "1654pz" }],
     ["path", { d: "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2", key: "e0r10z" }],
     ["path", { d: "M9 20h6", key: "s66wpe" }]
   ];
-  const Type = createLucideIcon("type", __iconNode$5);
+  const Type = createLucideIcon("type", __iconNode$6);
   /**
    * @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$4 = [
+  const __iconNode$5 = [
     ["path", { d: "M12 3v12", key: "1x0j5s" }],
     ["path", { d: "m17 8-5-5-5 5", key: "7q97r8" }],
     ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }]
   ];
-  const Upload = createLucideIcon("upload", __iconNode$4);
+  const Upload = createLucideIcon("upload", __iconNode$5);
   /**
    * @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$3 = [
+  const __iconNode$4 = [
     [
       "path",
       {
@@ -377,14 +411,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     ],
     ["rect", { x: "2", y: "6", width: "14", height: "12", rx: "2", key: "158x01" }]
   ];
-  const Video = createLucideIcon("video", __iconNode$3);
+  const Video = createLucideIcon("video", __iconNode$4);
   /**
    * @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$2 = [
+  const __iconNode$3 = [
     [
       "path",
       {
@@ -395,7 +429,25 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     ["path", { d: "M16 9a5 5 0 0 1 0 6", key: "1q6k2b" }],
     ["path", { d: "M19.364 18.364a9 9 0 0 0 0-12.728", key: "ijwkga" }]
   ];
-  const Volume2 = createLucideIcon("volume-2", __iconNode$2);
+  const Volume2 = createLucideIcon("volume-2", __iconNode$3);
+  /**
+   * @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$2 = [
+    [
+      "path",
+      {
+        d: "M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z",
+        key: "uqj9uw"
+      }
+    ],
+    ["line", { x1: "22", x2: "16", y1: "9", y2: "15", key: "1ewh16" }],
+    ["line", { x1: "16", x2: "22", y1: "9", y2: "15", key: "5ykzw1" }]
+  ];
+  const VolumeX = createLucideIcon("volume-x", __iconNode$2);
   /**
    * @license lucide-react v0.511.0 - ISC
    *
@@ -2664,6 +2716,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         icon: "MessageSquare",
         description: "Subtitle Style"
       }
+    ],
+    [
+      "generate-subtitles",
+      {
+        id: "generate-subtitles",
+        name: "Generate Subtitles",
+        icon: "Subtitles",
+        description: "Generate Subtitles"
+      }
     ]
   ]);
   const getIcon = (iconName) => {
@@ -2676,6 +2737,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         return Image;
       case "Music":
         return Music;
+      case "Subtitles":
+        return Captions;
       case "MessageSquare":
         return MessageSquare;
       case "Settings":
@@ -2708,6 +2771,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         sections.push(propsCategories.get("animations"));
         sections.push(propsCategories.get("color-effects"));
         sections.push(propsCategories.get("playback-props"));
+        sections.push(propsCategories.get("generate-subtitles"));
       } else if (selectedElement instanceof timeline.AudioElement) {
         sections.push(propsCategories.get("element-props"));
         sections.push(propsCategories.get("playback-props"));
@@ -3145,10 +3209,250 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       ] })
     ] });
   }
+  const hasAudio = async (src) => {
+    if (!src) return false;
+    const isSafeUrl = /^(https?:|blob:|data:)/i.test(src);
+    if (!isSafeUrl) return false;
+    try {
+      const audioBuffer = await fetchAndDecodeAudio(src);
+      if (audioBuffer.duration === 0 || audioBuffer.length === 0) {
+        return false;
+      }
+      if (isAudioSilent(audioBuffer)) {
+        return false;
+      }
+      return true;
+    } catch (error) {
+      return false;
+    }
+  };
+  const fetchAndDecodeAudio = async (src) => {
+    const response = await fetch(src);
+    if (!response.ok) throw new Error(`Failed to fetch source: ${response.status}`);
+    const arrayBuffer = await response.arrayBuffer();
+    return decodeAudioData(arrayBuffer);
+  };
+  const decodeAudioData = async (arrayBuffer) => {
+    const AudioContextCtor = window.AudioContext || window.webkitAudioContext;
+    if (!AudioContextCtor) throw new Error("Web Audio API not supported");
+    const audioContext = new AudioContextCtor();
+    try {
+      return await new Promise((resolve, reject) => {
+        audioContext.decodeAudioData(
+          arrayBuffer.slice(0),
+          (buf) => resolve(buf),
+          (err) => reject(err || new Error("Failed to decode audio: no audio track found or unsupported format"))
+        );
+      });
+    } finally {
+      audioContext.close();
+    }
+  };
+  const isAudioSilent = (buffer, threshold = 1e-3) => {
+    for (let channel = 0; channel < buffer.numberOfChannels; channel++) {
+      const channelData = buffer.getChannelData(channel);
+      for (let i = 0; i < channelData.length; i += 100) {
+        if (Math.abs(channelData[i]) > threshold) {
+          return false;
+        }
+      }
+    }
+    return true;
+  };
+  const loadFile = (accept) => {
+    return new Promise((resolve, reject) => {
+      try {
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = accept;
+        input.style.display = "none";
+        document.body.appendChild(input);
+        const cleanup = () => {
+          input.value = "";
+          document.body.removeChild(input);
+        };
+        input.onchange = () => {
+          const file = input.files && input.files[0];
+          cleanup();
+          if (!file) {
+            reject(new Error("No file selected"));
+            return;
+          }
+          resolve(file);
+        };
+        input.click();
+      } catch (error) {
+        reject(error);
+      }
+    });
+  };
+  const saveAsFile = (content, type, name) => {
+    const blob = typeof content === "string" ? new Blob([content], { type }) : content;
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = name;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+  function GenerateSubtitlesPanel({
+    selectedElement,
+    addSubtitlesToTimeline,
+    onGenerateSubtitles,
+    getSubtitleStatus
+  }) {
+    const [containsAudio, setContainsAudio] = react.useState(null);
+    const [isLoading, setIsLoading] = react.useState(true);
+    const [isGenerating, setIsGenerating] = react.useState(false);
+    const [pollingStatus, setPollingStatus] = react.useState("idle");
+    const [errorMessage, setErrorMessage] = react.useState(null);
+    const pollingIntervalRef = react.useRef(null);
+    const currentReqIdRef = react.useRef(null);
+    react.useEffect(() => {
+      return () => {
+        if (pollingIntervalRef.current) {
+          clearInterval(pollingIntervalRef.current);
+        }
+      };
+    }, []);
+    const stopPolling = () => {
+      if (pollingIntervalRef.current) {
+        clearInterval(pollingIntervalRef.current);
+        pollingIntervalRef.current = null;
+      }
+    };
+    const startPolling = async (reqId) => {
+      if (!getSubtitleStatus) {
+        return;
+      }
+      setPollingStatus("polling");
+      setIsGenerating(true);
+      setErrorMessage(null);
+      const poll = async () => {
+        try {
+          const response = await getSubtitleStatus(reqId);
+          if (response.status === "completed") {
+            stopPolling();
+            setPollingStatus("success");
+            setIsGenerating(false);
+            addSubtitlesToTimeline(response.subtitles || []);
+            setTimeout(() => {
+              setPollingStatus("idle");
+            }, 3e3);
+          } else if (response.status === "pending") {
+          } else if (response.status === "failed") {
+            stopPolling();
+            setPollingStatus("error");
+            setIsGenerating(false);
+            setErrorMessage(response.error || "Failed to generate subtitles");
+            console.error("Error generating subtitles:", response.error);
+          }
+        } catch (error) {
+          stopPolling();
+          setPollingStatus("error");
+          setIsGenerating(false);
+          setErrorMessage(error instanceof Error ? error.message : "Failed to get subtitle status");
+          console.error("Error polling for subtitles:", error);
+        }
+      };
+      await poll();
+      pollingIntervalRef.current = setInterval(poll, 2e3);
+    };
+    const handleGenerateSubtitles = async () => {
+      if (!(selectedElement instanceof timeline.VideoElement)) {
+        return;
+      }
+      const videoElement = selectedElement;
+      try {
+        const reqId = await onGenerateSubtitles(videoElement);
+        if (!reqId) {
+          setPollingStatus("error");
+          setIsGenerating(false);
+          setErrorMessage("Failed to start subtitle generation");
+          console.error("Error generating subtitles: Failed to start subtitle generation");
+          return;
+        }
+        currentReqIdRef.current = reqId;
+        await startPolling(reqId);
+      } catch (error) {
+        setPollingStatus("error");
+        setIsGenerating(false);
+        setErrorMessage(error instanceof Error ? error.message : "Failed to start subtitle generation");
+        console.error("Error generating subtitles:", error);
+      }
+    };
+    const checkAudio = async () => {
+      setIsLoading(true);
+      if (selectedElement instanceof timeline.VideoElement) {
+        const videoElement = selectedElement;
+        const videoUrl = videoElement.getSrc();
+        if (videoUrl) {
+          try {
+            const hasAudioTrack = await hasAudio(videoUrl);
+            setContainsAudio(hasAudioTrack);
+          } catch (error) {
+            console.error("Error checking audio:", error);
+            setContainsAudio(false);
+          }
+        } else {
+          setContainsAudio(false);
+        }
+      } else {
+        setContainsAudio(false);
+      }
+      setIsLoading(false);
+    };
+    react.useEffect(() => {
+      checkAudio();
+      stopPolling();
+      setPollingStatus("idle");
+      setIsGenerating(false);
+      setErrorMessage(null);
+    }, [selectedElement]);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-title", children: "Generate Subtitles Panel" }),
+      isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-state-content", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(LoaderCircle, { className: "empty-state-icon animate-spin" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: "Checking for audio..." })
+      ] }) }) }),
+      !isLoading && containsAudio === false && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-state-content", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(VolumeX, { className: "empty-state-icon" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: "No audio track found in this video" })
+      ] }) }) }),
+      !isLoading && containsAudio === true && pollingStatus === "idle" && !isGenerating && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-state-content", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Volume2, { className: "empty-state-icon" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: "Audio detected! You can now generate subtitles" })
+      ] }) }) }),
+      !isLoading && isGenerating && pollingStatus === "polling" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-state-content", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(LoaderCircle, { className: "empty-state-icon animate-spin" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: "Generating subtitles... Please wait" })
+      ] }) }) }),
+      !isLoading && pollingStatus === "success" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-state-content", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CircleCheck, { className: "empty-state-icon", color: "var(--color-green-500)" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: "Subtitles generated successfully!" })
+      ] }) }) }),
+      !isLoading && pollingStatus === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-state-content", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CircleX, { className: "empty-state-icon", color: "var(--color-red-500)" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: errorMessage || "Failed to generate subtitles" })
+      ] }) }) }),
+      !isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: handleGenerateSubtitles,
+          disabled: !containsAudio || isGenerating,
+          className: "btn-primary w-full",
+          children: isGenerating ? "Generating..." : "Generate Subtitles"
+        }
+      ) })
+    ] });
+  }
   function PropertiesPanelContainer({
     selectedProp,
     selectedElement,
-    updateElement
+    updateElement,
+    addSubtitlesToTimeline,
+    onGenerateSubtitles,
+    getSubtitleStatus
   }) {
     if (!selectedElement) {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "properties-header", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "properties-title", children: "Select Element to see properties" }) }) });
@@ -3184,45 +3488,18 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           selectedElement,
           updateElement
         }
+      ),
+      selectedProp === "generate-subtitles" && /* @__PURE__ */ jsxRuntime.jsx(
+        GenerateSubtitlesPanel,
+        {
+          selectedElement,
+          addSubtitlesToTimeline,
+          onGenerateSubtitles,
+          getSubtitleStatus
+        }
       )
     ] });
   }
-  const loadFile = (accept) => {
-    return new Promise((resolve, reject) => {
-      try {
-        const input = document.createElement("input");
-        input.type = "file";
-        input.accept = accept;
-        input.style.display = "none";
-        document.body.appendChild(input);
-        const cleanup = () => {
-          input.value = "";
-          document.body.removeChild(input);
-        };
-        input.onchange = () => {
-          const file = input.files && input.files[0];
-          cleanup();
-          if (!file) {
-            reject(new Error("No file selected"));
-            return;
-          }
-          resolve(file);
-        };
-        input.click();
-      } catch (error) {
-        reject(error);
-      }
-    });
-  };
-  const saveAsFile = (content, type, name) => {
-    const blob = typeof content === "string" ? new Blob([content], { type }) : content;
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = name;
-    a.click();
-    URL.revokeObjectURL(url);
-  };
   const useStudioOperation = (studioConfig) => {
     const { editor, present } = timeline.useTimelineContext();
     const [projectName, setProjectName] = react.useState("");
@@ -3276,7 +3553,79 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         alert("Export video not supported in demo mode");
       }
     };
-    return { onLoadProject, onSaveProject, onExportVideo };
+    const onGenerateSubtitles = async (videoElement) => {
+      if (studioConfig == null ? void 0 : studioConfig.subtitleGenerationService) {
+        const service = studioConfig.subtitleGenerationService;
+        const reqId = await service.generateSubtitles(videoElement, present);
+        return reqId;
+      }
+      alert("Generate subtitles not supported in demo mode");
+      return null;
+    };
+    const addSubtitlesToTimeline = (subtitles) => {
+      var _a;
+      const updatedProjectJSON = (_a = studioConfig == null ? void 0 : studioConfig.subtitleGenerationService) == null ? void 0 : _a.updateProjectWithSubtitles(subtitles);
+      if (updatedProjectJSON) {
+        editor.loadProject(updatedProjectJSON);
+      }
+    };
+    const getSubtitleStatus = async (reqId) => {
+      if (studioConfig == null ? void 0 : studioConfig.subtitleGenerationService) {
+        const service = studioConfig.subtitleGenerationService;
+        return await service.getRequestStatus(reqId);
+      }
+      return {
+        status: "failed",
+        error: "Subtitle generation service not found"
+      };
+    };
+    return {
+      onLoadProject,
+      onSaveProject,
+      onExportVideo,
+      onGenerateSubtitles,
+      addSubtitlesToTimeline,
+      getSubtitleStatus
+    };
+  };
+  const useGenerateSubtitles = (studioConfig) => {
+    const { editor, present } = timeline.useTimelineContext();
+    const onGenerateSubtitles = async (videoElement) => {
+      if (studioConfig == null ? void 0 : studioConfig.subtitleGenerationService) {
+        const service = studioConfig.subtitleGenerationService;
+        const reqId = await service.generateSubtitles(
+          videoElement,
+          present
+        );
+        return reqId;
+      }
+      alert("Generate subtitles not supported in demo mode");
+      return null;
+    };
+    const addSubtitlesToTimeline = (subtitles) => {
+      var _a;
+      const updatedProjectJSON = (_a = studioConfig == null ? void 0 : studioConfig.subtitleGenerationService) == null ? void 0 : _a.updateProjectWithSubtitles(
+        subtitles
+      );
+      if (updatedProjectJSON) {
+        editor.loadProject(updatedProjectJSON);
+      }
+    };
+    const getSubtitleStatus = async (reqId) => {
+      if (studioConfig == null ? void 0 : studioConfig.subtitleGenerationService) {
+        const service = studioConfig.subtitleGenerationService;
+        return await service.getRequestStatus(reqId);
+      }
+      return {
+        status: "failed",
+        error: "Subtitle generation service not found"
+      };
+    };
+    return {
+      onGenerateSubtitles,
+      addSubtitlesToTimeline,
+      getSubtitleStatus
+    };
   };
   function TwickStudio({ studioConfig }) {
     var _a;
@@ -3290,7 +3639,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       updateElement
     } = useStudioManager();
     const { videoResolution, setVideoResolution } = timeline.useTimelineContext();
-    const { onLoadProject, onSaveProject, onExportVideo } = useStudioOperation(studioConfig);
+    const {
+      onLoadProject,
+      onSaveProject,
+      onExportVideo
+    } = useStudioOperation(studioConfig);
+    const { onGenerateSubtitles, addSubtitlesToTimeline, getSubtitleStatus } = useGenerateSubtitles(studioConfig);
     const twickStudiConfig = react.useMemo(
       () => ({
         canvasMode: true,
@@ -3347,7 +3701,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           {
             selectedProp,
             selectedElement,
-            updateElement
+            updateElement,
+            addSubtitlesToTimeline,
+            onGenerateSubtitles,
+            getSubtitleStatus
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -3362,6 +3719,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     ] }) });
   }
   exports2.AudioPanel = AudioPanel;
+  exports2.CAPTION_PROPS = CAPTION_PROPS;
   exports2.CirclePanel = CirclePanel;
   exports2.IconPanel = IconPanel;
   exports2.ImagePanel = ImagePanel;
@@ -3373,6 +3731,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   exports2.TwickStudio = TwickStudio;
   exports2.VideoPanel = VideoPanel;
   exports2.default = TwickStudio;
+  exports2.useGenerateSubtitles = useGenerateSubtitles;
   exports2.useStudioManager = useStudioManager;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 });