From 35a587927f3ec4dfda886af633c49801c5eba5e0 Mon Sep 17 00:00:00 2001
From: Francisco Pessano <franpessano1@gmail.com>
Date: Sat, 2 Oct 2021 01:12:34 -0300
Subject: [PATCH] Audio added

---
 .../MainPomodoroTimer.jsx                     |  31 +++++++++++++++++-
 {public => src/components}/sounds/bell-x2.mp3 | Bin
 .../components/sounds/bell-x3.mp3             | Bin
 3 files changed, 30 insertions(+), 1 deletion(-)
 rename {public => src/components}/sounds/bell-x2.mp3 (100%)
 rename public/sounds/bell x3.mp3 => src/components/sounds/bell-x3.mp3 (100%)

diff --git a/src/components/Main Pomodoro Childrens/MainPomodoroTimer.jsx b/src/components/Main Pomodoro Childrens/MainPomodoroTimer.jsx
index 375b1d2..f30ac1e 100644
--- a/src/components/Main Pomodoro Childrens/MainPomodoroTimer.jsx	
+++ b/src/components/Main Pomodoro Childrens/MainPomodoroTimer.jsx	
@@ -4,6 +4,9 @@ import uploadToClockifyTimer from '../Clockify/uploadToClockifyTimer'
 import getAndFormatCurrentTime from '../Clockify/getAndFormatCurrentTime'
 import randomText from '../Misc/randomText'
 
+import bell_x2 from '../sounds/bell-x2.mp3'
+import bell_x3 from '../sounds/bell-x3.mp3'
+
 const MainPomodoroTimer = (props) => {
 
     const [minutes, setMinutes] = useState(25)
@@ -245,6 +248,8 @@ const MainPomodoroTimer = (props) => {
                 
                 if (minutes === 0 && seconds === 0) {
                     setTimerActivity(false)
+
+                    playAudio('work')
                     
                     if (restCounter !== 3){
 
@@ -297,6 +302,8 @@ const MainPomodoroTimer = (props) => {
 
                 if (minutes === 0 && seconds === 0) {
                     setTimerActivity(false)
+
+                    playAudio('rest')
                     
                     setTimeout( () => {
 
@@ -404,12 +411,34 @@ const MainPomodoroTimer = (props) => {
         }
     }
     
+    const playAudio = (moment) => {
+
+        if (moment === 'work') {
+            const audio = document.getElementsByClassName('audio-container-work')[0]
+            audio.play()
+
+        }
+
+        if (moment === 'rest') {
+            const audio = document.getElementsByClassName('audio-container-rest')[0]
+            audio.play()
+        }
+        
+    }
 
     return (
-        <div className="timer">
+        <div className="timer" onSelect={playAudio}>
             <div className="minutes">{formatMinutes()}</div>
             <div className="separator">:</div>
             <div className="seconds">{formatSeconds()}</div>
+
+            <audio className="audio-container-work">
+                <source src={bell_x2} type="audio/mp3" autoPlay="true"></source>
+            </audio>
+
+            <audio className="audio-container-rest">
+                <source src={bell_x3} type="audio/mp3" autoPlay="true"></source>
+            </audio>
         </div>
     )
 }
diff --git a/public/sounds/bell-x2.mp3 b/src/components/sounds/bell-x2.mp3
similarity index 100%
rename from public/sounds/bell-x2.mp3
rename to src/components/sounds/bell-x2.mp3
diff --git a/public/sounds/bell x3.mp3 b/src/components/sounds/bell-x3.mp3
similarity index 100%
rename from public/sounds/bell x3.mp3
rename to src/components/sounds/bell-x3.mp3