Properly implement sound and music volumes, debounce writes

src/js/profile/application_settings.js

@@ -159,29 +159,13 @@ export const allApplicationSettings = [
             (app, id) => app.updateAfterUiScaleChanged(),
     }),
 
-    new BoolSetting(
-        "soundsMuted",
-        enumCategories.general,
-        /**
-         * @param {Application} app
-         */
-        (app, value) => app.sound.setSoundsMuted(value)
-    ),
     new RangeSetting(
         "soundVolume",
         enumCategories.general,
         /**
          * @param {Application} app
          */
-        (app, value) => app.sound.setSoundVolume(value / 100.0)
-    ),
-    new BoolSetting(
-        "musicMuted",
-        enumCategories.general,
-        /**
-         * @param {Application} app
-         */
-        (app, value) => app.sound.setMusicMuted(value)
+        (app, value) => app.sound.setSoundVolume(value)
     ),
     new RangeSetting(
         "musicVolume",
@@ -189,7 +173,7 @@ export const allApplicationSettings = [
         /**
          * @param {Application} app
          */
-        (app, value) => app.sound.setMusicVolume(value / 100.0)
+        (app, value) => app.sound.setMusicVolume(value)
     ),
 
     new BoolSetting(
@@ -302,8 +286,6 @@ class SettingsStorage {
         this.uiScale = "regular";
         this.fullscreen = G_IS_STANDALONE;
 
-        this.soundsMuted = false;
-        this.musicMuted = false;
         this.soundVolume = 1.0;
         this.musicVolume = 1.0;
 
@@ -515,7 +497,17 @@ export class ApplicationSettings extends ReadWriteProxy {
             const setting = allApplicationSettings[i];
             const storedValue = settings[setting.id];
             if (!setting.validate(storedValue)) {
-                return ExplainedResult.bad("Bad setting value for " + setting.id + ": " + storedValue);
+                return ExplainedResult.bad(
+                    "Bad setting value for " +
+                        setting.id +
+                        ": " +
+                        storedValue +
+                        " @ settings version " +
+                        data.version +
+                        " (latest is " +
+                        this.getCurrentVersion() +
+                        ")"
+                );
             }
         }
         return ExplainedResult.good();
@@ -529,7 +521,7 @@ export class ApplicationSettings extends ReadWriteProxy {
     }
 
     getCurrentVersion() {
-        return 24;
+        return 25;
     }
 
     /** @param {{settings: SettingsStorage, version: number}} data */
@@ -633,12 +625,21 @@ export class ApplicationSettings extends ReadWriteProxy {
         }
 
         if (data.version < 24) {
-            data.settings.musicVolume = 1.0;
-            data.settings.soundVolume = 1.0;
             data.settings.refreshRate = "60";
             data.version = 24;
         }
 
+        if (data.version < 25) {
+            data.settings.musicVolume = 0.5;
+            data.settings.soundVolume = 0.5;
+
+            // @ts-ignore
+            delete data.settings.musicMuted;
+            // @ts-ignore
+            delete data.settings.soundsMuted;
+            data.version = 25;
+        }
+
         return ExplainedResult.good();
     }
 }

src/js/profile/setting_types.js

@@ -227,10 +227,10 @@ export class RangeSetting extends BaseSetting {
         category,
         changeCb = null,
         enabled = true,
-        defaultValue = 100,
+        defaultValue = 1.0,
         minValue = 0,
-        maxValue = 100,
-        stepSize = 1
+        maxValue = 1.0,
+        stepSize = 0.0001
     ) {
         super(id, category, changeCb, enabled);
 
@@ -247,9 +247,9 @@ export class RangeSetting extends BaseSetting {
 
             <div class="row">
                 <label>${T.settings.labels[this.id].title}</label>
-                <div class="value range" data-setting="${this.id}">
-                    <label class="range-label">${this.defaultValue}</label>
-                    <input class="range-input" type="range" value="${this.defaultValue}" min="${
+                <div class="value rangeInputContainer noPressEffect" data-setting="${this.id}">
+                    <label>${this.defaultValue}</label>
+                    <input class="rangeInput" type="range" value="${this.defaultValue}" min="${
             this.minValue
         }" max="${this.maxValue}" step="${this.stepSize}">
                 </div>
@@ -265,33 +265,58 @@ export class RangeSetting extends BaseSetting {
         this.element = element;
         this.dialogs = dialogs;
 
-        this.element.querySelector(".range-input").addEventListener("input", () => {
+        this.getRangeInputElement().addEventListener("input", () => {
+            this.updateLabels();
+        });
+
+        this.getRangeInputElement().addEventListener("change", () => {
             this.modify();
         });
     }
 
     syncValueToElement() {
         const value = this.app.settings.getSetting(this.id);
-        /** @type {HTMLInputElement} */
-        const rangeInput = this.element.querySelector(".range-input"),
-            rangeLabel = this.element.querySelector(".range-label");
-        rangeInput.value = value;
-        rangeLabel.innerHTML = value;
+        this.setElementValue(value);
+    }
+
+    /**
+     * Sets the elements value to the given value
+     * @param {number} value
+     */
+    setElementValue(value) {
+        const rangeInput = this.getRangeInputElement();
+        const rangeLabel = this.element.querySelector("label");
+        rangeInput.value = String(value);
+        rangeLabel.innerHTML = T.settings.rangeSliderPercentage.replace(
+            "<amount>",
+            String(Math.round(value * 100.0))
+        );
+    }
+
+    updateLabels() {
+        const value = Number(this.getRangeInputElement().value);
+        this.setElementValue(value);
+    }
+
+    /**
+     * @returns {HTMLInputElement}
+     */
+    getRangeInputElement() {
+        return this.element.querySelector("input.rangeInput");
     }
 
     modify() {
-        /** @type {HTMLInputElement} */
-        const rangeInput = this.element.querySelector(".range-input");
-        const newValue = Number(rangeInput.value);
+        const rangeInput = this.getRangeInputElement();
+        const newValue = Math.round(Number(rangeInput.value) * 100.0) / 100.0;
         this.app.settings.updateSetting(this.id, newValue);
         this.syncValueToElement();
-
+        console.log("SET", newValue);
         if (this.changeCb) {
             this.changeCb(this.app, newValue);
         }
     }
 
     validate(value) {
-        return typeof value === "number";
+        return typeof value === "number" && value >= this.minValue && value <= this.maxValue;
     }
 }