diff --git a/src/components/header/random-controller/index.tsx b/src/components/header/random-controller/index.tsx index 50a5173e..82a63e7b 100644 --- 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 index f4a8b4c3..288c7211 100644 --- 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( 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 })) }) )