feat(web-ui): replace dropdown menus with checkboxes (#3455)
This commit is contained in:
@@ -6,6 +6,7 @@ import AdapterNameSelector from './audiovideo/AdapterNameSelector.vue'
|
||||
import DisplayOutputSelector from './audiovideo/DisplayOutputSelector.vue'
|
||||
import DisplayDeviceOptions from "./audiovideo/DisplayDeviceOptions.vue";
|
||||
import DisplayModesSettings from "./audiovideo/DisplayModesSettings.vue";
|
||||
import Checkbox from "../../Checkbox.vue";
|
||||
|
||||
const props = defineProps([
|
||||
'platform',
|
||||
@@ -54,14 +55,12 @@ const config = ref(props.config)
|
||||
</div>
|
||||
|
||||
<!-- Install Steam Audio Drivers -->
|
||||
<div class="mb-3">
|
||||
<label for="install_steam_audio_drivers" class="form-label">{{ $t('config.install_steam_audio_drivers') }}</label>
|
||||
<select id="install_steam_audio_drivers" class="form-select" v-model="config.install_steam_audio_drivers">
|
||||
<option value="disabled">{{ $t('_common.disabled') }}</option>
|
||||
<option value="enabled">{{ $t('_common.enabled_def') }}</option>
|
||||
</select>
|
||||
<div class="form-text">{{ $t('config.install_steam_audio_drivers_desc') }}</div>
|
||||
</div>
|
||||
<Checkbox class="mb-3"
|
||||
id="install_steam_audio_drivers"
|
||||
locale-prefix="config"
|
||||
v-model="config.install_steam_audio_drivers"
|
||||
default="true"
|
||||
></Checkbox>
|
||||
</template>
|
||||
</PlatformLayout>
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script setup>
|
||||
import Checkbox from '../../Checkbox.vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
@@ -100,12 +101,12 @@ function removeCmd(index) {
|
||||
<td>
|
||||
<input type="text" class="form-control monospace" v-model="c.undo" />
|
||||
</td>
|
||||
<td v-if="platform === 'windows'">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" :id="'prep-cmd-admin-' + i" v-model="c.elevated"
|
||||
true-value="true" false-value="false" />
|
||||
<label :for="'prep-cmd-admin-' + i" class="form-check-label">{{ $t('config.elevated') }}</label>
|
||||
</div>
|
||||
<td v-if="platform === 'windows'" class="align-middle">
|
||||
<Checkbox :id="'prep-cmd-admin-' + i"
|
||||
label="_common.elevated"
|
||||
desc=""
|
||||
v-model="c.elevated"
|
||||
></Checkbox>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-danger" @click="removeCmd(i)">
|
||||
@@ -124,14 +125,12 @@ function removeCmd(index) {
|
||||
</div>
|
||||
|
||||
<!-- Notify Pre-Releases -->
|
||||
<div class="mb-3">
|
||||
<label for="notify_pre_releases" class="form-label">{{ $t('config.notify_pre_releases') }}</label>
|
||||
<select id="notify_pre_releases" class="form-select" v-model="config.notify_pre_releases">
|
||||
<option value="disabled">{{ $t('_common.disabled') }}</option>
|
||||
<option value="enabled">{{ $t('_common.enabled') }}</option>
|
||||
</select>
|
||||
<div class="form-text">{{ $t('config.notify_pre_releases_desc') }}</div>
|
||||
</div>
|
||||
<Checkbox class="mb-3"
|
||||
id="notify_pre_releases"
|
||||
locale-prefix="config"
|
||||
v-model="config.notify_pre_releases"
|
||||
default="false"
|
||||
></Checkbox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import PlatformLayout from '../../PlatformLayout.vue'
|
||||
import Checkbox from "../../Checkbox.vue";
|
||||
|
||||
const props = defineProps([
|
||||
'platform',
|
||||
@@ -13,14 +14,12 @@ const config = ref(props.config)
|
||||
<template>
|
||||
<div id="input" class="config-page">
|
||||
<!-- Enable Gamepad Input -->
|
||||
<div class="mb-3">
|
||||
<label for="controller" class="form-label">{{ $t('config.controller') }}</label>
|
||||
<select id="controller" class="form-select" v-model="config.controller">
|
||||
<option value="disabled">{{ $t('_common.disabled') }}</option>
|
||||
<option value="enabled">{{ $t('_common.enabled') }}</option>
|
||||
</select>
|
||||
<div class="form-text">{{ $t('config.controller_desc') }}</div>
|
||||
</div>
|
||||
<Checkbox class="mb-3"
|
||||
id="controller"
|
||||
locale-prefix="config"
|
||||
v-model="config.controller"
|
||||
default="true"
|
||||
></Checkbox>
|
||||
|
||||
<!-- Emulated Gamepad Type -->
|
||||
<div class="mb-3" v-if="config.controller === 'enabled' && platform !== 'macos'">
|
||||
@@ -44,63 +43,53 @@ const config = ref(props.config)
|
||||
<div class="form-text">{{ $t('config.gamepad_desc') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion" v-if="config.gamepad === 'ds4'">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#panelsStayOpen-collapseOne">
|
||||
{{ $t('config.gamepad_ds4_manual') }}
|
||||
</button>
|
||||
</h2>
|
||||
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
|
||||
aria-labelledby="panelsStayOpen-headingOne">
|
||||
<div class="accordion-body">
|
||||
<div>
|
||||
<label for="ds4_back_as_touchpad_click" class="form-label">{{ $t('config.ds4_back_as_touchpad_click') }}</label>
|
||||
<select id="ds4_back_as_touchpad_click" class="form-select"
|
||||
v-model="config.ds4_back_as_touchpad_click">
|
||||
<option value="disabled">{{ $t('_common.disabled') }}</option>
|
||||
<option value="enabled">{{ $t('_common.enabled_def') }}</option>
|
||||
</select>
|
||||
<div class="form-text">{{ $t('config.ds4_back_as_touchpad_click_desc') }}</div>
|
||||
<!-- Additional options based on gamepad type -->
|
||||
<template v-if="config.controller === 'enabled'">
|
||||
<template v-if="config.gamepad === 'ds4' || (config.gamepad === 'auto' && platform === 'windows')">
|
||||
<div class="mb-3 accordion">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#panelsStayOpen-collapseOne">
|
||||
{{ $t(config.gamepad === 'ds4' ? 'config.gamepad_ds4_manual' : 'config.gamepad_auto') }}
|
||||
</button>
|
||||
</h2>
|
||||
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
|
||||
aria-labelledby="panelsStayOpen-headingOne">
|
||||
<div class="accordion-body">
|
||||
<!-- Auto options (Windows only) -->
|
||||
<template v-if="config.gamepad === 'auto'">
|
||||
<!-- DS4 motion -->
|
||||
<Checkbox class="mb-3"
|
||||
id="motion_as_ds4"
|
||||
locale-prefix="config"
|
||||
v-model="config.motion_as_ds4"
|
||||
default="true"
|
||||
></Checkbox>
|
||||
<!-- DS4 touchpad -->
|
||||
<Checkbox class="mb-3"
|
||||
id="touchpad_as_ds4"
|
||||
locale-prefix="config"
|
||||
v-model="config.touchpad_as_ds4"
|
||||
default="true"
|
||||
></Checkbox>
|
||||
</template>
|
||||
<!-- DS4 options (all platforms) -->
|
||||
<template v-if="config.gamepad === 'ds4'">
|
||||
<!-- DS4 back button as touchpad click -->
|
||||
<Checkbox class="mb-3"
|
||||
id="ds4_back_as_touchpad_click"
|
||||
locale-prefix="config"
|
||||
v-model="config.ds4_back_as_touchpad_click"
|
||||
default="true"
|
||||
></Checkbox>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion" v-if="config.controller === 'enabled' && config.gamepad === 'auto' && platform === 'windows'">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#panelsStayOpen-collapseOne">
|
||||
{{ $t('config.gamepad_auto') }}
|
||||
</button>
|
||||
</h2>
|
||||
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
|
||||
aria-labelledby="panelsStayOpen-headingOne">
|
||||
<div class="accordion-body">
|
||||
<div>
|
||||
<label for="motion_as_ds4" class="form-label">{{ $t('config.motion_as_ds4') }}</label>
|
||||
<select id="motion_as_ds4" class="form-select"
|
||||
v-model="config.motion_as_ds4">
|
||||
<option value="disabled">{{ $t('_common.disabled') }}</option>
|
||||
<option value="enabled">{{ $t('_common.enabled_def') }}</option>
|
||||
</select>
|
||||
<div class="form-text">{{ $t('config.motion_as_ds4_desc') }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="touchpad_as_ds4" class="form-label">{{ $t('config.touchpad_as_ds4') }}</label>
|
||||
<select id="touchpad_as_ds4" class="form-select"
|
||||
v-model="config.touchpad_as_ds4">
|
||||
<option value="disabled">{{ $t('_common.disabled') }}</option>
|
||||
<option value="enabled">{{ $t('_common.enabled_def') }}</option>
|
||||
</select>
|
||||
<div class="form-text">{{ $t('config.touchpad_as_ds4_desc') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- Home/Guide Button Emulation Timeout -->
|
||||
<div class="mb-3" v-if="config.controller === 'enabled'">
|
||||
@@ -112,14 +101,12 @@ const config = ref(props.config)
|
||||
|
||||
<!-- Enable Keyboard Input -->
|
||||
<hr>
|
||||
<div class="mb-3">
|
||||
<label for="keyboard" class="form-label">{{ $t('config.keyboard') }}</label>
|
||||
<select id="keyboard" class="form-select" v-model="config.keyboard">
|
||||
<option value="disabled">{{ $t('_common.disabled') }}</option>
|
||||
<option value="enabled">{{ $t('_common.enabled_def') }}</option>
|
||||
</select>
|
||||
<div class="form-text">{{ $t('config.keyboard_desc') }}</div>
|
||||
</div>
|
||||
<Checkbox class="mb-3"
|
||||
id="keyboard"
|
||||
locale-prefix="config"
|
||||
v-model="config.keyboard"
|
||||
default="true"
|
||||
></Checkbox>
|
||||
|
||||
<!-- Key Repeat Delay-->
|
||||
<div class="mb-3" v-if="config.keyboard === 'enabled' && platform === 'windows'">
|
||||
@@ -138,56 +125,49 @@ const config = ref(props.config)
|
||||
</div>
|
||||
|
||||
<!-- Always send scancodes -->
|
||||
<div class="mb-3" v-if="config.keyboard === 'enabled' && platform === 'windows'">
|
||||
<label for="always_send_scancodes" class="form-label">{{ $t('config.always_send_scancodes') }}</label>
|
||||
<select id="always_send_scancodes" class="form-select" v-model="config.always_send_scancodes">
|
||||
<option value="disabled">{{ $t('_common.disabled') }}</option>
|
||||
<option value="enabled">{{ $t('_common.enabled_def') }}</option>
|
||||
</select>
|
||||
<div class="form-text">{{ $t('config.always_send_scancodes_desc') }}</div>
|
||||
</div>
|
||||
<Checkbox v-if="config.keyboard === 'enabled' && platform === 'windows'"
|
||||
class="mb-3"
|
||||
id="always_send_scancodes"
|
||||
locale-prefix="config"
|
||||
v-model="config.always_send_scancodes"
|
||||
default="true"
|
||||
></Checkbox>
|
||||
|
||||
<!-- Mapping Key AltRight to Key Windows -->
|
||||
<div class="mb-3" v-if="config.keyboard === 'enabled'">
|
||||
<label for="key_rightalt_to_key_win" class="form-label">{{ $t('config.key_rightalt_to_key_win') }}</label>
|
||||
<select id="key_rightalt_to_key_win" class="form-select" v-model="config.key_rightalt_to_key_win">
|
||||
<option value="disabled">{{ $t('_common.disabled') }}</option>
|
||||
<option value="enabled">{{ $t('_common.enabled_def') }}</option>
|
||||
</select>
|
||||
<div class="form-text">{{ $t('config.key_rightalt_to_key_win_desc') }}</div>
|
||||
</div>
|
||||
<Checkbox v-if="config.keyboard === 'enabled'"
|
||||
class="mb-3"
|
||||
id="key_rightalt_to_key_win"
|
||||
locale-prefix="config"
|
||||
v-model="config.key_rightalt_to_key_win"
|
||||
default="false"
|
||||
></Checkbox>
|
||||
|
||||
<!-- Enable Mouse Input -->
|
||||
<hr>
|
||||
<div class="mb-3">
|
||||
<label for="mouse" class="form-label">{{ $t('config.mouse') }}</label>
|
||||
<select id="mouse" class="form-select" v-model="config.mouse">
|
||||
<option value="disabled">{{ $t('_common.disabled') }}</option>
|
||||
<option value="enabled">{{ $t('_common.enabled_def') }}</option>
|
||||
</select>
|
||||
<div class="form-text">{{ $t('config.mouse_desc') }}</div>
|
||||
</div>
|
||||
<Checkbox class="mb-3"
|
||||
id="mouse"
|
||||
locale-prefix="config"
|
||||
v-model="config.mouse"
|
||||
default="true"
|
||||
></Checkbox>
|
||||
|
||||
<!-- High resolution scrolling support -->
|
||||
<div class="mb-3" v-if="config.mouse === 'enabled'">
|
||||
<label for="high_resolution_scrolling" class="form-label">{{ $t('config.high_resolution_scrolling') }}</label>
|
||||
<select id="high_resolution_scrolling" class="form-select" v-model="config.high_resolution_scrolling">
|
||||
<option value="disabled">{{ $t('_common.disabled') }}</option>
|
||||
<option value="enabled">{{ $t('_common.enabled_def') }}</option>
|
||||
</select>
|
||||
<div class="form-text">{{ $t('config.high_resolution_scrolling_desc') }}</div>
|
||||
</div>
|
||||
<Checkbox v-if="config.mouse === 'enabled'"
|
||||
class="mb-3"
|
||||
id="high_resolution_scrolling"
|
||||
locale-prefix="config"
|
||||
v-model="config.high_resolution_scrolling"
|
||||
default="true"
|
||||
></Checkbox>
|
||||
|
||||
<!-- Native pen/touch support -->
|
||||
<div class="mb-3" v-if="config.mouse === 'enabled'">
|
||||
<label for="native_pen_touch" class="form-label">{{ $t('config.native_pen_touch') }}</label>
|
||||
<select id="native_pen_touch" class="form-select" v-model="config.native_pen_touch">
|
||||
<option value="disabled">{{ $t('_common.disabled') }}</option>
|
||||
<option value="enabled">{{ $t('_common.enabled_def') }}</option>
|
||||
</select>
|
||||
<div class="form-text">{{ $t('config.native_pen_touch_desc') }}</div>
|
||||
</div>
|
||||
|
||||
<Checkbox v-if="config.mouse === 'enabled'"
|
||||
class="mb-3"
|
||||
id="native_pen_touch"
|
||||
locale-prefix="config"
|
||||
v-model="config.native_pen_touch"
|
||||
default="true"
|
||||
></Checkbox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import Checkbox from "../../Checkbox.vue";
|
||||
|
||||
const props = defineProps([
|
||||
'platform',
|
||||
@@ -15,14 +16,12 @@ const effectivePort = computed(() => +config.value?.port ?? defaultMoonlightPort
|
||||
<template>
|
||||
<div id="network" class="config-page">
|
||||
<!-- UPnP -->
|
||||
<div class="mb-3">
|
||||
<label for="upnp" class="form-label">{{ $t('config.upnp') }}</label>
|
||||
<select id="upnp" class="form-select" v-model="config.upnp">
|
||||
<option value="disabled">{{ $t('_common.disabled_def') }}</option>
|
||||
<option value="enabled">{{ $t('_common.enabled') }}</option>
|
||||
</select>
|
||||
<div class="form-text">{{ $t('config.upnp_desc') }}</div>
|
||||
</div>
|
||||
<Checkbox class="mb-3"
|
||||
id="upnp"
|
||||
locale-prefix="config"
|
||||
v-model="config.upnp"
|
||||
default="false"
|
||||
></Checkbox>
|
||||
|
||||
<!-- Address family -->
|
||||
<div class="mb-3">
|
||||
|
||||
@@ -20,7 +20,7 @@ const config = ref(props.config)
|
||||
<div class="form-text">
|
||||
<PlatformLayout :platform="platform">
|
||||
<template #windows>
|
||||
{{ $t('config.adapter_name_desc_win') }}<br>
|
||||
{{ $t('config.adapter_name_desc_windows') }}<br>
|
||||
<pre>tools\dxgi-info.exe</pre>
|
||||
</template>
|
||||
<template #linux>
|
||||
|
||||
@@ -16,14 +16,11 @@ const fpsIn = ref("")
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!--min_fps_factor-->
|
||||
<div class="mb-3">
|
||||
<!--min_fps_factor-->
|
||||
<div class="mb-3">
|
||||
<label for="qp" class="form-label">{{ $t('config.min_fps_factor') }}</label>
|
||||
<input type="number" min="1" max="3" class="form-control" id="min_fps_factor" placeholder="1" v-model="config.min_fps_factor" />
|
||||
<div class="form-text">{{ $t('config.min_fps_factor_desc') }}</div>
|
||||
</div>
|
||||
|
||||
<label for="qp" class="form-label">{{ $t('config.min_fps_factor') }}</label>
|
||||
<input type="number" min="1" max="3" class="form-control" id="min_fps_factor" placeholder="1" v-model="config.min_fps_factor" />
|
||||
<div class="form-text">{{ $t('config.min_fps_factor_desc') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user