From 36ee2b3469476aea5a8431e4518d564df9a9411c Mon Sep 17 00:00:00 2001
From: Thord Setsaas <thordendre@gmail.com>
Date: Thu, 7 Nov 2024 13:12:53 +0100
Subject: [PATCH] Ability to configure volume of announcer from frontend

---
 CHANGELOG.md                                        |  1 +
 .../configure-kcapp-modal.component.js              | 12 +++++++++++-
 .../configure-kcapp-modal.marko                     | 13 ++++++++++++-
 src/util/socket.io-helper.js                        |  8 +++++++-
 4 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bad55d31..5a323d33 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ A preview of major changes can be found in the Wiki ([Latest Changes](https://gi
 - New "Explore" tab on player statistics, to explore darts thrown
 - Support for `ANY` and `MASTER` outs for `x01` legs
 - Simplified input for `x01` legs
+- Ability to configure volume of announcer from frontend
 
 #### Changed
 - Updated to use `Node.js v18`
diff --git a/src/components/navbar/components/configure-kcapp-modal/configure-kcapp-modal.component.js b/src/components/navbar/components/configure-kcapp-modal/configure-kcapp-modal.component.js
index da9384d3..e452eaf8 100644
--- a/src/components/navbar/components/configure-kcapp-modal/configure-kcapp-modal.component.js
+++ b/src/components/navbar/components/configure-kcapp-modal/configure-kcapp-modal.component.js
@@ -3,7 +3,8 @@ const localStorage = require('../../../../util/localstorage');
 module.exports = {
     onCreate(input) {
         this.state = {
-            buttonLayout: "wide"
+            buttonLayout: "wide",
+            volume: 100
         }
     },
     onMount() {
@@ -11,9 +12,18 @@ module.exports = {
         if (buttonLayout) {
             this.state.buttonLayout = buttonLayout
         }
+
+        const volume = localStorage.get("volume");
+        if (volume) {
+            this.state.volume = Math.min(Math.max(parseInt(volume * 100), 0), 100);
+        }
     },
     onSave() {
         this.state.buttonLayout = document.getElementById("buttonLayout").value;
         localStorage.set('button-layout', this.state.buttonLayout);
     },
+    updateVolume(event, selected) {
+        this.state.volume = selected.value;
+        localStorage.set('volume', this.state.volume / 100);
+    },
 }
diff --git a/src/components/navbar/components/configure-kcapp-modal/configure-kcapp-modal.marko b/src/components/navbar/components/configure-kcapp-modal/configure-kcapp-modal.marko
index eedbd7f1..10e728bd 100644
--- a/src/components/navbar/components/configure-kcapp-modal/configure-kcapp-modal.marko
+++ b/src/components/navbar/components/configure-kcapp-modal/configure-kcapp-modal.marko
@@ -19,6 +19,17 @@
             </div>
           </div>
         </div>
+        <div>
+          <div class="block-container-header">
+            <span>Announcer Volume</span>
+          </div>
+          <div class="block-container-with-header">
+            <div class="form-group">
+              <label for="volumeSlider">Set Volume: <span id="volumeValue">${state.volume}</span>%</label>
+              <input type="range" id="volumeSlider" class="form-range" min="0" max="100" value=`${state.volume}` on-input("updateVolume")>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="modal-footer">
         <button class="btn btn-primary" type="button" on-click("onSave") data-dismiss="modal">Save</button>
@@ -26,4 +37,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/util/socket.io-helper.js b/src/util/socket.io-helper.js
index d27d90ee..4a59fbfa 100644
--- a/src/util/socket.io-helper.js
+++ b/src/util/socket.io-helper.js
@@ -3,6 +3,7 @@ const io = require('socket.io-client');
 const alertify = require('./alertify');
 const speaker = require('./speaker');
 const types = require('../components/scorecard/components/match_types');
+const localStorage = require('./localstorage');
 
 exports.connect = (url) => {
     const socket = io(url);
@@ -84,12 +85,17 @@ exports.say = (data, thiz) => {
         return;
     }
 
+    let volume = localStorage.get("volume");
+    volume = volume ? Math.min(Math.max(parseFloat(volume), 0.0), 1.0) : 1.0;
+
     const oldPlayer = thiz.state.audioAnnouncer;
     const isAudioAnnouncement = (oldPlayer.duration > 0 && !oldPlayer.paused) || (!isNaN(oldPlayer.duration) && !oldPlayer.ended && oldPlayer.paused);
     if (data.audios) {
         const audioPlayers = [ ];
         for (const file of data.audios) {
-            audioPlayers.push(file.file ? new Audio(file.file) : speaker.getUtterance(file));
+            const audioPlayer = file.file ? new Audio(file.file) : speaker.getUtterance(file);
+            audioPlayer.volume = volume;
+            audioPlayers.push(audioPlayer);
         }
 
         for (let i = 0; i < audioPlayers.length; i++) {