197 lines
6.5 KiB
Vue
197 lines
6.5 KiB
Vue
<script setup lang="ts">
|
|
import { Ref, computed, ref } from 'vue';
|
|
import InputNumber from 'primevue/inputnumber';
|
|
import Select from 'primevue/select';
|
|
import SelectButton from 'primevue/selectbutton';
|
|
import ToggleSwitch from 'primevue/toggleswitch';
|
|
import OptionCategory from '../OptionCategory.vue';
|
|
import OptionRow from '../OptionRow.vue';
|
|
import { invoke } from '../../invoke';
|
|
import { usePrfStore } from '../../stores';
|
|
|
|
const capabilities: Ref<string[]> = ref([]);
|
|
const displayList: Ref<{ title: string; value: string }[]> = ref([
|
|
{
|
|
title: 'Primary',
|
|
value: 'default',
|
|
},
|
|
]);
|
|
const prf = usePrfStore();
|
|
|
|
const extraDisplayOptionsDisabled = computed(() => {
|
|
return prf.current?.data.display.target === 'default';
|
|
});
|
|
|
|
const loadDisplays = () => {
|
|
const newList = [
|
|
{
|
|
title: 'Primary',
|
|
value: 'default',
|
|
},
|
|
];
|
|
invoke('list_platform_capabilities')
|
|
.then(async (v: unknown) => {
|
|
let different = false;
|
|
if (Array.isArray(v)) {
|
|
capabilities.value.push(...v);
|
|
}
|
|
if (capabilities.value.includes('display')) {
|
|
for (const [devName, devString] of (await invoke(
|
|
'list_displays'
|
|
)) as Array<[string, string]>) {
|
|
newList.push({
|
|
title: `${devName.replace('\\\\.\\', '')} (${devString})`,
|
|
value: devName,
|
|
});
|
|
if (
|
|
displayList.value.find(
|
|
(item) => item.value === devName
|
|
) === undefined
|
|
) {
|
|
different = true;
|
|
}
|
|
}
|
|
}
|
|
if (displayList.value.length !== newList.length) {
|
|
different = true;
|
|
}
|
|
if (different) {
|
|
displayList.value = newList;
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
};
|
|
|
|
loadDisplays();
|
|
</script>
|
|
|
|
<template>
|
|
<OptionCategory title="Display">
|
|
<OptionRow
|
|
v-if="capabilities.includes('display')"
|
|
title="Target display"
|
|
>
|
|
<Select
|
|
v-model="prf.current!.data.display.target"
|
|
:options="displayList"
|
|
option-label="title"
|
|
option-value="value"
|
|
placeholder="(Disconnected)"
|
|
@show="loadDisplays"
|
|
></Select>
|
|
</OptionRow>
|
|
<OptionRow class="number-input" title="Game resolution">
|
|
<InputNumber
|
|
class="shrink"
|
|
size="small"
|
|
:min="480"
|
|
:max="9999"
|
|
:use-grouping="false"
|
|
v-model="prf.current!.data.display.rez[0]"
|
|
/>
|
|
x
|
|
<InputNumber
|
|
class="shrink"
|
|
size="small"
|
|
:min="640"
|
|
:max="9999"
|
|
:use-grouping="false"
|
|
v-model="prf.current!.data.display.rez[1]"
|
|
/>
|
|
</OptionRow>
|
|
<OptionRow title="Display mode">
|
|
<SelectButton
|
|
v-model="prf.current!.data.display.mode"
|
|
:options="[
|
|
{ title: 'Window', value: 'Window' },
|
|
{ title: 'Borderless window', value: 'Borderless' },
|
|
{ title: 'Fullscreen', value: 'Fullscreen' },
|
|
]"
|
|
:allow-empty="false"
|
|
option-label="title"
|
|
option-value="value"
|
|
/>
|
|
</OptionRow>
|
|
<OptionRow
|
|
title="Display rotation"
|
|
v-if="capabilities.includes('display')"
|
|
>
|
|
<SelectButton
|
|
v-model="prf.current!.data.display.rotation"
|
|
:options="[
|
|
{ title: 'Unchanged', value: 0 },
|
|
{ title: 'Portrait', value: 90 },
|
|
{ title: 'Portrait (flipped)', value: 270 },
|
|
]"
|
|
:allow-empty="false"
|
|
option-label="title"
|
|
option-value="value"
|
|
:disabled="extraDisplayOptionsDisabled"
|
|
/>
|
|
</OptionRow>
|
|
<OptionRow
|
|
v-if="capabilities.includes('display')"
|
|
class="number-input"
|
|
title="Refresh Rate"
|
|
>
|
|
<InputNumber
|
|
class="shrink"
|
|
size="small"
|
|
:min="60"
|
|
:max="999"
|
|
:use-grouping="false"
|
|
v-model="prf.current!.data.display.frequency"
|
|
:disabled="extraDisplayOptionsDisabled"
|
|
/>
|
|
</OptionRow>
|
|
<OptionRow
|
|
title="Borderless fullscreen"
|
|
v-if="capabilities.includes('display')"
|
|
tooltip="Match display resolution with the game."
|
|
>
|
|
<ToggleSwitch
|
|
:disabled="
|
|
extraDisplayOptionsDisabled ||
|
|
prf.current?.data.display.mode !== 'Borderless'
|
|
"
|
|
v-model="prf.current!.data.display.borderless_fullscreen"
|
|
/>
|
|
</OptionRow>
|
|
<OptionRow
|
|
title="Skip switching primary display"
|
|
v-if="
|
|
capabilities.includes('display') &&
|
|
prf.current?.data.display.target !== 'default' &&
|
|
(prf.current!.data.display.dont_switch_primary ||
|
|
displayList.length > 2)
|
|
"
|
|
dangerous-tooltip="Only enable this option if switching the primary display causes issues. The monitors must have a matching refresh rate."
|
|
>
|
|
<ToggleSwitch
|
|
:disabled="extraDisplayOptionsDisabled"
|
|
v-model="prf.current!.data.display.dont_switch_primary"
|
|
/>
|
|
</OptionRow>
|
|
<OptionRow
|
|
title="Unity display index"
|
|
class="number-input"
|
|
v-if="
|
|
capabilities.includes('display') &&
|
|
prf.current?.data.display.target !== 'default' &&
|
|
prf.current!.data.display.dont_switch_primary
|
|
"
|
|
>
|
|
<InputNumber
|
|
class="shrink"
|
|
size="small"
|
|
:min="1"
|
|
:max="32"
|
|
:use-grouping="false"
|
|
v-model="prf.current!.data.display.monitor_index_override"
|
|
:disabled="extraDisplayOptionsDisabled"
|
|
:allow-empty="true"
|
|
/>
|
|
</OptionRow>
|
|
</OptionCategory>
|
|
</template>
|