diff --git a/src/App.tsx b/src/App.tsx index c07a2f8..595ee53 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,7 +5,7 @@ import { Canvas } from "react-three-fiber"; import MediaPlayer from "./components/MediaScene/MediaPlayer"; import MediaScene from "./scenes/MediaScene"; import EventManager from "./core/StateManagers/EventManager"; -import { useSceneStore } from "./store"; +import { useMediaStore, useSceneStore } from "./store"; import GateScene from "./scenes/GateScene"; import BootScene from "./scenes/BootScene"; import SSknScene from "./scenes/SSknScene"; @@ -45,7 +45,7 @@ const App = () => { - {/**/} + ); }; diff --git a/src/components/MainScene/SyncedComponents/Site.tsx b/src/components/MainScene/SyncedComponents/Site.tsx index 381aa3b..92a930d 100644 --- a/src/components/MainScene/SyncedComponents/Site.tsx +++ b/src/components/MainScene/SyncedComponents/Site.tsx @@ -62,8 +62,8 @@ const Site = (props: SiteProps) => { posZ: 0, rotX: 0, from: { - posZ: props.shouldIntro ? -10 : 0, - rotX: props.shouldIntro ? Math.PI / 2 : 0, + posZ: -10, + rotX: Math.PI / 2, }, config: { duration: 3400 }, }); @@ -81,8 +81,8 @@ const Site = (props: SiteProps) => { return ( { const [mediaSource, setMediaSource] = useState(); @@ -40,6 +44,17 @@ const MediaPlayer = () => { currentSite, ]); + // end scene specific stuff + const endMediaPlayedCount = useEndSceneStore( + (state) => state.mediaPlayedCount + ); + const incrementEndMediaPlayedCount = useEndSceneStore( + (state) => state.incrementMediaPlayedCount + ); + const resetEndMediaPlayedCount = useEndSceneStore( + (state) => state.resetMediaPlayedCount + ); + const updateTime = useCallback(() => { (requestRef.current as any) = requestAnimationFrame(updateTime); if (videoRef.current) { @@ -51,13 +66,18 @@ const MediaPlayer = () => { setPercentageElapsed(percentageElapsed); if (percentageElapsed === 100) { videoRef.current.currentTime = 0; - if ( - (siteData as SiteType)[activeLevel][activeNodeId] - .triggers_final_video === 1 - ) { - setScene("end"); + if (currentScene === "end") { + incrementEndMediaPlayedCount(); } else { - videoRef.current.pause(); + if ( + (siteData as SiteType)[activeLevel][activeNodeId] + .triggers_final_video === 1 + ) { + resetEndMediaPlayedCount(); + setScene("end"); + } else { + videoRef.current.pause(); + } } } } @@ -65,6 +85,9 @@ const MediaPlayer = () => { }, [ activeLevel, activeNodeId, + currentScene, + incrementEndMediaPlayedCount, + resetEndMediaPlayedCount, setPercentageElapsed, setScene, siteData, @@ -79,13 +102,29 @@ const MediaPlayer = () => { useEffect(() => { if (currentScene === "end") { - import("../../static/movie/b/ENDROLL1.STR[0].webm").then((media) => { - setMediaSource(media.default); + if (endMediaPlayedCount === 0) { + setMediaSource(endroll); if (videoRef.current) { videoRef.current.load(); - videoRef.current.play(); + videoRef.current.play().catch((e) => { + console.log(e); + }); } - }); + } else if (endMediaPlayedCount === 1) { + setMediaSource(xa0001); + if (videoRef.current) { + videoRef.current.load(); + } + } else if (endMediaPlayedCount === 2) { + console.log('s') + setMediaSource(xa0006); + if (videoRef.current) { + videoRef.current.load(); + // videoRef.current.play().catch((e) => { + // console.log(e); + // }); + } + } } else if (currentScene === "media" || currentScene === "tak") { const nodeMedia = (siteData as SiteType)[activeLevel][activeNodeId] .media_file; @@ -114,6 +153,7 @@ const MediaPlayer = () => { activeNodeId, currentScene, currentSite, + endMediaPlayedCount, siteData, videoRef, ]); @@ -130,8 +170,8 @@ const MediaPlayer = () => { ? "block" : "none", }} + src={mediaSource} > - ); diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts index 23148b6..aa39d03 100644 --- a/src/react-app-env.d.ts +++ b/src/react-app-env.d.ts @@ -85,6 +85,11 @@ declare module "*.mp3" { export default src; } +declare module '*.mp4' { + const src: string; + export default src; +} + declare module "*.ogg" { const src: string; export default src; diff --git a/src/scenes/EndScene.tsx b/src/scenes/EndScene.tsx index 0855acd..9c253ae 100644 --- a/src/scenes/EndScene.tsx +++ b/src/scenes/EndScene.tsx @@ -1,11 +1,15 @@ -import React, { useRef, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import * as THREE from "three"; import { useFrame } from "react-three-fiber"; import EndCylinder from "../components/EndScene/EndCylinder"; import EndSphere from "../components/EndScene/EndSphere"; import LainSpeak from "../components/LainSpeak"; - +import { useEndSceneStore, useMediaStore } from "../store"; const EndScene = () => { + const setAudioAnalyser = useMediaStore((state) => state.setAudioAnalyser); + + const mediaPlayedCount = useEndSceneStore((state) => state.mediaPlayedCount); + const mainCylinderRef = useRef(); useFrame(() => { @@ -17,7 +21,31 @@ const EndScene = () => { const [isIntro, setIsIntro] = useState(true); const [isOutro, setIsOutro] = useState(false); - return ( + useEffect(() => { + if (mediaPlayedCount === 1) { + setTimeout(() => { + const mediaElement = document.getElementById( + "media" + ) as HTMLMediaElement; + + const listener = new THREE.AudioListener(); + const audio = new THREE.Audio(listener); + + audio.setMediaElementSource(mediaElement); + + setAudioAnalyser(new THREE.AudioAnalyser(audio, 2048)); + + if (mediaElement) { + mediaElement.play(); + setIsIntro(false); + } + }, 3800); + } else if (mediaPlayedCount > 1) { + setIsOutro(true); + } + }, [mediaPlayedCount, setAudioAnalyser]); + + return mediaPlayedCount > 0 ? ( <> @@ -32,6 +60,8 @@ const EndScene = () => { + ) : ( + <> ); }; diff --git a/src/store.ts b/src/store.ts index b035e65..c2ad30b 100644 --- a/src/store.ts +++ b/src/store.ts @@ -4,6 +4,12 @@ import * as THREE from "three"; import authorize_user_letters from "./resources/authorize_user_letters.json"; import game_progress from "./resources/initial_progress.json"; +type EndState = { + mediaPlayedCount: number; + incrementMediaPlayedCount: () => void; + resetMediaPlayedCount: () => void; +}; + type SiteSaveState = { a: { activeNodeId: string; @@ -585,3 +591,10 @@ export const useSiteSaveStore = create( }) ) ); + +export const useEndSceneStore = create((set) => ({ + mediaPlayedCount: 0, + incrementMediaPlayedCount: () => + set((state) => ({ mediaPlayedCount: state.mediaPlayedCount + 1 })), + resetMediaPlayedCount: () => set(() => ({ mediaPlayedCount: 0 })), +}));