storyteller onboarding: pass token to next step of the flow

packages/fakeyou.com/src/components/common/Scene3D/Scene3D.tsx

@@ -13,6 +13,7 @@ interface Scene3DProps {
   objectId?: string;
   sceneMediaFileToken?: string;
   className?: string;
+  onSceneSavedCallback?: (mediaToken: string) => void;
 }
 
 export default function Scene3D({
@@ -22,6 +23,7 @@ export default function Scene3D({
   sceneMediaFileToken,
   urlParams,
   className,
+  onSceneSavedCallback,
 }: Scene3DProps) {
   const engineBaseUrl = "https://engine.fakeyou.com";
 
@@ -49,6 +51,10 @@ export default function Scene3D({
       const mediaToken = event.data.match(/scene-saved:(.+)/)?.[1];
       console.log("saved scene media token:", mediaToken);
 
+      if (onSceneSavedCallback !== undefined && mediaToken !== undefined) {
+        onSceneSavedCallback(mediaToken);
+      }
+
     } else if (event.data === "scene-save-failed") {
       console.error("Failed to save the scene!");
     }

packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntroPage.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useState } from "react";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
 import { StudioNotAvailable } from "v2/view/_common/StudioNotAvailable";
@@ -18,19 +18,31 @@ interface Props {
 
 function StudioIntroPage(props: Props) {
   const { mediaToken } = useParams<{ mediaToken: string }>();
+
   const history = useHistory();
+
   const inferenceJobs = useInferenceJobs(
     FrontendInferenceJobType.EngineComposition
   );
 
+  // 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);
+
   usePrefixedDocumentTitle("Storyteller Studio");
 
+  const onSaveCallback = useCallback((sceneMediaToken: string) => {
+    setSavedMediaToken(sceneMediaToken);
+  }, [setSavedMediaToken]);
+
   if (!props.sessionWrapper.canAccessStudio()) {
     return <StudioNotAvailable />;
   }
 
   let engineParams = {};
 
+  // We should prefer to start the onboarding flow with an existing scene, but if 
+  // one is unavailable, we should show the sample room.
   if (mediaToken) {
     engineParams = {
       sceneMediaFileToken: mediaToken,
@@ -45,10 +57,10 @@ function StudioIntroPage(props: Props) {
     // This opens the job modal. Needs to be disabled.
     EnqueueEngineCompositing("", {
       uuid_idempotency_token: uuidv4(),
-      media_file_token: mediaToken || "",
+      media_file_token: savedMediaToken,
     }).then((res: any) => {
       if (res && res.success) {
-        inferenceJobs.enqueue(res.inference_job_token,true); // noModalPls = true
+        inferenceJobs.enqueue(res.inference_job_token, true); // noModalPls = true
         history.push(`/studio-intro/style/${res.inference_job_token}`);
       }
     });
@@ -60,6 +72,7 @@ function StudioIntroPage(props: Props) {
         fullScreen={true}
         mode="studio"
         className="flex-grow-1"
+        onSceneSavedCallback={onSaveCallback}
         {...engineParams}
       />
       <div className="d-flex justify-content-center p-3">