feat(random-mode): add updateTransitionTimeInMs on random-mode store

mateusfg7 · Dec 27, 2023 · 8208c4b · 8208c4b
1 parent 42197dc
commit 8208c4b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/src/components/header/random-controller/index.tsx b/src/components/header/random-controller/index.tsx
@@ -9,10 +9,13 @@ import { calculateVolumeSteps } from './calculate-volume-steps'
 import { toggleButton } from './styles'
 
 export function RandomModeButton() {
-  const TOTAL_TRANSITION = 5000 // 5 seconds
-
-  const { randomMode, updateSteps, updateIntervalInMs, setRandomMode } =
-    useGlobalRandomModeStore()
+  const {
+    randomMode,
+    updateSteps,
+    updateIntervalInMs,
+    updateTransitionTimeInMs,
+    setRandomMode
+  } = useGlobalRandomModeStore()
   const { sounds, setSound } = useSoundsStateStore()
 
   const theme = useThemeStore(set => set.theme)
@@ -68,7 +71,7 @@ export function RandomModeButton() {
 
   function randomizeVolumes() {
     // Total duration for volume change
-    const stepDuration = TOTAL_TRANSITION / updateSteps
+    const stepDuration = updateTransitionTimeInMs / updateSteps
     applyVolumeChanges(stepDuration)
   }
 

diff --git a/src/stores/random-mode-store.ts b/src/stores/random-mode-store.ts
@@ -3,12 +3,14 @@ import { create } from 'zustand'
 type States = {
   randomMode: boolean
   updateIntervalInMs: number
+  updateTransitionTimeInMs: number
   updateSteps: number
 }
 
 type Actions = {
   setRandomMode: (randomMode: boolean) => void
   setUpdateInterval: (updateIntervalInMs: number) => void
+  setUpdateTransitionTime: (updateTransitionTimeInMs: number) => void
   setUpdateSteps: (updateSteps: number) => void
 }
 
@@ -24,6 +26,10 @@ export const useGlobalRandomModeStore = create<GlobalRandomModeStoreProps>(
       set(() => ({ updateIntervalInMs })),
 
     updateSteps: 5, // Sound moves from 1 state to another in 5 steps
-    setUpdateSteps: updateSteps => set(() => ({ updateSteps }))
+    setUpdateSteps: updateSteps => set(() => ({ updateSteps })),
+
+    updateTransitionTimeInMs: 5000, // 5 seconds
+    setUpdateTransitionTime: updateTransitionTimeInMs =>
+      set(() => ({ updateTransitionTimeInMs }))
   })
 )