Add loading, sounds and new model

Author: riwaht

package-lock.json

@@ -13,12 +13,15 @@
     "deploy": "gh-pages -d dist"
   },
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@react-three/drei": "^9.114.0",
     "@react-three/fiber": "^8.16.6",
     "@vercel/analytics": "^1.3.1",
     "@vercel/speed-insights": "^1.0.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.28.0",
     "three": "^0.164.1"
   },
   "devDependencies": {

package.json

@@ -0,0 +1,93 @@
+.media-controls {
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
+  border: 1px solid #00c49a;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 16px;
+  position: absolute; /* Change from relative to absolute */
+  top: 20px; /* Adjust to position it at the top */
+  left: 20px; /* Adjust to position it at the left */
+  z-index: 1000; /* Ensure it appears above other content */
+  margin: 0; /* Remove margin to avoid unwanted space */
+}
+
+.media-buttons {
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.media-button {
+  background-color: transparent;
+  border: none;
+  align-items: center;
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 10px;
+  text-align: center;
+  font-family: "Satoshi", sans-serif;
+  transition: background-color 0.3s, color 0.3s; /* Smooth color transition */
+}
+
+.media-button:hover {
+  background-color: #007bff; /* Blue background on hover */
+  .button-text {
+    color: #fff; /* White text on hover */
+  }
+  .button-icons {
+    background-color: #fff; /* White background on hover */
+    color: #007BFF; /* Blue text on hover */
+  }
+}
+
+.button-text {
+  color: #007BFF;
+}
+
+.button-icons {
+  background-color: #007BFF;
+  border-radius: 50%;
+  margin-bottom: 5px;
+  padding: 12px;
+}
+
+.play-button .button-icons {
+  border: 1px solid #007BFF;
+}
+
+.media-progress {
+  align-self: stretch;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+
+.progress-bar-wrapper {
+  background-color: transparent;
+  border-radius: 5px;
+  height: 5px;
+  width: 100%;
+  position: relative;
+}
+
+.progress-bar {
+  background: linear-gradient(to right, #00c49a, #007BFF);
+  height: 5px;
+  width: 50%; /* Update based on time progress */
+}
+
+.progress-time-current,
+.progress-time-total {
+  font-size: 12px;
+}
+
+.audio-player {
+  max-width: 500px;
+  margin: 0 auto;
+}

public/Married Life.mp3

@@ -8,24 +8,25 @@ import '../styles.css';
 import steps from '../Utils/steps.json';
 import WalkthroughUI from './WalkthroughUI';
 import WalkthroughController from '../Controllers/WalkthroughController';
-import Loading from '../Utils/Loading'; // Import the Loading component
+import Loading from '../Utils/Loading';
 import { SpeedInsights } from '@vercel/speed-insights/react';
-import { Analytics } from "@vercel/analytics/react"
+import { Analytics } from "@vercel/analytics/react";
 import * as THREE from 'three';
 import { SoftShadows } from '@react-three/drei';
+import AudioPlayer from '../Utils/AudioPlayer';
 
 function Home() {
     const modelRef = useRef();
     const Model = React.lazy(() => import('./Model'));
     const [currentStep, setCurrentStep] = useState(0);
     const [isTransitioning, setIsTransitioning] = useState(false);
     const [completedEvents, setCompletedEvents] = useState({});
-    const [isLoading, setIsLoading] = useState(true); // Loading state
+    const [isLoading, setIsLoading] = useState(true);
     const [isWalkthroughActive, setIsWalkthroughActive] = useState(true);
     const [pcZoomed, setPcZoomed] = useState(false);
 
     const exitWalkthrough = () => {
-        setIsWalkthroughActive(false); // Or any logic to hide the walkthrough
+        setIsWalkthroughActive(false);
     };
 
     const { description, events } = steps[currentStep] || {};
@@ -44,43 +45,34 @@ function Home() {
         if (!isTransitioning && currentStep > 0) {
             setCurrentStep((prev) => prev - 1);
         }
-    }
+    };
 
     const completeEvent = (eventName, stepIndex) => {
-        // TODO: wait till lerp animation is done
         if (isTransitioning) {
             return;
         }
-        // Ensure that the event only completes if it's the correct step
         if (stepIndex !== currentStep) {
             return;
         }
-
-        // Check if the event is already completed for the given step
         setCompletedEvents((prev) => {
             const isEventAlreadyCompleted = prev[stepIndex]?.[eventName];
-
             if (isEventAlreadyCompleted) {
-                return prev; // Event is already completed, so return previous state
+                return prev;
             }
-
-            // If not completed, create a new state object
             const updatedEvents = {
                 ...prev,
                 [stepIndex]: {
                     ...prev[stepIndex],
                     [eventName]: true,
                 },
             };
-
-            // Check if all events for the current step are now completed
             const stepEvents = steps[stepIndex]?.events || {};
             const allEventsCompleted = Object.keys(stepEvents).every(
                 (event) => updatedEvents[stepIndex]?.[event] === true
             );
 
             if (allEventsCompleted) {
-                nextStep(); // Move to the next step if all events are completed
+                nextStep();
             }
 
             return updatedEvents;
@@ -93,8 +85,9 @@ function Home() {
 
     return (
         <div className="container">
-            <Suspense fallback={<Loading />}>
+            <Suspense fallback={<Loading isLoading={isLoading} />}>
                 {isLoading && <Loading />}
+                <AudioPlayer />
                 <Canvas shadows={{ type: THREE.PCFSoftShadowMap, mapSize: { width: 2048, height: 2048 } }} precision="high">
                     {!isWalkthroughActive && <Lighting />}
                     <SoftShadows size={20} samples={16} />
@@ -108,7 +101,6 @@ function Home() {
                         setPcZoomed={setPcZoomed}
                     />
                     <OrbitControls enableZoom={false} enablePan={false} enableRotate={false} />
-                    {/* <Stats /> */}
                     <ModelController
                         modelRef={modelRef}
                         isWalkthroughActive={isWalkthroughActive}