diff --git a/packages/fakeyou.com/src/components/common/Scene3D/Scene3D.tsx b/packages/fakeyou.com/src/components/common/Scene3D/Scene3D.tsx index 92708195c1..aed4cbf768 100644 --- a/packages/fakeyou.com/src/components/common/Scene3D/Scene3D.tsx +++ b/packages/fakeyou.com/src/components/common/Scene3D/Scene3D.tsx @@ -1,5 +1,5 @@ -import React from "react"; -import IframeResizer from "iframe-resizer-react"; +import React, { useCallback, useEffect, useRef } from "react"; +//import IframeResizer from "iframe-resizer-react"; import "./Scene3D.scss"; // See the following page for Storyteller Engine's query param documentation: @@ -23,7 +23,44 @@ export default function Scene3D({ urlParams, className, }: Scene3DProps) { - let engineUrl = `https://engine.fakeyou.com?mode=${mode}`; + const engineBaseUrl = "https://engine.fakeyou.com"; + + let engineUrl = `${engineBaseUrl}/?mode=${mode}`; + + const iframeRef = useRef(null); + + + const onMessage = useCallback((event: MessageEvent) => { + if (event.origin !== engineBaseUrl) + return; + + console.log("engine message received", event.data, event); + + if (event.data === "studio-ready") { + const studio = iframeRef.current?.contentWindow; + if (!studio) return; + + studio.postMessage("save-scene", engineBaseUrl); + } else if ( + typeof event.data === "string" + && event.data.startsWith("scene-saved:") + ) { + const mediaToken = event.data.match(/scene-saved:(.+)/)?.[1]; + console.log("saved scene media token:", mediaToken); + + } else if (event.data === "scene-save-failed") { + console.error("Failed to save the scene!"); + } + }, []); + + + useEffect(() => { + window.addEventListener("message", onMessage); + + return () => { + window.removeEventListener("message", onMessage); + } + }, [onMessage]); if (sceneMediaFileToken) { const sceneUrlRef = `remote://${sceneMediaFileToken}.scn.ron`; @@ -38,7 +75,14 @@ export default function Scene3D({ fullScreen ? "fy-scene-3d-fullscreen" : "fy-scene-3d-default" } ${className ? className : ""}`.trim()} > - + {/**/} +