diff --git a/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx b/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx index 073351fe97..6db66c0a95 100644 --- a/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx +++ b/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 = ({ @@ -55,6 +55,9 @@ export const TopBar = ({ const [activeLibraryTab, setActiveLibraryTab] = useState("my-media"); const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false); + const [url, setUrl] = useState(""); + const [mediaId, setMediaId] = useState(""); + const engine3D = useContext(EngineContext); const handleTabChange = (tabId: string) => { if (appTabIdSignal.peek() == "3D") { @@ -75,35 +78,30 @@ export const TopBar = ({ url: string, media_id: string | undefined, ) => { - console.log("add to scene", url); + console.log("Items to add to scene", currentAppTabId); + console.log("url", url); + console.log("media_id", media_id); + + setUrl(url); + setMediaId(media_id ?? ""); + if (currentAppTabId === "2D") { console.log("Adding to 2D scene"); - // from the uploaded image url. } else if (currentAppTabId === "3D") { console.log("Adding to 3D scene"); - - // from the uploaded image url. - // engine3D?.activeScene.loadObjectFromUrl( - // "https://cdn-2.fakeyou.com/media/r/h/0/5/3/rh053gbx8yvjwk1mdvag4gkr5c0h9wbh/image_rh053gbx8yvjwk1mdvag4gkr5c0h9wbh.png", - // ); - - // from the gallery modal. - // engine3D?.activeScene.loadObjectFromUrl( - // "https://cdn-2.fakeyou.com/media/1/t/b/0/e/1tb0e53691mdgqmtd4fmzy58wp96vwxz/image_1tb0e53691mdgqmtd4fmzy58wp96vwxz.png", - // ); - - // // working media id m_ehq8051fx4hddhja54a7zmz897cgrk - // engine3D?.activeScene.loadObject( - // "m_ehq8051fx4hddhja54a7zmz897cgrk", - // "image", - // true, - // ); - // media id from the image selected from gallery. - engine3D?.activeScene.loadObject(media_id, "image", true); + if (media_id) { + engine3D?.activeScene.loadObject(media_id, "image", true); + } else { + console.warn("No media id provided"); + } } else if (currentAppTabId === "VIDEO") { console.log("Adding to Video scene"); + if (media_id) { + } else { + console.warn("No media id provided"); + } } else { console.warn(`Unknown tab type: ${currentAppTabId}`); } diff --git a/frontend/apps/editor3d/app/src/pages/PageVideo/ImageToVideo.tsx b/frontend/apps/editor3d/app/src/pages/PageVideo/ImageToVideo.tsx index eda059c933..ef21dd2b7b 100644 --- a/frontend/apps/editor3d/app/src/pages/PageVideo/ImageToVideo.tsx +++ b/frontend/apps/editor3d/app/src/pages/PageVideo/ImageToVideo.tsx @@ -5,25 +5,24 @@ import BackgroundGallery from "./BackgroundGallery"; import { PopoverMenu, type PopoverItem } from "@storyteller/ui-popover"; import { faFilm, faClock } from "@fortawesome/pro-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { FalKlingImageToVideo } from "@storyteller/tauri-api"; -const ImageToVideo = () => { +interface ImageToVideoProps { + imageMediaId?: string; + imageUrl?: string; +} + +const ImageToVideo = ({ imageMediaId, imageUrl }: ImageToVideoProps) => { const containerRef = useRef(null); const [selectedModel, setSelectedModel] = useState("Kling 2.0"); - const [useSystemPrompt, setUseSystemPrompt] = useState(false); + const [useSystemPrompt, setUseSystemPrompt] = useState(false); const [isImageBeingProcessed, setIsImageBeingProcessed] = useState(false); + const [selectedImage, setSelectedImage] = useState(null); const [imagePreviewUrl, setImagePreviewUrl] = useState(""); const [isDialogOpen, setIsDialogOpen] = useState(false); - const handleClose = () => setIsDialogOpen(false); - const handleAddImage = (image: File) => { - setSelectedImage(image); - setIsImageBeingProcessed(true); - setImagePreviewUrl(URL.createObjectURL(image)); - setTimeout(() => setIsImageBeingProcessed(false), 3000); - }; - const jobContext: JobContextType = { jobTokens: [], addJobToken: () => {}, @@ -72,8 +71,10 @@ const ImageToVideo = () => { console.log("Using job context"); return jobContext; }} + model={selectedModel} + imageMediaId={imageMediaId} + url={imageUrl ?? imagePreviewUrl ?? undefined} onEnqueuePressed={async () => { - // TODO: Implement enqueue logic console.log("Enqueue pressed"); }} /> diff --git a/frontend/apps/editor3d/app/src/signals/appTab.ts b/frontend/apps/editor3d/app/src/signals/appTab.ts index 61ced96926..841c495f83 100644 --- a/frontend/apps/editor3d/app/src/signals/appTab.ts +++ b/frontend/apps/editor3d/app/src/signals/appTab.ts @@ -1,7 +1,7 @@ import { signal } from "@preact/signals-react"; // change starting tab -export const appTabId = signal("3D"); +export const appTabId = signal("VIDEO"); export const setAppTabId = (newId: string) => { if (newId != "2D" && newId != "3D" && newId != "VIDEO") { diff --git a/frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx b/frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx index 4aa1bbb0bb..46f0900f10 100644 --- a/frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx +++ b/frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx @@ -4,7 +4,10 @@ import { Transition, TransitionChild } from "@headlessui/react"; import { createPortal } from "react-dom"; import dayjs from "dayjs"; import { faDownToLine } from "@fortawesome/pro-solid-svg-icons"; -import { FalKlingImageToVideo, FalHunyuanImageTo3d } from "@storyteller/tauri-api" +import { + FalKlingImageToVideo, + FalHunyuanImageTo3d, +} from "@storyteller/tauri-api"; interface LightboxModalProps { isOpen: boolean; @@ -117,13 +120,15 @@ export function LightboxModal({ {/* buttons with spacing */} {(onAddToSceneClicked && downloadUrl) || downloadUrl ? (
-
)}
-