Fix sliders, but for real

src/csui/src/PlayerUiPanels/PlayerUiSettings.vue

@@ -22,14 +22,13 @@
             <input type="checkbox" v-model="settings.active.ui.inPlayer.enabledFullscreenOnly" />
           </div>
 
-          <div class="field">
+          <div class="field disabled">
             <div class="label">
               Popup activator position:
             </div>
             <div class="select">
               <select
-                v-model="settings.active.ui.inPlayer.alignment"
-                @click="setUiOption('alignment', $event)"
+                v-model="settings.active.ui.inPlayer.popupAlignment"
                 @change="saveSettings()"
               >
                 <option value="left">Left</option>
@@ -45,7 +44,6 @@
             <div class="select">
               <select
                 v-model="settings.active.ui.inPlayer.activation"
-                @click="setUiOption('', $event)"
                 @change="saveSettings()"
               >
                 <option value="player">
@@ -58,7 +56,7 @@
             </div>
           </div>
 
-          <div class="field" :class="{disabled: settings.active.ui.inPlayer.activation !== 'trigger-zone'}">
+          <div class="field" :class="{'disabled': settings.active.ui.inPlayer.activation !== 'trigger-zone'}">
             <div class="label">Edit trigger zone:</div>
             <button @click="startTriggerZoneEdit()">Edit</button>
           </div>
@@ -67,7 +65,46 @@
             <div class="label">
               Do not show in-player UI when video player is narrower than (% of screen width)
             </div>
-            <div>TODO: slider</div>
+            <div class="input range-input">
+              <input
+                :value="settings.active.ui.inPlayer.maxEnabledWidth"
+                class="slider"
+                type="range"
+                min="0"
+                max="1"
+                step="0.01"
+                @input="(event) => setPlayerRestrictions('maxEnabledWidth', event.target.value)"
+                @change="(event) => saveSettings()"
+              >
+              <input
+                :value="maxEnabledWidth"
+                @input="(event) => setPlayerRestrictions('maxEnabledWidth', event.target.value, true)"
+                @change="(event) => saveSettings(true)"
+              >
+            </div>
+          </div>
+
+          <div class="field">
+            <div class="label">
+              Do not show in-player UI when video player is shorter than (% of screen width)
+            </div>
+            <div class="input range-input">
+              <input
+                :value="settings.active.ui.inPlayer.minEnabledHeight"
+                class="slider"
+                type="range"
+                min="0"
+                max="1"
+                step="0.01"
+                @input="(event) => setPlayerRestrictions('minEnabledHeight', event.target.value)"
+                @change="(event) => saveSettings()"
+              >
+              <input
+                :value="minEnabledHeight"
+                @input="(event) => setPlayerRestrictions('minEnabledHeight', event.target.value, true)"
+                @change="(event) => saveSettings(true)"
+              >
+            </div>
           </div>
         </div>
       </div>
@@ -134,14 +171,46 @@ export default {
   ],
   created() {
   },
-  mounted() {
+  computed: {
+    maxEnabledWidth() {
+      const v = this.settings.active.ui.inPlayer.maxEnabledWidth * 100;
+      return this.optionalToFixed(v, 0);
+    },
+    minEnabledHeight() {
+      const v = this.settings.active.ui.inPlayer.minEnabledHeight * 100;
+      return this.optionalToFixed(v, 0);
+    }
   },
   methods: {
-    setUiPage(key, event) {
-
+    forcePositiveNumber(value) {
+      //       Change EU format to US if needed
+      //                  |       remove everything after second period if necessary
+      //                  |               |            |   remove non-numeric characters
+      //                  |               |            |           |
+      return value.replaceAll(',', '.').split('.', 2).join('.').replace(/[^0-9.]/g, '');
     },
-    saveSettings() {
+    optionalToFixed(v, n) {
+      if ((`${v}`.split('.')[1]?.length ?? 0) > n) {
+        return v.toFixed(n);
+      }
+      return v;
+    },
+    setPlayerRestrictions(key, value, isTextInput) {
+      if (isTextInput) {
+        value = (+this.forcePositiveNumber(value) / 100);
+      }
+      if (isNaN(+value)) {
+        value = 0.5;
+      }
+
+      this.settings.active.ui.inPlayer[key] = value;
+    },
+    saveSettings(forceRefresh) {
       this.settings.saveWithoutReload();
+
+      if (forceRefresh) {
+        this.$nextTick( () => this.$forceRefresh() );
+      }
     },
     startTriggerZoneEdit() {
       this.eventBus.send('start-trigger-zone-edit');
@@ -207,8 +276,6 @@ export default {
 }
 
 .compact-form {
-
-
   > .field, > .field-group {
     margin-top: 0;
     margin-bottom: 0;