From b0e051dfd99ceabfabe7d162ea906f1e38713e1f Mon Sep 17 00:00:00 2001 From: ad044 Date: Sun, 25 Oct 2020 18:33:23 +0400 Subject: [PATCH] audio visualizer done, reorganized stuff --- src/App.tsx | 14 +-- src/components/{ => MainScene}/BlueOrb.tsx | 32 +++---- .../{ => MainScene}/CyanCrystal.tsx | 0 src/components/{ => MainScene}/GrayPlanes.tsx | 2 +- src/components/{ => MainScene}/GrayRing.tsx | 6 +- src/components/{ => MainScene}/HUD.tsx | 16 ++-- src/components/{ => MainScene}/Lain.tsx | 16 ++-- src/components/{ => MainScene}/Level.tsx | 0 src/components/{ => MainScene}/Lights.tsx | 0 src/components/{ => MainScene}/MiddleRing.tsx | 4 +- .../{ => MainScene}/OrthoCamera.tsx | 4 +- src/components/{ => MainScene}/PurpleRing.tsx | 6 +- src/components/{ => MainScene}/Site.tsx | 8 +- src/components/{ => MainScene}/Starfield.tsx | 2 +- src/components/{ => MainScene}/YellowOrb.tsx | 4 +- .../AudioVisualizer/AudioVisualizer.tsx | 88 ++++++++++++++----- .../AudioVisualizer/AudioVisualizerColumn.tsx | 56 +++++------- .../MediaScene/{RightSide => }/Lof.tsx | 6 +- .../TopRightHUD => }/MediaLoadingBar.tsx | 20 ++--- src/components/MediaScene/MediaPlayer.tsx | 13 ++- src/components/MediaScene/MediaScene.tsx | 29 ------ .../MediaScene/NodeNameContainer.tsx | 19 ++++ .../RightSide/TopRightHUD/TopRightHUD.tsx | 23 ----- .../{ => Selectables}/LeftSide/Cube.tsx | 4 +- .../{ => Selectables}/LeftSide/LeftSide.tsx | 0 .../LeftSide/TriangularPrism.tsx | 4 +- .../{ => Selectables}/RightSide/RightSide.tsx | 6 +- .../{ => Selectables}/RightSide/Word.tsx | 4 +- .../StateManagers/EventStateManager.tsx | 42 ++++----- .../BlueOrbHUDManager.tsx} | 10 +-- .../BlueOrbManager.tsx} | 10 +-- .../GreenTextManager.tsx} | 12 +-- .../LainManager.tsx} | 10 +-- .../MainYellowTextManager.tsx} | 12 +-- .../MiddleRingManager.tsx} | 8 +- .../SiteManager.tsx} | 10 +-- ...ager.tsx => ActiveMediaElementManager.tsx} | 4 +- ...Manager.tsx => MediaYellowTextManager.tsx} | 7 +- ...iaWordStateManager.tsx => WordManager.tsx} | 4 +- src/{components => scenes}/MainScene.tsx | 22 ++--- src/scenes/MediaScene.tsx | 30 +++++++ src/store.ts | 9 -- 42 files changed, 294 insertions(+), 282 deletions(-) rename src/components/{ => MainScene}/BlueOrb.tsx (87%) rename src/components/{ => MainScene}/CyanCrystal.tsx (100%) rename src/components/{ => MainScene}/GrayPlanes.tsx (96%) rename src/components/{ => MainScene}/GrayRing.tsx (96%) rename src/components/{ => MainScene}/HUD.tsx (87%) rename src/components/{ => MainScene}/Lain.tsx (84%) rename src/components/{ => MainScene}/Level.tsx (100%) rename src/components/{ => MainScene}/Lights.tsx (100%) rename src/components/{ => MainScene}/MiddleRing.tsx (98%) rename src/components/{ => MainScene}/OrthoCamera.tsx (89%) rename src/components/{ => MainScene}/PurpleRing.tsx (97%) rename src/components/{ => MainScene}/Site.tsx (91%) rename src/components/{ => MainScene}/Starfield.tsx (99%) rename src/components/{ => MainScene}/YellowOrb.tsx (97%) rename src/components/MediaScene/{RightSide => }/Lof.tsx (73%) rename src/components/MediaScene/{RightSide/TopRightHUD => }/MediaLoadingBar.tsx (85%) delete mode 100644 src/components/MediaScene/MediaScene.tsx create mode 100644 src/components/MediaScene/NodeNameContainer.tsx delete mode 100644 src/components/MediaScene/RightSide/TopRightHUD/TopRightHUD.tsx rename src/components/MediaScene/{ => Selectables}/LeftSide/Cube.tsx (86%) rename src/components/MediaScene/{ => Selectables}/LeftSide/LeftSide.tsx (100%) rename src/components/MediaScene/{ => Selectables}/LeftSide/TriangularPrism.tsx (92%) rename src/components/MediaScene/{ => Selectables}/RightSide/RightSide.tsx (94%) rename src/components/MediaScene/{ => Selectables}/RightSide/Word.tsx (89%) rename src/components/StateManagers/{BlueOrbHUDStateManager.tsx => MainScene/BlueOrbHUDManager.tsx} (87%) rename src/components/StateManagers/{BlueOrbStateManager.tsx => MainScene/BlueOrbManager.tsx} (92%) rename src/components/StateManagers/{GreenTextStateManager.tsx => MainScene/GreenTextManager.tsx} (85%) rename src/components/StateManagers/{LainStateManager.tsx => MainScene/LainManager.tsx} (85%) rename src/components/StateManagers/{YellowTextStateManager.tsx => MainScene/MainYellowTextManager.tsx} (93%) rename src/components/StateManagers/{MiddleRingStateManager.tsx => MainScene/MiddleRingManager.tsx} (96%) rename src/components/StateManagers/{SiteStateManager.tsx => MainScene/SiteManager.tsx} (85%) rename src/components/StateManagers/MediaScene/{ActiveMediaElementStateManager.tsx => ActiveMediaElementManager.tsx} (96%) rename src/components/StateManagers/MediaScene/{MediaYellowTextStateManager.tsx => MediaYellowTextManager.tsx} (91%) rename src/components/StateManagers/MediaScene/{MediaWordStateManager.tsx => WordManager.tsx} (93%) rename src/{components => scenes}/MainScene.tsx (73%) create mode 100644 src/scenes/MediaScene.tsx diff --git a/src/App.tsx b/src/App.tsx index 3ca2dff..f297d4e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,11 @@ import React, { useEffect, useState, Suspense } from "react"; -import MainScene from "./components/MainScene"; +import MainScene from "./scenes/MainScene"; import "./static/css/hub.css"; import "./static/css/main.css"; import { Canvas } from "react-three-fiber"; import Boot from "./components/Boot"; import MediaPlayer from "./components/MediaScene/MediaPlayer"; -import MediaScene from "./components/MediaScene/MediaScene"; +import MediaScene from "./scenes/MediaScene"; import EventStateManager from "./components/StateManagers/EventStateManager"; const App = () => { @@ -26,13 +26,13 @@ const App = () => { - - - - {/**/} + {/**/} + {/* */} + {/**/} + - + {/**/} ); }; diff --git a/src/components/BlueOrb.tsx b/src/components/MainScene/BlueOrb.tsx similarity index 87% rename from src/components/BlueOrb.tsx rename to src/components/MainScene/BlueOrb.tsx index 7e7aa91..3d0baec 100644 --- a/src/components/BlueOrb.tsx +++ b/src/components/MainScene/BlueOrb.tsx @@ -2,22 +2,22 @@ import React, { memo, useEffect, useMemo, useRef } from "react"; import { useFrame, useLoader } from "react-three-fiber"; import { useSpring, a } from "@react-spring/three"; import * as THREE from "three"; -import Cou from "../static/sprite/Cou.png"; -import CouActive from "../static/sprite/Cou_active.png"; -import Dc from "../static/sprite/Dc.png"; -import DcActive from "../static/sprite/Dc_active.png"; -import SSkn from "../static/sprite/SSkn.png"; -import SSKnActive from "../static/sprite/SSkn_active.png"; -import Tda from "../static/sprite/Tda.png"; -import TdaActive from "../static/sprite/Tda_active.png"; -import Dia from "../static/sprite/Dia.png"; -import DiaActive from "../static/sprite/Dia_active.png"; -import Lda from "../static/sprite/Lda.png"; -import LdaActive from "../static/sprite/Lda_active.png"; -import MULTI from "../static/sprite/MULTI.png"; -import MULTIActive from "../static/sprite/MULTI_active.png"; -import level_y_values from "../resources/level_y_values.json"; -import { useBlueOrbStore } from "../store"; +import Cou from "../../static/sprite/Cou.png"; +import CouActive from "../../static/sprite/Cou_active.png"; +import Dc from "../../static/sprite/Dc.png"; +import DcActive from "../../static/sprite/Dc_active.png"; +import SSkn from "../../static/sprite/SSkn.png"; +import SSKnActive from "../../static/sprite/SSkn_active.png"; +import Tda from "../../static/sprite/Tda.png"; +import TdaActive from "../../static/sprite/Tda_active.png"; +import Dia from "../../static/sprite/Dia.png"; +import DiaActive from "../../static/sprite/Dia_active.png"; +import Lda from "../../static/sprite/Lda.png"; +import LdaActive from "../../static/sprite/Lda_active.png"; +import MULTI from "../../static/sprite/MULTI.png"; +import MULTIActive from "../../static/sprite/MULTI_active.png"; +import level_y_values from "../../resources/level_y_values.json"; +import { useBlueOrbStore } from "../../store"; type BlueOrbContructorProps = { sprite: string; diff --git a/src/components/CyanCrystal.tsx b/src/components/MainScene/CyanCrystal.tsx similarity index 100% rename from src/components/CyanCrystal.tsx rename to src/components/MainScene/CyanCrystal.tsx diff --git a/src/components/GrayPlanes.tsx b/src/components/MainScene/GrayPlanes.tsx similarity index 96% rename from src/components/GrayPlanes.tsx rename to src/components/MainScene/GrayPlanes.tsx index a726a08..b48c46a 100644 --- a/src/components/GrayPlanes.tsx +++ b/src/components/MainScene/GrayPlanes.tsx @@ -1,7 +1,7 @@ import React, { createRef, memo, RefObject, useRef } from "react"; import * as THREE from "three"; import { useFrame } from "react-three-fiber"; -import { useGrayPlanesStore } from "../store"; +import { useGrayPlanesStore } from "../../store"; const GrayPlanes = memo(() => { const grayPlaneGroupRef = useRef(); diff --git a/src/components/GrayRing.tsx b/src/components/MainScene/GrayRing.tsx similarity index 96% rename from src/components/GrayRing.tsx rename to src/components/MainScene/GrayRing.tsx index 627aee4..9e30606 100644 --- a/src/components/GrayRing.tsx +++ b/src/components/MainScene/GrayRing.tsx @@ -1,8 +1,8 @@ import React, { memo } from "react"; import * as THREE from "three"; -import lofTexture from "../static/sprite/lof.png"; -import holeTexture from "../static/sprite/hole.png"; -import lifeTexture from "../static/sprite/life.png"; +import lofTexture from "../../static/sprite/gray_ring_lof.png"; +import holeTexture from "../../static/sprite/hole.png"; +import lifeTexture from "../../static/sprite/life.png"; import { useLoader } from "react-three-fiber"; type GrayRingProps = { diff --git a/src/components/HUD.tsx b/src/components/MainScene/HUD.tsx similarity index 87% rename from src/components/HUD.tsx rename to src/components/MainScene/HUD.tsx index 5a4b182..142dae7 100644 --- a/src/components/HUD.tsx +++ b/src/components/MainScene/HUD.tsx @@ -1,15 +1,15 @@ import React, { memo } from "react"; import { useLoader } from "react-three-fiber"; import * as THREE from "three"; -import bigHud from "../static/sprite/big_hud.png"; -import bigHudMirrored from "../static/sprite/big_hud_mirrored.png"; -import longHud from "../static/sprite/long_hud.png"; -import longHudMirrored from "../static/sprite/long_hud_mirrored.png"; -import boringHud from "../static/sprite/long_hud_boring.png"; -import boringHudMirrored from "../static/sprite/long_hud_boring_mirrored.png"; +import bigHud from "../../static/sprite/big_hud.png"; +import bigHudMirrored from "../../static/sprite/big_hud_mirrored.png"; +import longHud from "../../static/sprite/long_hud.png"; +import longHudMirrored from "../../static/sprite/long_hud_mirrored.png"; +import boringHud from "../../static/sprite/long_hud_boring.png"; +import boringHudMirrored from "../../static/sprite/long_hud_boring_mirrored.png"; import { a, useSpring } from "@react-spring/three"; -import { useBlueOrbStore } from "../store"; -import blue_orb_huds from "../resources/blue_orb_huds.json"; +import { useBlueOrbStore } from "../../store"; +import blue_orb_huds from "../../resources/blue_orb_huds.json"; export type HUDElementProps = { hudVisibility: boolean; diff --git a/src/components/Lain.tsx b/src/components/MainScene/Lain.tsx similarity index 84% rename from src/components/Lain.tsx rename to src/components/MainScene/Lain.tsx index d2fbf7b..4d6f8a1 100644 --- a/src/components/Lain.tsx +++ b/src/components/MainScene/Lain.tsx @@ -2,14 +2,14 @@ import React, { Suspense, useState } from "react"; import { useFrame, useLoader } from "react-three-fiber"; import * as THREE from "three"; import { PlainSingularAnimator } from "three-plain-animator/lib/plain-singular-animator"; -import moveDownSpriteSheet from "../static/sprite/jump_down.png"; -import moveUpSpriteSheet from "../static/sprite/jump_up.png"; -import moveLeftSpriteSheet from "../static/sprite/move_left.png"; -import moveRightSpriteSheet from "../static/sprite/move_right.png"; -import standingSpriteSheet from "../static/sprite/standing.png"; -import introSpriteSheet from "../static/sprite/intro.png"; -import throwBlueOrbSpriteSheet from "../static/sprite/throw_blue_orb.png"; -import { useLainStore } from "../store"; +import moveDownSpriteSheet from "../../static/sprite/jump_down.png"; +import moveUpSpriteSheet from "../../static/sprite/jump_up.png"; +import moveLeftSpriteSheet from "../../static/sprite/move_left.png"; +import moveRightSpriteSheet from "../../static/sprite/move_right.png"; +import standingSpriteSheet from "../../static/sprite/standing.png"; +import introSpriteSheet from "../../static/sprite/intro.png"; +import throwBlueOrbSpriteSheet from "../../static/sprite/throw_blue_orb.png"; +import { useLainStore } from "../../store"; type LainConstructorProps = { sprite: string; diff --git a/src/components/Level.tsx b/src/components/MainScene/Level.tsx similarity index 100% rename from src/components/Level.tsx rename to src/components/MainScene/Level.tsx diff --git a/src/components/Lights.tsx b/src/components/MainScene/Lights.tsx similarity index 100% rename from src/components/Lights.tsx rename to src/components/MainScene/Lights.tsx diff --git a/src/components/MiddleRing.tsx b/src/components/MainScene/MiddleRing.tsx similarity index 98% rename from src/components/MiddleRing.tsx rename to src/components/MainScene/MiddleRing.tsx index 77c4eaa..af53dcd 100644 --- a/src/components/MiddleRing.tsx +++ b/src/components/MainScene/MiddleRing.tsx @@ -1,9 +1,9 @@ import React, { useMemo, useRef } from "react"; import { useFrame, useLoader } from "react-three-fiber"; -import middleRingTexture from "../static/sprite/middle_ring_tex.png"; +import middleRingTexture from "../../static/sprite/middle_ring_tex.png"; import * as THREE from "three"; import { a, useSpring } from "@react-spring/three"; -import { useMiddleRingStore } from "../store"; +import { useMiddleRingStore } from "../../store"; const MiddleRing = () => { const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture); diff --git a/src/components/OrthoCamera.tsx b/src/components/MainScene/OrthoCamera.tsx similarity index 89% rename from src/components/OrthoCamera.tsx rename to src/components/MainScene/OrthoCamera.tsx index a224f7f..c4477d2 100644 --- a/src/components/OrthoCamera.tsx +++ b/src/components/MainScene/OrthoCamera.tsx @@ -3,8 +3,8 @@ import { useFrame, useThree } from "react-three-fiber"; import { Scene } from "three"; import HUD from "./HUD"; import YellowOrb from "./YellowOrb"; -import { useBlueOrbStore } from "../store"; -import TextRenderer from "./TextRenderer/TextRenderer"; +import { useBlueOrbStore } from "../../store"; +import TextRenderer from "../TextRenderer/TextRenderer"; const OrthoCamera = memo(() => { const { gl, scene, camera } = useThree(); diff --git a/src/components/PurpleRing.tsx b/src/components/MainScene/PurpleRing.tsx similarity index 97% rename from src/components/PurpleRing.tsx rename to src/components/MainScene/PurpleRing.tsx index 2975bdf..7e57d07 100644 --- a/src/components/PurpleRing.tsx +++ b/src/components/MainScene/PurpleRing.tsx @@ -1,9 +1,9 @@ import React, { memo, useRef } from "react"; import { useFrame, useLoader } from "react-three-fiber"; import * as THREE from "three"; -import siteATex from "../static/sprite/site_a.png"; -import siteBTex from "../static/sprite/site_b.png"; -import siteLevelTex from "../static/sprite/site_levels.png"; +import siteATex from "../../static/sprite/site_a.png"; +import siteBTex from "../../static/sprite/site_b.png"; +import siteLevelTex from "../../static/sprite/site_levels.png"; type PurpleRingProps = { purpleRingPosY: number; diff --git a/src/components/Site.tsx b/src/components/MainScene/Site.tsx similarity index 91% rename from src/components/Site.tsx rename to src/components/MainScene/Site.tsx index bbe0ee3..98e0ca5 100644 --- a/src/components/Site.tsx +++ b/src/components/MainScene/Site.tsx @@ -1,11 +1,11 @@ import React, { memo, Suspense } from "react"; -import site_a from "../resources/site_a.json"; +import site_a from "../../resources/site_a.json"; import Level from "./Level"; -import level_y_values from "../resources/level_y_values.json"; -import blue_orb_positions from "../resources/blue_orb_positions.json"; +import level_y_values from "../../resources/level_y_values.json"; +import blue_orb_positions from "../../resources/blue_orb_positions.json"; import BlueOrb from "./BlueOrb"; import { a, useSpring } from "@react-spring/three"; -import { useBlueOrbStore, useLevelStore, useSiteStore } from "../store"; +import { useBlueOrbStore, useLevelStore, useSiteStore } from "../../store"; const Site = memo(() => { const activeBlueOrbId = useBlueOrbStore((state) => state.blueOrbId); diff --git a/src/components/Starfield.tsx b/src/components/MainScene/Starfield.tsx similarity index 99% rename from src/components/Starfield.tsx rename to src/components/MainScene/Starfield.tsx index 7f24c35..28080ab 100644 --- a/src/components/Starfield.tsx +++ b/src/components/MainScene/Starfield.tsx @@ -2,7 +2,7 @@ import { a, useSpring } from "@react-spring/three"; import React, { createRef, memo, RefObject, useMemo, useRef } from "react"; import { useFrame } from "react-three-fiber"; import * as THREE from "three"; -import { useStarfieldStore } from "../store"; +import { useStarfieldStore } from "../../store"; type StarRefsAndInitialPoses = [ React.MutableRefObject[]>, diff --git a/src/components/YellowOrb.tsx b/src/components/MainScene/YellowOrb.tsx similarity index 97% rename from src/components/YellowOrb.tsx rename to src/components/MainScene/YellowOrb.tsx index 4d7d8c5..bc2d0a2 100644 --- a/src/components/YellowOrb.tsx +++ b/src/components/MainScene/YellowOrb.tsx @@ -1,8 +1,8 @@ import React, { memo, useRef, useState } from "react"; import { useFrame, useLoader } from "react-three-fiber"; import * as THREE from "three"; -import orbSprite from "../static/sprite/orb.png"; -import { useYellowOrbStore } from "../store"; +import orbSprite from "../../static/sprite/orb.png"; +import { useYellowOrbStore } from "../../store"; // initialize outside the component otherwise it gets overwritten when it rerenders let orbIdx = 0; diff --git a/src/components/MediaScene/AudioVisualizer/AudioVisualizer.tsx b/src/components/MediaScene/AudioVisualizer/AudioVisualizer.tsx index 117397b..500dcb3 100644 --- a/src/components/MediaScene/AudioVisualizer/AudioVisualizer.tsx +++ b/src/components/MediaScene/AudioVisualizer/AudioVisualizer.tsx @@ -1,11 +1,9 @@ -import React, { useMemo, useRef, useState } from "react"; +import React, { createRef, MutableRefObject, useEffect, useMemo } from "react"; import * as THREE from "three"; import { useFrame } from "react-three-fiber"; import AudioVisualizerColumn from "./AudioVisualizerColumn"; -import { useAudioVisualizerStore } from "../../../store"; const AudioVisualizer = () => { - const setFrequency = useAudioVisualizerStore((state) => state.setFrequency); const analyser = useMemo(() => { const listener = new THREE.AudioListener(); @@ -17,28 +15,78 @@ const AudioVisualizer = () => { return new THREE.AudioAnalyser(audio, 2048); }, []); + const columnRefs = useMemo(() => { + let ref1, ref2, ref3, ref4; + return Array.from({ length: 15 }, () => [ + (ref1 = createRef()), + (ref2 = createRef()), + (ref3 = createRef()), + (ref4 = createRef()), + ]); + }, []); + useFrame(() => { - if (!(document.getElementById("media") as HTMLMediaElement).paused) - setFrequency(analyser.getFrequencyData()); + const frequencyData = analyser.getFrequencyData(); + + columnRefs.forEach((refArray, idx) => { + const ref1 = refArray[0]; + const ref2 = refArray[1]; + const ref3 = refArray[2]; + const ref4 = refArray[3]; + + // we up it by 1.2 just so it becomes a bit more noticable, otherwise + // the visualizer is a bit too "calm" + const currentFrequency = frequencyData[32 * idx] * 1.2; + + switch (true) { + case currentFrequency >= 255: + ref1.current!.visible = true; + ref2.current!.visible = true; + ref3.current!.visible = true; + ref4.current!.visible = true; + break; + case currentFrequency >= 192: + ref1.current!.visible = true; + ref2.current!.visible = true; + ref3.current!.visible = true; + ref4.current!.visible = false; + break; + case currentFrequency >= 128: + ref1.current!.visible = true; + ref2.current!.visible = true; + ref3.current!.visible = false; + ref4.current!.visible = false; + break; + case currentFrequency >= 64: + ref1.current!.visible = true; + ref2.current!.visible = false; + ref3.current!.visible = false; + ref4.current!.visible = false; + break; + default: + ref1.current!.visible = false; + ref2.current!.visible = false; + ref3.current!.visible = false; + ref4.current!.visible = false; + break; + } + }); }); return ( <> - - - - - - - - - - - - - - - + {columnRefs.map((refArray, idx: number) => ( + , + ref2: refArray[1] as MutableRefObject, + ref3: refArray[2] as MutableRefObject, + ref4: refArray[3] as MutableRefObject, + }} + key={idx} + /> + ))} ); }; diff --git a/src/components/MediaScene/AudioVisualizer/AudioVisualizerColumn.tsx b/src/components/MediaScene/AudioVisualizer/AudioVisualizerColumn.tsx index 53915d9..5b0544e 100644 --- a/src/components/MediaScene/AudioVisualizer/AudioVisualizerColumn.tsx +++ b/src/components/MediaScene/AudioVisualizer/AudioVisualizerColumn.tsx @@ -1,15 +1,17 @@ -import React, { useEffect, useMemo, useRef, useState } from "react"; +import React, { MutableRefObject } from "react"; import audioVisualizerOrangeOrb from "../../../static/sprite/audio_visual_orb_orange.png"; import audioVisualizerYellowOrb from "../../../static/sprite/audio_visual_orb_yellow.png"; import { useLoader } from "react-three-fiber"; import * as THREE from "three"; -import { useAudioVisualizerStore, useBlueOrbStore } from "../../../store"; -import { useSpring, a } from "@react-spring/three"; -import level_y_values from "../../../resources/level_y_values.json"; type AudioVisualizerColumnProps = { position: number[]; - idx: number; + refs: { + ref1: MutableRefObject; + ref2: MutableRefObject; + ref3: MutableRefObject; + ref4: MutableRefObject; + }; }; const AudioVisualizerColumn = (props: AudioVisualizerColumnProps) => { @@ -22,33 +24,15 @@ const AudioVisualizerColumn = (props: AudioVisualizerColumnProps) => { audioVisualizerYellowOrb ); - const [ - { fstOrbVisible, sndOrbVisible, thirdOrbVisible, fourthOrbVisible }, - set, - ] = useSpring(() => ({ - fstOrbVisible: false, - sndOrbVisible: false, - thirdOrbVisible: false, - fourthOrbVisible: false, - config: { duration: 800 }, - })); - - useEffect(() => { - useAudioVisualizerStore.subscribe(set, (state) => ({ - fstOrbVisible: state.frequency[props.idx * 32] >= 64, - sndOrbVisible: state.frequency[props.idx * 32] >= 128, - thirdOrbVisible: state.frequency[props.idx * 32] >= 192, - fourthOrbVisible: state.frequency[props.idx * 32] >= 255, - })); - }, [props.position, set]); + const { ref1, ref2, ref3, ref4 } = props.refs; return ( - { depthTest={false} /> - - + { depthTest={false} /> - + - { depthTest={false} /> - - + { depthTest={false} /> - + ); }; diff --git a/src/components/MediaScene/RightSide/Lof.tsx b/src/components/MediaScene/Lof.tsx similarity index 73% rename from src/components/MediaScene/RightSide/Lof.tsx rename to src/components/MediaScene/Lof.tsx index f839a98..3798a68 100644 --- a/src/components/MediaScene/RightSide/Lof.tsx +++ b/src/components/MediaScene/Lof.tsx @@ -1,9 +1,9 @@ import React, { useMemo, useState } from "react"; import * as THREE from "three"; -import wordInactiveTexture from "../../../static/sprite/word_background.png"; -import wordActiveTexture from "../../../static/sprite/word_background_active.png"; +import wordInactiveTexture from "../../static/sprite/word_background.png"; +import wordActiveTexture from "../../static/sprite/word_background_active.png"; import { useFrame, useLoader } from "react-three-fiber"; -import lofSpriteSheet from "../../../static/sprite/lof_spritesheet.png"; +import lofSpriteSheet from "../../static/sprite/lof_spritesheet.png"; import { PlainAnimator } from "three-plain-animator/lib/plain-animator"; const Lof = () => { diff --git a/src/components/MediaScene/RightSide/TopRightHUD/MediaLoadingBar.tsx b/src/components/MediaScene/MediaLoadingBar.tsx similarity index 85% rename from src/components/MediaScene/RightSide/TopRightHUD/MediaLoadingBar.tsx rename to src/components/MediaScene/MediaLoadingBar.tsx index a8ce259..44bc83d 100644 --- a/src/components/MediaScene/RightSide/TopRightHUD/MediaLoadingBar.tsx +++ b/src/components/MediaScene/MediaLoadingBar.tsx @@ -1,12 +1,12 @@ import React, { useMemo, useRef } from "react"; -import { useMediaStore } from "../../../../store"; -import mediaLoadingBarContainer from "../../../../static/sprite/media_loading_bar_container.png"; -import mediaLoadingBar from "../../../../static/sprite/media_loading_bar.png"; -import mediaLoadingBar10Perc from "../../../../static/sprite/media_loading_bar_10perc.png"; -import mediaLoadingBar20Perc from "../../../../static/sprite/media_loading_bar_20perc.png"; -import mediaLoadingBar30Perc from "../../../../static/sprite/media_loading_bar_30perc.png"; -import mediaLoadingBar40Perc from "../../../../static/sprite/media_loading_bar_40perc.png"; -import mediaLoadingBar50Perc from "../../../../static/sprite/media_loading_bar_50perc.png"; +import { useMediaStore } from "../../store"; +import mediaLoadingBarContainer from "../../static/sprite/media_loading_bar_container.png"; +import mediaLoadingBar from "../../static/sprite/media_loading_bar.png"; +import mediaLoadingBar10Perc from "../../static/sprite/media_loading_bar_10perc.png"; +import mediaLoadingBar20Perc from "../../static/sprite/media_loading_bar_20perc.png"; +import mediaLoadingBar30Perc from "../../static/sprite/media_loading_bar_30perc.png"; +import mediaLoadingBar40Perc from "../../static/sprite/media_loading_bar_40perc.png"; +import mediaLoadingBar50Perc from "../../static/sprite/media_loading_bar_50perc.png"; import { useFrame, useLoader } from "react-three-fiber"; import * as THREE from "three"; @@ -126,12 +126,12 @@ const MediaLoadingBar = () => { 90: { scaleX: 1.5, texture: mediaLoadingBarTex, - offsetX: 3.8, + offsetX: 3.65, }, 95: { scaleX: 1.5, texture: mediaLoadingBarTex, - offsetX: 3.95, + offsetX: 3.85, }, 100: { scaleX: 1.5, diff --git a/src/components/MediaScene/MediaPlayer.tsx b/src/components/MediaScene/MediaPlayer.tsx index 0c02abb..b494765 100644 --- a/src/components/MediaScene/MediaPlayer.tsx +++ b/src/components/MediaScene/MediaPlayer.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useRef } from "react"; +import React, { createRef, useCallback, useRef } from "react"; import test from "../../static/movie/LAIN01.XA[18].ogg"; import { useMediaStore } from "../../store"; @@ -8,12 +8,13 @@ const MediaPlayer = () => { ); const requestRef = useRef(); + const videoRef = createRef(); const updateTime = useCallback(() => { (requestRef.current as any) = requestAnimationFrame(updateTime); - if (t.current) { - const timeElapsed = t.current.getCurrentTime(); - const duration = t.current.getDuration(); + if (videoRef.current) { + const timeElapsed = videoRef.current.currentTime; + const duration = videoRef.current.duration; const percentageElapsed = Math.floor((timeElapsed / duration) * 100); if (percentageElapsed % 5 === 0) { @@ -27,10 +28,8 @@ const MediaPlayer = () => { return () => cancelAnimationFrame(requestRef.current as any); }, [updateTime]); - const t = useRef(); - return ( -