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

127
src_assets/common/assets/web/configs/tabs/encoders/AmdAmfEncoder.vue Normal file
View File

@@ -0,0 +1,127 @@
<script setup>
import { ref } from 'vue'
const props = defineProps([
'platform',
'config',
])
const config = ref(props.config)
</script>
<template>
<div id="amd-amf-encoder" class="config-page">
<!-- AMF Usage -->
<div class="mb-3">
<label for="amd_usage" class="form-label">{{ $t('config.amd_usage') }}</label>
<select id="amd_usage" class="form-select" v-model="config.amd_usage">
<option value="transcoding">{{ $t('config.amd_usage_transcoding') }}</option>
<option value="webcam">{{ $t('config.amd_usage_webcam') }}</option>
<option value="lowlatency_high_quality">{{ $t('config.amd_usage_lowlatency_high_quality') }}</option>
<option value="lowlatency">{{ $t('config.amd_usage_lowlatency') }}</option>
<option value="ultralowlatency">{{ $t('config.amd_usage_ultralowlatency') }}</option>
</select>
<div class="form-text">{{ $t('config.amd_usage_desc') }}</div>
</div>
<!-- AMD Rate Control group options -->
<div class="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.amd_rc_group') }}
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
aria-labelledby="panelsStayOpen-headingOne">
<div class="accordion-body">
<!-- AMF Rate Control -->
<div class="mb-3">
<label for="amd_rc" class="form-label">{{ $t('config.amd_rc') }}</label>
<select id="amd_rc" class="form-select" v-model="config.amd_rc">
<option value="cbr">{{ $t('config.amd_rc_cbr') }}</option>
<option value="cqp">{{ $t('config.amd_rc_cqp') }}</option>
<option value="vbr_latency">{{ $t('config.amd_rc_vbr_latency') }}</option>
<option value="vbr_peak">{{ $t('config.amd_rc_vbr_peak') }}</option>
</select>
<div class="form-text">{{ $t('config.amd_rc_desc') }}</div>
</div>
<!-- AMF HRD Enforcement -->
<div class="mb-3">
<label for="amd_enforce_hrd" class="form-label">{{ $t('config.amd_enforce_hrd') }}</label>
<select id="amd_enforce_hrd" class="form-select" v-model="config.amd_enforce_hrd">
<option value="enabled">{{ $t('_common.enabled') }}</option>
<option value="disabled">{{ $t('_common.disabled_def') }}</option>
</select>
<div class="form-text">{{ $t('config.amd_enforce_hrd_desc') }}</div>
</div>
</div>
</div>
</div>
</div>
<!-- AMF Quality group options -->
<div class="accordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseTwo">
{{ $t('config.amd_quality_group') }}
</button>
</h2>
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse show"
aria-labelledby="panelsStayOpen-headingTwo">
<div class="accordion-body">
<!-- AMF Quality -->
<div class="mb-3">
<label for="amd_quality" class="form-label">{{ $t('config.amd_quality') }}</label>
<select id="amd_quality" class="form-select" v-model="config.amd_quality">
<option value="speed">{{ $t('config.amd_quality_speed') }}</option>
<option value="balanced">{{ $t('config.amd_quality_balanced') }}</option>
<option value="quality">{{ $t('config.amd_quality_quality') }}</option>
</select>
<div class="form-text">{{ $t('config.amd_quality_desc') }}</div>
</div>
<!-- AMD Preanalysis -->
<div class="mb-3">
<label for="amd_preanalysis" class="form-label">{{ $t('config.amd_preanalysis') }}</label>
<select id="amd_preanalysis" class="form-select" v-model="config.amd_preanalysis">
<option value="disabled">{{ $t('_common.disabled_def') }}</option>
<option value="enabled">{{ $t('_common.enabled') }}</option>
</select>
<div class="form-text">{{ $t('config.amd_preanalysis_desc') }}</div>
</div>
<!-- AMD VBAQ -->
<div class="mb-3">
<label for="amd_vbaq" class="form-label">{{ $t('config.amd_vbaq') }}</label>
<select id="amd_vbaq" class="form-select" v-model="config.amd_vbaq">
<option value="disabled">{{ $t('_common.disabled') }}</option>
<option value="enabled">{{ $t('_common.enabled_def') }}</option>
</select>
<div class="form-text">{{ $t('config.amd_vbaq_desc') }}</div>
</div>
<!-- AMF Coder (H264) -->
<div class="mb-3">
<label for="amd_coder" class="form-label">{{ $t('config.amd_coder') }}</label>
<select id="amd_coder" class="form-select" v-model="config.amd_coder">
<option value="auto">{{ $t('config.ffmpeg_auto') }}</option>
<option value="cabac">{{ $t('config.coder_cabac') }}</option>
<option value="cavlc">{{ $t('config.coder_cavlc') }}</option>
</select>
<div class="form-text">{{ $t('config.amd_coder_desc') }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
</style>

53
src_assets/common/assets/web/configs/tabs/encoders/IntelQuickSyncEncoder.vue Normal file
View File

@@ -0,0 +1,53 @@
<script setup>
import { ref } from 'vue'
const props = defineProps([
'platform',
'config',
])
const config = ref(props.config)
</script>
<template>
<div id="intel-quicksync-encoder" class="config-page">
<!-- QuickSync Preset -->
<div class="mb-3">
<label for="qsv_preset" class="form-label">{{ $t('config.qsv_preset') }}</label>
<select id="qsv_preset" class="form-select" v-model="config.qsv_preset">
<option value="veryfast">{{ $t('config.qsv_preset_veryfast') }}</option>
<option value="faster">{{ $t('config.qsv_preset_faster') }}</option>
<option value="fast">{{ $t('config.qsv_preset_fast') }}</option>
<option value="medium">{{ $t('config.qsv_preset_medium') }}</option>
<option value="slow">{{ $t('config.qsv_preset_slow') }}</option>
<option value="slower">{{ $t('config.qsv_preset_slower') }}</option>
<option value="slowest">{{ $t('config.qsv_preset_slowest') }}</option>
</select>
</div>
<!-- QuickSync Coder (H264) -->
<div class="mb-3">
<label for="qsv_coder" class="form-label">{{ $t('config.qsv_coder') }}</label>
<select id="qsv_coder" class="form-select" v-model="config.qsv_coder">
<option value="auto">{{ $t('config.ffmpeg_auto') }}</option>
<option value="cabac">{{ $t('config.coder_cabac') }}</option>
<option value="cavlc">{{ $t('config.coder_cavlc') }}</option>
</select>
</div>
<!-- Allow Slow HEVC Encoding -->
<div class="mb-3">
<label for="qsv_slow_hevc" class="form-label">{{ $t('config.qsv_slow_hevc') }}</label>
<select id="qsv_slow_hevc" class="form-select" v-model="config.qsv_slow_hevc">
<option value="disabled">{{ $t('_common.disabled_def') }}</option>
<option value="enabled">{{ $t('_common.enabled') }}</option>
</select>
<div class="form-text">{{ $t('config.qsv_slow_hevc_desc') }}</div>
</div>
</div>
</template>
<style scoped>
</style>

126
src_assets/common/assets/web/configs/tabs/encoders/NvidiaNvencEncoder.vue Normal file
View File

@@ -0,0 +1,126 @@
<script setup>
import { ref } from 'vue'
const props = defineProps([
'platform',
'config',
])
const config = ref(props.config)
</script>
<template>
<div id="nvidia-nvenc-encoder" class="config-page">
<!-- Performance preset -->
<div class="mb-3">
<label for="nvenc_preset" class="form-label">{{ $t('config.nvenc_preset') }}</label>
<select id="nvenc_preset" class="form-select" v-model="config.nvenc_preset">
<option value="1">P1 {{ $t('config.nvenc_preset_1') }}</option>
<option value="2">P2</option>
<option value="3">P3</option>
<option value="4">P4</option>
<option value="5">P5</option>
<option value="6">P6</option>
<option value="7">P7 {{ $t('config.nvenc_preset_7') }}</option>
</select>
<div class="form-text">{{ $t('config.nvenc_preset_desc') }}</div>
</div>
<!-- Two-pass mode -->
<div class="mb-3">
<label for="nvenc_twopass" class="form-label">{{ $t('config.nvenc_twopass') }}</label>
<select id="nvenc_twopass" class="form-select" v-model="config.nvenc_twopass">
<option value="disabled">{{ $t('config.nvenc_twopass_disabled') }}</option>
<option value="quarter_res">{{ $t('config.nvenc_twopass_quarter_res') }}</option>
<option value="full_res">{{ $t('config.nvenc_twopass_full_res') }}</option>
</select>
<div class="form-text">{{ $t('config.nvenc_twopass_desc') }}</div>
</div>
<!-- Spatial AQ -->
<div class="mb-3">
<label for="nvenc_spatial_aq" class="form-label">{{ $t('config.nvenc_spatial_aq') }}</label>
<select id="nvenc_spatial_aq" class="form-select" v-model="config.nvenc_spatial_aq">
<option value="disabled">{{ $t('config.nvenc_spatial_aq_disabled') }}</option>
<option value="enabled">{{ $t('config.nvenc_spatial_aq_enabled') }}</option>
</select>
<div class="form-text">{{ $t('config.nvenc_spatial_aq_desc') }}</div>
</div>
<!-- Single-frame VBV/HRD percentage increase -->
<div class="mb-3">
<label for="nvenc_vbv_increase" class="form-label">{{ $t('config.nvenc_vbv_increase') }}</label>
<input type="number" min="0" max="400" class="form-control" id="nvenc_vbv_increase" placeholder="0"
v-model="config.nvenc_vbv_increase" />
<div class="form-text">
{{ $t('config.nvenc_vbv_increase_desc') }}<br>
<br>
<a href="https://en.wikipedia.org/wiki/Video_buffering_verifier">VBV/HRD</a>
</div>
</div>
<!-- Miscellaneous options -->
<div class="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.misc') }}
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
aria-labelledby="panelsStayOpen-headingOne">
<div class="accordion-body">
<!-- NVENC Realtime HAGS priority -->
<div class="mb-3" v-if="platform === 'windows'">
<label for="nvenc_realtime_hags" class="form-label">{{ $t('config.nvenc_realtime_hags') }}</label>
<select id="nvenc_realtime_hags" class="form-select" v-model="config.nvenc_realtime_hags">
<option value="disabled">{{ $t('_common.disabled') }}</option>
<option value="enabled">{{ $t('_common.enabled_def') }}</option>
</select>
<div class="form-text">
{{ $t('config.nvenc_realtime_hags_desc') }}<br>
<br>
<a href="https://devblogs.microsoft.com/directx/hardware-accelerated-gpu-scheduling/">HAGS</a>
</div>
</div>
<!-- Prefer lower encoding latency over power savings -->
<div class="mb-3" v-if="platform === 'windows'">
<label for="nvenc_latency_over_power" class="form-label">{{ $t('config.nvenc_latency_over_power') }}</label>
<select id="nvenc_latency_over_power" class="form-select" v-model="config.nvenc_latency_over_power">
<option value="disabled">{{ $t('_common.disabled') }}</option>
<option value="enabled">{{ $t('_common.enabled_def') }}</option>
</select>
<div class="form-text">{{ $t('config.nvenc_latency_over_power_desc') }}</div>
</div>
<!-- Present OpenGL/Vulkan on top of DXGI -->
<div class="mb-3" v-if="platform === 'windows'">
<label for="nvenc_opengl_vulkan_on_dxgi" class="form-label">{{ $t('config.nvenc_opengl_vulkan_on_dxgi') }}</label>
<select id="nvenc_opengl_vulkan_on_dxgi" class="form-select" v-model="config.nvenc_opengl_vulkan_on_dxgi">
<option value="disabled">{{ $t('_common.disabled') }}</option>
<option value="enabled">{{ $t('_common.enabled_def') }}</option>
</select>
<div class="form-text">{{ $t('config.nvenc_opengl_vulkan_on_dxgi_desc') }}</div>
</div>
<!-- NVENC H264 CAVLC -->
<div>
<label for="nvenc_h264_cavlc" class="form-label">{{ $t('config.nvenc_h264_cavlc') }}</label>
<select id="nvenc_h264_cavlc" class="form-select" v-model="config.nvenc_h264_cavlc">
<option value="disabled">{{ $t('_common.disabled_def') }}</option>
<option value="enabled">{{ $t('_common.enabled') }}</option>
</select>
<div class="form-text">{{ $t('config.nvenc_h264_cavlc_desc') }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
</style>

47
src_assets/common/assets/web/configs/tabs/encoders/SoftwareEncoder.vue Normal file
View File

@@ -0,0 +1,47 @@
<script setup>
import { ref } from 'vue'
const props = defineProps([
'platform',
'config'
])
const config = ref(props.config)
</script>
<template>
<div id="software-encoder" class="config-page">
<div class="mb-3">
<label for="sw_preset" class="form-label">{{ $t('config.sw_preset') }}</label>
<select id="sw_preset" class="form-select" v-model="config.sw_preset">
<option value="ultrafast">{{ $t('config.sw_preset_ultrafast') }}</option>
<option value="superfast">{{ $t('config.sw_preset_superfast') }}</option>
<option value="veryfast">{{ $t('config.sw_preset_veryfast') }}</option>
<option value="faster">{{ $t('config.sw_preset_faster') }}</option>
<option value="fast">{{ $t('config.sw_preset_fast') }}</option>
<option value="medium">{{ $t('config.sw_preset_medium') }}</option>
<option value="slow">{{ $t('config.sw_preset_slow') }}</option>
<option value="slower">{{ $t('config.sw_preset_slower') }}</option>
<option value="veryslow">{{ $t('config.sw_preset_veryslow') }}</option>
</select>
<div class="form-text">{{ $t('config.sw_preset_desc') }}</div>
</div>
<div class="mb-3">
<label for="sw_tune" class="form-label">{{ $t('config.sw_tune') }}</label>
<select id="sw_tune" class="form-select" v-model="config.sw_tune">
<option value="film">{{ $t('config.sw_tune_film') }}</option>
<option value="animation">{{ $t('config.sw_tune_animation') }}</option>
<option value="grain">{{ $t('config.sw_tune_grain') }}</option>
<option value="stillimage">{{ $t('config.sw_tune_stillimage') }}</option>
<option value="fastdecode">{{ $t('config.sw_tune_fastdecode') }}</option>
<option value="zerolatency">{{ $t('config.sw_tune_zerolatency') }}</option>
</select>
<div class="form-text">{{ $t('config.sw_tune_desc') }}</div>
</div>
</div>
</template>
<style scoped>
</style>

44
src_assets/common/assets/web/configs/tabs/encoders/VideotoolboxEncoder.vue Normal file
View File

@@ -0,0 +1,44 @@
<script setup>
import { ref } from 'vue'
const props = defineProps([
'platform',
'config',
])
const config = ref(props.config)
</script>
<template>
<div id="videotoolbox-encoder" class="config-page">
<!-- Presets -->
<div class="mb-3">
<label for="vt_coder" class="form-label">{{ $t('config.vt_coder') }}</label>
<select id="vt_coder" class="form-select" v-model="config.vt_coder">
<option value="auto">{{ $t('config.ffmpeg_auto') }}</option>
<option value="cabac">{{ $t('config.coder_cabac') }}</option>
<option value="cavlc">{{ $t('config.coder_cavlc') }}</option>
</select>
</div>
<div class="mb-3">
<label for="vt_software" class="form-label">{{ $t('config.vt_software') }}</label>
<select id="vt_software" class="form-select" v-model="config.vt_software">
<option value="auto">{{ $t('_common.auto') }}</option>
<option value="disabled">{{ $t('_common.disabled') }}</option>
<option value="allowed">{{ $t('config.vt_software_allowed') }}</option>
<option value="forced">{{ $t('config.vt_software_forced') }}</option>
</select>
</div>
<div class="mb-3">
<label for="vt_realtime" class="form-label">{{ $t('config.vt_realtime') }}</label>
<select id="vt_realtime" class="form-select" v-model="config.vt_realtime">
<option value="enabled">{{ $t('_common.enabled') }}</option>
<option value="disabled">{{ $t('_common.disabled') }}</option>
</select>
</div>
</div>
</template>
<style scoped>
</style>