@twick/studio 0.15.25 → 0.15.27

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

@@ -1,5 +1,5 @@
 import { TrackElement, VideoElement } from '@twick/timeline';
-import { ICaptionGenerationPollingResponse } from '../../types';
+import { CaptionPhraseLength, ICaptionGenerationPollingResponse } from '../../types';
 
 export declare function GenerateCaptionsPanel({ selectedElement, addCaptionsToTimeline, onGenerateCaptions, getCaptionstatus, pollingIntervalMs, }: {
     selectedElement: TrackElement;
@@ -7,8 +7,9 @@ export declare function GenerateCaptionsPanel({ selectedElement, addCaptionsToTi
         s: number;
         e: number;
         t: string;
+        w?: number[];
     }[]) => void;
-    onGenerateCaptions: (videoElement: VideoElement) => Promise<string | null>;
+    onGenerateCaptions: (videoElement: VideoElement, language?: string, phraseLength?: CaptionPhraseLength) => Promise<string | null>;
     getCaptionstatus: (reqId: string) => Promise<ICaptionGenerationPollingResponse>;
     pollingIntervalMs?: number;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/helpers/generate-captions.service.d.ts

@@ -1,5 +1,5 @@
 import { ProjectJSON, VideoElement } from '@twick/timeline';
-import { ICaptionGenerationPollingResponse, ICaptionGenerationService, CaptionEntry } from '../types';
+import { CaptionEntry, CaptionPhraseLength, ICaptionGenerationPollingResponse, ICaptionGenerationService } from '../types';
 
 declare class GenerateCaptionsService implements ICaptionGenerationService {
     /**
@@ -8,13 +8,13 @@ declare class GenerateCaptionsService implements ICaptionGenerationService {
      */
     videoElement: VideoElement | null;
     projectJSON: ProjectJSON | null;
-    generateSubtiltesApi: (videoUrl: string) => Promise<string>;
+    generateSubtiltesApi: (videoUrl: string, language?: string, phraseLength?: CaptionPhraseLength) => Promise<string>;
     requestStatusApi: (reqId: string) => Promise<ICaptionGenerationPollingResponse>;
     constructor({ generateSubtiltesApi, requestStatusApi, }: {
-        generateSubtiltesApi: (videoUrl: string) => Promise<string>;
+        generateSubtiltesApi: (videoUrl: string, language?: string, phraseLength?: CaptionPhraseLength) => Promise<string>;
         requestStatusApi: (reqId: string) => Promise<ICaptionGenerationPollingResponse>;
     });
-    generateCaptions(videoElement: VideoElement, projectJSON: ProjectJSON): Promise<string>;
+    generateCaptions(videoElement: VideoElement, projectJSON: ProjectJSON, language?: string, phraseLength?: CaptionPhraseLength): Promise<string>;
     getRequestStatus(reqId: string): Promise<ICaptionGenerationPollingResponse>;
     updateProjectWithCaptions(captions: CaptionEntry[]): ProjectJSON;
     generateCaptionVideo(videoUrl: string, videoSize?: {

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

@@ -1,8 +1,8 @@
 import { VideoElement } from '@twick/timeline';
-import { ICaptionGenerationPollingResponse, StudioConfig, CaptionEntry } from '../types';
+import { ICaptionGenerationPollingResponse, StudioConfig, CaptionEntry, CaptionPhraseLength } from '../types';
 
 declare const useGenerateCaptions: (studioConfig?: StudioConfig) => {
-    onGenerateCaptions: (videoElement: VideoElement) => Promise<string | null>;
+    onGenerateCaptions: (videoElement: VideoElement, language?: string, phraseLength?: CaptionPhraseLength) => 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 [phraseLength, setPhraseLength] = react.useState("medium");
   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,
+        phraseLength
+      );
       if (!reqId) {
         setPollingStatus("error");
         setIsGenerating(false);
@@ -7062,6 +7069,47 @@ 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-phrase-length", children: "Caption length" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "select",
+        {
+          id: "caption-phrase-length",
+          className: "select-dark",
+          value: phraseLength,
+          onChange: (e) => setPhraseLength(e.target.value),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "short", children: "Short" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "medium", children: "Medium" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "long", children: "Long" })
+          ]
+        }
+      )
+    ] }),
     !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 +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);
@@ -7630,7 +7669,6 @@ const useStudioOperation = (studioConfig) => {
     onNewProject,
     onExportCaptions,
     onExportChapters,
-    onGenerateCaptions,
     addCaptionsToTimeline,
     getCaptionstatus
   };
@@ -7739,12 +7777,14 @@ function TwickStudio({ studioConfig }) {
 const useGenerateCaptions = (studioConfig) => {
   var _a;
   const { editor, present } = timeline.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;
     }