feat(config-menu): add "updaet trasition time" config

mateusfg7 · Dec 27, 2023 · 45d3994 · 45d3994
1 parent 8208c4b
commit 45d3994
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 9 deletions.
diff --git a/src/components/config-menu/index.tsx b/src/components/config-menu/index.tsx
@@ -23,7 +23,21 @@ export function ConfigMenu() {
 
   const settingStates = {
     randomModeUpdateInterval: useState(randomModeStore.updateIntervalInMs),
-    randomModeUpdateSteps: useState(randomModeStore.updateSteps)
+    randomModeUpdateSteps: useState(randomModeStore.updateSteps),
+    randomModeTransitionTime: useState(randomModeStore.updateTransitionTimeInMs)
+  }
+
+  const randomModeTransitionTime: Action = {
+    save: () => {
+      randomModeStore.setUpdateTransitionTime(
+        settingStates.randomModeTransitionTime[0]
+      )
+    },
+    reset: () => {
+      settingStates.randomModeTransitionTime[1](
+        randomModeStore.updateTransitionTimeInMs
+      )
+    }
   }
 
   const randomModeUpdateInterval: Action = {
@@ -48,7 +62,11 @@ export function ConfigMenu() {
     ]
   }
 
-  const actionList: Action[] = [randomModeUpdateInterval, randomModeUpdateSteps]
+  const actionList: Action[] = [
+    randomModeUpdateInterval,
+    randomModeUpdateSteps,
+    randomModeTransitionTime
+  ]
 
   function closeModal() {
     setIsOpen(false)
@@ -98,6 +116,10 @@ export function ConfigMenu() {
                           value: settingStates.randomModeUpdateSteps[0],
                           set: settingStates.randomModeUpdateSteps[1]
                         }}
+                        updateTransitionTime={{
+                          value: settingStates.randomModeTransitionTime[0],
+                          set: settingStates.randomModeTransitionTime[1]
+                        }}
                       />
                     </div>
                   </div>

diff --git a/src/components/config-menu/options/random-volume-settings.tsx b/src/components/config-menu/options/random-volume-settings.tsx
@@ -2,6 +2,10 @@ import { useThemeStore } from '~/stores/theme-store'
 import { settingRow, input } from './styles'
 
 type Props = {
+  updateTransitionTime: {
+    value: number
+    set: (newValue: number) => void
+  }
   updateInterval: {
     value: number
     set: (newValue: number) => void
@@ -12,18 +16,36 @@ type Props = {
   }
 }
 
-export function RandomVolumeSettings({ updateInterval, updateSteps }: Props) {
+export function RandomVolumeSettings({
+  updateInterval,
+  updateSteps,
+  updateTransitionTime
+}: Props) {
   const theme = useThemeStore(state => state.theme)
 
-  const MIN_INTERVAL = 10 * 1000 // 10 seconds
-  const MAX_INTERVAL = 5 * 60 * 1000 // 5 minutes
-
   function handleUpdateInterval(intervalInSec: number) {
     const intervalInMs = intervalInSec * 1000
 
-    if (intervalInMs < MIN_INTERVAL) updateInterval.set(MIN_INTERVAL)
-    else if (intervalInMs > MAX_INTERVAL) updateInterval.set(MAX_INTERVAL)
-    else updateInterval.set(intervalInMs)
+    const MIN_INTERVAL = 10 * 1000 // 10 seconds
+    const MAX_INTERVAL = 5 * 60 * 1000 // 5 minutes
+
+    updateInterval.set(
+      Math.min(Math.max(intervalInMs, MIN_INTERVAL), MAX_INTERVAL)
+    )
+  }
+
+  function handleTransitionTime(transitionTimeInSec: number) {
+    const transitionTimeInMs = transitionTimeInSec * 1000
+
+    const MAX_TRANSITION_TIME = updateInterval.value - 1000
+    const MIN_TRANSITION_TIME = 1000 // 1 second
+
+    updateTransitionTime.set(
+      Math.min(
+        Math.max(transitionTimeInMs, MIN_TRANSITION_TIME),
+        MAX_TRANSITION_TIME
+      )
+    )
   }
 
   return (
@@ -42,6 +64,18 @@ export function RandomVolumeSettings({ updateInterval, updateSteps }: Props) {
             className={input({ theme })}
           />
         </div>
+        <div className={settingRow({ theme })}>
+          <label htmlFor="interval" className="flex-1 text-left">
+            Transition time <span className="text-sm opacity-50">/s</span>
+          </label>
+          <input
+            type="number"
+            id="interval"
+            value={updateTransitionTime.value / 1000}
+            onChange={e => handleTransitionTime(Number(e.target.value))}
+            className={input({ theme })}
+          />
+        </div>
         <div className={settingRow({ theme })}>
           <label htmlFor="steps" className="flex-1 text-left">
             Update steps