feat: volume control in solidjs

src/components/Metronome.tsx

@@ -14,6 +14,7 @@ import { p$stressFirstBeat } from '../store/stressFirstBeat'
 import PatternSelection from './metronome/PatternSelection'
 import Player from './metronome/Player'
 import BPMPreset from './metronome/BPMPreset'
+import Volume from './metronome/Volume'
 
 const Metronome = () => {
   const metronomeStatus = useStore($metronomeStatus)
@@ -60,6 +61,8 @@ const Metronome = () => {
       </div>
 
       <PatternSelection />
+
+      <Volume />
     </div>
   )
 }

src/components/MetronomeExtraPanel.tsx

@@ -1,4 +1,5 @@
 /** @jsxImportSource react */
+// WARN deprecated, Solid does not work well on Astro
 
 import { useStore } from '@nanostores/react'
 import { MAX_VOLUME, MIN_VOLUME } from '../consts'

src/components/metronome/Volume.tsx

@@ -0,0 +1,35 @@
+/** @jsxImportSource solid-js */
+
+import { createEffect } from 'solid-js'
+import { useStore } from '@nanostores/solid'
+
+import { MAX_VOLUME, MIN_VOLUME } from '../../consts'
+import { actionSetVolume, p$volume } from '../../store/volume'
+import { changeVolume } from '../../sounds'
+
+const Volume = () => {
+  const volume = useStore(p$volume)
+
+  createEffect(() => {
+    changeVolume(volume())
+  })
+
+  return (
+    <div class='w-full max-w-lg flex flex-col rounded-md p-4 text-shironeri'>
+      <label>Volume:</label>
+
+      <input
+        class='w-full'
+        value={volume()}
+        type='range'
+        min={MIN_VOLUME}
+        max={MAX_VOLUME}
+        onChange={e => {
+          actionSetVolume(parseInt(e.target.value))
+        }}
+      ></input>
+    </div>
+  )
+}
+
+export default Volume

src/pages/index.astro

@@ -9,5 +9,5 @@ import MetronomeExtraPanel from '../components/MetronomeExtraPanel.tsx'
   <Metronome client:only='solid-js' />
 
   <!-- WARN cannot pass callbacks to Astro Islands, might be that functions cannot be serialized -->
-  <MetronomeExtraPanel client:only='react' />
+  <!-- <MetronomeExtraPanel client:only='react' /> -->
 </BaseLayout>