Added a audioplayer context for maintaining state

Author: siddharthmohite

app/routes/components/AudioPlayerContext.jsx

@@ -0,0 +1,66 @@
+// AudioPlayerContext.js
+import React, { createContext, useState, useRef, useEffect } from 'react';
+
+const AudioPlayerContext = createContext();
+
+export const AudioPlayerProvider = ({ children }) => {
+  // Define your list of audio tracks.
+  const audioList = [
+    {
+        src: "audio1.webm",
+        title: "This is helpful while coding pt.1",
+        description: "Lo-Fi लो-फाई (siddharth's playlist)"
+    },
+    {
+        src: "audio2.webm",
+        title: "This is helpful while coding pt.2",
+        description: "Lo-Fi लो-फाई (siddharth's playlist)"
+    }
+  ];
+
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTrackIndex, setCurrentTrackIndex] = useState(0);
+  const audioRef = useRef(null);
+
+  // Whenever the track index changes, update the audio source.
+  useEffect(() => {
+    if (audioRef.current) {
+      audioRef.current.pause();
+    }
+    audioRef.current = new Audio(audioList[currentTrackIndex].src);
+    // Optionally, resume playing if the previous track was playing.
+    if (isPlaying) {
+      audioRef.current.play();
+    }
+  }, [currentTrackIndex]);
+
+  const handlePlayPause = () => {
+    if (!audioRef.current) return;
+    if (isPlaying) {
+      audioRef.current.pause();
+      setIsPlaying(false);
+    } else {
+      // Optionally reset to start if needed:
+      audioRef.current.currentTime = 0;
+      audioRef.current.play();
+      setIsPlaying(true);
+    }
+  };
+
+  const handleNext = () => {
+    // Calculate the next track index and update the state.
+    const nextIndex = (currentTrackIndex + 1) % audioList.length;
+    setCurrentTrackIndex(nextIndex);
+    // The useEffect hook will handle updating the audio source.
+  };
+
+  return (
+    <AudioPlayerContext.Provider
+      value={{ isPlaying, handlePlayPause, handleNext, currentTrackIndex, audioList }}
+    >
+      {children}
+    </AudioPlayerContext.Provider>
+  );
+};
+
+export default AudioPlayerContext;

app/routes/components/ControlCenter.jsx

@@ -11,9 +11,11 @@ import AudioPlayIcon from "../icons/AudioPlayIcon"
 import AudioNextIcon from "../icons/AudioNextIcon"
 import AudioPauseIcon from "../icons/AudioPauseIcon"
 import { FullScreenContext } from "./FullScreenContext";
+import AudioPlayerContext from './AudioPlayerContext';
+import audioManager from '../components/audioManager'
 import "../styles/ControlCenter.scss"
 import { useState, useRef, useContext, useEffect} from "react"
-import React from "react"
+
 export default function ControlCenter(){
 
 const connectivity =[
@@ -22,25 +24,27 @@ const connectivity =[
     {id:3, Icon1: <AirDropIcon />, textbig: "Airdrop",textsmall: "Contacts Only" },
 ]
 
-const audioList = [
-    {
-        src: "audio1.mp3",
-        title: "This is helpful while coding pt.1",
-        description: "Lo-Fi लो-फाई (siddharth's playlist)"
-    },
-    {
-        src: "audio2.mp3",
-        title: "This is helpful while coding pt.2",
-        description: "Lo-Fi लो-फाई (siddharth's playlist)"
-    }
-];
-const [currentTrackIndex, setCurrentTrackIndex] = useState(0);
-const [isPlaying, setIsPlaying] = useState(false);
+// const audioList = [
+//     {
+//         src: "audio1.webm",
+//         title: "This is helpful while coding pt.1",
+//         description: "Lo-Fi लो-फाई (siddharth's playlist)"
+//     },
+//     {
+//         src: "audio2.webm",
+//         title: "This is helpful while coding pt.2",
+//         description: "Lo-Fi लो-फाई (siddharth's playlist)"
+//     }
+// ];
+// const [currentTrackIndex, setCurrentTrackIndex] = useState(0);
+// const [isPlaying, setIsPlaying] = useState(false);
 const [volume, setVolume] = useState(70); 
 const audioRef = useRef(null);
 const [selectedItems, setSelectedItems] = useState({});
 const [brightness, setBrightness] = useState(100);
 const {fullScreenSelected, toggleFullScreen } = useContext(FullScreenContext);
+const { isPlaying, handlePlayPause, handleNext, currentTrackIndex, audioList } = useContext(AudioPlayerContext);
+
 
 const handleVolumeChange = (e) => {
     const newVolume = e.target.value;
@@ -50,22 +54,27 @@ const handleVolumeChange = (e) => {
     }
 };
 
-const handlePlayPause = () => {
-    if (audioRef.current) {
-        if (isPlaying) {
-            audioRef.current.pause();
-        } else {
-            audioRef.current.currentTime = 0; 
-            audioRef.current.play();
-        }
-        setIsPlaying(!isPlaying);
-    }
-};
+// const handlePlayPause = () => {
+//     if (audioRef.current) {
+//         if (isPlaying) {
+//             audioManager.pause();
+//         } else {
+//             // audioRef.current.currentTime = 0; 
+//             // audioRef.current.play();
+//             audioManager.play(audioList[currentTrackIndex].src);
+//         }
+//         setIsPlaying(!isPlaying);
+//     }
+// };
 
-const handleNext = () => {
-    setCurrentTrackIndex((prevIndex) => (prevIndex + 1) % audioList.length);
-    setIsPlaying(false); 
-};
+// const handleNext = () => {
+//     // setCurrentTrackIndex((prevIndex) => (prevIndex + 1) % audioList.length);
+//     // setIsPlaying(false); 
+//     const nextIndex = (currentTrackIndex + 1) % audioList.length;
+//     setCurrentTrackIndex(nextIndex);
+//     audioManager.play(audioList[nextIndex].src);
+//     setIsPlaying(true);
+// };
 
 const handleLofiWebsite = () =>{
     window.open("https://lofigirl.com/releases/sleeping-soul/", "");

app/routes/components/audioManager.js

@@ -0,0 +1,23 @@
+class AudioManager {
+    constructor() {
+      this.audio = null;
+    }
+  
+    play(src) {
+      if (this.audio) {
+        this.audio.pause();
+      }
+      this.audio = new Audio(src);
+      this.audio.play();
+    }
+  
+    pause() {
+      if (this.audio) {
+        this.audio.pause();
+      }
+    }
+  
+  }
+  
+  export default new AudioManager();
+  

app/routes/homepage.tsx

@@ -18,6 +18,7 @@ import WifiIcon from './icons/WifiIcon'
 import ControlCenterIcon from  './icons/ControlCenterIcon'
 import React from "react";
 import { FullScreenProvider } from "./components/FullScreenContext";
+import { AudioPlayerProvider } from './components/AudioPlayerContext';
 
 export default function homepage(){
     const location = useLocation();
@@ -248,6 +249,7 @@ useEffect(() => {
 
 
     return(
+      <AudioPlayerProvider>
       <FullScreenProvider>  
     <div className="homepage-container">
         <img
@@ -426,6 +428,7 @@ useEffect(() => {
         ))}
         </div>
     </div>
-    </FullScreenProvider>  
+    </FullScreenProvider>
+    </AudioPlayerProvider>
     );
 }