@xorgate/react-native 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -1,16 +1,38 @@
 # Changelog
 
+## 0.2.1
+
+- **Fix: a replay lane froze for a whole segment at a time on Android.** The
+  seam is an opacity flip between two overlapping views, and `expo-video` draws
+  into a `SurfaceView` by default — a layer the system composites rather than
+  one the view hierarchy draws, so `opacity: 0` does not hide it and `zIndex`
+  does not order it against its sibling. The hidden PRELOAD therefore won: it
+  parked on the first frame of the next segment, that still frame covered the
+  player that was actually running, and the picture held for the whole segment
+  while the clock, the map and the readouts carried on. It looked like the
+  engine had stalled; the engine was never involved. `ReplayVideo` now renders
+  into a `TextureView` on Android (`surfaceType`), which is an ordinary view,
+  so alpha and z-order mean what they say. iOS is untouched — `AVPlayerLayer`
+  is a real layer and the prop is Android's alone.
+
+  Measured on an API 36 emulator against a six-segment recording, sampling the
+  lane every ~1.5 s for three minutes: **11 distinct frames out of 80 before,
+  79 out of 80 after**, over three segment boundaries either way. Each freeze
+  began within ~1.5 s of the hidden player reporting ready, and the LAST
+  segment of a replay always played correctly — by then there is nothing left
+  to preload on top of it. The engine's own trace was clean throughout, every
+  boundary a 0-131 ms seam.
+
 ## 0.2.0
 
 Replay: the recorded-media player, over `expo-video`.
 
-- **Needs `@xorgate/react` 0.2.1 or later**, which is where `useReplayTelemetry`
-  takes the player CORE rather than the browser wrapper — the change that lets a
-  React Native player drive replay telemetry at all. The declared range stays
-  `^0.2.0-next.1` because it already admits 0.2.1 and a tighter one cannot be
-  installed until 0.2.1 is on npm; the only way to get the wrong types is a
-  lockfile pinned at the pre-release, where `useReplayTelemetry(deviceId,
-  player)` will not typecheck. Publish `@xorgate/react` 0.2.1 first.
+- **`@xorgate/react` `^0.2.1`**, up from `^0.2.0-next.1`. 0.2.1 is where
+  `useReplayTelemetry` takes the player CORE rather than the browser wrapper —
+  the change that lets a React Native player drive replay telemetry at all. The
+  0.2.0 tarball shipped with the looser `^0.2.0-next.1`, which resolves to 0.2.1
+  on any fresh install and is wrong only for a lockfile pinned at the
+  pre-release; the range was tightened as soon as 0.2.1 existed to be named.
 - **`expo-video` is a new required peer.** It is the native player; there is no
   way to play a recorded segment without it, and an optional peer whose absence
   fails deep inside a lane is worse than one line of install (the same call

package/dist/replay-video.d.ts

@@ -9,19 +9,5 @@ export interface ReplayVideoProps extends Omit<ViewProps, "children"> {
     /** Defaults to "contain", matching the web component's object-fit. */
     contentFit?: VideoContentFit;
 }
-/**
- * One replay lane's picture, and nothing else: no transport bar, no scrubber,
- * no gap overlay, no loading state. Same minimalism as `LiveVideo` and as the
- * web `ReplayVideo` — read `player.laneState(streamKey)` and render those
- * yourself.
- *
- * What it does that a single `VideoView` cannot is hold BOTH of the lane's
- * players mounted, the hidden one already loaded with the next segment. The
- * boundary is then an opacity flip between two live views rather than a
- * source change on one, which is the whole of why the seam is a picture
- * change instead of a reload. `nativeControls` is off: the clock owns the
- * transport, and a native scrubber would drive one segment's file rather than
- * the replay.
- */
 export declare function ReplayVideo(props: ReplayVideoProps): ReactNode;
 //# sourceMappingURL=replay-video.d.ts.map

package/dist/replay-video.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"replay-video.d.ts","sourceRoot":"","sources":["../src/replay-video.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE9D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACnE,MAAM,EAAE,eAAe,CAAC;IACxB,SAAS,EAAE,SAAS,CAAC;IACrB,sEAAsE;IACtE,UAAU,CAAC,EAAE,eAAe,CAAC;CAC9B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,CAsB9D"}
+{"version":3,"file":"replay-video.d.ts","sourceRoot":"","sources":["../src/replay-video.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE9D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACnE,MAAM,EAAE,eAAe,CAAC;IACxB,SAAS,EAAE,SAAS,CAAC;IACrB,sEAAsE;IACtE,UAAU,CAAC,EAAE,eAAe,CAAC;CAC9B;AA6CD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,CA0B9D"}

package/dist/replay-video.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { StyleSheet, View } from "react-native";
+import { Platform, StyleSheet, View } from "react-native";
 import { VideoView } from "expo-video";
 /**
  * One replay lane's picture, and nothing else: no transport bar, no scrubber,
@@ -14,17 +14,48 @@ import { VideoView } from "expo-video";
  * change instead of a reload. `nativeControls` is off: the clock owns the
  * transport, and a native scrubber would drive one segment's file rather than
  * the replay.
+ *
+ * On Android the two views are `TextureView`s rather than the default
+ * `SurfaceView`s, and that is load-bearing — see {@link ANDROID_SURFACE}.
+ */
+/**
+ * What the lane's two views are rendered INTO on Android, and the one thing
+ * about this component that is not cosmetic.
+ *
+ * The seam is an opacity flip between two overlapping views, and `expo-video`
+ * draws into a `SurfaceView` by default. A `SurfaceView`'s picture is not
+ * drawn by the view hierarchy at all — it is a separate layer the system
+ * composites — so `opacity: 0` does not hide it and `zIndex` does not order it
+ * against a sibling surface. Two stacked lanes then fight over the same
+ * pixels, and the PRELOAD is the one that wins: the hidden player parks on the
+ * first frame of the NEXT segment, that still frame covers the player that is
+ * actually running, and the lane freezes for a whole segment while the clock,
+ * the map and the readouts carry on. Measured on an API 36 emulator before
+ * this line existed: 11 distinct frames in three minutes, each freeze starting
+ * within a second and a half of the hidden player reporting ready — and the
+ * LAST segment of a replay playing normally, because by then there is nothing
+ * left to preload on top of it.
+ *
+ * A `TextureView` is an ordinary view in the hierarchy, so alpha and z-order
+ * mean what they say. It costs a GPU copy per frame and cannot show
+ * DRM-protected media; a recorded lane is neither hot nor protected. iOS has
+ * no such split — `AVPlayerLayer` is a real layer — and the prop is Android's
+ * alone, so it is spread in rather than passed at all elsewhere.
  */
+const ANDROID_SURFACE = { surfaceType: "textureView" };
 export function ReplayVideo(props) {
     const { player, streamKey, contentFit = "contain", style, ...viewProps } = props;
     const media = player.laneMedia(streamKey);
+    // Read per render rather than once at module load: it costs nothing, and a
+    // constant frozen at import time cannot be asserted from the other platform.
+    const surface = Platform.OS === "android" ? ANDROID_SURFACE : undefined;
     return (_jsx(View, { style: style, ...viewProps, children: media?.players.map((lanePlayer, index) => (_jsx(VideoView
         // Positional and stable: the pair is the same two objects for the
         // life of the lane, and only their order on screen changes.
         , { player: lanePlayer, style: [
                 StyleSheet.absoluteFill,
                 index === media.activeIndex ? styles.front : styles.behind,
-            ], contentFit: contentFit, nativeControls: false }, index))) }));
+            ], contentFit: contentFit, nativeControls: false, ...surface }, index))) }));
 }
 const styles = StyleSheet.create({
     front: { opacity: 1, zIndex: 2 },

package/dist/replay-video.js.map

@@ -1 +1 @@
-{"version":3,"file":"replay-video.js","sourceRoot":"","sources":["../src/replay-video.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAYvC;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,GAAG,SAAS,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACjF,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAE1C,OAAO,CACL,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,KAAM,SAAS,YAC9B,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,CACzC,KAAC,SAAS;QACR,kEAAkE;QAClE,4DAA4D;YAE5D,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE;gBACL,UAAU,CAAC,YAAY;gBACvB,KAAK,KAAK,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM;aAC3D,EACD,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,KAAK,IAPhB,KAAK,CAQV,CACH,CAAC,GACG,CACR,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;IAChC,yEAAyE;IACzE,0CAA0C;IAC1C,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;CAClC,CAAC,CAAC"}
+{"version":3,"file":"replay-video.js","sourceRoot":"","sources":["../src/replay-video.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAYvC;;;;;;;;;;;;;;;;GAgBG;AACH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,eAAe,GAAG,EAAE,WAAW,EAAE,aAAa,EAAW,CAAC;AAEhE,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,GAAG,SAAS,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACjF,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,2EAA2E;IAC3E,6EAA6E;IAC7E,MAAM,OAAO,GAAG,QAAQ,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC;IAExE,OAAO,CACL,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,KAAM,SAAS,YAC9B,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,CACzC,KAAC,SAAS;QACR,kEAAkE;QAClE,4DAA4D;YAE5D,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE;gBACL,UAAU,CAAC,YAAY;gBACvB,KAAK,KAAK,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM;aAC3D,EACD,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,KAAK,KACjB,OAAO,IARN,KAAK,CASV,CACH,CAAC,GACG,CACR,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;IAChC,yEAAyE;IACzE,0CAA0C;IAC1C,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;CAClC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xorgate/react-native",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "React Native adapters for @xorgate/react: live telemetry over MQTT, live video over WebRTC (react-native-webrtc / RTCView), and the recorded-media replay player over expo-video.",
   "license": "MIT",
   "author": "Epye Labs",
@@ -77,7 +77,7 @@
   },
   "dependencies": {
     "@aws-crypto/sha256-js": "^5.2.0",
-    "@xorgate/react": "^0.2.0-next.1"
+    "@xorgate/react": "^0.2.1"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.3",

package/readme.md

@@ -1,5 +1,9 @@
 # @xorgate/react-native
 
+[![npm](https://img.shields.io/npm/v/@xorgate/react-native.svg)](https://www.npmjs.com/package/@xorgate/react-native)
+[![CI](https://github.com/epyelabs/xorgate-react-native/actions/workflows/ci.yml/badge.svg)](https://github.com/epyelabs/xorgate-react-native/actions/workflows/ci.yml)
+[![license](https://img.shields.io/npm/l/@xorgate/react-native.svg)](./LICENSE)
+
 React Native adapters for [`@xorgate/react`](https://www.npmjs.com/package/@xorgate/react).
 Live telemetry over MQTT-over-WebSocket, live video over WebRTC rendered by
 `react-native-webrtc`'s `RTCView`, and recorded-media replay over `expo-video`
@@ -266,8 +270,9 @@ The transport (`play`, `pause`, `toggle`, `seek`, `setRate`, `setSkipGaps`,
 `stepBoundary`), the clock, the lanes and the per-lane `laneState` are the same
 ones the web package exposes — `useReplayPlayer` here is `useReplayPlayerCore`
 with native media bound to it. Everything is driven by wall-clock epoch ms, so
-`useReplayTelemetry(manifest, player.clock)` tracks the video without either
-side knowing about the other.
+`useReplayTelemetry(deviceId, player)` tracks the video without either side
+knowing about the other: it takes the player CORE, reads a timeline and a
+playhead, and has no idea what is playing the video.
 
 The manifest comes from `useReplayManifest(deviceId, …)`, or from your own API
 on the vended-direct auth mode — same rule as `useVideoChannels` above.