@twick/studio 0.15.25 → 0.15.26

package/dist/index.mjs

@@ -3029,10 +3029,10 @@ const TEXT_STYLE_PRESETS = [
     applyBackground: false
   },
   {
-    id: "impact-caption",
-    label: "Impact Caption",
+    id: "bold-caption",
+    label: "Bold Caption",
     description: "Bold white with strong outline",
-    fontFamily: AVAILABLE_TEXT_FONTS.IMPACT,
+    fontFamily: AVAILABLE_TEXT_FONTS.ROBOTO,
     fontSize: 34,
     fontWeight: 700,
     textColor: "#FFFFFF",
@@ -3132,7 +3132,7 @@ const TEXT_STYLE_PRESETS = [
     id: "cta-pill",
     label: "CTA Pill",
     description: "Call-to-action pill",
-    fontFamily: AVAILABLE_TEXT_FONTS.IMPACT,
+    fontFamily: AVAILABLE_TEXT_FONTS.LUCKIEST_GUY,
     fontSize: 28,
     fontWeight: 700,
     textColor: "#FFFFFF",
@@ -6944,6 +6944,8 @@ function GenerateCaptionsPanel({
   const [isGenerating, setIsGenerating] = useState(false);
   const [pollingStatus, setPollingStatus] = useState("idle");
   const [errorMessage, setErrorMessage] = useState(null);
+  const [selectedLanguage, setSelectedLanguage] = useState("auto");
+  const [wordsPerPhrase, setWordsPerPhrase] = useState(4);
   const pollingIntervalRef = useRef(null);
   const currentReqIdRef = useRef(null);
   useEffect(() => {
@@ -7004,7 +7006,12 @@ function GenerateCaptionsPanel({
     setPollingStatus("polling");
     const videoElement = selectedElement;
     try {
-      const reqId = await onGenerateCaptions(videoElement);
+      const language = selectedLanguage === "auto" ? void 0 : selectedLanguage;
+      const reqId = await onGenerateCaptions(
+        videoElement,
+        language,
+        wordsPerPhrase
+      );
       if (!reqId) {
         setPollingStatus("error");
         setIsGenerating(false);
@@ -7063,6 +7070,46 @@ function GenerateCaptionsPanel({
       /* @__PURE__ */ jsx(Volume2, { className: "empty-state-icon" }),
       /* @__PURE__ */ jsx("p", { className: "empty-state-text", children: "Audio detected! You can now generate captions" })
     ] }) }) }),
+    !isLoading && containsAudio === true && /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", htmlFor: "caption-language", children: "Audio Language" }),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          id: "caption-language",
+          className: "select-dark",
+          value: selectedLanguage,
+          onChange: (e) => setSelectedLanguage(e.target.value),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "auto", children: "Auto (detect)" }),
+            /* @__PURE__ */ jsx("option", { value: "english", children: "English" }),
+            /* @__PURE__ */ jsx("option", { value: "italian", children: "Italian" }),
+            /* @__PURE__ */ jsx("option", { value: "spanish", children: "Spanish" }),
+            /* @__PURE__ */ jsx("option", { value: "portuguese", children: "Portuguese" }),
+            /* @__PURE__ */ jsx("option", { value: "french", children: "French" }),
+            /* @__PURE__ */ jsx("option", { value: "german", children: "German" }),
+            /* @__PURE__ */ jsx("option", { value: "turkish", children: "Turkish" }),
+            /* @__PURE__ */ jsx("option", { value: "indonesian", children: "Indonesian" }),
+            /* @__PURE__ */ jsx("option", { value: "hindi", children: "Hindi" })
+          ]
+        }
+      )
+    ] }),
+    !isLoading && containsAudio === true && /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", htmlFor: "caption-words-per-phrase", children: "Words per phrase" }),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          id: "caption-words-per-phrase",
+          className: "select-dark",
+          value: String(wordsPerPhrase),
+          onChange: (e) => setWordsPerPhrase(Number(e.target.value) || 4),
+          children: Array.from({ length: 10 }).map((_, index) => {
+            const value = index + 1;
+            return /* @__PURE__ */ jsx("option", { value, children: value }, value);
+          })
+        }
+      )
+    ] }),
     !isLoading && isGenerating && pollingStatus === "polling" && /* @__PURE__ */ jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxs("div", { className: "empty-state-content", children: [
       /* @__PURE__ */ jsx(LoaderCircle, { className: "empty-state-icon animate-spin" }),
       /* @__PURE__ */ jsx("p", { className: "empty-state-text", children: "Generating captions... Please wait" })
@@ -7598,15 +7645,6 @@ const useStudioOperation = (studioConfig) => {
     const fileName = `${(projectName || "chapters").replace(/\.json$/i, "")}.${format === "youtube" ? "txt" : "json"}`;
     await saveAsFile(content, "text/plain", fileName);
   };
-  const onGenerateCaptions = async (videoElement) => {
-    if (studioConfig == null ? void 0 : studioConfig.captionGenerationService) {
-      const service = studioConfig.captionGenerationService;
-      const reqId = await service.generateCaptions(videoElement, present);
-      return reqId;
-    }
-    alert("Generate captions not supported in demo mode");
-    return null;
-  };
   const addCaptionsToTimeline = (captions) => {
     var _a;
     const updatedProjectJSON = (_a = studioConfig == null ? void 0 : studioConfig.captionGenerationService) == null ? void 0 : _a.updateProjectWithCaptions(captions);
@@ -7631,7 +7669,6 @@ const useStudioOperation = (studioConfig) => {
     onNewProject,
     onExportCaptions,
     onExportChapters,
-    onGenerateCaptions,
     addCaptionsToTimeline,
     getCaptionstatus
   };
@@ -7740,12 +7777,14 @@ function TwickStudio({ studioConfig }) {
 const useGenerateCaptions = (studioConfig) => {
   var _a;
   const { editor, present } = useTimelineContext();
-  const onGenerateCaptions = async (videoElement) => {
+  const onGenerateCaptions = async (videoElement, language, wordsPerPhrase) => {
     if (studioConfig == null ? void 0 : studioConfig.captionGenerationService) {
       const service = studioConfig.captionGenerationService;
       const reqId = await service.generateCaptions(
         videoElement,
-        present
+        present,
+        language,
+        wordsPerPhrase
       );
       return reqId;
     }