create loading scene

src/pages/components/loadingScene.jsx

@@ -0,0 +1,20 @@
+import { useState, useEffect } from 'react';
+import '../../css/global.css';
+
+function LoadingScene() {
+    return (
+        <div style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100vh',
+            fontSize: '24px',
+            color: 'white',
+            backgroundColor: 'black'
+        }}>
+            Loading...
+        </div>
+    );
+}
+
+export default LoadingScene

src/pages/components/playVideo.jsx

@@ -1,9 +1,9 @@
-import '../../css/video.css'
+import '../../css/video.css';
 
-function PlayVideo({ src="hallway_FFF.mp4" })  {
+function PlayVideo({ src = "hallway_FFF.mp4", onVideoReady }) {
     const urlSource = `${import.meta.env.VITE_ASSETS_URL}/${src}`;
 
-    return(
+    return (
         <div className="video-container">
             <video
                 autoPlay
@@ -12,16 +12,19 @@ function PlayVideo({ src="hallway_FFF.mp4" })  {
                 playsInline
                 loop
                 pointerEvents="none"
-                onLoadedData={(e) => {
-                    e.target.play()
-                    console.log("played");
+                onCanPlayThrough={(e) => {
+                    e.target.play();
+                    console.log("Video is ready and played");
+                    if (onVideoReady) {
+                        onVideoReady(); // Call the callback to notify that the video is ready
+                    }
                 }}
             >
-                <source src={urlSource} type="video/mp4"/>
+                <source src={urlSource} type="video/mp4" />
                 Your browser does not support the video tag.
             </video>
         </div>
-    )
+    );
 }
-  
-export default PlayVideo
+
+export default PlayVideo;

src/pages/introductionPage.jsx

@@ -3,9 +3,10 @@ import '../css/global.css'
 import BlackButton from './components/customButton'
 import Animation from './components/animation.jsx';
 import PlayVideo from './components/playVideo.jsx';
+import LoadingScene from './components/loadingScene.jsx';
 
-function IntroductionPage() {
-  return(
+function IntroductionPageData(){
+    return(
   	  <div style={{
         display: 'flex',
         justifyContent: 'center',
@@ -14,25 +15,7 @@ function IntroductionPage() {
         maxWidth:"100vw",
         flexDirection: 'column',
       }}>
-        {/* <div style={{position:"absolute"}}>
-            <Animation src='6_Classroom.zip' animationWidth='100vw'/>
-        </div>
-        <div style={{position:"absolute"}}>
-            <Animation src='5_M_Pie.zip' animationWidth='100vw'/>  
-        </div>
-        <div style={{position:"absolute"}}>
-            <Animation src='4_NPC+hallway.zip' animationWidth='100vw'/>
-        </div>
-        <div style={{position:"absolute"}}>
-            <Animation src='3_M_Patt.zip' animationWidth='100vw'/>
-        </div>
-        <div style={{position:"absolute"}}>
-            <Animation src='2_M_Porsche.zip' animationWidth='100vw'/>
-        </div>
-        <div style={{position:"absolute"}}>
-            <Animation src='1_NPC+pillar.zip' animationWidth='100vw'/>
-        </div> */}
-        <PlayVideo src='hallway_FFF.mp4'/>
+        {/* <PlayVideo src='hallway_FFF.mp4'/> */}
         
         <div style={{
             position: "fixed",
@@ -57,4 +40,25 @@ function IntroductionPage() {
   )
 }
 
+function IntroductionPage() {
+    const [loading, setLoading] = useState(true);
+
+    const handleVideoReady = () => {
+        setLoading(false); // Set loading to false when the video is ready
+    };
+
+    return (
+        <div>
+            {loading ? (
+                <LoadingScene />
+            ) : (
+                <IntroductionPageData />
+            )}
+            <PlayVideo onVideoReady={handleVideoReady} />
+        </div>
+    );
+}
+
+
+
 export default IntroductionPage