@ksp-gonogo/kerbcast-react 1.6.3 → 1.8.0

package/src/index.ts

@@ -10,16 +10,28 @@
 export {
   KerbcastProvider,
   createClientSubscriptions,
+  createClientDisplaySizes,
   useKerbcastClient,
   useKerbcastSubscriptions,
+  useKerbcastDisplaySizes,
+} from "./context";
+export type {
+  KerbcastProviderProps,
+  KerbcastSubscriptions,
+  KerbcastDisplaySizes,
 } from "./context";
-export type { KerbcastProviderProps, KerbcastSubscriptions } from "./context";
 
 // Hooks
 export { useKerbcastCameras } from "./hooks/useKerbcastCameras";
 export { useKerbcastStream } from "./hooks/useKerbcastStream";
 export { useKerbcastClock } from "./hooks/useKerbcastClock";
 export { useKerbcastInFlight } from "./hooks/useKerbcastInFlight";
+export { useReportDisplaySize } from "./hooks/useReportDisplaySize";
+export { useRecordings } from "./hooks/useRecordings";
+export type { RecordingsStore, ActiveRecordingInfo } from "./hooks/useRecordings";
+
+// Shared elapsed-timer helpers (REC badges, RecGroupBar's toolbar)
+export { nowMs, formatElapsed } from "./timing";
 
 // Shared standby glyph (used by CameraFeed + downstream dashboards)
 export { StandbyIcon } from "./StandbyIcon";
@@ -40,3 +52,17 @@ export type {
   CameraStreamHook,
   FeedAction,
 } from "./CameraFeed";
+
+// FeedActionBar: the shared action row (tracking, fullscreen, PiP, quality,
+// close, REC) both CameraFeed and KerbalFaceFeed render, with the issue-#6
+// overflow (⋮) engine.
+export { FeedActionBar } from "./FeedActionBar";
+export type { FeedActionBarEntry } from "./FeedActionBar";
+
+// KerbalFaceFeed — shared single-kerbal-face primitive
+export { KerbalFaceFeed } from "./KerbalFaceFeed";
+export type { KerbalFaceFeedProps, KerbalFeedState } from "./KerbalFaceFeed";
+
+// RecordingsTray: a presentational drawer over the recordings store
+export { RecordingsTray } from "./RecordingsTray";
+export type { RecordingsTrayProps } from "./RecordingsTray";

package/src/menuPositioning.ts

@@ -0,0 +1,126 @@
+/**
+ * Shared geometry + behaviour for a dropdown portaled to document.body.
+ * Used by CameraFeed's camera / quality / tracking menus and by
+ * FeedActionBar's overflow menu, so the anchoring, dismissal, and Escape
+ * handling live in exactly one place.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+const MENU_GAP = 4; // trigger-to-menu spacing
+const MENU_EDGE = 8; // minimum inset from the viewport edge
+
+/*
+ * Geometry of a portaled dropdown: the CSS size caps of the menu (the
+ * helper clamps as if the menu fills them) and which edge of the trigger
+ * the menu hangs from: "start" lines the menu's left edge up with the
+ * trigger's, "end" lines the right edges up.
+ */
+export interface MenuAnchor {
+  maxWidth: number;
+  maxHeight: number;
+  align: "start" | "end";
+}
+
+/*
+ * Fixed-position style for a portaled menu, anchored to its trigger button.
+ * Opens downward by default; flips above the trigger when there is not
+ * enough room below but there is above, otherwise clamps to the viewport.
+ */
+export function computeMenuPosition(
+  trigger: HTMLElement,
+  anchor: MenuAnchor,
+): React.CSSProperties {
+  const rect = trigger.getBoundingClientRect();
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const width = Math.min(anchor.maxWidth, vw - 2 * MENU_EDGE);
+  /* Inline offset from the aligned viewport edge, clamped so a full-width
+     menu still fits inside the opposite edge. */
+  const inset = Math.max(MENU_EDGE, vw - width - MENU_EDGE);
+  const inline: React.CSSProperties =
+    anchor.align === "start"
+      ? { left: Math.min(Math.max(rect.left, MENU_EDGE), inset) }
+      : { right: Math.min(Math.max(vw - rect.right, MENU_EDGE), inset) };
+  const menuH = Math.min(0.4 * vh, anchor.maxHeight);
+  const fitsBelow = rect.bottom + MENU_GAP + menuH <= vh - MENU_EDGE;
+  const fitsAbove = rect.top - MENU_GAP - menuH >= MENU_EDGE;
+  if (!fitsBelow && fitsAbove) {
+    return { ...inline, bottom: vh - rect.top + MENU_GAP };
+  }
+  const top = Math.min(
+    rect.bottom + MENU_GAP,
+    Math.max(MENU_EDGE, vh - MENU_EDGE - menuH),
+  );
+  return { ...inline, top };
+}
+
+/*
+ * Shared behaviour for a dropdown portaled to document.body: fixed position
+ * computed from the trigger's rect (so tile overflow cannot clip it),
+ * re-anchored on window resize/scroll while open, Escape to close with focus
+ * returned to the trigger, and portal-aware outside-pointer-down dismissal
+ * (menuRef points at the portaled menu, so clicks inside it stay "inside").
+ * One menu at a time falls out of the dismissal: opening another menu's
+ * trigger is an outside press for this one.
+ */
+export function usePortalMenu({ maxWidth, maxHeight, align }: MenuAnchor) {
+  const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState<React.CSSProperties | null>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!open) {
+      setPosition(null);
+      return;
+    }
+    const update = () => {
+      const trigger = triggerRef.current;
+      if (trigger) {
+        setPosition(computeMenuPosition(trigger, { maxWidth, maxHeight, align }));
+      }
+    };
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [open, maxWidth, maxHeight, align]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        setOpen(false);
+        triggerRef.current?.focus();
+      }
+    };
+    const onPointerDown = (e: PointerEvent) => {
+      if (
+        !menuRef.current?.contains(e.target as Node) &&
+        !triggerRef.current?.contains(e.target as Node)
+      ) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("pointerdown", onPointerDown);
+    };
+  }, [open]);
+
+  const toggle = useCallback(() => setOpen((v) => !v), []);
+  /** Close after an item pick, returning focus to the trigger. */
+  const close = useCallback(() => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  }, []);
+
+  return { open, toggle, close, position, menuRef, triggerRef };
+}

package/src/timing.test.ts

@@ -0,0 +1,34 @@
+/*
+ * Shared elapsed-timer helpers, extracted out of CameraFeed.tsx and
+ * RecGroupBar.tsx (formerly duplicated verbatim between the two).
+ */
+
+import { describe, expect, it } from "vitest";
+import { formatElapsed, nowMs } from "./timing";
+
+describe("formatElapsed", () => {
+  it("formats sub-minute durations as 0:ss", () => {
+    expect(formatElapsed(3_000)).toBe("0:03");
+  });
+
+  it("formats minutes and seconds, zero-padding seconds", () => {
+    expect(formatElapsed(65_000)).toBe("1:05");
+  });
+
+  it("floors partial seconds", () => {
+    expect(formatElapsed(1_999)).toBe("0:01");
+  });
+
+  it("clamps negative durations to 0:00", () => {
+    expect(formatElapsed(-500)).toBe("0:00");
+  });
+});
+
+describe("nowMs", () => {
+  it("returns a monotonically increasing, non-negative number", () => {
+    const a = nowMs();
+    const b = nowMs();
+    expect(a).toBeGreaterThanOrEqual(0);
+    expect(b).toBeGreaterThanOrEqual(a);
+  });
+});

package/src/timing.ts

@@ -0,0 +1,21 @@
+/*
+ * Shared elapsed-timer helpers for REC-style live-duration displays: the
+ * per-feed REC badge (CameraFeed) and the REC+ grouped-recording toolbar
+ * (a host's own RecGroupBar). Framework-free so both places read the same
+ * clock and format the same way instead of drifting apart.
+ */
+
+/** Monotonic clock for elapsed-timer math. Falls back to Date.now under jsdom. */
+export function nowMs(): number {
+  return typeof performance !== "undefined" && typeof performance.now === "function"
+    ? performance.now()
+    : Date.now();
+}
+
+/** Formats a millisecond duration as m:ss (e.g. "REC 1:05", "Recording 3 feeds - 0:42"). */
+export function formatElapsed(ms: number): string {
+  const totalSeconds = Math.max(0, Math.floor(ms / 1000));
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+}