@twick/studio 0.14.9 → 0.14.11

package/dist/components/panel/audio-panel.d.ts

@@ -1,3 +1,3 @@
 import { AudioPanelProps } from '../../types/media-panel';
 
-export declare const AudioPanel: ({ items, onItemSelect, onFileUpload, acceptFileTypes, onUrlAdd, }: AudioPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AudioPanel: ({ items, onItemSelect, onUrlAdd, }: AudioPanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/panel/image-panel.d.ts

@@ -1,3 +1,3 @@
 import { ImagePanelProps } from '../../types/media-panel';
 
-export declare function ImagePanel({ items, onItemSelect, onFileUpload, acceptFileTypes, onUrlAdd, }: ImagePanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImagePanel({ items, onItemSelect, onUrlAdd, }: ImagePanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/panel/video-panel.d.ts

@@ -1,3 +1,3 @@
 import { VideoPanelProps } from '../../types/media-panel';
 
-export declare function VideoPanel({ items, onItemSelect, onFileUpload, acceptFileTypes, onUrlAdd, }: VideoPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function VideoPanel({ items, onItemSelect, onUrlAdd, }: VideoPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/media-manager.d.ts

@@ -1,3 +1,4 @@
 import { BrowserMediaManager } from '@twick/video-editor';
 
 export declare const getMediaManager: () => BrowserMediaManager;
+export declare const initializeDefaultVideos: () => Promise<void>;

package/dist/index.js

@@ -590,65 +590,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       updateElement
     };
   };
-  const FileInput = ({
-    acceptFileTypes,
-    onFileLoad,
-    buttonText,
-    id,
-    className,
-    icon
-  }) => {
-    const onFileChange = (e) => {
-      var _a;
-      const file = (_a = e.target.files) == null ? void 0 : _a[0];
-      if (file) {
-        const reader = new FileReader();
-        reader.onload = (event) => {
-          var _a2;
-          try {
-            onFileLoad({
-              content: file.type === "application/json" ? (_a2 = event.target) == null ? void 0 : _a2.result : void 0,
-              type: file.type,
-              name: file.name,
-              file,
-              blobUrl: URL.createObjectURL(file)
-            });
-          } catch (error) {
-            console.error("Error parsing file:", error);
-          }
-        };
-        console.log("file", file);
-        if (file.type === "application/json") {
-          reader.readAsText(file);
-        } else {
-          reader.readAsDataURL(file);
-        }
-      }
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "file-input-container", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "file",
-          accept: acceptFileTypes.join(","),
-          className: "file-input-hidden",
-          id,
-          onChange: onFileChange
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "label",
-        {
-          htmlFor: id,
-          className: className || "btn-primary file-input-label",
-          children: [
-            icon || /* @__PURE__ */ jsxRuntime.jsx(Upload, { className: "icon-sm" }),
-            buttonText ?? "Upload"
-          ]
-        }
-      )
-    ] });
-  };
   const _MediaManagerSingleton = class _MediaManagerSingleton {
     constructor() {
     }
@@ -658,10 +599,173 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       return _MediaManagerSingleton.instance;
     }
+    static async initializeDefaults() {
+      if (_MediaManagerSingleton.isInitialized) {
+        return;
+      }
+      if (_MediaManagerSingleton.initializationPromise) {
+        await _MediaManagerSingleton.initializationPromise;
+        return;
+      }
+      let resolvePromise;
+      let rejectPromise;
+      _MediaManagerSingleton.initializationPromise = new Promise((resolve, reject) => {
+        resolvePromise = resolve;
+        rejectPromise = reject;
+      });
+      (async () => {
+        try {
+          await _MediaManagerSingleton.doInitializeDefaults();
+          _MediaManagerSingleton.isInitialized = true;
+          resolvePromise();
+        } catch (error) {
+          _MediaManagerSingleton.initializationPromise = null;
+          console.error("Error initializing default media:", error);
+          rejectPromise(error);
+        }
+      })();
+      return _MediaManagerSingleton.initializationPromise;
+    }
+    static async doInitializeDefaults() {
+      const manager = _MediaManagerSingleton.getInstance();
+      const defaultVideos = [
+        {
+          name: "Mountain Road",
+          url: "https://videos.pexels.com/video-files/31708803/13510402_1080_1920_30fps.mp4",
+          type: "video",
+          metadata: {
+            name: "Mountain Road",
+            source: "pexels"
+          }
+        },
+        {
+          name: "Vase",
+          url: "https://videos.pexels.com/video-files/4622990/4622990-uhd_1440_2560_30fps.mp4",
+          type: "video",
+          metadata: {
+            name: "Vase",
+            source: "pexels"
+          }
+        }
+      ];
+      const defaultImages = [
+        {
+          name: "Mountain Road",
+          url: "https://images.pexels.com/photos/1955134/pexels-photo-1955134.jpeg",
+          type: "image",
+          metadata: {
+            name: "Mountain Road",
+            source: "pexels"
+          }
+        },
+        {
+          name: "Waterfall",
+          url: "https://images.pexels.com/photos/358457/pexels-photo-358457.jpeg",
+          type: "image",
+          metadata: {
+            name: "Waterfall",
+            source: "pexels"
+          }
+        }
+      ];
+      const defaultAudios = [
+        {
+          name: "Audio 1",
+          url: "https://cdn.pixabay.com/audio/2022/03/14/audio_782eeb590e.mp3",
+          type: "audio",
+          metadata: {
+            name: "Audio 1",
+            source: "pixabay"
+          }
+        },
+        {
+          name: "Audio 2",
+          url: "https://cdn.pixabay.com/audio/2025/01/24/audio_24048c78b6.mp3",
+          type: "audio",
+          metadata: {
+            name: "Audio 2",
+            source: "pixabay"
+          }
+        }
+      ];
+      try {
+        const existingVideos = await manager.search({
+          type: "video",
+          query: ""
+        });
+        const existingVideoUrls = new Set(existingVideos.map((v) => v.url));
+        const videosToAdd = defaultVideos.filter(
+          (video) => !existingVideoUrls.has(video.url)
+        );
+        if (videosToAdd.length > 0) {
+          const finalCheck = await manager.search({
+            type: "video",
+            query: ""
+          });
+          const finalVideoUrls = new Set(finalCheck.map((v) => v.url));
+          const finalVideosToAdd = videosToAdd.filter(
+            (video) => !finalVideoUrls.has(video.url)
+          );
+          if (finalVideosToAdd.length > 0) {
+            await manager.addItems(finalVideosToAdd);
+            console.log(`Added ${finalVideosToAdd.length} default video(s) to media library`);
+          }
+        }
+        const existingImages = await manager.search({
+          type: "image",
+          query: ""
+        });
+        const existingImageUrls = new Set(existingImages.map((img) => img.url));
+        const imagesToAdd = defaultImages.filter(
+          (image) => !existingImageUrls.has(image.url)
+        );
+        if (imagesToAdd.length > 0) {
+          const finalCheck = await manager.search({
+            type: "image",
+            query: ""
+          });
+          const finalImageUrls = new Set(finalCheck.map((img) => img.url));
+          const finalImagesToAdd = imagesToAdd.filter(
+            (image) => !finalImageUrls.has(image.url)
+          );
+          if (finalImagesToAdd.length > 0) {
+            await manager.addItems(finalImagesToAdd);
+            console.log(`Added ${finalImagesToAdd.length} default image(s) to media library`);
+          }
+        }
+        const existingAudios = await manager.search({
+          type: "audio",
+          query: ""
+        });
+        const existingAudioUrls = new Set(existingAudios.map((a) => a.url));
+        const audiosToAdd = defaultAudios.filter(
+          (audio) => !existingAudioUrls.has(audio.url)
+        );
+        if (audiosToAdd.length > 0) {
+          const finalCheck = await manager.search({
+            type: "audio",
+            query: ""
+          });
+          const finalAudioUrls = new Set(finalCheck.map((a) => a.url));
+          const finalAudiosToAdd = audiosToAdd.filter(
+            (audio) => !finalAudioUrls.has(audio.url)
+          );
+          if (finalAudiosToAdd.length > 0) {
+            await manager.addItems(finalAudiosToAdd);
+            console.log(`Added ${finalAudiosToAdd.length} default audio file(s) to media library`);
+          }
+        }
+      } catch (error) {
+        throw error;
+      }
+    }
   };
   __publicField(_MediaManagerSingleton, "instance", null);
+  __publicField(_MediaManagerSingleton, "initializationPromise", null);
+  __publicField(_MediaManagerSingleton, "isInitialized", false);
   let MediaManagerSingleton = _MediaManagerSingleton;
   const getMediaManager = () => MediaManagerSingleton.getInstance();
+  const initializeDefaultVideos = () => MediaManagerSingleton.initializeDefaults();
   const EXTENSIONS = {
     video: ["mp4", "webm", "ogg", "mov", "mkv", "m3u8"],
     audio: ["mp3", "wav", "ogg", "m4a", "aac", "flac"],
@@ -782,9 +886,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     };
     react.useEffect(() => {
-      loadItems("video", "");
-      loadItems("audio", "");
-      loadItems("image", "");
+      const initialize = async () => {
+        await initializeDefaultVideos();
+        loadItems("video", "");
+        loadItems("audio", "");
+        loadItems("image", "");
+      };
+      initialize();
     }, []);
     const setSearchQuery = (type, query) => {
       const [state, setState] = getStateAndSetter(type);
@@ -946,25 +1054,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const AudioPanel = ({
     items,
     onItemSelect,
-    onFileUpload,
-    acceptFileTypes,
     onUrlAdd
   }) => {
     const { playingAudio, togglePlayPause } = useAudioPreview();
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-title", children: "Audio Library" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(UrlInput, { type: "audio", onSubmit: onUrlAdd }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(
-        FileInput,
-        {
-          id: "audio-upload",
-          acceptFileTypes,
-          onFileLoad: onFileUpload,
-          buttonText: "Import media",
-          className: "btn-primary w-full",
-          icon: /* @__PURE__ */ jsxRuntime.jsx(Upload, { className: "icon-sm" })
-        }
-      ) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "media-content", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "media-list", children: (items || []).map((item) => {
           var _a, _b;
@@ -1065,24 +1160,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   function ImagePanel({
     items,
     onItemSelect,
-    onFileUpload,
-    acceptFileTypes,
     onUrlAdd
   }) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-title", children: "Image Library" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(UrlInput, { type: "image", onSubmit: onUrlAdd }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(
-        FileInput,
-        {
-          id: "image-upload",
-          acceptFileTypes,
-          onFileLoad: onFileUpload,
-          buttonText: "Import media",
-          className: "btn-primary w-full",
-          icon: /* @__PURE__ */ jsxRuntime.jsx(Upload, { className: "icon-sm" })
-        }
-      ) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "media-content", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "media-grid", children: (items || []).map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
@@ -1206,25 +1288,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   function VideoPanel({
     items,
     onItemSelect,
-    onFileUpload,
-    acceptFileTypes,
     onUrlAdd
   }) {
     const { playingVideo, togglePlayPause } = useVideoPreview();
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-title", children: "Video Library" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(UrlInput, { type: "video", onSubmit: onUrlAdd }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsxRuntime.jsx(
-        FileInput,
-        {
-          id: "video-upload",
-          acceptFileTypes,
-          onFileLoad: onFileUpload,
-          buttonText: "Import media",
-          className: "btn-primary w-full",
-          icon: /* @__PURE__ */ jsxRuntime.jsx(Upload, { className: "icon-sm" })
-        }
-      ) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "media-content", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "media-grid", children: (items || []).map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
           "div",