eafonyang
449 lines
18 KiB
TypeScript
449 lines
18 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 { FeatureGate } from "@/components/FeatureGate";
|
|
import { navigateToSelect } from "./SelectPage";
|
|
import { cn } from "@/lib/utils";
|
|
import localeZh from "@/locales/data-zh.json";
|
|
import localeEn from "@/locales/data-en.json";
|
|
import { resolveLocalePack } from "@/locales/resolveLocale";
|
|
import { usePageTitleWithConnection } from "@/hooks/usePageTitleWithConnection";
|
|
|
|
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 (
|
|
<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,
|
|
disabled = false,
|
|
}: {
|
|
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;
|
|
disabled?: boolean;
|
|
}) {
|
|
const fillPct = ((value - min) / (max - min)) * 100;
|
|
const emitRelease = (el: EventTarget | null) => {
|
|
if (disabled) return;
|
|
if (!(el instanceof HTMLInputElement)) return;
|
|
onRelease?.(Number(el.value));
|
|
};
|
|
return (
|
|
<div className={cn("relative flex items-center w-full mt-3", disabled && "opacity-60")}>
|
|
<div
|
|
className="absolute left-0 h-[4px] rounded-full pointer-events-none"
|
|
style={{
|
|
width: `${fillPct}%`,
|
|
background: disabled ? "rgba(148,163,184,0.7)" : "#00FFF6",
|
|
boxShadow: disabled ? "none" : "0 0 6px rgba(0,255,246,0.5)",
|
|
}}
|
|
/>
|
|
<input
|
|
type="range"
|
|
min={min}
|
|
max={max}
|
|
step={step}
|
|
value={value}
|
|
disabled={disabled}
|
|
className="cyan-slider relative z-10"
|
|
onChange={(e) => {
|
|
if (disabled) return;
|
|
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 pack = resolveLocalePack(deviceState?.language);
|
|
return (pack.effect ?? localeEn.effect) as EffectLocale;
|
|
}, [deviceState?.language]);
|
|
|
|
const pageTitle = usePageTitleWithConnection(effectText.pageTitle ?? "Effects");
|
|
|
|
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 [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);
|
|
|
|
useEffect(() => {
|
|
if (!isDragging.current) setLocalWidth(Math.round(widthVal));
|
|
}, [widthVal]);
|
|
|
|
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] ?? "";
|
|
|
|
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">{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
|
|
type="button"
|
|
disabled={!sceneOn}
|
|
className={cn(
|
|
"flex items-center justify-between w-full transition-opacity",
|
|
sceneOn ? "active:opacity-70" : "opacity-45 cursor-not-allowed",
|
|
)}
|
|
onClick={() => {
|
|
if (!sceneOn) return;
|
|
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}
|
|
disabled={!widthOn}
|
|
onChange={(v) => {
|
|
if (!widthOn) return;
|
|
isDragging.current = true;
|
|
setLocalWidth(Math.round(v));
|
|
}}
|
|
onRelease={(v) => {
|
|
if (!widthOn) return;
|
|
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
|
|
type="button"
|
|
disabled={!crossfeedOn}
|
|
className={cn(
|
|
"flex items-center justify-between w-full transition-opacity",
|
|
crossfeedOn ? "active:opacity-70" : "opacity-45 cursor-not-allowed",
|
|
)}
|
|
onClick={() => {
|
|
if (!crossfeedOn) return;
|
|
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>
|
|
</FeatureGate>
|
|
</div>
|
|
|
|
<BottomNav />
|
|
</div>
|
|
);
|
|
}
|