mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-09-16 09:31:20 -04:00
414 lines
19 KiB
React
414 lines
19 KiB
React
// Settings Panel
|
|
// Purpose: Defines the Settings Panel module and the local helpers/components used in this file.
|
|
// Scope: Keeps behavior unchanged while isolating this concern into a clear, single-responsibility unit.
|
|
import { useMemo } from 'react';
|
|
import { useControlActions, useControlSelector } from '../../controls/index.js';
|
|
import AuthPanel from '../AuthPanel/index.jsx';
|
|
import AdminPanel from '../AdminPanel/index.jsx';
|
|
import KeymapSettings from '../KeymapSettings/index.jsx';
|
|
import GamepadMappingSettings from '../GamepadMappingSettings/index.jsx';
|
|
import OvercurrentLimiterPanel from '../OvercurrentLimiterPanel/index.jsx';
|
|
import Tabs, { Tab, TabList, TabPanel, TabPanels } from '../Tabs/index.jsx';
|
|
import SessionSnapshot from '../SessionSnapshot/index.jsx';
|
|
import SocketLogPanel from '../SocketLogPanel/index.jsx';
|
|
import CardFrame from '../CardFrame/index.jsx';
|
|
import KeyPill from '../vip/VipAudioUploadCard/KeyPill.jsx';
|
|
import { useHudMapSetting } from '../../hooks/useHudMapSetting.js';
|
|
import { useSettingsNamespace } from '../../settings/index.js';
|
|
import { useSocket } from '../../context/SocketContext.jsx';
|
|
import { AUDIO_SETTINGS_DEFAULTS, VIDEO_SETTINGS_DEFAULTS } from '../../settings/namespaces.js';
|
|
import { formatKeyLabel } from '../../controls/keymapUtils.js';
|
|
import { trackAnalyticsEvent, trackAnalyticsEventThrottled } from '../../analytics/index.js';
|
|
|
|
const manualTabs = [
|
|
{ key: 'start', label: 'Start OI' },
|
|
{ key: 'safe', label: 'Safe' },
|
|
{ key: 'full', label: 'Full' },
|
|
{ key: 'passive', label: 'Passive' },
|
|
{ key: 'dock', label: 'Dock' },
|
|
];
|
|
|
|
const VIDEO_FILTER_OPTIONS = [
|
|
// "Color" is the pass-through mode users can return to when the scene has usable color.
|
|
{ key: 'none', label: 'Color' },
|
|
// Grayscale removes the pink IR-contaminated cast while preserving luminance detail.
|
|
{ key: 'grayscale', label: 'Gray' },
|
|
// Greenscale keeps the same luminance-first idea as grayscale, then tints it green for
|
|
// users who find green-on-black easier to visually parse in bright outdoor scenes.
|
|
{ key: 'greenscale', label: 'Green' },
|
|
];
|
|
|
|
function normalizeVideoFilter(value) {
|
|
// Settings are stored in a browser cookie and can contain stale or hand-edited values.
|
|
// Falling back here keeps the dropdown and media player predictable instead of rendering
|
|
// with an unknown mode.
|
|
return VIDEO_FILTER_OPTIONS.some((option) => option.key === value)
|
|
? value
|
|
: VIDEO_SETTINGS_DEFAULTS.colorFilter;
|
|
}
|
|
|
|
function SettingRow({ children, className = '' }) {
|
|
// Page settings are changed one row at a time, so each row gets a subtle container and a
|
|
// max width. This keeps the label and control together instead of stretching them across
|
|
// the full settings pane.
|
|
return (
|
|
<label
|
|
className={`mx-auto grid w-full max-w-lg grid-cols-[minmax(0,1fr)_auto] items-center gap-1.5 rounded bg-neutral-800/80 px-1.5 py-1 text-sm text-white max-[420px]:grid-cols-1 ${className}`}
|
|
>
|
|
{children}
|
|
</label>
|
|
);
|
|
}
|
|
|
|
function SettingHelp({ children }) {
|
|
// Helper text is still secondary, but it no longer uses the very small microcopy scale that
|
|
// made the settings panel difficult to read from a normal driving distance.
|
|
return <p className="mx-auto w-full max-w-lg text-xs leading-snug text-white">{children}</p>;
|
|
}
|
|
|
|
function RangeSetting({ label, value, disabled = false, onChange }) {
|
|
// Range settings need enough horizontal room for accurate pointer input, so the slider spans
|
|
// the row while the percentage value stays beside the label for quick feedback.
|
|
return (
|
|
<label className="mx-auto block w-full max-w-lg rounded bg-neutral-800/80 px-1.5 py-1 text-sm text-white">
|
|
<div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-1.5">
|
|
<span className="min-w-0 font-semibold text-white">{label}</span>
|
|
<span className="rounded bg-neutral-900 px-1 py-0.5 text-xs text-white">
|
|
{Math.round(value * 100)}%
|
|
</span>
|
|
</div>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.01"
|
|
value={value}
|
|
onChange={onChange}
|
|
className="mt-1 w-full accent-emerald-500 disabled:opacity-50"
|
|
disabled={disabled}
|
|
/>
|
|
</label>
|
|
);
|
|
}
|
|
|
|
function reconnectSocketWithTransport(socket, transport) {
|
|
if (!socket?.io?.opts) return;
|
|
/*
|
|
Socket.IO reads its manager options when reconnecting. Keep this mutation in
|
|
one helper instead of inside the component body so the settings handler only
|
|
expresses the user-facing action: save preference, then reconnect.
|
|
*/
|
|
socket.io.opts.transports = transport === 'polling' ? ['polling'] : ['websocket', 'polling'];
|
|
socket.disconnect();
|
|
socket.connect();
|
|
}
|
|
|
|
export default function SettingsPanel() {
|
|
const keymap = useControlSelector((control) => control.state.keymap);
|
|
const roverId = useControlSelector((control) => control.state.roverId);
|
|
const { sendOiCommand, setSensorStream } = useControlActions();
|
|
const canControl = Boolean(roverId);
|
|
const [hudMapDesktop, setHudMapDesktop] = useHudMapSetting();
|
|
const socket = useSocket();
|
|
const { value: pageSettings, save: savePageSettings } = useSettingsNamespace('page', {
|
|
hudMapDesktop: false,
|
|
connectionTransport: 'websocket',
|
|
swapMobileControlColumns: false,
|
|
driveMacroBackoffEnabled: true,
|
|
interInstanceTransferSettings: true,
|
|
});
|
|
const { value: audioSettings, save: saveAudioSettings } = useSettingsNamespace('audio', AUDIO_SETTINGS_DEFAULTS);
|
|
const { value: videoSettings, save: saveVideoSettings } = useSettingsNamespace('video', VIDEO_SETTINGS_DEFAULTS);
|
|
const connectionTransport = pageSettings?.connectionTransport || 'websocket';
|
|
const swapMobileControlColumns = Boolean(pageSettings?.swapMobileControlColumns);
|
|
const driveMacroBackoffEnabled =
|
|
typeof pageSettings?.driveMacroBackoffEnabled === 'boolean'
|
|
? pageSettings.driveMacroBackoffEnabled
|
|
: true;
|
|
const interInstanceTransferSettings = pageSettings?.interInstanceTransferSettings !== false;
|
|
const masterVolume = Number.isFinite(audioSettings?.masterVolume) ? audioSettings.masterVolume : AUDIO_SETTINGS_DEFAULTS.masterVolume;
|
|
const alertVolume = Number.isFinite(audioSettings?.alertVolume) ? audioSettings.alertVolume : AUDIO_SETTINGS_DEFAULTS.alertVolume;
|
|
const roverVolume = Number.isFinite(audioSettings?.roverVolume) ? audioSettings.roverVolume : AUDIO_SETTINGS_DEFAULTS.roverVolume;
|
|
const mainBrushDuckEnabled =
|
|
typeof audioSettings?.mainBrushDuckEnabled === 'boolean'
|
|
? audioSettings.mainBrushDuckEnabled
|
|
: typeof audioSettings?.autoLevelEnabled === 'boolean'
|
|
? audioSettings.autoLevelEnabled
|
|
: AUDIO_SETTINGS_DEFAULTS.mainBrushDuckEnabled;
|
|
const mainBrushDuckAmount = Number.isFinite(audioSettings?.mainBrushDuckAmount)
|
|
? Math.max(0, Math.min(1, audioSettings.mainBrushDuckAmount))
|
|
: AUDIO_SETTINGS_DEFAULTS.mainBrushDuckAmount;
|
|
const videoColorFilter = normalizeVideoFilter(videoSettings?.colorFilter);
|
|
const videoFilterCycleKeyLabel = formatKeyLabel(keymap?.videoFilterCycle?.[0]);
|
|
|
|
const sensorButtons = useMemo(
|
|
() => [
|
|
{ key: 'start', label: 'Enable stream', enable: true },
|
|
{ key: 'stop', label: 'Disable stream', enable: false },
|
|
],
|
|
[],
|
|
);
|
|
|
|
const handleSensorToggle = (enable) => {
|
|
if (!roverId) return;
|
|
setSensorStream(enable);
|
|
};
|
|
|
|
const handleTransportChange = (event) => {
|
|
const next = event.target.value;
|
|
savePageSettings((current) => ({ ...(current ?? {}), connectionTransport: next }));
|
|
trackAnalyticsEvent('settings_change', { setting: 'connection_transport', value: next });
|
|
reconnectSocketWithTransport(socket, next);
|
|
};
|
|
|
|
const handleAudioRange = (key) => (event) => {
|
|
const raw = Number(event.target.value);
|
|
const next = Number.isFinite(raw) ? Math.max(0, Math.min(1, raw)) : 0;
|
|
saveAudioSettings((current) => ({ ...(current ?? {}), [key]: next }));
|
|
trackAnalyticsEventThrottled(
|
|
'settings_change',
|
|
{ setting: key, value: next },
|
|
{ key: `audio:${key}`, throttleMs: 3 * 1000 },
|
|
);
|
|
};
|
|
|
|
const handleMainBrushDuckEnabled = (event) => {
|
|
const checked = Boolean(event.target.checked);
|
|
saveAudioSettings((current) => ({ ...(current ?? {}), mainBrushDuckEnabled: checked }));
|
|
trackAnalyticsEvent('settings_change', { setting: 'mainBrushDuckEnabled', value: checked });
|
|
};
|
|
|
|
const handleSwapMobileControlColumns = (event) => {
|
|
const checked = Boolean(event.target.checked);
|
|
savePageSettings((current) => ({ ...(current ?? {}), swapMobileControlColumns: checked }));
|
|
trackAnalyticsEvent('mobile_controls_swap', { enabled: checked });
|
|
trackAnalyticsEvent('settings_change', { setting: 'swapMobileControlColumns', value: checked });
|
|
};
|
|
|
|
const handleDriveMacroBackoffEnabled = (event) => {
|
|
const checked = Boolean(event.target.checked);
|
|
savePageSettings((current) => ({ ...(current ?? {}), driveMacroBackoffEnabled: checked }));
|
|
trackAnalyticsEvent('settings_change', { setting: 'driveMacroBackoffEnabled', value: checked });
|
|
};
|
|
|
|
const handleInterInstanceTransferSettings = (event) => {
|
|
const checked = Boolean(event.target.checked);
|
|
/*
|
|
This replaces the old per-click transfer confirmation. Keeping the choice
|
|
in Page settings makes external-server navigation immediate while still
|
|
letting users opt out of sending their current settings cookie.
|
|
*/
|
|
savePageSettings((current) => ({ ...(current ?? {}), interInstanceTransferSettings: checked }));
|
|
trackAnalyticsEvent('settings_change', { setting: 'interInstanceTransferSettings', value: checked });
|
|
};
|
|
|
|
const handleVideoFilterChange = (event) => {
|
|
const nextFilter = normalizeVideoFilter(event.target.value);
|
|
|
|
// Merge into the current video namespace so future video preferences can coexist with this
|
|
// filter choice. This follows the same persisted-settings shape used by page/audio options.
|
|
saveVideoSettings((current) => ({
|
|
...(current ?? {}),
|
|
colorFilter: nextFilter,
|
|
}));
|
|
trackAnalyticsEvent('settings_change', { setting: 'videoColorFilter', value: nextFilter });
|
|
};
|
|
|
|
return (
|
|
<Tabs defaultTab="keybindings">
|
|
<TabList>
|
|
<Tab id="keybindings">Keybindings</Tab>
|
|
<Tab id="controller">Controller</Tab>
|
|
<Tab id="page">Page settings</Tab>
|
|
<Tab id="admin">Admin</Tab>
|
|
</TabList>
|
|
<TabPanels>
|
|
<TabPanel id="keybindings">
|
|
<div className="space-y-0.5">
|
|
<KeymapSettings />
|
|
</div>
|
|
</TabPanel>
|
|
<TabPanel id="controller">
|
|
<div className="space-y-0.5">
|
|
<GamepadMappingSettings />
|
|
</div>
|
|
</TabPanel>
|
|
<TabPanel id="page">
|
|
{/* Page settings use a responsive card grid so unrelated settings do not form one long,
|
|
stretched column. Audio spans both columns because volume sliders need extra width
|
|
for comfortable pointer control. */}
|
|
<div className="grid gap-1.5 lg:grid-cols-2">
|
|
<CardFrame title="HUD" bodyClassName="space-y-1 p-1 text-sm">
|
|
<SettingRow className="grid-cols-[auto_minmax(0,1fr)] max-[420px]:grid-cols-[auto_minmax(0,1fr)]">
|
|
<input
|
|
type="checkbox"
|
|
className="h-3.5 w-3.5 accent-emerald-500"
|
|
checked={hudMapDesktop}
|
|
onChange={(e) => setHudMapDesktop(e.target.checked)}
|
|
/>
|
|
<span className="font-semibold text-white">Show top-down map in HUD (desktop)</span>
|
|
</SettingRow>
|
|
<SettingHelp>Mobile HUD keeps the map on by default.</SettingHelp>
|
|
</CardFrame>
|
|
<CardFrame title="Video" bodyClassName="space-y-1 p-1 text-sm">
|
|
{/* The dropdown mirrors the other Page settings controls and writes through the
|
|
existing cookie-backed settings provider, so the choice survives reloads without
|
|
adding rover-side state. */}
|
|
<SettingRow>
|
|
<span className="font-semibold text-white">Rover video filter</span>
|
|
<select
|
|
value={videoColorFilter}
|
|
onChange={handleVideoFilterChange}
|
|
className="field-input min-w-28 px-1 py-0.5 text-sm"
|
|
>
|
|
{VIDEO_FILTER_OPTIONS.map((option) => (
|
|
<option key={option.key} value={option.key}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</SettingRow>
|
|
<SettingHelp>
|
|
{/* Use the live keymap value here instead of hardcoding the default key because
|
|
this shortcut is user-configurable in the Keybindings tab. */}
|
|
<span className="inline-flex flex-wrap items-center gap-1">
|
|
<span>Use</span>
|
|
{videoFilterCycleKeyLabel ? <KeyPill label={videoFilterCycleKeyLabel} /> : null}
|
|
<span>to cycle filters. Applies only to rover camera pixels; HUD overlays stay full color.</span>
|
|
</span>
|
|
</SettingHelp>
|
|
</CardFrame>
|
|
<CardFrame title="Mobile controls" bodyClassName="space-y-1 p-1 text-sm">
|
|
<SettingRow className="grid-cols-[auto_minmax(0,1fr)] max-[420px]:grid-cols-[auto_minmax(0,1fr)]">
|
|
<input
|
|
type="checkbox"
|
|
className="h-3.5 w-3.5 accent-emerald-500"
|
|
checked={swapMobileControlColumns}
|
|
onChange={handleSwapMobileControlColumns}
|
|
/>
|
|
<span className="font-semibold text-white">Swap control columns (put joystick on the left)</span>
|
|
</SettingRow>
|
|
</CardFrame>
|
|
<CardFrame title="Macros" bodyClassName="space-y-1 p-1 text-sm">
|
|
<SettingRow className="grid-cols-[auto_minmax(0,1fr)] max-[420px]:grid-cols-[auto_minmax(0,1fr)]">
|
|
<input
|
|
type="checkbox"
|
|
className="h-3.5 w-3.5 accent-emerald-500"
|
|
checked={driveMacroBackoffEnabled}
|
|
onChange={handleDriveMacroBackoffEnabled}
|
|
/>
|
|
<span className="font-semibold text-white">Enable backward bump in drive macro</span>
|
|
</SettingRow>
|
|
</CardFrame>
|
|
<CardFrame title="Audio" className="lg:col-span-2" bodyClassName="space-y-1 p-1 text-sm">
|
|
{/* Audio sliders are stacked inside the wider card so the value chip, label, and
|
|
slider remain easy to compare while preserving enough drag distance. */}
|
|
<RangeSetting
|
|
label="Master volume"
|
|
value={masterVolume}
|
|
onChange={handleAudioRange('masterVolume')}
|
|
/>
|
|
<RangeSetting
|
|
label="Alert/page sounds"
|
|
value={alertVolume}
|
|
onChange={handleAudioRange('alertVolume')}
|
|
/>
|
|
<RangeSetting
|
|
label="Rover audio"
|
|
value={roverVolume}
|
|
onChange={handleAudioRange('roverVolume')}
|
|
/>
|
|
<SettingRow>
|
|
<span className="font-semibold text-white">Main brush ducking</span>
|
|
<input
|
|
type="checkbox"
|
|
className="h-3.5 w-3.5 accent-emerald-500"
|
|
checked={mainBrushDuckEnabled}
|
|
onChange={handleMainBrushDuckEnabled}
|
|
/>
|
|
</SettingRow>
|
|
<RangeSetting
|
|
label="Main brush duck amount"
|
|
value={mainBrushDuckAmount}
|
|
onChange={handleAudioRange('mainBrushDuckAmount')}
|
|
disabled={!mainBrushDuckEnabled}
|
|
/>
|
|
<SettingHelp>
|
|
Lowers rover audio only while the main brush is running.
|
|
</SettingHelp>
|
|
</CardFrame>
|
|
<CardFrame title="Connection" bodyClassName="space-y-1 p-1 text-sm">
|
|
<SettingRow>
|
|
<span className="font-semibold text-white">Transport</span>
|
|
<select
|
|
value={connectionTransport}
|
|
onChange={handleTransportChange}
|
|
className="field-input min-w-28 px-1 py-0.5 text-sm"
|
|
>
|
|
<option value="websocket">WebSocket</option>
|
|
<option value="polling">Polling</option>
|
|
</select>
|
|
</SettingRow>
|
|
<SettingHelp>Switching reconnects your session.</SettingHelp>
|
|
</CardFrame>
|
|
<CardFrame title="Inter-instance" bodyClassName="space-y-1 p-1 text-sm">
|
|
<SettingRow className="grid-cols-[auto_minmax(0,1fr)] max-[420px]:grid-cols-[auto_minmax(0,1fr)]">
|
|
<input
|
|
type="checkbox"
|
|
className="h-3.5 w-3.5 accent-emerald-500"
|
|
checked={interInstanceTransferSettings}
|
|
onChange={handleInterInstanceTransferSettings}
|
|
/>
|
|
<span className="font-semibold text-white">Transfer settings when opening external servers</span>
|
|
</SettingRow>
|
|
<SettingHelp>
|
|
Sends this browser's saved identity and page settings to the destination server automatically.
|
|
</SettingHelp>
|
|
</CardFrame>
|
|
</div>
|
|
</TabPanel>
|
|
<TabPanel id="admin">
|
|
<div className="space-y-0.5">
|
|
<CardFrame title="Manual OI commands" bodyClassName="space-y-0.5 text-sm">
|
|
<div className="flex flex-wrap gap-0.5">
|
|
{manualTabs.map((tab) => (
|
|
<button
|
|
key={tab.key}
|
|
type="button"
|
|
onClick={() => sendOiCommand(tab.key)}
|
|
disabled={!canControl}
|
|
className="button-dark text-xs disabled:opacity-30"
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</CardFrame>
|
|
<CardFrame title="Sensor stream" bodyClassName="space-y-0.5 text-sm">
|
|
<div className="flex gap-0.5">
|
|
{sensorButtons.map((btn) => (
|
|
<button
|
|
key={btn.key}
|
|
type="button"
|
|
onClick={() => handleSensorToggle(btn.enable)}
|
|
disabled={!canControl}
|
|
className="flex-1 button-dark text-xs disabled:opacity-30"
|
|
>
|
|
{btn.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
{!canControl && <p className="text-xs text-slate-500">Assign a rover to toggle streams.</p>}
|
|
</CardFrame>
|
|
<AuthPanel />
|
|
<OvercurrentLimiterPanel />
|
|
<AdminPanel />
|
|
<SessionSnapshot />
|
|
<SocketLogPanel />
|
|
</div>
|
|
</TabPanel>
|
|
</TabPanels>
|
|
</Tabs>
|
|
);
|
|
}
|