yangy
765 lines
31 KiB
TypeScript
765 lines
31 KiB
TypeScript
/* ============================================================
|
|
EFFECTS PAGE — Sound Effect Settings
|
|
Design: Reference luxsin_x8_音效.jpg
|
|
Layout:
|
|
- Page header with global Effect toggle
|
|
- Glass cards: Style, 声场宽度, 交叉反馈, 音调, 响度
|
|
All dropdowns → navigate to /select page
|
|
============================================================ */
|
|
import { useDevice } from "@/contexts/DeviceContext";
|
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
import { useLocation } from "wouter";
|
|
import { useState, useEffect, useRef, useMemo } from "react";
|
|
import BottomNav from "@/components/BottomNav";
|
|
import SubwooferLpfChart from "@/components/SubwooferLpfChart";
|
|
import { FeatureGate } from "@/components/FeatureGate";
|
|
import { navigateToSelect } from "./SelectPage";
|
|
import { parseFirmwareVersion } from "@/lib/luxsinApi";
|
|
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);
|
|
}
|
|
|
|
const SUBWOOFER_DELAY_MS_DIVISOR = 48;
|
|
const SUBWOOFER_DELAY_CM_NUMERATOR = 34;
|
|
const SUBWOOFER_DELAY_MAX = 1920;
|
|
|
|
function clampSubwooferDelayValue(v: number) {
|
|
return Math.round(Math.min(SUBWOOFER_DELAY_MAX, Math.max(0, v)));
|
|
}
|
|
|
|
function subwooferDelayToMs(value: number) {
|
|
return value / SUBWOOFER_DELAY_MS_DIVISOR;
|
|
}
|
|
|
|
function subwooferDelayToCm(value: number) {
|
|
return (value * SUBWOOFER_DELAY_CM_NUMERATOR) / SUBWOOFER_DELAY_MS_DIVISOR;
|
|
}
|
|
|
|
function formatSubwooferDelayValue(value: number) {
|
|
const ms = subwooferDelayToMs(value);
|
|
const cm = subwooferDelayToCm(value);
|
|
return `${ms.toFixed(2)}ms(${cm.toFixed(1)}cm)`;
|
|
}
|
|
|
|
type DelayChannel = "L" | "R";
|
|
|
|
function DelaySpeakerIcon({ direction }: { direction: "left" | "right" }) {
|
|
return (
|
|
<svg
|
|
width="22"
|
|
height="22"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.75"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className={direction === "left" ? "scale-x-[-1]" : undefined}
|
|
aria-hidden
|
|
>
|
|
<path d="M11 5 6 9H3v6h3l5 4V5z" />
|
|
<path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
|
|
<path d="M19.07 4.93a10 10 0 0 1 0 14.14" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function FullRangeToggleButton({
|
|
label,
|
|
active,
|
|
onClick,
|
|
}: {
|
|
label: string;
|
|
active: boolean;
|
|
onClick: () => void;
|
|
}) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
className={`rounded-lg border-2 px-4 py-2.5 text-[13px] font-medium whitespace-nowrap transition-all active:scale-[0.98] ${
|
|
active
|
|
? "border-[#00FFF6] bg-[#00FFF6] text-black shadow-[0_0_10px_rgba(0,255,246,0.35)]"
|
|
: "border-[#00FFF6]/45 bg-transparent text-white/75"
|
|
}`}
|
|
>
|
|
{label}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
function DelayChannelToggle({
|
|
channel,
|
|
onChange,
|
|
leftLabel,
|
|
rightLabel,
|
|
}: {
|
|
channel: DelayChannel;
|
|
onChange: (ch: DelayChannel) => void;
|
|
leftLabel: string;
|
|
rightLabel: string;
|
|
}) {
|
|
const btnClass = (active: boolean) =>
|
|
`flex items-center justify-center w-10 h-10 rounded-lg transition-colors ${
|
|
active ? "bg-[#00FFF6]/20 text-[#00FFF6]" : "text-white/35 active:bg-white/10"
|
|
}`;
|
|
|
|
return (
|
|
<div className="flex items-center gap-1.5">
|
|
<button
|
|
type="button"
|
|
className={btnClass(channel === "L")}
|
|
onClick={() => onChange("L")}
|
|
aria-label={leftLabel}
|
|
aria-pressed={channel === "L"}
|
|
>
|
|
<DelaySpeakerIcon direction="left" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={btnClass(channel === "R")}
|
|
onClick={() => onChange("R")}
|
|
aria-label={rightLabel}
|
|
aria-pressed={channel === "R"}
|
|
>
|
|
<DelaySpeakerIcon direction="right" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function IOSToggle({ checked, onChange }: { checked: boolean; onChange: (v: boolean) => void }) {
|
|
return (
|
|
<label className="ios-toggle" onClick={(e) => e.stopPropagation()}>
|
|
<input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} />
|
|
<span className="ios-toggle-track"><span className="ios-toggle-thumb" /></span>
|
|
</label>
|
|
);
|
|
}
|
|
|
|
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"
|
|
style={{ width: `${fillPct}%`, background: "#00FFF6", boxShadow: "0 0 6px rgba(0,255,246,0.5)" }} />
|
|
<input type="range" min={min} max={max} step={step} value={value}
|
|
className="cyan-slider relative z-10"
|
|
onChange={(e) => onChange(Number(e.target.value))}
|
|
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>
|
|
);
|
|
}
|
|
|
|
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 bypassOn = (ds?.dsp_enable ?? 0) === 0;
|
|
const audioOn = (ds?.audio_enable ?? 0) === 1;
|
|
const effectOn = audioOn && !bypassOn;
|
|
const widthOn = (ds?.width_enable ?? 0) === 1;
|
|
const widthVal = ds?.width_value ?? 50;
|
|
const crossfeedOn = (ds?.crossfeed_enable ?? 0) === 1;
|
|
const crossfeedVal = ds?.crossfeed_value ?? 0;
|
|
const sceneOn = (ds?.effect_enable ?? 0) === 1;
|
|
const sceneVal = ds?.effect_value ?? 0;
|
|
const colorOn = (ds?.color_enable ?? 0) === 1;
|
|
const colorBassGain = (ds?.color_bass_gain ?? 0) / 10;
|
|
const colorMidGain = (ds?.color_mid_gain ?? 0) / 10;
|
|
const colorTrebleGain = (ds?.color_treble_gain ?? 0) / 10;
|
|
const loudnessOn = (ds?.loudness_enable ?? 0) === 1;
|
|
const loudnessThreshold = ds?.loudness_threshold_gain ?? 0;
|
|
const loudnessBassGain = (ds?.loudness_bass_gain ?? 0) / 10;
|
|
const loudnessTrebleGain = (ds?.loudness_treble_gain ?? 0) / 10;
|
|
const subwooferOn = (ds?.subwoofer_enable ?? 0) === 1;
|
|
const subwooferFreq = Math.min(300, Math.max(40, ds?.subwoofer_value ?? 80));
|
|
const subwooferRate = Math.min(7, Math.max(0, ds?.subwoofer_rate ?? 0));
|
|
const subwooferGain = Math.min(15, Math.max(-15, ds?.subwoofer_gain ?? 0));
|
|
const subwooferMixType = ds?.subwoofer_mix_type ?? 0;
|
|
const subwooferLpfOn = (ds?.subwoofer_lpf_enable ?? 0) === 1;
|
|
const subwooferHpfOn = (ds?.subwoofer_hpf_enable ?? 0) === 1;
|
|
const firmwareVersion = parseFirmwareVersion(ds?.version);
|
|
const showSubwooferFullRange = firmwareVersion >= 2001;
|
|
|
|
const subwooferDelayMainL = clampSubwooferDelayValue(ds?.subwoofer_delay_main ?? 0);
|
|
const subwooferDelaySubL = clampSubwooferDelayValue(ds?.subwoofer_delay ?? 0);
|
|
const subwooferDelayMainR = clampSubwooferDelayValue(ds?.subwoofer_delay_main_r ?? 0);
|
|
const subwooferDelaySubR = clampSubwooferDelayValue(ds?.subwoofer_delay_r ?? 0);
|
|
const subwooferText = effectText.subwoofer;
|
|
const subwooferDelayText = subwooferText?.delay;
|
|
const subwooferRateLabels = useMemo(
|
|
() => subwooferText?.rateOptions ?? [
|
|
"6dB/oct", "12dB/oct", "18dB/oct", "24dB/oct",
|
|
"30dB/oct", "36dB/oct", "42dB/oct", "48dB/oct",
|
|
],
|
|
[subwooferText],
|
|
);
|
|
const subwooferOutputLabels = useMemo(() => {
|
|
const opts = subwooferText?.output?.options ?? [];
|
|
return [...opts].sort((a, b) => a.index - b.index).map((o) => o.label);
|
|
}, [subwooferText]);
|
|
|
|
const [localBass, setLocalBass] = useState(colorBassGain);
|
|
const [localMid, setLocalMid] = useState(colorMidGain);
|
|
const [localTreble, setLocalTreble] = useState(colorTrebleGain);
|
|
const isDraggingBass = useRef(false);
|
|
const isDraggingMid = useRef(false);
|
|
const isDraggingTreble = useRef(false);
|
|
|
|
const [localLoudnessThreshold, setLocalLoudnessThreshold] = useState(loudnessThreshold);
|
|
const [localLoudnessBass, setLocalLoudnessBass] = useState(loudnessBassGain);
|
|
const [localLoudnessTreble, setLocalLoudnessTreble] = useState(loudnessTrebleGain);
|
|
const isDraggingLoudnessThreshold = useRef(false);
|
|
const isDraggingLoudnessBass = useRef(false);
|
|
const isDraggingLoudnessTreble = useRef(false);
|
|
|
|
useEffect(() => {
|
|
if (!isDraggingBass.current) setLocalBass(colorBassGain);
|
|
if (!isDraggingMid.current) setLocalMid(colorMidGain);
|
|
if (!isDraggingTreble.current) setLocalTreble(colorTrebleGain);
|
|
if (!isDraggingLoudnessThreshold.current) setLocalLoudnessThreshold(loudnessThreshold);
|
|
if (!isDraggingLoudnessBass.current) setLocalLoudnessBass(loudnessBassGain);
|
|
if (!isDraggingLoudnessTreble.current) setLocalLoudnessTreble(loudnessTrebleGain);
|
|
}, [colorBassGain, colorMidGain, colorTrebleGain, loudnessThreshold, loudnessBassGain, loudnessTrebleGain]);
|
|
|
|
const [localWidth, setLocalWidth] = useState(() => Math.round(widthVal));
|
|
const isDragging = useRef(false);
|
|
|
|
const [delayChannel, setDelayChannel] = useState<DelayChannel>("L");
|
|
|
|
const subwooferDelayMain =
|
|
delayChannel === "L" ? subwooferDelayMainL : subwooferDelayMainR;
|
|
const subwooferDelaySub =
|
|
delayChannel === "L" ? subwooferDelaySubL : subwooferDelaySubR;
|
|
const subwooferDelayMainField =
|
|
delayChannel === "L" ? "subwoofer_delay_main" : "subwoofer_delay_main_r";
|
|
const subwooferDelaySubField =
|
|
delayChannel === "L" ? "subwoofer_delay" : "subwoofer_delay_r";
|
|
|
|
const [localSubFreq, setLocalSubFreq] = useState(subwooferFreq);
|
|
const [localSubGain, setLocalSubGain] = useState(subwooferGain);
|
|
const [localSubDelayMain, setLocalSubDelayMain] = useState(subwooferDelayMain);
|
|
const [localSubDelaySub, setLocalSubDelaySub] = useState(subwooferDelaySub);
|
|
const isDraggingSubFreq = useRef(false);
|
|
const isDraggingSubGain = useRef(false);
|
|
const isDraggingSubDelayMain = useRef(false);
|
|
const isDraggingSubDelaySub = useRef(false);
|
|
|
|
useEffect(() => {
|
|
if (!isDragging.current) setLocalWidth(Math.round(widthVal));
|
|
}, [widthVal]);
|
|
|
|
useEffect(() => {
|
|
if (!isDraggingSubFreq.current) setLocalSubFreq(subwooferFreq);
|
|
if (!isDraggingSubGain.current) setLocalSubGain(subwooferGain);
|
|
if (!isDraggingSubDelayMain.current) setLocalSubDelayMain(subwooferDelayMain);
|
|
if (!isDraggingSubDelaySub.current) setLocalSubDelaySub(subwooferDelaySub);
|
|
}, [subwooferFreq, subwooferGain, subwooferDelayMain, subwooferDelaySub]);
|
|
|
|
const goSelect = (title: string, options: string[], selected: number, key: string) => {
|
|
navigateToSelect(title, options, selected, "/effects", key);
|
|
setLocation("/select");
|
|
};
|
|
|
|
const sceneIdx = clampPickIndex(sceneVal, sceneLabels.length);
|
|
const sceneDisplay = sceneLabels[sceneIdx] ?? "";
|
|
const crossIdx = clampPickIndex(crossfeedVal, crossfeedLabels.length);
|
|
const crossfeedDisplay = crossfeedLabels[crossIdx] ?? "";
|
|
const subRateIdx = clampPickIndex(subwooferRate, subwooferRateLabels.length);
|
|
const subRateDisplay = subwooferRateLabels[subRateIdx] ?? "";
|
|
const subMixIdx = clampPickIndex(subwooferMixType, subwooferOutputLabels.length);
|
|
const subMixDisplay = subwooferOutputLabels[subMixIdx] ?? "";
|
|
|
|
return (
|
|
<div className="min-h-screen bg-black">
|
|
<div style={{
|
|
filter: effectOn ? "none" : "grayscale(1) opacity(0.4)",
|
|
transition: "filter 0.3s ease-in-out"
|
|
}}>
|
|
<div className="page-header">
|
|
<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">{effectText.pageTitle}</h1>
|
|
<IOSToggle
|
|
checked={effectOn}
|
|
onChange={(v) => {
|
|
if (v) {
|
|
void updateSetting(
|
|
bypassOn ? { audio_enable: 1, dsp_enable: 1 } : { audio_enable: 1 },
|
|
);
|
|
} else {
|
|
void updateSetting({ audio_enable: 0 });
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<FeatureGate
|
|
enabled={effectOn}
|
|
className="px-4 pb-32 pt-3 space-y-3"
|
|
labels={{
|
|
title: effectText.enableConfirmTitle ?? "音效未开启",
|
|
description: effectText.enableConfirmDesc ?? "当前 Effect 功能已关闭，是否开启？",
|
|
cancel: effectText.enableConfirmCancel ?? "取消",
|
|
confirm: effectText.enableConfirmOk ?? "开启",
|
|
}}
|
|
onEnable={() => {
|
|
const bypass = (ds?.dsp_enable ?? 0) === 0;
|
|
return updateSetting(bypass ? { audio_enable: 1, dsp_enable: 1 } : { audio_enable: 1 });
|
|
}}
|
|
>
|
|
{/* ── 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">{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(effectText.selectStyleTitle, sceneLabels, sceneVal, "effect_value")}>
|
|
<span className="text-[15px] text-white/55">{sceneDisplay}</span>
|
|
<ChevronRight size={16} className="ios-chevron" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* ── 声场宽度 ── */}
|
|
<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">{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}
|
|
step={1}
|
|
onChange={(v) => {
|
|
isDragging.current = true;
|
|
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">{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(effectText.selectCrossfeedTitle, crossfeedLabels, crossfeedVal, "crossfeed_value")}>
|
|
<span className="text-[14px] text-white/45">{crossfeedDisplay}</span>
|
|
<ChevronRight size={16} className="ios-chevron" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* ── 音调 ── */}
|
|
<div className="ios-list-group p-4">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[16px] font-medium text-white">{effectText.tone}</span>
|
|
<IOSToggle checked={colorOn} onChange={(v) => updateSetting({ color_enable: v ? 1 : 0 })} />
|
|
</div>
|
|
|
|
{colorOn && (
|
|
<div className="space-y-4 mt-4">
|
|
{/* 低音 */}
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<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}
|
|
onChange={(v) => {
|
|
isDraggingBass.current = true;
|
|
setLocalBass(v);
|
|
}}
|
|
onRelease={(v) => {
|
|
isDraggingBass.current = false;
|
|
updateSetting({ color_bass_gain: Math.round(v * 10) });
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* 中音 */}
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<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}
|
|
onChange={(v) => {
|
|
isDraggingMid.current = true;
|
|
setLocalMid(v);
|
|
}}
|
|
onRelease={(v) => {
|
|
isDraggingMid.current = false;
|
|
updateSetting({ color_mid_gain: Math.round(v * 10) });
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* 高音 */}
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<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}
|
|
onChange={(v) => {
|
|
isDraggingTreble.current = true;
|
|
setLocalTreble(v);
|
|
}}
|
|
onRelease={(v) => {
|
|
isDraggingTreble.current = false;
|
|
updateSetting({ color_treble_gain: Math.round(v * 10) });
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* ── 响度 ── */}
|
|
<div className="ios-list-group p-4">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[16px] font-medium text-white">{effectText.loudness}</span>
|
|
<IOSToggle checked={loudnessOn} onChange={(v) => updateSetting({ loudness_enable: v ? 1 : 0 })} />
|
|
</div>
|
|
|
|
{loudnessOn && (
|
|
<div className="space-y-4 mt-4">
|
|
{/* 阈值 */}
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<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}
|
|
step={1}
|
|
onChange={(v) => {
|
|
isDraggingLoudnessThreshold.current = true;
|
|
setLocalLoudnessThreshold(v);
|
|
}}
|
|
onRelease={(v) => {
|
|
isDraggingLoudnessThreshold.current = false;
|
|
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">{effectText.lowBass}</span>
|
|
<span className="text-[14px] font-bold" style={{ color: "#00FFF6" }}>{localLoudnessBass.toFixed(1)}</span>
|
|
</div>
|
|
<CyanSlider
|
|
value={localLoudnessBass}
|
|
min={0}
|
|
max={10}
|
|
step={0.1}
|
|
onChange={(v) => {
|
|
isDraggingLoudnessBass.current = true;
|
|
setLocalLoudnessBass(v);
|
|
}}
|
|
onRelease={(v) => {
|
|
isDraggingLoudnessBass.current = false;
|
|
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">{effectText.highBass}</span>
|
|
<span className="text-[14px] font-bold" style={{ color: "#00FFF6" }}>{localLoudnessTreble.toFixed(1)}</span>
|
|
</div>
|
|
<CyanSlider
|
|
value={localLoudnessTreble}
|
|
min={0}
|
|
max={10}
|
|
step={0.1}
|
|
onChange={(v) => {
|
|
isDraggingLoudnessTreble.current = true;
|
|
setLocalLoudnessTreble(v);
|
|
}}
|
|
onRelease={(v) => {
|
|
isDraggingLoudnessTreble.current = false;
|
|
updateSetting({ loudness_treble_gain: Math.round(v * 10) });
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* ── 低音炮输出 ── */}
|
|
<div className="ios-list-group p-4">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[16px] font-medium text-white">{subwooferText?.label ?? "低音炮输出"}</span>
|
|
<IOSToggle checked={subwooferOn} onChange={(v) => updateSetting({ subwoofer_enable: v ? 1 : 0 })} />
|
|
</div>
|
|
|
|
{subwooferOn && (
|
|
<div className="space-y-4 mt-4">
|
|
<div>
|
|
<SubwooferLpfChart
|
|
cutoffHz={localSubFreq}
|
|
rateIndex={subwooferRate}
|
|
className="w-full h-[min(42vw,200px)] min-h-[140px] md:h-[260px] lg:h-[300px] mb-3 rounded-lg bg-black/30"
|
|
/>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-[14px] font-medium text-white/80">
|
|
{subwooferText?.cutOffFrequency ?? "截止频率"}
|
|
</span>
|
|
<span className="text-[14px] font-bold" style={{ color: "#00FFF6" }}>{localSubFreq}Hz</span>
|
|
</div>
|
|
<CyanSlider
|
|
value={localSubFreq}
|
|
min={40}
|
|
max={300}
|
|
step={1}
|
|
onChange={(v) => {
|
|
isDraggingSubFreq.current = true;
|
|
setLocalSubFreq(Math.round(v));
|
|
}}
|
|
onRelease={(v) => {
|
|
isDraggingSubFreq.current = false;
|
|
const freq = Math.round(Math.min(300, Math.max(40, v)));
|
|
setLocalSubFreq(freq);
|
|
updateSetting({ subwoofer_value: freq });
|
|
}}
|
|
/>
|
|
{showSubwooferFullRange && (
|
|
<div className="flex flex-wrap justify-center gap-2 mt-3 w-full">
|
|
<FullRangeToggleButton
|
|
label={subwooferText?.subFullRange ?? "低音炮全频"}
|
|
active={subwooferLpfOn}
|
|
onClick={() =>
|
|
updateSetting({ subwoofer_lpf_enable: subwooferLpfOn ? 0 : 1 })
|
|
}
|
|
/>
|
|
<FullRangeToggleButton
|
|
label={subwooferText?.mainFullRange ?? "主音箱全频"}
|
|
active={subwooferHpfOn}
|
|
onClick={() =>
|
|
updateSetting({ subwoofer_hpf_enable: subwooferHpfOn ? 0 : 1 })
|
|
}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-[14px] font-medium text-white/80">
|
|
{subwooferText?.attenuationSlope ?? "衰减斜率"}
|
|
</span>
|
|
</div>
|
|
<button
|
|
className="flex items-center justify-between w-full active:opacity-70 transition-opacity"
|
|
onClick={() =>
|
|
goSelect(
|
|
subwooferText?.selectAttenuationTitle ?? "选择衰减斜率",
|
|
subwooferRateLabels,
|
|
subwooferRate,
|
|
"subwoofer_rate",
|
|
)
|
|
}
|
|
>
|
|
<span className="text-[14px] text-white/45">{subRateDisplay}</span>
|
|
<ChevronRight size={16} className="ios-chevron" />
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-[14px] font-medium text-white/80">{subwooferText?.gain ?? "增益"}</span>
|
|
<span className="text-[14px] font-bold" style={{ color: "#00FFF6" }}>
|
|
{localSubGain >= 0 ? `+${localSubGain}` : localSubGain} dB
|
|
</span>
|
|
</div>
|
|
<CyanSlider
|
|
value={localSubGain}
|
|
min={-15}
|
|
max={15}
|
|
step={1}
|
|
onChange={(v) => {
|
|
isDraggingSubGain.current = true;
|
|
setLocalSubGain(Math.round(v));
|
|
}}
|
|
onRelease={(v) => {
|
|
isDraggingSubGain.current = false;
|
|
const gain = Math.round(Math.min(15, Math.max(-15, v)));
|
|
setLocalSubGain(gain);
|
|
updateSetting({ subwoofer_gain: gain });
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-[14px] font-medium text-white/80">
|
|
{subwooferText?.output?.label ?? "输出方式"}
|
|
</span>
|
|
</div>
|
|
<button
|
|
className="flex items-center justify-between w-full active:opacity-70 transition-opacity"
|
|
onClick={() =>
|
|
goSelect(
|
|
subwooferText?.selectOutputTitle ?? "选择输出方式",
|
|
subwooferOutputLabels,
|
|
subwooferMixType,
|
|
"subwoofer_mix_type",
|
|
)
|
|
}
|
|
>
|
|
<span className="text-[14px] text-white/45">{subMixDisplay}</span>
|
|
<ChevronRight size={16} className="ios-chevron" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="border-t border-white/[0.06] pt-4 space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[14px] font-medium text-white/80">
|
|
{subwooferDelayText?.label ?? "延时"}
|
|
</span>
|
|
<DelayChannelToggle
|
|
channel={delayChannel}
|
|
onChange={setDelayChannel}
|
|
leftLabel={subwooferDelayText?.leftChannel ?? "左声道"}
|
|
rightLabel={subwooferDelayText?.rightChannel ?? "右声道"}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-[14px] text-white/60">
|
|
{subwooferDelayText?.mainSpeaker ?? "主机箱"}
|
|
</span>
|
|
<span className="text-[14px] font-bold" style={{ color: "#00FFF6" }}>
|
|
{formatSubwooferDelayValue(localSubDelayMain)}
|
|
</span>
|
|
</div>
|
|
<CyanSlider
|
|
value={localSubDelayMain}
|
|
min={0}
|
|
max={SUBWOOFER_DELAY_MAX}
|
|
step={1}
|
|
onChange={(v) => {
|
|
isDraggingSubDelayMain.current = true;
|
|
setLocalSubDelayMain(clampSubwooferDelayValue(v));
|
|
}}
|
|
onRelease={(v) => {
|
|
isDraggingSubDelayMain.current = false;
|
|
const delayVal = clampSubwooferDelayValue(v);
|
|
setLocalSubDelayMain(delayVal);
|
|
updateSetting({ [subwooferDelayMainField]: delayVal });
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-[14px] text-white/60">
|
|
{subwooferDelayText?.subwoofer ?? "低音炮"}
|
|
</span>
|
|
<span className="text-[14px] font-bold" style={{ color: "#00FFF6" }}>
|
|
{formatSubwooferDelayValue(localSubDelaySub)}
|
|
</span>
|
|
</div>
|
|
<CyanSlider
|
|
value={localSubDelaySub}
|
|
min={0}
|
|
max={SUBWOOFER_DELAY_MAX}
|
|
step={1}
|
|
onChange={(v) => {
|
|
isDraggingSubDelaySub.current = true;
|
|
setLocalSubDelaySub(clampSubwooferDelayValue(v));
|
|
}}
|
|
onRelease={(v) => {
|
|
isDraggingSubDelaySub.current = false;
|
|
const delayVal = clampSubwooferDelayValue(v);
|
|
setLocalSubDelaySub(delayVal);
|
|
updateSetting({ [subwooferDelaySubField]: delayVal });
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</FeatureGate>
|
|
</div>
|
|
|
|
<BottomNav />
|
|
</div>
|
|
);
|
|
}
|