testing around idle nodes trying to find an optimal way to make this shit work

src/App.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useState, Suspense, useMemo } from "react";
+import React, { Suspense, useEffect, useMemo } from "react";
 import MainScene from "./scenes/MainScene";
 import "./static/css/page.css";
 import { Canvas } from "react-three-fiber";
 import MediaPlayer from "./components/MediaScene/MediaPlayer";
 import MediaScene from "./scenes/MediaScene";
 import EventManager from "./core/StateManagers/EventManager";
-import { useMediaStore, useSceneStore } from "./store";
+import { useSceneStore } from "./store";
 import GateScene from "./scenes/GateScene";
 import BootScene from "./scenes/BootScene";
 import SSknScene from "./scenes/SSknScene";

src/components/MainScene/SyncedComponents/MiddleRing.tsx

@@ -204,10 +204,6 @@ const MiddleRing = () => {
     }
   });
 
-  useEffect(() => {
-    console.log(mainRingVisible);
-  }, [mainRingVisible]);
-
   return (
     <a.group rotation-z={rotState.rotZ}>
       <a.mesh

src/components/MediaScene/MediaPlayer.tsx

@@ -69,9 +69,7 @@ const MediaPlayer = () => {
         setPercentageElapsed(percentageElapsed);
         if (percentageElapsed === 100) {
           videoRef.current.currentTime = 0;
-          if (currentScene === "idle_media") {
+          if (currentScene === "end") {
-            setScene("main");
-          } else if (currentScene === "end") {
             incrementEndMediaPlayedCount();
           } else {
             if (
@@ -179,9 +177,6 @@ const MediaPlayer = () => {
               }
             );
           }
-          if (videoRef.current) {
-            videoRef.current.play();
-          }
         }
       }
     }

src/core/StateManagers/EventManager.tsx

@@ -146,6 +146,7 @@ const EventManager = () => {
     if (
       timePassedSinceLastKeyPress.current > -1 &&
       mainSubscene !== "pause" &&
+      mainSubscene !== "level_selection" &&
       currentScene === "main"
     ) {
       if (now > timePassedSinceLastKeyPress.current + 10000) {
@@ -191,10 +192,10 @@ const EventManager = () => {
       const keyPress = getKeyCodeAssociation(keyCode);
 
       if (keyPress && !inputCooldown) {
-        timePassedSinceLastKeyPress.current = Date.now() + 2500;
         let event;
         switch (currentScene) {
           case "main":
+            timePassedSinceLastKeyPress.current = Date.now() + 2500;
             event = handleMainSceneEvent({
               mainSubscene: mainSubscene,
               keyPress: keyPress,
@@ -210,6 +211,7 @@ const EventManager = () => {
             });
             break;
           case "media":
+          case "idle_media":
             event = handleMediaSceneEvent({
               keyPress: keyPress,
               activeMediaComponent: activeMediaComponent,

src/core/StateManagers/MainSceneManagers/IdleManager.tsx

@@ -83,8 +83,6 @@ const IdleManager = (props: StateManagerProps) => {
           idleNodes.video[Math.floor(Math.random() * idleNodes.video.length)]
         );
       }
-
-      console.log('s')
     },
     [setImages, setMedia]
   );

src/scenes/MediaScene.tsx

@@ -62,28 +62,18 @@ const MediaScene = () => {
   return (
     <perspectiveCamera position-z={3}>
       <group position={[0.4, -0.3, 0]}>
-        {currentScene !== "idle_media" ? (
+        <pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 0]} />
-          <>
+        <LeftSide activeMediaComponent={activeMediaComponent} />
-            <pointLight
+        <group position={[0, 0.5, -3]}>
-              intensity={1.2}
+          <MediaLoadingBar />
-              color={0xffffff}
+          <NodeNameContainer />
-              position={[-2, 0, 0]}
+        </group>
-            />
+        <group scale={[0.06, 0.12, 0]} position={[0.8, 1.37, 0]}>
-            <LeftSide activeMediaComponent={activeMediaComponent} />
+          {activeNodeName.split("").map((letter, idx) => (
-            <group position={[0, 0.5, -3]}>
+            <MediumLetter letter={letter} letterIdx={idx} key={idx} />
-              <MediaLoadingBar />
+          ))}
-              <NodeNameContainer />
+        </group>
-            </group>
+        <MediaYellowTextAnimator />
-            <group scale={[0.06, 0.12, 0]} position={[0.8, 1.37, 0]}>
-              {activeNodeName.split("").map((letter, idx) => (
-                <MediumLetter letter={letter} letterIdx={idx} key={idx} />
-              ))}
-            </group>
-            <MediaYellowTextAnimator />
-          </>
-        ) : (
-          <></>
-        )}
         {activeNodeMedia.includes("XA") || idleMedia.includes("XA") ? (
           <>
             {currentScene !== "idle_media" ? (

src/scenes/TaKScene.tsx

@@ -35,6 +35,7 @@ const TaKScene = () => {
       setAudioAnalyser(new THREE.AudioAnalyser(audio, 2048));
 
       if (mediaElement) {
+        mediaElement.currentTime = 0;
         mediaElement.play();
         setIsIntro(false);
       }

src/store.ts

@@ -338,7 +338,7 @@ export const useNodeStore = create(
 );
 
 export const useIdleStore = create<IdleState>((set) => ({
-  media: undefined,
+  media: "INS01.STR",
   // this may be undefined depending on whether or not the media is audio or not
   images: undefined,
   setMedia: (to) => set(() => ({ media: to })),