Fixing more bugs

src/App.tsx

@@ -24,6 +24,11 @@ function App() {
   const playbackManagerRef = useRef<PlaybackManager | null>(null)
   const downloadServiceRef = useRef<DownloadService>(new DownloadService())
   const animationFrameRef = useRef<number | null>(null)
+  const formulasRef = useRef<string[][]>(formulas)
+
+  useEffect(() => {
+    formulasRef.current = formulas
+  }, [formulas])
 
   useEffect(() => {
     effectSettings.setKey('masterVolume', engineValues.masterVolume)
@@ -34,21 +39,21 @@ function App() {
     setQueued(null)
   }
 
-  const playFormula = (formula: string, id: string) => {
+  const playFormula = async (formula: string, id: string) => {
     const sampleRate = getSampleRateFromIndex(engineValues.sampleRate)
     const duration = engineValues.loopDuration
 
     if (!playbackManagerRef.current) {
       playbackManagerRef.current = new PlaybackManager({ sampleRate, duration })
     } else {
-      playbackManagerRef.current.updateOptions({ sampleRate, duration })
+      await playbackManagerRef.current.updateOptions({ sampleRate, duration })
     }
 
     playbackManagerRef.current.stop()
     playbackManagerRef.current.setEffects(effectValues)
     playbackManagerRef.current.setPitch(engineValues.pitch ?? 1)
 
-    const success = playbackManagerRef.current.play(formula, sampleRate, duration)
+    const success = await playbackManagerRef.current.play(formula, sampleRate, duration)
 
     if (success) {
       setPlaying(id)
@@ -94,7 +99,7 @@ function App() {
       setQueued(id)
       if (playbackManagerRef.current) {
         playbackManagerRef.current.scheduleNextTrack(() => {
-          const queuedFormula = formulas.flat()[parseInt(id.split('-')[0]) * 2 + parseInt(id.split('-')[1])]
+          const queuedFormula = formulasRef.current.flat()[parseInt(id.split('-')[0]) * 2 + parseInt(id.split('-')[1])]
           if (queuedFormula) {
             playFormula(queuedFormula, id)
           }
@@ -112,7 +117,7 @@ function App() {
     engineSettings.setKey(parameterId as keyof typeof engineValues, value)
 
     if (parameterId === 'masterVolume' && playbackManagerRef.current) {
-      playbackManagerRef.current.setEffects(effectValues)
+      playbackManagerRef.current.setEffects({ ...effectValues, masterVolume: value })
     }
 
     if (parameterId === 'pitch' && playbackManagerRef.current) {
@@ -141,19 +146,25 @@ function App() {
     const id = `${row}-${col}`
     const newFormula = generateRandomFormula(engineValues.complexity)
 
-    setFormulas(prevFormulas => {
-      const newFormulas = [...prevFormulas]
-      newFormulas[row] = [...newFormulas[row]]
-      newFormulas[row][col] = newFormula
-      return newFormulas
-    })
-
     if (playing === id && playbackManagerRef.current) {
       setRegenerating(id)
       playbackManagerRef.current.scheduleNextTrack(() => {
+        setFormulas(prevFormulas => {
+          const newFormulas = [...prevFormulas]
+          newFormulas[row] = [...newFormulas[row]]
+          newFormulas[row][col] = newFormula
+          return newFormulas
+        })
         playFormula(newFormula, id)
         setRegenerating(null)
       })
+    } else {
+      setFormulas(prevFormulas => {
+        const newFormulas = [...prevFormulas]
+        newFormulas[row] = [...newFormulas[row]]
+        newFormulas[row][col] = newFormula
+        return newFormulas
+      })
     }
   }