@twick/studio 0.15.16 → 0.15.19

package/dist/index.mjs

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { forwardRef, createElement, useState, useEffect, useRef, createContext, useContext, useCallback, useMemo } from "react";
+import { forwardRef, createElement, useState, useEffect, useRef, useCallback, createContext, useContext, useMemo } from "react";
 import { useTimelineContext, TrackElement, Track, ImageElement, AudioElement, VideoElement, TextElement, RectElement, CircleElement, CAPTION_STYLE, CaptionElement, ElementTextEffect, ElementAnimation, PLAYER_STATE } from "@twick/timeline";
 import { AudioElement as AudioElement2, CAPTION_COLOR, CAPTION_FONT, CAPTION_STYLE as CAPTION_STYLE2, CAPTION_STYLE_OPTIONS, CaptionElement as CaptionElement2, CircleElement as CircleElement2, ElementAdder, ElementAnimation as ElementAnimation2, ElementCloner, ElementDeserializer, ElementFrameEffect, ElementRemover, ElementSerializer, ElementSplitter, ElementTextEffect as ElementTextEffect2, ElementUpdater, ElementValidator, INITIAL_TIMELINE_DATA, IconElement, ImageElement as ImageElement2, PROCESS_STATE, RectElement as RectElement2, TIMELINE_ACTION, TIMELINE_ELEMENT_TYPE, TextElement as TextElement2, TimelineEditor, TimelineProvider, Track as Track2, TrackElement as TrackElement2, VideoElement as VideoElement2, WORDS_PER_PHRASE, generateShortUuid, getCurrentElements, getTotalDuration, isElementId, isTrackId, useTimelineContext as useTimelineContext2 } from "@twick/timeline";
 import VideoEditor, { useEditorManager, BrowserMediaManager, TIMELINE_DROP_MEDIA_TYPE, AVAILABLE_TEXT_FONTS, TEXT_EFFECTS, ANIMATIONS } from "@twick/video-editor";
@@ -752,6 +752,182 @@ const useStudioManager = () => {
     updateElement
   };
 };
+const putFileWithProgress = (uploadUrl, file, onProgress) => {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.upload.addEventListener("progress", (e) => {
+      if (e.lengthComputable) {
+        onProgress(e.loaded / e.total * 100);
+      }
+    });
+    xhr.addEventListener("load", () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        onProgress(100);
+        resolve();
+      } else {
+        reject(new Error(`Upload failed: ${xhr.status} ${xhr.statusText}`));
+      }
+    });
+    xhr.addEventListener("error", () => reject(new Error("Upload failed")));
+    xhr.addEventListener("abort", () => reject(new Error("Upload aborted")));
+    xhr.open("PUT", uploadUrl);
+    xhr.setRequestHeader("Content-Type", file.type || "application/octet-stream");
+    xhr.send(file);
+  });
+};
+const useCloudMediaUpload = (config) => {
+  const { uploadApiUrl, provider } = config;
+  const [isUploading, setIsUploading] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [error, setError] = useState(null);
+  const resetError = useCallback(() => {
+    setError(null);
+  }, []);
+  const uploadFile = useCallback(
+    async (file) => {
+      setIsUploading(true);
+      setProgress(0);
+      setError(null);
+      try {
+        if (provider === "s3") {
+          const presignRes = await fetch(uploadApiUrl, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              filename: file.name,
+              contentType: file.type || "application/octet-stream"
+            })
+          });
+          if (!presignRes.ok) {
+            const errBody = await presignRes.json().catch(() => ({}));
+            throw new Error(
+              errBody.error ?? `Failed to get upload URL: ${presignRes.statusText}`
+            );
+          }
+          const presignData = await presignRes.json();
+          const uploadUrl = presignData.uploadUrl;
+          await putFileWithProgress(uploadUrl, file, setProgress);
+          const publicUrl = uploadUrl.split("?")[0];
+          return { url: publicUrl };
+        }
+        if (provider === "gcs") {
+          setProgress(10);
+          const formData = new FormData();
+          formData.append("file", file);
+          const uploadRes = await fetch(uploadApiUrl, {
+            method: "POST",
+            body: formData
+          });
+          if (!uploadRes.ok) {
+            const errBody = await uploadRes.json().catch(() => ({}));
+            throw new Error(
+              errBody.error ?? `Upload failed: ${uploadRes.statusText}`
+            );
+          }
+          setProgress(100);
+          const data = await uploadRes.json();
+          if (!data.url) {
+            throw new Error("Upload response missing url");
+          }
+          return { url: data.url };
+        }
+        throw new Error(`Unknown provider: ${provider}`);
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "Upload failed";
+        setError(message);
+        throw err;
+      } finally {
+        setIsUploading(false);
+        setProgress(0);
+      }
+    },
+    [uploadApiUrl, provider]
+  );
+  return {
+    uploadFile,
+    isUploading,
+    progress,
+    error,
+    resetError
+  };
+};
+const CloudMediaUpload = ({
+  onSuccess,
+  onError,
+  accept,
+  uploadApiUrl,
+  provider,
+  buttonText = "Upload to cloud",
+  className,
+  disabled = false,
+  id: providedId,
+  icon
+}) => {
+  const id = providedId ?? `cloud-media-upload-${Math.random().toString(36).slice(2, 9)}`;
+  const inputRef = useRef(null);
+  const {
+    uploadFile,
+    isUploading,
+    progress,
+    error,
+    resetError
+  } = useCloudMediaUpload({ uploadApiUrl, provider });
+  const handleFileChange = async (e) => {
+    var _a;
+    const file = (_a = e.target.files) == null ? void 0 : _a[0];
+    if (!file) return;
+    try {
+      const { url } = await uploadFile(file);
+      onSuccess(url, file);
+      if (inputRef.current) {
+        inputRef.current.value = "";
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Upload failed";
+      onError == null ? void 0 : onError(message);
+    }
+  };
+  const handleLabelClick = () => {
+    if (disabled || isUploading) return;
+    resetError();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "file-input-container cloud-media-upload-container", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept,
+        className: "file-input-hidden",
+        id,
+        onChange: handleFileChange,
+        disabled: disabled || isUploading,
+        "aria-label": buttonText
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: id,
+        className: className ?? "btn-primary file-input-label",
+        onClick: handleLabelClick,
+        style: { pointerEvents: disabled || isUploading ? "none" : void 0 },
+        children: [
+          icon ?? /* @__PURE__ */ jsx(Upload, { className: "icon-sm" }),
+          isUploading ? `${Math.round(progress)}%` : buttonText
+        ]
+      }
+    ),
+    isUploading && /* @__PURE__ */ jsx("div", { className: "cloud-media-upload-progress", role: "progressbar", "aria-valuenow": progress, "aria-valuemin": 0, "aria-valuemax": 100, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "cloud-media-upload-progress-fill",
+        style: { width: `${progress}%` }
+      }
+    ) }),
+    error && /* @__PURE__ */ jsx("div", { className: "cloud-media-upload-error", role: "alert", children: error })
+  ] });
+};
 const _MediaManagerSingleton = class _MediaManagerSingleton {
   constructor() {
   }
@@ -1309,19 +1485,42 @@ const AudioPanelContainer = (props) => {
     });
     addItem(newItem);
   };
-  return /* @__PURE__ */ jsx(
-    AudioPanel,
-    {
-      items,
-      searchQuery,
-      onSearchChange: setSearchQuery,
-      onItemSelect: handleSelection,
-      onFileUpload: handleFileUpload,
-      isLoading,
-      acceptFileTypes,
-      onUrlAdd
-    }
-  );
+  const onCloudUploadSuccess = async (url, file) => {
+    var _a;
+    const newItem = await mediaManager.addItem({
+      name: file.name,
+      url,
+      type: "audio",
+      metadata: { source: ((_a = props.uploadConfig) == null ? void 0 : _a.provider) ?? "s3" }
+    });
+    addItem(newItem);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    props.uploadConfig && /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx(
+      CloudMediaUpload,
+      {
+        uploadApiUrl: props.uploadConfig.uploadApiUrl,
+        provider: props.uploadConfig.provider,
+        accept: "audio/*",
+        onSuccess: onCloudUploadSuccess,
+        buttonText: "Upload audio",
+        className: "btn-ghost w-full"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      AudioPanel,
+      {
+        items,
+        searchQuery,
+        onSearchChange: setSearchQuery,
+        onItemSelect: handleSelection,
+        onFileUpload: handleFileUpload,
+        isLoading,
+        acceptFileTypes,
+        onUrlAdd
+      }
+    )
+  ] });
 };
 function ImagePanel({
   items,
@@ -1407,19 +1606,42 @@ function ImagePanelContainer(props) {
     });
     addItem(newItem);
   };
-  return /* @__PURE__ */ jsx(
-    ImagePanel,
-    {
-      items,
-      searchQuery,
-      onSearchChange: setSearchQuery,
-      onItemSelect: handleSelection,
-      onFileUpload: handleFileUpload,
-      isLoading,
-      acceptFileTypes,
-      onUrlAdd
-    }
-  );
+  const onCloudUploadSuccess = async (url, file) => {
+    var _a;
+    const newItem = await mediaManager.addItem({
+      name: file.name,
+      url,
+      type: "image",
+      metadata: { source: ((_a = props.uploadConfig) == null ? void 0 : _a.provider) ?? "s3" }
+    });
+    addItem(newItem);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    props.uploadConfig && /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx(
+      CloudMediaUpload,
+      {
+        uploadApiUrl: props.uploadConfig.uploadApiUrl,
+        provider: props.uploadConfig.provider,
+        accept: "image/*",
+        onSuccess: onCloudUploadSuccess,
+        buttonText: "Upload image",
+        className: "btn-ghost w-full"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      ImagePanel,
+      {
+        items,
+        searchQuery,
+        onSearchChange: setSearchQuery,
+        onItemSelect: handleSelection,
+        onFileUpload: handleFileUpload,
+        isLoading,
+        acceptFileTypes,
+        onUrlAdd
+      }
+    )
+  ] });
 }
 const useVideoPreview = () => {
   const [playingVideo, setPlayingVideo] = useState(null);
@@ -1573,17 +1795,40 @@ function VideoPanelContainer(props) {
     });
     addItem(newItem);
   };
-  return /* @__PURE__ */ jsx(
-    VideoPanel,
-    {
-      items,
-      onItemSelect: handleSelection,
-      onFileUpload: handleFileUpload,
-      isLoading,
-      acceptFileTypes,
-      onUrlAdd
-    }
-  );
+  const onCloudUploadSuccess = async (url, file) => {
+    var _a;
+    const newItem = await mediaManager.addItem({
+      name: file.name,
+      url,
+      type: "video",
+      metadata: { source: ((_a = props.uploadConfig) == null ? void 0 : _a.provider) ?? "s3" }
+    });
+    addItem(newItem);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    props.uploadConfig && /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx(
+      CloudMediaUpload,
+      {
+        uploadApiUrl: props.uploadConfig.uploadApiUrl,
+        provider: props.uploadConfig.provider,
+        accept: "video/*",
+        onSuccess: onCloudUploadSuccess,
+        buttonText: "Upload video",
+        className: "btn-ghost w-full"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      VideoPanel,
+      {
+        items,
+        onItemSelect: handleSelection,
+        onFileUpload: handleFileUpload,
+        isLoading,
+        acceptFileTypes,
+        onUrlAdd
+      }
+    )
+  ] });
 }
 function TextPanel({
   textContent,
@@ -2678,7 +2923,8 @@ const ElementPanelContainer = ({
   videoResolution,
   selectedElement,
   addElement,
-  updateElement
+  updateElement,
+  uploadConfig
 }) => {
   const addNewElement = async (element) => {
     await addElement(element);
@@ -2692,7 +2938,8 @@ const ElementPanelContainer = ({
             videoResolution,
             selectedElement,
             addElement: addNewElement,
-            updateElement
+            updateElement,
+            uploadConfig
           }
         );
       case "audio":
@@ -2702,7 +2949,8 @@ const ElementPanelContainer = ({
             videoResolution,
             selectedElement,
             addElement: addNewElement,
-            updateElement
+            updateElement,
+            uploadConfig
           }
         );
       case "video":
@@ -2712,7 +2960,8 @@ const ElementPanelContainer = ({
             videoResolution,
             selectedElement,
             addElement: addNewElement,
-            updateElement
+            updateElement,
+            uploadConfig
           }
         );
       case "text":
@@ -3680,7 +3929,7 @@ function PropertiesPanelContainer({
   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: [
@@ -3909,7 +4158,8 @@ function TwickStudio({ studioConfig }) {
           setSelectedTool,
           selectedElement,
           addElement,
-          updateElement
+          updateElement,
+          uploadConfig: twickStudiConfig.uploadConfig
         }
       ) }),
       /* @__PURE__ */ jsx("main", { className: "main-container", children: /* @__PURE__ */ jsx("div", { className: "canvas-wrapper", children: /* @__PURE__ */ jsx(
@@ -3994,6 +4244,7 @@ export {
   CaptionsPanel,
   CircleElement2 as CircleElement,
   CirclePanel,
+  CloudMediaUpload,
   ElementAdder,
   ElementAnimation2 as ElementAnimation,
   ElementCloner,
@@ -4044,6 +4295,7 @@ export {
   isElementId,
   isTrackId,
   setElementColors,
+  useCloudMediaUpload,
   useEditorManager2 as useEditorManager,
   useGenerateCaptions,
   useLivePlayerContext2 as useLivePlayerContext,