@ksp-gonogo/kerbcast-react 1.10.2 → 1.11.0-rc.10

package/src/CameraFeed.tsx

@@ -1,5 +1,14 @@
 import type { CameraState, KerbcastClient } from "@ksp-gonogo/kerbcast";
-import { PanZoomController, QualityPreset, TrackMode } from "@ksp-gonogo/kerbcast";
+import {
+  CameraKind,
+  CommandAimKind,
+  CommandTargetEligibility,
+  PanZoomController,
+  QualityPreset,
+  TrackMode,
+  effectiveCommandTrack,
+  formatCommandRange,
+} from "@ksp-gonogo/kerbcast";
 import {
   forwardRef,
   useCallback,
@@ -23,11 +32,14 @@ import {
   type FeedAction,
   type FeedActionBarEntry,
 } from "./FeedActionBar";
+import { CommandBlank, CommandBrackets, type CommandBracketOverlay } from "./CommandBrackets";
+import { useCommandDisplayUt } from "./hooks/useCommandDisplayUt";
 import { useKerbcastCameras } from "./hooks/useKerbcastCameras";
 import { useKerbcastInFlight } from "./hooks/useKerbcastInFlight";
 import { useKerbcastStream } from "./hooks/useKerbcastStream";
 import { useRecordings } from "./hooks/useRecordings";
-import { useReportDisplaySize } from "./hooks/useReportDisplaySize";
+import { DEFAULT_FEED_ASPECT, useReportDisplaySize } from "./hooks/useReportDisplaySize";
+import { useTargetBracketsPreference } from "./hooks/useTargetBracketsPreference";
 import { StandbyIcon } from "./StandbyIcon";
 import { isCameraDestroyed } from "./lifecycle";
 import { usePortalMenu } from "./menuPositioning";
@@ -290,6 +302,26 @@ export interface CameraFeedProps {
    * {@link CameraStreamHook}.
    */
   useStream?: CameraStreamHook;
+  /**
+   * Draw target brackets and their readout over command camera feeds, with a
+   * per-feed "Target brackets" toggle in the action bar (on by default,
+   * remembered per camera in this browser). Default true. A blanked command
+   * feed shows its reason whatever this is set to.
+   */
+  enableTargetBrackets?: boolean;
+  /**
+   * Extra drawing, corner styling and readout text for this feed's target
+   * brackets. See {@link CommandBracketOverlay}.
+   */
+  targetBracketOverlay?: CommandBracketOverlay;
+  /**
+   * Mission UT the displayed video was captured at, for a host running its
+   * own delayed playout. Picks which command-track transition is in force and
+   * ages the readout. Defaults to the displayed frame's own capture UT where
+   * the browser reports frame RTP timestamps, else the client's capture
+   * clock interpolated to now.
+   */
+  displayUt?: number;
 }
 
 export interface CameraFeedHandle {
@@ -328,6 +360,9 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
       trailingActions,
       showActions = true,
       useStream,
+      enableTargetBrackets = true,
+      targetBracketOverlay,
+      displayUt: displayUtProp,
     },
     ref,
   ) {
@@ -427,7 +462,14 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
     // built-in hook is the default. See CameraStreamHook's rules-of-hooks note.
     const resolveStream = useStream ?? useKerbcastStream;
     const stream = resolveStream(flightId);
-    const videoRef = useRef<HTMLVideoElement>(null);
+    const videoRef = useRef<HTMLVideoElement | null>(null);
+    /* Mirrors videoRef as state so the bracket overlay can measure the element
+       once it mounts. Setting a ref never remounts the video. */
+    const [videoEl, setVideoEl] = useState<HTMLVideoElement | null>(null);
+    const attachVideo = useCallback((el: HTMLVideoElement | null) => {
+      videoRef.current = el;
+      setVideoEl(el);
+    }, []);
     // The feed frame; fullscreen targets this and ResizeObserver measures it.
     const wrapRef = useRef<HTMLDivElement>(null);
     useEffect(() => {
@@ -533,6 +575,26 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
     const supportsPitch =
       !!camera && camera.panPitchMax - camera.panPitchMin > 0;
 
+    /* Command camera feeds: target brackets, readout and blank label. */
+    const commandCamera =
+      camera?.kind === CameraKind.Command && !isDestroyed ? camera : null;
+    const isCommandFeed = commandCamera !== null;
+    const commandTrack = commandCamera?.commandTrack ?? null;
+    const commandDisplayUt = useCommandDisplayUt(
+      commandTrack !== null,
+      displayUtProp,
+      commandTrack?.events,
+      commandCamera?.flightId ?? null,
+      videoEl,
+    );
+    const commandState = commandTrack
+      ? effectiveCommandTrack(commandTrack, commandDisplayUt?.ut)
+      : null;
+    const [bracketsOn, toggleBrackets] = useTargetBracketsPreference(
+      commandCamera ? (commandCamera.commandCentre?.stationId ?? String(commandCamera.flightId)) : null,
+    );
+    const targetBracketsAvailable = enableTargetBrackets && isCommandFeed;
+
     // -------------------------------------------------------------------------
     // Camera selection callbacks (Next/Prev, picker)
     // onSelectCamera is ONLY called on explicit user picks, never on auto-latch.
@@ -678,10 +740,36 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
     // -------------------------------------------------------------------------
     // Display-size reporting (auto-resolution). The feed self-measures its
     // rendered box and reports it per-consumer; the sidecar maxes across
-    // consumers. Reports the real w x h (part cams are not square). Disabled by
-    // `renderSize="none"`. See useReportDisplaySize for debounce / bucketing.
+    // consumers. Auto picks the resolution, never the shape: the request and
+    // the feed's own box keep the camera's configured capture aspect (16:9
+    // when unknown). Disabled by `renderSize="none"`. The video and the
+    // sidecar's render size let it ignore a resize that only follows the
+    // stream. See useReportDisplaySize for debounce / bucketing / the guard.
     // -------------------------------------------------------------------------
-    useReportDisplaySize(flightId, wrapRef, { enabled: renderSize === "auto" });
+    const baseW = camera?.maxWidth ?? 0;
+    const baseH = camera?.maxHeight ?? 0;
+    const hasBase = baseW > 0 && baseH > 0;
+    const feedAspect = hasBase ? baseW / baseH : DEFAULT_FEED_ASPECT;
+    const feedShape = useMemo(
+      () =>
+        ({
+          "--kc-feed-w": hasBase ? baseW : 16,
+          "--kc-feed-h": hasBase ? baseH : 9,
+        }) as React.CSSProperties,
+      [hasBase, baseW, baseH],
+    );
+    const renderedW = camera?.renderWidth ?? 0;
+    const renderedH = camera?.renderHeight ?? 0;
+    const renderedSize = useMemo(
+      () => ({ width: renderedW, height: renderedH }),
+      [renderedW, renderedH],
+    );
+    useReportDisplaySize(flightId, wrapRef, {
+      enabled: renderSize === "auto",
+      aspect: feedAspect,
+      videoRef,
+      streamSize: renderedSize,
+    });
 
     // -------------------------------------------------------------------------
     // UI state
@@ -766,6 +854,36 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
       [client, flightId, trackMode, closeTrackingMenu],
     );
 
+    // -------------------------------------------------------------------------
+    // Command camera target picker. Lists every craft the game offers; the
+    // ineligible ones stay visible but disabled with the game's reason, and
+    // the current target follows the published subjectPersistentId. Picking
+    // one aims the camera at it. Hidden while a command authority holds the
+    // aim lock, since only it can aim then.
+    // -------------------------------------------------------------------------
+    const commandTargets = commandCamera?.commandCentre?.targets ?? [];
+    const commandTargetId = commandCamera?.commandCentre?.subjectPersistentId ?? 0;
+    const commandLocked = commandCamera?.commandTrack?.authority != null;
+    const commandTargetAvailable =
+      isCommandFeed && !disableManualControls && !commandLocked && commandTargets.length > 0;
+    const commandTargetMenuId = useId();
+    const commandTargetMenu = usePortalMenu({
+      maxWidth: MENU_MAX_WIDTH,
+      maxHeight: MENU_MAX_HEIGHT,
+      align: "end",
+    });
+    const closeCommandTargetMenu = commandTargetMenu.close;
+    const selectCommandTarget = useCallback(
+      (persistentId: number) => {
+        if (flightId === null) return;
+        client
+          .setCommandAim(flightId, { kind: CommandAimKind.Vessel, persistentId })
+          .catch(() => {});
+        closeCommandTargetMenu();
+      },
+      [client, flightId, closeCommandTargetMenu],
+    );
+
     // -------------------------------------------------------------------------
     // REC control (opt-in). A stateful toggle that starts/stops a client-side
     // recording of this feed via the recordings store; state is read from the
@@ -899,6 +1017,13 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
     const pipLabel = isPip ? "Exit picture in picture" : "Picture in picture";
     const fullscreenLabel = isFullscreen ? "Exit fullscreen" : "Enter fullscreen";
     const recordingLabel = recordingActive ? "Stop recording" : "Start recording";
+    const bracketsLabel = "Target brackets";
+    const commandTargetName = commandTargets.find(
+      (t) => t.persistentId === commandTargetId,
+    )?.vesselName;
+    const commandTargetLabel = commandTargetName
+      ? `Watching ${commandTargetName}`
+      : "Choose target";
 
     const entries: FeedActionBarEntry[] = [
       ...(actions?.map(feedActionToEntry) ?? []),
@@ -907,7 +1032,8 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
             {
               id: "quality",
               label: "Quality",
-              stateful: false,
+              /* Stays inline: its menu anchors on this button, which the overflow menu unmounts on click. */
+              stateful: true,
               render: () => (
                 <OverlayIconButton
                   ref={qualityMenu.triggerRef}
@@ -952,6 +1078,52 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
             } satisfies FeedActionBarEntry,
           ]
         : []),
+      ...(targetBracketsAvailable
+        ? [
+            {
+              id: "target-brackets",
+              label: bracketsLabel,
+              stateful: true,
+              render: () => (
+                <OverlayIconButton
+                  type="button"
+                  aria-label={bracketsLabel}
+                  aria-pressed={bracketsOn}
+                  title={bracketsLabel}
+                  $active={bracketsOn}
+                  onClick={toggleBrackets}
+                >
+                  <TargetBracketsIcon />
+                </OverlayIconButton>
+              ),
+            } satisfies FeedActionBarEntry,
+          ]
+        : []),
+      ...(commandTargetAvailable
+        ? [
+            {
+              id: "command-target",
+              label: commandTargetLabel,
+              /* Stays inline: its menu anchors on this button, which the overflow menu unmounts on click. */
+              stateful: true,
+              render: () => (
+                <OverlayIconButton
+                  ref={commandTargetMenu.triggerRef}
+                  type="button"
+                  aria-label="Choose target"
+                  aria-haspopup="menu"
+                  aria-expanded={commandTargetMenu.open}
+                  aria-controls={commandTargetMenuId}
+                  title={commandTargetLabel}
+                  $active={commandTargetMenu.open}
+                  onClick={commandTargetMenu.toggle}
+                >
+                  <CommandTargetIcon />
+                </OverlayIconButton>
+              ),
+            } satisfies FeedActionBarEntry,
+          ]
+        : []),
       ...(trackingAvailable
         ? [
             {
@@ -1052,6 +1224,8 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
         fullscreenAvailable ||
         qualityAvailable ||
         trackingAvailable ||
+        targetBracketsAvailable ||
+        commandTargetAvailable ||
         enableRecording);
     const hasActionBar =
       showActions &&
@@ -1084,254 +1258,309 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
     ) : null;
 
     return (
-      <Stage ref={wrapRef} $pinned={chromePinned}>
-        {flightId === null ? (
-          <>
-            <Empty>{emptyMessage}</Empty>
-            {topOverlay}
-            {actionBar}
-          </>
-        ) : (
-          <>
-            <StyledVideo
-              ref={videoRef}
-              autoPlay
-              playsInline
-              muted
-              controls={false}
-              onClick={() => setChromePinned((v) => !v)}
-            />
-            {topOverlay}
-            {actionBar}
-            {qualityAvailable &&
-              qualityMenu.open &&
-              qualityMenu.position &&
-              camera &&
-              createPortal(
-                <QualityMenu
-                  ref={qualityMenu.menuRef}
-                  id={qualityMenuId}
-                  role="menu"
-                  aria-label="Quality"
-                  style={qualityMenu.position}
-                >
-                  <CameraMenuItem
-                    type="button"
-                    role="menuitemradio"
-                    aria-checked={camera.viewerQuality == null}
-                    $selected={camera.viewerQuality == null}
-                    onClick={() => selectQuality(null)}
+      <FeedBox style={feedShape}>
+        <Stage ref={wrapRef} $pinned={chromePinned}>
+          {flightId === null ? (
+            <>
+              <Empty>{emptyMessage}</Empty>
+              {topOverlay}
+              {actionBar}
+            </>
+          ) : (
+            <>
+              <StyledVideo
+                ref={attachVideo}
+                autoPlay
+                playsInline
+                muted
+                controls={false}
+                onClick={() => setChromePinned((v) => !v)}
+              />
+              {topOverlay}
+              {actionBar}
+              {qualityAvailable &&
+                qualityMenu.open &&
+                qualityMenu.position &&
+                camera &&
+                createPortal(
+                  <QualityMenu
+                    ref={qualityMenu.menuRef}
+                    id={qualityMenuId}
+                    role="menu"
+                    aria-label="Quality"
+                    style={qualityMenu.position}
                   >
-                    Auto
-                  </CameraMenuItem>
-                  {QUALITY_PRESETS.map(({ preset, label, scale }) => (
                     <CameraMenuItem
-                      key={preset}
                       type="button"
                       role="menuitemradio"
-                      aria-checked={camera.viewerQuality === preset}
-                      $selected={camera.viewerQuality === preset}
-                      onClick={() => selectQuality(preset)}
+                      aria-checked={camera.viewerQuality == null}
+                      $selected={camera.viewerQuality == null}
+                      onClick={() => selectQuality(null)}
                     >
-                      {label} ({presetDim(camera.operatorWidth, scale)}×
-                      {presetDim(camera.operatorHeight, scale)})
+                      Auto
                     </CameraMenuItem>
-                  ))}
-                  <QualityMeta role="status">
-                    now {camera.renderWidth}×{camera.renderHeight}
-                    {qualityThrottled ? " · throttled" : ""}
-                  </QualityMeta>
-                </QualityMenu>,
-                document.body,
+                    {QUALITY_PRESETS.map(({ preset, label, scale }) => (
+                      <CameraMenuItem
+                        key={preset}
+                        type="button"
+                        role="menuitemradio"
+                        aria-checked={camera.viewerQuality === preset}
+                        $selected={camera.viewerQuality === preset}
+                        onClick={() => selectQuality(preset)}
+                      >
+                        {label} ({presetDim(camera.operatorWidth, scale)}×
+                        {presetDim(camera.operatorHeight, scale)})
+                      </CameraMenuItem>
+                    ))}
+                    <QualityMeta role="status">
+                      now {camera.renderWidth}×{camera.renderHeight}
+                      {qualityThrottled ? " · throttled" : ""}
+                    </QualityMeta>
+                  </QualityMenu>,
+                  document.body,
+                )}
+              {trackingAvailable &&
+                trackingMenu.open &&
+                trackingMenu.position &&
+                camera &&
+                createPortal(
+                  <QualityMenu
+                    ref={trackingMenu.menuRef}
+                    id={trackingMenuId}
+                    role="menu"
+                    aria-label="Auto-track"
+                    style={trackingMenu.position}
+                  >
+                    <CameraMenuItem
+                      type="button"
+                      role="menuitemradio"
+                      aria-checked={trackMode === TrackMode.ActiveVessel}
+                      $selected={trackMode === TrackMode.ActiveVessel}
+                      onClick={() => selectTrack(TrackMode.ActiveVessel)}
+                    >
+                      Track active vessel
+                    </CameraMenuItem>
+                    <CameraMenuItem
+                      type="button"
+                      role="menuitemradio"
+                      aria-checked={trackMode === TrackMode.Target}
+                      $selected={trackMode === TrackMode.Target}
+                      onClick={() => selectTrack(TrackMode.Target)}
+                    >
+                      Track target
+                    </CameraMenuItem>
+                  </QualityMenu>,
+                  document.body,
+                )}
+              {commandTargetAvailable &&
+                commandTargetMenu.open &&
+                commandTargetMenu.position &&
+                createPortal(
+                  <CameraMenu
+                    ref={commandTargetMenu.menuRef}
+                    id={commandTargetMenuId}
+                    role="menu"
+                    aria-label="Target"
+                    style={commandTargetMenu.position}
+                  >
+                    {commandTargets.map((t) => {
+                      const eligible = t.eligibility === CommandTargetEligibility.Ok;
+                      const current = t.persistentId === commandTargetId;
+                      return (
+                        <CameraMenuItem
+                          key={t.persistentId}
+                          type="button"
+                          role="menuitemradio"
+                          aria-checked={current}
+                          $selected={current}
+                          disabled={!eligible}
+                          title={eligible ? undefined : t.eligibilityText}
+                          onClick={() => selectCommandTarget(t.persistentId)}
+                        >
+                          {t.vesselName}
+                          {t.rangeM != null ? ` · ${formatCommandRange(t.rangeM)}` : ""}
+                          {eligible ? "" : ` · ${t.eligibilityText}`}
+                        </CameraMenuItem>
+                      );
+                    })}
+                  </CameraMenu>,
+                  document.body,
+                )}
+              {commandState &&
+                !outOfFlight &&
+                (
+                  <>
+                    {commandState.blank && <CommandBlank reason={commandState.blank} />}
+                    {targetBracketsAvailable && bracketsOn && (
+                      <CommandBrackets
+                        state={commandState}
+                        displayUt={commandDisplayUt?.ut ?? commandTrack!.ut}
+                        utSource={commandDisplayUt?.source ?? null}
+                        video={videoEl}
+                        fallbackSize={
+                          camera ? { width: camera.renderWidth, height: camera.renderHeight } : null
+                        }
+                        overlay={targetBracketOverlay}
+                      />
+                    )}
+                  </>
+                )}
+              {outOfFlight ? (
+                showStandbyIcon && (
+                  <StandbyOverlay role="status" aria-label="Standby, no active flight">
+                    <StandbyIconWrap>
+                      <StandbyIcon size={40} />
+                    </StandbyIconWrap>
+                  </StandbyOverlay>
+                )
+              ) : (
+                isDestroyed && (
+                  <SignalLostOverlay role="status" aria-label="Signal lost">
+                    <SignalLostText $animated={effectiveShowStatic}>
+                      SIGNAL LOST
+                    </SignalLostText>
+                  </SignalLostOverlay>
+                )
               )}
-            {trackingAvailable &&
-              trackingMenu.open &&
-              trackingMenu.position &&
-              camera &&
-              createPortal(
-                <QualityMenu
-                  ref={trackingMenu.menuRef}
-                  id={trackingMenuId}
-                  role="menu"
-                  aria-label="Auto-track"
-                  style={trackingMenu.position}
-                >
-                  <CameraMenuItem
+              {!outOfFlight && !effectiveShowStatic && isStale && !isDestroyed && (
+                <>
+                  <StaleScrim aria-hidden="true" />
+                  <StaleBadge role="status" aria-label="Feed stale">
+                    <StaleIcon />
+                    Stale
+                  </StaleBadge>
+                </>
+              )}
+              {recordingActive && armingActive && (
+                <ArmingBadge role="status" aria-label="Arming">
+                  <ArmingDot aria-hidden="true" />
+                  ARMING
+                </ArmingBadge>
+              )}
+              {recordingActive && !armingActive && (
+                <RecBadge role="status" aria-label="Recording">
+                  <RecDot aria-hidden="true" />
+                  REC {formatElapsed(recordingElapsedMs)}
+                </RecBadge>
+              )}
+              {showZoom && (
+                <ZoomControlsWrap $disabled={manualDisabled} aria-hidden={manualDisabled}>
+                  <ZoomButton
                     type="button"
-                    role="menuitemradio"
-                    aria-checked={trackMode === TrackMode.ActiveVessel}
-                    $selected={trackMode === TrackMode.ActiveVessel}
-                    onClick={() => selectTrack(TrackMode.ActiveVessel)}
+                    aria-label="Zoom in"
+                    $pos="top"
+                    disabled={manualDisabled}
+                    onPointerDown={() =>
+                      controllerRef.current?.setZoomRate(1)
+                    }
+                    onPointerUp={() => controllerRef.current?.setZoomRate(0)}
+                    onPointerLeave={() => controllerRef.current?.setZoomRate(0)}
+                    onPointerCancel={() => controllerRef.current?.setZoomRate(0)}
+                    onClick={(e) => {
+                      if (e.detail === 0) controllerRef.current?.nudgeZoom(-1);
+                    }}
                   >
-                    Track active vessel
-                  </CameraMenuItem>
-                  <CameraMenuItem
+                    +
+                  </ZoomButton>
+                  <FovSlider
+                    type="range"
+                    aria-label="Zoom"
+                    min={camera.fovMin}
+                    max={camera.fovMax}
+                    step={0.5}
+                    value={sliderFov}
+                    disabled={manualDisabled}
+                    onChange={(e) => {
+                      const v = Number(e.target.value);
+                      controllerRef.current?.fovSliderInput(v);
+                    }}
+                    onPointerDown={() => {
+                      controllerRef.current?.setFovSliderDragging(true);
+                    }}
+                    onPointerUp={() => {
+                      controllerRef.current?.setFovSliderDragging(false);
+                    }}
+                    onPointerCancel={() => {
+                      controllerRef.current?.setFovSliderDragging(false);
+                    }}
+                  />
+                  <ZoomButton
                     type="button"
-                    role="menuitemradio"
-                    aria-checked={trackMode === TrackMode.Target}
-                    $selected={trackMode === TrackMode.Target}
-                    onClick={() => selectTrack(TrackMode.Target)}
+                    aria-label="Zoom out"
+                    $pos="bottom"
+                    disabled={manualDisabled}
+                    onPointerDown={() => controllerRef.current?.setZoomRate(-1)}
+                    onPointerUp={() => controllerRef.current?.setZoomRate(0)}
+                    onPointerLeave={() => controllerRef.current?.setZoomRate(0)}
+                    onPointerCancel={() => controllerRef.current?.setZoomRate(0)}
+                    onClick={(e) => {
+                      if (e.detail === 0) controllerRef.current?.nudgeZoom(1);
+                    }}
                   >
-                    Track target
-                  </CameraMenuItem>
-                </QualityMenu>,
-                document.body,
+                    &#8722;
+                  </ZoomButton>
+                </ZoomControlsWrap>
               )}
-            {outOfFlight ? (
-              showStandbyIcon && (
-                <StandbyOverlay role="status" aria-label="Standby, no active flight">
-                  <StandbyIconWrap>
-                    <StandbyIcon size={40} />
-                  </StandbyIconWrap>
-                </StandbyOverlay>
-              )
-            ) : (
-              isDestroyed && (
-                <SignalLostOverlay role="status" aria-label="Signal lost">
-                  <SignalLostText $animated={effectiveShowStatic}>
-                    SIGNAL LOST
-                  </SignalLostText>
-                </SignalLostOverlay>
-              )
-            )}
-            {!outOfFlight && !effectiveShowStatic && isStale && !isDestroyed && (
-              <>
-                <StaleScrim aria-hidden="true" />
-                <StaleBadge role="status" aria-label="Feed stale">
-                  <StaleIcon />
-                  Stale
-                </StaleBadge>
-              </>
-            )}
-            {recordingActive && armingActive && (
-              <ArmingBadge role="status" aria-label="Arming">
-                <ArmingDot aria-hidden="true" />
-                ARMING
-              </ArmingBadge>
-            )}
-            {recordingActive && !armingActive && (
-              <RecBadge role="status" aria-label="Recording">
-                <RecDot aria-hidden="true" />
-                REC {formatElapsed(recordingElapsedMs)}
-              </RecBadge>
-            )}
-            {showZoom && (
-              <ZoomControlsWrap $disabled={manualDisabled} aria-hidden={manualDisabled}>
-                <ZoomButton
-                  type="button"
-                  aria-label="Zoom in"
-                  $pos="top"
-                  disabled={manualDisabled}
-                  onPointerDown={() =>
-                    controllerRef.current?.setZoomRate(1)
-                  }
-                  onPointerUp={() => controllerRef.current?.setZoomRate(0)}
-                  onPointerLeave={() => controllerRef.current?.setZoomRate(0)}
-                  onPointerCancel={() => controllerRef.current?.setZoomRate(0)}
-                  onClick={(e) => {
-                    if (e.detail === 0) controllerRef.current?.nudgeZoom(-1);
-                  }}
+              {showPan && (
+                <PanControl
+                  role="group"
+                  aria-label="Pan camera"
+                  $disabled={manualDisabled}
+                  aria-hidden={manualDisabled}
                 >
-                  +
-                </ZoomButton>
-                <FovSlider
-                  type="range"
-                  aria-label="Zoom"
-                  min={camera.fovMin}
-                  max={camera.fovMax}
-                  step={0.5}
-                  value={sliderFov}
-                  disabled={manualDisabled}
-                  onChange={(e) => {
-                    const v = Number(e.target.value);
-                    controllerRef.current?.fovSliderInput(v);
-                  }}
-                  onPointerDown={() => {
-                    controllerRef.current?.setFovSliderDragging(true);
-                  }}
-                  onPointerUp={() => {
-                    controllerRef.current?.setFovSliderDragging(false);
-                  }}
-                  onPointerCancel={() => {
-                    controllerRef.current?.setFovSliderDragging(false);
-                  }}
-                />
-                <ZoomButton
-                  type="button"
-                  aria-label="Zoom out"
-                  $pos="bottom"
-                  disabled={manualDisabled}
-                  onPointerDown={() => controllerRef.current?.setZoomRate(-1)}
-                  onPointerUp={() => controllerRef.current?.setZoomRate(0)}
-                  onPointerLeave={() => controllerRef.current?.setZoomRate(0)}
-                  onPointerCancel={() => controllerRef.current?.setZoomRate(0)}
-                  onClick={(e) => {
-                    if (e.detail === 0) controllerRef.current?.nudgeZoom(1);
-                  }}
-                >
-                  &#8722;
-                </ZoomButton>
-              </ZoomControlsWrap>
-            )}
-            {showPan && (
-              <PanControl
-                role="group"
-                aria-label="Pan camera"
-                $disabled={manualDisabled}
-                aria-hidden={manualDisabled}
-              >
-                <PanArrow
-                  type="button"
-                  $dir="up"
-                  aria-label="Pan up"
-                  disabled={manualDisabled || !supportsPitch}
-                  onClick={() => controllerRef.current?.nudgePan(0, 1)}
-                >
-                  &#9650;
-                </PanArrow>
-                <PanArrow
-                  type="button"
-                  $dir="down"
-                  aria-label="Pan down"
-                  disabled={manualDisabled || !supportsPitch}
-                  onClick={() => controllerRef.current?.nudgePan(0, -1)}
-                >
-                  &#9660;
-                </PanArrow>
-                <PanArrow
-                  type="button"
-                  $dir="left"
-                  aria-label="Pan left"
-                  disabled={manualDisabled}
-                  onClick={() => controllerRef.current?.nudgePan(-1, 0)}
-                >
-                  &#9664;
-                </PanArrow>
-                <PanArrow
-                  type="button"
-                  $dir="right"
-                  aria-label="Pan right"
-                  disabled={manualDisabled}
-                  onClick={() => controllerRef.current?.nudgePan(1, 0)}
-                >
-                  &#9654;
-                </PanArrow>
-                <PanBall
-                  aria-hidden="true"
-                  title="Drag to pan"
-                  onPointerDown={manualDisabled ? undefined : handleBallDown}
-                  onPointerMove={manualDisabled ? undefined : handleBallMove}
-                  onPointerUp={manualDisabled ? undefined : handleBallUp}
-                  onPointerCancel={manualDisabled ? undefined : handleBallUp}
-                  style={{
-                    transform: `translate(${ballPos.x}px, ${ballPos.y}px)`,
-                  }}
-                />
-              </PanControl>
-            )}
-          </>
-        )}
-      </Stage>
+                  <PanArrow
+                    type="button"
+                    $dir="up"
+                    aria-label="Pan up"
+                    disabled={manualDisabled || !supportsPitch}
+                    onClick={() => controllerRef.current?.nudgePan(0, 1)}
+                  >
+                    &#9650;
+                  </PanArrow>
+                  <PanArrow
+                    type="button"
+                    $dir="down"
+                    aria-label="Pan down"
+                    disabled={manualDisabled || !supportsPitch}
+                    onClick={() => controllerRef.current?.nudgePan(0, -1)}
+                  >
+                    &#9660;
+                  </PanArrow>
+                  <PanArrow
+                    type="button"
+                    $dir="left"
+                    aria-label="Pan left"
+                    disabled={manualDisabled}
+                    onClick={() => controllerRef.current?.nudgePan(-1, 0)}
+                  >
+                    &#9664;
+                  </PanArrow>
+                  <PanArrow
+                    type="button"
+                    $dir="right"
+                    aria-label="Pan right"
+                    disabled={manualDisabled}
+                    onClick={() => controllerRef.current?.nudgePan(1, 0)}
+                  >
+                    &#9654;
+                  </PanArrow>
+                  <PanBall
+                    aria-hidden="true"
+                    title="Drag to pan"
+                    onPointerDown={manualDisabled ? undefined : handleBallDown}
+                    onPointerMove={manualDisabled ? undefined : handleBallMove}
+                    onPointerUp={manualDisabled ? undefined : handleBallUp}
+                    onPointerCancel={manualDisabled ? undefined : handleBallUp}
+                    style={{
+                      transform: `translate(${ballPos.x}px, ${ballPos.y}px)`,
+                    }}
+                  />
+                </PanControl>
+              )}
+            </>
+          )}
+        </Stage>
+      </FeedBox>
     );
   },
 );
@@ -1415,6 +1644,26 @@ function QualityIcon() {
   );
 }
 
+/* Target brackets: the top-left and bottom-right corners around a centre dot. */
+function TargetBracketsIcon() {
+  return (
+    <svg {...iconProps}>
+      <path d="M2.5 7V2.5H7M13.5 9v4.5H9" />
+      <circle cx="8" cy="8" r="1.2" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+/* Command camera target: a craft silhouette inside a selection ring. */
+function CommandTargetIcon() {
+  return (
+    <svg {...iconProps}>
+      <circle cx="8" cy="8" r="6" />
+      <path d="M8 4.5l1.6 4H6.4zM6.6 8.5l-.9 2.5M9.4 8.5l.9 2.5" />
+    </svg>
+  );
+}
+
 /* Auto-track: a crosshair / reticle. */
 function CrosshairIcon() {
   return (
@@ -1738,6 +1987,15 @@ const CameraMenuItem = styled.button<{ $selected: boolean }>`
     outline: 2px solid var(--kerbcast-accent, #00ff88);
     outline-offset: -2px;
   }
+
+  &:disabled {
+    cursor: default;
+    color: rgba(255, 255, 255, 0.45);
+  }
+
+  &:disabled:not([aria-checked="true"]) {
+    background: transparent;
+  }
 `;
 
 const TopMeta = styled.div`
@@ -1917,7 +2175,27 @@ const Panel = styled.div`
   overflow: hidden;
 `;
 
+/*
+ * Fills the host and centres the Stage at the camera's configured aspect
+ * (--kc-feed-w / --kc-feed-h), so the picture fills the Stage and the host's
+ * spare room sits outside it.
+ */
+const FeedBox = styled.div`
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  container-type: size;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 const Stage = styled(Panel)<{ $pinned: boolean }>`
+  width: min(100cqw, 100cqh * var(--kc-feed-w) / var(--kc-feed-h));
+  height: auto;
+  aspect-ratio: var(--kc-feed-w) / var(--kc-feed-h);
+  flex: none;
   padding: 0;
   gap: 0;
   position: relative;