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, })), }));