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

Enhance ConnectionPlaceholder component to handle missing device IP with localized messages; update DeviceContext to manage IP state; improve CSS for touch actions in various components; update locale files for English and Chinese with new connection prompts.

Browse Source
This commit is contained in:
yangy
2026-05-22 17:24:50 +08:00
parent 32f15217ad
commit 11821730ec
9 changed files with 89 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/ConnectionPlaceholder.tsx
+39 -9
View File
@@ -1,31 +1,61 @@
import { useMemo } from "react";
import { useDevice } from "@/contexts/DeviceContext";
import { Loader2, Wifi } from "lucide-react";
import BottomNav from "@/components/BottomNav";
import localeZh from "@/locales/data-zh.json";
import localeZhHK from "@/locales/data-zh-HK.json";
import localeEn from "@/locales/data-en.json";
type ConnectLocale = (typeof localeZh)["connect"];
function pickConnectLocale(): ConnectLocale {
const params = new URLSearchParams(window.location.search);
const lang = params.get("lang");
if (lang === "0") return localeEn.connect;
if (lang === "1") return localeZhHK.connect;
if (lang === "2") return localeZh.connect;
const nav = navigator.language.toLowerCase();
if (nav.startsWith("zh-hk") || nav.startsWith("zh-tw")) return localeZhHK.connect;
if (nav.startsWith("zh")) return localeZh.connect;
return localeEn.connect;
}
function fmt(template: string, vars: Record<string, string>): string {
let s = template;
for (const [k, v] of Object.entries(vars)) {
s = s.split(`{${k}}`).join(v);
}
return s;
}
/** 自动连接设备时的占位（替代原 ConnectScreen） */
export default function ConnectionPlaceholder() {
const { ip, isConnecting, error } = useDevice();
const { ip, isConnecting, error, ipMissing } = useDevice();
const text = useMemo(pickConnectLocale, []);
return (
<div className="min-h-screen bg-black flex flex-col items-center justify-center px-6 pb-24">
<div className="mb-6 flex size-[4.5rem] items-center justify-center rounded-[16px] border border-white/15">
<Wifi size={28} className="text-[#00FFF6]/80" />
</div>
{isConnecting ? (
{ipMissing ? (
<>
<p className="text-[15px] text-white/80 mb-2">{text.ipMissingTitle}</p>
<p className="text-[13px] text-white/45 text-center max-w-xs">{text.ipMissingDesc}</p>
<p className="text-[13px] text-[#00FFF6]/80 mt-3 font-mono">?ip=10.0.0.119</p>
</>
) : isConnecting ? (
<>
<Loader2 size={28} className="animate-spin text-[#00FFF6] mb-3" />
<p className="text-[15px] text-white/70">Connecting to {ip}…</p>
<p className="text-[15px] text-white/70">{fmt(text.connecting, { ip })}</p>
</>
) : (
<>
<p className="text-[15px] text-white/80 mb-2">Connection failed</p>
<p className="text-[15px] text-white/80 mb-2">{text.failedTitle}</p>
<p className="text-[13px] text-white/45 text-center max-w-xs">
{error ?? "Check the device IP and your network connection."}
</p>
<p className="text-[12px] text-white/30 mt-3">
Specify the device in the URL, e.g.{" "}
<span className="text-white/50">?ip=10.0.0.119</span>
{error ?? text.failedDesc}
</p>
<p className="text-[12px] text-white/30 mt-3 text-center max-w-xs">{text.failedHint}</p>
</>
)}
<BottomNav />
client/src/components/DesktopAIShell.tsx
+1 -1
View File
@@ -92,7 +92,7 @@ export default function DesktopAIShell({ children }: { children: ReactNode }) {
"min-w-0",
showSplit
? "h-full min-h-0 overflow-y-auto overflow-x-hidden"
: "min-h-dvh overflow-x-hidden",
: "min-h-dvh max-h-dvh overflow-x-hidden overflow-y-auto overscroll-y-contain [touch-action:pan-y]",
)}
style={
showSplit
client/src/contexts/DeviceContext.tsx
+20 -8
View File
@@ -14,6 +14,7 @@ import { getDeviceIpFromUrl, resolveInitialDeviceIp } from "@/lib/deviceIp";
interface DeviceContextType {
ip: string;
setIp: (ip: string) => void;
ipMissing: boolean;
isConnected: boolean;
isConnecting: boolean;
isDemoMode: boolean;
@@ -41,6 +42,7 @@ 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);
@@ -54,9 +56,8 @@ export function DeviceProvider({ children }: { children: React.ReactNode }) {
const pollIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
const autoConnectStartedRef = useRef(false);
const saveIp = useCallback((newIp: string) => {
setIp(newIp);
localStorage.setItem("luxsin_ip", newIp);
const setDeviceIp = useCallback((newIp: string) => {
setIp(newIp.trim());
}, []);
const fetchState = useCallback(async (apiInstance: LuxsinAPI) => {
@@ -69,6 +70,13 @@ export function DeviceProvider({ children }: { children: React.ReactNode }) {
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);
@@ -209,11 +217,15 @@ export function DeviceProvider({ children }: { children: React.ReactNode }) {
if (autoConnectStartedRef.current) return;
autoConnectStartedRef.current = true;
const urlIp = getDeviceIpFromUrl();
const targetIp = urlIp ?? ip;
if (urlIp) saveIp(urlIp);
const targetIp = getDeviceIpFromUrl()?.trim() ?? "";
if (!targetIp) {
setIpMissing(true);
return;
}
setIp(targetIp);
setIpMissing(false);
void connect(false, targetIp);
}, [connect, ip, saveIp]);
}, [connect]);
// Polling for changes
useEffect(() => {
@@ -238,7 +250,7 @@ export function DeviceProvider({ children }: { children: React.ReactNode }) {
return (
<DeviceContext.Provider value={{
ip, setIp: saveIp,
ip, setIp: setDeviceIp, ipMissing,
isConnected, isConnecting, isDemoMode, setDemoMode,
deviceState, peqState, lastUpdated, error,
connect, disconnect, refresh, api,
client/src/index.css
+1
View File
@@ -277,6 +277,7 @@
background: rgba(255, 255, 255, 0.12);
outline: none;
cursor: pointer;
touch-action: pan-y;
}
.cyan-slider::-webkit-slider-thumb {
-webkit-appearance: none;
client/src/lib/deviceIp.ts
+1 -1
View File
@@ -7,5 +7,5 @@ export function getDeviceIpFromUrl(): string | null {
}
export function resolveInitialDeviceIp(): string {
return getDeviceIpFromUrl() ?? localStorage.getItem("luxsin_ip") ?? "192.168.2.30";
return getDeviceIpFromUrl() ?? "";
}
client/src/locales/data-en.json
+8
View File
@@ -1,4 +1,12 @@
{
"connect": {
"ipMissingTitle": "Device IP not specified",
"ipMissingDesc": "Add the device IP in the address bar before opening this page, for example:",
"connecting": "Connecting to {ip}…",
"failedTitle": "Connection failed",
"failedDesc": "Check the device IP and your network connection.",
"failedHint": "Specify the device in the URL, e.g. ?ip=10.0.0.119"
},
"home": {
"audioSet": "Audio setting",
"systemSet": "System",
client/src/locales/data-zh-HK.json
+8
View File
@@ -1,4 +1,12 @@
{
"connect": {
"ipMissingTitle": "未指定裝置 IP",
"ipMissingDesc": "請在網址列加入裝置 IP 參數後再開啟本頁，例如：",
"connecting": "正在連線 {ip}…",
"failedTitle": "連線失敗",
"failedDesc": "請檢查裝置 IP 與網路連線。",
"failedHint": "透過網址列指定裝置，例如 ?ip=10.0.0.119"
},
"home": {
"audioSet": "音訊設定",
"systemSet": "系統設定",
client/src/locales/data-zh.json
+8
View File
@@ -1,4 +1,12 @@
{
"connect": {
"ipMissingTitle": "未指定设备 IP",
"ipMissingDesc": "请在地址栏添加设备 IP 参数后再打开本页，例如：",
"connecting": "正在连接 {ip}…",
"failedTitle": "连接失败",
"failedDesc": "请检查设备 IP 与网络连接。",
"failedHint": "通过地址栏指定设备，例如 ?ip=10.0.0.119"
},
"home": {
"audioSet": "音频设置",
"systemSet": "系统设置",
client/src/pages/Home.tsx
+3 -3
View File
@@ -438,7 +438,7 @@ export default function Home() {
};
return (
<div className="min-h-screen bg-black flex flex-col">
<div className="min-h-dvh bg-black pb-[calc(5.5rem+env(safe-area-inset-bottom,0px))]">
{/* ── Device render image ── */}
<div className="px-4 pb-4">
<div className="w-full rounded-2xl overflow-hidden flex items-center justify-center"
@@ -570,7 +570,7 @@ export default function Home() {
</svg>
</button>
<div className="flex-1 relative flex items-center">
<div className="flex-1 relative flex items-center touch-pan-y">
{/* Track fill - 根据按钮位置调整 */}
<div className="absolute left-0 h-[4px] rounded-full pointer-events-none"
style={{
@@ -782,7 +782,7 @@ export default function Home() {
</div>
{/* ── iOS list rows ── */}
<div className="px-4 pb-4">
<div className="px-4">
<div className="ios-list-group">
<ListRow
icon={<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="w-4 h-4"><path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"/></svg>}