audio/controller-v2
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update locale files for English, Traditional Chinese, and Simplified Chinese to include new effect titles and crossfeed options; refactor EffectsPage to utilize localized labels and improve state management for audio effects.

Browse Source
This commit is contained in:
yangy
2026-05-13 15:18:07 +08:00
parent 651fb0b93e
commit 5285b886ea
6 changed files with 172 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/locales/data-en.json
+11 -3
View File
@@ -36,6 +36,9 @@
}
},
"effect": {
"pageTitle": "Effects",
"selectStyleTitle": "Select sound style",
"selectCrossfeedTitle": "Select crossfeed preset",
"lowBass": "Bass",
"enterBass": "Mid",
"highBass": "Treble",
@@ -47,7 +50,7 @@
"mainframeCase": "Main speaker",
"subwooferUnit": "Subwoofer",
"style": {
"label": "style",
"label": "Style",
"options": [
{
"index": 0,
@@ -119,7 +122,12 @@
"label": "Stereo width"
},
"crossfeed": {
"label": "Crossfeed"
"label": "Crossfeed",
"options": [
"BS2B default (700 Hz, 4.5 dB)",
"BS2B popular (700 Hz, 6 dB)",
"BS2B relax (650 Hz, 9.5 dB)"
]
},
"subwoofer": {
"label": "Subwoofer",
@@ -145,7 +153,7 @@
"Standard": "Standard equalizer preset",
"edit": "Batch Edit",
"headset": "Add HeadSet",
"preamp": "Total gain",
"preamp": "Preamp",
"filters": {
"label": "Filters",
"options": [
client/src/locales/data-zh-HK.json
+11 -1
View File
@@ -29,6 +29,9 @@
"output": { "headset": "耳機" }
},
"effect": {
"pageTitle": "音效",
"selectStyleTitle": "選擇音效風格",
"selectCrossfeedTitle": "選擇交叉回授模式",
"lowBass": "低頻",
"enterBass": "中頻",
"highBass": "高頻",
@@ -60,7 +63,14 @@
]
},
"stereoWidth": { "label": "聲場寬度" },
"crossfeed": { "label": "交叉回授" },
"crossfeed": {
"label": "交叉回授",
"options": [
"BS2B default(700Hz,4.5dB)",
"BS2B polular(700Hz,6dB)",
"BS2B relax(650Hz,9.5dB)"
]
},
"subwoofer": {
"label": "重低音輸出",
"freq": "低通頻率",
client/src/locales/data-zh.json
+12 -2
View File
@@ -29,6 +29,9 @@
"output": { "headset": "耳机" }
},
"effect": {
"pageTitle": "音效",
"selectStyleTitle": "选择音效风格",
"selectCrossfeedTitle": "选择交叉反馈模式",
"lowBass": "低音",
"enterBass": "中音",
"highBass": "高音",
@@ -39,7 +42,7 @@
"mainframeCase": "主机箱",
"subwooferUnit": "低音炮",
"style": {
"label": "Style",
"label": "风格",
"options": [
{ "index": 0, "label": "古典" },
{ "index": 1, "label": "舞曲" },
@@ -60,7 +63,14 @@
]
},
"stereoWidth": { "label": "声场宽度" },
"crossfeed": { "label": "交叉反馈" },
"crossfeed": {
"label": "交叉反馈",
"options": [
"BS2B default(700Hz,4.5dB)",
"BS2B polular(700Hz,6dB)",
"BS2B relax(650Hz,9.5dB)"
]
},
"subwoofer": {
"label": "低音炮输出",
"freq": "低通频率",
client/src/pages/EQPage.tsx
+10 -1
View File
@@ -1225,6 +1225,15 @@ export default function EQPage() {
loadHeadphones();
}, [api, isDemoMode, loadRawCurveForPeq]);
/** 仅耳机/型号/filters 变化时变；preamp、autoPre 变化不触发，避免拖总增益时反复请求 modelCurve */
const modelCurveReloadKey = useMemo(() => {
const peq = peqItems[headphoneIdx];
if (!peq) return "";
const filtersKey =
typeof peq.filters === "string" ? peq.filters : JSON.stringify(peq.filters ?? []);
return [headphoneIdx, peq.name ?? "", peq.brand ?? "", peq.model ?? "", filtersKey].join("\u0001");
}, [headphoneIdx, peqItems]);
// 切换耳机型号后，立即用该型号 filters 刷新 10 个滤波器与曲线（暂停一次上报避免错写）
useEffect(() => {
const peq = peqItems[headphoneIdx];
@@ -1247,7 +1256,7 @@ export default function EQPage() {
return () => {
cancelled = true;
};
}, [headphoneIdx, peqItems, loadRawCurveForPeq]);
}, [modelCurveReloadKey, loadRawCurveForPeq]);
const schedulePeqSync = (
peq: { name: string; autoPre?: number; preamp?: number; canDel?: number } | undefined,
client/src/pages/EffectsPage.tsx
+120 -76
View File
@@ -9,9 +9,19 @@
import { useDevice } from "@/contexts/DeviceContext";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { useLocation } from "wouter";
import { useState, useEffect, useRef } from "react";
import { useState, useEffect, useRef, useMemo } from "react";
import BottomNav from "@/components/BottomNav";
import { navigateToSelect } from "./SelectPage";
import localeZh from "@/locales/data-zh.json";
import localeZhHK from "@/locales/data-zh-HK.json";
import localeEn from "@/locales/data-en.json";
type EffectLocale = NonNullable<(typeof localeZh)["effect"]>;
function clampPickIndex(i: number, len: number) {
if (len <= 0) return 0;
return Math.min(Math.max(i, 0), len - 1);
}
function IOSToggle({ checked, onChange }: { checked: boolean; onChange: (v: boolean) => void }) {
return (
@@ -22,10 +32,20 @@ function IOSToggle({ checked, onChange }: { checked: boolean; onChange: (v: bool
);
}
function CyanSlider({ value, min, max, step = 0.1, onChange, onMouseUp }: {
value: number; min: number; max: number; step?: number; onChange: (v: number) => void; onMouseUp?: () => void;
function CyanSlider({ value, min, max, step = 0.1, onChange, onRelease }: {
value: number;
min: number;
max: number;
step?: number;
onChange: (v: number) => void;
/** Fires once when the user releases the thumb (pointer/mouse/touch). Read value from DOM to avoid stale React state. */
onRelease?: (v: number) => void;
}) {
const fillPct = ((value - min) / (max - min)) * 100;
const emitRelease = (el: EventTarget | null) => {
if (!(el instanceof HTMLInputElement)) return;
onRelease?.(Number(el.value));
};
return (
<div className="relative flex items-center w-full mt-3">
<div className="absolute left-0 h-[4px] rounded-full pointer-events-none"
@@ -33,26 +53,37 @@ function CyanSlider({ value, min, max, step = 0.1, onChange, onMouseUp }: {
<input type="range" min={min} max={max} step={step} value={value}
className="cyan-slider relative z-10"
onChange={(e) => onChange(Number(e.target.value))}
onMouseUp={onMouseUp}
onTouchEnd={onMouseUp} />
onPointerUp={(e) => emitRelease(e.currentTarget)}
onPointerCancel={(e) => emitRelease(e.currentTarget)}
onKeyUp={(e) => {
if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "PageUp", "PageDown"].includes(e.key)) {
emitRelease(e.currentTarget);
}
}} />
</div>
);
}
const SCENE_OPTIONS = [
"古典", "舞曲", "流行", "雷鬼", "现场", "摇滚", "柔和", "电子乐",
"俱乐部", "全低音", "全高音", "耳机", "大厅", "聚合", "斯卡", "慢摇"
];
const CROSSFEED_OPTIONS = [
"BS2B default(700Hz,4.5dB)",
"BS2B polular(700Hz,6dB)",
"BS2B relax(650Hz,9.5dB)",
];
export default function EffectsPage() {
const [, setLocation] = useLocation();
const { deviceState, updateSetting } = useDevice();
const effectText = useMemo((): EffectLocale => {
const lang = deviceState?.language;
const pack = lang === 0 ? localeEn : lang === 1 ? localeZhHK : localeZh;
return (pack.effect ?? localeZh.effect) as EffectLocale;
}, [deviceState?.language]);
const sceneLabels = useMemo(() => {
const opts = effectText.style?.options ?? [];
return [...opts].sort((a, b) => a.index - b.index).map((o) => o.label);
}, [effectText]);
const crossfeedLabels = useMemo(
() => effectText.crossfeed?.options ?? [],
[effectText],
);
const ds = deviceState;
const effectOn = (ds?.audio_enable ?? 0) === 1;
const widthOn = (ds?.width_enable ?? 0) === 1;
@@ -93,11 +124,11 @@ export default function EffectsPage() {
if (!isDraggingLoudnessTreble.current) setLocalLoudnessTreble(loudnessTrebleGain);
}, [colorBassGain, colorMidGain, colorTrebleGain, loudnessThreshold, loudnessBassGain, loudnessTrebleGain]);
const [localWidth, setLocalWidth] = useState(widthVal);
const [localWidth, setLocalWidth] = useState(() => Math.round(widthVal));
const isDragging = useRef(false);
useEffect(() => {
if (!isDragging.current) setLocalWidth(widthVal);
if (!isDragging.current) setLocalWidth(Math.round(widthVal));
}, [widthVal]);
const goSelect = (title: string, options: string[], selected: number, key: string) => {
@@ -105,6 +136,11 @@ export default function EffectsPage() {
setLocation("/select");
};
const sceneIdx = clampPickIndex(sceneVal, sceneLabels.length);
const sceneDisplay = sceneLabels[sceneIdx] ?? "";
const crossIdx = clampPickIndex(crossfeedVal, crossfeedLabels.length);
const crossfeedDisplay = crossfeedLabels[crossIdx] ?? "";
return (
<div className="min-h-screen bg-black">
<div style={{
@@ -115,7 +151,7 @@ export default function EffectsPage() {
<button onClick={() => setLocation("/")} className="mr-4 text-white/60 active:text-white transition-colors">
<ChevronLeft size={24} />
</button>
<h1 className="flex-1 text-center text-[17px] font-semibold text-white">Effect</h1>
<h1 className="flex-1 text-center text-[17px] font-semibold text-white">{effectText.pageTitle}</h1>
<IOSToggle checked={effectOn} onChange={(v) => updateSetting({ audio_enable: v ? 1 : 0 })} />
</div>
@@ -123,13 +159,13 @@ export default function EffectsPage() {
{/* ── Style ── */}
<div className="ios-list-group p-4">
<div className="flex items-center justify-between mb-3">
<span className="text-[16px] font-medium text-white">Style</span>
<span className="text-[16px] font-medium text-white">{effectText.style.label}</span>
<IOSToggle checked={sceneOn} onChange={(v) => updateSetting({ effect_enable: v ? 1 : 0 })} />
</div>
<button
className="flex items-center justify-between w-full active:opacity-70 transition-opacity"
onClick={() => goSelect("选择音效风格", SCENE_OPTIONS, sceneVal, "effect_value")}>
<span className="text-[15px] text-white/55">{SCENE_OPTIONS[sceneVal]}</span>
onClick={() => goSelect(effectText.selectStyleTitle, sceneLabels, sceneVal, "effect_value")}>
<span className="text-[15px] text-white/55">{sceneDisplay}</span>
<ChevronRight size={16} className="ios-chevron" />
</button>
</div>
@@ -138,30 +174,38 @@ export default function EffectsPage() {
<div className="ios-list-group p-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<span className="text-[16px] font-medium text-white">声场宽度</span>
<span className="text-[16px] font-bold" style={{ color: "#00FFF6" }}>{localWidth}</span>
<span className="text-[16px] font-medium text-white">{effectText.stereoWidth.label}</span>
<span className="text-[16px] font-bold" style={{ color: "#00FFF6" }}>{Math.round(localWidth)}</span>
</div>
<IOSToggle checked={widthOn} onChange={(v) => updateSetting({ width_enable: v ? 1 : 0 })} />
</div>
<CyanSlider value={localWidth} min={0} max={100}
<CyanSlider
value={localWidth}
min={0}
max={100}
step={1}
onChange={(v) => {
isDragging.current = true;
setLocalWidth(v);
updateSetting({ width_value: v });
setTimeout(() => { isDragging.current = false; }, 500);
setLocalWidth(Math.round(v));
}}
onRelease={(v) => {
isDragging.current = false;
const w = Math.round(v);
setLocalWidth(w);
updateSetting({ width_value: w });
}} />
</div>
{/* ── 交叉反馈 ── */}
<div className="ios-list-group p-4">
<div className="flex items-center justify-between mb-3">
<span className="text-[16px] font-medium text-white">交叉反馈</span>
<span className="text-[16px] font-medium text-white">{effectText.crossfeed.label}</span>
<IOSToggle checked={crossfeedOn} onChange={(v) => updateSetting({ crossfeed_enable: v ? 1 : 0 })} />
</div>
<button
className="flex items-center justify-between w-full active:opacity-70 transition-opacity"
onClick={() => goSelect("选择交叉反馈模式", CROSSFEED_OPTIONS, crossfeedVal, "crossfeed_value")}>
<span className="text-[14px] text-white/45">{CROSSFEED_OPTIONS[crossfeedVal]}</span>
onClick={() => goSelect(effectText.selectCrossfeedTitle, crossfeedLabels, crossfeedVal, "crossfeed_value")}>
<span className="text-[14px] text-white/45">{crossfeedDisplay}</span>
<ChevronRight size={16} className="ios-chevron" />
</button>
</div>
@@ -169,7 +213,7 @@ export default function EffectsPage() {
{/* ── 音调 ── */}
<div className="ios-list-group p-4">
<div className="flex items-center justify-between">
<span className="text-[16px] font-medium text-white">音调</span>
<span className="text-[16px] font-medium text-white">{effectText.tone}</span>
<IOSToggle checked={colorOn} onChange={(v) => updateSetting({ color_enable: v ? 1 : 0 })} />
</div>
@@ -178,20 +222,20 @@ export default function EffectsPage() {
{/* 低音 */}
<div>
<div className="flex items-center justify-between mb-2">
<span className="text-[14px] text-white/60">低音</span>
<span className="text-[14px] text-white/60">{effectText.lowBass}</span>
<span className="text-[14px] font-bold" style={{ color: "#00FFF6" }}>{localBass.toFixed(1)}</span>
</div>
<CyanSlider
value={localBass}
min={-10}
max={10}
<CyanSlider
value={localBass}
min={-10}
max={10}
onChange={(v) => {
isDraggingBass.current = true;
setLocalBass(v);
}}
onMouseUp={() => {
onRelease={(v) => {
isDraggingBass.current = false;
updateSetting({ color_bass_gain: Math.round(localBass * 10) });
updateSetting({ color_bass_gain: Math.round(v * 10) });
}}
/>
</div>
@@ -199,20 +243,20 @@ export default function EffectsPage() {
{/* 中音 */}
<div>
<div className="flex items-center justify-between mb-2">
<span className="text-[14px] text-white/60">中音</span>
<span className="text-[14px] text-white/60">{effectText.enterBass}</span>
<span className="text-[14px] font-bold" style={{ color: "#00FFF6" }}>{localMid.toFixed(1)}</span>
</div>
<CyanSlider
value={localMid}
min={-10}
max={10}
<CyanSlider
value={localMid}
min={-10}
max={10}
onChange={(v) => {
isDraggingMid.current = true;
setLocalMid(v);
}}
onMouseUp={() => {
onRelease={(v) => {
isDraggingMid.current = false;
updateSetting({ color_mid_gain: Math.round(localMid * 10) });
updateSetting({ color_mid_gain: Math.round(v * 10) });
}}
/>
</div>
@@ -220,20 +264,20 @@ export default function EffectsPage() {
{/* 高音 */}
<div>
<div className="flex items-center justify-between mb-2">
<span className="text-[14px] text-white/60">高音</span>
<span className="text-[14px] text-white/60">{effectText.highBass}</span>
<span className="text-[14px] font-bold" style={{ color: "#00FFF6" }}>{localTreble.toFixed(1)}</span>
</div>
<CyanSlider
value={localTreble}
min={-10}
max={10}
<CyanSlider
value={localTreble}
min={-10}
max={10}
onChange={(v) => {
isDraggingTreble.current = true;
setLocalTreble(v);
}}
onMouseUp={() => {
onRelease={(v) => {
isDraggingTreble.current = false;
updateSetting({ color_treble_gain: Math.round(localTreble * 10) });
updateSetting({ color_treble_gain: Math.round(v * 10) });
}}
/>
</div>
@@ -244,7 +288,7 @@ export default function EffectsPage() {
{/* ── 响度 ── */}
<div className="ios-list-group p-4">
<div className="flex items-center justify-between">
<span className="text-[16px] font-medium text-white">响度</span>
<span className="text-[16px] font-medium text-white">{effectText.loudness}</span>
<IOSToggle checked={loudnessOn} onChange={(v) => updateSetting({ loudness_enable: v ? 1 : 0 })} />
</div>
@@ -253,65 +297,65 @@ export default function EffectsPage() {
{/* 阈值 */}
<div>
<div className="flex items-center justify-between mb-2">
<span className="text-[14px] text-white/60">阈值</span>
<span className="text-[14px] text-white/60">{effectText.threshold}</span>
<span className="text-[14px] font-bold" style={{ color: "#00FFF6" }}>{localLoudnessThreshold}</span>
</div>
<CyanSlider
value={localLoudnessThreshold}
min={-30}
max={0}
<CyanSlider
value={localLoudnessThreshold}
min={-30}
max={0}
step={1}
onChange={(v) => {
isDraggingLoudnessThreshold.current = true;
setLocalLoudnessThreshold(v);
}}
onMouseUp={() => {
onRelease={(v) => {
isDraggingLoudnessThreshold.current = false;
updateSetting({ loudness_threshold_gain: Math.round(localLoudnessThreshold) });
updateSetting({ loudness_threshold_gain: Math.round(v) });
}}
/>
</div>
{/* 低音 */}
{/* Loudness bass */}
<div>
<div className="flex items-center justify-between mb-2">
<span className="text-[14px] text-white/60">低音</span>
<span className="text-[14px] text-white/60">{effectText.lowBass}</span>
<span className="text-[14px] font-bold" style={{ color: "#00FFF6" }}>{localLoudnessBass.toFixed(1)}</span>
</div>
<CyanSlider
value={localLoudnessBass}
min={0}
max={10}
<CyanSlider
value={localLoudnessBass}
min={0}
max={10}
step={0.1}
onChange={(v) => {
isDraggingLoudnessBass.current = true;
setLocalLoudnessBass(v);
}}
onMouseUp={() => {
onRelease={(v) => {
isDraggingLoudnessBass.current = false;
updateSetting({ loudness_bass_gain: Math.round(localLoudnessBass * 10) });
updateSetting({ loudness_bass_gain: Math.round(v * 10) });
}}
/>
</div>
{/* 高音 */}
{/* Loudness treble */}
<div>
<div className="flex items-center justify-between mb-2">
<span className="text-[14px] text-white/60">高音</span>
<span className="text-[14px] text-white/60">{effectText.highBass}</span>
<span className="text-[14px] font-bold" style={{ color: "#00FFF6" }}>{localLoudnessTreble.toFixed(1)}</span>
</div>
<CyanSlider
value={localLoudnessTreble}
min={0}
max={10}
<CyanSlider
value={localLoudnessTreble}
min={0}
max={10}
step={0.1}
onChange={(v) => {
isDraggingLoudnessTreble.current = true;
setLocalLoudnessTreble(v);
}}
onMouseUp={() => {
onRelease={(v) => {
isDraggingLoudnessTreble.current = false;
updateSetting({ loudness_treble_gain: Math.round(localLoudnessTreble * 10) });
updateSetting({ loudness_treble_gain: Math.round(v * 10) });
}}
/>
</div>
client/src/pages/Home.tsx
+8 -8
View File
@@ -155,7 +155,7 @@ export default function Home() {
}
}, [api, disconnect, isDemoMode, homeText]);
/** HP-EQ 圆钮：单击进入 /eq；双击在 280ms 内第二次点击则切换 peqEnable（与 info.cgi?action=setting&peqEnable=0|1 一致） */
/** HP-EQ 圆钮：单击在短延迟后切换 peqEnable（避免与双击抢）；280ms 内第二次点击则取消开关并进入 /eq */
const HP_EQ_DOUBLE_CLICK_MS = 280;
const handleHpEqCircleClick = useCallback(() => {
const now = Date.now();
@@ -166,8 +166,7 @@ export default function Home() {
clearTimeout(hpEqNavigateTimerRef.current);
hpEqNavigateTimerRef.current = null;
}
const on = (deviceState?.peqEnable ?? 0) === 1;
void updateSetting({ peqEnable: on ? 0 : 1 });
setLocation("/eq");
return;
}
hpEqLastTapRef.current = now;
@@ -175,11 +174,12 @@ export default function Home() {
hpEqNavigateTimerRef.current = setTimeout(() => {
hpEqNavigateTimerRef.current = null;
hpEqLastTapRef.current = null;
setLocation("/eq");
const on = (deviceState?.peqEnable ?? 0) === 1;
void updateSetting({ peqEnable: on ? 0 : 1 });
}, HP_EQ_DOUBLE_CLICK_MS);
}, [deviceState?.peqEnable, updateSetting, setLocation]);
/** Effect 圆钮：单击进入 /effects；双击切换 audio_enable */
/** Effect 圆钮：单击短延迟后切换 audio_enable；280ms 内第二次点击则进入 /effects */
const handleEffectCircleClick = useCallback(() => {
const now = Date.now();
const last = effectLastTapRef.current;
@@ -189,8 +189,7 @@ export default function Home() {
clearTimeout(effectNavigateTimerRef.current);
effectNavigateTimerRef.current = null;
}
const on = (deviceState?.audio_enable ?? 0) === 1;
void updateSetting({ audio_enable: on ? 0 : 1 });
setLocation("/effects");
return;
}
effectLastTapRef.current = now;
@@ -198,7 +197,8 @@ export default function Home() {
effectNavigateTimerRef.current = setTimeout(() => {
effectNavigateTimerRef.current = null;
effectLastTapRef.current = null;
setLocation("/effects");
const on = (deviceState?.audio_enable ?? 0) === 1;
void updateSetting({ audio_enable: on ? 0 : 1 });
}, HP_EQ_DOUBLE_CLICK_MS);
}, [deviceState?.audio_enable, updateSetting, setLocation]);