yangy
2259 lines
90 KiB
TypeScript
2259 lines
90 KiB
TypeScript
/* ============================================================
|
||
HP-EQ PAGE — Parametric EQ
|
||
Design: Reference luxsin_x8_hpeq_ui.jpeg
|
||
Layout (top to bottom):
|
||
1. Page header: < HP-EQ [toggle]
|
||
2. Two action cards: 批量编辑 / 添加耳机型号
|
||
3. Headphone model row: [Name ▼] [−] [+]
|
||
4. Freq response chart: legend + A/B + 复制到B + DIFF + SVG curve
|
||
5. Band grid: below lg breakpoint 2×5 pills; lg+ single row ×10
|
||
6. Band detail card: 滤波器 / FREQ / GAIN / Q值
|
||
7. Total gain card: 总增益 value + AUTO toggle + slider
|
||
============================================================ */
|
||
import { useDevice } from "@/contexts/DeviceContext";
|
||
import { ChevronLeft, ChevronDown, Minus, Plus, Edit3, Headphones, Search, X } from "lucide-react";
|
||
import { useLocation } from "wouter";
|
||
import { useState, useMemo, useEffect, useRef, useCallback } from "react";
|
||
import { cn } from "@/lib/utils";
|
||
import BottomNav from "@/components/BottomNav";
|
||
import { FeatureGate } from "@/components/FeatureGate";
|
||
import { toast } from "sonner";
|
||
import {
|
||
decodeCustomBase64,
|
||
fetchLuxsinAudioBrands,
|
||
fetchLuxsinAudioCurve,
|
||
fetchLuxsinAudioModelList,
|
||
fetchLuxsinAudioModels,
|
||
type LuxsinAudioBrand,
|
||
type LuxsinAudioModelListItem,
|
||
type LuxsinAudioModel,
|
||
type PeqFilter,
|
||
type PeqApplyPayload,
|
||
type PeqChangePayload,
|
||
type PeqPresetBody,
|
||
type PeqState,
|
||
} from "@/lib/luxsinApi";
|
||
import * as echarts from "echarts";
|
||
import { getSectionsMatrix, visualizeResponse, getChartOps, getFilterType, getFilterShortName } from "@/lib/peqAudio";
|
||
import localeZh from "@/locales/data-zh.json";
|
||
import localeZhHK from "@/locales/data-zh-HK.json";
|
||
import localeEn from "@/locales/data-en.json";
|
||
import { FreqChart } from "./eq/components/FreqChart";
|
||
import { CyanSlider, IOSToggle } from "./eq/components/EqPrimitives";
|
||
import {
|
||
BAND_FREQ_MAX,
|
||
BAND_FREQ_MIN,
|
||
BAND_GAIN_MAX,
|
||
BAND_GAIN_MIN,
|
||
BAND_PARAM_VALUE_BOX_STYLE,
|
||
BAND_Q_MAX,
|
||
BAND_Q_MIN,
|
||
CATALOG_TARGETS,
|
||
DEFAULT_BANDS,
|
||
FILTER_TYPES,
|
||
FLAT_PRESET_FILTERS,
|
||
} from "./eq/eqConstants";
|
||
import {
|
||
eqInterp,
|
||
formatBandFreqDisplay,
|
||
formatBandGainDisplay,
|
||
formatBandParamForInput,
|
||
formatBandQDisplay,
|
||
freqLabel,
|
||
normalizeFilterType,
|
||
normalizeBandFreqHz,
|
||
parseBandParamInput,
|
||
} from "./eq/eqFormatters";
|
||
import { bandToPeqFilter, buildPeqCatalogSyncKey, cloneBands, getUniquePresetName } from "./eq/peqMappers";
|
||
import type { BandParamKind, PeqCatalogItem, PeqEqUi, PeqPresetLocalCache } from "./eq/types";
|
||
|
||
/* ── Main Component ── */
|
||
export default function EQPage() {
|
||
const [, setLocation] = useLocation();
|
||
const {
|
||
deviceState,
|
||
peqState,
|
||
updateSetting,
|
||
api,
|
||
isDemoMode,
|
||
upgradePeqChange,
|
||
upgradePeqApply,
|
||
syncPeqCatalog,
|
||
} = useDevice();
|
||
const bypassOn = (deviceState?.dsp_enable ?? 0) === 0;
|
||
const peqOn = (deviceState?.peqEnable ?? 0) === 1;
|
||
const eqOn = peqOn && !bypassOn;
|
||
|
||
const eqUi = useMemo((): PeqEqUi => {
|
||
const lang = deviceState?.language;
|
||
const pack = lang === 0 ? localeEn : lang === 1 ? localeZhHK : localeZh;
|
||
const peq = pack.peq as typeof localeZh.peq;
|
||
return (peq.eqUi ?? (localeZh.peq as typeof localeZh.peq).eqUi) as PeqEqUi;
|
||
}, [deviceState?.language]);
|
||
|
||
const peqCardLabels = useMemo(() => {
|
||
const lang = deviceState?.language;
|
||
const pack = lang === 0 ? localeEn : lang === 1 ? localeZhHK : localeZh;
|
||
return pack.peq ?? localeZh.peq;
|
||
}, [deviceState?.language]);
|
||
|
||
const [bandsByMode, setBandsByMode] = useState<Record<"A" | "B", typeof DEFAULT_BANDS>>({
|
||
A: cloneBands(DEFAULT_BANDS),
|
||
B: cloneBands(DEFAULT_BANDS),
|
||
});
|
||
const [selectedBandByMode, setSelectedBandByMode] = useState<Record<"A" | "B", number>>({
|
||
A: 0,
|
||
B: 0,
|
||
});
|
||
const [headphoneIdx, setHeadphoneIdx] = useState(deviceState?.peqSelect ?? 0);
|
||
const [headphoneModels, setHeadphoneModels] = useState<string[]>([]);
|
||
const [peqItems, setPeqItems] = useState<
|
||
Array<{
|
||
name: string;
|
||
brand?: string;
|
||
model?: string;
|
||
filters?: any[] | string;
|
||
autoPre?: number;
|
||
preamp?: number;
|
||
canDel?: number;
|
||
}>
|
||
>([]);
|
||
const [abMode, setAbMode] = useState<"A" | "B">("A");
|
||
const [isHeadphoneMenuOpen, setIsHeadphoneMenuOpen] = useState(false);
|
||
const [isFilterMenuOpen, setIsFilterMenuOpen] = useState(false);
|
||
const [isAddPresetDialogOpen, setIsAddPresetDialogOpen] = useState(false);
|
||
const [addPresetMode, setAddPresetMode] = useState<"copy" | "flat">("copy");
|
||
const [copyPresetName, setCopyPresetName] = useState("");
|
||
const [flatPresetName, setFlatPresetName] = useState("");
|
||
const [isSaveBDialogOpen, setIsSaveBDialogOpen] = useState(false);
|
||
const [saveBPresetName, setSaveBPresetName] = useState("");
|
||
const [bandParamDialog, setBandParamDialog] = useState<BandParamKind | null>(null);
|
||
const [bandParamInput, setBandParamInput] = useState("");
|
||
/** 滑块拖动时的实时显示（避免按钮文字滞后于 bands 状态） */
|
||
const [bandSliderPreview, setBandSliderPreview] = useState<{
|
||
freq?: number;
|
||
gain?: number;
|
||
q?: number;
|
||
} | null>(null);
|
||
const [isBatchEditDialogOpen, setIsBatchEditDialogOpen] = useState(false);
|
||
const [batchEditText, setBatchEditText] = useState("");
|
||
type BrandDrawerTab = "brands" | "models" | "target";
|
||
const [isBrandDrawerOpen, setIsBrandDrawerOpen] = useState(false);
|
||
const [brandDrawerTab, setBrandDrawerTab] = useState<BrandDrawerTab>("brands");
|
||
const [brandSearchQuery, setBrandSearchQuery] = useState("");
|
||
const [catalogBrands, setCatalogBrands] = useState<LuxsinAudioBrand[]>([]);
|
||
const [catalogBrandsLoading, setCatalogBrandsLoading] = useState(false);
|
||
const [catalogBrandsError, setCatalogBrandsError] = useState<string | null>(null);
|
||
const [catalogSearchResults, setCatalogSearchResults] = useState<LuxsinAudioModelListItem[]>([]);
|
||
const [catalogSearchLoading, setCatalogSearchLoading] = useState(false);
|
||
const [catalogSearchError, setCatalogSearchError] = useState<string | null>(null);
|
||
const [selectedCatalogBrand, setSelectedCatalogBrand] = useState<string>("");
|
||
const [catalogModels, setCatalogModels] = useState<LuxsinAudioModel[]>([]);
|
||
const [catalogModelsLoading, setCatalogModelsLoading] = useState(false);
|
||
const [catalogModelsError, setCatalogModelsError] = useState<string | null>(null);
|
||
const [selectedCatalogModelFromSearch, setSelectedCatalogModelFromSearch] = useState<string>("");
|
||
const [selectedCatalogModelName, setSelectedCatalogModelName] = useState("");
|
||
const [selectedCatalogModelForm, setSelectedCatalogModelForm] = useState<string | undefined>(undefined);
|
||
const [selectedCatalogTarget, setSelectedCatalogTarget] = useState<string>("");
|
||
const [isConfirmingTarget, setIsConfirmingTarget] = useState(false);
|
||
const [currentRawCurve, setCurrentRawCurve] = useState<number[] | null>(null);
|
||
const allowPeqRemoteSyncRef = useRef(false);
|
||
const lastPeqCatalogSyncKeyRef = useRef("");
|
||
const syncingHeadphoneRef = useRef(false);
|
||
const peqSyncTimerRef = useRef<number | null>(null);
|
||
const skipPeqAutoSyncRef = useRef(false);
|
||
/** A/B 切换已单独下发，避免 bands 变更触发的 effect 用错 peqChange/peqApply */
|
||
const skipBandsSyncFromAbToggleRef = useRef(false);
|
||
/** 本地编辑过的预设（filters / preamp / autoPre）；syncPeq 拉取不会覆盖 */
|
||
const peqPresetCacheRef = useRef<Record<string, PeqPresetLocalCache>>({});
|
||
const headphoneMenuRef = useRef<HTMLDivElement | null>(null);
|
||
const filterMenuRef = useRef<HTMLDivElement | null>(null);
|
||
const bands = bandsByMode[abMode];
|
||
const selectedBand = selectedBandByMode[abMode];
|
||
const setBandsForBothModes = useCallback((nextBands: typeof DEFAULT_BANDS) => {
|
||
const cloned = cloneBands(nextBands);
|
||
setBandsByMode({ A: cloneBands(cloned), B: cloneBands(cloned) });
|
||
}, []);
|
||
const setBands = useCallback(
|
||
(updater: typeof DEFAULT_BANDS | ((prev: typeof DEFAULT_BANDS) => typeof DEFAULT_BANDS)) => {
|
||
setBandsByMode((prev) => ({
|
||
...prev,
|
||
[abMode]:
|
||
typeof updater === "function"
|
||
? (updater as (prev: typeof DEFAULT_BANDS) => typeof DEFAULT_BANDS)(prev[abMode])
|
||
: cloneBands(updater),
|
||
}));
|
||
},
|
||
[abMode],
|
||
);
|
||
const setSelectedBand = useCallback(
|
||
(updater: number | ((prev: number) => number)) => {
|
||
setSelectedBandByMode((prev) => ({
|
||
...prev,
|
||
[abMode]: typeof updater === "function" ? (updater as (prev: number) => number)(prev[abMode]) : updater,
|
||
}));
|
||
},
|
||
[abMode],
|
||
);
|
||
const copyModeParams = useCallback((from: "A" | "B", to: "A" | "B") => {
|
||
setBandsByMode((prev) => ({ ...prev, [to]: cloneBands(prev[from]) }));
|
||
setSelectedBandByMode((prev) => ({ ...prev, [to]: prev[from] }));
|
||
}, []);
|
||
|
||
const currentPeq = peqItems[headphoneIdx];
|
||
const currentPeqName = currentPeq?.name ?? "";
|
||
const currentPeqPreamp = currentPeq?.preamp ?? 0;
|
||
const currentPeqAutoPre = currentPeq?.autoPre ?? 0;
|
||
const preampValue = Number(currentPeqPreamp);
|
||
const autoPreOn = currentPeqAutoPre === 1;
|
||
|
||
const filteredCatalogBrands = useMemo(() => {
|
||
const q = brandSearchQuery.trim().toLowerCase();
|
||
if (!q) return catalogBrands;
|
||
return catalogBrands.filter((b) => b.name.toLowerCase().includes(q));
|
||
}, [catalogBrands, brandSearchQuery]);
|
||
|
||
const availableCatalogTargets = useMemo(() => {
|
||
if (selectedCatalogModelForm === "in-ear") {
|
||
return CATALOG_TARGETS.filter((item) => item.ear === "in" || item.ear === "all");
|
||
}
|
||
if (selectedCatalogModelForm === "over-ear") {
|
||
return CATALOG_TARGETS.filter((item) => item.ear === "over" || item.ear === "all");
|
||
}
|
||
return CATALOG_TARGETS;
|
||
}, [selectedCatalogModelForm]);
|
||
|
||
const loadCatalogBrands = useCallback(async () => {
|
||
setCatalogBrandsLoading(true);
|
||
setCatalogBrandsError(null);
|
||
try {
|
||
const list = await fetchLuxsinAudioBrands();
|
||
const sorted = [...list].sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" }));
|
||
setCatalogBrands(sorted);
|
||
} catch (e) {
|
||
const msg = e instanceof Error ? e.message : "加载失败";
|
||
setCatalogBrandsError(msg);
|
||
toast.error(eqUi.toastBrandsFail);
|
||
} finally {
|
||
setCatalogBrandsLoading(false);
|
||
}
|
||
}, [eqUi]);
|
||
|
||
const searchCatalogByKeyword = useCallback(async (keyword: string) => {
|
||
const q = keyword.trim();
|
||
if (!q) {
|
||
setCatalogSearchResults([]);
|
||
setCatalogSearchError(null);
|
||
setCatalogSearchLoading(false);
|
||
return;
|
||
}
|
||
setCatalogSearchLoading(true);
|
||
setCatalogSearchError(null);
|
||
try {
|
||
const list = await fetchLuxsinAudioModelList(q, 1000);
|
||
setCatalogSearchResults(list);
|
||
} catch (e) {
|
||
const msg = e instanceof Error ? e.message : "搜索失败";
|
||
setCatalogSearchError(msg);
|
||
setCatalogSearchResults([]);
|
||
} finally {
|
||
setCatalogSearchLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
const loadCatalogModels = useCallback(async (brandName: string) => {
|
||
setSelectedCatalogModelFromSearch("");
|
||
setCatalogModelsLoading(true);
|
||
setCatalogModelsError(null);
|
||
try {
|
||
const list = await fetchLuxsinAudioModels(brandName);
|
||
const sorted = [...list].sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" }));
|
||
setCatalogModels(sorted);
|
||
} catch (e) {
|
||
const msg = e instanceof Error ? e.message : "加载失败";
|
||
setCatalogModelsError(msg);
|
||
toast.error(eqUi.toastModelsFail);
|
||
} finally {
|
||
setCatalogModelsLoading(false);
|
||
}
|
||
}, [eqUi]);
|
||
|
||
const openAddHeadsetCatalog = () => {
|
||
setIsBrandDrawerOpen(true);
|
||
setBrandDrawerTab("brands");
|
||
setBrandSearchQuery("");
|
||
setCatalogSearchResults([]);
|
||
setCatalogSearchError(null);
|
||
setCatalogSearchLoading(false);
|
||
setSelectedCatalogBrand("");
|
||
setSelectedCatalogModelFromSearch("");
|
||
setSelectedCatalogModelName("");
|
||
setSelectedCatalogModelForm(undefined);
|
||
setSelectedCatalogTarget("");
|
||
setCatalogModels([]);
|
||
setCatalogModelsError(null);
|
||
void loadCatalogBrands();
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (!isBrandDrawerOpen || brandDrawerTab !== "brands") return;
|
||
const timer = window.setTimeout(() => {
|
||
void searchCatalogByKeyword(brandSearchQuery);
|
||
}, 260);
|
||
return () => window.clearTimeout(timer);
|
||
}, [isBrandDrawerOpen, brandDrawerTab, brandSearchQuery, searchCatalogByKeyword]);
|
||
|
||
useEffect(() => {
|
||
if (!isBrandDrawerOpen) return;
|
||
const onKey = (e: KeyboardEvent) => {
|
||
if (e.key === "Escape") setIsBrandDrawerOpen(false);
|
||
};
|
||
window.addEventListener("keydown", onKey);
|
||
return () => window.removeEventListener("keydown", onKey);
|
||
}, [isBrandDrawerOpen]);
|
||
|
||
useEffect(() => {
|
||
if (!isBrandDrawerOpen) return;
|
||
const prev = document.body.style.overflow;
|
||
document.body.style.overflow = "hidden";
|
||
return () => {
|
||
document.body.style.overflow = prev;
|
||
};
|
||
}, [isBrandDrawerOpen]);
|
||
|
||
const normalizeFiltersFromPeq = (peq: { filters?: any[] | string } | undefined) => {
|
||
if (!peq) return [] as typeof bands;
|
||
let filters: any[] = [];
|
||
if (typeof peq.filters === "string") {
|
||
try {
|
||
filters = JSON.parse(peq.filters);
|
||
} catch {
|
||
filters = [];
|
||
}
|
||
} else if (Array.isArray(peq.filters)) {
|
||
filters = peq.filters;
|
||
}
|
||
return filters.map((f: any) => {
|
||
const rawFreq = f.fc ?? f.freq ?? f.frequency ?? 1000;
|
||
const freq = normalizeBandFreqHz(rawFreq) ?? 1000;
|
||
return {
|
||
freq: Math.round(freq),
|
||
gain: Number(f.gain || 0),
|
||
q: Number(f.q || 1),
|
||
type: normalizeFilterType(f.type),
|
||
enabled: f.enabled !== undefined ? f.enabled : true,
|
||
};
|
||
});
|
||
};
|
||
|
||
const toCompactNumber = (value: number) => Number(value.toFixed(3)).toString();
|
||
|
||
const buildBatchEditText = useCallback(() => {
|
||
const preamp = Number(currentPeq?.preamp ?? 0);
|
||
const source = bands.length > 0 ? bands : DEFAULT_BANDS;
|
||
const lines = [`Preamp:${toCompactNumber(preamp)}dB`];
|
||
for (let i = 0; i < 10; i++) {
|
||
const band = source[i] ?? DEFAULT_BANDS[i] ?? DEFAULT_BANDS[0];
|
||
lines.push(
|
||
`Filter ${i + 1}: ${band.enabled ? "ON" : "OFF"} ${normalizeFilterType(band.type)} Fc ${toCompactNumber(band.freq)} Hz Gain ${toCompactNumber(band.gain)} dB Q ${toCompactNumber(band.q)}`
|
||
);
|
||
}
|
||
return lines.join("\n");
|
||
}, [bands, currentPeq?.preamp]);
|
||
|
||
const openBatchEditDialog = () => {
|
||
setBatchEditText(buildBatchEditText());
|
||
setIsBatchEditDialogOpen(true);
|
||
};
|
||
|
||
const parseBatchEditText = useCallback(
|
||
(raw: string) => {
|
||
const t = eqUi;
|
||
const lines = raw
|
||
.split(/\r?\n/)
|
||
.map((line) => line.trim())
|
||
.filter(Boolean);
|
||
if (lines.length < 11) {
|
||
throw new Error(eqInterp(t.errMinLines, {}));
|
||
}
|
||
|
||
const preampMatch = lines[0].match(/^Preamp\s*:\s*([+-]?\d+(?:\.\d+)?)\s*dB$/i);
|
||
if (!preampMatch) {
|
||
throw new Error(eqInterp(t.errPreampFirstLine, {}));
|
||
}
|
||
const preamp = Number(preampMatch[1]);
|
||
if (!Number.isFinite(preamp)) {
|
||
throw new Error(eqInterp(t.errPreampValue, {}));
|
||
}
|
||
|
||
const parsedFilters = new Array<{
|
||
enabled: boolean;
|
||
type: string;
|
||
freq: number;
|
||
gain: number;
|
||
q: number;
|
||
}>(10);
|
||
|
||
for (let i = 1; i <= 10; i++) {
|
||
const line = lines[i];
|
||
const match = line.match(
|
||
/^Filter\s+(\d+)\s*:\s*(ON|OFF)\s+([A-Za-z]+)\s+Fc\s+([+-]?\d+(?:\.\d+)?)\s+Hz\s+Gain\s+([+-]?\d+(?:\.\d+)?)\s+dB\s+Q\s+([+-]?\d+(?:\.\d+)?)$/i
|
||
);
|
||
if (!match) {
|
||
throw new Error(eqInterp(t.errFilterLine, { line: String(i + 1) }));
|
||
}
|
||
|
||
const filterNo = Number(match[1]);
|
||
if (filterNo < 1 || filterNo > 10) {
|
||
throw new Error(eqInterp(t.errFilterNoRange, { no: String(filterNo) }));
|
||
}
|
||
|
||
const type = normalizeFilterType(match[3].toUpperCase());
|
||
if (!FILTER_TYPES.includes(type)) {
|
||
throw new Error(eqInterp(t.errFilterType, { no: String(filterNo), type: match[3] }));
|
||
}
|
||
|
||
const freq = Number(match[4]);
|
||
const gain = Number(match[5]);
|
||
const q = Number(match[6]);
|
||
if (![freq, gain, q].every(Number.isFinite)) {
|
||
throw new Error(eqInterp(t.errFilterNumbers, { no: String(filterNo) }));
|
||
}
|
||
|
||
parsedFilters[filterNo - 1] = {
|
||
enabled: match[2].toUpperCase() === "ON",
|
||
type,
|
||
freq: Number(freq.toFixed(2)),
|
||
gain: Number(gain.toFixed(2)),
|
||
q: Number(q.toFixed(2)),
|
||
};
|
||
}
|
||
|
||
if (parsedFilters.some((item) => !item)) {
|
||
throw new Error(eqInterp(t.errFilterAll, {}));
|
||
}
|
||
|
||
return {
|
||
preamp: Number(preamp.toFixed(2)),
|
||
filters: parsedFilters as typeof bands,
|
||
};
|
||
},
|
||
[eqUi],
|
||
);
|
||
|
||
const handleSaveBatchEdit = () => {
|
||
try {
|
||
const parsed = parseBatchEditText(batchEditText);
|
||
let updatedPeq: { name: string; autoPre?: number; preamp?: number; canDel?: number } | undefined;
|
||
setPeqItems((prev) =>
|
||
prev.map((item, i) => {
|
||
if (i !== headphoneIdx) return item;
|
||
const filters = parsed.filters.map(bandToPeqFilter);
|
||
const merged = {
|
||
...item,
|
||
autoPre: 0,
|
||
preamp: parsed.preamp,
|
||
filters,
|
||
};
|
||
rememberPeqPresetCache(item.name, { filters, preamp: parsed.preamp, autoPre: 0 });
|
||
updatedPeq = merged;
|
||
return merged;
|
||
})
|
||
);
|
||
setBands(parsed.filters);
|
||
schedulePeqSync(updatedPeq, parsed.filters, abMode, 0);
|
||
setSelectedBand(0);
|
||
setIsBatchEditDialogOpen(false);
|
||
toast.success(eqUi.toastBatchApplied);
|
||
} catch (error) {
|
||
toast.error(error instanceof Error ? error.message : eqUi.toastBatchParseError);
|
||
}
|
||
};
|
||
|
||
const rememberPeqPresetCache = useCallback(
|
||
(presetName: string | undefined, patch: PeqPresetLocalCache) => {
|
||
if (!presetName) return;
|
||
const prev = peqPresetCacheRef.current[presetName] ?? {};
|
||
const next: PeqPresetLocalCache = { ...prev, ...patch };
|
||
if (next.filters?.length === 0) delete next.filters;
|
||
peqPresetCacheRef.current[presetName] = next;
|
||
},
|
||
[],
|
||
);
|
||
|
||
const mergeRemotePeqCatalog = useCallback((items: PeqCatalogItem[]) => {
|
||
return items.map((item) => {
|
||
const cached = peqPresetCacheRef.current[item.name];
|
||
if (!cached) return item;
|
||
return {
|
||
...item,
|
||
...(cached.filters?.length ? { filters: cached.filters } : {}),
|
||
...(cached.preamp !== undefined ? { preamp: cached.preamp } : {}),
|
||
...(cached.autoPre !== undefined ? { autoPre: cached.autoPre } : {}),
|
||
};
|
||
});
|
||
}, []);
|
||
|
||
const syncPeqCatalogFromState = useCallback(
|
||
(
|
||
remote: { peq?: PeqCatalogItem[]; peqSelect?: number },
|
||
devicePeqSelect?: number,
|
||
) => {
|
||
const items = mergeRemotePeqCatalog(remote.peq ?? []);
|
||
setPeqItems(items as typeof peqItems);
|
||
setHeadphoneModels(items.map((item) => item.name));
|
||
if (items.length === 0) {
|
||
setHeadphoneIdx(0);
|
||
return;
|
||
}
|
||
const nextIdx = Math.min(
|
||
Math.max(devicePeqSelect ?? remote.peqSelect ?? 0, 0),
|
||
items.length - 1,
|
||
);
|
||
setHeadphoneIdx(nextIdx);
|
||
},
|
||
[mergeRemotePeqCatalog],
|
||
);
|
||
|
||
/** 将当前 A 曲线与总增益写回 peqItems 与本地缓存，切换耳机时才能恢复编辑结果 */
|
||
const persistPresetEditsToPeqItem = useCallback(
|
||
(
|
||
catalogIdx: number,
|
||
filtersSource: typeof DEFAULT_BANDS,
|
||
meta?: { preamp?: number; autoPre?: number },
|
||
) => {
|
||
const filters = filtersSource.map(bandToPeqFilter);
|
||
setPeqItems((prev) =>
|
||
prev.map((item, i) => {
|
||
if (i !== catalogIdx) return item;
|
||
const merged = {
|
||
...item,
|
||
filters,
|
||
...(meta?.preamp !== undefined ? { preamp: meta.preamp } : {}),
|
||
...(meta?.autoPre !== undefined ? { autoPre: meta.autoPre } : {}),
|
||
};
|
||
rememberPeqPresetCache(item.name, {
|
||
filters,
|
||
preamp: merged.preamp,
|
||
autoPre: merged.autoPre,
|
||
});
|
||
return merged;
|
||
}),
|
||
);
|
||
},
|
||
[rememberPeqPresetCache],
|
||
);
|
||
|
||
const handleSelectHeadphone = useCallback(
|
||
(idx: number) => {
|
||
if (idx === headphoneIdx) {
|
||
setIsHeadphoneMenuOpen(false);
|
||
return;
|
||
}
|
||
const leaving = peqItems[headphoneIdx];
|
||
const leavingFilters = bandsByMode.A.map(bandToPeqFilter);
|
||
rememberPeqPresetCache(leaving?.name, {
|
||
filters: leavingFilters,
|
||
preamp: leaving?.preamp,
|
||
autoPre: leaving?.autoPre,
|
||
});
|
||
persistPresetEditsToPeqItem(headphoneIdx, bandsByMode.A, {
|
||
preamp: leaving?.preamp,
|
||
autoPre: leaving?.autoPre,
|
||
});
|
||
if (peqSyncTimerRef.current !== null) {
|
||
window.clearTimeout(peqSyncTimerRef.current);
|
||
peqSyncTimerRef.current = null;
|
||
}
|
||
setHeadphoneIdx(idx);
|
||
updateSetting({ peqSelect: idx });
|
||
setIsHeadphoneMenuOpen(false);
|
||
},
|
||
[
|
||
bandsByMode.A,
|
||
headphoneIdx,
|
||
peqItems,
|
||
persistPresetEditsToPeqItem,
|
||
rememberPeqPresetCache,
|
||
updateSetting,
|
||
],
|
||
);
|
||
|
||
const applyPeqStateToUI = (
|
||
remote: { peq?: Array<{ name: string; filters?: any[] | string }>; peqSelect?: number; filters?: PeqFilter[] },
|
||
) => {
|
||
if (remote.peq !== undefined) {
|
||
syncPeqCatalog({
|
||
filters: remote.filters ?? peqState?.filters ?? [],
|
||
peq: remote.peq,
|
||
peqSelect: remote.peqSelect ?? deviceState?.peqSelect ?? peqState?.peqSelect,
|
||
});
|
||
}
|
||
lastPeqCatalogSyncKeyRef.current = buildPeqCatalogSyncKey(remote, deviceState?.peqSelect);
|
||
syncPeqCatalogFromState(remote, deviceState?.peqSelect);
|
||
|
||
const items = mergeRemotePeqCatalog((remote.peq ?? []) as PeqCatalogItem[]);
|
||
if (items.length === 0) {
|
||
setBandsForBothModes(DEFAULT_BANDS);
|
||
setSelectedBandByMode({ A: 0, B: 0 });
|
||
return;
|
||
}
|
||
|
||
const nextIdx = Math.min(
|
||
Math.max(deviceState?.peqSelect ?? remote.peqSelect ?? 0, 0),
|
||
items.length - 1,
|
||
);
|
||
const nextBands = normalizeFiltersFromPeq(items[nextIdx] as { filters?: any[] | string });
|
||
if (nextBands.length > 0) {
|
||
setBandsForBothModes(nextBands);
|
||
}
|
||
setSelectedBandByMode({ A: 0, B: 0 });
|
||
};
|
||
|
||
const handleDeleteHeadphone = async () => {
|
||
const target = peqItems[headphoneIdx];
|
||
if (!target?.name) return;
|
||
|
||
const confirmed = window.confirm(eqInterp(eqUi.deleteConfirm, { name: target.name }));
|
||
if (!confirmed) return;
|
||
|
||
try {
|
||
if (isDemoMode || !api) {
|
||
const nextItems = peqItems.filter((_, idx) => idx !== headphoneIdx);
|
||
delete peqPresetCacheRef.current[target.name];
|
||
applyPeqStateToUI({ peq: nextItems, peqSelect: Math.max(0, headphoneIdx - 1) });
|
||
toast.success(eqUi.toastDeleted);
|
||
return;
|
||
}
|
||
|
||
delete peqPresetCacheRef.current[target.name];
|
||
await api.removePeq([target.name]);
|
||
const latest = await api.getPeqState();
|
||
applyPeqStateToUI(latest);
|
||
toast.success(eqUi.toastDeleted);
|
||
} catch {
|
||
toast.error(eqUi.toastDeleteFail);
|
||
}
|
||
};
|
||
|
||
const openAddPresetDialog = () => {
|
||
const existingNames = headphoneModels;
|
||
const currentName = headphoneModels[headphoneIdx] ?? "Preset";
|
||
setCopyPresetName(getUniquePresetName(currentName, existingNames));
|
||
setFlatPresetName(getUniquePresetName("Flat", existingNames));
|
||
setAddPresetMode("copy");
|
||
setIsAddPresetDialogOpen(true);
|
||
};
|
||
|
||
const openSaveBDialog = () => {
|
||
const currentName = peqItems[headphoneIdx]?.name ?? headphoneModels[headphoneIdx] ?? "Preset";
|
||
const defaultName = getUniquePresetName(`${currentName}_B`, headphoneModels);
|
||
setSaveBPresetName(defaultName);
|
||
setIsSaveBDialogOpen(true);
|
||
};
|
||
|
||
const handleSaveAddPreset = async () => {
|
||
const nextName = addPresetMode === "copy" ? copyPresetName.trim() : flatPresetName.trim();
|
||
if (!nextName) {
|
||
toast.error(eqUi.addPresetNameEmpty);
|
||
return;
|
||
}
|
||
if (headphoneModels.includes(nextName)) {
|
||
toast.error(eqUi.addPresetNameExists);
|
||
return;
|
||
}
|
||
|
||
const copyPayload: PeqChangePayload = {
|
||
peqChange: {
|
||
name: nextName,
|
||
filters: bands.map(bandToPeqFilter),
|
||
autoPre: currentPeq?.autoPre ?? 0,
|
||
preamp: currentPeq?.preamp ?? 0,
|
||
canDel: currentPeq?.canDel ?? 1,
|
||
},
|
||
};
|
||
|
||
const flatPayload: PeqChangePayload = {
|
||
peqChange: {
|
||
name: nextName,
|
||
preamp: 0,
|
||
canDel: 1,
|
||
autoPre: 0,
|
||
filters: FLAT_PRESET_FILTERS,
|
||
},
|
||
};
|
||
|
||
try {
|
||
await upgradePeqChange(addPresetMode === "copy" ? copyPayload : flatPayload);
|
||
if (api && !isDemoMode) {
|
||
const latest = await api.getPeqState();
|
||
applyPeqStateToUI(latest as { peq?: Array<{ name: string; filters?: any[] | string }>; peqSelect?: number });
|
||
const createdIndex = latest.peq?.findIndex((item) => item.name === nextName) ?? -1;
|
||
if (createdIndex >= 0) {
|
||
setHeadphoneIdx(createdIndex);
|
||
updateSetting({ peqSelect: createdIndex });
|
||
}
|
||
} else {
|
||
const localFilters = addPresetMode === "copy"
|
||
? bands.map(bandToPeqFilter)
|
||
: FLAT_PRESET_FILTERS;
|
||
const localAutoPre = addPresetMode === "copy" ? (currentPeq?.autoPre ?? 0) : 0;
|
||
const localPreamp = addPresetMode === "copy" ? (currentPeq?.preamp ?? 0) : 0;
|
||
setHeadphoneModels((prev) => [...prev, nextName]);
|
||
setPeqItems((prev) => [
|
||
...prev,
|
||
{
|
||
name: nextName,
|
||
filters: localFilters,
|
||
autoPre: localAutoPre,
|
||
preamp: localPreamp,
|
||
canDel: 1,
|
||
},
|
||
]);
|
||
setHeadphoneIdx(headphoneModels.length);
|
||
}
|
||
setIsAddPresetDialogOpen(false);
|
||
toast.success(eqUi.toastAddPresetOk);
|
||
} catch {
|
||
toast.error(eqUi.toastAddPresetFail);
|
||
}
|
||
};
|
||
|
||
const handleSaveBAsPreset = async () => {
|
||
const nextName = saveBPresetName.trim();
|
||
if (!nextName) {
|
||
toast.error(eqUi.addPresetNameEmpty);
|
||
return;
|
||
}
|
||
if (headphoneModels.includes(nextName)) {
|
||
toast.error(eqUi.addPresetNameExists);
|
||
return;
|
||
}
|
||
|
||
const bBands = cloneBands(bandsByMode.B);
|
||
const filters = bBands.map(bandToPeqFilter);
|
||
const payload: PeqChangePayload = {
|
||
peqChange: {
|
||
name: nextName,
|
||
filters,
|
||
autoPre: currentPeq?.autoPre ?? 0,
|
||
preamp: currentPeq?.preamp ?? 0,
|
||
canDel: currentPeq?.canDel ?? 1,
|
||
},
|
||
};
|
||
|
||
try {
|
||
await upgradePeqChange(payload);
|
||
if (api && !isDemoMode) {
|
||
const latest = await api.getPeqState();
|
||
applyPeqStateToUI(latest as { peq?: Array<{ name: string; filters?: any[] | string }>; peqSelect?: number });
|
||
const createdIndex = latest.peq?.findIndex((item) => item.name === nextName) ?? -1;
|
||
if (createdIndex >= 0) {
|
||
setHeadphoneIdx(createdIndex);
|
||
updateSetting({ peqSelect: createdIndex });
|
||
}
|
||
} else {
|
||
setHeadphoneModels((prev) => [...prev, nextName]);
|
||
setPeqItems((prev) => [
|
||
...prev,
|
||
{
|
||
name: nextName,
|
||
filters,
|
||
autoPre: currentPeq?.autoPre ?? 0,
|
||
preamp: currentPeq?.preamp ?? 0,
|
||
canDel: currentPeq?.canDel ?? 1,
|
||
},
|
||
]);
|
||
setHeadphoneIdx(headphoneModels.length);
|
||
}
|
||
setIsSaveBDialogOpen(false);
|
||
toast.success(eqUi.toastSaveBOk);
|
||
} catch {
|
||
toast.error(eqUi.toastSaveBFail);
|
||
}
|
||
};
|
||
|
||
// msgCount 轮询更新 peqState 后，同步耳机列表与当前选中项
|
||
useEffect(() => {
|
||
if (!peqState?.peq) return;
|
||
const key = buildPeqCatalogSyncKey(peqState, deviceState?.peqSelect);
|
||
if (!key || key === lastPeqCatalogSyncKeyRef.current) return;
|
||
lastPeqCatalogSyncKeyRef.current = key;
|
||
syncPeqCatalogFromState(peqState, deviceState?.peqSelect);
|
||
}, [peqState, deviceState?.peqSelect, syncPeqCatalogFromState]);
|
||
|
||
// 切换耳机时默认回到 A 组对比
|
||
useEffect(() => {
|
||
setAbMode("A");
|
||
}, [headphoneIdx]);
|
||
|
||
// 获取耳机原始曲线
|
||
const getModelCurve = async (brand: string, name: string) => {
|
||
try {
|
||
console.log("[modelCurve] request", { brand, name });
|
||
const resp = await fetch(
|
||
`//api.luxsin.com.cn/audio/modelCurve?brand=${encodeURIComponent(brand)}&name=${encodeURIComponent(name)}`
|
||
);
|
||
const data = await resp.text();
|
||
// 使用自定义 Base64 解码
|
||
const decoded = decodeCustomBase64(data);
|
||
const parsed = JSON.parse(decoded);
|
||
console.log("[modelCurve] decoded", {
|
||
hasFrRaw:
|
||
!!(parsed &&
|
||
typeof parsed === "object" &&
|
||
"fr" in (parsed as Record<string, unknown>) &&
|
||
(parsed as { fr?: unknown }).fr &&
|
||
typeof (parsed as { fr?: unknown }).fr === "object" &&
|
||
"raw" in ((parsed as { fr?: Record<string, unknown> }).fr ?? {})),
|
||
});
|
||
console.log("[modelCurve] fr.raw", (parsed as { fr?: { raw?: unknown } }).fr?.raw);
|
||
return parsed;
|
||
} catch (error) {
|
||
console.log("[modelCurve] request failed", error);
|
||
return null;
|
||
}
|
||
};
|
||
|
||
const loadRawCurveForPeq = useCallback(
|
||
async (peq: { brand?: string; model?: string; name?: string } | undefined): Promise<number[] | null> => {
|
||
let brand = peq?.brand?.trim() ?? "";
|
||
let model = peq?.model?.trim() ?? "";
|
||
|
||
// Some presets only have `name` (e.g. "Apple AirPods Pro") and miss explicit brand/model.
|
||
if ((!brand || !model) && peq?.name) {
|
||
const [first, ...rest] = peq.name.trim().split(/\s+/);
|
||
if (!brand && first) brand = first;
|
||
if (!model && rest.length > 0) model = rest.join(" ");
|
||
}
|
||
if (!brand || !model) return null;
|
||
|
||
const modelCurve = await getModelCurve(brand, model);
|
||
if (modelCurve && typeof modelCurve === "object") {
|
||
const payload = modelCurve as {
|
||
fr?: { raw?: unknown } | unknown;
|
||
};
|
||
const rawCandidate =
|
||
payload.fr && typeof payload.fr === "object" && Array.isArray((payload.fr as { raw?: unknown }).raw)
|
||
? (payload.fr as { raw?: unknown }).raw
|
||
: null;
|
||
const raw = Array.isArray(rawCandidate)
|
||
? rawCandidate
|
||
.map((point) => {
|
||
if (typeof point === "number" && Number.isFinite(point)) return point;
|
||
if (Array.isArray(point) && point.length >= 2 && typeof point[1] === "number") return point[1];
|
||
if (point && typeof point === "object") {
|
||
const y = (point as Record<string, unknown>).y
|
||
?? (point as Record<string, unknown>).value
|
||
?? (point as Record<string, unknown>).db
|
||
?? (point as Record<string, unknown>).gain;
|
||
if (typeof y === "number" && Number.isFinite(y)) return y;
|
||
}
|
||
return NaN;
|
||
})
|
||
: null;
|
||
const cleanedRaw = raw && raw.every((v) => Number.isFinite(v)) ? (raw as number[]) : null;
|
||
console.log("[modelCurve] raw check", {
|
||
brand,
|
||
model,
|
||
hasRaw: !!cleanedRaw,
|
||
rawLength: cleanedRaw?.length ?? 0,
|
||
});
|
||
return cleanedRaw;
|
||
}
|
||
return null;
|
||
},
|
||
[],
|
||
);
|
||
|
||
// 加载耳机列表并初始化曲线
|
||
useEffect(() => {
|
||
async function loadHeadphones() {
|
||
allowPeqRemoteSyncRef.current = false;
|
||
try {
|
||
if (isDemoMode || !api) {
|
||
// 演示模式使用默认列表
|
||
const defaultModels = [
|
||
"Sennheiser HD 650",
|
||
"Sennheiser HD 800",
|
||
"Sony WH-1000XM5",
|
||
"AKG K701",
|
||
"Beyerdynamic DT 990",
|
||
"Audio-Technica ATH-M50x",
|
||
];
|
||
setHeadphoneModels(defaultModels);
|
||
setPeqItems(defaultModels.map(name => ({ name, filters: [] })));
|
||
setCurrentRawCurve(null);
|
||
return;
|
||
}
|
||
try {
|
||
const loadedPeq = await api.getPeqState();
|
||
if (loadedPeq.peq && loadedPeq.peq.length > 0) {
|
||
syncPeqCatalog(loadedPeq);
|
||
setHeadphoneModels(loadedPeq.peq.map((h) => h.name));
|
||
setPeqItems(loadedPeq.peq);
|
||
const nextIdx = Math.min(
|
||
Math.max(deviceState?.peqSelect ?? loadedPeq.peqSelect ?? 0, 0),
|
||
loadedPeq.peq.length - 1,
|
||
);
|
||
setHeadphoneIdx(nextIdx);
|
||
lastPeqCatalogSyncKeyRef.current = buildPeqCatalogSyncKey(loadedPeq, deviceState?.peqSelect);
|
||
|
||
// 初始化当前选中的耳机曲线
|
||
const currentPeq = loadedPeq.peq[nextIdx];
|
||
if (currentPeq) {
|
||
// 修复 filters 数据（兼容不同的字段名）
|
||
const fixedFilters = normalizeFiltersFromPeq(currentPeq);
|
||
|
||
// 更新 bands 状态
|
||
if (fixedFilters && fixedFilters.length > 0) {
|
||
setBandsForBothModes(fixedFilters);
|
||
setSelectedBandByMode({ A: 0, B: 0 });
|
||
}
|
||
|
||
// raw 与图表渲染统一交给 headphoneIdx/peqItems 监听逻辑处理，
|
||
// 避免首次进入页面时重复请求 modelCurve。
|
||
|
||
}
|
||
} else {
|
||
// 如果没有数据，使用默认列表
|
||
const defaultModels = [
|
||
"Sennheiser HD 650",
|
||
"Sennheiser HD 800",
|
||
"Sony WH-1000XM5",
|
||
"AKG K701",
|
||
"Beyerdynamic DT 990",
|
||
"Audio-Technica ATH-M50x",
|
||
];
|
||
setHeadphoneModels(defaultModels);
|
||
setPeqItems(defaultModels.map(name => ({ name, filters: [] })));
|
||
setCurrentRawCurve(null);
|
||
}
|
||
} catch {
|
||
// 出错时使用默认列表
|
||
const defaultModels = [
|
||
"Sennheiser HD 650",
|
||
"Sennheiser HD 800",
|
||
"Sony WH-1000XM5",
|
||
"AKG K701",
|
||
"Beyerdynamic DT 990",
|
||
"Audio-Technica ATH-M50x",
|
||
];
|
||
setHeadphoneModels(defaultModels);
|
||
setPeqItems(defaultModels.map(name => ({ name, filters: [] })));
|
||
setCurrentRawCurve(null);
|
||
}
|
||
} finally {
|
||
allowPeqRemoteSyncRef.current = true;
|
||
}
|
||
}
|
||
loadHeadphones();
|
||
}, [api, isDemoMode, loadRawCurveForPeq]);
|
||
|
||
/** 切换耳机型号时变；不含 filters，避免编辑时写回 peqItems 把 B 试听曲线重置 */
|
||
const headphoneSwitchKey = useMemo(() => {
|
||
const peq = peqItems[headphoneIdx];
|
||
if (!peq) return String(headphoneIdx);
|
||
return [headphoneIdx, peq.name ?? "", peq.brand ?? "", peq.model ?? ""].join("\u0001");
|
||
}, [headphoneIdx, peqItems]);
|
||
|
||
// 切换耳机型号后，从 peqItems 加载该型号的 filters（暂停一次上报避免错写）
|
||
useEffect(() => {
|
||
const peq = peqItems[headphoneIdx];
|
||
if (!peq) return;
|
||
const nextBands = normalizeFiltersFromPeq(peq);
|
||
if (!nextBands.length) return;
|
||
syncingHeadphoneRef.current = true;
|
||
setBandsForBothModes(nextBands);
|
||
setSelectedBandByMode({ A: 0, B: 0 });
|
||
let cancelled = false;
|
||
void (async () => {
|
||
const raw = await loadRawCurveForPeq(peq as { brand?: string; model?: string });
|
||
if (cancelled) return;
|
||
setCurrentRawCurve(raw);
|
||
renderCharts(nextBands, raw, false);
|
||
})();
|
||
requestAnimationFrame(() => {
|
||
syncingHeadphoneRef.current = false;
|
||
});
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [headphoneSwitchKey, loadRawCurveForPeq]);
|
||
|
||
type PeqSubmitTopLevel = "peqChange" | "peqApply" | "byMode";
|
||
|
||
const schedulePeqSync = useCallback(
|
||
(
|
||
peq: { name: string; autoPre?: number; preamp?: number; canDel?: number } | undefined,
|
||
filtersSource: typeof DEFAULT_BANDS,
|
||
mode: "A" | "B",
|
||
delay = 320,
|
||
topLevel: PeqSubmitTopLevel = "byMode",
|
||
catalogIdx = headphoneIdx,
|
||
) => {
|
||
if (!allowPeqRemoteSyncRef.current) return;
|
||
if (!isDemoMode && !api) return;
|
||
if (!peq?.name) return;
|
||
|
||
if (peqSyncTimerRef.current !== null) {
|
||
window.clearTimeout(peqSyncTimerRef.current);
|
||
}
|
||
|
||
const idxAtSchedule = catalogIdx;
|
||
peqSyncTimerRef.current = window.setTimeout(() => {
|
||
const filters = filtersSource.map(bandToPeqFilter);
|
||
const body: PeqPresetBody = {
|
||
name: peq.name,
|
||
filters,
|
||
autoPre: peq.autoPre ?? 0,
|
||
preamp: peq.preamp ?? 0,
|
||
canDel: peq.canDel ?? 1,
|
||
};
|
||
const usePeqChange =
|
||
topLevel === "peqChange" || (topLevel === "byMode" && mode === "A");
|
||
if (usePeqChange) {
|
||
persistPresetEditsToPeqItem(idxAtSchedule, filtersSource, {
|
||
preamp: peq.preamp,
|
||
autoPre: peq.autoPre,
|
||
});
|
||
}
|
||
const submit = usePeqChange
|
||
? () => upgradePeqChange({ peqChange: body } satisfies PeqChangePayload)
|
||
: () => upgradePeqApply({ peqApply: body } satisfies PeqApplyPayload);
|
||
submit().catch(() => {
|
||
toast.error("EQ 保存失败");
|
||
});
|
||
}, delay);
|
||
},
|
||
[api, headphoneIdx, isDemoMode, persistPresetEditsToPeqItem, upgradePeqApply, upgradePeqChange],
|
||
);
|
||
|
||
/** 点击 A/B 切换试听：顶层固定 peqApply（A/B 数据结构相同，仅 filters 不同） */
|
||
const handleAbToggle = useCallback(
|
||
(m: "A" | "B") => {
|
||
if (m === abMode) return;
|
||
skipBandsSyncFromAbToggleRef.current = true;
|
||
setAbMode(m);
|
||
schedulePeqSync(peqItems[headphoneIdx], bandsByMode[m], m, 0, "peqApply");
|
||
},
|
||
[abMode, bandsByMode, headphoneIdx, peqItems, schedulePeqSync],
|
||
);
|
||
|
||
const handleCopyAndSwitchTo = useCallback(
|
||
(to: "A" | "B") => {
|
||
const from = abMode;
|
||
const copied = cloneBands(bandsByMode[from]);
|
||
copyModeParams(from, to);
|
||
skipBandsSyncFromAbToggleRef.current = true;
|
||
setAbMode(to);
|
||
schedulePeqSync(peqItems[headphoneIdx], copied, to, 0, "peqApply");
|
||
},
|
||
[abMode, bandsByMode, copyModeParams, headphoneIdx, peqItems, schedulePeqSync],
|
||
);
|
||
|
||
// 参数编辑防抖：A→peqChange，B→peqApply（不因切换 A/B 误触发）
|
||
useEffect(() => {
|
||
if (syncingHeadphoneRef.current) return;
|
||
if (skipPeqAutoSyncRef.current) {
|
||
skipPeqAutoSyncRef.current = false;
|
||
return;
|
||
}
|
||
if (skipBandsSyncFromAbToggleRef.current) {
|
||
skipBandsSyncFromAbToggleRef.current = false;
|
||
return;
|
||
}
|
||
schedulePeqSync(peqItems[headphoneIdx], bands, abMode, 320, "byMode", headphoneIdx);
|
||
return () => {
|
||
if (peqSyncTimerRef.current !== null) {
|
||
window.clearTimeout(peqSyncTimerRef.current);
|
||
}
|
||
};
|
||
}, [bands, abMode, headphoneIdx, currentPeqName, currentPeqPreamp, currentPeqAutoPre, schedulePeqSync]);
|
||
|
||
useEffect(() => {
|
||
const onPointerDown = (event: PointerEvent) => {
|
||
const target = event.target as Node;
|
||
const inFilter = filterMenuRef.current?.contains(target) ?? false;
|
||
const inHeadphone = headphoneMenuRef.current?.contains(target) ?? false;
|
||
if (!inFilter) {
|
||
setIsFilterMenuOpen(false);
|
||
}
|
||
if (!inHeadphone) {
|
||
setIsHeadphoneMenuOpen(false);
|
||
}
|
||
};
|
||
window.addEventListener("pointerdown", onPointerDown);
|
||
return () => window.removeEventListener("pointerdown", onPointerDown);
|
||
}, []);
|
||
|
||
const chartRef = useRef<echarts.ECharts | null>(null);
|
||
const band = bands[selectedBand] ?? DEFAULT_BANDS[selectedBand] ?? DEFAULT_BANDS[0];
|
||
|
||
useEffect(() => {
|
||
setBandSliderPreview(null);
|
||
}, [selectedBand, abMode, headphoneSwitchKey]);
|
||
|
||
// Render frequency response chart using ECharts
|
||
const renderCharts = (peqFilters: typeof bands, raw: number[] | null, changeParam: boolean) => {
|
||
const list: any[] = [];
|
||
const fs = 48000;
|
||
|
||
// Calculate coefficient matrix for each filter
|
||
peqFilters.forEach((item) => {
|
||
const filterType = getFilterType(item.type);
|
||
|
||
const coeff = getSectionsMatrix(
|
||
item.gain,
|
||
item.freq,
|
||
item.q,
|
||
filterType,
|
||
false,
|
||
fs
|
||
);
|
||
if (coeff) {
|
||
list.push(coeff);
|
||
}
|
||
});
|
||
|
||
// Get frequency response data
|
||
const dataSet = visualizeResponse(list, fs);
|
||
const ops = getChartOps(dataSet, 20, -20, '#FFED00') as any;
|
||
|
||
// Get or create chart instance
|
||
const chartDom = document.getElementById('freq-chart');
|
||
if (!chartDom) return;
|
||
|
||
if (!chartRef.current) {
|
||
chartRef.current = echarts.init(chartDom);
|
||
}
|
||
|
||
const myChart = chartRef.current;
|
||
|
||
// Handle changeParam (get raw data from existing chart)
|
||
if (changeParam && myChart) {
|
||
const option = myChart.getOption() as { series?: Array<{ data?: number[] }> };
|
||
if (option.series && option.series.length > 1) {
|
||
raw = (option.series[1] as any).data;
|
||
}
|
||
}
|
||
|
||
// Clear and rebuild chart
|
||
myChart.clear();
|
||
|
||
// Add Raw and Equalized curves if raw data is available (expects same 349 points as EQ curve)
|
||
if (Array.isArray(raw) && raw.length === dataSet[1].length) {
|
||
ops.series.push({
|
||
name: 'Raw',
|
||
data: raw,
|
||
type: 'line',
|
||
showSymbol: false,
|
||
lineStyle: {
|
||
color: '#ffffff',
|
||
},
|
||
});
|
||
|
||
// Calculate equalized curve
|
||
const equalizedRaw = dataSet[1].map((value, index) => value + raw[index]);
|
||
ops.series.push({
|
||
name: 'Equalized',
|
||
data: equalizedRaw,
|
||
type: 'line',
|
||
showSymbol: false,
|
||
lineStyle: {
|
||
color: '#23d2fe',
|
||
width: 6,
|
||
opacity: 0.7,
|
||
},
|
||
});
|
||
}
|
||
|
||
myChart.setOption(ops, true);
|
||
};
|
||
|
||
const handleApplyB = useCallback(async () => {
|
||
const peq = peqItems[headphoneIdx];
|
||
if (!peq?.name) {
|
||
toast.error(eqUi.toastApplyBFail);
|
||
return;
|
||
}
|
||
|
||
const bBands = cloneBands(bandsByMode.B);
|
||
const filters = bBands.map(bandToPeqFilter);
|
||
const payload: PeqChangePayload = {
|
||
peqChange: {
|
||
name: peq.name,
|
||
filters,
|
||
autoPre: peq.autoPre ?? 0,
|
||
preamp: peq.preamp ?? 0,
|
||
canDel: peq.canDel ?? 1,
|
||
},
|
||
};
|
||
|
||
skipPeqAutoSyncRef.current = true;
|
||
setBandsByMode((prev) => ({ ...prev, A: cloneBands(bBands) }));
|
||
setSelectedBandByMode((prev) => ({ ...prev, A: prev.B }));
|
||
rememberPeqPresetCache(peq.name, {
|
||
filters,
|
||
preamp: peq.preamp,
|
||
autoPre: peq.autoPre,
|
||
});
|
||
setPeqItems((prev) =>
|
||
prev.map((item, i) => (i !== headphoneIdx ? item : { ...item, filters })),
|
||
);
|
||
setAbMode("A");
|
||
|
||
if (peqSyncTimerRef.current !== null) {
|
||
window.clearTimeout(peqSyncTimerRef.current);
|
||
peqSyncTimerRef.current = null;
|
||
}
|
||
|
||
try {
|
||
await upgradePeqChange(payload);
|
||
if (peqItems.length > 0 && headphoneIdx < peqItems.length) {
|
||
renderCharts(bBands, currentRawCurve, false);
|
||
}
|
||
toast.success(eqUi.toastApplyBSuccess);
|
||
} catch {
|
||
skipPeqAutoSyncRef.current = false;
|
||
toast.error(eqUi.toastApplyBFail);
|
||
}
|
||
}, [
|
||
bandsByMode.B,
|
||
currentRawCurve,
|
||
eqUi.toastApplyBFail,
|
||
eqUi.toastApplyBSuccess,
|
||
headphoneIdx,
|
||
peqItems,
|
||
upgradePeqChange,
|
||
]);
|
||
|
||
const updateBand = useCallback(
|
||
(idx: number, patch: Partial<typeof DEFAULT_BANDS[0]>) => {
|
||
setBands((prevBands) => prevBands.map((b, i) => (i === idx ? { ...b, ...patch } : b)));
|
||
},
|
||
[setBands],
|
||
);
|
||
|
||
const bandParamDialogMeta = useMemo(() => {
|
||
if (!bandParamDialog) return null;
|
||
const rangeMessages = {
|
||
invalid: eqUi.paramInputInvalid ?? "请输入有效数值",
|
||
outOfRange: "",
|
||
};
|
||
switch (bandParamDialog) {
|
||
case "freq":
|
||
return {
|
||
title: eqUi.paramInputTitleFreq ?? "设置频率",
|
||
hint: eqUi.paramInputHintFreq ?? "范围：20 – 20000 Hz，可使用 k 表示 kHz（如 9.5k）",
|
||
placeholder: "9500",
|
||
inputMode: "decimal" as const,
|
||
rangeMessages: {
|
||
...rangeMessages,
|
||
outOfRange: eqInterp(eqUi.paramInputOutOfRangeFreq, {
|
||
min: String(BAND_FREQ_MIN),
|
||
max: String(BAND_FREQ_MAX),
|
||
}) || `频率需在 ${BAND_FREQ_MIN} – ${BAND_FREQ_MAX} Hz 之间`,
|
||
},
|
||
};
|
||
case "gain":
|
||
return {
|
||
title: eqUi.paramInputTitleGain ?? "设置增益",
|
||
hint: eqUi.paramInputHintGain ?? "范围：-15.0 – +15.0 dB",
|
||
placeholder: "0.0",
|
||
inputMode: "decimal" as const,
|
||
rangeMessages: {
|
||
...rangeMessages,
|
||
outOfRange: eqInterp(eqUi.paramInputOutOfRangeGain, {
|
||
min: BAND_GAIN_MIN.toFixed(1),
|
||
max: BAND_GAIN_MAX.toFixed(1),
|
||
}) || `增益需在 ${BAND_GAIN_MIN} – ${BAND_GAIN_MAX} dB 之间`,
|
||
},
|
||
};
|
||
case "q":
|
||
return {
|
||
title: eqUi.paramInputTitleQ ?? "设置 Q 值",
|
||
hint: eqUi.paramInputHintQ ?? "范围：0.10 – 10.00",
|
||
placeholder: "1.41",
|
||
inputMode: "decimal" as const,
|
||
rangeMessages: {
|
||
...rangeMessages,
|
||
outOfRange: eqInterp(eqUi.paramInputOutOfRangeQ, {
|
||
min: BAND_Q_MIN.toFixed(2),
|
||
max: BAND_Q_MAX.toFixed(2),
|
||
}) || `Q 值需在 ${BAND_Q_MIN} – ${BAND_Q_MAX} 之间`,
|
||
},
|
||
};
|
||
}
|
||
}, [bandParamDialog, eqUi]);
|
||
|
||
const openBandParamDialog = (kind: BandParamKind) => {
|
||
setBandParamDialog(kind);
|
||
setBandParamInput(formatBandParamForInput(kind, band));
|
||
};
|
||
|
||
const closeBandParamDialog = () => {
|
||
setBandParamDialog(null);
|
||
setBandParamInput("");
|
||
};
|
||
|
||
const applyBandParamDialog = () => {
|
||
if (!bandParamDialog || !bandParamDialogMeta) return;
|
||
const parsed = parseBandParamInput(bandParamDialog, bandParamInput, bandParamDialogMeta.rangeMessages);
|
||
if (!parsed.ok) {
|
||
toast.error(parsed.message);
|
||
return;
|
||
}
|
||
if (bandParamDialog === "freq") updateBand(selectedBand, { freq: parsed.value });
|
||
else if (bandParamDialog === "gain") updateBand(selectedBand, { gain: parsed.value });
|
||
else updateBand(selectedBand, { q: parsed.value });
|
||
closeBandParamDialog();
|
||
};
|
||
|
||
const updateCurrentPeqMeta = (patch: Partial<{ autoPre: number; preamp: number }>) => {
|
||
let updatedPeq: { name: string; autoPre?: number; preamp?: number; canDel?: number } | undefined;
|
||
setPeqItems((prev) => {
|
||
const next = prev.map((item, i) => {
|
||
if (i !== headphoneIdx) return item;
|
||
const merged = { ...item, ...patch };
|
||
updatedPeq = merged;
|
||
rememberPeqPresetCache(item.name, patch);
|
||
return merged;
|
||
});
|
||
return next;
|
||
});
|
||
schedulePeqSync(updatedPeq, bands, abMode, 0);
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-black">
|
||
<div style={{
|
||
filter: eqOn ? "none" : "grayscale(1) opacity(0.4)",
|
||
transition: "filter 0.3s ease-in-out"
|
||
}}>
|
||
{/* ── Header ── */}
|
||
<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">HP-EQ</h1>
|
||
<IOSToggle
|
||
checked={eqOn}
|
||
onChange={(v) => {
|
||
if (v) {
|
||
void updateSetting(
|
||
bypassOn ? { peqEnable: 1, dsp_enable: 1 } : { peqEnable: 1 },
|
||
);
|
||
} else {
|
||
void updateSetting({ peqEnable: 0 });
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<FeatureGate
|
||
enabled={eqOn}
|
||
className="px-4 pb-32 pt-3 space-y-3"
|
||
labels={{
|
||
title: eqUi.enableConfirmTitle ?? "HP-EQ 未开启",
|
||
description: eqUi.enableConfirmDesc ?? "当前 HP-EQ 功能已关闭，是否开启？",
|
||
cancel: eqUi.cancel ?? "取消",
|
||
confirm: eqUi.enableConfirmOk ?? "开启",
|
||
}}
|
||
onEnable={() => {
|
||
const bypass = (deviceState?.dsp_enable ?? 0) === 0;
|
||
return updateSetting(bypass ? { peqEnable: 1, dsp_enable: 1 } : { peqEnable: 1 });
|
||
}}
|
||
>
|
||
{/* ── Action cards: 批量编辑 / 添加耳机型号 ── */}
|
||
<div className="grid grid-cols-2 gap-3">
|
||
<button
|
||
className="ios-list-group flex flex-col items-center justify-center py-3 gap-2 active:opacity-70 transition-opacity"
|
||
onClick={openBatchEditDialog}>
|
||
<div className="w-10 h-10 rounded-[12px] flex items-center justify-center"
|
||
style={{ background: "rgba(0,255,246,0.12)", border: "1px solid rgba(0,255,246,0.2)" }}>
|
||
<Edit3 size={20} style={{ color: "#00FFF6" }} />
|
||
</div>
|
||
<span className="text-[14px] text-white/80">{peqCardLabels.edit}</span>
|
||
</button>
|
||
<button
|
||
className="ios-list-group flex flex-col items-center justify-center py-3 gap-2 active:opacity-70 transition-opacity"
|
||
onClick={openAddHeadsetCatalog}>
|
||
<div className="w-10 h-10 rounded-[12px] flex items-center justify-center"
|
||
style={{ background: "rgba(0,255,246,0.12)", border: "1px solid rgba(0,255,246,0.2)" }}>
|
||
<Headphones size={20} style={{ color: "#00FFF6" }} />
|
||
</div>
|
||
<span className="text-[14px] text-white/80">{peqCardLabels.headset}</span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* ── Headphone model selector ── */}
|
||
<div className="flex items-center justify-between px-1">
|
||
<div
|
||
ref={headphoneMenuRef}
|
||
className="relative z-40 flex-1 mr-2 rounded-[12px] overflow-visible backdrop-blur-md transition-all"
|
||
style={{
|
||
background: "linear-gradient(180deg, rgba(36,38,42,0.92) 0%, rgba(24,26,30,0.92) 100%)",
|
||
border: "1px solid rgba(0,255,246,0.52)",
|
||
boxShadow: "0 0 14px rgba(0,255,246,0.12), inset 0 1px 0 rgba(255,255,255,0.08)",
|
||
}}
|
||
>
|
||
<button
|
||
type="button"
|
||
className="w-full pl-3 pr-8 py-2 text-left text-[13px] font-semibold tracking-wide text-[#E9FBFF] bg-transparent outline-none cursor-pointer active:opacity-80 transition-opacity rounded-[12px] truncate"
|
||
onClick={() => setIsHeadphoneMenuOpen((v) => !v)}
|
||
title={headphoneModels[headphoneIdx] ?? ""}
|
||
>
|
||
{headphoneModels[headphoneIdx] ?? "—"}
|
||
</button>
|
||
<ChevronDown
|
||
size={13}
|
||
className={`absolute right-2.5 top-1/2 -translate-y-1/2 text-[#00FFF6] pointer-events-none transition-transform ${isHeadphoneMenuOpen ? "rotate-180" : ""}`}
|
||
/>
|
||
{isHeadphoneMenuOpen && (
|
||
<div
|
||
className="absolute left-0 right-0 mt-1 z-50 rounded-[10px] overflow-hidden max-h-56 overflow-y-auto"
|
||
style={{
|
||
background: "rgba(10,12,16,0.98)",
|
||
border: "1px solid rgba(0,255,246,0.35)",
|
||
boxShadow: "0 8px 20px rgba(0,0,0,0.45)",
|
||
}}
|
||
>
|
||
{headphoneModels.map((model, idx) => {
|
||
const active = idx === headphoneIdx;
|
||
return (
|
||
<button
|
||
key={`${model}-${idx}`}
|
||
type="button"
|
||
className={`w-full px-3 py-2 text-left text-[13px] transition-colors truncate ${
|
||
active ? "text-black font-semibold" : "text-white/90 hover:bg-white/10"
|
||
}`}
|
||
style={active ? { background: "#00FFF6" } : undefined}
|
||
title={model}
|
||
onClick={() => handleSelectHeadphone(idx)}
|
||
>
|
||
{model}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
className="w-9 h-9 rounded-full flex items-center justify-center text-white/60 active:text-white transition-colors"
|
||
style={{ background: "rgba(44,44,46,0.8)", border: "1px solid rgba(255,255,255,0.1)" }}
|
||
onClick={handleDeleteHeadphone}
|
||
>
|
||
<Minus size={15} />
|
||
</button>
|
||
<button
|
||
className="w-9 h-9 rounded-full flex items-center justify-center text-white/60 active:text-white transition-colors"
|
||
style={{ background: "rgba(44,44,46,0.8)", border: "1px solid rgba(255,255,255,0.1)" }}
|
||
onClick={() => {
|
||
openAddPresetDialog();
|
||
}}
|
||
>
|
||
<Plus size={15} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── Frequency response chart ── */}
|
||
<FreqChart
|
||
bands={bands}
|
||
rawCurve={currentRawCurve}
|
||
selectedBand={selectedBand}
|
||
abMode={abMode}
|
||
onAbToggle={handleAbToggle}
|
||
onCopyAndSwitchTo={handleCopyAndSwitchTo}
|
||
onApplyB={() => void handleApplyB()}
|
||
onSaveB={openSaveBDialog}
|
||
onBandDrag={(idx, patch) => setBands((prev) => prev.map((b, i) => i === idx ? { ...b, ...patch } : b))}
|
||
onBandSelect={setSelectedBand}
|
||
eqUi={eqUi}
|
||
/>
|
||
|
||
{/* ── Band grid: 2×5 below lg, 1×10 on lg+ (typical desktop) ── */}
|
||
<div className="ios-list-group p-3">
|
||
<div className="grid grid-cols-5 gap-1.5 lg:grid-cols-10 lg:gap-1">
|
||
{bands.map((b, i) => (
|
||
<button key={i}
|
||
className={cn(
|
||
"flex flex-col items-center rounded-[10px] transition-all duration-150 active:scale-95 py-2.5 px-1 lg:py-2 lg:px-0.5",
|
||
selectedBand === i ? "text-black" : "text-white/55"
|
||
)}
|
||
style={selectedBand === i ? {
|
||
background: "#00FFF6",
|
||
boxShadow: "0 0 14px rgba(0,255,246,0.45)",
|
||
} : {
|
||
background: "rgba(44,44,46,0.65)",
|
||
}}
|
||
onClick={() => setSelectedBand(i)}>
|
||
<span
|
||
className="notranslate text-[12px] font-bold leading-tight tabular-nums lg:text-[11px]"
|
||
translate="no"
|
||
>
|
||
{freqLabel(b.freq)}
|
||
</span>
|
||
<span className="text-[9px] mt-0.5 opacity-70 leading-tight lg:text-[8px] lg:mt-0">{getFilterShortName(b.type)}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── Band detail card ── */}
|
||
<div className="ios-list-group p-4 space-y-5 relative z-30 overflow-visible">
|
||
{/* Filter type selector */}
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-[14px] text-white/50 font-medium">{peqCardLabels.filters?.label ?? "滤波器"}</span>
|
||
<div
|
||
ref={filterMenuRef}
|
||
className="relative z-40 w-[136px] rounded-[12px] overflow-visible backdrop-blur-md transition-all"
|
||
style={{
|
||
background: "linear-gradient(180deg, rgba(36,38,42,0.92) 0%, rgba(24,26,30,0.92) 100%)",
|
||
border: "1px solid rgba(0,255,246,0.52)",
|
||
boxShadow: "0 0 14px rgba(0,255,246,0.12), inset 0 1px 0 rgba(255,255,255,0.08)",
|
||
}}
|
||
>
|
||
<button
|
||
type="button"
|
||
className="w-full pl-3 pr-8 py-2 text-left text-[13px] font-semibold tracking-wide text-[#E9FBFF] bg-transparent outline-none cursor-pointer active:opacity-80 transition-opacity rounded-[12px]"
|
||
onClick={() => setIsFilterMenuOpen((v) => !v)}
|
||
>
|
||
{normalizeFilterType(band.type)}
|
||
</button>
|
||
<ChevronDown
|
||
size={13}
|
||
className={`absolute right-2.5 top-1/2 -translate-y-1/2 text-[#00FFF6] pointer-events-none transition-transform ${isFilterMenuOpen ? "rotate-180" : ""}`}
|
||
/>
|
||
{isFilterMenuOpen && (
|
||
<div
|
||
className="absolute left-0 right-0 mt-1 z-50 rounded-[10px] overflow-hidden"
|
||
style={{
|
||
background: "rgba(10,12,16,0.98)",
|
||
border: "1px solid rgba(0,255,246,0.35)",
|
||
boxShadow: "0 8px 20px rgba(0,0,0,0.45)",
|
||
}}
|
||
>
|
||
{FILTER_TYPES.map((type) => {
|
||
const active = normalizeFilterType(band.type) === type;
|
||
return (
|
||
<button
|
||
key={type}
|
||
type="button"
|
||
className={`w-full px-3 py-2 text-left text-[13px] transition-colors ${
|
||
active ? "text-black font-semibold" : "text-white/90 hover:bg-white/10"
|
||
}`}
|
||
style={active ? { background: "#00FFF6" } : undefined}
|
||
onClick={() => {
|
||
updateBand(selectedBand, { type });
|
||
setIsFilterMenuOpen(false);
|
||
}}
|
||
>
|
||
{type}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* FREQ */}
|
||
<div>
|
||
<div className="flex items-center justify-between mb-1">
|
||
<span className="text-[13px] text-white/45 font-medium tracking-wider">FREQ</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => openBandParamDialog("freq")}
|
||
className="notranslate text-[13px] font-semibold tabular-nums px-2.5 py-1 rounded-[8px] text-white active:scale-95 transition-transform"
|
||
style={BAND_PARAM_VALUE_BOX_STYLE}
|
||
translate="no"
|
||
>
|
||
{formatBandFreqDisplay(bandSliderPreview?.freq ?? band.freq)}
|
||
</button>
|
||
</div>
|
||
<CyanSlider
|
||
value={Math.log10(bandSliderPreview?.freq ?? band.freq)}
|
||
min={Math.log10(BAND_FREQ_MIN)}
|
||
max={Math.log10(BAND_FREQ_MAX)}
|
||
step={0.005}
|
||
onChange={(v) => {
|
||
const freq = Math.round(Math.pow(10, v));
|
||
setBandSliderPreview((prev) => ({ ...prev, freq }));
|
||
updateBand(selectedBand, { freq });
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
{/* GAIN */}
|
||
<div>
|
||
<div className="flex items-center justify-between mb-1">
|
||
<span className="text-[13px] text-white/45 font-medium tracking-wider">GAIN</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => openBandParamDialog("gain")}
|
||
className="text-[13px] font-semibold px-2.5 py-1 rounded-[8px] text-white active:scale-95 transition-transform"
|
||
style={BAND_PARAM_VALUE_BOX_STYLE}
|
||
>
|
||
{formatBandGainDisplay(bandSliderPreview?.gain ?? band.gain)}
|
||
</button>
|
||
</div>
|
||
<CyanSlider
|
||
value={bandSliderPreview?.gain ?? band.gain}
|
||
min={BAND_GAIN_MIN}
|
||
max={BAND_GAIN_MAX}
|
||
step={0.1}
|
||
onChange={(v) => {
|
||
setBandSliderPreview((prev) => ({ ...prev, gain: v }));
|
||
updateBand(selectedBand, { gain: v });
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
{/* Q 值 */}
|
||
<div>
|
||
<div className="flex items-center justify-between mb-1">
|
||
<span className="text-[13px] text-white/45 font-medium">{peqCardLabels.q ?? "Q值"}</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => openBandParamDialog("q")}
|
||
className="text-[13px] font-semibold px-2.5 py-1 rounded-[8px] text-white active:scale-95 transition-transform"
|
||
style={BAND_PARAM_VALUE_BOX_STYLE}
|
||
>
|
||
{formatBandQDisplay(bandSliderPreview?.q ?? band.q)}
|
||
</button>
|
||
</div>
|
||
<CyanSlider
|
||
value={bandSliderPreview?.q ?? band.q}
|
||
min={BAND_Q_MIN}
|
||
max={BAND_Q_MAX}
|
||
step={0.01}
|
||
onChange={(v) => {
|
||
setBandSliderPreview((prev) => ({ ...prev, q: v }));
|
||
updateBand(selectedBand, { q: v });
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── Total gain card ── */}
|
||
<div className="ios-list-group p-4 relative z-10">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<div className="flex items-baseline gap-1">
|
||
<span className="text-[13px] text-white/45">{peqCardLabels.preamp}</span>
|
||
<span className="text-[28px] font-bold ml-2" style={{ color: "#00FFF6" }}>
|
||
{preampValue >= 0 ? `+${preampValue.toFixed(1)}` : preampValue.toFixed(1)}
|
||
</span>
|
||
<span className="text-[15px] text-white/45 ml-0.5">dB</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-[12px] text-white/40 tracking-wider">AUTO</span>
|
||
<IOSToggle
|
||
checked={autoPreOn}
|
||
onChange={(v) => updateCurrentPeqMeta({ autoPre: v ? 1 : 0 })}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<CyanSlider
|
||
value={preampValue + 15}
|
||
min={0}
|
||
max={30}
|
||
step={0.1}
|
||
disabled={autoPreOn}
|
||
onChange={(v) => updateCurrentPeqMeta({ preamp: Number((v - 15).toFixed(1)) })}
|
||
/>
|
||
</div>
|
||
</FeatureGate>
|
||
</div>
|
||
|
||
{bandParamDialog && bandParamDialogMeta && (
|
||
<div
|
||
className="fixed inset-0 z-[120] flex items-center justify-center bg-black/65 px-4"
|
||
onClick={closeBandParamDialog}
|
||
>
|
||
<div
|
||
className="w-full max-w-[420px] rounded-[14px] p-5"
|
||
style={{
|
||
background: "linear-gradient(180deg, rgba(34,36,40,0.98) 0%, rgba(24,26,30,0.98) 100%)",
|
||
border: "1px solid rgba(255,255,255,0.12)",
|
||
boxShadow: "0 18px 48px rgba(0,0,0,0.55)",
|
||
}}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<div className="flex items-center justify-between mb-2">
|
||
<h3 className="text-[18px] font-semibold leading-tight text-white/90">{bandParamDialogMeta.title}</h3>
|
||
<button
|
||
type="button"
|
||
className="rounded-full p-1.5 text-white/45 transition-colors hover:bg-white/10 hover:text-white/80"
|
||
onClick={closeBandParamDialog}
|
||
aria-label={eqUi.closeDrawer}
|
||
>
|
||
<X size={20} />
|
||
</button>
|
||
</div>
|
||
<p className="mb-4 text-[13px] leading-relaxed text-white/45">{bandParamDialogMeta.hint}</p>
|
||
<input
|
||
value={bandParamInput}
|
||
onChange={(e) => setBandParamInput(e.target.value)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter") {
|
||
e.preventDefault();
|
||
applyBandParamDialog();
|
||
}
|
||
}}
|
||
inputMode={bandParamDialogMeta.inputMode}
|
||
placeholder={bandParamDialogMeta.placeholder}
|
||
className="h-11 w-full rounded-[10px] border border-white/12 bg-[#15171b] px-3 text-[15px] text-white/90 outline-none placeholder:text-white/30 focus:border-[#00FFF6]/40"
|
||
autoFocus
|
||
/>
|
||
<div className="mt-6 flex items-center justify-center gap-4 sm:gap-8">
|
||
<button
|
||
type="button"
|
||
className="min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-medium text-white/85 transition-colors bg-[#3f4349] hover:bg-[#4a4f56] active:scale-[0.98]"
|
||
onClick={closeBandParamDialog}
|
||
>
|
||
{eqUi.cancel}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-semibold text-black transition-all bg-[#00FFF6] hover:brightness-95 active:scale-[0.98]"
|
||
onClick={applyBandParamDialog}
|
||
>
|
||
{eqUi.confirmButton ?? eqUi.save}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{isSaveBDialogOpen && (
|
||
<div className="fixed inset-0 z-[120] flex items-center justify-center bg-black/65 px-4">
|
||
<div
|
||
className="w-full max-w-[420px] rounded-[14px] p-5"
|
||
style={{
|
||
background: "linear-gradient(180deg, rgba(34,36,40,0.98) 0%, rgba(24,26,30,0.98) 100%)",
|
||
border: "1px solid rgba(255,255,255,0.12)",
|
||
boxShadow: "0 18px 48px rgba(0,0,0,0.55)",
|
||
}}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h3 className="text-[18px] font-semibold leading-tight text-white/90">{eqUi.saveBTitle}</h3>
|
||
<button
|
||
type="button"
|
||
className="rounded-full p-1.5 text-white/45 transition-colors hover:bg-white/10 hover:text-white/80"
|
||
onClick={() => setIsSaveBDialogOpen(false)}
|
||
aria-label={eqUi.closeDrawer}
|
||
>
|
||
<X size={20} />
|
||
</button>
|
||
</div>
|
||
|
||
<input
|
||
value={saveBPresetName}
|
||
onChange={(e) => setSaveBPresetName(e.target.value)}
|
||
className="h-11 w-full rounded-[10px] border border-white/12 bg-[#15171b] px-3 text-[15px] text-white/90 outline-none placeholder:text-white/30 focus:border-white/15"
|
||
autoFocus
|
||
/>
|
||
|
||
<div className="mt-6 flex items-center justify-center gap-4 sm:gap-8">
|
||
<button
|
||
type="button"
|
||
className="min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-medium text-white/85 transition-colors bg-[#3f4349] hover:bg-[#4a4f56] active:scale-[0.98]"
|
||
onClick={() => setIsSaveBDialogOpen(false)}
|
||
>
|
||
{eqUi.cancel}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-semibold text-black transition-all bg-[#00FFF6] hover:brightness-95 active:scale-[0.98]"
|
||
onClick={() => void handleSaveBAsPreset()}
|
||
>
|
||
{eqUi.save}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{isAddPresetDialogOpen && (
|
||
<div className="fixed inset-0 z-[120] flex items-center justify-center bg-black/65 px-4">
|
||
<div
|
||
className="w-full max-w-[420px] rounded-[14px] p-5"
|
||
style={{
|
||
background: "linear-gradient(180deg, rgba(34,36,40,0.98) 0%, rgba(24,26,30,0.98) 100%)",
|
||
border: "1px solid rgba(255,255,255,0.12)",
|
||
boxShadow: "0 18px 48px rgba(0,0,0,0.55)",
|
||
}}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h3 className="text-[18px] font-semibold leading-tight text-white/90">{eqUi.addPresetTitle}</h3>
|
||
<button
|
||
type="button"
|
||
className="rounded-full p-1.5 text-white/45 transition-colors hover:bg-white/10 hover:text-white/80"
|
||
onClick={() => setIsAddPresetDialogOpen(false)}
|
||
aria-label={eqUi.closeDrawer}
|
||
>
|
||
<X size={20} />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="space-y-3">
|
||
<label
|
||
className={cn(
|
||
"flex cursor-pointer items-center gap-3 rounded-[12px] border border-white/10 p-3 transition-colors",
|
||
addPresetMode === "copy" ? "bg-white/[0.06]" : "bg-white/[0.02] hover:bg-white/[0.04]",
|
||
)}
|
||
>
|
||
<input
|
||
type="radio"
|
||
name="add-preset-mode"
|
||
checked={addPresetMode === "copy"}
|
||
onChange={() => setAddPresetMode("copy")}
|
||
className="h-4 w-4 shrink-0 accent-[#00FFF6]"
|
||
/>
|
||
<input
|
||
value={copyPresetName}
|
||
onChange={(e) => setCopyPresetName(e.target.value)}
|
||
onClick={(e) => e.stopPropagation()}
|
||
className="h-10 min-w-0 flex-1 rounded-[10px] border border-white/12 bg-[#15171b] px-3 text-[15px] text-white/90 outline-none ring-0 ring-offset-0 placeholder:text-white/30 focus:border-white/15 focus:ring-0 focus-visible:ring-0"
|
||
/>
|
||
</label>
|
||
|
||
<label
|
||
className={cn(
|
||
"flex cursor-pointer items-center gap-3 rounded-[12px] border border-white/10 p-3 transition-colors",
|
||
addPresetMode === "flat" ? "bg-white/[0.06]" : "bg-white/[0.02] hover:bg-white/[0.04]",
|
||
)}
|
||
>
|
||
<input
|
||
type="radio"
|
||
name="add-preset-mode"
|
||
checked={addPresetMode === "flat"}
|
||
onChange={() => setAddPresetMode("flat")}
|
||
className="h-4 w-4 shrink-0 accent-[#00FFF6]"
|
||
/>
|
||
<input
|
||
value={flatPresetName}
|
||
onChange={(e) => setFlatPresetName(e.target.value)}
|
||
onClick={(e) => e.stopPropagation()}
|
||
className="h-10 min-w-0 flex-1 rounded-[10px] border border-white/12 bg-[#15171b] px-3 text-[15px] text-white/90 outline-none ring-0 ring-offset-0 placeholder:text-white/30 focus:border-white/15 focus:ring-0 focus-visible:ring-0"
|
||
/>
|
||
</label>
|
||
</div>
|
||
|
||
<div className="mt-6 flex items-center justify-center gap-4 sm:gap-8">
|
||
<button
|
||
type="button"
|
||
className="min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-medium text-white/85 transition-colors bg-[#3f4349] hover:bg-[#4a4f56] active:scale-[0.98]"
|
||
onClick={() => setIsAddPresetDialogOpen(false)}
|
||
>
|
||
{eqUi.cancel}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-semibold text-black transition-all bg-[#00FFF6] hover:brightness-95 active:scale-[0.98]"
|
||
onClick={handleSaveAddPreset}
|
||
>
|
||
{eqUi.save}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{isBatchEditDialogOpen && (
|
||
<div className="fixed inset-0 z-[121] flex items-center justify-center bg-black/65 px-4">
|
||
<div
|
||
className="w-full max-w-[760px] rounded-[14px] p-5"
|
||
style={{
|
||
background: "linear-gradient(180deg, rgba(34,36,40,0.98) 0%, rgba(24,26,30,0.98) 100%)",
|
||
border: "1px solid rgba(255,255,255,0.12)",
|
||
boxShadow: "0 18px 48px rgba(0,0,0,0.55)",
|
||
}}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h3 className="text-[28px] text-white/90 font-semibold">{eqUi.batchEditTitle}</h3>
|
||
<button
|
||
type="button"
|
||
className="text-white/45 hover:text-white/75 transition-colors"
|
||
onClick={() => setIsBatchEditDialogOpen(false)}
|
||
>
|
||
<X size={20} />
|
||
</button>
|
||
</div>
|
||
<p className="mb-3 text-[13px] text-white/55">
|
||
{eqUi.batchEditHint}
|
||
</p>
|
||
<textarea
|
||
value={batchEditText}
|
||
onChange={(e) => setBatchEditText(e.target.value)}
|
||
spellCheck={false}
|
||
className="h-[360px] w-full resize-none overflow-auto rounded-[10px] border border-white/12 bg-[#15171b] p-3 font-mono text-[13px] leading-6 text-white/90 outline-none focus:border-[#00FFF6]/55"
|
||
/>
|
||
<div className="mt-5 flex items-center justify-center gap-16">
|
||
<button
|
||
type="button"
|
||
className="px-5 py-2 rounded-full text-[24px] text-white/80 bg-[#3f4349] hover:bg-[#4a4f56] transition-colors"
|
||
onClick={() => setIsBatchEditDialogOpen(false)}
|
||
>
|
||
{eqUi.cancel}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="px-5 py-2 rounded-full text-[24px] text-black bg-[#00FFF6] hover:brightness-95 transition-all"
|
||
onClick={handleSaveBatchEdit}
|
||
>
|
||
{eqUi.save}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{isBrandDrawerOpen && (
|
||
<div className="fixed inset-0 z-[110] flex flex-col justify-end">
|
||
<button
|
||
type="button"
|
||
className="absolute inset-0 bg-black/55"
|
||
aria-label={eqUi.closeDrawer}
|
||
onClick={() => setIsBrandDrawerOpen(false)}
|
||
/>
|
||
<div
|
||
className="relative z-10 flex h-[58dvh] flex-shrink-0 flex-col overflow-hidden rounded-t-[18px] bg-white shadow-[0_-8px_32px_rgba(0,0,0,0.35)]"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<div className="flex shrink-0 items-center justify-center pt-2 pb-1">
|
||
<div className="h-1 w-10 rounded-full bg-black/15" />
|
||
</div>
|
||
<div className="flex shrink-0 items-stretch rounded-t-[12px] bg-[#2c2c2e] px-1 pt-1">
|
||
{(["brands", "models", "target"] as const).map((tab) => {
|
||
const active = brandDrawerTab === tab;
|
||
const label =
|
||
tab === "brands" ? eqUi.tabBrands : tab === "models" ? eqUi.tabModels : eqUi.tabTarget;
|
||
return (
|
||
<button
|
||
key={tab}
|
||
type="button"
|
||
className={`flex-1 py-2.5 text-[14px] font-medium transition-colors rounded-t-[10px] ${
|
||
active ? "bg-[#1c1c1e] text-white" : "text-white/55 hover:text-white/80"
|
||
}`}
|
||
onClick={() => setBrandDrawerTab(tab)}
|
||
>
|
||
{label}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
<div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-white">
|
||
{brandDrawerTab === "brands" && (
|
||
<div className="flex min-h-0 flex-1 flex-col overflow-hidden">
|
||
<div className="shrink-0 border-b border-black/8 px-3 py-2.5">
|
||
<div className="flex items-center gap-2 rounded-[10px] border border-black/12 bg-[#f5f5f7] px-3 py-2">
|
||
<Search size={18} className="shrink-0 text-black/35" />
|
||
<input
|
||
type="search"
|
||
value={brandSearchQuery}
|
||
onChange={(e) => setBrandSearchQuery(e.target.value)}
|
||
placeholder={eqUi.searchPlaceholder}
|
||
className="min-w-0 flex-1 bg-transparent text-[15px] text-black/80 outline-none placeholder:text-black/35"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain touch-pan-y">
|
||
{brandSearchQuery.trim() && catalogSearchLoading && (
|
||
<div className="py-10 text-center text-[14px] text-black/45">{eqUi.searching}</div>
|
||
)}
|
||
{!!brandSearchQuery.trim() && !catalogSearchLoading && catalogSearchError && (
|
||
<div className="px-4 py-8 text-center text-[14px] text-red-600/90">{catalogSearchError}</div>
|
||
)}
|
||
{!!brandSearchQuery.trim() &&
|
||
!catalogSearchLoading &&
|
||
!catalogSearchError &&
|
||
catalogSearchResults.length === 0 && (
|
||
<div className="py-10 text-center text-[14px] text-black/45">{eqUi.noSearchResults}</div>
|
||
)}
|
||
{!!brandSearchQuery.trim() &&
|
||
!catalogSearchLoading &&
|
||
!catalogSearchError &&
|
||
catalogSearchResults.map((item, idx) => (
|
||
<button
|
||
key={`${item.brandName}-${item.modelName}-${idx}`}
|
||
type="button"
|
||
className="w-full border-b border-black/[0.06] px-4 py-3.5 text-left active:bg-black/[0.04] transition-colors"
|
||
onClick={() => {
|
||
setSelectedCatalogBrand(item.brandName);
|
||
setSelectedCatalogModelFromSearch(item.modelName);
|
||
setSelectedCatalogModelName(item.modelName);
|
||
setSelectedCatalogModelForm(item.form);
|
||
setSelectedCatalogTarget("");
|
||
setCatalogModels([{ id: 0, name: item.modelName, ...(item.form ? { form: item.form } : {}) }]);
|
||
setCatalogModelsLoading(false);
|
||
setCatalogModelsError(null);
|
||
setBrandDrawerTab("target");
|
||
}}
|
||
>
|
||
<div className="text-[15px] text-black/85 font-medium">{item.modelName}</div>
|
||
<div className="mt-0.5 text-[12px] text-black/50">{item.brandName}</div>
|
||
</button>
|
||
))}
|
||
{!brandSearchQuery.trim() && catalogBrandsLoading && (
|
||
<div className="py-10 text-center text-[14px] text-black/45">{eqUi.loading}</div>
|
||
)}
|
||
{!brandSearchQuery.trim() && !catalogBrandsLoading && catalogBrandsError && (
|
||
<div className="px-4 py-8 text-center text-[14px] text-red-600/90">{catalogBrandsError}</div>
|
||
)}
|
||
{!brandSearchQuery.trim() && !catalogBrandsLoading && !catalogBrandsError && filteredCatalogBrands.length === 0 && (
|
||
<div className="py-10 text-center text-[14px] text-black/45">{eqUi.noBrandMatch}</div>
|
||
)}
|
||
{!brandSearchQuery.trim() &&
|
||
!catalogBrandsLoading &&
|
||
!catalogBrandsError &&
|
||
filteredCatalogBrands.map((b) => (
|
||
<button
|
||
key={b.id}
|
||
type="button"
|
||
className="w-full border-b border-black/[0.06] px-4 py-3.5 text-left text-[16px] text-black/85 active:bg-black/[0.04] transition-colors"
|
||
onClick={() => {
|
||
setSelectedCatalogBrand(b.name);
|
||
setSelectedCatalogModelFromSearch("");
|
||
setSelectedCatalogModelName("");
|
||
setSelectedCatalogModelForm(undefined);
|
||
setSelectedCatalogTarget("");
|
||
setBrandDrawerTab("models");
|
||
void loadCatalogModels(b.name);
|
||
}}
|
||
>
|
||
{b.name}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
{brandDrawerTab === "models" && (
|
||
<div className="flex min-h-0 flex-1 flex-col overflow-hidden">
|
||
<div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain touch-pan-y">
|
||
<div className="sticky top-0 z-10 border-b border-black/8 bg-white px-4 py-2.5 text-[13px] text-black/55">
|
||
{eqUi.brandLabel}<span className="font-semibold text-black/80">{selectedCatalogBrand || "—"}</span>
|
||
{selectedCatalogModelFromSearch && (
|
||
<span className="ml-2 text-black/45">
|
||
{eqUi.modelFromSearchLabel}
|
||
{selectedCatalogModelFromSearch}
|
||
</span>
|
||
)}
|
||
</div>
|
||
{!selectedCatalogBrand && (
|
||
<div className="py-10 text-center text-[14px] text-black/45">{eqUi.selectBrandFirst}</div>
|
||
)}
|
||
{!!selectedCatalogBrand && catalogModelsLoading && (
|
||
<div className="py-10 text-center text-[14px] text-black/45">{eqUi.loading}</div>
|
||
)}
|
||
{!!selectedCatalogBrand && !catalogModelsLoading && catalogModelsError && (
|
||
<div className="px-4 py-8 text-center text-[14px] text-red-600/90">{catalogModelsError}</div>
|
||
)}
|
||
{!!selectedCatalogBrand && !catalogModelsLoading && !catalogModelsError && catalogModels.length === 0 && (
|
||
<div className="py-10 text-center text-[14px] text-black/45">{eqUi.noModelsForBrand}</div>
|
||
)}
|
||
{!!selectedCatalogBrand &&
|
||
!catalogModelsLoading &&
|
||
!catalogModelsError &&
|
||
catalogModels.map((m) => (
|
||
<button
|
||
key={`${m.id}-${m.name}`}
|
||
type="button"
|
||
className="w-full border-b border-black/[0.06] px-4 py-3.5 text-left text-[16px] text-black/85 active:bg-black/[0.04] transition-colors"
|
||
onClick={() => {
|
||
setSelectedCatalogModelName(m.name);
|
||
setSelectedCatalogModelForm(m.form);
|
||
setSelectedCatalogTarget("");
|
||
setBrandDrawerTab("target");
|
||
}}
|
||
>
|
||
<div>{m.name}</div>
|
||
{m.form && <div className="mt-0.5 text-[12px] text-black/50">{m.form}</div>}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
{brandDrawerTab === "target" && (
|
||
<div className="flex min-h-0 flex-1 flex-col overflow-hidden">
|
||
<div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain touch-pan-y">
|
||
<div className="sticky top-0 z-10 border-b border-black/8 bg-white px-4 py-2.5 text-[13px] text-black/55 space-y-0.5">
|
||
<div>
|
||
{eqUi.targetBrand}
|
||
<span className="font-semibold text-black/80">{selectedCatalogBrand || "—"}</span>
|
||
</div>
|
||
<div>
|
||
{eqUi.targetModel}
|
||
<span className="font-semibold text-black/80">{selectedCatalogModelName || "—"}</span>
|
||
</div>
|
||
<div>
|
||
{eqUi.targetForm}
|
||
<span className="font-semibold text-black/80">{selectedCatalogModelForm || eqUi.formAll}</span>
|
||
</div>
|
||
</div>
|
||
<div className="px-5 pt-4 pb-3">
|
||
<button
|
||
type="button"
|
||
disabled={!selectedCatalogTarget || isConfirmingTarget}
|
||
className="w-full h-10 rounded-full text-[24px] leading-none transition-all disabled:cursor-not-allowed flex items-center justify-center gap-3"
|
||
style={{
|
||
background: selectedCatalogTarget && !isConfirmingTarget
|
||
? "linear-gradient(180deg, #6a6a6d 0%, #565659 100%)"
|
||
: "linear-gradient(180deg, #8b8b8f 0%, #78787c 100%)",
|
||
color: selectedCatalogTarget && !isConfirmingTarget ? "#00FFF6" : "rgba(255,255,255,0.55)",
|
||
boxShadow: selectedCatalogTarget && !isConfirmingTarget
|
||
? "inset 0 1px 0 rgba(255,255,255,0.15)"
|
||
: "inset 0 1px 0 rgba(255,255,255,0.08)",
|
||
opacity: selectedCatalogTarget && !isConfirmingTarget ? 1 : 0.9,
|
||
}}
|
||
onClick={() => {
|
||
const brand = selectedCatalogBrand;
|
||
const name = selectedCatalogModelName;
|
||
const target = selectedCatalogTarget;
|
||
const form = selectedCatalogModelForm;
|
||
void (async () => {
|
||
setIsConfirmingTarget(true);
|
||
try {
|
||
const decoded = await fetchLuxsinAudioCurve(brand, name, target);
|
||
let parsed: unknown = decoded;
|
||
try {
|
||
parsed = JSON.parse(decoded);
|
||
} catch {
|
||
// Keep raw decoded text when payload isn't JSON.
|
||
}
|
||
|
||
const parsedObj = parsed && typeof parsed === "object" ? (parsed as Record<string, unknown>) : null;
|
||
const parametricEqRaw = parsedObj?.parametric_eq;
|
||
if (!parametricEqRaw || typeof parametricEqRaw !== "object") return;
|
||
|
||
const parametricEq = parametricEqRaw as {
|
||
filters?: Array<{ type: string | number; fc: number; gain: number; q: number }>;
|
||
preamp?: number;
|
||
};
|
||
|
||
const filters = (Array.isArray(parametricEq.filters) ? parametricEq.filters : [])
|
||
.slice(0, 10)
|
||
.map((item) => ({
|
||
type: getFilterType(item.type),
|
||
fc: Number(Number(item.fc).toFixed(2)),
|
||
gain: Number(Number(item.gain).toFixed(2)),
|
||
q: Number(Number(item.q).toFixed(2)),
|
||
}));
|
||
|
||
const postPeq: PeqChangePayload = {
|
||
peqChange: {
|
||
name: `${brand} ${name}`,
|
||
brand,
|
||
model: name,
|
||
target,
|
||
...(form ? { form } : {}),
|
||
filters,
|
||
preamp: Number(Number(parametricEq.preamp ?? 0).toFixed(2)),
|
||
autoPre: 0,
|
||
canDel: 1,
|
||
},
|
||
};
|
||
|
||
await upgradePeqChange(postPeq);
|
||
const createdName = postPeq.peqChange.name;
|
||
if (api && !isDemoMode) {
|
||
const latest = await api.getPeqState();
|
||
applyPeqStateToUI(latest as { peq?: Array<{ name: string; filters?: any[] | string }>; peqSelect?: number });
|
||
const createdIndex = latest.peq?.findIndex((item) => item.name === createdName) ?? -1;
|
||
if (createdIndex >= 0) {
|
||
setHeadphoneIdx(createdIndex);
|
||
updateSetting({ peqSelect: createdIndex });
|
||
}
|
||
} else {
|
||
let nextIndex = 0;
|
||
setPeqItems((prev) => [
|
||
...prev,
|
||
{
|
||
name: createdName,
|
||
brand,
|
||
model: name,
|
||
target,
|
||
...(form ? { form } : {}),
|
||
filters: postPeq.peqChange.filters,
|
||
preamp: postPeq.peqChange.preamp ?? 0,
|
||
autoPre: postPeq.peqChange.autoPre ?? 0,
|
||
canDel: postPeq.peqChange.canDel ?? 1,
|
||
},
|
||
]);
|
||
setHeadphoneModels((prev) => {
|
||
nextIndex = prev.length;
|
||
return [...prev, createdName];
|
||
});
|
||
setHeadphoneIdx(nextIndex);
|
||
}
|
||
|
||
setIsBrandDrawerOpen(false);
|
||
toast.success(eqUi.toastNewEqOk);
|
||
} catch {
|
||
toast.error(eqUi.toastCurveFail);
|
||
} finally {
|
||
setIsConfirmingTarget(false);
|
||
}
|
||
})();
|
||
}}
|
||
>
|
||
{isConfirmingTarget && (
|
||
<span
|
||
className="inline-block w-4 h-4 rounded-full border-2 border-white/40 border-t-[#00FFF6] animate-spin"
|
||
aria-hidden="true"
|
||
/>
|
||
)}
|
||
{isConfirmingTarget ? eqUi.confirmLoading : eqUi.confirmButton}
|
||
</button>
|
||
</div>
|
||
{!selectedCatalogModelName && (
|
||
<div className="py-10 text-center text-[14px] text-black/45">{eqUi.selectModelFirst}</div>
|
||
)}
|
||
{!!selectedCatalogModelName && availableCatalogTargets.length === 0 && (
|
||
<div className="py-10 text-center text-[14px] text-black/45">{eqUi.noTargets}</div>
|
||
)}
|
||
{!!selectedCatalogModelName &&
|
||
availableCatalogTargets.map((target) => {
|
||
const active = selectedCatalogTarget === target.name;
|
||
return (
|
||
<button
|
||
key={target.name}
|
||
type="button"
|
||
className="w-full border-b border-black/[0.06] px-4 py-3 text-left active:bg-black/[0.04] transition-colors"
|
||
style={active ? { background: "rgba(0,255,246,0.14)" } : undefined}
|
||
onClick={() => {
|
||
setSelectedCatalogTarget(target.name);
|
||
toast.success(eqInterp(eqUi.toastTargetSelected, { name: target.name }));
|
||
}}
|
||
>
|
||
<div className="text-[15px] text-black/85 font-medium">{target.name}</div>
|
||
<div className="mt-1 text-[12px] text-black/55">
|
||
{eqInterp(eqUi.bassBoost, {
|
||
fc: String(target.bassBoost.fc),
|
||
q: String(target.bassBoost.q),
|
||
gain: String(target.bassBoost.gain),
|
||
})}
|
||
</div>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<BottomNav />
|
||
</div>
|
||
);
|
||
}
|