feat(ui): add toggle-muted function to global volume button

resolve #506
mateusfg7 · Aug 7, 2023 · e38df19 · e38df19
1 parent ad967a9
commit e38df19
Showing 1 changed file with 20 additions and 5 deletions.
diff --git a/src/components/header/global-volume-controller/index.tsx b/src/components/header/global-volume-controller/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { FiVolume2, FiVolume1, FiVolume } from 'react-icons/fi'
+import { FiVolumeX, FiVolume2, FiVolume1, FiVolume } from 'react-icons/fi'
 
 import { useGlobalVolumeStore } from '@/stores/global-volume-store'
 import { useThemeStore } from '@/stores/theme-store'
@@ -15,11 +15,25 @@ export function GlobalVolumeController() {
   const setGlobalVolume = useGlobalVolumeStore(state => state.setGlobalVolume)
   const globalVolume = useGlobalVolumeStore(state => state.globalVolume)
 
+  const [currentVolume, setCurrentVolume] = useState(globalVolume)
+  const [isMuted, setIsMuted] = useState(false)
+
   function handleVolume(value: number) {
     setGlobalVolume(value / MAX_VALUE)
     setRangeValue(value)
   }
 
+  function toggleMuted() {
+    if (isMuted) {
+      setIsMuted(false)
+      handleVolume(currentVolume)
+    } else {
+      setIsMuted(true)
+      setCurrentVolume(globalVolume * MAX_VALUE)
+      handleVolume(0)
+    }
+  }
+
   const theme = useThemeStore(set => set.theme)
 
   return (
@@ -50,13 +64,14 @@ export function GlobalVolumeController() {
         />
       </div>
       <button
-        title="Toggle Global Volume Controller"
+        title="Enable/disable sound"
         className={soundButton({ theme })}
-        onClick={() => setIsShowing(!isShowing)}
+        onClick={toggleMuted}
       >
         {globalVolume >= 0.5 && <FiVolume2 size={25} />}
-        {globalVolume >= 0.1 && globalVolume < 0.5 && <FiVolume1 size={25} />}
-        {globalVolume < 0.1 && <FiVolume size={25} />}
+        {globalVolume >= 0.25 && globalVolume < 0.5 && <FiVolume1 size={25} />}
+        {globalVolume > 0 && globalVolume <= 0.25 && <FiVolume size={25} />}
+        {globalVolume === 0 && <FiVolumeX size={25} />}
       </button>
     </div>
   )