Add ugly persistent volume option

web/index.html

@@ -118,16 +118,16 @@
 
 <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>

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,

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'
 });

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();
             }

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, () => {