react-native-image-stitcher 0.2.1 → 0.4.0

package/src/camera/CaptureMemoryPill.tsx

@@ -0,0 +1,96 @@
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * CaptureMemoryPill — top-right diagnostic pill showing native
+ * process memory footprint in MB, polled at 500 ms.
+ *
+ * Color-coded against the iPhone 16 Pro per-process jetsam limit:
+ *
+ *   - green  <1500 MB   (comfortable)
+ *   - amber  1500–2200  (approaching pressure)
+ *   - red    >2200      (close to limit — capture may be killed)
+ *
+ * Backed by the existing `getMemoryFootprintMB()` native module
+ * (iOS: `task_info phys_footprint`, Android: `Debug.MemoryInfo
+ * getTotalPss * 1024`).  Returns -1 if the native call fails.
+ *
+ * Mount this pill inside a `settings.debug`-gated branch — it
+ * polls native every 500 ms and is unwanted in production builds.
+ */
+
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { getIncrementalNativeModule } from '../stitching/incremental';
+
+export interface CaptureMemoryPillProps {
+  /** Top inset (status bar / notch).  Pill pinned `topInset + 56`. */
+  topInset?: number;
+  /** Polling interval in ms.  Default 500.  Lower wastes battery
+   *  for no visible benefit; higher loses correlation with capture
+   *  activity. */
+  pollIntervalMs?: number;
+}
+
+export function CaptureMemoryPill({
+  topInset = 0,
+  pollIntervalMs = 500,
+}: CaptureMemoryPillProps): React.JSX.Element | null {
+  const [memMB, setMemMB] = useState<number | null>(null);
+
+  useEffect(() => {
+    const native = getIncrementalNativeModule();
+    if (!native?.getMemoryFootprintMB) return undefined;
+    let cancelled = false;
+    const tick = async () => {
+      try {
+        const mb = await native.getMemoryFootprintMB();
+        if (!cancelled) setMemMB(mb);
+      } catch {
+        // Bridge error — leave the previous reading visible.
+      }
+    };
+    tick();
+    const id = setInterval(tick, pollIntervalMs);
+    return () => {
+      cancelled = true;
+      clearInterval(id);
+    };
+  }, [pollIntervalMs]);
+
+  if (memMB === null || memMB < 0) return null;
+
+  const bg =
+    memMB > 2200 ? 'rgba(239, 68, 68, 0.92)'    // red
+    : memMB > 1500 ? 'rgba(245, 158, 11, 0.92)' // amber
+    : 'rgba(34, 197, 94, 0.92)';                // green
+
+  return (
+    <View
+      pointerEvents="none"
+      style={[
+        styles.container,
+        { top: topInset + 56, backgroundColor: bg },
+      ]}
+      accessibilityRole="alert"
+    >
+      <Text style={styles.text}>{`${Math.round(memMB)} MB`}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    right: 12,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 999,
+    zIndex: 100,
+  },
+  text: {
+    color: '#fff',
+    fontSize: 12,
+    fontWeight: '700',
+    fontFamily: 'Menlo',
+  },
+});

package/src/camera/CaptureOrientationPill.tsx

@@ -0,0 +1,57 @@
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * CaptureOrientationPill — diagnostic pill showing the operator's
+ * current hold orientation as detected by the pose-derived hook.
+ *
+ * Useful for diagnosing rotation issues — if the pill says
+ * `landscape-left` but the band overlay is rendering as if it's
+ * `portrait`, there's a mismatch between the JS orientation hook
+ * and the engine's pose-derived isLandscape signal.
+ *
+ * Pinned top-left below the status bar.  Layer-2 hosts can mount
+ * this directly; Layer-1 `<Camera>` mounts it automatically when
+ * `settings.debug = true`.
+ */
+
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+export interface CaptureOrientationPillProps {
+  /** Current device orientation (typically from useDeviceOrientation). */
+  orientation: string;
+  /** Top inset for safe-area placement.  Pill pinned `topInset + 56`. */
+  topInset?: number;
+}
+
+export function CaptureOrientationPill({
+  orientation,
+  topInset = 0,
+}: CaptureOrientationPillProps): React.JSX.Element {
+  return (
+    <View
+      pointerEvents="none"
+      style={[styles.container, { top: topInset + 56 }]}
+      accessibilityRole="alert"
+    >
+      <Text style={styles.text}>{`orient: ${orientation}`}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    left: 12,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 999,
+    backgroundColor: 'rgba(99, 102, 241, 0.92)',
+    zIndex: 100,
+  },
+  text: {
+    color: '#fff',
+    fontSize: 11,
+    fontWeight: '700',
+    fontFamily: 'Menlo',
+  },
+});

package/src/camera/CaptureStitchStatsToast.tsx

@@ -0,0 +1,155 @@
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * CaptureStitchStatsToast — auto-dismissing toast that shows the
+ * batch-stitcher's leaveBiggestComponent telemetry + the resolved
+ * cv::Stitcher mode after every successful finalize.
+ *
+ * Pattern: top-center capsule, dark translucent background, dismisses
+ * itself after `dismissAfterMs` (default 4500).  Replaces the
+ * Alert.alert blocking modal that used to interrupt the next
+ * capture.  See `useStitchStatsToast` hook for the matching
+ * imperative API.
+ *
+ * Layer-2 hosts can mount this directly + pass their own message;
+ * Layer-1 `<Camera>` mounts it under `settings.debug` and feeds
+ * the formatted message from the finalize result automatically.
+ */
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import type { IncrementalFinalizeResult } from '../stitching/incremental';
+
+export interface CaptureStitchStatsToastProps {
+  /** Toast message to show.  Pass null to hide. */
+  message: string | null;
+  /** Top inset for safe-area placement.  Toast pinned `topInset + 12`. */
+  topInset?: number;
+}
+
+export function CaptureStitchStatsToast({
+  message,
+  topInset = 0,
+}: CaptureStitchStatsToastProps): React.JSX.Element | null {
+  if (message === null) return null;
+  return (
+    <View
+      pointerEvents="none"
+      style={[
+        styles.wrap,
+        { top: topInset + 12 },
+      ]}
+    >
+      <View
+        style={styles.capsule}
+        accessibilityRole="alert"
+        accessibilityLiveRegion="polite"
+      >
+        <Text style={styles.text} numberOfLines={3}>
+          {message}
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: {
+    position: 'absolute',
+    left: 24,
+    right: 24,
+    alignItems: 'center',
+    zIndex: 110,
+  },
+  capsule: {
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 16,
+    backgroundColor: 'rgba(15, 23, 42, 0.92)',
+    maxWidth: '100%',
+  },
+  text: {
+    color: '#ffffff',
+    fontSize: 13,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+});
+
+
+/**
+ * Imperative API for showing transient stitch-stats toasts.
+ *
+ * Returns `{ message, showFor, showResult }`:
+ *   - `message`     — current toast text (pass to CaptureStitchStatsToast)
+ *   - `showFor`     — show an arbitrary string, auto-dismiss
+ *   - `showResult`  — format an `IncrementalFinalizeResult` into the
+ *                     standard "Stitch: N/M frames • thresh X.XX •
+ *                     N attempt(s) • mode" line and show it.  Convenience
+ *                     for hosts that just want the canonical format.
+ *
+ * Auto-clears its setTimeout on unmount so callers don't have to
+ * worry about setState-on-unmounted warnings.
+ */
+export interface UseStitchStatsToastReturn {
+  message: string | null;
+  showFor: (msg: string, ms?: number) => void;
+  showResult: (result: IncrementalFinalizeResult, ms?: number) => void;
+}
+
+const DEFAULT_DISMISS_MS = 4500;
+
+export function useStitchStatsToast(): UseStitchStatsToastReturn {
+  const [message, setMessage] = useState<string | null>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const showFor = useCallback((msg: string, ms = DEFAULT_DISMISS_MS) => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setMessage(msg);
+    timerRef.current = setTimeout(() => {
+      setMessage(null);
+      timerRef.current = null;
+    }, ms);
+  }, []);
+
+  const showResult = useCallback(
+    (result: IncrementalFinalizeResult, ms = DEFAULT_DISMISS_MS) => {
+      // Format mirrors the RetaiLens debug toast that operators
+      // already recognise.  Includes the new (audit F2g) resolved
+      // stitchMode as a fourth segment when present.
+      const requested = result.framesRequested;
+      const included = result.framesIncluded;
+      const thresh = result.finalConfidenceThresh;
+      const mode = result.stitchModeResolved;
+      // The retry-attempt count is derived deterministically from
+      // the threshold used on the successful attempt (1.0→1, 0.5→2,
+      // 0.3→3) per cpp/stitcher.cpp's retry loop.
+      const attempts =
+        typeof thresh === 'number'
+          ? thresh >= 0.99 ? 1
+          : thresh >= 0.49 ? 2
+          : thresh >= 0.29 ? 3
+          : null
+        : null;
+      const reqStr = typeof requested === 'number' ? requested : '?';
+      const incStr = typeof included === 'number' ? included : '?';
+      const threshStr =
+        typeof thresh === 'number' && thresh >= 0
+          ? thresh.toFixed(2)
+          : 'n/a';
+      const attStr = attempts !== null ? `${attempts} attempt${attempts > 1 ? 's' : ''}` : '? attempts';
+      const modeStr = mode ? ` • ${mode}` : '';
+      showFor(
+        `Stitch: ${incStr}/${reqStr} frames • thresh ${threshStr} • ${attStr}${modeStr}`,
+        ms,
+      );
+    },
+    [showFor],
+  );
+
+  useEffect(() => () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+  }, []);
+
+  return { message, showFor, showResult };
+}