feat: added new sound when the pause time is finished

Molaryy · Sep 30, 2023 · 10825a5 · 10825a5
1 parent d8843d2
commit 10825a5
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -4,10 +4,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Bective</title>
-    <link rel="shortcut icon" href="#" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/assets/5-minutes-lofi.mp3 b/public/assets/5-minutes-lofi.mp3
diff --git a/public/assets/Wakey-Wakey.mp3 b/public/assets/Wakey-Wakey.mp3
diff --git a/src/components/Form/TimerForm.tsx b/src/components/Form/TimerForm.tsx
@@ -1,19 +1,21 @@
 import React, { Dispatch, SetStateAction } from 'react'
 import { TimerFormProps } from '../../types.ts'
 
+type InputTimeProps = {
+  time: string
+  isWorking: boolean
+  indexOnChangeToAddValue: number
+  setWorkTime: Dispatch<SetStateAction<string[]>>
+  setPauseTime: Dispatch<SetStateAction<string[]>>
+}
+
 function InputTime({
   time,
   isWorking,
   indexOnChangeToAddValue,
   setWorkTime,
   setPauseTime,
-}: {
-  time: string
-  isWorking: boolean
-  indexOnChangeToAddValue: number
-  setWorkTime: Dispatch<SetStateAction<string[]>>
-  setPauseTime: Dispatch<SetStateAction<string[]>>
-}) {
+}: InputTimeProps) {
   return (
     <input
       value={time}

diff --git a/src/components/Form/TimerFormHandler.tsx b/src/components/Form/TimerFormHandler.tsx
@@ -1,13 +1,15 @@
 import { FormEvent, useEffect, useState } from 'react'
 import TimerForm from './TimerForm.tsx'
-import pauseSound from '/assets/your_new_morning_alarm.mp3'
+import pauseSound from '/assets/5-minutes-lofi.mp3'
+import workSound from '/assets/Wakey-Wakey.mp3'
 
-function TimerFormHandler() {
+const TimerFormHandler = () => {
   const [workTime, setWorkTime] = useState<string[]>(['00', '00', '00'])
   const [pauseTime, setPauseTime] = useState<string[]>(['00', '00', '00'])
   const [isWorkTimerRunning, setIsWorkTimerRunning] = useState(false)
   const [isPauseTimerRunning, setIsPauseTimerRunning] = useState(false)
-  const [startPauseSound, setStartSongWork] = useState(false)
+  const [startPauseSound, setStartPauseSound] = useState(false)
+  const [startWorkSound, setStartWorkSound] = useState<boolean[]>([false, false])
   const [storeWorkTime, setStoreWorkTime] = useState<string[] | null>(null)
   const [storePauseTime, setStorePauseTime] = useState<string[] | null>(null)
 
@@ -22,7 +24,7 @@ function TimerFormHandler() {
   const handlePauseTimer = (): void => {
     setIsWorkTimerRunning(false)
     setIsPauseTimerRunning(false)
-    setStartSongWork(false)
+    setStartPauseSound(false)
   }
 
   const handleResetTimer = (): void => {
@@ -34,7 +36,7 @@ function TimerFormHandler() {
   const handleContinueTimer = (): void => {
     setIsWorkTimerRunning(workTime.toString() != storeWorkTime?.toString())
     setIsPauseTimerRunning(pauseTime.toString() != storePauseTime?.toString())
-    !startPauseSound ? setStartSongWork(true) : setStartSongWork(false)
+    !startPauseSound ? setStartPauseSound(true) : setStartPauseSound(false)
   }
 
   useEffect(() => {
@@ -48,10 +50,16 @@ function TimerFormHandler() {
     }
 
     const timeInterval: number = setInterval(() => {
+      if (isPauseTimerRunning) {
+        setStartWorkSound([true, false])
+      }
+      if (startWorkSound[0] && isWorkTimerRunning) {
+        setStartWorkSound([true, true])
+      }
       if (totalSeconds <= 0) {
         clearInterval(timeInterval)
         setIsWorkTimerRunning(!isWorkTimerRunning)
-        setStartSongWork(isWorkTimerRunning)
+        setStartPauseSound(isWorkTimerRunning)
         setIsPauseTimerRunning(isWorkTimerRunning)
         if (storeWorkTime && storePauseTime) {
           setWorkTime(storeWorkTime)
@@ -89,6 +97,11 @@ function TimerFormHandler() {
         isInPause={isPauseTimerRunning}
       />
       {startPauseSound ? <audio controls src={pauseSound} autoPlay hidden /> : <></>}
+      {startWorkSound[0] && startWorkSound[1] ? (
+        <audio controls src={workSound} autoPlay hidden />
+      ) : (
+        <></>
+      )}
     </>
   )
 }

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -1,5 +1,3 @@
-import '../styles/NavBar.scss'
-
 const Navbar = () => {
   return (
     <div className={'navbar'}>