From 8129f2e46a09758145e09e7abbfb28425060fe35 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Fri, 8 Mar 2024 17:37:56 -0500
Subject: [PATCH] engine callback (wip)

---
 .../src/components/common/Scene3D/Scene3D.tsx | 52 +++++++++++++++++--
 1 file changed, 48 insertions(+), 4 deletions(-)

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<HTMLIFrameElement>(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()}
     >
-      <IframeResizer src={engineUrl} width="100%" height="100%" id="" />
+      {/*<IframeResizer src={engineUrl} width="100%" height="100%" id="" />*/}
+      <iframe
+        title="Storyteller Engine"
+        ref={iframeRef}
+        src={engineUrl}
+        width="100%"
+        height="100%"
+      />
     </div>
   );
 }