Skip to content

Commit

Permalink
Music consistency. Merged pull request #46 from StrBoll/main
Browse files Browse the repository at this point in the history 
LGTM. Good work
  • Loading branch information
@AntonCSalvador
AntonCSalvador authored Sep 10, 2024
2 parents 310f23a + 36cd295 commit 2dde575
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 193 deletions.
82 changes: 5 additions & 77 deletions src/About/About.js
View file
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
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
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
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

0 comments on commit 2dde575

Please sign in to comment.