mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
added cross thing, working on proper media time tracking
This commit is contained in:
parent
43dcd21451
commit
3d62868756
7 changed files with 197 additions and 48 deletions
|
@ -32,7 +32,7 @@ const App = () => {
|
||||||
{/*<MainScene />*/}
|
{/*<MainScene />*/}
|
||||||
</Canvas>
|
</Canvas>
|
||||||
</span>
|
</span>
|
||||||
{/*<MediaPlayer />*/}
|
<MediaPlayer />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React from "react";
|
import React, { useState } from "react";
|
||||||
import TriangularPrism from "./TriangularPrism";
|
import TriangularPrism from "./TriangularPrism";
|
||||||
import Cube from "./Cube";
|
import Cube from "./Cube";
|
||||||
|
|
||||||
|
|
|
@ -1,13 +1,43 @@
|
||||||
import React from "react";
|
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||||
import ReactPlayer from "react-player";
|
import ReactPlayer from "react-player";
|
||||||
import test from "../../static/movie/test.webm";
|
import test from "../../static/movie/test.webm";
|
||||||
|
import { useMediaStore } from "../../store";
|
||||||
|
import { useFrame } from "react-three-fiber";
|
||||||
|
|
||||||
const MediaPlayer = () => {
|
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 (
|
return (
|
||||||
<ReactPlayer
|
<ReactPlayer
|
||||||
className="react-player"
|
className="react-player"
|
||||||
controls={true}
|
controls={true}
|
||||||
url={[{ src: test, type: "video/webm" }]}
|
url={[{ src: test, type: "video/webm" }]}
|
||||||
|
onDuration={onDuration}
|
||||||
|
onProgress={onProgress}
|
||||||
|
ref={t}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
import React, { useCallback } from "react";
|
import React, { useCallback, useMemo } from "react";
|
||||||
import { useMediaWordStore } from "../../../store";
|
import { useMediaWordStore } from "../../../store";
|
||||||
import Word from "./Word";
|
import Word from "./Word";
|
||||||
import { useSpring } from "@react-spring/three";
|
import { useSpring, a } from "@react-spring/three";
|
||||||
|
import * as THREE from "three";
|
||||||
|
|
||||||
type RightSideProps = {
|
type RightSideProps = {
|
||||||
activeMediaElement: string;
|
activeMediaElement: string;
|
||||||
|
@ -16,23 +17,63 @@ const RightSide = (props: RightSideProps) => {
|
||||||
|
|
||||||
const wordPositionState = useMediaWordStore(
|
const wordPositionState = useMediaWordStore(
|
||||||
useCallback(
|
useCallback(
|
||||||
(state) => state.wordPositionDataStruct[wordPositionDataStructIdx],
|
(state) => {
|
||||||
|
return wordPositionDataStructIdx < 0
|
||||||
|
? state.wordPositionDataStruct[
|
||||||
|
state.wordPositionDataStruct.length + wordPositionDataStructIdx
|
||||||
|
]
|
||||||
|
: state.wordPositionDataStruct[wordPositionDataStructIdx];
|
||||||
|
},
|
||||||
[wordPositionDataStructIdx]
|
[wordPositionDataStructIdx]
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
const wordPositionStateSpring = useSpring({
|
const wordPositionStateSpring = useSpring({
|
||||||
fstWordPosX: wordPositionState.positions.fstWord.posX,
|
fstWordPosX: wordPositionState.fstWord.posX,
|
||||||
fstWordPosY: wordPositionState.positions.fstWord.posY,
|
fstWordPosY: wordPositionState.fstWord.posY,
|
||||||
sndWordPosX: wordPositionState.positions.sndWord.posX,
|
sndWordPosX: wordPositionState.sndWord.posX,
|
||||||
sndWordPosY: wordPositionState.positions.sndWord.posY,
|
sndWordPosY: wordPositionState.sndWord.posY,
|
||||||
thirdWordPosX: wordPositionState.positions.thirdWord.posX,
|
thirdWordPosX: wordPositionState.thirdWord.posX,
|
||||||
thirdWordPosY: wordPositionState.positions.thirdWord.posY,
|
thirdWordPosY: wordPositionState.thirdWord.posY,
|
||||||
|
linePosX: wordPositionState.line.posX,
|
||||||
|
linePosY: wordPositionState.line.posY,
|
||||||
config: { duration: 300 },
|
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 (
|
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
|
||||||
word={words[0]}
|
word={words[0]}
|
||||||
posX={wordPositionStateSpring.fstWordPosX}
|
posX={wordPositionStateSpring.fstWordPosX}
|
||||||
|
|
|
@ -63,6 +63,10 @@ const ActiveMediaElementStateManager = (props: StateManagerProps) => {
|
||||||
action: switchToLeftSide,
|
action: switchToLeftSide,
|
||||||
value: "fstWord",
|
value: "fstWord",
|
||||||
},
|
},
|
||||||
|
fstWord_up: {
|
||||||
|
action: setActiveMediaElement,
|
||||||
|
value: "thirdWord"
|
||||||
|
},
|
||||||
fstWord_down: {
|
fstWord_down: {
|
||||||
action: setActiveMediaElement,
|
action: setActiveMediaElement,
|
||||||
value: "sndWord",
|
value: "sndWord",
|
||||||
|
@ -75,6 +79,22 @@ const ActiveMediaElementStateManager = (props: StateManagerProps) => {
|
||||||
action: setActiveMediaElement,
|
action: setActiveMediaElement,
|
||||||
value: "thirdWord",
|
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];
|
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
||||||
|
|
|
@ -6,25 +6,39 @@ const MediaWordStateManager = (props: StateManagerProps) => {
|
||||||
const addToWordPositionDataStructIdx = useMediaWordStore(
|
const addToWordPositionDataStructIdx = useMediaWordStore(
|
||||||
(state) => state.addToWordPositionDataStructIdx
|
(state) => state.addToWordPositionDataStructIdx
|
||||||
);
|
);
|
||||||
const dispatchObject = useCallback((event: string) => {
|
const dispatchObject = useCallback(
|
||||||
|
(event: string) => {
|
||||||
const dispatcherObjects = {
|
const dispatcherObjects = {
|
||||||
fstWord_down: {
|
fstWord_down: {
|
||||||
action: addToWordPositionDataStructIdx,
|
action: addToWordPositionDataStructIdx,
|
||||||
value: 1,
|
value: 1,
|
||||||
},
|
},
|
||||||
|
fstWord_up: {
|
||||||
|
action: addToWordPositionDataStructIdx,
|
||||||
|
value: -1,
|
||||||
|
},
|
||||||
|
sndWord_down: {
|
||||||
|
action: addToWordPositionDataStructIdx,
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
sndWord_up: {
|
sndWord_up: {
|
||||||
action: addToWordPositionDataStructIdx,
|
action: addToWordPositionDataStructIdx,
|
||||||
value: -1,
|
value: -1,
|
||||||
},
|
},
|
||||||
sndWord_down: {
|
thirdWord_down: {
|
||||||
action: addToWordPositionDataStructIdx,
|
action: addToWordPositionDataStructIdx,
|
||||||
value: 1,
|
value: 1,
|
||||||
|
},
|
||||||
}
|
thirdWord_up: {
|
||||||
|
action: addToWordPositionDataStructIdx,
|
||||||
|
value: -1,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
return dispatcherObjects[event as keyof typeof dispatcherObjects];
|
||||||
}, []);
|
},
|
||||||
|
[addToWordPositionDataStructIdx]
|
||||||
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (props.eventState) {
|
if (props.eventState) {
|
||||||
|
|
60
src/store.ts
60
src/store.ts
|
@ -87,11 +87,10 @@ type MiddleRingState = {
|
||||||
|
|
||||||
type MediaWordState = {
|
type MediaWordState = {
|
||||||
wordPositionDataStruct: {
|
wordPositionDataStruct: {
|
||||||
positions: {
|
line: { posX: number; posY: number };
|
||||||
fstWord: { posX: number; posY: number };
|
fstWord: { posX: number; posY: number };
|
||||||
sndWord: { posX: number; posY: number };
|
sndWord: { posX: number; posY: number };
|
||||||
thirdWord: { posX: number; posY: number };
|
thirdWord: { posX: number; posY: number };
|
||||||
};
|
|
||||||
}[];
|
}[];
|
||||||
wordPositionDataStructIdx: number;
|
wordPositionDataStructIdx: number;
|
||||||
words: string[];
|
words: string[];
|
||||||
|
@ -99,12 +98,16 @@ type MediaWordState = {
|
||||||
};
|
};
|
||||||
|
|
||||||
type MediaState = {
|
type MediaState = {
|
||||||
|
mediaDuration: number;
|
||||||
|
mediaTimeElapsed: number;
|
||||||
activeMediaElement: string;
|
activeMediaElement: string;
|
||||||
setActiveMediaElement: (to: string) => void;
|
setActiveMediaElement: (to: string) => void;
|
||||||
lastActiveLeftSideElement: string;
|
lastActiveLeftSideElement: string;
|
||||||
setLastActiveLeftSideElement: (to: string) => void;
|
setLastActiveLeftSideElement: (to: string) => void;
|
||||||
lastActiveRightSideElement: string;
|
lastActiveRightSideElement: string;
|
||||||
setLastActiveRightSideElement: (to: string) => void;
|
setLastActiveRightSideElement: (to: string) => void;
|
||||||
|
setMediaDuration: (to: number) => void;
|
||||||
|
setMediaTimeElapsed: (to: number) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
type TextRendererState = {
|
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,
|
// 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).
|
// you end up on the last active element FROM THAT COLUMN).
|
||||||
// so we store leftColActiveMediaElement as well as rightCol.
|
// so we store leftColActiveMediaElement as well as rightCol.
|
||||||
|
mediaDuration: 0,
|
||||||
|
mediaTimeElapsed: 0,
|
||||||
activeMediaElement: "play",
|
activeMediaElement: "play",
|
||||||
setActiveMediaElement: (to) => set(() => ({ activeMediaElement: to })),
|
setActiveMediaElement: (to) => set(() => ({ activeMediaElement: to })),
|
||||||
lastActiveLeftSideElement: "play",
|
lastActiveLeftSideElement: "play",
|
||||||
|
@ -251,36 +256,75 @@ export const useMediaStore = create<MediaState>((set) => ({
|
||||||
set(() => ({ lastActiveLeftSideElement: to })),
|
set(() => ({ lastActiveLeftSideElement: to })),
|
||||||
setLastActiveRightSideElement: (to) =>
|
setLastActiveRightSideElement: (to) =>
|
||||||
set(() => ({ lastActiveRightSideElement: to })),
|
set(() => ({ lastActiveRightSideElement: to })),
|
||||||
|
setMediaDuration: (to) => set(() => ({ mediaDuration: to })),
|
||||||
|
setMediaTimeElapsed: (to) => set(() => ({ mediaTimeElapsed: to })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useMediaWordStore = create<MediaWordState>((set) => ({
|
export const useMediaWordStore = create<MediaWordState>((set) => ({
|
||||||
words: ["eye", "quiet", "hallucination"],
|
words: ["eye", "quiet", "hallucination"],
|
||||||
wordPositionDataStruct: [
|
wordPositionDataStruct: [
|
||||||
{
|
{
|
||||||
positions: {
|
line: {
|
||||||
|
posX: -2,
|
||||||
|
posY: 2,
|
||||||
|
},
|
||||||
fstWord: { posX: 0, posY: 0 },
|
fstWord: { posX: 0, posY: 0 },
|
||||||
sndWord: { posX: 3, posY: -3 },
|
sndWord: { posX: 3, posY: -3 },
|
||||||
thirdWord: { posX: 3.7, posY: -4.3 },
|
thirdWord: { posX: 3.7, posY: -4.3 },
|
||||||
},
|
},
|
||||||
},
|
|
||||||
{
|
{
|
||||||
positions: {
|
line: {
|
||||||
|
posX: -0.5,
|
||||||
|
posY: 0.5,
|
||||||
|
},
|
||||||
fstWord: { posX: 1.8, posY: -2.5 },
|
fstWord: { posX: 1.8, posY: -2.5 },
|
||||||
sndWord: { posX: 1.5, posY: -1.5 },
|
sndWord: { posX: 1.5, posY: -1.5 },
|
||||||
thirdWord: { posX: 3.3, posY: -3.7 },
|
thirdWord: { posX: 3.3, posY: -3.7 },
|
||||||
},
|
},
|
||||||
},
|
|
||||||
{
|
{
|
||||||
positions: {
|
line: {
|
||||||
|
posX: 1,
|
||||||
|
posY: -1,
|
||||||
|
},
|
||||||
fstWord: { posX: 3.7, posY: -4.3 },
|
fstWord: { posX: 3.7, posY: -4.3 },
|
||||||
sndWord: { posX: 0, posY: 0 },
|
sndWord: { posX: 0, posY: 0 },
|
||||||
thirdWord: { posX: 3, posY: -3 },
|
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,
|
wordPositionDataStructIdx: 0,
|
||||||
addToWordPositionDataStructIdx: (val) =>
|
addToWordPositionDataStructIdx: (val) =>
|
||||||
set((state) => ({
|
set((state) => ({
|
||||||
wordPositionDataStructIdx: state.wordPositionDataStructIdx + val,
|
wordPositionDataStructIdx:
|
||||||
|
state.wordPositionDataStructIdx > 4 ||
|
||||||
|
state.wordPositionDataStructIdx < -4
|
||||||
|
? 0
|
||||||
|
: state.wordPositionDataStructIdx + val,
|
||||||
})),
|
})),
|
||||||
}));
|
}));
|
||||||
|
|
Loading…
Reference in a new issue