@ksp-gonogo/kerbcast-react 1.6.3 → 1.8.0

package/dist/menuPositioning.js

@@ -0,0 +1,98 @@
+/**
+ * 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
+/*
+ * 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, anchor) {
+    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 = 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 }) {
+    const [open, setOpen] = useState(false);
+    const [position, setPosition] = useState(null);
+    const menuRef = useRef(null);
+    const triggerRef = useRef(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) => {
+            if (e.key === "Escape") {
+                e.stopPropagation();
+                setOpen(false);
+                triggerRef.current?.focus();
+            }
+        };
+        const onPointerDown = (e) => {
+            if (!menuRef.current?.contains(e.target) &&
+                !triggerRef.current?.contains(e.target)) {
+                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/dist/timing.d.ts

@@ -0,0 +1,4 @@
+/** Monotonic clock for elapsed-timer math. Falls back to Date.now under jsdom. */
+export declare function nowMs(): number;
+/** Formats a millisecond duration as m:ss (e.g. "REC 1:05", "Recording 3 feeds - 0:42"). */
+export declare function formatElapsed(ms: number): string;

package/dist/timing.js

@@ -0,0 +1,19 @@
+/*
+ * 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() {
+    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) {
+    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")}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ksp-gonogo/kerbcast-react",
-  "version": "1.6.3",
+  "version": "1.8.0",
   "description": "React components and hooks for kerbcast camera feeds.",
   "license": "MIT",
   "author": "Jon Pepler",
@@ -45,7 +45,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@ksp-gonogo/kerbcast": "^1.6.3"
+    "@ksp-gonogo/kerbcast": "^1.8.0"
   },
   "peerDependencies": {
     "react": "^18 || ^19",