From e7e281083f94c49cd6e49237b9ae0f4178940960 Mon Sep 17 00:00:00 2001
From: Sergey Stepanov <sergystepanov@gmail.com>
Date: Fri, 16 Feb 2024 22:47:54 +0300
Subject: [PATCH] Add ugly persistent volume option

---
 web/index.html              |  8 ++++----
 web/js/gui/gui.js           | 11 +++++++++++
 web/js/settings/opts.js     |  3 ++-
 web/js/settings/settings.js | 21 +++++++++++++++++++--
 web/js/stream/stream.js     |  1 +
 5 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/web/index.html b/web/index.html
index a912d4439..bc673e5e2 100644
--- a/web/index.html
+++ b/web/index.html
@@ -118,16 +118,16 @@ <h1>Options</h1>
 
 <script src="js/gui/gui.js?v=1"></script>
 <script src="js/utils.js?v1"></script>
-<script src="js/gui/message.js?v=1"></script>
+<script src="js/gui/message.js?v=2"></script>
 <script src="js/log.js?v=5"></script>
 <script src="js/event/event.js?v=5"></script>
 <script src="js/input/keys.js?v=3"></script>
-<script src="js/settings/opts.js?v=1"></script>
-<script src="js/settings/settings.js?v=3"></script>
+<script src="js/settings/opts.js?v=2"></script>
+<script src="js/settings/settings.js?v=4"></script>
 <script src="js/env.js?v=5"></script>
 <script src="js/input/input.js?v=3"></script>
 <script src="js/gameList.js?v=3"></script>
-<script src="js/stream/stream.js?v=3"></script>
+<script src="js/stream/stream.js?v=4"></script>
 <script src="js/room.js?v=3"></script>
 <script src="js/network/ajax.js?v=3"></script>
 <script src="js/network/socket.js?v=4"></script>
diff --git a/web/js/gui/gui.js b/web/js/gui/gui.js
index 0d14ebffe..be5b603f3 100644
--- a/web/js/gui/gui.js
+++ b/web/js/gui/gui.js
@@ -147,6 +147,16 @@ const gui = (() => {
         el.classList.remove('hidden');
     }
 
+    const inputN = (key = '', cb = () => ({}), current = 0) => {
+        const el = _create();
+        const input = _create('input');
+        input.type = 'number';
+        input.value = current;
+        input.onchange = event => cb(key, event.target.value);
+        el.append(input);
+        return el;
+    }
+
     const hide = (el) => {
         el.classList.add('hidden');
     }
@@ -208,6 +218,7 @@ const gui = (() => {
         create: _create,
         fragment,
         hide,
+        inputN,
         panel,
         select,
         show,
diff --git a/web/js/settings/opts.js b/web/js/settings/opts.js
index bff7a0982..b0b2b9662 100644
--- a/web/js/settings/opts.js
+++ b/web/js/settings/opts.js
@@ -10,5 +10,6 @@ const opts = Object.freeze({
     _VERSION: '_version',
     LOG_LEVEL: 'log.level',
     INPUT_KEYBOARD_MAP: 'input.keyboard.map',
-    MIRROR_SCREEN: 'mirror.screen'
+    MIRROR_SCREEN: 'mirror.screen',
+    VOLUME: 'volume'
 });
diff --git a/web/js/settings/settings.js b/web/js/settings/settings.js
index 81b38c0c0..55dd89ddf 100644
--- a/web/js/settings/settings.js
+++ b/web/js/settings/settings.js
@@ -15,7 +15,7 @@
  */
 const settings = (() => {
     // internal structure version
-    const revision = 1.2;
+    const revision = 1.3;
 
     // default settings
     // keep them for revert to defaults option
@@ -347,6 +347,13 @@ settings._renderrer = (() => {
     // the main display data holder element
     const data = document.getElementById('settings-data');
 
+    let sx, sy = 0;
+
+    data.addEventListener("scroll", event => {
+        sx = data.scrollTop;
+        sy = data.scrollLeft;
+    }, {passive: true});
+
     // a fast way to clear data holder.
     const clearData = () => {
         while (data.firstChild) data.removeChild(data.firstChild)
@@ -428,7 +435,11 @@ settings._renderrer = (() => {
      * @param newValue A new value to set.
      * @param oldValue An old value to use somehow if needed.
      */
-    const onChange = (key, newValue, oldValue) => settings.set(key, newValue);
+    const onChange = (key, newValue, oldValue) => {
+        settings.set(key, newValue);
+        data.scrollTop = sx;
+        data.scrollLeft = sy;
+    }
 
     const onKeyBindingChange = (key, oldValue) => {
         clearData();
@@ -467,6 +478,12 @@ settings._renderrer = (() => {
                         .add(gui.select(k, onChange, {values: ['mirror']}, value))
                         .build();
                     break;
+                case opts.VOLUME:
+                    _option(data).withName('Volume (%)')
+                        .add(gui.inputN(k, onChange, value))
+                        .restartNeeded()
+                        .build()
+                    break;
                 default:
                     _option(data).withName(k).add(value).build();
             }
diff --git a/web/js/stream/stream.js b/web/js/stream/stream.js
index 9ab3dd494..5652b36ec 100644
--- a/web/js/stream/stream.js
+++ b/web/js/stream/stream.js
@@ -149,6 +149,7 @@ const stream = (() => {
 
         const init = () => {
             options.mirrorMode = settings.loadOr(opts.MIRROR_SCREEN, 'none');
+            options.volume = settings.loadOr(opts.VOLUME, 50) / 100;
         }
 
         event.sub(SETTINGS_CHANGED, () => {