eafonyang
346 lines
12 KiB
TypeScript
346 lines
12 KiB
TypeScript
import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
|
|
import {
|
|
DeviceState,
|
|
LuxsinAPI,
|
|
MOCK_DEVICE_STATE,
|
|
MOCK_PEQ_STATE,
|
|
PeqApplyPayload,
|
|
PeqChangePayload,
|
|
PeqFilter,
|
|
PeqState,
|
|
} from "@/lib/luxsinApi";
|
|
import { getDeviceIpFromUrl, resolveInitialDeviceIp } from "@/lib/deviceIp";
|
|
import { isLikelyNetworkFetchError } from "@/lib/networkError";
|
|
import {
|
|
DEFAULT_DEVICE_LANGUAGE,
|
|
getUiLanguageOverride,
|
|
isDeviceLanguage,
|
|
setUiLanguageOverride,
|
|
} from "@/locales/resolveLocale";
|
|
|
|
interface DeviceContextType {
|
|
ip: string;
|
|
setIp: (ip: string) => void;
|
|
ipMissing: boolean;
|
|
isConnected: boolean;
|
|
isConnecting: boolean;
|
|
isDemoMode: boolean;
|
|
setDemoMode: (demo: boolean) => void;
|
|
deviceState: DeviceState | null;
|
|
/**
|
|
* 生效的界面显示语言索引（0-9）。前端语言覆盖（非设备语言 3-9）优先，
|
|
* 否则跟随设备真实语言（0/1/2）。所有界面文案都应基于此值解析语言包。
|
|
*/
|
|
effectiveLanguage: number;
|
|
/**
|
|
* 设置界面语言：选择设备语言（0/1/2）会下发设备并清除前端覆盖；
|
|
* 选择其他语言（3-9）仅做前端切换并持久化，绝不下发设备。
|
|
*/
|
|
setUiLanguage: (index: number) => Promise<void>;
|
|
peqState: PeqState | null;
|
|
lastUpdated: Date | null;
|
|
error: string | null;
|
|
connect: (forceDemo?: boolean, connectIp?: string) => Promise<void>;
|
|
disconnect: () => void;
|
|
refresh: () => Promise<void>;
|
|
api: LuxsinAPI | null;
|
|
updateSetting: (params: Record<string, string | number>) => Promise<void>;
|
|
updatePeq: (filters: PeqFilter[]) => Promise<void>;
|
|
upgradePeqChange: (payload: PeqChangePayload) => Promise<void>;
|
|
upgradePeqApply: (payload: PeqApplyPayload) => Promise<void>;
|
|
/** Align global peqState with device syncPeq (e.g. after EQ catalog add/delete). */
|
|
syncPeqCatalog: (state: PeqState) => void;
|
|
// Optimistic state updaters
|
|
setVolume: (v: number) => void;
|
|
setInput: (v: number) => void;
|
|
setOutput: (v: number) => void;
|
|
setBalance: (v: number) => void;
|
|
}
|
|
|
|
const DeviceContext = createContext<DeviceContextType | null>(null);
|
|
|
|
export function DeviceProvider({ children }: { children: React.ReactNode }) {
|
|
const [ip, setIp] = useState(resolveInitialDeviceIp);
|
|
const [ipMissing, setIpMissing] = useState(() => !resolveInitialDeviceIp().trim());
|
|
const [isConnected, setIsConnected] = useState(false);
|
|
const [isConnecting, setIsConnecting] = useState(false);
|
|
const [isDemoMode, setDemoMode] = useState(false);
|
|
const isDemoModeRef = useRef(false);
|
|
const [deviceState, setDeviceState] = useState<DeviceState | null>(null);
|
|
const [peqState, setPeqState] = useState<PeqState | null>(null);
|
|
const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [api, setApi] = useState<LuxsinAPI | null>(null);
|
|
// 前端语言覆盖（仅非设备语言 3-9），初始值从 localStorage 恢复；null 表示跟随设备语言。
|
|
const [uiLanguage, setUiLanguageState] = useState<number | null>(() => getUiLanguageOverride());
|
|
// 记录上一次设备真实语言，用于检测设备侧语言变化（如轮询/刷新）后清除前端覆盖。
|
|
const prevDeviceLanguageRef = useRef<number | undefined>(undefined);
|
|
const lastMsgCountRef = useRef<number>(-1);
|
|
const pollIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
|
const autoConnectStartedRef = useRef(false);
|
|
|
|
const setDeviceIp = useCallback((newIp: string) => {
|
|
setIp(newIp.trim());
|
|
}, []);
|
|
|
|
const fetchState = useCallback(async (apiInstance: LuxsinAPI) => {
|
|
const state = await apiInstance.getDeviceState();
|
|
setDeviceState(state);
|
|
setLastUpdated(new Date());
|
|
lastMsgCountRef.current = state.msgCount;
|
|
}, []);
|
|
|
|
const fetchPeqState = useCallback(async (apiInstance: LuxsinAPI) => {
|
|
const peq = await apiInstance.getPeqState();
|
|
setPeqState(peq);
|
|
}, []);
|
|
|
|
const syncPeqCatalog = useCallback((state: PeqState) => {
|
|
setPeqState(state);
|
|
}, []);
|
|
|
|
const connect = useCallback(async (forceDemo?: boolean, connectIp?: string) => {
|
|
const useDemo = forceDemo !== undefined ? forceDemo : isDemoMode;
|
|
const targetIp = (connectIp ?? ip).trim();
|
|
if (!useDemo && !targetIp) {
|
|
setIpMissing(true);
|
|
setError(null);
|
|
setIsConnecting(false);
|
|
return;
|
|
}
|
|
setIpMissing(false);
|
|
// Demo mode — use mock data immediately, no network call
|
|
if (useDemo) {
|
|
setIsConnecting(true);
|
|
setError(null);
|
|
await new Promise(r => setTimeout(r, 400)); // brief loading feel
|
|
setDeviceState({ ...MOCK_DEVICE_STATE });
|
|
setPeqState({ ...MOCK_PEQ_STATE });
|
|
setIsConnected(true);
|
|
setLastUpdated(new Date());
|
|
setIsConnecting(false);
|
|
return;
|
|
}
|
|
|
|
setIsConnecting(true);
|
|
setError(null);
|
|
try {
|
|
const newApi = new LuxsinAPI(targetIp);
|
|
// Fetch device info from http://{ip}/dev/info.cgi?action=syncData
|
|
// The response is encoded with custom base64, needs decoding
|
|
const state = await newApi.getDeviceState();
|
|
setDeviceState(state);
|
|
setLastUpdated(new Date());
|
|
const peq = await newApi.getPeqState().catch(() => MOCK_PEQ_STATE);
|
|
setPeqState(peq);
|
|
setApi(newApi);
|
|
setIsConnected(true);
|
|
} catch (e) {
|
|
setError(
|
|
isLikelyNetworkFetchError(e)
|
|
? null
|
|
: `Connection failed: ${e instanceof Error ? e.message : String(e)}`,
|
|
);
|
|
setIsConnected(false);
|
|
} finally {
|
|
setIsConnecting(false);
|
|
}
|
|
}, [ip, isDemoMode]);
|
|
|
|
const disconnect = useCallback(() => {
|
|
if (pollIntervalRef.current) {
|
|
clearInterval(pollIntervalRef.current);
|
|
pollIntervalRef.current = null;
|
|
}
|
|
setIsConnected(false);
|
|
setApi(null);
|
|
setDeviceState(null);
|
|
setPeqState(null);
|
|
lastMsgCountRef.current = -1;
|
|
}, []);
|
|
|
|
const refresh = useCallback(async () => {
|
|
if (isDemoMode) {
|
|
setDeviceState({ ...MOCK_DEVICE_STATE });
|
|
setLastUpdated(new Date());
|
|
return;
|
|
}
|
|
// If api is null but connected, recreate it with current IP
|
|
let apiInstance = api;
|
|
if (!apiInstance && isConnected) {
|
|
apiInstance = new LuxsinAPI(ip);
|
|
setApi(apiInstance);
|
|
}
|
|
if (!apiInstance) return;
|
|
try {
|
|
await fetchState(apiInstance);
|
|
await fetchPeqState(apiInstance).catch(() => undefined);
|
|
} catch (e) {
|
|
setError(
|
|
isLikelyNetworkFetchError(e)
|
|
? null
|
|
: `Refresh failed: ${e instanceof Error ? e.message : String(e)}`,
|
|
);
|
|
}
|
|
}, [api, isConnected, ip, isDemoMode, fetchState, fetchPeqState]);
|
|
|
|
const updateSetting = useCallback(async (params: Record<string, string | number>) => {
|
|
if (isDemoMode) {
|
|
// Optimistic update for demo mode
|
|
setDeviceState(prev => prev ? { ...prev, ...params } : prev);
|
|
return;
|
|
}
|
|
if (!api) return;
|
|
await api.setSetting(params);
|
|
// Optimistic update
|
|
setDeviceState(prev => prev ? { ...prev, ...params } : prev);
|
|
}, [api, isDemoMode]);
|
|
|
|
// 生效的界面语言：前端覆盖优先，其次设备真实语言，最后默认。
|
|
const effectiveLanguage = uiLanguage ?? deviceState?.language ?? DEFAULT_DEVICE_LANGUAGE;
|
|
|
|
const setUiLanguage = useCallback(async (index: number) => {
|
|
if (isDeviceLanguage(index)) {
|
|
// 设备支持的语言：清除前端覆盖并下发设备（沿用既有 setting 流程）。
|
|
setUiLanguageOverride(null);
|
|
setUiLanguageState(null);
|
|
await updateSetting({ language: index });
|
|
return;
|
|
}
|
|
// 非设备语言（3-9）：仅前端切换 + 持久化，不下发设备。
|
|
setUiLanguageOverride(index);
|
|
setUiLanguageState(getUiLanguageOverride());
|
|
}, [updateSetting]);
|
|
|
|
// 设备侧语言发生变化（用户在设备上切换语言，经 msgCount 轮询/刷新同步下来）时，
|
|
// 清除前端语言覆盖，让 controller 跟随设备语言。
|
|
// 说明：仅在设备语言「值发生变化」时触发；首次观测（prev 为 undefined）不清除，
|
|
// 以保留跨会话持久化的前端覆盖（如上次选择了德语，刷新后仍应为德语）。
|
|
useEffect(() => {
|
|
const devLang = deviceState?.language;
|
|
if (devLang === undefined) return;
|
|
const prev = prevDeviceLanguageRef.current;
|
|
prevDeviceLanguageRef.current = devLang;
|
|
if (prev !== undefined && prev !== devLang) {
|
|
setUiLanguageOverride(null);
|
|
setUiLanguageState(null);
|
|
}
|
|
}, [deviceState?.language]);
|
|
|
|
const updatePeq = useCallback(async (filters: PeqFilter[]) => {
|
|
if (isDemoMode) {
|
|
setPeqState({ filters });
|
|
return;
|
|
}
|
|
if (!api) return;
|
|
await api.setPeqFilters(filters);
|
|
setPeqState({ filters });
|
|
}, [api, isDemoMode]);
|
|
|
|
const applyPeqFiltersToState = useCallback((filters: PeqFilter[]) => {
|
|
setPeqState((prev) => (prev ? { ...prev, filters } : prev));
|
|
}, []);
|
|
|
|
const upgradePeqChange = useCallback(async (payload: PeqChangePayload) => {
|
|
if (isDemoMode) {
|
|
applyPeqFiltersToState(payload.peqChange.filters);
|
|
return;
|
|
}
|
|
if (!api) throw new Error("EQ unavailable");
|
|
await api.upgradePeqChange(payload);
|
|
applyPeqFiltersToState(payload.peqChange.filters);
|
|
}, [api, isDemoMode, applyPeqFiltersToState]);
|
|
|
|
const upgradePeqApply = useCallback(async (payload: PeqApplyPayload) => {
|
|
if (isDemoMode) {
|
|
applyPeqFiltersToState(payload.peqApply.filters);
|
|
return;
|
|
}
|
|
if (!api) throw new Error("EQ unavailable");
|
|
await api.upgradePeqApply(payload);
|
|
applyPeqFiltersToState(payload.peqApply.filters);
|
|
}, [api, isDemoMode, applyPeqFiltersToState]);
|
|
|
|
// Optimistic setters
|
|
const setVolume = useCallback((v: number) => {
|
|
setDeviceState(prev => prev ? { ...prev, volume: v } : prev);
|
|
if (!isDemoMode && api) {
|
|
api.setVolume(v).catch(console.error);
|
|
}
|
|
}, [api, isDemoMode]);
|
|
|
|
const setInput = useCallback((v: number) => {
|
|
setDeviceState(prev => prev ? { ...prev, input: v } : prev);
|
|
if (!isDemoMode && api) api.setInput(v).catch(console.error);
|
|
}, [api, isDemoMode]);
|
|
|
|
const setOutput = useCallback((v: number) => {
|
|
setDeviceState(prev => prev ? { ...prev, output: v } : prev);
|
|
if (!isDemoMode && api) api.setOutput(v).catch(console.error);
|
|
}, [api, isDemoMode]);
|
|
|
|
const setBalance = useCallback((v: number) => {
|
|
setDeviceState(prev => prev ? { ...prev, balance: v } : prev);
|
|
if (!isDemoMode && api) api.setBalance(v).catch(console.error);
|
|
}, [api, isDemoMode]);
|
|
|
|
// 启动时根据 ?ip= 或已存 IP 自动连接（默认进入首页，无需连接页）
|
|
useEffect(() => {
|
|
if (autoConnectStartedRef.current) return;
|
|
autoConnectStartedRef.current = true;
|
|
|
|
const targetIp = getDeviceIpFromUrl()?.trim() ?? "";
|
|
if (!targetIp) {
|
|
setIpMissing(true);
|
|
return;
|
|
}
|
|
setIp(targetIp);
|
|
setIpMissing(false);
|
|
void connect(false, targetIp);
|
|
}, [connect]);
|
|
|
|
// Polling for changes
|
|
useEffect(() => {
|
|
if (!isConnected || isDemoMode || !api) return;
|
|
|
|
const poll = async () => {
|
|
try {
|
|
const count = await api.getMsgCount();
|
|
if (count !== lastMsgCountRef.current) {
|
|
await Promise.all([
|
|
fetchState(api),
|
|
fetchPeqState(api).catch(() => undefined),
|
|
]);
|
|
}
|
|
} catch {
|
|
// Silently fail polling
|
|
}
|
|
};
|
|
|
|
pollIntervalRef.current = setInterval(poll, 3000);
|
|
return () => {
|
|
if (pollIntervalRef.current) clearInterval(pollIntervalRef.current);
|
|
};
|
|
}, [isConnected, isDemoMode, api, fetchState, fetchPeqState]);
|
|
|
|
return (
|
|
<DeviceContext.Provider value={{
|
|
ip, setIp: setDeviceIp, ipMissing,
|
|
isConnected, isConnecting, isDemoMode, setDemoMode,
|
|
deviceState, peqState, lastUpdated, error,
|
|
effectiveLanguage, setUiLanguage,
|
|
connect, disconnect, refresh, api,
|
|
updateSetting, updatePeq, upgradePeqChange, upgradePeqApply, syncPeqCatalog,
|
|
setVolume, setInput, setOutput, setBalance,
|
|
}}>
|
|
{children}
|
|
</DeviceContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useDevice() {
|
|
const ctx = useContext(DeviceContext);
|
|
if (!ctx) throw new Error("useDevice must be used within DeviceProvider");
|
|
return ctx;
|
|
}
|