src/csui/src/PlayerUiPanels/PlayerUiSettings.vue

@@ -22,13 +22,14 @@
             <input type="checkbox" v-model="settings.active.ui.inPlayer.enabledFullscreenOnly" />
           </div>
 
-          <div class="field disabled">
+          <div class="field">
             <div class="label">
               Popup activator position:
             </div>
             <div class="select">
               <select
-                v-model="settings.active.ui.inPlayer.popupAlignment"
+                v-model="settings.active.ui.inPlayer.alignment"
+                @click="setUiOption('alignment', $event)"
                 @change="saveSettings()"
               >
                 <option value="left">Left</option>
@@ -44,6 +45,7 @@
             <div class="select">
               <select
                 v-model="settings.active.ui.inPlayer.activation"
+                @click="setUiOption('', $event)"
                 @change="saveSettings()"
               >
                 <option value="player">
@@ -56,7 +58,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>
@@ -65,46 +67,7 @@
             <div class="label">
               Do not show in-player UI when video player is narrower than (% of screen width)
             </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>TODO: slider</div>
           </div>
         </div>
       </div>
@@ -171,46 +134,14 @@ export default {
   ],
   created() {
   },
-  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);
-    }
+  mounted() {
   },
   methods: {
-    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, '');
-    },
-    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;
-      }
+    setUiPage(key, event) {
 
-      this.settings.active.ui.inPlayer[key] = value;
     },
-    saveSettings(forceRefresh) {
+    saveSettings() {
       this.settings.saveWithoutReload();
-
-      if (forceRefresh) {
-        this.$nextTick( () => this.$forceRefresh() );
-      }
     },
     startTriggerZoneEdit() {
       this.eventBus.send('start-trigger-zone-edit');
@@ -276,6 +207,8 @@ export default {
 }
 
 .compact-form {
+
+
   > .field, > .field-group {
     margin-top: 0;
     margin-bottom: 0;