From 753b08edf0a853d209297ed9234a16bba7564200 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mart=C3=ADn=20=28Netux=29=20Rodr=C3=ADguez?=
 <send.email@netux.site>
Date: Tue, 3 Sep 2024 18:24:48 -0300
Subject: [PATCH] Update global audio volume exclusively through useReplContext
 effect

This ensures the audio volume is synced across tabs, since changing the volume in one tab would retrigger the effect in the other tabs.

It also means we can remove the explicit call to `setGlobalAudioVolume()` from <SettingsTab>
---
 website/src/repl/components/panel/SettingsTab.jsx |  5 +----
 website/src/repl/useReplContext.jsx               | 11 +++++------
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/website/src/repl/components/panel/SettingsTab.jsx b/website/src/repl/components/panel/SettingsTab.jsx
index e78903e56..baa5506ba 100644
--- a/website/src/repl/components/panel/SettingsTab.jsx
+++ b/website/src/repl/components/panel/SettingsTab.jsx
@@ -167,10 +167,7 @@ export function SettingsTab({ started }) {
         )}
         <NumberSlider
           value={audioVolume}
-          onChange={(audioVolume) => {
-            settingsMap.setKey('audioVolume', audioVolume);
-            setGlobalAudioVolume(audioVolume);
-          }}
+          onChange={(audioVolume) => settingsMap.setKey('audioVolume', audioVolume)}
           min={0}
           max={100}
           step={0.1}
diff --git a/website/src/repl/useReplContext.jsx b/website/src/repl/useReplContext.jsx
index 19a95acd2..04d300412 100644
--- a/website/src/repl/useReplContext.jsx
+++ b/website/src/repl/useReplContext.jsx
@@ -159,11 +159,10 @@ export function useReplContext() {
     editorRef.current?.updateSettings(editorSettings);
   }, [_settings]);
 
-  // on first load...
+  // on first load, set stored audio device if possible
   useEffect(() => {
-    const { audioDeviceName, audioVolume } = _settings;
+    const { audioDeviceName } = _settings;
 
-    // set stored audio device if possible
     if (audioDeviceName !== defaultAudioDeviceName) {
       getAudioDevices().then((devices) => {
         const deviceID = devices.get(audioDeviceName);
@@ -173,11 +172,11 @@ export function useReplContext() {
         setAudioDevice(deviceID);
       });
     }
-
-    // set stored audio volume
-    setGlobalAudioVolume(audioVolume);
   }, []);
 
+  // set stored audio volume
+  useEffect(() => setGlobalAudioVolume(_settings.audioVolume), [_settings.audioVolume]);
+
   //
   // UI Actions
   //