diff --git a/src/App.tsx b/src/App.tsx
index 9a6cf12..3ca2dff 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -32,7 +32,7 @@ const App = () => {
{/**/}
- {/**/}
+
);
};
diff --git a/src/components/MediaScene/LeftSide/LeftSide.tsx b/src/components/MediaScene/LeftSide/LeftSide.tsx
index 93bcafc..22b4db0 100644
--- a/src/components/MediaScene/LeftSide/LeftSide.tsx
+++ b/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";
diff --git a/src/components/MediaScene/MediaPlayer.tsx b/src/components/MediaScene/MediaPlayer.tsx
index 7f0e43c..01296aa 100644
--- a/src/components/MediaScene/MediaPlayer.tsx
+++ b/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();
+ const onProgress = useCallback(
+ (progress) => {
+ const secondsElapsed = progress.played * mediaDuration;
+ const percentageComplete = Math.round(
+ (secondsElapsed / mediaDuration) * 100
+ );
+ setPerc(percentageComplete);
+ },
+ [mediaDuration]
+ );
+
return (
);
};
diff --git a/src/components/MediaScene/RightSide/RightSide.tsx b/src/components/MediaScene/RightSide/RightSide.tsx
index 3ac0329..5ef8571 100644
--- a/src/components/MediaScene/RightSide/RightSide.tsx
+++ b/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 (
<>
+
+
+
+
+
+
+
+
+
+
{
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];
diff --git a/src/components/StateManagers/MediaScene/MediaWordStateManager.tsx b/src/components/StateManagers/MediaScene/MediaWordStateManager.tsx
index 34ae885..f6d0471 100644
--- a/src/components/StateManagers/MediaScene/MediaWordStateManager.tsx
+++ b/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) {
diff --git a/src/store.ts b/src/store.ts
index dbeeded..fa266cd 100644
--- a/src/store.ts
+++ b/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((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((set) => ({
set(() => ({ lastActiveLeftSideElement: to })),
setLastActiveRightSideElement: (to) =>
set(() => ({ lastActiveRightSideElement: to })),
+ setMediaDuration: (to) => set(() => ({ mediaDuration: to })),
+ setMediaTimeElapsed: (to) => set(() => ({ mediaTimeElapsed: to })),
}));
export const useMediaWordStore = create((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,
})),
}));