this is giving me cancer

src/App.tsx

@@ -5,7 +5,7 @@ import { Canvas } from "react-three-fiber";
 import MediaPlayer from "./components/MediaScene/MediaPlayer";
 import MediaScene from "./scenes/MediaScene";
 import EventManager from "./core/StateManagers/EventManager";
-import { useSceneStore } from "./store";
+import { useMediaStore, useSceneStore } from "./store";
 import GateScene from "./scenes/GateScene";
 import BootScene from "./scenes/BootScene";
 import SSknScene from "./scenes/SSknScene";
@@ -45,7 +45,7 @@ const App = () => {
           </Suspense>
         </Canvas>
       </span>
-      {/*<MediaPlayer />*/}
+      <MediaPlayer />
     </div>
   );
 };

src/components/MainScene/SyncedComponents/Site.tsx

@@ -62,8 +62,8 @@ const Site = (props: SiteProps) => {
     posZ: 0,
     rotX: 0,
     from: {
-      posZ: props.shouldIntro ? -10 : 0,
-      rotX: props.shouldIntro ? Math.PI / 2 : 0,
+      posZ: -10,
+      rotX: Math.PI / 2,
     },
     config: { duration: 3400 },
   });
@@ -81,8 +81,8 @@ const Site = (props: SiteProps) => {
   return (
     <Suspense fallback={null}>
       <a.group
-        rotation-x={introSiteState.rotX}
-        position-z={introSiteState.posZ}
+        rotation-x={props.shouldIntro ? introSiteState.rotX : 0}
+        position-z={props.shouldIntro ? introSiteState.posZ : 0}
       >
         <a.group rotation-x={siteState.siteRotX}>
           <a.group

src/components/MediaScene/MediaPlayer.tsx

@@ -9,6 +9,7 @@ import React, {
 import site_a from "../../resources/site_a.json";
 import site_b from "../../resources/site_b.json";
 import {
+  useEndSceneStore,
   useLevelStore,
   useMediaStore,
   useNodeStore,
@@ -17,6 +18,9 @@ import {
 } from "../../store";
 import t from "../../static/webvtt/test.vtt";
 import { SiteType } from "../MainScene/SyncedComponents/Site";
+import endroll from "../../static/movie/b/ENDROLL1.STR[0].webm";
+import xa0001 from "../../static/audio/a/Xa0001.mp4";
+import xa0006 from "../../static/audio/a/Xa0006.mp4";
 
 const MediaPlayer = () => {
   const [mediaSource, setMediaSource] = useState<any>();
@@ -40,6 +44,17 @@ const MediaPlayer = () => {
     currentSite,
   ]);
 
+  // end scene specific stuff
+  const endMediaPlayedCount = useEndSceneStore(
+    (state) => state.mediaPlayedCount
+  );
+  const incrementEndMediaPlayedCount = useEndSceneStore(
+    (state) => state.incrementMediaPlayedCount
+  );
+  const resetEndMediaPlayedCount = useEndSceneStore(
+    (state) => state.resetMediaPlayedCount
+  );
+
   const updateTime = useCallback(() => {
     (requestRef.current as any) = requestAnimationFrame(updateTime);
     if (videoRef.current) {
@@ -51,13 +66,18 @@ const MediaPlayer = () => {
         setPercentageElapsed(percentageElapsed);
         if (percentageElapsed === 100) {
           videoRef.current.currentTime = 0;
-          if (
-            (siteData as SiteType)[activeLevel][activeNodeId]
-              .triggers_final_video === 1
-          ) {
-            setScene("end");
+          if (currentScene === "end") {
+            incrementEndMediaPlayedCount();
           } else {
-            videoRef.current.pause();
+            if (
+              (siteData as SiteType)[activeLevel][activeNodeId]
+                .triggers_final_video === 1
+            ) {
+              resetEndMediaPlayedCount();
+              setScene("end");
+            } else {
+              videoRef.current.pause();
+            }
           }
         }
       }
@@ -65,6 +85,9 @@ const MediaPlayer = () => {
   }, [
     activeLevel,
     activeNodeId,
+    currentScene,
+    incrementEndMediaPlayedCount,
+    resetEndMediaPlayedCount,
     setPercentageElapsed,
     setScene,
     siteData,
@@ -79,13 +102,29 @@ const MediaPlayer = () => {
 
   useEffect(() => {
     if (currentScene === "end") {
-      import("../../static/movie/b/ENDROLL1.STR[0].webm").then((media) => {
-        setMediaSource(media.default);
+      if (endMediaPlayedCount === 0) {
+        setMediaSource(endroll);
         if (videoRef.current) {
           videoRef.current.load();
-          videoRef.current.play();
+          videoRef.current.play().catch((e) => {
+            console.log(e);
+          });
         }
-      });
+      } else if (endMediaPlayedCount === 1) {
+        setMediaSource(xa0001);
+        if (videoRef.current) {
+          videoRef.current.load();
+        }
+      } else if (endMediaPlayedCount === 2) {
+        console.log('s')
+        setMediaSource(xa0006);
+        if (videoRef.current) {
+          videoRef.current.load();
+          // videoRef.current.play().catch((e) => {
+          //   console.log(e);
+          // });
+        }
+      }
     } else if (currentScene === "media" || currentScene === "tak") {
       const nodeMedia = (siteData as SiteType)[activeLevel][activeNodeId]
         .media_file;
@@ -114,6 +153,7 @@ const MediaPlayer = () => {
     activeNodeId,
     currentScene,
     currentSite,
+    endMediaPlayedCount,
     siteData,
     videoRef,
   ]);
@@ -130,8 +170,8 @@ const MediaPlayer = () => {
           ? "block"
           : "none",
       }}
+      src={mediaSource}
     >
-      <source src={mediaSource} />
       <track src={t} kind="captions" default />
     </video>
   );

src/react-app-env.d.ts

@@ -85,6 +85,11 @@ declare module "*.mp3" {
   export default src;
 }
 
+declare module '*.mp4' {
+  const src: string;
+  export default src;
+}
+
 declare module "*.ogg" {
   const src: string;
   export default src;

src/scenes/EndScene.tsx

@@ -1,11 +1,15 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import * as THREE from "three";
 import { useFrame } from "react-three-fiber";
 import EndCylinder from "../components/EndScene/EndCylinder";
 import EndSphere from "../components/EndScene/EndSphere";
 import LainSpeak from "../components/LainSpeak";
-
+import { useEndSceneStore, useMediaStore } from "../store";
 const EndScene = () => {
+  const setAudioAnalyser = useMediaStore((state) => state.setAudioAnalyser);
+
+  const mediaPlayedCount = useEndSceneStore((state) => state.mediaPlayedCount);
+
   const mainCylinderRef = useRef<THREE.Object3D>();
 
   useFrame(() => {
@@ -17,7 +21,31 @@ const EndScene = () => {
   const [isIntro, setIsIntro] = useState(true);
   const [isOutro, setIsOutro] = useState(false);
 
-  return (
+  useEffect(() => {
+    if (mediaPlayedCount === 1) {
+      setTimeout(() => {
+        const mediaElement = document.getElementById(
+          "media"
+        ) as HTMLMediaElement;
+
+        const listener = new THREE.AudioListener();
+        const audio = new THREE.Audio(listener);
+
+        audio.setMediaElementSource(mediaElement);
+
+        setAudioAnalyser(new THREE.AudioAnalyser(audio, 2048));
+
+        if (mediaElement) {
+          mediaElement.play();
+          setIsIntro(false);
+        }
+      }, 3800);
+    } else if (mediaPlayedCount > 1) {
+      setIsOutro(true);
+    }
+  }, [mediaPlayedCount, setAudioAnalyser]);
+
+  return mediaPlayedCount > 0 ? (
     <>
       <pointLight position={[0, 0, 5]} intensity={0.9} />
       <pointLight position={[0, 0, -5]} intensity={0.9} />
@@ -32,6 +60,8 @@ const EndScene = () => {
       <EndSphere position={[2, 1.7, -0.5]} />
       <LainSpeak intro={isIntro} outro={isOutro} />
     </>
+  ) : (
+    <></>
   );
 };
 

src/store.ts

@@ -4,6 +4,12 @@ import * as THREE from "three";
 import authorize_user_letters from "./resources/authorize_user_letters.json";
 import game_progress from "./resources/initial_progress.json";
 
+type EndState = {
+  mediaPlayedCount: number;
+  incrementMediaPlayedCount: () => void;
+  resetMediaPlayedCount: () => void;
+};
+
 type SiteSaveState = {
   a: {
     activeNodeId: string;
@@ -585,3 +591,10 @@ export const useSiteSaveStore = create(
     })
   )
 );
+
+export const useEndSceneStore = create<EndState>((set) => ({
+  mediaPlayedCount: 0,
+  incrementMediaPlayedCount: () =>
+    set((state) => ({ mediaPlayedCount: state.mediaPlayedCount + 1 })),
+  resetMediaPlayedCount: () => set(() => ({ mediaPlayedCount: 0 })),
+}));