mirror of
https://github.com/thinkonmay/sunshine-sdk.git
synced 2025-12-30 17:49:07 +00:00
feat(web-ui): replace dropdown menus with checkboxes (#3455)
This commit is contained in:
Lukas Senionis
GitHub
parent
65878af8ea
commit
2e5c291233
120
src_assets/common/assets/web/Checkbox.vue
Normal file
120
src_assets/common/assets/web/Checkbox.vue
Normal file
@ -0,0 +1,120 @@
|
||||
<script setup>
|
||||
const model = defineModel({ required: true });
|
||||
const slots = defineSlots();
|
||||
const props = defineProps({
|
||||
class: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
desc: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
localePrefix: {
|
||||
type: String,
|
||||
default: "missing-prefix"
|
||||
},
|
||||
default: {
|
||||
type: undefined,
|
||||
default: null,
|
||||
}
|
||||
});
|
||||
|
||||
// Add the mandatory class values
|
||||
const extendedClassStr = (() => {
|
||||
let values = props.class.split(" ");
|
||||
if (!values.includes("form-check")) {
|
||||
values.push("form-check");
|
||||
}
|
||||
return values.join(" ");
|
||||
})();
|
||||
|
||||
// Map the value to boolean representation if possible, otherwise return null.
|
||||
const mapToBoolRepresentation = (value) => {
|
||||
// Try literal values first
|
||||
if (value === true || value === false) {
|
||||
return { possibleValues: [true, false], value: value };
|
||||
}
|
||||
if (value === 1 || value === 0) {
|
||||
return { possibleValues: [1, 0], value: value };
|
||||
}
|
||||
|
||||
const stringPairs = [
|
||||
["true", "false"],
|
||||
["1", "0"],
|
||||
["enabled", "disabled"],
|
||||
["enable", "disable"],
|
||||
["yes", "no"],
|
||||
["on", "off"]
|
||||
];
|
||||
|
||||
value = `${value}`.toLowerCase().trim();
|
||||
for (const pair of stringPairs) {
|
||||
if (value === pair[0] || value === pair[1]) {
|
||||
return { possibleValues: pair, value: value };
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// Determine the true/false values for the checkbox
|
||||
const checkboxValues = (() => {
|
||||
const mappedValues = (() => {
|
||||
const boolValues = mapToBoolRepresentation(model.value);
|
||||
if (boolValues !== null) {
|
||||
return boolValues.possibleValues;
|
||||
}
|
||||
|
||||
// Return fallback if nothing matches
|
||||
console.error(`Checkbox value ${model.value} did not match any acceptable pattern!`);
|
||||
return ["true", "false"];
|
||||
})();
|
||||
|
||||
return { truthy: mappedValues[0], falsy: mappedValues[1] };
|
||||
})();
|
||||
const parsedDefaultPropValue = (() => {
|
||||
const boolValues = mapToBoolRepresentation(props.default);
|
||||
if (boolValues !== null) {
|
||||
// Convert truthy to true/false.
|
||||
return boolValues.value === boolValues.possibleValues[0];
|
||||
}
|
||||
|
||||
return null;
|
||||
})();
|
||||
|
||||
const labelField = props.label ?? `${props.localePrefix}.${props.id}`;
|
||||
const descField = props.desc ?? `${props.localePrefix}.${props.id}_desc`;
|
||||
const showDesc = props.desc !== "" || Object.entries(slots).length > 0;
|
||||
const showDefValue = parsedDefaultPropValue !== null;
|
||||
const defValue = parsedDefaultPropValue ? "_common.enabled_def_cbox" : "_common.disabled_def_cbox";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="extendedClassStr">
|
||||
<label :for="props.id" :class="`form-check-label${showDesc ? ' mb-2' : ''}`">
|
||||
{{ $t(labelField) }}
|
||||
<div class="mt-0 form-text" v-if="showDefValue">
|
||||
{{ $t(defValue) }}
|
||||
</div>
|
||||
</label>
|
||||
<input type="checkbox"
|
||||
class="form-check-input"
|
||||
:id="props.id"
|
||||
v-model="model"
|
||||
:true-value="checkboxValues.truthy"
|
||||
:false-value="checkboxValues.falsy" />
|
||||
<div class="form-text" v-if="showDesc">
|
||||
{{ $t(descField) }}
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -116,15 +116,13 @@
|
||||
<div id="appOutputHelp" class="form-text">{{ $t('apps.output_desc') }}</div>
|
||||
</div>
|
||||
<!-- prep-cmd -->
|
||||
<div class="mb-3">
|
||||
<label for="excludeGlobalPrep" class="form-label">{{ $t('apps.global_prep_name') }}</label>
|
||||
<select id="excludeGlobalPrep" class="form-select" v-model="editForm['exclude-global-prep-cmd']">
|
||||
<option v-for="val in [false, true]" :value="val">
|
||||
{{ !val ? $t('_common.enabled') : $t('_common.disabled') }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="form-text">{{ $t('apps.global_prep_desc') }}</div>
|
||||
</div>
|
||||
<Checkbox class="mb-3"
|
||||
id="excludeGlobalPrep"
|
||||
label="apps.global_prep_name"
|
||||
desc="apps.global_prep_desc"
|
||||
v-model="editForm['exclude-global-prep-cmd']"
|
||||
default="true"
|
||||
></Checkbox>
|
||||
<div class="mb-3">
|
||||
<label for="appName" class="form-label">{{ $t('apps.cmd_prep_name') }}</label>
|
||||
<div class="form-text">{{ $t('apps.cmd_prep_desc') }}</div>
|
||||
@ -152,12 +150,12 @@
|
||||
<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('_common.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="editForm['prep-cmd'].splice(i,1)">
|
||||
@ -208,26 +206,30 @@
|
||||
<div id="appWorkingDirHelp" class="form-text">{{ $t('apps.working_dir_desc') }}</div>
|
||||
</div>
|
||||
<!-- elevation -->
|
||||
<div class="mb-3 form-check" v-if="platform === 'windows'">
|
||||
<label for="appElevation" class="form-check-label">{{ $t('_common.run_as') }}</label>
|
||||
<input type="checkbox" class="form-check-input" id="appElevation" v-model="editForm.elevated"
|
||||
true-value="true" false-value="false" />
|
||||
<div class="form-text">{{ $t('apps.run_as_desc') }}</div>
|
||||
</div>
|
||||
<Checkbox v-if="platform === 'windows'"
|
||||
class="mb-3"
|
||||
id="appElevation"
|
||||
label="_common.run_as"
|
||||
desc="apps.run_as_desc"
|
||||
v-model="editForm.elevated"
|
||||
default="false"
|
||||
></Checkbox>
|
||||
<!-- auto-detach -->
|
||||
<div class="mb-3 form-check">
|
||||
<label for="autoDetach" class="form-check-label">{{ $t('apps.auto_detach') }}</label>
|
||||
<input type="checkbox" class="form-check-input" id="autoDetach" v-model="editForm['auto-detach']"
|
||||
true-value="true" false-value="false" />
|
||||
<div class="form-text">{{ $t('apps.auto_detach_desc') }}</div>
|
||||
</div>
|
||||
<Checkbox class="mb-3"
|
||||
id="autoDetach"
|
||||
label="apps.auto_detach"
|
||||
desc="apps.auto_detach_desc"
|
||||
v-model="editForm['auto-detach']"
|
||||
default="true"
|
||||
></Checkbox>
|
||||
<!-- wait for all processes -->
|
||||
<div class="mb-3 form-check">
|
||||
<label for="waitAll" class="form-check-label">{{ $t('apps.wait_all') }}</label>
|
||||
<input type="checkbox" class="form-check-input" id="waitAll" v-model="editForm['wait-all']"
|
||||
true-value="true" false-value="false" />
|
||||
<div class="form-text">{{ $t('apps.wait_all_desc') }}</div>
|
||||
</div>
|
||||
<Checkbox class="mb-3"
|
||||
id="waitAll"
|
||||
label="apps.wait_all"
|
||||
desc="apps.wait_all_desc"
|
||||
v-model="editForm['wait-all']"
|
||||
default="true"
|
||||
></Checkbox>
|
||||
<!-- exit timeout -->
|
||||
<div class="mb-3">
|
||||
<label for="exitTimeout" class="form-label">{{ $t('apps.exit_timeout') }}</label>
|
||||
@ -358,11 +360,13 @@
|
||||
import { createApp } from 'vue'
|
||||
import { initApp } from './init'
|
||||
import Navbar from './Navbar.vue'
|
||||
import Checkbox from './Checkbox.vue'
|
||||
import { Dropdown } from 'bootstrap/dist/js/bootstrap'
|
||||
|
||||
const app = createApp({
|
||||
components: {
|
||||
Navbar
|
||||
Navbar,
|
||||
Checkbox
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -415,9 +419,9 @@
|
||||
if (this.editForm["detached"] === undefined)
|
||||
this.editForm["detached"] = [];
|
||||
if (this.editForm["exclude-global-prep-cmd"] === undefined)
|
||||
this.editForm["exclude-global-prep-cmd"] = [];
|
||||
this.editForm["exclude-global-prep-cmd"] = false;
|
||||
if (this.editForm["elevated"] === undefined && this.platform === 'windows') {
|
||||
this.editForm["elevated"] = [];
|
||||
this.editForm["elevated"] = false;
|
||||
}
|
||||
if (this.editForm["auto-detach"] === undefined) {
|
||||
this.editForm["auto-detach"] = true;
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -7,11 +7,13 @@
|
||||
"cancel": "Cancel",
|
||||
"disabled": "Disabled",
|
||||
"disabled_def": "Disabled (default)",
|
||||
"disabled_def_cbox": "Default: unchecked",
|
||||
"dismiss": "Dismiss",
|
||||
"do_cmd": "Do Command",
|
||||
"elevated": "Elevated",
|
||||
"enabled": "Enabled",
|
||||
"enabled_def": "Enabled (default)",
|
||||
"enabled_def_cbox": "Default: checked",
|
||||
"error": "Error!",
|
||||
"note": "Note:",
|
||||
"password": "Password",
|
||||
@ -168,6 +170,7 @@
|
||||
"gamepad_auto": "Automatic selection options",
|
||||
"gamepad_desc": "Choose which type of gamepad to emulate on the host",
|
||||
"gamepad_ds4": "DS4 (PS4)",
|
||||
"gamepad_ds4_manual": "DS4 selection options",
|
||||
"gamepad_ds5": "DS5 (PS5)",
|
||||
"gamepad_switch": "Nintendo Pro (Switch)",
|
||||
"gamepad_manual": "Manual DS4 options",
|
||||
@ -189,7 +192,7 @@
|
||||
"key_repeat_delay_desc": "Control how fast keys will repeat themselves. The initial delay in milliseconds before repeating keys.",
|
||||
"key_repeat_frequency": "Key Repeat Frequency",
|
||||
"key_repeat_frequency_desc": "How often keys repeat every second. This configurable option supports decimals.",
|
||||
"key_rightalt_to_key_windows": "Map Right Alt key to Windows key",
|
||||
"key_rightalt_to_key_win": "Map Right Alt key to Windows key",
|
||||
"key_rightalt_to_key_win_desc": "It may be possible that you cannot send the Windows Key from Moonlight directly. In those cases it may be useful to make Sunshine think the Right Alt key is the Windows key",
|
||||
"keyboard": "Enable Keyboard Input",
|
||||
"keyboard_desc": "Allows guests to control the host system with the keyboard",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user