feat(web/config): consolidate HEVC + AV1 into a single Codec Strategy#645
Merged
Conversation
The Advanced tab used to expose two separate dropdowns ("HEVC Support" and "AV1 Support"), each with four numeric modes mapping to hevc_mode / av1_mode (0=auto, 1=off, 2=Main 8-bit, 3=Main+Main10/HDR). Most users have no idea which combination is sane and the two settings are almost always changed together.
Replace them with a single "Codec Strategy" select driven by a Vue computed setter, which writes both hevc_mode and av1_mode in lockstep:
- auto -> 0/0 (let encoder capabilities decide; recommended)
- modern -> 2/2 or 3/3 depending on the new HDR checkbox
- h264_only -> 1/1 (force clients to fall back to H.264)
- custom -> exposed only when the saved values don't match a preset, lets advanced users open the collapsible block and tweak hevc_mode / av1_mode individually
An "Enable HDR (Main 10)" checkbox is rendered next to the strategy and only writable in the modern preset; toggling it flips both modes between 2 and 3 so HDR negotiation stays consistent across HEVC and AV1.
When the saved combination deviates from the recommended preset a warning alert is shown and the original two dropdowns are exposed in a "Show advanced" collapsible region, so power users can still reach every value without leaving the tab.
No backend changes: hevc_mode / av1_mode keep the exact same semantics and value range, so existing config files continue to load unchanged.
Locales: add codec_strategy / codec_enable_hdr / codec_advanced_* keys to zh, zh_TW and the three English variants.
📝 WalkthroughWalkthrough在 Advanced.vue 中新增 codecStrategy 高层选择与 HDR 控制；替换原始 HEVC/AV1 下拉为策略选择器并添加可折叠的高级面板以支持手动编辑；在多语言 locale 文件中添加对应翻译键；在 Inputs.vue 中引入通用的 createDriverManager 抽象以合并 vmouse/ViGEmBus 逻辑并调整面板布局 CSS。 变更编码策略UI重构
Inputs 驱动管理重构
🎯 3 (Moderate) | ⏱️ ~20 分钟
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src_assets/common/assets/web/configs/tabs/Advanced.vue`:
- Around line 221-231: The collapse toggle button lacks ARIA attributes and the
target panel lacks an id which hurts screen-reader accessibility; add a stable
id (e.g., codecAdvancedId) to the panel div that wraps the advanced options and
set the button attributes aria-controls to that id and aria-expanded bound to
the showCodecAdvanced boolean (i.e., :aria-expanded="showCodecAdvanced" and
:aria-controls="codecAdvancedId"); implement codecAdvancedId as a data/computed
property so it’s unique/stable and update the div (the element with
v-if="showCodecAdvanced") to include that id.
In `@src_assets/common/assets/web/public/assets/locale/zh.json`:
- Line 231: The value for the "codec_strategy_desc" key contains a typo
"默认跳动【自动】"; update the zh.json string for codec_strategy_desc to remove "跳动" and
use a clear phrasing such as "默认【自动】" or "默认“自动”" so the sentence reads
correctly (e.g., replace "默认跳动【自动】按编码器能力选择" with "默认【自动】按编码器能力选择").
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 15b5be5f-0230-4942-8e7e-615d97c5f5bd
📒 Files selected for processing (6)
src_assets/common/assets/web/configs/tabs/Advanced.vuesrc_assets/common/assets/web/public/assets/locale/en.jsonsrc_assets/common/assets/web/public/assets/locale/en_GB.jsonsrc_assets/common/assets/web/public/assets/locale/en_US.jsonsrc_assets/common/assets/web/public/assets/locale/zh.jsonsrc_assets/common/assets/web/public/assets/locale/zh_TW.json
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Windows
🧰 Additional context used
📓 Path-based instructions (1)
src_assets/**/*.{vue,js,html}
⚙️ CodeRabbit configuration file
src_assets/**/*.{vue,js,html}: 基于 Vue.js 的 Web 配置面板。审查 XSS/CSRF 安全性、 组件设计、状态管理和可访问性。
Files:
src_assets/common/assets/web/configs/tabs/Advanced.vue
Address CodeRabbit review on PR #645: - Advanced.vue: add aria-expanded / aria-controls to the "Show advanced" toggle button and a stable id (codec-advanced-panel) on the collapsible div, so screen readers can announce the disclosure state correctly. - zh.json: fix typo in codec_strategy_desc ("\u9ed8\u8ba4\u8df3\u52a8\u3010\u81ea\u52a8\u3011" -> "\u9ed8\u8ba4\u3010\u81ea\u52a8\u3011") and restore the full-width comma between clauses.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src_assets/common/assets/web/configs/tabs/Inputs.vue`:
- Around line 57-95: The template still references legacy aliases (e.g.,
hasVigemDriver, vigemDotClass, hasVmouseDriver) that were removed during the
createDriverManager refactor; add small compatibility computed aliases that map
the old names to the new driver manager state (use the existing vmouse and vigem
objects and their computed labels): define hasVigemDriver =>
vigem.available.value, hasVmouseDriver => vmouse.available.value, and create
vigemDotClass and vmouseDotClass computed values that derive the same CSS/class
semantics as the template expects by consulting vigem.status.value (and
vigemStatusLabel) and vmouse.status.value (and vmouseStatusLabel); keep these
minimal shim computed bindings so the template can continue to use the original
identifiers.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: dc6a55df-efda-45d1-ad83-4b1e6a4ec59e
📒 Files selected for processing (1)
src_assets/common/assets/web/configs/tabs/Inputs.vue
Comment on lines
+57
to
95
| // vmouse 驱动管理 | ||
| const vmouse = createDriverManager('vmouseDriver', { installed: false, running: false, status_text: '' }) | ||
| const installVmouse = () => vmouse.runOp('config.vmouse_confirm_install', d => d.install()) | ||
| const uninstallVmouse = () => vmouse.runOp('config.vmouse_confirm_uninstall', d => d.uninstall()) | ||
|
|
||
| const vmouseStatusLabel = computed(() => { | ||
| if (vmouseStatus.value.running) return t('config.vmouse_status_running') | ||
| if (vmouseStatus.value.installed) return t('config.vmouse_status_installed') | ||
| if (vmouse.status.value.running) return t('config.vmouse_status_running') | ||
| if (vmouse.status.value.installed) return t('config.vmouse_status_installed') | ||
| return t('config.vmouse_status_not_installed') | ||
| }) | ||
|
|
||
| const vigemDotClass = computed(() => { | ||
| if (vigemStatus.value.running) return 'dot-active' | ||
| if (vigemStatus.value.installed) return 'dot-warning' | ||
| return 'dot-inactive' | ||
| }) | ||
| // ViGEmBus 虚拟手柄驱动管理 | ||
| const vigem = createDriverManager('vigemDriver', | ||
| { installed: false, running: false, version: '', version_ok: false, status_text: '' }) | ||
| const installVigem = (force = false) => vigem.runOp( | ||
| force ? 'config.vigem_confirm_reinstall' : 'config.vigem_confirm_install', | ||
| d => d.install(force) | ||
| ) | ||
| const uninstallVigem = () => vigem.runOp('config.vigem_confirm_uninstall', d => d.uninstall()) | ||
|
|
||
| const vigemStatusLabel = computed(() => { | ||
| if (!vigemStatus.value.installed) return t('config.vigem_status_not_installed') | ||
| if (!vigemStatus.value.version_ok) return t('config.vigem_status_outdated') | ||
| if (vigemStatus.value.running) { | ||
| return vigemStatus.value.version | ||
| ? `${t('config.vigem_status_running')} (${vigemStatus.value.version})` | ||
| : t('config.vigem_status_running') | ||
| const s = vigem.status.value | ||
| if (!s.installed) return t('config.vigem_status_not_installed') | ||
| if (!s.version_ok) return t('config.vigem_status_outdated') | ||
| if (s.running) { | ||
| const running = t('config.vigem_status_running') | ||
| return s.version ? `${running} (${s.version})` : running | ||
| } | ||
| return t('config.vigem_status_installed') | ||
| }) | ||
|
|
||
| onMounted(async () => { | ||
| if (!window.isTauri) return | ||
| vmouse.available.value = !!window.vmouseDriver | ||
| vigem.available.value = !!window.vigemDriver | ||
| if (vmouse.available.value) await vmouse.refresh() | ||
| if (vigem.available.value) await vigem.refresh() | ||
| }) | ||
| </script> |
There was a problem hiding this comment.
重构后缺少模板绑定别名，导致页面绑定失效。
createDriverManager 重构后，模板仍在使用旧标识符（如 Line 134 的 hasVigemDriver、Line 143 的 vigemDotClass、Line 367 的 hasVmouseDriver 等），但 script 未定义这些变量，会导致模板解析/运行时报错。
建议补充兼容别名（最小改动）
// vmouse 驱动管理
const vmouse = createDriverManager('vmouseDriver', { installed: false, running: false, status_text: '' })
const installVmouse = () => vmouse.runOp('config.vmouse_confirm_install', d => d.install())
const uninstallVmouse = () => vmouse.runOp('config.vmouse_confirm_uninstall', d => d.uninstall())
+const hasVmouseDriver = computed(() => vmouse.available.value)
+const vmouseStatus = computed(() => vmouse.status.value)
+const vmouseLoading = computed(() => vmouse.loading.value)
+const vmouseOperating = computed(() => vmouse.operating.value)
+const vmouseDotClass = computed(() => vmouse.dotClass.value)
+const refreshVmouseStatus = () => vmouse.refresh()
// ViGEmBus 虚拟手柄驱动管理
const vigem = createDriverManager('vigemDriver',
{ installed: false, running: false, version: '', version_ok: false, status_text: '' })
const installVigem = (force = false) => vigem.runOp(
force ? 'config.vigem_confirm_reinstall' : 'config.vigem_confirm_install',
d => d.install(force)
)
const uninstallVigem = () => vigem.runOp('config.vigem_confirm_uninstall', d => d.uninstall())
+const hasVigemDriver = computed(() => vigem.available.value)
+const vigemStatus = computed(() => vigem.status.value)
+const vigemLoading = computed(() => vigem.loading.value)
+const vigemOperating = computed(() => vigem.operating.value)
+const vigemDotClass = computed(() => vigem.dotClass.value)
+const refreshVigemStatus = () => vigem.refresh()🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src_assets/common/assets/web/configs/tabs/Inputs.vue` around lines 57 - 95,
The template still references legacy aliases (e.g., hasVigemDriver,
vigemDotClass, hasVmouseDriver) that were removed during the createDriverManager
refactor; add small compatibility computed aliases that map the old names to the
new driver manager state (use the existing vmouse and vigem objects and their
computed labels): define hasVigemDriver => vigem.available.value,
hasVmouseDriver => vmouse.available.value, and create vigemDotClass and
vmouseDotClass computed values that derive the same CSS/class semantics as the
template expects by consulting vigem.status.value (and vigemStatusLabel) and
vmouse.status.value (and vmouseStatusLabel); keep these minimal shim computed
bindings so the template can continue to use the original identifiers.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
背景
Advanced 设置里原本有两个独立下拉「HEVC Support」和「AV1 Support」，每个 4 档（auto/off/Main 8-bit/Main+Main10），分别写入
hevc_mode/av1_mode。普通用户面对这两个相互独立、又必须保持一致的数字档位很容易蒙：到底选哪个？要不要勾 HDR？两边要不要一致？我们自己也觉得这一块 UX 很差。
改动
把这两个下拉合并成一个 Codec Strategy 选项 + 一个 Enable HDR (Main 10) 复选框：
折叠的 "Show advanced" 区里仍保留原来的两个 HEVC/AV1 下拉，所以每一个原档位都还能直接配。
实现细节
hevc_mode/av1_mode的语义和取值范围完全不变，老配置文件继续可读。computed({ get, set })双向绑定：codecStrategy与enableHdr派生自hevc_mode+av1_mode，set 时同步写两个字段。zh、zh_TW、en、en_US、en_GB。不影响
hevc_mode/av1_mode的 backend 处理（config.cpp、stream 协商）零改动。Summary by CodeRabbit
发布说明
新功能
本地化
改进