diff --git a/packages/fakeyou.com/src/components/common/Scene3D/Scene3D.tsx b/packages/fakeyou.com/src/components/common/Scene3D/Scene3D.tsx
index 797f86db9d..4057817297 100644
--- a/packages/fakeyou.com/src/components/common/Scene3D/Scene3D.tsx
+++ b/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!");
}
diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntroPage.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntroPage.tsx
index e5b54a8b3f..6046e2cd8e 100644
--- a/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntroPage.tsx
+++ b/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