@twick/studio 0.15.25 → 0.15.27

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 [phraseLength, setPhraseLength] = useState("medium");
   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,
+        phraseLength
+      );
       if (!reqId) {
         setPollingStatus("error");
         setIsGenerating(false);
@@ -7063,6 +7070,47 @@ 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-phrase-length", children: "Caption length" }),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          id: "caption-phrase-length",
+          className: "select-dark",
+          value: phraseLength,
+          onChange: (e) => setPhraseLength(e.target.value),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "short", children: "Short" }),
+            /* @__PURE__ */ jsx("option", { value: "medium", children: "Medium" }),
+            /* @__PURE__ */ jsx("option", { value: "long", children: "Long" })
+          ]
+        }
+      )
+    ] }),
     !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 +7646,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 +7670,6 @@ const useStudioOperation = (studioConfig) => {
     onNewProject,
     onExportCaptions,
     onExportChapters,
-    onGenerateCaptions,
     addCaptionsToTimeline,
     getCaptionstatus
   };
@@ -7740,12 +7778,14 @@ function TwickStudio({ studioConfig }) {
 const useGenerateCaptions = (studioConfig) => {
   var _a;
   const { editor, present } = useTimelineContext();
-  const onGenerateCaptions = async (videoElement) => {
+  const onGenerateCaptions = async (videoElement, language, phraseLength) => {
     if (studioConfig == null ? void 0 : studioConfig.captionGenerationService) {
       const service = studioConfig.captionGenerationService;
       const reqId = await service.generateCaptions(
         videoElement,
-        present
+        present,
+        language,
+        phraseLength
       );
       return reqId;
     }