@akhilpulse/samadhaan-session-replay 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akhilpulse/samadhaan-session-replay",
-  "version": "0.2.0",
+  "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.0";
+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";
@@ -124,6 +124,8 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
   }, [flushEvents]);
 
   // ---- Session init / resume ----
+  // initTick is bumped whenever we recycle (sessionId went to null at runtime) so this effect re-fires.
+  const [initTick, setInitTick] = useState(0);
   useEffect(() => {
     let cancelled = false;
     (async () => {
@@ -134,8 +136,17 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
           const r = await fetch(`${serverUrl}/api/guided-support/sessions/${stored}/status`);
           if (r.ok) {
             const j = await r.json();
-            if (!cancelled) { setSessionId(stored); setStatus(j.status || "active"); setIngestToken(j.ingestToken); }
-            return;
+            // If the stored session was already ended (server-side idle timeout while app
+            // was backgrounded), drop it and fall through to create a fresh one.
+            if (j.status === "ended") {
+              try { await AsyncStorage.removeItem(STORAGE_KEY); } catch {}
+            } else {
+              if (!cancelled) { setSessionId(stored); setStatus(j.status || "active"); setIngestToken(j.ingestToken); }
+              return;
+            }
+          } else {
+            // 404 / not found — clear stale id and create fresh.
+            try { await AsyncStorage.removeItem(STORAGE_KEY); } catch {}
           }
         }
         const res = await fetch(`${serverUrl}/api/guided-support/sessions`, {
@@ -164,7 +175,7 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
       }
     })();
     return () => { cancelled = true; };
-  }, [config.appId, serverUrl, config.appVersion, config.user]);
+  }, [config.appId, serverUrl, config.appVersion, config.user, initTick]);
 
   // ---- Keyboard tracking (iOS auto-pause) ----
   useEffect(() => {
@@ -182,11 +193,12 @@ export function SessionReplayProvider({ config, children }: { config: Config; ch
         if (r.ok) {
           const j = await r.json();
           if (j.status === "ended") {
-            // Server idle-ended this session. Drop it and create a fresh one on next mount cycle.
+            // Server idle-ended this session. Drop it and immediately recycle (init effect re-fires via initTick).
             try { await AsyncStorage.removeItem(STORAGE_KEY); } catch {}
             setSessionId(null);
             setIngestToken(null);
             setStatus("idle");
+            setInitTick(t => t + 1);
           } else {
             setStatus(j.status);
           }
@@ -201,40 +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) {
-          const uri = await captureRef(ref as any, { format: "jpg", quality: liveMode ? 0.4 : 0.7, result: "base64" });
-          // upload via request-url then PUT
+          // 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.25 : 0.45,
+            result: "base64",
+            width: liveMode ? 360 : 540,
+          });
           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]);
 
@@ -428,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);