Ability to configure volume of announcer from frontend

Author: thordy

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`

src/components/navbar/components/configure-kcapp-modal/configure-kcapp-modal.component.js

@@ -3,17 +3,27 @@ const localStorage = require('../../../../util/localstorage');
 module.exports = {
     onCreate(input) {
         this.state = {
-            buttonLayout: "wide"
+            buttonLayout: "wide",
+            volume: 100
         }
     },
     onMount() {
         const buttonLayout = localStorage.get("button-layout");
         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);
+    },
 }

src/components/navbar/components/configure-kcapp-modal/configure-kcapp-modal.marko

@@ -19,11 +19,22 @@
             </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>
         <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
       </div>
     </div>
   </div>
-</div>
+</div>

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++) {