Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix issue #42 #46

Merged
merged 1 commit into from
Sep 10, 2024
Merged

Fix issue #42 #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 5 additions & 77 deletions src/About/About.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
);
};
Expand Down
66 changes: 58 additions & 8 deletions src/App/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
56 changes: 4 additions & 52 deletions src/Download/Download.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -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>
)
}
Expand Down
59 changes: 3 additions & 56 deletions src/Home/Home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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 />






Expand Down