bebahba

webui/src/components/DriverVideo/EmptyDriverVideoNotice.jsx

@@ -0,0 +1,48 @@
+// Empty Driver Video Notice
+// Purpose: Explains either an ordinary unassigned state or the recent reason a rover assignment was removed.
+// Scope: Owns only the centered notice content; each video layout remains responsible for its own stage dimensions and framing.
+import { useSessionSelector } from '../../context/SessionContext.jsx';
+import { useSharedClock } from '../../hooks/useSharedClock.js';
+
+const REMOVAL_NOTICE_VISIBLE_MS = 2 * 60 * 1000;
+
+export default function EmptyDriverVideoNotice() {
+  const removalNotice = useSessionSelector((state) => state.roverRemovalNotice || null);
+  const now = useSharedClock(1000, Boolean(removalNotice?.receivedAt));
+  const noticeAgeMs = removalNotice?.receivedAt ? now - removalNotice.receivedAt : Infinity;
+
+  /*
+    A forced removal needs to explain itself where the video was, because the
+    following session sync can only report that no rover is assigned. Keeping
+    the message for a bounded period preserves that context without allowing an
+    old moderation or safety notice to describe an unrelated later wait.
+  */
+  const showRemovalNotice = Boolean(
+    removalNotice?.message && noticeAgeMs <= REMOVAL_NOTICE_VISIBLE_MS,
+  );
+  const title = showRemovalNotice
+    ? removalNotice.title || 'Removed from rover'
+    : 'No rover assigned';
+  const message = showRemovalNotice
+    ? removalNotice.message
+    : 'You are not currently assigned to a rover.';
+
+  return (
+    <div className="flex h-full w-full items-center justify-center p-4 text-center">
+      <div
+        className={`mx-auto flex max-w-md flex-col gap-1 rounded border px-4 py-3 ${
+          showRemovalNotice
+            ? 'border-amber-300/60 bg-amber-950/35 text-amber-50'
+            : 'border-slate-700/70 bg-slate-950/35 text-slate-300'
+        }`}
+      >
+        <div className={showRemovalNotice ? 'text-sm font-semibold text-amber-100' : 'text-sm font-semibold text-slate-200'}>
+          {title}
+        </div>
+        <div className={showRemovalNotice ? 'text-sm text-amber-50/90' : 'text-sm text-slate-400'}>
+          {message}
+        </div>
+      </div>
+    </div>
+  );
+}

webui/src/components/DriverVideo/index.jsx

@@ -11,46 +11,7 @@ import LowBatteryOverlay from '../HudOverlays/LowBatteryOverlay/index.jsx';
 import DriverBottomStrip from '../HudOverlays/DriverBottomStrip/index.jsx';
 import HudChatInput from '../HudOverlays/HudChatInput/index.jsx';
 import CardFrame from '../CardFrame/index.jsx';
-import { useSharedClock } from '../../hooks/useSharedClock.js';
-
-const REMOVAL_NOTICE_VISIBLE_MS = 2 * 60 * 1000;
-
-function EmptyDriverVideoNotice() {
-  const removalNotice = useSessionSelector((state) => state.roverRemovalNotice || null);
-  const now = useSharedClock(1000, Boolean(removalNotice?.receivedAt));
-  const noticeAgeMs = removalNotice?.receivedAt ? now - removalNotice.receivedAt : Infinity;
-  /*
-    Removal explanations should feel immediate and contextual. After a short
-    window, falling back to the neutral no-rover state avoids showing an old
-    moderation/safety message during unrelated later waiting periods.
-  */
-  const showRemovalNotice = Boolean(removalNotice?.message && noticeAgeMs <= REMOVAL_NOTICE_VISIBLE_MS);
-  const title = showRemovalNotice ? removalNotice.title || 'Removed from rover' : 'No rover assigned';
-  const message = showRemovalNotice
-    ? removalNotice.message
-    : 'You are not currently assigned to a rover.';
-
-  return (
-    <CardFrame hideHeader className="shrink-0">
-      <div className="panel-muted flex aspect-[4/3] items-center justify-center p-4 text-center">
-        <div
-          className={`mx-auto flex max-w-md flex-col gap-1 rounded border px-4 py-3 ${
-            showRemovalNotice
-              ? 'border-amber-300/60 bg-amber-950/35 text-amber-50'
-              : 'border-slate-700/70 bg-slate-950/35 text-slate-300'
-          }`}
-        >
-          <div className={showRemovalNotice ? 'text-sm font-semibold text-amber-100' : 'text-sm font-semibold text-slate-200'}>
-            {title}
-          </div>
-          <div className={showRemovalNotice ? 'text-sm text-amber-50/90' : 'text-sm text-slate-400'}>
-            {message}
-          </div>
-        </div>
-      </div>
-    </CardFrame>
-  );
-}
+import EmptyDriverVideoNotice from './EmptyDriverVideoNotice.jsx';
 
 export default function DriverVideo({ layoutFormat = 'desktop' }) {
   const roverId = useSessionSelector((state) => state.session?.assignment?.roverId ?? null);
@@ -58,7 +19,15 @@ export default function DriverVideo({ layoutFormat = 'desktop' }) {
   const lastControlIntentAt = useControlSelector((control) => control.state.lastControlIntentAt);
 
   if (!roverId) {
-    return <EmptyDriverVideoNotice />;
+    return (
+      <CardFrame hideHeader className="shrink-0">
+        {/* The legacy page keeps its existing muted 4:3 frame while sharing
+            the removal-message behavior with the current video surface. */}
+        <div className="panel-muted aspect-[4/3]">
+          <EmptyDriverVideoNotice />
+        </div>
+      </CardFrame>
+    );
   }
 
   const mobileHud = layoutFormat !== 'desktop';

webui/src/components/HudOverlays/newgen/CornerPods/BottomLeftPod.jsx

@@ -4,6 +4,7 @@ import { useRef } from 'react';
 import { FaBullhorn, FaCrosshairs, FaLightbulb } from 'react-icons/fa';
 import { useControlActions, useControlSelector } from '../../../../controls/index.js';
 import { formatKeyLabel } from '../../../../controls/keymapUtils.js';
+import { useSessionSelector } from '../../../../context/SessionContext.jsx';
 import useCanControlRover from '../../../../hooks/useCanControlRover.js';
 import KeyPill from '../../../vip/VipAudioUploadCard/KeyPill.jsx';
 import HornSettingsExpansion from './HornSettingsExpansion.jsx';
@@ -35,6 +36,9 @@ function RoundControl({ label, icon, keyLabel, active, tone, disabled = false, o
 export default function BottomLeftPod({ roverId }) {
   const [open, setOpen] = usePodVisibility('peripherals', true);
   const [hornSettingsOpen, setHornSettingsOpen] = usePodVisibility('hornSettings', false);
+  const roomLightsLockedOn = useSessionSelector(
+    (state) => Boolean(state.session?.homeAssistant?.lightPolicy?.lockedOn),
+  );
   const headlight = useControlSelector((control) => control.pipeline?.headlight);
   const laser = useControlSelector((control) => control.pipeline?.laser);
   const hornDevice = useControlSelector((control) => control.pipeline?.horn);
@@ -78,7 +82,11 @@ export default function BottomLeftPod({ roverId }) {
               remain interactive because they do not mutate rover hardware. */}
           {hornDevice ? <RoundControl label="Horn" icon={FaBullhorn} keyLabel={formatKeyLabel(keymap?.hornHonk?.[0])} active={hornActive} tone="horn" disabled={!canControl} large onPointerDown={startHornPointer} onPointerUp={stopHornPointer} className="absolute bottom-1 left-1" /> : null}
           {headlight ? <RoundControl label="Headlight" icon={FaLightbulb} keyLabel={formatKeyLabel(keymap?.headlightToggle?.[0])} active={headlightOn} disabled={!canControl} onClick={() => setHeadlight(!headlightOn)} className="absolute left-[1.979rem] top-[0.662rem]" /> : null}
-          {laser ? <RoundControl label="Laser" icon={FaCrosshairs} keyLabel={formatKeyLabel(keymap?.laserToggle?.[0])} active={laserOn} disabled={!canControl} onClick={() => setLaser(!laserOn)} className="absolute left-[5.338rem] top-[4.021rem]" /> : null}
+          {/* The room-light lock deliberately blocks laser activation because
+              the laser is only intended for use while the room is dark. This
+              mirrors the old desktop control's visible disabled state; turn
+              ownership remains the other independent control restriction. */}
+          {laser ? <RoundControl label="Laser" icon={FaCrosshairs} keyLabel={formatKeyLabel(keymap?.laserToggle?.[0])} active={laserOn} disabled={!canControl || roomLightsLockedOn} onClick={() => setLaser(!laserOn)} className="absolute left-[5.338rem] top-[4.021rem]" /> : null}
           <CornerPodToggle corner="bottom-left" expanded label="Hide rover controls" onClick={() => setOpen(false)} />
         </div>
       ) : (

webui/src/components/NewDriveVideo/index.jsx

@@ -12,6 +12,7 @@ import { useSessionSelector } from '../../context/SessionContext.jsx';
 import { useControlSelector } from '../../controls/index.js';
 import { useDriverVideoModePolicy } from '../../hooks/useDriverVideoModePolicy.js';
 import { useDriverLayout } from '../../layouts/driver/DriverLayoutContext.jsx';
+import EmptyDriverVideoNotice from '../DriverVideo/EmptyDriverVideoNotice.jsx';
 
 // Mobile keeps the same HUD composition and coordinate system as desktop, but its
 // physically smaller video stage needs the complete interface reduced as one unit.
@@ -28,8 +29,14 @@ export default function NewDriveVideo() {
 
   if (!roverId) {
     return (
-      <div className={`flex min-h-0 w-full items-center justify-center overflow-hidden text-[0.8rem] text-neutral-300 ${mobileHud ? 'aspect-[4/3] shrink-0' : 'h-screen'}`}>
-        No rover assigned
+      <div
+        className={`min-h-0 w-full overflow-hidden bg-black ${mobileHud ? 'aspect-[4/3] shrink-0' : 'h-screen'}`}
+        aria-label="No rover assigned"
+      >
+        {/* Keep the unassigned state inside the same solid video-shaped stage
+            so removing a rover does not expose the page background or leave a
+            visually empty hole where the live picture had been. */}
+        <EmptyDriverVideoNotice />
       </div>
     );
   }