@twick/studio 0.15.15 → 0.15.18

package/dist/index.mjs

@@ -3401,7 +3401,8 @@ function GenerateCaptionsPanel({
   selectedElement,
   addCaptionsToTimeline,
   onGenerateCaptions,
-  getCaptionstatus
+  getCaptionstatus,
+  pollingIntervalMs = 5e3
 }) {
   const [containsAudio, setContainsAudio] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
@@ -3458,12 +3459,14 @@ function GenerateCaptionsPanel({
       }
     };
     await poll();
-    pollingIntervalRef.current = setInterval(poll, 2e3);
+    pollingIntervalRef.current = setInterval(poll, pollingIntervalMs);
   };
   const handleGenerateCaptions = async () => {
     if (!(selectedElement instanceof VideoElement)) {
       return;
     }
+    setIsGenerating(true);
+    setPollingStatus("polling");
     const videoElement = selectedElement;
     try {
       const reqId = await onGenerateCaptions(videoElement);
@@ -3670,13 +3673,14 @@ function PropertiesPanelContainer({
   addCaptionsToTimeline,
   onGenerateCaptions,
   getCaptionstatus,
+  pollingIntervalMs,
   videoResolution
 }) {
   const title = selectedElement instanceof TextElement ? selectedElement.getText() : (selectedElement == null ? void 0 : selectedElement.getName()) || (selectedElement == null ? void 0 : selectedElement.getType()) || "Element";
   return /* @__PURE__ */ jsxs("aside", { className: "properties-panel", "aria-label": "Element properties inspector", children: [
     /* @__PURE__ */ jsxs("div", { className: "properties-header", children: [
       !selectedElement && /* @__PURE__ */ jsx("h3", { className: "properties-title", children: "Composition" }),
-      selectedElement && selectedElement.getType() === "caption" && /* @__PURE__ */ jsx("h3", { className: "properties-title", children: "Subtitles are edited from the captions panel" }),
+      selectedElement && selectedElement.getType() === "caption" && /* @__PURE__ */ jsx("h3", { className: "properties-title", children: "Edit from the captions panel" }),
       selectedElement && selectedElement.getType() !== "caption" && /* @__PURE__ */ jsx("h3", { className: "properties-title", children: title })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "prop-content", children: [
@@ -3737,7 +3741,8 @@ function PropertiesPanelContainer({
               selectedElement,
               addCaptionsToTimeline,
               onGenerateCaptions,
-              getCaptionstatus
+              getCaptionstatus,
+              pollingIntervalMs
             }
           )
         ] });
@@ -3859,7 +3864,12 @@ function TwickStudio({ studioConfig }) {
     onSaveProject,
     onExportVideo
   } = useStudioOperation(studioConfig);
-  const { onGenerateCaptions, addCaptionsToTimeline, getCaptionstatus } = useGenerateCaptions(studioConfig);
+  const {
+    onGenerateCaptions,
+    addCaptionsToTimeline,
+    getCaptionstatus,
+    pollingIntervalMs
+  } = useGenerateCaptions(studioConfig);
   const twickStudiConfig = useMemo(
     () => ({
       canvasMode: true,
@@ -3907,7 +3917,7 @@ function TwickStudio({ studioConfig }) {
         {
           className: "canvas-container",
           style: {
-            maxWidth: ((_a = twickStudiConfig.playerProps) == null ? void 0 : _a.maxWidth) ?? 960
+            maxWidth: ((_a = twickStudiConfig.playerProps) == null ? void 0 : _a.maxWidth) ?? "100%"
           },
           children: /* @__PURE__ */ jsx(VideoEditor, { editorConfig: twickStudiConfig })
         }
@@ -3920,6 +3930,7 @@ function TwickStudio({ studioConfig }) {
           addCaptionsToTimeline,
           onGenerateCaptions,
           getCaptionstatus,
+          pollingIntervalMs,
           videoResolution
         }
       ) })
@@ -3927,6 +3938,7 @@ function TwickStudio({ studioConfig }) {
   ] }) });
 }
 const useGenerateCaptions = (studioConfig) => {
+  var _a;
   const { editor, present } = useTimelineContext();
   const onGenerateCaptions = async (videoElement) => {
     if (studioConfig == null ? void 0 : studioConfig.captionGenerationService) {
@@ -3941,8 +3953,8 @@ const useGenerateCaptions = (studioConfig) => {
     return null;
   };
   const addCaptionsToTimeline = (captions) => {
-    var _a;
-    const updatedProjectJSON = (_a = studioConfig == null ? void 0 : studioConfig.captionGenerationService) == null ? void 0 : _a.updateProjectWithCaptions(
+    var _a2;
+    const updatedProjectJSON = (_a2 = studioConfig == null ? void 0 : studioConfig.captionGenerationService) == null ? void 0 : _a2.updateProjectWithCaptions(
       captions
     );
     if (updatedProjectJSON) {
@@ -3959,10 +3971,12 @@ const useGenerateCaptions = (studioConfig) => {
       error: "Caption generation service not found"
     };
   };
+  const pollingIntervalMs = ((_a = studioConfig == null ? void 0 : studioConfig.captionGenerationService) == null ? void 0 : _a.pollingIntervalMs) ?? 5e3;
   return {
     onGenerateCaptions,
     addCaptionsToTimeline,
-    getCaptionstatus
+    getCaptionstatus,
+    pollingIntervalMs
   };
 };
 export {