@repliqo/sdk-react-native 0.3.6 → 0.3.7

package/dist/components/RepliqoScrollView.js

@@ -79,6 +79,10 @@ exports.RepliqoScrollView = react_1.default.forwardRef(({ onScroll, onMomentumSc
     const scrollViewId = (0, react_1.useRef)(nextScrollViewId());
     const innerRef = (0, react_1.useRef)(null);
     const isMounted = (0, react_1.useRef)(true);
+    // Last measured window-relative top Y of the ScrollView — passed to
+    // captureScrollTile so the backend can crop each tile to just the
+    // scroll viewport area (no fixed header/footer duplication).
+    const lastViewportTop = (0, react_1.useRef)(null);
     const scrollState = (0, react_1.useRef)(null);
     // Forward the inner ref to the parent's ref (if provided).
     // IMPORTANT: do NOT clear innerRef on cleanup — RN sometimes calls the
@@ -112,6 +116,7 @@ exports.RepliqoScrollView = react_1.default.forwardRef(({ onScroll, onMomentumSc
             // ignore those, the next onLayout/onScroll will re-measure.
             if (width <= 0 || height <= 0)
                 return;
+            lastViewportTop.current = y;
             try {
                 client_1.AppAnalytics.getInstance().registerScrollView(scrollViewId.current, {
                     x, y, width, height,
@@ -166,7 +171,8 @@ exports.RepliqoScrollView = react_1.default.forwardRef(({ onScroll, onMomentumSc
         lastCaptureY.current = state.offsetY;
         initialCaptured.current = true;
         try {
-            client_1.AppAnalytics.getInstance().captureScrollTile(state.offsetY, state.viewportHeight, state.contentHeight);
+            const windowHeight = react_native_1.Dimensions.get('window').height;
+            client_1.AppAnalytics.getInstance().captureScrollTile(state.offsetY, state.viewportHeight, state.contentHeight, lastViewportTop.current ?? undefined, windowHeight);
         }
         catch { }
     };

package/dist/core/client.d.ts

@@ -85,11 +85,16 @@ export declare class AppAnalytics {
      * Capture the current viewport as a tile for collaborative screen
      * building. Called by RepliqoScrollView on scroll stops.
      *
-     * The tile includes the scrollOffsetY so the backend knows where
-     * in the full content this viewport belongs. Multiple users/sessions
-     * contribute tiles until the full content is covered.
+     * The tile includes:
+     *  - `scrollOffsetY`: where in the full content this viewport belongs
+     *  - `viewportTop`: Y position (window logical px) of the ScrollView's
+     *    top edge. Used by the backend to crop each tile to just the
+     *    scrollable area, removing fixed headers/footers that would
+     *    otherwise duplicate in the composite.
+     *  - `windowHeight`: window height in logical px, for image-to-logical
+     *    scale computation during backend cropping.
      */
-    captureScrollTile(scrollOffsetY: number, viewportHeight: number, contentHeight: number): void;
+    captureScrollTile(scrollOffsetY: number, viewportHeight: number, contentHeight: number, viewportTop?: number, windowHeight?: number): void;
     /**
      * Programmatically scroll-scan the current ScrollView and upload all
      * tiles to the backend. Invisible to the user (~300-500ms).

package/dist/core/client.js

@@ -331,11 +331,16 @@ class AppAnalytics {
      * Capture the current viewport as a tile for collaborative screen
      * building. Called by RepliqoScrollView on scroll stops.
      *
-     * The tile includes the scrollOffsetY so the backend knows where
-     * in the full content this viewport belongs. Multiple users/sessions
-     * contribute tiles until the full content is covered.
+     * The tile includes:
+     *  - `scrollOffsetY`: where in the full content this viewport belongs
+     *  - `viewportTop`: Y position (window logical px) of the ScrollView's
+     *    top edge. Used by the backend to crop each tile to just the
+     *    scrollable area, removing fixed headers/footers that would
+     *    otherwise duplicate in the composite.
+     *  - `windowHeight`: window height in logical px, for image-to-logical
+     *    scale computation during backend cropping.
      */
-    captureScrollTile(scrollOffsetY, viewportHeight, contentHeight) {
+    captureScrollTile(scrollOffsetY, viewportHeight, contentHeight, viewportTop, windowHeight) {
         if (!this.sessionId || !this.currentScreen)
             return;
         if (viewportHeight <= 0)
@@ -350,8 +355,9 @@ class AppAnalytics {
                     return;
                 this.logger.log(`Scroll tile: "${screenName}" Y=${Math.round(scrollOffsetY)} ` +
                     `vp=${Math.round(viewportHeight)} content=${Math.round(contentHeight)} ` +
+                    `top=${viewportTop !== undefined ? Math.round(viewportTop) : '?'} ` +
                     `${Math.round(frame.image.length / 1024)}KB`);
-                await this.apiClient.uploadScreenTile(sessionId, screenName, frame.image, frame.width, frame.height, scrollOffsetY, viewportHeight, contentHeight);
+                await this.apiClient.uploadScreenTile(sessionId, screenName, frame.image, frame.width, frame.height, scrollOffsetY, viewportHeight, contentHeight, viewportTop, windowHeight);
             }
             catch (err) {
                 this.logger.warn('Scroll tile failed:', err);

package/dist/transport/api.client.d.ts

@@ -32,7 +32,14 @@ export declare class ApiClient {
      */
     /**
      * Upload a scroll tile for collaborative screen building.
+     *
+     * @param viewportTop Y position (window logical px) of the ScrollView's
+     *   top edge. Used by the backend to crop each tile to just the
+     *   scrollable area, removing fixed headers/footers that would
+     *   otherwise duplicate in the composite.
+     * @param windowHeight Window height (logical px) at capture time.
+     *   Used by the backend to compute image-to-logical scale for cropping.
      */
-    uploadScreenTile(sessionId: string, screenName: string, image: string, width: number, height: number, scrollOffsetY: number, viewportHeight: number, contentHeight: number): Promise<void>;
+    uploadScreenTile(sessionId: string, screenName: string, image: string, width: number, height: number, scrollOffsetY: number, viewportHeight: number, contentHeight: number, viewportTop?: number, windowHeight?: number): Promise<void>;
     uploadScreenCapture(screenName: string, image: string, width: number, height: number, isFullContent: boolean): Promise<void>;
 }

package/dist/transport/api.client.js

@@ -158,22 +158,36 @@ class ApiClient {
      */
     /**
      * Upload a scroll tile for collaborative screen building.
+     *
+     * @param viewportTop Y position (window logical px) of the ScrollView's
+     *   top edge. Used by the backend to crop each tile to just the
+     *   scrollable area, removing fixed headers/footers that would
+     *   otherwise duplicate in the composite.
+     * @param windowHeight Window height (logical px) at capture time.
+     *   Used by the backend to compute image-to-logical scale for cropping.
      */
-    async uploadScreenTile(sessionId, screenName, image, width, height, scrollOffsetY, viewportHeight, contentHeight) {
+    async uploadScreenTile(sessionId, screenName, image, width, height, scrollOffsetY, viewportHeight, contentHeight, viewportTop, windowHeight) {
         try {
+            const body = {
+                sessionId,
+                screenName,
+                image,
+                width,
+                height,
+                scrollOffsetY: Math.round(scrollOffsetY),
+                viewportHeight: Math.round(viewportHeight),
+                contentHeight: Math.round(contentHeight),
+            };
+            if (typeof viewportTop === 'number' && Number.isFinite(viewportTop)) {
+                body.viewportTop = Math.round(viewportTop);
+            }
+            if (typeof windowHeight === 'number' && Number.isFinite(windowHeight)) {
+                body.windowHeight = Math.round(windowHeight);
+            }
             const response = await fetch(`${this.baseUrl}/api/screen-tiles`, {
                 method: 'POST',
                 headers: this.getHeaders(),
-                body: JSON.stringify({
-                    sessionId,
-                    screenName,
-                    image,
-                    width,
-                    height,
-                    scrollOffsetY: Math.round(scrollOffsetY),
-                    viewportHeight: Math.round(viewportHeight),
-                    contentHeight: Math.round(contentHeight),
-                }),
+                body: JSON.stringify(body),
             });
             if (!response.ok) {
                 const text = await response.text();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repliqo/sdk-react-native",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "Session replay & analytics SDK for React Native. Captures screenshots (including modals/alerts), navigation, screen visits, and custom events.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/RepliqoScrollView.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useRef, useEffect } from 'react';
 import {
   ScrollView,
   Keyboard,
+  Dimensions,
   type ScrollViewProps,
   type NativeSyntheticEvent,
   type NativeScrollEvent,
@@ -54,6 +55,10 @@ export const RepliqoScrollView = React.forwardRef<ScrollView, ScrollViewProps>(
     const scrollViewId = useRef<string>(nextScrollViewId());
     const innerRef = useRef<ScrollView | null>(null);
     const isMounted = useRef(true);
+    // Last measured window-relative top Y of the ScrollView — passed to
+    // captureScrollTile so the backend can crop each tile to just the
+    // scroll viewport area (no fixed header/footer duplication).
+    const lastViewportTop = useRef<number | null>(null);
     const scrollState = useRef<{
       offsetY: number;
       viewportHeight: number;
@@ -88,6 +93,7 @@ export const RepliqoScrollView = React.forwardRef<ScrollView, ScrollViewProps>(
         // RN sometimes returns 0/0 dims before the view is positioned —
         // ignore those, the next onLayout/onScroll will re-measure.
         if (width <= 0 || height <= 0) return;
+        lastViewportTop.current = y;
         try {
           AppAnalytics.getInstance().registerScrollView(scrollViewId.current, {
             x, y, width, height,
@@ -141,10 +147,13 @@ export const RepliqoScrollView = React.forwardRef<ScrollView, ScrollViewProps>(
       initialCaptured.current = true;
 
       try {
+        const windowHeight = Dimensions.get('window').height;
         AppAnalytics.getInstance().captureScrollTile(
           state.offsetY,
           state.viewportHeight,
           state.contentHeight,
+          lastViewportTop.current ?? undefined,
+          windowHeight,
         );
       } catch {}
     };

package/src/core/client.ts

@@ -446,14 +446,21 @@ export class AppAnalytics {
    * Capture the current viewport as a tile for collaborative screen
    * building. Called by RepliqoScrollView on scroll stops.
    *
-   * The tile includes the scrollOffsetY so the backend knows where
-   * in the full content this viewport belongs. Multiple users/sessions
-   * contribute tiles until the full content is covered.
+   * The tile includes:
+   *  - `scrollOffsetY`: where in the full content this viewport belongs
+   *  - `viewportTop`: Y position (window logical px) of the ScrollView's
+   *    top edge. Used by the backend to crop each tile to just the
+   *    scrollable area, removing fixed headers/footers that would
+   *    otherwise duplicate in the composite.
+   *  - `windowHeight`: window height in logical px, for image-to-logical
+   *    scale computation during backend cropping.
    */
   captureScrollTile(
     scrollOffsetY: number,
     viewportHeight: number,
     contentHeight: number,
+    viewportTop?: number,
+    windowHeight?: number,
   ): void {
     if (!this.sessionId || !this.currentScreen) return;
     if (viewportHeight <= 0) return; // No real dimensions yet
@@ -470,6 +477,7 @@ export class AppAnalytics {
         this.logger.log(
           `Scroll tile: "${screenName}" Y=${Math.round(scrollOffsetY)} ` +
             `vp=${Math.round(viewportHeight)} content=${Math.round(contentHeight)} ` +
+            `top=${viewportTop !== undefined ? Math.round(viewportTop) : '?'} ` +
             `${Math.round(frame.image.length / 1024)}KB`,
         );
 
@@ -482,6 +490,8 @@ export class AppAnalytics {
           scrollOffsetY,
           viewportHeight,
           contentHeight,
+          viewportTop,
+          windowHeight,
         );
       } catch (err) {
         this.logger.warn('Scroll tile failed:', err);

package/src/transport/api.client.ts

@@ -229,6 +229,13 @@ export class ApiClient {
    */
   /**
    * Upload a scroll tile for collaborative screen building.
+   *
+   * @param viewportTop Y position (window logical px) of the ScrollView's
+   *   top edge. Used by the backend to crop each tile to just the
+   *   scrollable area, removing fixed headers/footers that would
+   *   otherwise duplicate in the composite.
+   * @param windowHeight Window height (logical px) at capture time.
+   *   Used by the backend to compute image-to-logical scale for cropping.
    */
   async uploadScreenTile(
     sessionId: string,
@@ -239,23 +246,33 @@ export class ApiClient {
     scrollOffsetY: number,
     viewportHeight: number,
     contentHeight: number,
+    viewportTop?: number,
+    windowHeight?: number,
   ): Promise<void> {
     try {
+      const body: Record<string, unknown> = {
+        sessionId,
+        screenName,
+        image,
+        width,
+        height,
+        scrollOffsetY: Math.round(scrollOffsetY),
+        viewportHeight: Math.round(viewportHeight),
+        contentHeight: Math.round(contentHeight),
+      };
+      if (typeof viewportTop === 'number' && Number.isFinite(viewportTop)) {
+        body.viewportTop = Math.round(viewportTop);
+      }
+      if (typeof windowHeight === 'number' && Number.isFinite(windowHeight)) {
+        body.windowHeight = Math.round(windowHeight);
+      }
+
       const response = await fetch(
         `${this.baseUrl}/api/screen-tiles`,
         {
           method: 'POST',
           headers: this.getHeaders(),
-          body: JSON.stringify({
-            sessionId,
-            screenName,
-            image,
-            width,
-            height,
-            scrollOffsetY: Math.round(scrollOffsetY),
-            viewportHeight: Math.round(viewportHeight),
-            contentHeight: Math.round(contentHeight),
-          }),
+          body: JSON.stringify(body),
         },
       );