Added google analytics and fixed bug on sound slider

Author: siddharthmohite

app/entry.client.tsx

@@ -5,13 +5,34 @@
  */
 
 import { RemixBrowser } from "@remix-run/react";
-import { startTransition, StrictMode } from "react";
+import { startTransition, StrictMode, useEffect } from "react";
 import { hydrateRoot } from "react-dom/client";
 
+
+function GoogleAnalytics() {
+  useEffect(() => {
+
+   const script = document.createElement("script");
+   script.async = true;
+   script.src = `https://www.googletagmanager.com/gtag/js?id=G-RY5T39HZT9`;
+   document.head.appendChild(script);
+
+   const script2 = document.createElement("script");
+   script2.innerHTML = `
+     window.dataLayer = window.dataLayer || [];
+     function gtag(){dataLayer.push(arguments);}
+     gtag('js', new Date());
+     gtag('config', 'G-RY5T39HZT9');
+   `;
+   document.head.appendChild(script2);
+  }, []);
+  return null;
+}
 startTransition(() => {
   hydrateRoot(
     document,
     <StrictMode>
+      <GoogleAnalytics />
       <RemixBrowser />
     </StrictMode>
   );

app/routes/components/AudioPlayerContext.jsx

@@ -16,6 +16,7 @@ export const AudioPlayerProvider = ({ children }) => {
     }
   ];
 
+  const [volume, setVolume] = useState(80); 
   const [isPlaying, setIsPlaying] = useState(false);
   const [currentTrackIndex, setCurrentTrackIndex] = useState(0);
   const audioRef = useRef(null);
@@ -47,9 +48,18 @@ export const AudioPlayerProvider = ({ children }) => {
     setCurrentTrackIndex(nextIndex);
   };
 
+  const handleVolumeChange = (event) => {
+    const newVolume = event.target.value;
+    setVolume(newVolume);
+    if (audioRef.current) {
+      audioRef.current.volume = newVolume / 100; // Update volume
+    }
+  };
+
   return (
     <AudioPlayerContext.Provider
-      value={{ isPlaying, handlePlayPause, handleNext, currentTrackIndex, audioList }}
+      value={{ isPlaying, handlePlayPause, handleNext,  volume,
+        handleVolumeChange, currentTrackIndex, audioList }}
     >
       {children}
     </AudioPlayerContext.Provider>

app/routes/components/ControlCenter.jsx

@@ -23,21 +23,14 @@ const connectivity =[
     {id:3, Icon1: <AirDropIcon />, textbig: "Airdrop",textsmall: "Contacts Only" },
 ]
 
-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 { isPlaying, handlePlayPause, handleNext, volume,
+    handleVolumeChange, currentTrackIndex, audioList } = useContext(AudioPlayerContext);
 
 
-const handleVolumeChange = (e) => {
-    const newVolume = e.target.value;
-    setVolume(newVolume);
-    if (audioRef.current) {
-        audioRef.current.volume = newVolume / 100;
-    }
-};
 
 
 const handleLofiWebsite = () =>{