added cross thing, working on proper media time tracking

src/App.tsx

@@ -32,7 +32,7 @@ const App = () => {
           {/*<MainScene />*/}
         </Canvas>
       </span>
-      {/*<MediaPlayer />*/}
+      <MediaPlayer />
     </div>
   );
 };

src/components/MediaScene/LeftSide/LeftSide.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import TriangularPrism from "./TriangularPrism";
 import Cube from "./Cube";
 

src/components/MediaScene/MediaPlayer.tsx

@@ -1,13 +1,43 @@
-import React from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import ReactPlayer from "react-player";
 import test from "../../static/movie/test.webm";
+import { useMediaStore } from "../../store";
+import { useFrame } from "react-three-fiber";
 
 const MediaPlayer = () => {
+  const setMediaDuration = useMediaStore((state) => state.setMediaDuration);
+  const mediaDuration = useMediaStore((state) => state.mediaDuration);
+  const setMediaTimeElapsed = useMediaStore(
+    (state) => state.setMediaTimeElapsed
+  );
+
+  const [perc, setPerc] = useState(0);
+  const onDuration = useCallback(
+    (duration: number) => {
+      setMediaDuration(duration);
+    },
+    [setMediaDuration]
+  );
+  const t = useRef<any>();
+  const onProgress = useCallback(
+    (progress) => {
+      const secondsElapsed = progress.played * mediaDuration;
+      const percentageComplete = Math.round(
+        (secondsElapsed / mediaDuration) * 100
+      );
+      setPerc(percentageComplete);
+    },
+    [mediaDuration]
+  );
+
   return (
     <ReactPlayer
       className="react-player"
       controls={true}
       url={[{ src: test, type: "video/webm" }]}
+      onDuration={onDuration}
+      onProgress={onProgress}
+      ref={t}
     />
   );
 };

src/components/MediaScene/RightSide/RightSide.tsx

@@ -1,7 +1,8 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { useMediaWordStore } from "../../../store";
 import Word from "./Word";
-import { useSpring } from "@react-spring/three";
+import { useSpring, a } from "@react-spring/three";
+import * as THREE from "three";
 
 type RightSideProps = {
   activeMediaElement: string;
@@ -16,23 +17,63 @@ const RightSide = (props: RightSideProps) => {
 
   const wordPositionState = useMediaWordStore(
     useCallback(
-      (state) => state.wordPositionDataStruct[wordPositionDataStructIdx],
+      (state) => {
+        return wordPositionDataStructIdx < 0
+          ? state.wordPositionDataStruct[
+              state.wordPositionDataStruct.length + wordPositionDataStructIdx
+            ]
+          : state.wordPositionDataStruct[wordPositionDataStructIdx];
+      },
       [wordPositionDataStructIdx]
     )
   );
 
   const wordPositionStateSpring = useSpring({
-    fstWordPosX: wordPositionState.positions.fstWord.posX,
-    fstWordPosY: wordPositionState.positions.fstWord.posY,
-    sndWordPosX: wordPositionState.positions.sndWord.posX,
-    sndWordPosY: wordPositionState.positions.sndWord.posY,
-    thirdWordPosX: wordPositionState.positions.thirdWord.posX,
-    thirdWordPosY: wordPositionState.positions.thirdWord.posY,
+    fstWordPosX: wordPositionState.fstWord.posX,
+    fstWordPosY: wordPositionState.fstWord.posY,
+    sndWordPosX: wordPositionState.sndWord.posX,
+    sndWordPosY: wordPositionState.sndWord.posY,
+    thirdWordPosX: wordPositionState.thirdWord.posX,
+    thirdWordPosY: wordPositionState.thirdWord.posY,
+    linePosX: wordPositionState.line.posX,
+    linePosY: wordPositionState.line.posY,
     config: { duration: 300 },
   });
 
+  const horizontalPoints = useMemo(
+    () => [new THREE.Vector3(-10, 0, 0), new THREE.Vector3(10, 0, 0)],
+    []
+  );
+  const verticalPoints = useMemo(
+    () => [new THREE.Vector3(0, 10, 0), new THREE.Vector3(0, -10, 0)],
+    []
+  );
+
   return (
     <>
+      <a.group
+        position-x={wordPositionStateSpring.linePosX}
+        position-y={wordPositionStateSpring.linePosY}
+      >
+        <line>
+          <geometry attach="geometry" vertices={horizontalPoints} />
+          <lineBasicMaterial
+            attach="material"
+            color={0xc9d6d5}
+            transparent={true}
+            opacity={0.8}
+          />
+        </line>
+        <line>
+          <geometry attach="geometry" vertices={verticalPoints} />
+          <lineBasicMaterial
+            attach="material"
+            color={0xc9d6d5}
+            transparent={true}
+            opacity={0.8}
+          />
+        </line>
+      </a.group>
       <Word
         word={words[0]}
         posX={wordPositionStateSpring.fstWordPosX}

src/components/StateManagers/MediaScene/ActiveMediaElementStateManager.tsx

@@ -63,6 +63,10 @@ const ActiveMediaElementStateManager = (props: StateManagerProps) => {
           action: switchToLeftSide,
           value: "fstWord",
         },
+        fstWord_up: {
+          action: setActiveMediaElement,
+          value: "thirdWord"
+        },
         fstWord_down: {
           action: setActiveMediaElement,
           value: "sndWord",
@@ -75,6 +79,22 @@ const ActiveMediaElementStateManager = (props: StateManagerProps) => {
           action: setActiveMediaElement,
           value: "thirdWord",
         },
+        sndWord_left: {
+          action: switchToLeftSide,
+          value: "sndWord"
+        },
+        thirdWord_down: {
+          action: setActiveMediaElement,
+          value: "fstWord",
+        },
+        thirdWord_up: {
+          action: setActiveMediaElement,
+          value: "sndWord",
+        },
+        thirdWord_left: {
+          action: switchToLeftSide,
+          value: "thirdWord"
+        }
       };
 
       return dispatcherObjects[event as keyof typeof dispatcherObjects];

src/components/StateManagers/MediaScene/MediaWordStateManager.tsx

@@ -6,25 +6,39 @@ const MediaWordStateManager = (props: StateManagerProps) => {
   const addToWordPositionDataStructIdx = useMediaWordStore(
     (state) => state.addToWordPositionDataStructIdx
   );
-  const dispatchObject = useCallback((event: string) => {
-    const dispatcherObjects = {
-      fstWord_down: {
-        action: addToWordPositionDataStructIdx,
-        value: 1,
-      },
-      sndWord_up: {
-        action: addToWordPositionDataStructIdx,
-        value: -1,
-      },
-      sndWord_down: {
-        action: addToWordPositionDataStructIdx,
-        value: 1,
+  const dispatchObject = useCallback(
+    (event: string) => {
+      const dispatcherObjects = {
+        fstWord_down: {
+          action: addToWordPositionDataStructIdx,
+          value: 1,
+        },
+        fstWord_up: {
+          action: addToWordPositionDataStructIdx,
+          value: -1,
+        },
+        sndWord_down: {
+          action: addToWordPositionDataStructIdx,
+          value: 1,
+        },
+        sndWord_up: {
+          action: addToWordPositionDataStructIdx,
+          value: -1,
+        },
+        thirdWord_down: {
+          action: addToWordPositionDataStructIdx,
+          value: 1,
+        },
+        thirdWord_up: {
+          action: addToWordPositionDataStructIdx,
+          value: -1,
+        },
+      };
 
-      }
-    };
-
-    return dispatcherObjects[event as keyof typeof dispatcherObjects];
-  }, []);
+      return dispatcherObjects[event as keyof typeof dispatcherObjects];
+    },
+    [addToWordPositionDataStructIdx]
+  );
 
   useEffect(() => {
     if (props.eventState) {

src/store.ts

@@ -87,11 +87,10 @@ type MiddleRingState = {
 
 type MediaWordState = {
   wordPositionDataStruct: {
-    positions: {
-      fstWord: { posX: number; posY: number };
-      sndWord: { posX: number; posY: number };
-      thirdWord: { posX: number; posY: number };
-    };
+    line: { posX: number; posY: number };
+    fstWord: { posX: number; posY: number };
+    sndWord: { posX: number; posY: number };
+    thirdWord: { posX: number; posY: number };
   }[];
   wordPositionDataStructIdx: number;
   words: string[];
@@ -99,12 +98,16 @@ type MediaWordState = {
 };
 
 type MediaState = {
+  mediaDuration: number;
+  mediaTimeElapsed: number;
   activeMediaElement: string;
   setActiveMediaElement: (to: string) => void;
   lastActiveLeftSideElement: string;
   setLastActiveLeftSideElement: (to: string) => void;
   lastActiveRightSideElement: string;
   setLastActiveRightSideElement: (to: string) => void;
+  setMediaDuration: (to: number) => void;
+  setMediaTimeElapsed: (to: number) => void;
 };
 
 type TextRendererState = {
@@ -243,6 +246,8 @@ export const useMediaStore = create<MediaState>((set) => ({
   // elements need to be stored (when you switch back and forth between the columns,
   // you end up on the last active element FROM THAT COLUMN).
   // so we store leftColActiveMediaElement as well as rightCol.
+  mediaDuration: 0,
+  mediaTimeElapsed: 0,
   activeMediaElement: "play",
   setActiveMediaElement: (to) => set(() => ({ activeMediaElement: to })),
   lastActiveLeftSideElement: "play",
@@ -251,36 +256,75 @@ export const useMediaStore = create<MediaState>((set) => ({
     set(() => ({ lastActiveLeftSideElement: to })),
   setLastActiveRightSideElement: (to) =>
     set(() => ({ lastActiveRightSideElement: to })),
+  setMediaDuration: (to) => set(() => ({ mediaDuration: to })),
+  setMediaTimeElapsed: (to) => set(() => ({ mediaTimeElapsed: to })),
 }));
 
 export const useMediaWordStore = create<MediaWordState>((set) => ({
   words: ["eye", "quiet", "hallucination"],
   wordPositionDataStruct: [
     {
-      positions: {
-        fstWord: { posX: 0, posY: 0 },
-        sndWord: { posX: 3, posY: -3 },
-        thirdWord: { posX: 3.7, posY: -4.3 },
+      line: {
+        posX: -2,
+        posY: 2,
       },
+      fstWord: { posX: 0, posY: 0 },
+      sndWord: { posX: 3, posY: -3 },
+      thirdWord: { posX: 3.7, posY: -4.3 },
     },
     {
-      positions: {
-        fstWord: { posX: 1.8, posY: -2.5 },
-        sndWord: { posX: 1.5, posY: -1.5 },
-        thirdWord: { posX: 3.3, posY: -3.7 },
+      line: {
+        posX: -0.5,
+        posY: 0.5,
       },
+      fstWord: { posX: 1.8, posY: -2.5 },
+      sndWord: { posX: 1.5, posY: -1.5 },
+      thirdWord: { posX: 3.3, posY: -3.7 },
     },
     {
-      positions: {
-        fstWord: { posX: 3.7, posY: -4.3 },
-        sndWord: { posX: 0, posY: 0 },
-        thirdWord: { posX: 3, posY: -3 },
+      line: {
+        posX: 1,
+        posY: -1,
       },
+      fstWord: { posX: 3.7, posY: -4.3 },
+      sndWord: { posX: 0, posY: 0 },
+      thirdWord: { posX: 3, posY: -3 },
+    },
+    {
+      line: {
+        posX: 1.3,
+        posY: -1.7,
+      },
+      fstWord: { posX: 3.3, posY: -3.7 },
+      sndWord: { posX: 1.8, posY: -2.5 },
+      thirdWord: { posX: 1.5, posY: -1.5 },
+    },
+    {
+      line: {
+        posX: 1.7,
+        posY: -2.3,
+      },
+      fstWord: { posX: 3, posY: -3 },
+      sndWord: { posX: 3.7, posY: -4.3 },
+      thirdWord: { posX: 0, posY: 0 },
+    },
+    {
+      line: {
+        posX: -0.4,
+        posY: -0.5,
+      },
+      fstWord: { posX: 1.5, posY: -1.5 },
+      sndWord: { posX: 3.3, posY: -3.7 },
+      thirdWord: { posX: 1.8, posY: -2.5 },
     },
   ],
   wordPositionDataStructIdx: 0,
   addToWordPositionDataStructIdx: (val) =>
     set((state) => ({
-      wordPositionDataStructIdx: state.wordPositionDataStructIdx + val,
+      wordPositionDataStructIdx:
+        state.wordPositionDataStructIdx > 4 ||
+        state.wordPositionDataStructIdx < -4
+          ? 0
+          : state.wordPositionDataStructIdx + val,
     })),
 }));