Fix issue ufosc#42

StrBoll · Sep 8, 2024 · 36cd295 · 36cd295
1 parent 310f23a
commit 36cd295
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 193 deletions.
diff --git a/src/About/About.js b/src/About/About.js
@@ -9,46 +9,10 @@ const About = () => {
   const [videoPlaying, setVideoPlaying] = useState(false);
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
 
-  const toggleMute = () => {
-    setIsMuted(!isMuted);
-    if (audioRef.current) {
-      audioRef.current.volume = isMuted ? 0.5 : 0; // Set volume to 1 if currently muted, 0 if currently unmuted
-      if (isMuted) {
-        audioRef.current.play().catch((err) => {
-          console.error("Error playing audio:", err);
-        });
-      } else {
-        audioRef.current.pause();
-      }
-    }
-  };
+
+
 
-  useEffect(() => {
-    toggleMute();
-    const handleLocationChange = () => {
-      setIsMuted(true);
-      if (audioRef.current) {
-        audioRef.current.pause();
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    const videoElement = document.querySelector("video");
-    if (videoElement) {
-      videoElement.onplay = () => {
-        setVideoPlaying(true);
-      };
-      videoElement.onerror = () => {
-        setVideoPlaying(false);
-      };
-    }
-    if (audioRef.current) {
-      audioRef.current.play().catch((err) => {
-        console.error("Error playing audio:", err);
-      });
-    }
-  }, []);
+
 
   return (
     <div className="about-page-container">
@@ -265,45 +229,9 @@ const About = () => {
         </div>
       </div>
 
-      <button
-        onClick={toggleMute}
-        className="fixed bottom-4 right-4 bg-red-600 hover:bg-red-800 text-white font-bold py-2 px-4 rounded flex items-center justify-center rounded"
-      >
-        {isMuted ? (
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            strokeWidth="1.5"
-            stroke="currentColor"
-            className="w-6 h-6 stroke-black"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="m9 9 10.5-3m0 6.553v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66a2.25 2.25 0 001.632-2.163Zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66A2.25 2.25 0 009 15.553Z"
-            />
-            <path strokeLinecap="round" d="M3 3l18 18" />
-          </svg>
-        ) : (
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            strokeWidth="1.5"
-            stroke="currentColor"
-            className="w-6 h-6 stroke-black"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="m9 9 10.5-3m0 6.553v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66a2.25 2.25 0 001.632-2.163Zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66A2.25 2.25 0 009 15.553Z"
-            />
-          </svg>
-        )}
-      </button>
+
 
-      <audio ref={audioRef} src="main_menu.mp3" loop />
+
     </div>
   );
 };

diff --git a/src/App/App.js b/src/App/App.js
@@ -1,23 +1,73 @@
-import React from 'react';
-import { BrowserRouter, Route, Routes} from 'react-router-dom'; // Importing necessary components from react-router-dom
-
-// Importing components for different routes
-import Home from '../Home/Home' 
+import React, { useState, useRef, useEffect } from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import Home from '../Home/Home';
 import About from '../About/About';
 import Download from '../Download/Download';
 
-
 function App() {
+    const [isMuted, setIsMuted] = useState(false); 
+    const audioRef = useRef(null); 
+
+
+    const toggleMute = () => {
+        const newMutedState = !isMuted;
+        setIsMuted(newMutedState);
+        localStorage.setItem('isMuted', JSON.stringify(newMutedState)); 
+
+        if (audioRef.current) {
+            if (newMutedState) {
+                audioRef.current.pause(); 
+            } else {
+                audioRef.current.play().catch(err => console.error("Error playing audio:", err));
+            }
+        }
+    };
+
+
+    useEffect(() => {
+        const savedMuteState = JSON.parse(localStorage.getItem('isMuted'));
+
+        if (savedMuteState !== null) {
+            setIsMuted(savedMuteState);
+
+
+            if (audioRef.current && !savedMuteState) {
+                audioRef.current.play().catch(err => console.error("Error playing audio:", err));
+            }
+        } else {
+
+            if (audioRef.current) {
+                audioRef.current.play().catch(err => console.error("Error playing audio:", err));
+            }
+        }
+    }, []);
+
     return (
         <BrowserRouter>
+
+            <button onClick={toggleMute} className="fixed bottom-4 right-4 bg-red-600 hover:bg-red-800 text-white font-bold py-2 px-4 rounded z-50 flex items-center">
+            {isMuted ? (
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6 stroke-black">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="m9 9 10.5-3m0 6.553v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66a2.25 2.25 0 001.632-2.163Zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66A2.25 2.25 0 009 15.553Z" />
+                        <path strokeLinecap="round" d="M3 3l18 18" />
+                    </svg>
+                ) : (
+
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6 stroke-black">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="m9 9 10.5-3m0 6.553v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66a2.25 2.25 0 001.632-2.163Zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66A2.25 2.25 0 009 15.553Z" />
+                    </svg>
+                )}
+            </button>
+            <audio ref={audioRef} src="main_menu.mp3" loop />
+
+
             <Routes>
                 <Route path="/" exact element={<Home />} />
                 <Route path="/about" exact element={<About />} />
                 <Route path="/download" exact element={<Download />} />
-
             </Routes>
         </BrowserRouter>
     );
 }
 
-export default App;
+export default App;
diff --git a/src/Download/Download.js b/src/Download/Download.js
@@ -10,46 +10,10 @@ const Download = () => {
     const [videoPlaying, setVideoPlaying] = useState(false);
     const [currentImageIndex, setCurrentImageIndex] = useState(0);
 
-    const toggleMute = () => {
-        setIsMuted(!isMuted);
-        if (audioRef.current) {
-            audioRef.current.volume = isMuted ? 0.5 : 0; // Set volume to 1 if currently muted, 0 if currently unmuted
-            if (isMuted) {
-                audioRef.current.play().catch(err => {
-                    console.error("Error playing audio:", err);
-                });
-            } else {
-                audioRef.current.pause();   
-            }
-        }
-    };
+
 
-    useEffect(() => {
-        toggleMute();
-        const handleLocationChange = () => {
-            setIsMuted(true); 
-            if (audioRef.current) {
-                audioRef.current.pause();
-            }
-        };
-    }, []);
+
 
-    useEffect(() => {
-        const videoElement = document.querySelector('video');
-        if (videoElement) {
-            videoElement.onplay = () => {
-                setVideoPlaying(true);
-            };
-            videoElement.onerror = () => {
-                setVideoPlaying(false);
-            };
-        }
-        if (audioRef.current) {
-            audioRef.current.play().catch(err => {
-                console.error("Error playing audio:", err);
-            });
-        }
-    }, []);
 
 
     return (
@@ -88,21 +52,9 @@ const Download = () => {
                 </div>
             </div>
 
-            <button onClick={toggleMute} className="fixed bottom-4 right-4 bg-red-600 hover:bg-red-800 text-white font-bold py-2 px-4 rounded flex items-center justify-center rounded">
-            {isMuted ? (
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6 stroke-black">
-                        <path strokeLinecap="round" strokeLinejoin="round" d="m9 9 10.5-3m0 6.553v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66a2.25 2.25 0 001.632-2.163Zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66A2.25 2.25 0 009 15.553Z" />
-                        <path strokeLinecap="round" d="M3 3l18 18" />
-                    </svg>
-                ) : (
-
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6 stroke-black">
-                        <path strokeLinecap="round" strokeLinejoin="round" d="m9 9 10.5-3m0 6.553v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66a2.25 2.25 0 001.632-2.163Zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66A2.25 2.25 0 009 15.553Z" />
-                    </svg>
-                )}
-            </button>            
+
 
-            <audio ref={audioRef} src="main_menu.mp3" loop />
+
         </div>
     )
 } 

diff --git a/src/Home/Home.js b/src/Home/Home.js
@@ -43,48 +43,7 @@ const Home = () => {
         }
     }
 
-    const toggleMute = () => {
-        setIsMuted(!isMuted);
-        if (audioRef.current) {
-            audioRef.current.volume = isMuted ? 0.5 : 0; // Set volume to 1 if currently muted, 0 if currently unmuted
-            if (isMuted) {
-                audioRef.current.play().catch(err => {
-                    console.error("Error playing audio:", err);
-                });
-            } else {
-                audioRef.current.pause();   
-            }
-        }
-    };
-
-    useEffect(() => {
-        setCurrentImageIndex(0);
-        toggleMute();
-        const handleLocationChange = () => {
-            setIsMuted(true); 
-            if (audioRef.current) {
-                audioRef.current.pause();
-            }
-        };
-    }, []);
 
-    useEffect(() => {
-        const videoElement = document.querySelector('video');
-        if (videoElement) {
-            videoElement.onplay = () => {
-                setVideoPlaying(true);
-            };
-            videoElement.onerror = () => {
-                setVideoPlaying(false);
-            };
-        }
-        if (audioRef.current) {
-            audioRef.current.play().catch(err => {
-                console.error("Error playing audio:", err);
-            });
-        }
-    }, []);
-
     return (
 
         <div className="home-page-container">
@@ -146,21 +105,9 @@ const Home = () => {
             </div>
 
 
-            <button onClick={toggleMute} className="fixed bottom-4 right-4 bg-red-600 hover:bg-red-800 text-white font-bold py-2 px-4 rounded flex items-center justify-center rounded " id="musicButton">
-            {isMuted ? (
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6 stroke-black">
-                        <path strokeLinecap="round" strokeLinejoin="round" d="m9 9 10.5-3m0 6.553v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66a2.25 2.25 0 001.632-2.163Zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66A2.25 2.25 0 009 15.553Z" />
-                        <path strokeLinecap="round" d="M3 3l18 18" />
-                    </svg>
-                ) : (
-
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6 stroke-black">
-                        <path strokeLinecap="round" strokeLinejoin="round" d="m9 9 10.5-3m0 6.553v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66a2.25 2.25 0 001.632-2.163Zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66A2.25 2.25 0 009 15.553Z" />
-                    </svg>
-                )}
-            </button>            
-
-            <audio ref={audioRef} src="main_menu.mp3" loop />
+
+
+