mobile bobile

This commit is contained in:
legop3
2026-07-11 13:46:02 -04:00
parent 65b54f01d2
commit 71706fb1b9
7 changed files with 41 additions and 34 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -78,8 +78,8 @@
<script defer src="https://analytics.otter.land/script.js" data-website-id="82dd56a5-db44-4279-bd1e-a4d9fee39af7" data-domains="rover.otter.land"></script> <script defer src="https://analytics.otter.land/script.js" data-website-id="82dd56a5-db44-4279-bd1e-a4d9fee39af7" data-domains="rover.otter.land"></script>
<script defer src="https://analytics.otter.land/recorder.js" data-website-id="82dd56a5-db44-4279-bd1e-a4d9fee39af7" data-domains="rover.otter.land" data-sample-rate="0.15" data-mask-level="moderate" data-max-duration="300000"></script> <script defer src="https://analytics.otter.land/recorder.js" data-website-id="82dd56a5-db44-4279-bd1e-a4d9fee39af7" data-domains="rover.otter.land" data-sample-rate="0.15" data-mask-level="moderate" data-max-duration="300000"></script>
<title>Roomba Rover</title> <title>Roomba Rover</title>
<script type="module" crossorigin src="/assets/index-Dp_4HZ7O.js"></script> <script type="module" crossorigin src="/assets/index-CLAMBTKs.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-LTXnNyH3.css"> <link rel="stylesheet" crossorigin href="/assets/index-B_1KvRVw.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
+27 -20
View File
@@ -5,6 +5,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import CardFrame from '../CardFrame/index.jsx'; import CardFrame from '../CardFrame/index.jsx';
import GPIOToggleControl from '../GPIOToggleControl/index.jsx'; import GPIOToggleControl from '../GPIOToggleControl/index.jsx';
import ControlPadPanel from '../MobileControls/ControlPadPanel.jsx';
import ReplaySourcesPanel from '../ReplaySourcesPanel/index.jsx'; import ReplaySourcesPanel from '../ReplaySourcesPanel/index.jsx';
import KeyPill from './VipAudioUploadCard/KeyPill.jsx'; import KeyPill from './VipAudioUploadCard/KeyPill.jsx';
import { useSessionActions, useSessionSelector } from '../../context/SessionContext.jsx'; import { useSessionActions, useSessionSelector } from '../../context/SessionContext.jsx';
@@ -351,6 +352,25 @@ function PtzMobileZoomButtons({ disabled = false }) {
); );
} }
function PtzMobileControlsPanel({ ptz, disabled = false }) {
return (
<>
<PtzMobileZoomButtons disabled={disabled} />
<CardFrame title="Movement" bodyClassName="h-56 min-h-0 p-0.5">
{/*
Reuse the rover mobile movement card instead of building a second PTZ
joystick. Its drive vector goes through the shared internal control
layer, where the PTZ adapter already converts movement plus speed mode
into camera pan/tilt commands.
*/}
<ControlPadPanel disabled={disabled} />
</CardFrame>
<PtzMobileZoomButtons disabled={disabled} />
<PtzLightingControls ptz={ptz} disabled={disabled} />
</>
);
}
function keyLabelFor(keymap, actionId) { function keyLabelFor(keymap, actionId) {
return formatKeyLabel(keymap?.[actionId]?.[0]); return formatKeyLabel(keymap?.[actionId]?.[0]);
} }
@@ -437,6 +457,12 @@ function PtzController({ open, onClose, layout = 'desktop' }) {
const mobileSidebar = ( const mobileSidebar = (
<> <>
<div className="shrink-0">
<PtzMobileControlsPanel ptz={ptz} disabled={!isOperator} />
</div>
<div className="shrink-0">
<ReplaySourcesPanel panelId="ptz-controller-replay-mobile" />
</div>
<div className="shrink-0"> <div className="shrink-0">
<PtzStatePanel <PtzStatePanel
ptz={ptz} ptz={ptz}
@@ -445,33 +471,14 @@ function PtzController({ open, onClose, layout = 'desktop' }) {
releaseDisabled={releasePending} releaseDisabled={releasePending}
/> />
</div> </div>
{isOperator ? (
<>
<div className="shrink-0">
<PtzLightingControls ptz={ptz} />
</div>
<div className="shrink-0">
<PtzMobileZoomButtons />
</div>
</>
) : (
<div className="shrink-0">
<CardFrame title="Controls" bodyClassName="p-1 text-xs text-slate-400">
Live PTZ controls unlock when your camera turn is active.
</CardFrame>
</div>
)}
<div className="shrink-0"> <div className="shrink-0">
<PtzQueueList queue={ptz?.queue} operatorLabel={ptz?.operatorLabel} /> <PtzQueueList queue={ptz?.queue} operatorLabel={ptz?.operatorLabel} />
</div> </div>
<div className="shrink-0">
<ReplaySourcesPanel panelId="ptz-controller-replay-mobile" />
</div>
</> </>
); );
const sidebarWidthClass = isMobile const sidebarWidthClass = isMobile
? 'grid-cols-[minmax(0,1fr)_12rem]' ? 'grid-cols-[minmax(0,1fr)_14rem]'
: 'grid-cols-[minmax(0,1fr)_20rem]'; : 'grid-cols-[minmax(0,1fr)_20rem]';
const controller = ( const controller = (