volume setting for chime

src/back/settings.ts

@@ -8,7 +8,6 @@ import { productName } from '../../package.json'
 const autoLaunch = new AutoLaunch({ name: productName, mac: { useLaunchAgent: true } })
 
 import { DEV } from '.'
-import ms from 'ms'
 import dayjs from 'dayjs'
 
 const store = new Store()
@@ -19,6 +18,7 @@ const defaults = {
   paused: 0,
   lastRun: 0,
   autoClose: false,
+  volume: 100,
 }
 export type SettingKeys = keyof typeof defaults
 const IntNormalizer = (x: any) => parseInt(x)
@@ -30,6 +30,7 @@ const normalizers: Record<SettingKeys, (x: any) => any> = {
   autoClose: BoolNormalizer,
   paused: IntNormalizer,
   lastRun: IntNormalizer,
+  volume: IntNormalizer,
 }
 
 export default class Settings {
@@ -65,7 +66,7 @@ export default class Settings {
     if (this.win) return
     Settings.win = new BrowserWindow({
       width: 400,
-      height: 575,
+      height: 630,
       center: true,
       resizable: false,
       webPreferences: {

src/front/banner/index.tsx

@@ -1,5 +1,3 @@
-console.log('test')
-
 import { ipcRenderer } from 'electron'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { render } from 'react-dom'
@@ -52,6 +50,8 @@ const Banner: React.FC = () => {
       setTimeout(() => setCountdown(countdown - 1), 1000)
     } else {
       const audio = new Audio(chime)
+      const volume = ipcRenderer.sendSync('load', { key: 'volume' })
+      audio.volume = volume / 100
       audio.play()
       setDone(true)
     }

src/front/settings/Field.tsx

@@ -6,6 +6,18 @@ const labels = {
   duration: ['For', 'seconds'],
   boot: ['Start on boot'],
   autoClose: ['Close window after countdown'],
+  volume: ['Chime Volume'],
+}
+
+const ranges: Partial<Record<keyof typeof labels, [number, number]>> = {
+  every: [1, 60],
+  duration: [1, 60],
+  volume: [0, 100],
+}
+
+function getRange(key: keyof typeof labels): [number, number] {
+  const range = ranges[key]
+  return range || [0, 0]
 }
 
 const Field: React.FC<{ setting: keyof typeof labels }> = ({ setting: key }) => {
@@ -39,8 +51,8 @@ const Field: React.FC<{ setting: keyof typeof labels }> = ({ setting: key }) =>
             className="mt0 mb3"
             type="range"
             id={key}
-            min="1"
+            min={getRange(key)[0]}
-            max="60"
+            max={getRange(key)[1]}
             step="1"
             value={value}
             onChange={(e) => setValue(parseInt(e.target.value))}

src/front/settings/Settings.tsx

@@ -12,6 +12,7 @@ const Settings = () => {
         <fieldset className="ma0 pa0">
           <Field setting="every" />
           <Field setting="duration" />
+          <Field setting="volume" />
           <Field setting="autoClose" />
           <Field setting="boot" />
         </fieldset>