@akhilpulse/samadhaan-session-replay 0.2.7 → 0.2.9

package/README.md

@@ -81,11 +81,12 @@ const { pause, resume, sessionId, status } = useSessionReplay();
 
 ## Critical constraints (don't skip)
 
-1. Never use RN `<Modal>` for transient consent UI — use absolutely-positioned `<View>` with `zIndex: 9999`.
+1. Never use RN `<Modal>` for transient consent UI — use absolutely-positioned `<View>` (no `zIndex` — see #6).
 2. Never animate colors with `useNativeDriver: false` — causes 60fps JS commits that break touch handling on Fabric.
 3. The guided-tour overlay must NOT cover the screen center. Use 4 thin edge strips with `pointerEvents: "none"`.
 4. Pause screenshot capture while the iOS keyboard is visible.
 5. Auto-mount the guided-tour overlay inside the provider, and singleton-guard it.
+6. **Android elevation/zIndex break screenshot capture.** `react-native-view-shot` (both `captureRef` and `captureScreen`) uses a software canvas draw on Android (`view.draw(canvas)`) that **silently skips any view promoted to a hardware compositor layer** — i.e. anything with `elevation: > 0` or `zIndex: > 0` (RN implements `zIndex` via `setElevation` on Android). The base view tree (including native `SurfaceView`s like `react-native-maps`) is captured fine, but FABs, modals, cards-with-shadow, and any RN overlay with elevation/zIndex will be invisible in screenshots and the live-streamed frames. **Fix in your app:** rely on tree order to control layering on Android (later siblings paint on top), and remove `elevation`/`zIndex` from anything that must appear in captures. Keep `shadowColor`/`shadowOpacity`/`shadowRadius` — those are iOS-only and don't trigger Android hardware layers. The SDK's own overlays (red pointer dot, end-tour pill, edge halos, consent card) follow this rule.
 
 ## Publishing
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akhilpulse/samadhaan-session-replay",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "React Native SDK for Samadhaan Guided Support — session recording, live remote screen-share, take-control, and guided-tour overlays.",
   "main": "src/index.ts",
   "module": "src/index.ts",

package/src/SessionReplayProvider.tsx

@@ -33,10 +33,10 @@ import {
   Pressable,
 } from "react-native";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { captureRef } from "react-native-view-shot";
+import { captureRef, captureScreen } from "react-native-view-shot";
 
 const STORAGE_KEY = "@akhilpulse/samadhaan-session-replay/sessionId";
-const SDK_VERSION = "0.2.6";
+const SDK_VERSION = "0.2.9";
 
 /** Default Samadhaan production endpoint. Override via `config.serverUrl` for staging. */
 export const DEFAULT_SERVER_URL = "https://samadhaan.pulseenergy.io";
@@ -232,12 +232,19 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
         const ref = rootRef.current;
         if (ref) {
           // Aggressively downscaled + low quality so capture+encode stays under ~50ms on mid devices.
-          const uri = await captureRef(ref as any, {
-            format: "jpg",
+          // Android: captureRef misses views with `elevation` (they render in a separate
+          // hardware layer). Use captureScreen() which does an OS-level screenshot and
+          // includes elevated views (modals, FABs, cards with shadow, etc.).
+          // iOS: captureRef on the app root works correctly and stays scoped to the app.
+          const captureOpts = {
+            format: "jpg" as const,
             quality: 0.25,
-            result: "base64",
+            result: "base64" as const,
             width: 360,
-          });
+          };
+          const uri = Platform.OS === "android"
+            ? await captureScreen(captureOpts)
+            : await captureRef(ref as any, captureOpts);
           const blob = base64ToUint8Array(uri);
           // Stream binary over WS — no REST upload in the hot path.
           if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
@@ -356,6 +363,47 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
   // Captured root-View size (in points) so we can place the agent pointer correctly.
   const viewSizeRef = useRef<{ w: number; h: number }>({ w: 0, h: 0 });
 
+  // ---- Draggable End-tour pill ----
+  // Animated translate offset relative to the pill's anchored position (top-right).
+  const endTourPan = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
+  const endTourPanResponder = useMemo(
+    () =>
+      PanResponder.create({
+        // Don't claim taps — let the inner Pressable receive onPress.
+        onStartShouldSetPanResponder: () => false,
+        // Only claim once the user clearly starts dragging (>4px).
+        onMoveShouldSetPanResponder: (_e, g) => Math.abs(g.dx) > 4 || Math.abs(g.dy) > 4,
+        onPanResponderGrant: () => {
+          endTourPan.extractOffset();
+        },
+        onPanResponderMove: Animated.event(
+          [null, { dx: endTourPan.x, dy: endTourPan.y }],
+          { useNativeDriver: false }
+        ),
+        onPanResponderRelease: () => {
+          endTourPan.flattenOffset();
+          // Clamp inside the visible root-view bounds so the pill never escapes off-screen.
+          const { w, h } = viewSizeRef.current;
+          const PILL_W = 110, PILL_H = 36, ANCHOR_TOP = 64, ANCHOR_RIGHT = 12, MARGIN = 8;
+          // Pill sits at top:64, right:12 by default. Translate ranges:
+          //   x: from -(w - ANCHOR_RIGHT - PILL_W - MARGIN)  to 0  (can move left from right edge)
+          //   y: from -(ANCHOR_TOP - MARGIN)  to (h - ANCHOR_TOP - PILL_H - MARGIN)
+          const minX = -(Math.max(0, w - ANCHOR_RIGHT - PILL_W - MARGIN));
+          const maxX = 0;
+          const minY = -(ANCHOR_TOP - MARGIN);
+          const maxY = Math.max(0, h - ANCHOR_TOP - PILL_H - MARGIN);
+          const cx = (endTourPan.x as any)._value;
+          const cy = (endTourPan.y as any)._value;
+          const nx = Math.min(maxX, Math.max(minX, cx));
+          const ny = Math.min(maxY, Math.max(minY, cy));
+          if (nx !== cx || ny !== cy) {
+            Animated.spring(endTourPan, { toValue: { x: nx, y: ny }, useNativeDriver: false, friction: 7 }).start();
+          }
+        },
+      }),
+    [endTourPan]
+  );
+
   function consentTour(accept: boolean) {
     if (accept) {
       setTourState((s) => ({ phase: "active", agentName: s.agentName }));
@@ -447,9 +495,14 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
             <View pointerEvents="none" style={[styles.edge, { bottom: 0, left: 0, right: 0, height: 4 }]} />
             <View pointerEvents="none" style={[styles.edge, { top: 0, bottom: 0, left: 0, width: 4 }]} />
             <View pointerEvents="none" style={[styles.edge, { top: 0, bottom: 0, right: 0, width: 4 }]} />
-            <Pressable onPress={endTourLocal} style={({ pressed }) => [styles.endTourPill, pressed && styles.btnPressed]} hitSlop={8}>
-              <Text style={styles.endTourText}>End tour</Text>
-            </Pressable>
+            <Animated.View
+              style={[styles.endTourPill, { transform: endTourPan.getTranslateTransform() }]}
+              {...endTourPanResponder.panHandlers}
+            >
+              <Pressable onPress={endTourLocal} style={({ pressed }) => [styles.endTourPressable, pressed && styles.btnPressed]} hitSlop={8}>
+                <Text style={styles.endTourText}>End tour</Text>
+              </Pressable>
+            </Animated.View>
             {pointer && (
               <>
                 <View pointerEvents="none" style={[styles.pointerHalo, { left: pointer.x - 24, top: pointer.y - 24 }]} />
@@ -511,15 +564,20 @@ const styles = StyleSheet.create({
     position: "absolute", width: 40, height: 40, borderRadius: 20,
     backgroundColor: "rgba(34,197,94,0.45)", borderWidth: 2, borderColor: "#22c55e",
   },
+  // NOTE: We intentionally avoid `elevation` and `zIndex` on SDK overlays.
+  // On Android, both push the view into a hardware compositor layer that
+  // `react-native-view-shot`'s software canvas draw cannot capture, so the
+  // overlay would be invisible in screenshots/streamed frames. Tree order
+  // (overlays rendered AFTER children) already keeps them visually on top.
   consentBackdrop: {
     position: "absolute", top: 0, left: 0, right: 0, bottom: 0,
     backgroundColor: "rgba(0,0,0,0.55)", justifyContent: "center", alignItems: "center",
-    paddingHorizontal: 24, zIndex: 9999,
+    paddingHorizontal: 24,
   },
   consentCard: {
     width: "100%", maxWidth: 360, backgroundColor: "#ffffff", borderRadius: 20,
     paddingVertical: 24, paddingHorizontal: 22, alignItems: "center",
-    shadowColor: "#000", shadowOpacity: 0.25, shadowRadius: 24, shadowOffset: { width: 0, height: 12 }, elevation: 12,
+    shadowColor: "#000", shadowOpacity: 0.25, shadowRadius: 24, shadowOffset: { width: 0, height: 12 },
   },
   consentIconWrap: {
     width: 56, height: 56, borderRadius: 28, alignItems: "center", justifyContent: "center",
@@ -545,23 +603,27 @@ const styles = StyleSheet.create({
   btnGhostText: { color: "#475569", fontSize: 15, fontWeight: "600" },
   btnPrimary: { backgroundColor: "#22c55e" },
   btnPrimaryText: { color: "#fff", fontSize: 15, fontWeight: "600" },
-  edge: { position: "absolute", backgroundColor: "rgba(34,197,94,0.7)", zIndex: 9998 },
+  edge: { position: "absolute", backgroundColor: "rgba(34,197,94,0.7)" },
   // End-tour pill: anchored to TOP-RIGHT with safe top inset (~64px) to clear iOS Dynamic Island & status bar.
+  // No `elevation`/`zIndex` — see consentBackdrop note above. Shadow is iOS-only and harmless on Android.
   endTourPill: {
-    position: "absolute", top: 64, right: 12, zIndex: 9999,
-    backgroundColor: "rgba(17,24,39,0.92)", paddingVertical: 8, paddingHorizontal: 14,
-    borderRadius: 999, flexDirection: "row", alignItems: "center",
-    shadowColor: "#000", shadowOpacity: 0.3, shadowRadius: 6, shadowOffset: { width: 0, height: 2 }, elevation: 6,
+    position: "absolute", top: 64, right: 12,
+    backgroundColor: "rgba(17,24,39,0.92)",
+    borderRadius: 999,
+    shadowColor: "#000", shadowOpacity: 0.3, shadowRadius: 6, shadowOffset: { width: 0, height: 2 },
+  },
+  endTourPressable: {
+    paddingVertical: 8, paddingHorizontal: 14,
+    flexDirection: "row", alignItems: "center", borderRadius: 999,
   },
   endTourText: { color: "#fff", fontSize: 13, fontWeight: "600" },
   pointer: {
     position: "absolute", width: 24, height: 24, borderRadius: 12,
     backgroundColor: "rgba(239,68,68,1)", borderWidth: 3, borderColor: "#fff",
     shadowColor: "#ef4444", shadowOpacity: 0.9, shadowRadius: 8,
-    elevation: 12, zIndex: 10000,
   },
   pointerHalo: {
     position: "absolute", width: 48, height: 48, borderRadius: 24,
-    backgroundColor: "rgba(239,68,68,0.25)", zIndex: 9999,
+    backgroundColor: "rgba(239,68,68,0.25)",
   },
 });