Merge pull request #155 from osutcj/CSS-49-Fade-out-theme-song-sound

Task done, waiting review. 


please pleas dont break plzzzz

src/hooks/useSounds.hook.ts

@@ -7,8 +7,20 @@ export const useSounds = (audio: HTMLAudioElement) => {
  audio.pause();
  };
 
+ const fadeOutSound = (audio : HTMLAudioElement) => {
+ for (let i = 0; i < 10; i++) {
+ setTimeout(() => {
+ audio.volume -= 0.1;
+ }, i * 100);
+ }
+ setTimeout(() => {
+ stop(audio);
+ }, 1000);
+ };
+
  return {
  play,
- stop
+ stop,
+ fadeOutSound
  }
 }

src/shared/FlashRound/FlashRoundAdmin.tsx

@@ -10,6 +10,8 @@ import round_start from '../../static/round_start.mp3';
 import { useSounds } from '../../hooks/useSounds.hook';
 import question_revealed from '../../static/question_revealed.mp3';
 import wrongAnswerSound from '../../static/x.mp3';
+import dublicateAnswer from '../../static/dublicate_answer.mp3';
+import correctAnswer from '../../static/correct_answer.mp3';
 import { WRONG_ANSWER_TIME } from '../../utils/constants';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
 
@@ -159,18 +161,33 @@ const FlashRoundAdmin = () => {
  const { play } = useSounds(audio);
  play(audio);
  setCurrentThemeSong(audio);
- setPlayingCurrentThemeSong(true);
+ //setPlayingCurrentThemeSong(true);
  setTimeout(() => {
  stopSound(audio);
  }, timeout);
  };
 
- const stopSound = (audio: any) => {
- const { stop } = useSounds(audio);
- setPlayingCurrentThemeSong(false);
- stop(audio);
+ const stopSound = (audio: HTMLAudioElement) => {
+ const { fadeOutSound } = useSounds(audio)
+ fadeOutSound(audio)
  };
 
+
+/* const fadeOutSound = (audio : any) => {
+ const { stop } = useSounds(audio)
+ for (let i = 0; i < 10; i++) {
+ setTimeout(() => {
+ audio.volume -= 0.1;
+ }, i * 100);
+ }
+ setTimeout(() => {
+ setPlayingCurrentThemeSong(false);
+ stop(audio);
+ }, 1000);
+ }
+ */
+
+
  useEffect(() => {
  if (resetChild) {
  const timeout = setTimeout(() => {
@@ -265,12 +282,29 @@ const FlashRoundAdmin = () => {
  >
  Show X
  </Button>
+ <Button
+ variant="outlined"
+ color="info"
+ onClick={() => playSound(dublicateAnswer, 1000)}
+ style={{ marginLeft: '20px' }}
+ >
+ Play DUBLICATE answer SFX
+ </Button>
+ <Button
+ variant="outlined"
+ color="info"
+ onClick={() => playSound(correctAnswer, 1000)}
+ style={{ marginLeft: '20px' }}
+ >
+ Play CORRECT answer SFX
+ </Button>
  </div>
  <div style={{ marginTop: 10, width: '100%' }}>
  <Button
  variant="outlined"
  onClick={() => {
  playSound(round_start, 15000);
+ setPlayingCurrentThemeSong(true);
  }}
  >
  Play intro theme song
@@ -279,6 +313,9 @@ const FlashRoundAdmin = () => {
  variant="outlined"
  onClick={() => {
  stopSound(currentThemeSong);
+ setTimeout(() => {
+ setPlayingCurrentThemeSong(false);
+ }, 1000);
  }}
  >
  Stop intro theme song

src/shared/GameRound/GameRoundAdmin.tsx

@@ -74,18 +74,17 @@ const GameRoundAdmin = (props: any) => {
  const { play } = useSounds(audio);
  play(audio);
  setCurrentThemeSong(audio);
- setPlayingCurrentThemeSong(true);
  setTimeout(() => {
  stopSound(audio);
  }, timeout);
  };
 
  const stopSound = (audio: any) => {
- const { stop } = useSounds(audio);
- setPlayingCurrentThemeSong(false);
- stop(audio);
+ const { fadeOutSound } = useSounds(audio)
+ fadeOutSound(audio)
  };
 
+
  const resetDbValues = (newQuestion: string) => {
  GamesService.update(selectedGame, {
  ...game,
@@ -380,6 +379,7 @@ const GameRoundAdmin = (props: any) => {
  variant="outlined"
  onClick={() => {
  playSound(round_start, 15000);
+ setPlayingCurrentThemeSong(true);
  }}
  >
  Play intro theme song
@@ -388,6 +388,7 @@ const GameRoundAdmin = (props: any) => {
  variant="outlined"
  onClick={() => {
  stopSound(currentThemeSong);
+ setPlayingCurrentThemeSong(false);
  }}
  >
  Stop intro theme song