feat(display): add display mode remapping option (#3529)

Co-authored-by: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
This commit is contained in:
Lukas Senionis
2025-01-12 21:14:20 +02:00
committed by GitHub
parent 012a99c26d
commit 1b94e9339a
11 changed files with 701 additions and 35 deletions

View File

@@ -33,7 +33,6 @@
<general
v-if="currentTab === 'general'"
:config="config"
:global-prep-cmd="global_prep_cmd"
:platform="platform">
</general>
@@ -127,7 +126,6 @@
restarted: false,
config: null,
currentTab: "general",
global_prep_cmd: [],
tabs: [ // TODO: Move the options to each Component instead, encapsulate.
{
id: "general",
@@ -136,7 +134,7 @@
"locale": "en",
"sunshine_name": "",
"min_log_level": 2,
"global_prep_cmd": "[]",
"global_prep_cmd": [],
"notify_pre_releases": "disabled",
},
},
@@ -178,6 +176,7 @@
"dd_manual_refresh_rate": "",
"dd_hdr_option": "auto",
"dd_config_revert_delay": 3000,
"dd_mode_remapping": {"mixed": [], "resolution_only": [], "refresh_rate_only": []},
"dd_wa_hdr_toggle": "disabled",
"min_fps_factor": 1,
},
@@ -320,17 +319,23 @@
// TODO: let each tab's Component handle it's own data instead of doing it here
// Parse the special options before population if available
const specialOptions = ["dd_mode_remapping", "global_prep_cmd"]
for (const optionKey of specialOptions) {
if (this.config.hasOwnProperty(optionKey)) {
this.config[optionKey] = JSON.parse(this.config[optionKey]);
}
}
// Populate default values from tabs options
this.tabs.forEach(tab => {
Object.keys(tab.options).forEach(optionKey => {
if (this.config[optionKey] === undefined) {
this.config[optionKey] = tab.options[optionKey];
// Make sure to copy by value
this.config[optionKey] = JSON.parse(JSON.stringify(tab.options[optionKey]));
}
});
});
this.config.global_prep_cmd = this.config.global_prep_cmd || [];
this.global_prep_cmd = JSON.parse(this.config.global_prep_cmd);
});
},
methods: {
@@ -338,26 +343,26 @@
this.$forceUpdate()
},
serialize() {
this.config.global_prep_cmd = JSON.stringify(this.global_prep_cmd);
let config = JSON.parse(JSON.stringify(this.config));
config.global_prep_cmd = JSON.stringify(config.global_prep_cmd);
config.dd_mode_remapping = JSON.stringify(config.dd_mode_remapping);
return config;
},
save() {
this.saved = false;
this.restarted = false;
this.serialize();
// create a temp copy of this.config to use for the post request
let config = JSON.parse(JSON.stringify(this.config))
let config = this.serialize();
// delete default values from this.config
this.tabs.forEach(tab => {
Object.keys(tab.options).forEach(optionKey => {
let delete_value = false
if (["global_prep_cmd"].includes(optionKey)) {
let config_value, default_value
config_value = JSON.parse(config[optionKey])
default_value = JSON.parse(tab.options[optionKey])
if (["global_prep_cmd", "dd_mode_remapping"].includes(optionKey)) {
const config_value = config[optionKey]
const default_value = JSON.stringify(tab.options[optionKey])
if (config_value === default_value) {
delete_value = true

View File

@@ -11,7 +11,6 @@ import Checkbox from "../../Checkbox.vue";
const props = defineProps([
'platform',
'config',
'min_fps_factor',
])
const config = ref(props.config)
@@ -95,7 +94,6 @@ const config = ref(props.config)
<DisplayModesSettings
:platform="platform"
:config="config"
:min_fps_factor="min_fps_factor"
/>
</div>

View File

@@ -4,12 +4,9 @@ import { ref } from 'vue'
const props = defineProps({
platform: String,
config: Object,
globalPrepCmd: Array
config: Object
})
const config = ref(props.config)
const globalPrepCmd = ref(props.globalPrepCmd)
function addCmd() {
let template = {
@@ -20,11 +17,11 @@ function addCmd() {
if (props.platform === 'windows') {
template = { ...template, elevated: false };
}
globalPrepCmd.value.push(template);
config.value.global_prep_cmd.push(template);
}
function removeCmd(index) {
globalPrepCmd.value.splice(index,1)
config.value.global_prep_cmd.splice(index,1)
}
</script>
@@ -83,7 +80,7 @@ function removeCmd(index) {
<div id="global_prep_cmd" class="mb-3 d-flex flex-column">
<label class="form-label">{{ $t('config.global_prep_cmd') }}</label>
<div class="form-text">{{ $t('config.global_prep_cmd_desc') }}</div>
<table class="table" v-if="globalPrepCmd.length > 0">
<table class="table" v-if="config.global_prep_cmd.length > 0">
<thead>
<tr>
<th scope="col"><i class="fas fa-play"></i> {{ $t('_common.do_cmd') }}</th>
@@ -95,7 +92,7 @@ function removeCmd(index) {
</tr>
</thead>
<tbody>
<tr v-for="(c, i) in globalPrepCmd">
<tr v-for="(c, i) in config.global_prep_cmd">
<td>
<input type="text" class="form-control monospace" v-model="c.do" />
</td>

View File

@@ -7,8 +7,44 @@ const props = defineProps({
platform: String,
config: Object
})
const config = ref(props.config)
const REFRESH_RATE_ONLY = "refresh_rate_only"
const RESOLUTION_ONLY = "resolution_only"
const MIXED = "mixed"
function canBeRemapped() {
return (config.value.dd_resolution_option === "auto" || config.value.dd_refresh_rate_option === "auto")
&& config.value.dd_configuration_option !== "disabled";
}
function getRemappingType() {
// Assuming here that at least one setting is set to "auto" if other is not
if (config.value.dd_resolution_option !== "auto") {
return REFRESH_RATE_ONLY;
}
if (config.value.dd_refresh_rate_option !== "auto") {
return RESOLUTION_ONLY;
}
return MIXED;
}
function addRemappingEntry() {
const type = getRemappingType();
let template = {};
if (type !== RESOLUTION_ONLY) {
template["requested_fps"] = "";
template["final_refresh_rate"] = "";
}
if (type !== REFRESH_RATE_ONLY) {
template["requested_resolution"] = "";
template["final_resolution"] = "";
}
config.value.dd_mode_remapping[type].push(template);
}
</script>
<template>
@@ -114,6 +150,76 @@ const config = ref(props.config)
{{ $t('config.dd_config_revert_delay_desc') }}
</div>
</div>
<!-- Display mode remapping -->
<div class="mb-3" v-if="canBeRemapped()">
<label for="dd_mode_remapping" class="form-label">
{{ $t('config.dd_mode_remapping') }}
</label>
<div id="dd_mode_remapping" class="d-flex flex-column">
<div class="form-text">
{{ $t('config.dd_mode_remapping_desc_1') }}<br>
{{ $t('config.dd_mode_remapping_desc_2') }}<br>
{{ $t('config.dd_mode_remapping_desc_3') }}<br>
{{ $t(getRemappingType() === MIXED ? 'config.dd_mode_remapping_desc_4_final_values_mixed' : 'config.dd_mode_remapping_desc_4_final_values_non_mixed') }}<br>
<template v-if="getRemappingType() === MIXED">
{{ $t('config.dd_mode_remapping_desc_5_sops_mixed_only') }}<br>
</template>
<template v-if="getRemappingType() === RESOLUTION_ONLY">
{{ $t('config.dd_mode_remapping_desc_5_sops_resolution_only') }}<br>
</template>
</div>
</div>
<table class="table" v-if="config.dd_mode_remapping[getRemappingType()].length > 0">
<thead>
<tr>
<th scope="col" v-if="getRemappingType() !== REFRESH_RATE_ONLY">
{{ $t('config.dd_mode_remapping_requested_resolution') }}
</th>
<th scope="col" v-if="getRemappingType() !== RESOLUTION_ONLY">
{{ $t('config.dd_mode_remapping_requested_fps') }}
</th>
<th scope="col" v-if="getRemappingType() !== REFRESH_RATE_ONLY">
{{ $t('config.dd_mode_remapping_final_resolution') }}
</th>
<th scope="col" v-if="getRemappingType() !== RESOLUTION_ONLY">
{{ $t('config.dd_mode_remapping_final_refresh_rate') }}
</th>
<!-- Additional columns for buttons-->
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr v-for="(value, idx) in config.dd_mode_remapping[getRemappingType()]">
<td v-if="getRemappingType() !== REFRESH_RATE_ONLY">
<input type="text" class="form-control monospace" v-model="value.requested_resolution"
:placeholder="'1920x1080'" />
</td>
<td v-if="getRemappingType() !== RESOLUTION_ONLY">
<input type="text" class="form-control monospace" v-model="value.requested_fps"
:placeholder="'60'" />
</td>
<td v-if="getRemappingType() !== REFRESH_RATE_ONLY">
<input type="text" class="form-control monospace" v-model="value.final_resolution"
:placeholder="'2560x1440'" />
</td>
<td v-if="getRemappingType() !== RESOLUTION_ONLY">
<input type="text" class="form-control monospace" v-model="value.final_refresh_rate"
:placeholder="'119.95'" />
</td>
<td>
<button class="btn btn-danger" @click="config.dd_mode_remapping[getRemappingType()].splice(idx, 1)">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
<button class="ms-0 mt-2 btn btn-success" style="margin: 0 auto" @click="addRemappingEntry()">
&plus; {{ $t('config.dd_mode_remapping_add') }}
</button>
</div>
</div>
</div>
</div>

View File

@@ -6,13 +6,8 @@ import PlatformLayout from '../../../PlatformLayout.vue'
const props = defineProps([
'platform',
'config',
'min_fps_factor',
])
const config = ref(props.config)
const resIn = ref("")
const fpsIn = ref("")
</script>
<template>

View File

@@ -162,6 +162,19 @@
"dd_hdr_option": "HDR",
"dd_hdr_option_auto": "Switch on/off the HDR mode as requested by the client (default)",
"dd_hdr_option_disabled": "Do not change HDR settings",
"dd_mode_remapping": "Display mode remapping",
"dd_mode_remapping_add": "Add remapping entry",
"dd_mode_remapping_desc_1": "Specify remapping entries to change the requested resolution and/or refresh rate to other values.",
"dd_mode_remapping_desc_2": "The list is iterated from top to bottom and the first match is used.",
"dd_mode_remapping_desc_3": "\"Requested\" fields can be left empty to match any requested value.",
"dd_mode_remapping_desc_4_final_values_mixed": "At least one \"Final\" field must be specified. The unspecified resolution or refresh rate will not be changed.",
"dd_mode_remapping_desc_4_final_values_non_mixed": "\"Final\" field must be specified and cannot be empty.",
"dd_mode_remapping_desc_5_sops_mixed_only": "\"Optimize game settings\" option must be enabled in the Moonlight client, otherwise entries with any resolution fields specified are skipped.",
"dd_mode_remapping_desc_5_sops_resolution_only": "\"Optimize game settings\" option must be enabled in the Moonlight client, otherwise the mapping is skipped.",
"dd_mode_remapping_final_refresh_rate": "Final refresh rate",
"dd_mode_remapping_final_resolution": "Final resolution",
"dd_mode_remapping_requested_fps": "Requested FPS",
"dd_mode_remapping_requested_resolution": "Requested resolution",
"dd_options_header": "Advanced display device options",
"dd_refresh_rate_option": "Refresh rate",
"dd_refresh_rate_option_auto": "Use FPS value provided by the client (default)",