From e06dfb4360bd682174b9c1132280cbf78224e802 Mon Sep 17 00:00:00 2001
From: Trysdyn Black <trysdyn@voidfox.com>
Date: Sat, 10 Sep 2022 14:53:10 -0700
Subject: [PATCH] Add global volume slider

We do quite a bit of "iron fist state management" here. Any time any
embed state changes, we also re-enforce the volume setting. This is
because `setVolume()` in the Twitch embeds seems to not take effect in a
lot of situations and we want to make sure our volume is applied before
any audio starts playing.
---
 js/live.js | 18 ++++++++++++++++--
 live.html  |  4 +++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/js/live.js b/js/live.js
index 60d9e0d..d100bc4 100644
--- a/js/live.js
+++ b/js/live.js
@@ -35,6 +35,12 @@ function update_globals() {
     change_scientist();
 }
 
+// Change embed volume as slider is... slid
+function update_volume() {
+    vol = document.getElementById('vol_slider').value;
+    embeds.forEach(e => e.setVolume(vol / 100));
+}
+
 // Update individual textual elements in the overlay
 function change_game_name() {
     game_name = document.getElementById('gamename_text').value;
@@ -49,7 +55,10 @@ function change_scientist() {
 }
 
 function update_embed(embed_num) {
+    // Switch channel
     change_embed_channel(embed_num);
+
+    // Update our text fields
     n = document.getElementById('rat' + embed_num + 'name');
     p = document.getElementById('rat' + embed_num + 'pronouns');
 
@@ -69,6 +78,7 @@ function change_embed_channel(embed_num) {
     e.style.display = 'block';
 
     embeds[embed_num].setChannel(channel_name);
+    update_volume();
     embeds[embed_num].play();
 }
 
@@ -94,6 +104,10 @@ function focus_audio(embed_num) {
     embeds.forEach(e => e.setMuted(true));
     embeds[embed_num].setMuted(false);
 
+    // Fire a volume set just to be sure our volume is synced
+    // Embeds that are muted or disabled sometimes don't set volume
+    update_volume();
+
     speakers = document.querySelectorAll('.ratspeaker');
     speakers.forEach(e => e.style.display = 'none');
 
@@ -153,8 +167,8 @@ function setup() {
         parent: ['voidfox.com']
     }));
 
-    // Try to start volume at a known level
-    embeds.forEach(e => e.setVolume(1.0));
+    // Set up volume slider handler
+    document.getElementById('vol_slider').oninput = update_volume
 }
 
 document.addEventListener('DOMContentLoaded', setup);
diff --git a/live.html b/live.html
index 741b92a..a7cd59a 100644
--- a/live.html
+++ b/live.html
@@ -38,7 +38,9 @@
                     <!-- Global Controls -->
                     Overlay: 
                     <button type='button' name='go_4x3' onclick='set_state(false);'>4x3</button>
-                    <button type='button' name='go_16x0' onclick='set_state(true);'>16x9</button>
+                    <button type='button' name='go_16x9' onclick='set_state(true);'>16x9</button>
+                    Volume: 
+                    <input type='range' id='vol_slider' min=0 max=100 value=100 />
                     <td>
                         <h3>Global Settings</h3>
                         <p>