@akhilpulse/samadhaan-session-replay 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akhilpulse/samadhaan-session-replay",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "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

@@ -35,7 +35,7 @@ import AsyncStorage from "@react-native-async-storage/async-storage";
 import { captureRef } from "react-native-view-shot";
 
 const STORAGE_KEY = "@akhilpulse/samadhaan-session-replay/sessionId";
-const SDK_VERSION = "0.2.1";
+const SDK_VERSION = "0.2.3";
 
 /** Default Samadhaan production endpoint. Override via `config.serverUrl` for staging. */
 export const DEFAULT_SERVER_URL = "https://samadhaan.pulseenergy.io";
@@ -211,49 +211,50 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
   // ---- Screenshot capture ----
   const liveMode = status === "live";
   useEffect(() => {
-    if (config.disableScreenshots || !sessionId) return;
+    // Only capture screenshots in live mode. Idle sessions emit interaction
+    // events (taps, navigation, etc.) but do not waste CPU/battery/network on
+    // periodic screenshots — frames stream only when an agent is actively viewing.
+    if (config.disableScreenshots || !sessionId || !liveMode) return;
     let stopped = false;
-    const interval = liveMode ? 200 : 10000;
+    // ~16 fps target. Capture takes time, so the loop self-paces — we schedule
+    // the next tick AFTER the previous capture completes rather than at a fixed cadence.
+    const liveTargetMs = 60;
+    let lastUploadFrameAt = 0;
     const tick = async () => {
       if (stopped) return;
-      if (paused || keyboardVisible) { setTimeout(tick, interval); return; }
+      const startedAt = Date.now();
+      if (paused || keyboardVisible) {
+        setTimeout(tick, liveTargetMs);
+        return;
+      }
       try {
         const ref = rootRef.current;
         if (ref) {
-          // Cap capture width to keep payloads small. Dashboard viewport is 960px;
-          // 540px wide JPEGs render fine and load 4-6× faster than full-resolution captures.
+          // Aggressively downscaled + low quality so capture+encode stays under ~50ms on mid devices.
           const uri = await captureRef(ref as any, {
             format: "jpg",
-            quality: liveMode ? 0.3 : 0.45,
+            quality: 0.25,
             result: "base64",
-            width: liveMode ? 480 : 540,
+            width: 360,
           });
-          // upload via request-url then PUT
           const blob = base64ToUint8Array(uri);
-          let path: string | null = null;
-          try {
-            const r = await fetch(`${serverUrl}/api/guided-support/storage/uploads/request-url`, {
-              method: "POST",
-              headers: { "Content-Type": "application/json", "x-ingest-token": ingestToken || "" },
-              body: JSON.stringify({ sessionId, name: `frame-${Date.now()}.jpg`, size: blob.length, contentType: "image/jpeg" }),
-            });
-            const meta = await r.json();
-            const fd = new FormData();
-            // @ts-ignore
-            fd.append("file", { uri: `data:image/jpeg;base64,${uri}`, name: "frame.jpg", type: "image/jpeg" });
-            const up = await fetch(`${serverUrl}${meta.uploadUrl}`, { method: "POST", body: fd as any });
-            if (up.ok) path = meta.path;
-          } catch {}
-          queueEvent("screenshot", { w: 0, h: 0 }, path || undefined);
-          if (liveMode && wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
-            // also stream binary frame
+          // Stream binary over WS — no REST upload in the hot path.
+          if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
             sendBinaryFrame(wsRef.current, blob, 0, 0);
           }
+          // Persist a sampled keyframe at most once every 10s for the replay timeline.
+          if (startedAt - lastUploadFrameAt > 10000) {
+            lastUploadFrameAt = startedAt;
+            uploadFrameAsync(serverUrl, sessionId, ingestToken, uri, blob).then((path) => {
+              if (path) queueEvent("screenshot", { w: 0, h: 0 }, path);
+            }).catch(() => {});
+          }
         }
       } catch {}
-      setTimeout(tick, interval);
+      const elapsed = Date.now() - startedAt;
+      setTimeout(tick, Math.max(0, liveTargetMs - elapsed));
     };
-    setTimeout(tick, interval);
+    setTimeout(tick, liveTargetMs);
     return () => { stopped = true; };
   }, [sessionId, ingestToken, liveMode, paused, keyboardVisible, config.disableScreenshots, serverUrl, queueEvent]);
 
@@ -447,6 +448,31 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
 }
 
 // ---- helpers ----
+async function uploadFrameAsync(
+  serverUrl: string,
+  sessionId: string | null,
+  ingestToken: string | null,
+  base64: string,
+  blob: Uint8Array,
+): Promise<string | null> {
+  if (!sessionId || !ingestToken) return null;
+  try {
+    const r = await fetch(`${serverUrl}/api/guided-support/storage/uploads/request-url`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", "x-ingest-token": ingestToken },
+      body: JSON.stringify({ sessionId, name: `frame-${Date.now()}.jpg`, size: blob.length, contentType: "image/jpeg" }),
+    });
+    const meta = await r.json();
+    const fd = new FormData();
+    // @ts-ignore - RN FormData accepts {uri,name,type}
+    fd.append("file", { uri: `data:image/jpeg;base64,${base64}`, name: "frame.jpg", type: "image/jpeg" });
+    const up = await fetch(`${serverUrl}${meta.uploadUrl}`, { method: "POST", body: fd as any });
+    return up.ok ? meta.path : null;
+  } catch {
+    return null;
+  }
+}
+
 function base64ToUint8Array(b64: string): Uint8Array {
   const bin = globalThis.atob ? globalThis.atob(b64) : Buffer.from(b64, "base64").toString("binary");
   const out = new Uint8Array(bin.length);