@poolse/react-native 2.15.1 → 2.16.0

package/CHANGELOG.md

@@ -4,6 +4,42 @@ All notable changes to `@poolse/react-native` are documented here.
 Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/);
 versions follow [semver](https://semver.org).
 
+## [2.16.0] — 2026-08-24
+
+### Added
+
+- **Ring tones.** `CallScreen` takes an optional `inCallManager` module
+  and plays ringback while an outbound call rings, and a ringtone for an
+  inbound one — but only when it is actually showing the incoming UI,
+  since CallKit already rings and a second tone underneath is noise.
+  A silent outbound call is indistinguishable from one that failed to
+  place at all.
+
+### Changed
+
+- **Media opens while the call rings, not after it is answered.** The
+  caller used to stare at a blank screen for the whole ring and then
+  watch their own preview pop in a second late — and the microphone was
+  not open either, so the first word of every call was clipped. The room
+  is now joined on `ringing-out`, so it is warm the moment the far side
+  picks up. Safe for the alone-detection: a caller in an empty room has
+  never seen a peer, which is the guard that already exists.
+- **Tapping the call screen toggles the controls.** It only ever showed
+  them before, and a timer took them away — so there was no way to
+  deliberately clear the chrome and look at the video. The idle timer
+  remains, on top rather than as the only way they disappear.
+
+## [2.15.2] — 2026-08-23
+
+### Fixed
+
+- **The floating self-preview had a visible seam around its edge.** The
+  bubble clips to its own rounding, but the tile inside rounded itself
+  as well and carried a 2px border — transparent or not, that inset the
+  video from the edge it should meet, and the two radii disagreeing left
+  a hairline along the curve. The inner tile is borderless now, and the
+  bubble is rounder.
+
 ## [2.15.1] — 2026-08-23
 
 ### Changed

package/dist/index.cjs

@@ -5544,6 +5544,7 @@ function LocalVideoPip({
               label,
               avatarSize: 48,
               hideName: true,
+              bleed: true,
               style: styles28.fill
             }
           ) })
@@ -5559,7 +5560,10 @@ var styles28 = reactNative.StyleSheet.create({
     left: 0,
     width: PIP_WIDTH,
     height: PIP_HEIGHT,
-    borderRadius: 16,
+    // Generous enough to read as a bubble rather than a cropped
+    // rectangle. The video is clipped to it, so this is the only
+    // rounding in play.
+    borderRadius: 22,
     overflow: "hidden",
     // Lifted off the video so it reads as floating rather than inset.
     shadowColor: "#000",
@@ -5842,6 +5846,7 @@ function CallScreen({
   onStatusChange,
   onTransportChange,
   onVideoChange,
+  inCallManager,
   nativeIncomingUi
 }) {
   const insets = reactNativeSafeAreaContext.useSafeAreaInsets();
@@ -5852,7 +5857,7 @@ function CallScreen({
     () => meshAvailable && webrtc ? { webrtc: createNativeWebRtcAdapter(webrtc) } : {},
     [meshAvailable, webrtc]
   );
-  const conversationId = calls.phase === "active" ? calls.activeConversationId : null;
+  const conversationId = calls.phase === "active" ? calls.activeConversationId : calls.phase === "ringing-out" ? calls.outgoing?.conversationId ?? null : null;
   const isVideoCall = calls.media === "video";
   const sfu = react$1.useCallRoom(livekit ? conversationId : null, {
     livekit,
@@ -5863,7 +5868,8 @@ function CallScreen({
   const status = usingSfu ? toVoiceStatus(sfu.status) : mesh.status;
   const connected = calls.phase === "active" && status === "connected";
   react.useEffect(() => {
-    if (calls.phase !== "active" || !conversationId) return;
+    const wants = calls.phase === "active" || calls.phase === "ringing-out";
+    if (!wants || !conversationId) return;
     let cancelled = false;
     void (async () => {
       const joined = livekit ? await sfu.join() : false;
@@ -5891,6 +5897,23 @@ function CallScreen({
     livekitReactNative
   });
   const [routesOpen, setRoutesOpen] = react.useState(false);
+  const showingIncoming = calls.phase === "ringing-in" && !nativeIncomingUi;
+  react.useEffect(() => {
+    const ringing = calls.phase === "ringing-out";
+    if (!ringing && !showingIncoming) return;
+    try {
+      if (ringing) inCallManager?.startRingback?.("_DEFAULT_");
+      else inCallManager?.startRingtone?.("_DEFAULT_");
+    } catch {
+    }
+    return () => {
+      try {
+        inCallManager?.stopRingback?.();
+        inCallManager?.stopRingtone?.();
+      } catch {
+      }
+    };
+  }, [calls.phase, showingIncoming, inCallManager]);
   const [chromeVisible, setChromeVisible] = react.useState(true);
   const [lastWake, setLastWake] = react.useState(0);
   const chromeHides = connected && isVideoCall;
@@ -5901,6 +5924,13 @@ function CallScreen({
     return () => clearTimeout(timer);
   }, [chromeHides, lastWake]);
   const wakeChrome = react.useCallback(() => setLastWake(Date.now()), []);
+  const toggleChrome = react.useCallback(() => {
+    setChromeVisible((visible2) => {
+      if (visible2) return false;
+      setLastWake(Date.now());
+      return true;
+    });
+  }, []);
   const withWake = react.useCallback(
     (fn) => () => {
       wakeChrome();
@@ -5959,7 +5989,7 @@ function CallScreen({
       onRequestClose: hangUp,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactNative.StatusBar, { barStyle: "light-content" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Pressable, { style: styles30.screen, onPress: wakeChrome, accessible: false, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Pressable, { style: styles30.screen, onPress: toggleChrome, accessible: false, children: [
           showStage ? /* @__PURE__ */ jsxRuntime.jsx(
             CallVideoGrid,
             {