feat(web-ui): replace dropdown menus with checkboxes (#3455)

src_assets/common/assets/web/configs/tabs/encoders/AmdAmfEncoder.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue'
+import Checkbox from "../../../Checkbox.vue";
 
 const props = defineProps([
   'platform',
@@ -25,7 +26,7 @@ const config = ref(props.config)
     </div>
 
     <!-- AMD Rate Control group options -->
-    <div class="accordion">
+    <div class="mb-3 accordion">
       <div class="accordion-item">
         <h2 class="accordion-header">
           <button class="accordion-button" type="button" data-bs-toggle="collapse"
@@ -49,21 +50,19 @@ const config = ref(props.config)
             </div>
 
             <!-- AMF HRD Enforcement -->
-            <div class="mb-3">
-              <label for="amd_enforce_hrd" class="form-label">{{ $t('config.amd_enforce_hrd') }}</label>
-              <select id="amd_enforce_hrd" class="form-select" v-model="config.amd_enforce_hrd">
-                <option value="enabled">{{ $t('_common.enabled') }}</option>
-                <option value="disabled">{{ $t('_common.disabled_def') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.amd_enforce_hrd_desc') }}</div>
-            </div>
+            <Checkbox class="mb-3"
+                      id="amd_enforce_hrd"
+                      locale-prefix="config"
+                      v-model="config.amd_enforce_hrd"
+                      default="false"
+            ></Checkbox>
           </div>
         </div>
       </div>
     </div>
 
     <!-- AMF Quality group options -->
-    <div class="accordion">
+    <div class="mb-3 accordion">
       <div class="accordion-item">
         <h2 class="accordion-header">
           <button class="accordion-button" type="button" data-bs-toggle="collapse"
@@ -86,24 +85,20 @@ const config = ref(props.config)
             </div>
 
             <!-- AMD Preanalysis -->
-            <div class="mb-3">
-              <label for="amd_preanalysis" class="form-label">{{ $t('config.amd_preanalysis') }}</label>
-              <select id="amd_preanalysis" class="form-select" v-model="config.amd_preanalysis">
-                <option value="disabled">{{ $t('_common.disabled_def') }}</option>
-                <option value="enabled">{{ $t('_common.enabled') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.amd_preanalysis_desc') }}</div>
-            </div>
+            <Checkbox class="mb-3"
+                      id="amd_preanalysis"
+                      locale-prefix="config"
+                      v-model="config.amd_preanalysis"
+                      default="false"
+            ></Checkbox>
 
             <!-- AMD VBAQ -->
-            <div class="mb-3">
-              <label for="amd_vbaq" class="form-label">{{ $t('config.amd_vbaq') }}</label>
-              <select id="amd_vbaq" class="form-select" v-model="config.amd_vbaq">
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.amd_vbaq_desc') }}</div>
-            </div>
+            <Checkbox class="mb-3"
+                      id="amd_vbaq"
+                      locale-prefix="config"
+                      v-model="config.amd_vbaq"
+                      default="true"
+            ></Checkbox>
 
             <!-- AMF Coder (H264) -->
             <div class="mb-3">

src_assets/common/assets/web/configs/tabs/encoders/IntelQuickSyncEncoder.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue'
+import Checkbox from "../../../Checkbox.vue";
 
 const props = defineProps([
   'platform',
@@ -36,15 +37,12 @@ const config = ref(props.config)
     </div>
 
     <!-- Allow Slow HEVC Encoding -->
-    <div class="mb-3">
-      <label for="qsv_slow_hevc" class="form-label">{{ $t('config.qsv_slow_hevc') }}</label>
-      <select id="qsv_slow_hevc" class="form-select" v-model="config.qsv_slow_hevc">
-        <option value="disabled">{{ $t('_common.disabled_def') }}</option>
-        <option value="enabled">{{ $t('_common.enabled') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.qsv_slow_hevc_desc') }}</div>
-    </div>
-
+    <Checkbox class="mb-3"
+              id="qsv_slow_hevc"
+              locale-prefix="config"
+              v-model="config.qsv_slow_hevc"
+              default="false"
+    ></Checkbox>
   </div>
 </template>
 

src_assets/common/assets/web/configs/tabs/encoders/NvidiaNvencEncoder.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue'
+import Checkbox from "../../../Checkbox.vue";
 
 const props = defineProps([
   'platform',
@@ -60,7 +61,7 @@ const config = ref(props.config)
     </div>
 
     <!-- Miscellaneous options -->
-    <div class="accordion">
+    <div class="mb-3 accordion">
       <div class="accordion-item">
         <h2 class="accordion-header">
           <button class="accordion-button" type="button" data-bs-toggle="collapse"
@@ -72,48 +73,43 @@ const config = ref(props.config)
              aria-labelledby="panelsStayOpen-headingOne">
           <div class="accordion-body">
             <!-- NVENC Realtime HAGS priority -->
-            <div class="mb-3" v-if="platform === 'windows'">
-              <label for="nvenc_realtime_hags" class="form-label">{{ $t('config.nvenc_realtime_hags') }}</label>
-              <select id="nvenc_realtime_hags" class="form-select" v-model="config.nvenc_realtime_hags">
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-              </select>
-              <div class="form-text">
-                {{ $t('config.nvenc_realtime_hags_desc') }}<br>
-                <br>
-                <a href="https://devblogs.microsoft.com/directx/hardware-accelerated-gpu-scheduling/">HAGS</a>
-              </div>
-            </div>
+            <Checkbox v-if="platform === 'windows'"
+                      class="mb-3"
+                      id="nvenc_realtime_hags"
+                      locale-prefix="config"
+                      v-model="config.nvenc_realtime_hags"
+                      default="true"
+            >
+              <br>
+              <br>
+              <a href="https://devblogs.microsoft.com/directx/hardware-accelerated-gpu-scheduling/">HAGS</a>
+            </Checkbox>
 
             <!-- Prefer lower encoding latency over power savings -->
-            <div class="mb-3" v-if="platform === 'windows'">
-              <label for="nvenc_latency_over_power" class="form-label">{{ $t('config.nvenc_latency_over_power') }}</label>
-              <select id="nvenc_latency_over_power" class="form-select" v-model="config.nvenc_latency_over_power">
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.nvenc_latency_over_power_desc') }}</div>
-            </div>
+            <Checkbox v-if="platform === 'windows'"
+                      class="mb-3"
+                      id="nvenc_latency_over_power"
+                      locale-prefix="config"
+                      v-model="config.nvenc_latency_over_power"
+                      default="true"
+            ></Checkbox>
 
             <!-- Present OpenGL/Vulkan on top of DXGI -->
-            <div class="mb-3" v-if="platform === 'windows'">
-              <label for="nvenc_opengl_vulkan_on_dxgi" class="form-label">{{ $t('config.nvenc_opengl_vulkan_on_dxgi') }}</label>
-              <select id="nvenc_opengl_vulkan_on_dxgi" class="form-select" v-model="config.nvenc_opengl_vulkan_on_dxgi">
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.nvenc_opengl_vulkan_on_dxgi_desc') }}</div>
-            </div>
+            <Checkbox v-if="platform === 'windows'"
+                      class="mb-3"
+                      id="nvenc_opengl_vulkan_on_dxgi"
+                      locale-prefix="config"
+                      v-model="config.nvenc_opengl_vulkan_on_dxgi"
+                      default="true"
+            ></Checkbox>
 
             <!-- NVENC H264 CAVLC -->
-            <div>
-              <label for="nvenc_h264_cavlc" class="form-label">{{ $t('config.nvenc_h264_cavlc') }}</label>
-              <select id="nvenc_h264_cavlc" class="form-select" v-model="config.nvenc_h264_cavlc">
-                <option value="disabled">{{ $t('_common.disabled_def') }}</option>
-                <option value="enabled">{{ $t('_common.enabled') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.nvenc_h264_cavlc_desc') }}</div>
-            </div>
+            <Checkbox class="mb-3"
+                      id="nvenc_h264_cavlc"
+                      locale-prefix="config"
+                      v-model="config.nvenc_h264_cavlc"
+                      default="false"
+            ></Checkbox>
           </div>
         </div>
       </div>

src_assets/common/assets/web/configs/tabs/encoders/VAAPIEncoder.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue'
+import Checkbox from "../../../Checkbox.vue";
 
 const props = defineProps([
   'platform',
@@ -12,14 +13,12 @@ const config = ref(props.config)
 <template>
   <div id="vaapi-encoder" class="config-page">
     <!-- Strict RC Buffer -->
-    <div class="mb-3">
-      <label for="vaapi_strict_rc_buffer" class="form-label">{{ $t('config.vaapi_strict_rc_buffer') }}</label>
-      <select id="vaapi_strict_rc_buffer" class="form-select" v-model="config.vaapi_strict_rc_buffer">
-        <option value="enabled">{{ $t('_common.enabled') }}</option>
-        <option value="disabled">{{ $t('_common.disabled_def') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.vaapi_strict_rc_buffer_desc') }}</div>
-    </div>
+    <Checkbox class="mb-3"
+              id="vaapi_strict_rc_buffer"
+              locale-prefix="config"
+              v-model="config.vaapi_strict_rc_buffer"
+              default="false"
+    ></Checkbox>
   </div>
 </template>
 

src_assets/common/assets/web/configs/tabs/encoders/VideotoolboxEncoder.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue'
+import Checkbox from "../../../Checkbox.vue";
 
 const props = defineProps([
   'platform',
@@ -29,13 +30,13 @@ const config = ref(props.config)
         <option value="forced">{{ $t('config.vt_software_forced') }}</option>
       </select>
     </div>
-    <div class="mb-3">
-      <label for="vt_realtime" class="form-label">{{ $t('config.vt_realtime') }}</label>
-      <select id="vt_realtime" class="form-select" v-model="config.vt_realtime">
-        <option value="enabled">{{ $t('_common.enabled') }}</option>
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-      </select>
-    </div>
+    <Checkbox class="mb-3"
+              id="vt_realtime"
+              desc=""
+              locale-prefix="config"
+              v-model="config.vt_realtime"
+              default="true"
+    ></Checkbox>
   </div>
 </template>