From f183cf913caceae1e2937f0f809c2ee8bc571395 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Mon, 25 Mar 2024 17:02:25 -0700
Subject: [PATCH] added overrideURL prop to Scene3D for dev/debugging

---
 .../components/common/Scene3D/GetEngineUrl.ts |  5 ++-
 .../src/components/common/Scene3D/Scene3D.tsx | 18 +++++---
 .../pages/studio_tutorial/StudioTutorial.tsx  | 42 +++++++++----------
 3 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/Scene3D/GetEngineUrl.ts b/packages/fakeyou.com/src/components/common/Scene3D/GetEngineUrl.ts
index fbe24af2bf..bb65c54caf 100644
--- a/packages/fakeyou.com/src/components/common/Scene3D/GetEngineUrl.ts
+++ b/packages/fakeyou.com/src/components/common/Scene3D/GetEngineUrl.ts
@@ -13,6 +13,9 @@ import { MediaFileClass } from "@storyteller/components/src/api/enums/MediaFileC
 interface GetEngineUrlArgs {
   mode: EngineMode,
 
+  // override the URL for local development
+  overrideURL?: string,
+
   // Polymorphic type of asset we're loading into the engine.
   asset: LoadableAsset
 
@@ -53,7 +56,7 @@ export type LoadableAsset = MediaFile | EngineObject | StorytellerSceneMediaFile
 const ENGINE_BASE_URL = "https://engine.fakeyou.com";
 
 export function GetEngineUrl(args: GetEngineUrlArgs) : string {
-  let engineUrl = `${ENGINE_BASE_URL}/?mode=${args.mode}`;
+  let engineUrl = `${args.overrideURL || ENGINE_BASE_URL}/?mode=${args.mode}`;
 
   
   if (args.skybox) {
diff --git a/packages/fakeyou.com/src/components/common/Scene3D/Scene3D.tsx b/packages/fakeyou.com/src/components/common/Scene3D/Scene3D.tsx
index 520f518c40..0779d03883 100644
--- a/packages/fakeyou.com/src/components/common/Scene3D/Scene3D.tsx
+++ b/packages/fakeyou.com/src/components/common/Scene3D/Scene3D.tsx
@@ -13,6 +13,9 @@ interface Scene3DProps {
   // The mode to open the engine in.
   mode: EngineMode;
 
+  // for local dev
+  overrideURL?: string, 
+
   // A polymorphic asset type.
   // See `GetEngineUrl()` for usage.
   asset: LoadableAsset,
@@ -43,14 +46,15 @@ export default function Scene3D({
   className,
   onSceneReadyCallback,
   onSceneSavedCallback,
+  overrideURL,
 }: Scene3DProps) {
 
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
   const onMessage = useCallback((event: MessageEvent) => {
-    console.log("engine message received", event.data, event);
+    console.log("🟢 engine message received", event.data, event, onSceneReadyCallback !== undefined);
 
-    if (event.origin !== CHECK_FRAME_URL)
+    if (!overrideURL && event.origin !== CHECK_FRAME_URL)
       return;
 
     if (event.data === "studio-ready") {
@@ -81,7 +85,7 @@ export default function Scene3D({
     } else if (event.data === "scene-save-failed") {
       console.error("Failed to save the scene!");
     }
-  }, [onSceneReadyCallback, onSceneSavedCallback]);
+  }, [onSceneReadyCallback, onSceneSavedCallback, overrideURL]);
 
 
   useEffect(() => {
@@ -91,8 +95,12 @@ export default function Scene3D({
     }
   }, [onMessage]);
 
-
-  let engineUrl = GetEngineUrl({mode: mode, asset: asset, skybox: skybox})
+  let engineUrl = GetEngineUrl({
+    mode: mode,
+    overrideURL,
+    asset: asset,
+    skybox: skybox
+  });
 
   return (
     <div
diff --git a/packages/fakeyou.com/src/v2/view/pages/studio_tutorial/StudioTutorial.tsx b/packages/fakeyou.com/src/v2/view/pages/studio_tutorial/StudioTutorial.tsx
index 3831a7a441..13a66c4f7c 100644
--- a/packages/fakeyou.com/src/v2/view/pages/studio_tutorial/StudioTutorial.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/studio_tutorial/StudioTutorial.tsx
@@ -86,20 +86,6 @@ export default function StudioTutorial(props: Props) {
 
   const styleMediaLink = styleMediaToken && styleMedia && new BucketConfig().getGcsUrl(styleMedia?.public_bucket_path || "");
 
-  console.log("🚒 tutorial overall state",{
-    compositeJobStatus,
-    compositing,
-    compositeMediaToken,
-    queryCompositeJob,
-    queryStyleJob,
-    styleJobStatus,
-    styleEnqueued,
-    styling,
-    styleMediaToken,
-    urlQueries,
-    styleMediaLink
-  });
-
   // If the user saves the scene in the engine, we'll need to use the new token 
   // for subsequent steps of this flow.
   const [savedMediaToken, setSavedMediaToken] = useState(mediaToken);
@@ -270,17 +256,31 @@ export default function StudioTutorial(props: Props) {
     vstValues
   ]);
 
+  console.log("🚒 tutorial overall state",{
+    compositeJobStatus,
+    compositing,
+    compositeMediaToken,
+    queryCompositeJob,
+    queryStyleJob,
+    sceneIsLoadedCount,
+    styleJobStatus,
+    styleEnqueued,
+    styling,
+    styleMediaToken,
+    urlQueries,
+    styleMediaLink
+  });
 
   return !props.sessionWrapper.canAccessStudio() ?
     <StudioNotAvailable /> :
     <div className="studio-tutorial-page">
-      <Scene3D
-        // fullScreen={true}
-        mode={EngineMode.Studio}
-        asset={assetDescriptor}
-        onSceneReadyCallback={onSceneReadyCallback}
-        onSceneSavedCallback={onSaveCallback}
-      />
+      <Scene3D {...{
+        asset: assetDescriptor,
+        mode: EngineMode.Studio,
+        onSaveCallback,
+        onSceneReadyCallback,
+        // overrideURL: "http://127.0.0.1:4200", // COMMENT OUT BEFORE PUSHING
+      }}/>
       <div {...{ className: "studio-tutorial-style" }}>
         <BasicTabs {...{
           onChange: ({ target }: { target: any }) => selectedTabSet(target.value),