/* Remote mode — Part 3 (client UI). * * For now this file contains the LoginScreen ("CONNECT TO SAMPLER") overlay, * opened by clicking the BRAYER-SOUND logo. The actual control channel (the * Pi-side WebSocket server) is Part 2 and does not exist yet, so Connect * attempts a real socket and reports clearly when the sampler can't be reached. * * NOTE: all the React hooks (useState, useEffect, ...) are destructured once at * global scope in primitives.jsx — do NOT redeclare them here. Use React.useX. */ /* RemoteLink — owns the control-channel WebSocket: connect+login, promise- * correlated invoke, disconnect, and backoff auto-reconnect. One remote head. */ const RemoteLink = { ws: null, state: 'local', // 'local' | 'connecting' | 'connected' | 'reconnecting' ip: null, username: null, password: null, token: null, port: 8420, _id: 1, _pending: {}, // id -> {resolve, reject} _listeners: [], _reconnectTimer: null, _reconnectAttempts: 0, _userClosed: false, onReconnected: null, // optional callback set by the app (re-hydrate) hasRemoteClient: false, // (Pi side) true while a Windows client is connected onSync: null, // (Windows side) set by app: (cmd,args)=>applyCommandToState onSnapshot: null, // (Windows side) set by app: (state)=>replace state onLibraryChanged: null, // (Windows side) set by app: ()=>re-fetch soundmap list isConnected(){ return this.state === 'connected'; }, onChange(fn){ this._listeners.push(fn); return () => { this._listeners = this._listeners.filter(function(f){ return f !== fn; }); }; }, _emit(){ const snap = { state: this.state, ip: this.ip }; this._listeners.forEach(function(fn){ try { fn(snap); } catch(e){} }); }, connect(ip, username, password){ this.ip = ip; this.username = username; this.password = password; this._userClosed = false; this._reconnectAttempts = 0; return this._open(); }, _open(){ const self = this; return new Promise(function(resolve, reject){ self.state = (self._reconnectAttempts > 0) ? 'reconnecting' : 'connecting'; self._emit(); let ws; try { ws = new WebSocket('ws://' + self.ip + ':' + self.port); } catch(e){ self.state = 'local'; self._emit(); reject(e); return; } self.ws = ws; let loggedIn = false; const to = setTimeout(function(){ if(!loggedIn){ try{ ws.close(); }catch(e){} reject(new Error('login timed out')); } }, 6000); ws.onopen = function(){ ws.send(JSON.stringify({ type:'login', username:self.username, password:self.password, protoVersion:1 })); }; ws.onmessage = function(ev){ let msg; try { msg = JSON.parse(ev.data); } catch(e){ return; } if(msg.type === 'login_ok'){ loggedIn = true; clearTimeout(to); self.token = msg.token; self.state = 'connected'; self._reconnectAttempts = 0; self._emit(); resolve(); } else if(msg.type === 'login_err'){ clearTimeout(to); try{ ws.close(); }catch(e){} self.state = 'local'; self._emit(); reject(new Error(msg.reason || 'login failed')); } else if(msg.type === 'reply'){ const p = self._pending[msg.id]; if(p){ delete self._pending[msg.id]; if(msg.ok) p.resolve(msg.data !== undefined ? msg.data : null); else p.reject(new Error(msg.error || 'command failed')); } } else if(msg.type === 'sync'){ if(self.onSync) self.onSync(msg.cmd, msg.args || {}); } else if(msg.type === 'snapshot'){ if(self.onSnapshot) self.onSnapshot(msg.state); } else if(msg.type === 'library_changed'){ if(self.onLibraryChanged) self.onLibraryChanged(); } }; ws.onclose = function(){ self._onDrop(loggedIn); }; ws.onerror = function(){ }; }); }, _onDrop(wasLoggedIn){ const self = this; Object.keys(this._pending).forEach(function(id){ try { self._pending[id].reject(new Error('connection lost')); } catch(e){} delete self._pending[id]; }); this.ws = null; if(this._userClosed){ this.state = 'local'; this.token = null; this._emit(); return; } const wasActive = wasLoggedIn || this.state === 'connected' || this.state === 'reconnecting'; if(wasActive && this._reconnectAttempts < 6){ this.state = 'reconnecting'; this.token = null; this._emit(); this._reconnectAttempts++; const delay = Math.min(1000 * Math.pow(2, this._reconnectAttempts - 1), 8000); this._reconnectTimer = setTimeout(function(){ self._open().then(function(){ if(self.onReconnected) self.onReconnected(); }).catch(function(){}); }, delay); } else { this.state = 'local'; this.token = null; this._emit(); } }, invoke(cmd, args){ const self = this; if(this.state !== 'connected' || !this.ws){ return Promise.reject(new Error('not connected')); } const id = this._id++; return new Promise(function(resolve, reject){ self._pending[id] = { resolve: resolve, reject: reject }; try { self.ws.send(JSON.stringify({ type:'cmd', id:id, cmd:cmd, args:args || {}, token:self.token })); } catch(e){ delete self._pending[id]; reject(e); } }); }, disconnect(){ this._userClosed = true; if(this._reconnectTimer){ clearTimeout(this._reconnectTimer); this._reconnectTimer = null; } if(this.ws){ try { this.ws.close(); } catch(e){} } this.ws = null; this.state = 'local'; this.token = null; this._emit(); }, }; /* Single routable invoke: remote when connected, local Tauri otherwise. */ function BSInvoke(cmd, args){ if(RemoteLink.isConnected()){ return RemoteLink.invoke(cmd, args); } if(window.__TAURI__ && window.__TAURI__.core){ // Pi-local STATE change while a client watches → broadcast it (fire-and-forget, pre-applied via args). if(RemoteLink.hasRemoteClient && typeof STATE_SYNC_CMDS !== 'undefined' && STATE_SYNC_CMDS[cmd]){ try { window.__TAURI__.core.invoke('sync_broadcast', { cmd: cmd, args: args || {} }); } catch(e){} } // Pi-local LIBRARY change → after it COMPLETES, tell the client to refresh its list. if(RemoteLink.hasRemoteClient && typeof LIBRARY_CMDS !== 'undefined' && LIBRARY_CMDS[cmd]){ return window.__TAURI__.core.invoke(cmd, args).then(function(r){ try { window.__TAURI__.core.invoke('notify_library_changed', {}); } catch(e){} return r; }); } return window.__TAURI__.core.invoke(cmd, args); } return Promise.resolve(); } /* Always-local invoke (bypasses RemoteLink) — for client-side ops that must run * on THIS machine even while remote: the file picker and local file reads. */ function LocalInvoke(cmd, args){ if(window.__TAURI__ && window.__TAURI__.core){ return window.__TAURI__.core.invoke(cmd, args); } return Promise.reject(new Error('local Tauri unavailable')); } /* Expose globally so all vendored-Babel scripts can reach them. */ window.RemoteLink = RemoteLink; window.BSInvoke = BSInvoke; window.LocalInvoke = LocalInvoke; /* Small inline field icons (match the connect mockup) */ function RmIcon({ kind }){ const common = { width:18, height:18, viewBox:'0 0 24 24', fill:'none', stroke:'#9b5cff', strokeWidth:1.6, strokeLinecap:'round', strokeLinejoin:'round' }; if(kind==='globe') return (); if(kind==='user') return (); if(kind==='lock') return (); if(kind==='eye') return (); if(kind==='arrow') return (); return null; } /* One labelled input row with leading icon */ function RmField({ icon, label, children }){ return (
{label}
{children}
); } function LoginScreen({ onClose, onConnected }){ const [ip, setIp] = React.useState('192.168.1.125'); const [username, setUsername] = React.useState('admin'); const [password, setPassword] = React.useState(''); const [showPw, setShowPw] = React.useState(false); const [status, setStatus] = React.useState('idle'); // idle | connecting | error const [msg, setMsg] = React.useState(''); const inputStyle = { width:'100%', background:'transparent', border:'none', outline:'none', color:'#eef0f6', fontFamily:'JetBrains Mono', fontSize:16, fontWeight:600, letterSpacing:'.02em', padding:'2px 0 0', }; const onConnect = function(){ if(!ip.trim()){ setStatus('error'); setMsg('Enter the sampler IP address.'); return; } setStatus('connecting'); setMsg('Logging in to ' + ip.trim() + '…'); RemoteLink.connect(ip.trim(), username.trim() || 'admin', password) .then(function(){ setStatus('idle'); setMsg(''); if(onConnected) onConnected(ip.trim()); if(onClose) onClose(); }) .catch(function(e){ setStatus('error'); setMsg((e && e.message ? e.message : 'connection failed') + ' (' + ip.trim() + ':8420)'); }); }; const onKey = function(e){ if(e.key === 'Enter') onConnect(); }; return (
{/* ambient waveform glow accents */}
{/* close back to local */}
{/* brand */}
BRAYER·SOUND
sound. engineered to empower.
{/* card */}
CONNECT TO SAMPLER
 {msg && (
{msg}
)}
© 2026 BRAYER·SOUND — remote mode (preview)
); }