feat(display)!: Add libdisplaydevice dependency and output name mapping (#2894)

This commit is contained in:
Lukas Senionis
2024-12-11 21:17:44 +02:00
committed by GitHub
parent 0cc98f113e
commit 1543f584ab
20 changed files with 327 additions and 101 deletions

View File

@@ -3,8 +3,7 @@ import {ref} from 'vue'
import {$tp} from '../../platform-i18n'
import PlatformLayout from '../../PlatformLayout.vue'
import AdapterNameSelector from './audiovideo/AdapterNameSelector.vue'
import LegacyDisplayOutputSelector from './audiovideo/LegacyDisplayOutputSelector.vue'
import NewDisplayOutputSelector from './audiovideo/NewDisplayOutputSelector.vue'
import DisplayOutputSelector from './audiovideo/DisplayOutputSelector.vue'
import DisplayDeviceOptions from "./audiovideo/DisplayDeviceOptions.vue";
import DisplayModesSettings from "./audiovideo/DisplayModesSettings.vue";
@@ -71,7 +70,7 @@ const config = ref(props.config)
:config="config"
/>
<LegacyDisplayOutputSelector
<DisplayOutputSelector
:platform="platform"
:config="config"
/>

View File

@@ -0,0 +1,53 @@
<script setup>
import { ref } from 'vue'
import { $tp } from '../../../platform-i18n'
import PlatformLayout from '../../../PlatformLayout.vue'
const props = defineProps([
'platform',
'config'
])
const config = ref(props.config)
const outputNamePlaceholder = (props.platform === 'windows') ? '{de9bb7e2-186e-505b-9e93-f48793333810}' : '0'
</script>
<template>
<div class="mb-3">
<label for="output_name" class="form-label">{{ $tp('config.output_name') }}</label>
<input type="text" class="form-control" id="output_name" :placeholder="outputNamePlaceholder"
v-model="config.output_name"/>
<div class="form-text">
{{ $tp('config.output_name_desc') }}<br>
<PlatformLayout :platform="platform">
<template #windows>
<pre style="white-space: pre-line;">
<b>&nbsp;&nbsp;{</b>
<b>&nbsp;&nbsp;&nbsp;&nbsp;"device_id": "{de9bb7e2-186e-505b-9e93-f48793333810}"</b>
<b>&nbsp;&nbsp;&nbsp;&nbsp;"display_name": "\\\\.\\DISPLAY1"</b>
<b>&nbsp;&nbsp;&nbsp;&nbsp;"friendly_name": "ROG PG279Q"</b>
<b>&nbsp;&nbsp;&nbsp;&nbsp;...</b>
<b>&nbsp;&nbsp;}</b>
</pre>
</template>
<template #linux>
<pre style="white-space: pre-line;">
Info: Detecting displays
Info: Detected display: DVI-D-0 (id: 0) connected: false
Info: Detected display: HDMI-0 (id: 1) connected: true
Info: Detected display: DP-0 (id: 2) connected: true
Info: Detected display: DP-1 (id: 3) connected: false
Info: Detected display: DVI-D-1 (id: 4) connected: false
</pre>
</template>
<template #macos>
<pre style="white-space: pre-line;">
Info: Detecting displays
Info: Detected display: Monitor-0 (id: 3) connected: true
Info: Detected display: Monitor-1 (id: 2) connected: true
</pre>
</template>
</PlatformLayout>
</div>
</div>
</template>

View File

@@ -1,46 +0,0 @@
<script setup>
import { ref } from 'vue'
import { $tp } from '../../../platform-i18n'
import PlatformLayout from '../../../PlatformLayout.vue'
const props = defineProps([
'platform',
'config'
])
const config = ref(props.config)
const outputNamePlaceholder = (props.platform === 'windows') ? '\\\\.\\DISPLAY1' : '0'
</script>
<template>
<div class="mb-3">
<label for="output_name" class="form-label">{{ $tp('config.output_name') }}</label>
<input type="text" class="form-control" id="output_name" :placeholder="outputNamePlaceholder"
v-model="config.output_name"/>
<div class="form-text">
{{ $tp('config.output_name_desc') }}<br>
<PlatformLayout :platform="platform">
<template #windows>
<pre>tools\dxgi-info.exe</pre>
</template>
<template #linux>
<pre style="white-space: pre-line;">
Info: Detecting displays
Info: Detected display: DVI-D-0 (id: 0) connected: false
Info: Detected display: HDMI-0 (id: 1) connected: true
Info: Detected display: DP-0 (id: 2) connected: true
Info: Detected display: DP-1 (id: 3) connected: false
Info: Detected display: DVI-D-1 (id: 4) connected: false
</pre>
</template>
<template #macos>
<pre style="white-space: pre-line;">
Info: Detecting displays
Info: Detected display: Monitor-0 (id: 3) connected: true
Info: Detected display: Monitor-1 (id: 2) connected: true
</pre>
</template>
</PlatformLayout>
</div>
</div>
</template>

View File

@@ -1,38 +0,0 @@
<script setup>
import { ref } from 'vue'
import { $tp } from '../../../platform-i18n'
import PlatformLayout from '../../../PlatformLayout.vue'
const props = defineProps([
'platform',
'config',
'displays'
])
const config = ref(props.config)
const outputNamePlaceholder = (props.platform === 'windows') ? '{de9bb7e2-186e-505b-9e93-f48793333810}' : '4531345'
</script>
<template>
<div class="mb-3">
<label for="output_name" class="form-label">{{ $tp('config.output_name') }}</label>
<input type="text" class="form-control" id="output_name" :placeholder="outputNamePlaceholder"
v-model="config.output_name"/>
<div class="form-text">
<p style="white-space: pre-line">{{ $tp('config.output_name_desc') }}</p>
<PlatformLayout :platform="platform">
<template #windows>
<b>&nbsp;&nbsp;&nbsp;&nbsp;DEVICE ID: {de9bb7e2-186e-505b-9e93-f48793333810}</b><br>
<b>&nbsp;&nbsp;&nbsp;&nbsp;DISPLAY NAME: \\.\DISPLAY1</b><br>
<b>&nbsp;&nbsp;&nbsp;&nbsp;FRIENDLY NAME: ROG PG279Q</b><br>
<b>&nbsp;&nbsp;&nbsp;&nbsp;DEVICE STATE: PRIMARY</b><br>
<b>&nbsp;&nbsp;&nbsp;&nbsp;HDR STATE: UNKNOWN</b>
</template>
<template #linux>
</template>
<template #macos>
</template>
</PlatformLayout>
</div>
</div>
</template>