@twick/studio 0.15.25 → 0.15.26

package/dist/components/properties/generate-captions.d.ts

@@ -8,7 +8,7 @@ export declare function GenerateCaptionsPanel({ selectedElement, addCaptionsToTi
         e: number;
         t: string;
     }[]) => void;
-    onGenerateCaptions: (videoElement: VideoElement) => Promise<string | null>;
+    onGenerateCaptions: (videoElement: VideoElement, language?: string, wordsPerPhrase?: number) => Promise<string | null>;
     getCaptionstatus: (reqId: string) => Promise<ICaptionGenerationPollingResponse>;
     pollingIntervalMs?: number;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/use-generate-captions.d.ts

@@ -2,7 +2,7 @@ import { VideoElement } from '@twick/timeline';
 import { ICaptionGenerationPollingResponse, StudioConfig, CaptionEntry } from '../types';
 
 declare const useGenerateCaptions: (studioConfig?: StudioConfig) => {
-    onGenerateCaptions: (videoElement: VideoElement) => Promise<string | null>;
+    onGenerateCaptions: (videoElement: VideoElement, language?: string, wordsPerPhrase?: number) => Promise<string | null>;
     addCaptionsToTimeline: (captions: CaptionEntry[]) => void;
     getCaptionstatus: (reqId: string) => Promise<ICaptionGenerationPollingResponse>;
     pollingIntervalMs: number;

package/dist/hooks/use-studio-operation.d.ts

@@ -1,4 +1,3 @@
-import { VideoElement } from '@twick/timeline';
 import { ICaptionGenerationPollingResponse, StudioConfig, CaptionEntry } from '../types';
 
 declare const useStudioOperation: (studioConfig?: StudioConfig) => {
@@ -8,7 +7,6 @@ declare const useStudioOperation: (studioConfig?: StudioConfig) => {
     onNewProject: () => void;
     onExportCaptions: (format: "srt" | "vtt") => Promise<void>;
     onExportChapters: (format: "youtube" | "json") => Promise<void>;
-    onGenerateCaptions: (videoElement: VideoElement) => Promise<string | null>;
     addCaptionsToTimeline: (captions: CaptionEntry[]) => void;
     getCaptionstatus: (reqId: string) => Promise<ICaptionGenerationPollingResponse>;
 };

package/dist/index.js

@@ -3028,10 +3028,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: VideoEditor.AVAILABLE_TEXT_FONTS.IMPACT,
+    fontFamily: VideoEditor.AVAILABLE_TEXT_FONTS.ROBOTO,
     fontSize: 34,
     fontWeight: 700,
     textColor: "#FFFFFF",
@@ -3131,7 +3131,7 @@ const TEXT_STYLE_PRESETS = [
     id: "cta-pill",
     label: "CTA Pill",
     description: "Call-to-action pill",
-    fontFamily: VideoEditor.AVAILABLE_TEXT_FONTS.IMPACT,
+    fontFamily: VideoEditor.AVAILABLE_TEXT_FONTS.LUCKIEST_GUY,
     fontSize: 28,
     fontWeight: 700,
     textColor: "#FFFFFF",
@@ -6943,6 +6943,8 @@ function GenerateCaptionsPanel({
   const [isGenerating, setIsGenerating] = react.useState(false);
   const [pollingStatus, setPollingStatus] = react.useState("idle");
   const [errorMessage, setErrorMessage] = react.useState(null);
+  const [selectedLanguage, setSelectedLanguage] = react.useState("auto");
+  const [wordsPerPhrase, setWordsPerPhrase] = react.useState(4);
   const pollingIntervalRef = react.useRef(null);
   const currentReqIdRef = react.useRef(null);
   react.useEffect(() => {
@@ -7003,7 +7005,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);
@@ -7062,6 +7069,46 @@ function GenerateCaptionsPanel({
       /* @__PURE__ */ jsxRuntime.jsx(Volume2, { className: "empty-state-icon" }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: "Audio detected! You can now generate captions" })
     ] }) }) }),
+    !isLoading && containsAudio === true && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", htmlFor: "caption-language", children: "Audio Language" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "select",
+        {
+          id: "caption-language",
+          className: "select-dark",
+          value: selectedLanguage,
+          onChange: (e) => setSelectedLanguage(e.target.value),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "auto", children: "Auto (detect)" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "english", children: "English" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "italian", children: "Italian" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "spanish", children: "Spanish" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "portuguese", children: "Portuguese" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "french", children: "French" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "german", children: "German" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "turkish", children: "Turkish" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "indonesian", children: "Indonesian" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "hindi", children: "Hindi" })
+          ]
+        }
+      )
+    ] }),
+    !isLoading && containsAudio === true && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", htmlFor: "caption-words-per-phrase", children: "Words per phrase" }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value, children: value }, value);
+          })
+        }
+      )
+    ] }),
     !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 captions... Please wait" })
@@ -7597,15 +7644,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);
@@ -7630,7 +7668,6 @@ const useStudioOperation = (studioConfig) => {
     onNewProject,
     onExportCaptions,
     onExportChapters,
-    onGenerateCaptions,
     addCaptionsToTimeline,
     getCaptionstatus
   };
@@ -7739,12 +7776,14 @@ function TwickStudio({ studioConfig }) {
 const useGenerateCaptions = (studioConfig) => {
   var _a;
   const { editor, present } = timeline.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;
     }