Merge branch 'feature/mvp' of https://github.com/storytold/storyteller-frontend into feature/mvp

packages/fakeyou.com/src/v2/view/pages/landing/storyteller/OnboardingSelection/OnboardingSelection.tsx

@@ -21,7 +21,7 @@ export default function OnboardingSelection(props: OnboardingSelectionProps) {
       backgroundImage:
         "/images/landing/onboarding/pirate-island-scene-thumbnail.webp",
       onClick: () => {
-        history.push("/studio-intro/m_0tmgwem7x4k47w4cq96ja8psnvnaw5");
+        history.push("/studio-intro/m_2k10f2sdhcj549rk00053e96mentn0");
       },
     },
     {
@@ -29,7 +29,7 @@ export default function OnboardingSelection(props: OnboardingSelectionProps) {
       backgroundImage:
         "/images/landing/onboarding/spaceship-scene-thumbnail.webp",
       onClick: () => {
-        history.push("/studio-intro/m_16cc8b0dtp5fmjgb3yh85hnxyd695c");
+        history.push("/studio-intro/m_1mnebqs5twsqsbx4zkyq0ve7mk69ph");
       },
     },
     {
@@ -37,7 +37,7 @@ export default function OnboardingSelection(props: OnboardingSelectionProps) {
       backgroundImage:
         "/images/landing/onboarding/hanashi-scene-thumbnail.webp",
       onClick: () => {
-        history.push("/studio-intro/m_r4025m9dq0hppqzh8t6tmpmxv47yyv");
+        history.push("/studio-intro/m_pjb8x09pve8f7dd8pqgjk4ezaryjxs");
       },
     },
   ];

packages/fakeyou.com/src/v2/view/pages/storyteller_studio/StorytellerStudioPage.tsx

@@ -6,6 +6,7 @@ import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
 import { useParams } from "react-router-dom";
 import Scene3D from "components/common/Scene3D/Scene3D";
 import { EngineMode } from "components/common/Scene3D/EngineMode";
+import { SplitFirstPeriod } from "utils/SplitFirstPeriod";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -13,7 +14,12 @@ interface Props {
 }
 
 function StorytellerStudioListPage(props: Props) {
-  const { mediaToken } = useParams<{ mediaToken: string }>();
+  // NB: The URL parameter might be a raw media token (for .scn.ron files), or it might 
+  // have an appended suffix to assist the engine in loading the correct scene format. 
+  // For example, this is a valid "mediaTokenSpec": `m_zk0qkm1tgsdbh6e3c9kedy34vaympd.glb`
+  const { mediaToken : mediaTokenSpec } = useParams<{ mediaToken: string }>();
+
+  const { base: mediaToken, maybeRemainder: maybeExtension } = SplitFirstPeriod(mediaTokenSpec);
 
   usePrefixedDocumentTitle("Storyteller Studio");
 
@@ -23,13 +29,20 @@ function StorytellerStudioListPage(props: Props) {
 
   let assetDescriptor;
 
-  if (mediaToken) {
+  // We should prefer to start the onboarding flow with an existing scene, but if 
+  // one is unavailable, we should show the sample room.
+  if (maybeExtension !== undefined) {
     assetDescriptor = {
-      storytellerSceneMediaFileToken: mediaToken
+      sceneImportToken: mediaToken,
+      extension: maybeExtension,
+    };
+  } else if (mediaToken) {
+    assetDescriptor = {
+      storytellerSceneMediaFileToken: mediaToken,
     };
   } else {
     assetDescriptor = {
-      objectId: "sample-room.gltf"
+      objectId: "sample-room.gltf",
     };
   }
 

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

@@ -19,6 +19,8 @@ interface Props {
   sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
 }
 
+const PAGE_TITLE = "Storyteller Studio";
+
 function StudioIntroPage(props: Props) {
   // NB: The URL parameter might be a raw media token (for .scn.ron files), or it might 
   // have an appended suffix to assist the engine in loading the correct scene format. 
@@ -49,11 +51,17 @@ function StudioIntroPage(props: Props) {
 
   const [camera, cameraSet] = useState("zoom");
 
-  usePrefixedDocumentTitle("Storyteller Studio");
+  usePrefixedDocumentTitle(PAGE_TITLE);
 
   const onSaveCallback = useCallback((sceneMediaToken: string) => {
+    console.log(`Saved scene, new media token: ${sceneMediaToken}`)
+
     setSavedMediaToken(sceneMediaToken);
     sceneIsSavedSet(true); // Just in case we missed the "scene loaded" event.
+
+    // Replace the history state without causing a React re-render
+    window.history.replaceState(null, PAGE_TITLE, `/studio-intro/${sceneMediaToken}`);
+
   }, [setSavedMediaToken, sceneIsSavedSet]);
 
   const onSceneReadyCallback = useCallback(() => {