izackp/Apollo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): break down config.html into smaller pieces (#2491)

Browse Source 
Co-authored-by: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
This commit is contained in:
Vithorio Polten
2024-05-13 14:08:13 -03:00
committed by GitHub
parent 81c2ecfc07
commit 4b6ff3797e
30 changed files with 1636 additions and 1081 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src_assets/common/assets/web/configs/tabs/audiovideo/AdapterNameSelector.vue Normal file
View File

@@ -0,0 +1,39 @@
<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)
</script>
<template>
<div class="mb-3" v-if="platform !== 'macos'">
<label for="adapter_name" class="form-label">{{ $t('config.adapter_name') }}</label>
<input type="text" class="form-control" id="adapter_name"
:placeholder="$tp('config.adapter_name_placeholder', '/dev/dri/renderD128')"
v-model="config.adapter_name" />
<div class="form-text">
<PlatformLayout :platform="platform">
<template #windows>
{{ $t('config.adapter_name_desc_win') }}<br>
<pre>tools\dxgi-info.exe</pre>
</template>
<template #linux>
{{ $t('config.adapter_name_desc_linux_1') }}<br>
<pre>ls /dev/dri/renderD* # {{ $t('config.adapter_name_desc_linux_2') }}</pre>
<pre>
vainfo --display drm --device /dev/dri/renderD129 | \
grep -E "((VAProfileH264High|VAProfileHEVCMain|VAProfileHEVCMain10).*VAEntrypointEncSlice)|Driver version"
</pre>
{{ $t('config.adapter_name_desc_linux_3') }}<br>
<i>VAProfileH264High : VAEntrypointEncSlice</i>
</template>
</PlatformLayout>
</div>
</div>
</template>

45
src_assets/common/assets/web/configs/tabs/audiovideo/DisplayDeviceOptions.vue Normal file
View File

@@ -0,0 +1,45 @@
<script setup>
import { ref } from 'vue'
import { $tp } from '../../../platform-i18n'
import PlatformLayout from '../../../PlatformLayout.vue'
const props = defineProps({
platform: String,
config: Object,
display_mode_remapping: Array
})
const config = ref(props.config)
const display_mode_remapping = ref(props.display_mode_remapping)
// TODO: Sample for use in PR #2032
function getRemappingType()
{
// Assuming here that at least one setting is set to "automatic"
if (config.value.resolution_change !== 'automatic') {
return "refresh_rate_only";
}
if (config.value.refresh_rate_change !== 'automatic') {
return "resolution_only";
}
return "";
}
function addRemapping(type) {
let template = {
type: type,
received_resolution: "",
received_fps: "",
final_resolution: "",
final_refresh_rate: "",
};
display_mode_remapping.value.push(template);
}
</script>
<template>
<div class="mb-3">
<!-- TODO: Implement on PR #2032 -->
</div>
</template>

67
src_assets/common/assets/web/configs/tabs/audiovideo/DisplayModesSettings.vue Normal file
View File

@@ -0,0 +1,67 @@
<script setup>
import { ref } from 'vue'
import { $tp } from '../../../platform-i18n'
import PlatformLayout from '../../../PlatformLayout.vue'
const props = defineProps([
'platform',
'config',
'resolutions',
'fps',
])
const config = ref(props.config)
const resolutions = ref(props.resolutions)
const fps = ref(props.fps)
const resIn = ref("")
const fpsIn = ref("")
</script>
<template>
<div class="mb-3">
<!-- Advertised Resolutions -->
<div id="resolutions" class="resolutions-container">
<label>{{ $t('config.resolutions') }}</label>
<div class="resolutions d-flex flex-wrap">
<div class="p-2 ms-item m-2 d-flex justify-content-between" v-for="(r,i) in resolutions" :key="r">
<span class="px-2">{{r}}</span>
<span style="cursor: pointer" @click="resolutions.splice(i,1)">&times;</span>
</div>
</div>
<form @submit.prevent="resolutions.push(resIn);resIn = '';" class="d-flex align-items-center">
<input type="text" v-model="resIn" required pattern="[0-9]+x[0-9]+" style="
width: 12ch;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
" class="form-control" />
<button style="border-top-left-radius: 0; border-bottom-left-radius: 0" class="btn btn-success">
+
</button>
</form>
</div>
<!-- Advertised FPS -->
<div id="fps" class="fps-container">
<label>{{ $t('config.fps') }}</label>
<div class="fps d-flex flex-wrap">
<div class="p-2 ms-item m-2 d-flex justify-content-between" v-for="(f,i) in fps" :key="f">
<span class="px-2">{{f}}</span>
<span style="cursor: pointer" @click="fps.splice(i,1)">&times;</span>
</div>
</div>
<form @submit.prevent="fps.push(fpsIn);fpsIn = '';" class="d-flex align-items-center">
<input type="text" v-model="fpsIn" required pattern="[0-9]+" style="
width: 6ch;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
" class="form-control" />
<button style="border-top-left-radius: 0; border-bottom-left-radius: 0" class="btn btn-success">
+
</button>
</form>
</div>
<div class="form-text">{{ $t('config.res_fps_desc') }}</div>
</div>
</template>

46
src_assets/common/assets/web/configs/tabs/audiovideo/LegacyDisplayOutputSelector.vue Normal file
View File

@@ -0,0 +1,46 @@
<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>

38
src_assets/common/assets/web/configs/tabs/audiovideo/NewDisplayOutputSelector.vue Normal file
View File

@@ -0,0 +1,38 @@
<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>