@twick/studio 0.15.16 → 0.15.19

package/dist/components/container/element-panel-container.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { Size, TrackElement } from '@twick/timeline';
+import { UploadConfig } from '../../types';
 
 /**
  * Props interface for the ElementPanelContainer component.
@@ -12,6 +13,7 @@ interface ElementPanelContainerProps {
     setSelectedTool: (tool: string) => void;
     addElement: (element: TrackElement) => void;
     updateElement: (element: TrackElement) => void;
+    uploadConfig?: UploadConfig;
 }
 /**
  * ElementPanelContainer component that renders the appropriate element panel
@@ -34,5 +36,5 @@ interface ElementPanelContainerProps {
  * />
  * ```
  */
-declare const ElementPanelContainer: ({ selectedTool, videoResolution, selectedElement, addElement, updateElement, }: ElementPanelContainerProps) => React.ReactElement;
+declare const ElementPanelContainer: ({ selectedTool, videoResolution, selectedElement, addElement, updateElement, uploadConfig, }: ElementPanelContainerProps) => React.ReactElement;
 export default ElementPanelContainer;

package/dist/components/shared/cloud-media-upload.d.ts

@@ -0,0 +1,15 @@
+import { CloudUploadProvider } from '../../hooks/use-cloud-media-upload';
+
+export interface CloudMediaUploadProps {
+    onSuccess: (url: string, file: File) => void;
+    onError?: (error: string) => void;
+    accept?: string;
+    uploadApiUrl: string;
+    provider: CloudUploadProvider;
+    buttonText?: string;
+    className?: string;
+    disabled?: boolean;
+    id?: string;
+    icon?: React.ReactNode;
+}
+export declare const CloudMediaUpload: ({ onSuccess, onError, accept, uploadApiUrl, provider, buttonText, className, disabled, id: providedId, icon, }: CloudMediaUploadProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/index.d.ts

@@ -1,3 +1,4 @@
+export * from './cloud-media-upload';
 export * from './color-input';
 export * from './file-input';
 export * from './media-manager';

package/dist/hooks/use-cloud-media-upload.d.ts

@@ -0,0 +1,27 @@
+export type CloudUploadProvider = "s3" | "gcs";
+export interface UseCloudMediaUploadConfig {
+    uploadApiUrl: string;
+    provider: CloudUploadProvider;
+}
+/** Response from S3 presign API (e.g. file-uploader Lambda). */
+export interface S3PresignResponse {
+    uploadUrl: string;
+    key?: string;
+    bucket?: string;
+    contentType?: string;
+    expiresIn?: number;
+}
+/** Response from GCS upload API (server-side upload). */
+export interface GCSUploadResponse {
+    url: string;
+}
+export interface UseCloudMediaUploadReturn {
+    uploadFile: (file: File) => Promise<{
+        url: string;
+    }>;
+    isUploading: boolean;
+    progress: number;
+    error: string | null;
+    resetError: () => void;
+}
+export declare const useCloudMediaUpload: (config: UseCloudMediaUploadConfig) => UseCloudMediaUploadReturn;

package/dist/index.d.ts

@@ -10,6 +10,8 @@ import { TextPanel } from './components/panel/text-panel';
 import { CirclePanel } from './components/panel/circle-panel';
 import { RectPanel } from './components/panel/rect-panel';
 import { CaptionsPanel } from './components/panel/captions-panel';
+import { CloudMediaUpload } from './components/shared/cloud-media-upload';
+import { useCloudMediaUpload } from './hooks/use-cloud-media-upload';
 
 export { 
 /** Main studio editing environment */
@@ -37,10 +39,17 @@ export {
 /** Hook for managing studio state and selections */
 useStudioManager, 
 /** Hook for polling-based caption generation */
-useGenerateCaptions, };
+useGenerateCaptions, 
+/** Hook for S3/GCS cloud media upload */
+useCloudMediaUpload, };
+export { 
+/** Cloud media upload (S3 or GCS) for use in media panels */
+CloudMediaUpload, };
 export * from './helpers/generate-captions.service';
 export * from './helpers/constant';
 export * from './types';
+export type { CloudUploadProvider, UseCloudMediaUploadConfig, UseCloudMediaUploadReturn, S3PresignResponse, GCSUploadResponse, } from './hooks/use-cloud-media-upload';
+export type { CloudMediaUploadProps } from './components/shared/cloud-media-upload';
 /**
  * ============================================================================
  * RE-EXPORTS FROM DEPENDENCY PACKAGES

package/dist/index.js

@@ -751,6 +751,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] = react.useState(false);
+  const [progress, setProgress] = react.useState(0);
+  const [error, setError] = react.useState(null);
+  const resetError = react.useCallback(() => {
+    setError(null);
+  }, []);
+  const uploadFile = react.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 = react.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__ */ jsxRuntime.jsxs("div", { className: "file-input-container cloud-media-upload-container", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept,
+        className: "file-input-hidden",
+        id,
+        onChange: handleFileChange,
+        disabled: disabled || isUploading,
+        "aria-label": buttonText
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        htmlFor: id,
+        className: className ?? "btn-primary file-input-label",
+        onClick: handleLabelClick,
+        style: { pointerEvents: disabled || isUploading ? "none" : void 0 },
+        children: [
+          icon ?? /* @__PURE__ */ jsxRuntime.jsx(Upload, { className: "icon-sm" }),
+          isUploading ? `${Math.round(progress)}%` : buttonText
+        ]
+      }
+    ),
+    isUploading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cloud-media-upload-progress", role: "progressbar", "aria-valuenow": progress, "aria-valuemin": 0, "aria-valuemax": 100, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "cloud-media-upload-progress-fill",
+        style: { width: `${progress}%` }
+      }
+    ) }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cloud-media-upload-error", role: "alert", children: error })
+  ] });
+};
 const _MediaManagerSingleton = class _MediaManagerSingleton {
   constructor() {
   }
@@ -1308,19 +1484,42 @@ const AudioPanelContainer = (props) => {
     });
     addItem(newItem);
   };
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    props.uploadConfig && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(
+      CloudMediaUpload,
+      {
+        uploadApiUrl: props.uploadConfig.uploadApiUrl,
+        provider: props.uploadConfig.provider,
+        accept: "audio/*",
+        onSuccess: onCloudUploadSuccess,
+        buttonText: "Upload audio",
+        className: "btn-ghost w-full"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AudioPanel,
+      {
+        items,
+        searchQuery,
+        onSearchChange: setSearchQuery,
+        onItemSelect: handleSelection,
+        onFileUpload: handleFileUpload,
+        isLoading,
+        acceptFileTypes,
+        onUrlAdd
+      }
+    )
+  ] });
 };
 function ImagePanel({
   items,
@@ -1406,19 +1605,42 @@ function ImagePanelContainer(props) {
     });
     addItem(newItem);
   };
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    props.uploadConfig && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(
+      CloudMediaUpload,
+      {
+        uploadApiUrl: props.uploadConfig.uploadApiUrl,
+        provider: props.uploadConfig.provider,
+        accept: "image/*",
+        onSuccess: onCloudUploadSuccess,
+        buttonText: "Upload image",
+        className: "btn-ghost w-full"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ImagePanel,
+      {
+        items,
+        searchQuery,
+        onSearchChange: setSearchQuery,
+        onItemSelect: handleSelection,
+        onFileUpload: handleFileUpload,
+        isLoading,
+        acceptFileTypes,
+        onUrlAdd
+      }
+    )
+  ] });
 }
 const useVideoPreview = () => {
   const [playingVideo, setPlayingVideo] = react.useState(null);
@@ -1572,17 +1794,40 @@ function VideoPanelContainer(props) {
     });
     addItem(newItem);
   };
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    props.uploadConfig && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(
+      CloudMediaUpload,
+      {
+        uploadApiUrl: props.uploadConfig.uploadApiUrl,
+        provider: props.uploadConfig.provider,
+        accept: "video/*",
+        onSuccess: onCloudUploadSuccess,
+        buttonText: "Upload video",
+        className: "btn-ghost w-full"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      VideoPanel,
+      {
+        items,
+        onItemSelect: handleSelection,
+        onFileUpload: handleFileUpload,
+        isLoading,
+        acceptFileTypes,
+        onUrlAdd
+      }
+    )
+  ] });
 }
 function TextPanel({
   textContent,
@@ -2677,7 +2922,8 @@ const ElementPanelContainer = ({
   videoResolution,
   selectedElement,
   addElement,
-  updateElement
+  updateElement,
+  uploadConfig
 }) => {
   const addNewElement = async (element) => {
     await addElement(element);
@@ -2691,7 +2937,8 @@ const ElementPanelContainer = ({
             videoResolution,
             selectedElement,
             addElement: addNewElement,
-            updateElement
+            updateElement,
+            uploadConfig
           }
         );
       case "audio":
@@ -2701,7 +2948,8 @@ const ElementPanelContainer = ({
             videoResolution,
             selectedElement,
             addElement: addNewElement,
-            updateElement
+            updateElement,
+            uploadConfig
           }
         );
       case "video":
@@ -2711,7 +2959,8 @@ const ElementPanelContainer = ({
             videoResolution,
             selectedElement,
             addElement: addNewElement,
-            updateElement
+            updateElement,
+            uploadConfig
           }
         );
       case "text":
@@ -3679,7 +3928,7 @@ function PropertiesPanelContainer({
   return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "properties-panel", "aria-label": "Element properties inspector", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "properties-header", children: [
       !selectedElement && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "properties-title", children: "Composition" }),
-      selectedElement && selectedElement.getType() === "caption" && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "properties-title", children: "Subtitles are edited from the captions panel" }),
+      selectedElement && selectedElement.getType() === "caption" && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "properties-title", children: "Edit from the captions panel" }),
       selectedElement && selectedElement.getType() !== "caption" && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "properties-title", children: title })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "prop-content", children: [
@@ -3908,7 +4157,8 @@ function TwickStudio({ studioConfig }) {
           setSelectedTool,
           selectedElement,
           addElement,
-          updateElement
+          updateElement,
+          uploadConfig: twickStudiConfig.uploadConfig
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx("main", { className: "main-container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "canvas-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -4207,6 +4457,7 @@ exports.AudioPanel = AudioPanel;
 exports.CAPTION_PROPS = CAPTION_PROPS;
 exports.CaptionsPanel = CaptionsPanel;
 exports.CirclePanel = CirclePanel;
+exports.CloudMediaUpload = CloudMediaUpload;
 exports.ImagePanel = ImagePanel;
 exports.RectPanel = RectPanel;
 exports.StudioHeader = StudioHeader;
@@ -4215,6 +4466,7 @@ exports.Toolbar = Toolbar;
 exports.TwickStudio = TwickStudio;
 exports.VideoPanel = VideoPanel;
 exports.default = TwickStudio;
+exports.useCloudMediaUpload = useCloudMediaUpload;
 exports.useGenerateCaptions = useGenerateCaptions;
 exports.useStudioManager = useStudioManager;
 //# sourceMappingURL=index.js.map