Closes scene allow things to be added from the gallery modal.

frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx

@@ -36,7 +36,7 @@ interface Props {
 const appTabs: TabItem[] = [
   { id: "2D", label: "2D" },
   { id: "3D", label: "3D" },
-  { id: "VIDEO", label: "Video" },
+  // { id: "VIDEO", label: "Video" },
 ];
 
 export const TopBar = ({
@@ -71,6 +71,20 @@ export const TopBar = ({
     }
   }, [currentAppTabId, engine3D, is3DInit]);
 
+  const handleAddToScene = async (url: string) => {
+    console.log("add to scene", url);
+    if (currentAppTabId === "2D") {
+      console.log("Adding to 2D scene");
+    } else if (currentAppTabId === "3D") {
+      console.log("Adding to 3D scene");
+      engine3D?.activeScene.loadObjectFromUrl(url);
+    } else if (currentAppTabId === "VIDEO") {
+      console.log("Adding to Video scene");
+    } else {
+      console.warn(`Unknown tab type: ${currentAppTabId}`);
+    }
+  };
+
   return (
     <>
       <header className="fixed left-0 top-0 z-[60] w-full border-b border-white/5 bg-ui-background">
@@ -149,39 +163,7 @@ export const TopBar = ({
         activeTab={activeLibraryTab}
         onTabChange={setActiveLibraryTab}
         onDownloadClicked={downloadFileFromUrl}
-        onAddToSceneClicked={async (url) => {
-          console.log("add to scene", url);
-          // Download the image from the URL and convert to File
-          const downloadImage = async (url: string): Promise<File | null> => {
-            try {
-              // Fetch the image
-              const response = await fetch(url);
-              if (!response.ok) {
-                throw new Error(`Failed to fetch image: ${response.status}`);
-              }
-
-              // Get the blob data
-              const blob = await response.blob();
-
-              // Extract filename from URL or use a default name
-              const filename = url.split("/").pop() || "image.png";
-
-              // Create a File object from the blob
-              const file = new File([blob], filename, { type: blob.type });
-
-              return file;
-            } catch (error) {
-              console.error("Error downloading image:", error);
-              return null;
-            }
-          };
-          const file = await downloadImage(url);
-          if (file) {
-            console.log("file", file);
-          } else {
-            console.error("Failed to download image");
-          }
-        }}
+        onAddToSceneClicked={handleAddToScene}
       />
     </>
   );

frontend/apps/editor3d/app/src/pages/PageEnigma/Editor/scene.ts

@@ -2,8 +2,6 @@ import * as THREE from "three";
 import { GLTFLoader, GLTF } from "three/addons/loaders/GLTFLoader.js";
 import { MMDLoader } from "three/addons/loaders/MMDLoader.js";
 
-import environmentVariables from "~/Classes/EnvironmentVariables";
-
 import { Font } from "three/examples/jsm/loaders/FontLoader.js";
 import { generateUUID } from "three/src/math/MathUtils.js";
 import { LoadingPlaceHolderManager } from "./placeholder_manager";
@@ -13,7 +11,6 @@ import { ChromaKeyMaterial } from "./chromakey";
 import { TimeLine } from "./timeline";
 import { ClipGroup, ClipType } from "~/enums";
 import { ClipUI } from "../clips/clip_ui";
-import { GetCdnOrigin } from "~/api/GetCdnOrigin";
 import { GetFrontendEnvironment } from "~/Classes/GetFrontendEnvironment";
 import { gridVisibility } from "../signals/engine";
 import { InfiniteGridHelper } from "./InfiniteGridHelper";
@@ -432,7 +429,7 @@ class Scene {
   // TODO: REPLACE
   async getMediaURL(media_id: string) {
     const response = await this.mediaFilesApi.GetMediaFileByToken({
-      mediaFileToken: media_id
+      mediaFileToken: media_id,
     });
     return response.data!.media_links.cdn_url;
   }
@@ -539,6 +536,21 @@ class Scene {
     return mmd;
   }
 
+  async loadObjectFromUrl(
+    url: string,
+    position: THREE.Vector3 = new THREE.Vector3(-0.5, 1.5, 0),
+  ): Promise<THREE.Object3D> {
+    console.log("loadObjectFromUrl!!!!!!!!", url);
+    if (
+      url.includes(".png") ||
+      url.includes(".jpg") ||
+      url.includes(".jpeg") ||
+      url.includes(".mp4")
+    ) {
+      return await this.instantiate("Image::" + url);
+    }
+  }
+
   async loadObject(
     media_id: string,
     name: string,

frontend/libs/components/gallery-modal/src/lib/gallery-modal.tsx

@@ -337,6 +337,7 @@ export const GalleryModal = React.memo(
         <LightboxModal
           isOpen={isLightboxVisible}
           onClose={handleCloseLightbox}
+          onCloseGallery={onClose}
           imageUrl={imageUrl}
           imageAlt={lightboxImage?.label || ""}
           onImageError={() => imageUrl && handleImageError(imageUrl)}

frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx

@@ -8,6 +8,7 @@ import { faDownToLine } from "@fortawesome/pro-solid-svg-icons";
 interface LightboxModalProps {
   isOpen: boolean;
   onClose: () => void;
+  onCloseGallery: () => void;
   imageUrl?: string | null;
   imageAlt?: string;
   onImageError?: () => void;
@@ -22,6 +23,7 @@ interface LightboxModalProps {
 export function LightboxModal({
   isOpen,
   onClose,
+  onCloseGallery,
   imageUrl,
   imageAlt = "",
   onImageError,
@@ -114,6 +116,8 @@ export function LightboxModal({
                           onClick={async (e) => {
                             e.stopPropagation();
                             await onAddToSceneClicked(downloadUrl);
+                            onClose(); // close the lightbox
+                            onCloseGallery(); // close the gallery
                           }}
                         >
                           Add to Current Scene