@poolse/react-native 2.15.0 → 2.15.2

package/dist/index.d.cts

@@ -1326,13 +1326,30 @@ interface CallVideoGridProps {
      */
     onLocalPress?: (() => void) | undefined;
     /**
-     * How much chrome sits over the top and bottom of the stage, so the
-     * floating preview does not park itself under the control bar.
+     * How much chrome sits over the bottom of the stage.
+     *
+     * Only used to keep the last row of a scrolling group grid clear of
+     * the control bar. It deliberately does NOT bound the floating
+     * preview — see {@link safeArea}.
      */
     chromeInsets?: {
         top: number;
         bottom: number;
     } | undefined;
+    /**
+     * The screen's safe area, which is what the floating preview is
+     * bounded by.
+     *
+     * Separate from `chromeInsets` on purpose. Bounding the preview by the
+     * chrome kept it in a box well inside the screen, floating in the
+     * middle of nowhere rather than tucked into a corner — and on a
+     * connected video call the chrome is hidden most of the time anyway,
+     * so it was reserving space for something that was not there.
+     */
+    safeArea?: {
+        top: number;
+        bottom: number;
+    } | undefined;
 }
 /**
  * The stage: everyone on the call, laid out for how many there are.
@@ -1352,7 +1369,7 @@ interface CallVideoGridProps {
  * every tile draws an avatar, and the layout logic does not need to
  * know whether video was ever on the table.
  */
-declare function CallVideoGrid({ participants, livekitReactNative, labelFor, onLocalPress, chromeInsets, }: CallVideoGridProps): react_jsx_runtime.JSX.Element;
+declare function CallVideoGrid({ participants, livekitReactNative, labelFor, onLocalPress, chromeInsets, safeArea, }: CallVideoGridProps): react_jsx_runtime.JSX.Element;
 
 interface CallControlButtonProps {
     icon: IconName;
@@ -1440,7 +1457,10 @@ interface LocalVideoPipProps {
         width: number;
         height: number;
     };
-    /** Inset from the edges — keeps the tile clear of the call chrome. */
+    /**
+     * Safe-area insets. The tile hugs the edges just inside these, so it
+     * clears the notch and the home indicator and nothing else.
+     */
     insets?: {
         top: number;
         bottom: number;

package/dist/index.d.ts

@@ -1326,13 +1326,30 @@ interface CallVideoGridProps {
      */
     onLocalPress?: (() => void) | undefined;
     /**
-     * How much chrome sits over the top and bottom of the stage, so the
-     * floating preview does not park itself under the control bar.
+     * How much chrome sits over the bottom of the stage.
+     *
+     * Only used to keep the last row of a scrolling group grid clear of
+     * the control bar. It deliberately does NOT bound the floating
+     * preview — see {@link safeArea}.
      */
     chromeInsets?: {
         top: number;
         bottom: number;
     } | undefined;
+    /**
+     * The screen's safe area, which is what the floating preview is
+     * bounded by.
+     *
+     * Separate from `chromeInsets` on purpose. Bounding the preview by the
+     * chrome kept it in a box well inside the screen, floating in the
+     * middle of nowhere rather than tucked into a corner — and on a
+     * connected video call the chrome is hidden most of the time anyway,
+     * so it was reserving space for something that was not there.
+     */
+    safeArea?: {
+        top: number;
+        bottom: number;
+    } | undefined;
 }
 /**
  * The stage: everyone on the call, laid out for how many there are.
@@ -1352,7 +1369,7 @@ interface CallVideoGridProps {
  * every tile draws an avatar, and the layout logic does not need to
  * know whether video was ever on the table.
  */
-declare function CallVideoGrid({ participants, livekitReactNative, labelFor, onLocalPress, chromeInsets, }: CallVideoGridProps): react_jsx_runtime.JSX.Element;
+declare function CallVideoGrid({ participants, livekitReactNative, labelFor, onLocalPress, chromeInsets, safeArea, }: CallVideoGridProps): react_jsx_runtime.JSX.Element;
 
 interface CallControlButtonProps {
     icon: IconName;
@@ -1440,7 +1457,10 @@ interface LocalVideoPipProps {
         width: number;
         height: number;
     };
-    /** Inset from the edges — keeps the tile clear of the call chrome. */
+    /**
+     * Safe-area insets. The tile hugs the edges just inside these, so it
+     * clears the notch and the home indicator and nothing else.
+     */
     insets?: {
         top: number;
         bottom: number;

package/dist/index.js

@@ -5420,7 +5420,7 @@ var styles27 = StyleSheet.create({
 });
 var PIP_WIDTH = 108;
 var PIP_HEIGHT = 152;
-var MARGIN = 14;
+var MARGIN = 12;
 function LocalVideoPip({
   participant,
   VideoTrack,
@@ -5517,6 +5517,7 @@ function LocalVideoPip({
               label,
               avatarSize: 48,
               hideName: true,
+              bleed: true,
               style: styles28.fill
             }
           ) })
@@ -5532,7 +5533,10 @@ var styles28 = 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",
@@ -5550,7 +5554,8 @@ function CallVideoGrid({
   livekitReactNative,
   labelFor,
   onLocalPress,
-  chromeInsets
+  chromeInsets,
+  safeArea
 }) {
   const label = labelFor ?? ((id) => `User ${id.slice(0, 6)}`);
   const VideoTrack = livekitReactNative?.VideoTrack;
@@ -5591,7 +5596,7 @@ function CallVideoGrid({
           VideoTrack,
           label,
           bounds: size,
-          insets: chromeInsets ?? { top: 0, bottom: 0 },
+          insets: safeArea ?? { top: 0, bottom: 0 },
           onPress: onLocalPress
         }
       )
@@ -5939,7 +5944,8 @@ function CallScreen({
               livekitReactNative,
               labelFor: label,
               onLocalPress: () => void sfu.switchCamera(),
-              chromeInsets
+              chromeInsets,
+              safeArea: { top: insets.top, bottom: insets.bottom }
             }
           ) : /* @__PURE__ */ jsx(View, { style: styles30.identity, children: /* @__PURE__ */ jsx(
             CallAvatar,