@akhilpulse/samadhaan-session-replay 0.2.1 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akhilpulse/samadhaan-session-replay",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "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.2";
 
 /** Default Samadhaan production endpoint. Override via `config.serverUrl` for staging. */
 export const DEFAULT_SERVER_URL = "https://samadhaan.pulseenergy.io";
@@ -213,47 +213,56 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
   useEffect(() => {
     if (config.disableScreenshots || !sessionId) return;
     let stopped = false;
-    const interval = liveMode ? 200 : 10000;
+    // Live: ~16 fps target (60ms). Idle: 10s sample for replay.
+    // Capture itself takes time, so the loop self-paces — we schedule the next
+    // tick AFTER the previous capture/upload completes rather than at a fixed cadence.
+    const idleInterval = 10000;
+    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, liveMode ? liveTargetMs : idleInterval);
+        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.
+          // Live frames are 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: liveMode ? 0.25 : 0.45,
             result: "base64",
-            width: liveMode ? 480 : 540,
+            width: liveMode ? 360 : 540,
           });
-          // 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
-            sendBinaryFrame(wsRef.current, blob, 0, 0);
+
+          if (liveMode) {
+            // ---- LIVE PATH: stream binary over WS only. NO REST upload (too slow). ----
+            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(() => {});
+            }
+          } else {
+            // ---- IDLE PATH: upload for replay. ----
+            const path = await uploadFrameAsync(serverUrl, sessionId, ingestToken, uri, blob);
+            queueEvent("screenshot", { w: 0, h: 0 }, path || undefined);
           }
         }
       } catch {}
-      setTimeout(tick, interval);
+      // Self-pacing: schedule next tick relative to how long this one took.
+      const elapsed = Date.now() - startedAt;
+      const next = liveMode ? Math.max(0, liveTargetMs - elapsed) : Math.max(0, idleInterval - elapsed);
+      setTimeout(tick, next);
     };
-    setTimeout(tick, interval);
+    setTimeout(tick, liveMode ? liveTargetMs : idleInterval);
     return () => { stopped = true; };
   }, [sessionId, ingestToken, liveMode, paused, keyboardVisible, config.disableScreenshots, serverUrl, queueEvent]);
 
@@ -447,6 +456,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);