249 lines
12 KiB
Vue
249 lines
12 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
import PlatformLayout from '../../../PlatformLayout.vue'
|
|
import Checkbox from "../../../Checkbox.vue";
|
|
|
|
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>
|
|
<PlatformLayout :platform="platform">
|
|
<template #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.dd_options_header') }}
|
|
</button>
|
|
</h2>
|
|
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
|
|
aria-labelledby="panelsStayOpen-headingOne">
|
|
<div class="accordion-body">
|
|
|
|
<!-- Configuration option -->
|
|
<div class="mb-3">
|
|
<label for="dd_configuration_option" class="form-label">
|
|
{{ $t('config.dd_configuration_option') }}
|
|
</label>
|
|
<select id="dd_configuration_option" class="form-select" v-model="config.dd_configuration_option">
|
|
<option value="disabled">{{ $t('_common.disabled_def') }}</option>
|
|
<option value="verify_only">{{ $t('config.dd_config_verify_only') }}</option>
|
|
<option value="ensure_active">{{ $t('config.dd_config_ensure_active') }}</option>
|
|
<option value="ensure_primary">{{ $t('config.dd_config_ensure_primary') }}</option>
|
|
<option value="ensure_only_display">{{ $t('config.dd_config_ensure_only_display') }}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Resolution option -->
|
|
<div class="mb-3" v-if="config.dd_configuration_option !== 'disabled'">
|
|
<label for="dd_resolution_option" class="form-label">
|
|
{{ $t('config.dd_resolution_option') }}
|
|
</label>
|
|
<select id="dd_resolution_option" class="form-select" v-model="config.dd_resolution_option">
|
|
<option value="disabled">{{ $t('config.dd_resolution_option_disabled') }}</option>
|
|
<option value="auto">{{ $t('config.dd_resolution_option_auto') }}</option>
|
|
<option value="manual">{{ $t('config.dd_resolution_option_manual') }}</option>
|
|
</select>
|
|
<div class="form-text"
|
|
v-if="config.dd_resolution_option === 'auto' || config.dd_resolution_option === 'manual'">
|
|
{{ $t('config.dd_resolution_option_ogs_desc') }}
|
|
</div>
|
|
|
|
<!-- Manual resolution -->
|
|
<div class="mt-2 ps-4" v-if="config.dd_resolution_option === 'manual'">
|
|
<div class="form-text">
|
|
{{ $t('config.dd_manual_resolution') }}
|
|
</div>
|
|
<input type="text" class="form-control" id="dd_manual_resolution" placeholder="2560x1440"
|
|
v-model="config.dd_manual_resolution" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Refresh rate option -->
|
|
<div class="mb-3" v-if="config.dd_configuration_option !== 'disabled'">
|
|
<label for="dd_refresh_rate_option" class="form-label">
|
|
{{ $t('config.dd_refresh_rate_option') }}
|
|
</label>
|
|
<select id="dd_refresh_rate_option" class="form-select" v-model="config.dd_refresh_rate_option">
|
|
<option value="disabled">{{ $t('config.dd_refresh_rate_option_disabled') }}</option>
|
|
<option value="auto">{{ $t('config.dd_refresh_rate_option_auto') }}</option>
|
|
<option value="manual">{{ $t('config.dd_refresh_rate_option_manual') }}</option>
|
|
</select>
|
|
|
|
<!-- Manual refresh rate -->
|
|
<div class="mt-2 ps-4" v-if="config.dd_refresh_rate_option === 'manual'">
|
|
<div class="form-text">
|
|
{{ $t('config.dd_manual_refresh_rate') }}
|
|
</div>
|
|
<input type="text" class="form-control" id="dd_manual_refresh_rate" placeholder="59.9558"
|
|
v-model="config.dd_manual_refresh_rate" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- HDR option -->
|
|
<div class="mb-3" v-if="config.dd_configuration_option !== 'disabled'">
|
|
<label for="dd_hdr_option" class="form-label">
|
|
{{ $t('config.dd_hdr_option') }}
|
|
</label>
|
|
<select id="dd_hdr_option" class="mb-3 form-select" v-model="config.dd_hdr_option">
|
|
<option value="disabled">{{ $t('config.dd_hdr_option_disabled') }}</option>
|
|
<option value="auto">{{ $t('config.dd_hdr_option_auto') }}</option>
|
|
</select>
|
|
<!-- HDR toggle -->
|
|
<label for="dd_wa_hdr_toggle_delay" class="form-label">
|
|
{{ $t('config.dd_wa_hdr_toggle_delay') }}
|
|
</label>
|
|
<input type="number" class="form-control" id="dd_wa_hdr_toggle_delay" placeholder="0" min="0" max="3000"
|
|
v-model="config.dd_wa_hdr_toggle_delay" />
|
|
<div class="form-text">
|
|
{{ $t('config.dd_wa_hdr_toggle_delay_desc_1') }}
|
|
<br>
|
|
{{ $t('config.dd_wa_hdr_toggle_delay_desc_2') }}
|
|
<br>
|
|
{{ $t('config.dd_wa_hdr_toggle_delay_desc_3') }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Config revert delay -->
|
|
<div class="mb-3" v-if="config.dd_configuration_option !== 'disabled'">
|
|
<label for="dd_config_revert_delay" class="form-label">
|
|
{{ $t('config.dd_config_revert_delay') }}
|
|
</label>
|
|
<input type="number" class="form-control" id="dd_config_revert_delay" placeholder="3000" min="0"
|
|
v-model="config.dd_config_revert_delay" />
|
|
<div class="form-text">
|
|
{{ $t('config.dd_config_revert_delay_desc') }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Config revert on disconnect -->
|
|
<div class="mb-3" v-if="config.dd_configuration_option !== 'disabled'">
|
|
<Checkbox id="dd_config_revert_on_disconnect"
|
|
locale-prefix="config"
|
|
v-model="config.dd_config_revert_on_disconnect"
|
|
default="false"
|
|
></Checkbox>
|
|
</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()">
|
|
+ {{ $t('config.dd_mode_remapping_add') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #linux>
|
|
</template>
|
|
<template #macos>
|
|
</template>
|
|
</PlatformLayout>
|
|
</template>
|