From 7743dd8e7f2898b8d9bb5c7680d1d3d4b94dff33 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 28 Dec 2024 02:02:01 +0100
Subject: [PATCH] Add sliders

---
 .../src/PlayerUiPanels/PlayerUiSettings.vue   | 41 +++++++++++++++++--
 1 file changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/csui/src/PlayerUiPanels/PlayerUiSettings.vue b/src/csui/src/PlayerUiPanels/PlayerUiSettings.vue
index a6b2c95..fd2a2d9 100644
--- a/src/csui/src/PlayerUiPanels/PlayerUiSettings.vue
+++ b/src/csui/src/PlayerUiPanels/PlayerUiSettings.vue
@@ -67,7 +67,44 @@
             <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.minEnabledWidth"
+                class="slider"
+                type="range"
+                min="0"
+                max="1"
+                step="0.01"
+                @input="(event) => setPlayerRestrictions('minEnabledWidth', event.target.value, true)"
+              >
+              <input
+                :value="settings.active.ui.inPlayer.minEnabledWidth"
+                @input="(event) => setPlayerRestrictions('minEnabledWidth', event.target.value)"
+                @change="(event) => saveSettings()"
+              >
+            </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, true)"
+              >
+              <input
+                :value="minEnabledHeight"
+                @input="(event) => setPlayerRestrictions('minEnabledHeight', event.target.value)"
+                @change="(event) => saveSettings()"
+              >
+            </div>
           </div>
         </div>
       </div>
@@ -207,8 +244,6 @@ export default {
 }
 
 .compact-form {
-
-
   > .field, > .field-group {
     margin-top: 0;
     margin-bottom: 0;