@oxy.so/bloom 2.10.0 → 2.11.0

package/lib/module/call-ui/CallHistoryRow.js

@@ -0,0 +1,186 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+import { Avatar } from "../avatar/Avatar.js";
+import { useInteractionState } from "../hooks/use-interaction-state.js";
+import { RiArrowLeftDownLine } from "../icons/remix/RiArrowLeftDownLine.js";
+import { RiArrowRightUpLine } from "../icons/remix/RiArrowRightUpLine.js";
+import { RiPhoneLine } from "../icons/remix/RiPhoneLine.js";
+import { RiVideoOnLine } from "../icons/remix/RiVideoOnLine.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { CALL_HISTORY_LABELS, isNegativeDirection, resolveCallPaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * `CallHistoryRow`: one entry in the call log.
+ *
+ *   44 avatar · name (`body-medium`; MISSED and DECLINED are drawn in the
+ *   negative colour, because the log is scanned, not read) · the direction
+ *   glyph and `meta` under it · a call-back button on the right
+ *
+ * DIRECTION IS TWO SIGNALS, NOT ONE. The arrow says which way the call went
+ * (down-left arrived, up-right left) and the COLOUR says whether it connected.
+ * A missed call told apart from a received one by hue alone is a distinction
+ * one reader in twelve cannot make, so the second line names it in words
+ * ("Missed · Yesterday, 18:40") and the row's accessible name carries it too.
+ *
+ * `meta` arrives pre-formatted: the app owns "Yesterday", the locale and how
+ * long 4 minutes 32 seconds is written.
+ */
+
+const DIRECTION_GLYPH = {
+  incoming: RiArrowLeftDownLine,
+  outgoing: RiArrowRightUpLine,
+  missed: RiArrowLeftDownLine,
+  declined: RiArrowRightUpLine
+};
+function CallHistoryRowComponent({
+  name,
+  avatar,
+  avatarVariant,
+  direction,
+  mode = 'voice',
+  meta,
+  count,
+  onPress,
+  onCallBack,
+  selected = false,
+  labels,
+  style,
+  textStyle,
+  testID
+}) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveCallPaint(theme), [theme]);
+  const {
+    state: hovered,
+    onIn,
+    onOut
+  } = useInteractionState();
+  const l = {
+    ...CALL_HISTORY_LABELS,
+    ...labels
+  };
+  const negative = isNegativeDirection(direction);
+  const DirectionGlyph = DIRECTION_GLYPH[direction];
+  const CallBackGlyph = mode === 'video' ? RiVideoOnLine : RiPhoneLine;
+  const directionName = l[direction];
+  const body = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Avatar, {
+      source: avatar,
+      variant: avatarVariant,
+      name: name,
+      size: 44
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1,
+        minWidth: 0,
+        gap: 2
+      },
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 4
+        },
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "body-medium",
+          numberOfLines: 1,
+          style: [{
+            color: negative ? paint.negative : paint.text,
+            flexShrink: 1
+          }, textStyle],
+          testID: testID ? `${testID}-name` : undefined,
+          children: name
+        }), count === undefined || count <= 1 ? null : /*#__PURE__*/_jsx(Text, {
+          variant: "body-2-regular",
+          style: {
+            color: paint.textSecondary
+          },
+          children: `(${count})`
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 5
+        },
+        children: [/*#__PURE__*/_jsx(DirectionGlyph, {
+          width: 14,
+          height: 14,
+          fill: negative ? paint.negative : paint.textSecondary
+        }), /*#__PURE__*/_jsx(Text, {
+          variant: "caption-1-regular",
+          numberOfLines: 1,
+          style: {
+            color: paint.textSecondary,
+            flexShrink: 1
+          },
+          testID: testID ? `${testID}-meta` : undefined,
+          children: `${directionName} · ${meta}`
+        })]
+      })]
+    })]
+  });
+  const shell = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    flex: 1,
+    minWidth: 0,
+    borderRadius: 12,
+    backgroundColor: selected || hovered && onPress !== undefined ? paint.rowSelected : 'transparent',
+    paddingTop: 8,
+    paddingRight: 8,
+    paddingBottom: 8,
+    paddingLeft: 8
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4
+    }, style],
+    testID: testID,
+    children: [onPress === undefined ? /*#__PURE__*/_jsx(View, {
+      style: shell,
+      children: body
+    }) : /*#__PURE__*/_jsx(Pressable, {
+      role: "button",
+      accessibilityLabel: `${name}, ${directionName.toLowerCase()}, ${meta}`,
+      onPress: onPress,
+      onHoverIn: onIn,
+      onHoverOut: onOut,
+      style: shell,
+      testID: testID ? `${testID}-open` : undefined,
+      children: body
+    }), onCallBack === undefined ? null : /*#__PURE__*/_jsx(Pressable, {
+      role: "button",
+      accessibilityLabel: l.callBack(name),
+      onPress: onCallBack,
+      hitSlop: {
+        top: 8,
+        bottom: 8,
+        left: 8,
+        right: 8
+      },
+      style: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      testID: testID ? `${testID}-callback` : undefined,
+      children: /*#__PURE__*/_jsx(CallBackGlyph, {
+        width: 20,
+        height: 20,
+        fill: paint.accent
+      })
+    })]
+  });
+}
+export const CallHistoryRow = /*#__PURE__*/memo(CallHistoryRowComponent);
+CallHistoryRow.displayName = 'CallHistoryRow';
+//# sourceMappingURL=CallHistoryRow.js.map

package/lib/module/call-ui/CallHistoryRow.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","Pressable","View","Avatar","useInteractionState","RiArrowLeftDownLine","RiArrowRightUpLine","RiPhoneLine","RiVideoOnLine","useTheme","Text","CALL_HISTORY_LABELS","isNegativeDirection","resolveCallPaint","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DIRECTION_GLYPH","incoming","outgoing","missed","declined","CallHistoryRowComponent","name","avatar","avatarVariant","direction","mode","meta","count","onPress","onCallBack","selected","labels","style","textStyle","testID","theme","paint","state","hovered","onIn","onOut","l","negative","DirectionGlyph","CallBackGlyph","directionName","body","children","source","variant","size","flex","minWidth","gap","flexDirection","alignItems","numberOfLines","color","text","flexShrink","undefined","textSecondary","width","height","fill","shell","borderRadius","backgroundColor","rowSelected","paddingTop","paddingRight","paddingBottom","paddingLeft","role","accessibilityLabel","toLowerCase","onHoverIn","onHoverOut","callBack","hitSlop","top","bottom","left","right","justifyContent","accent","CallHistoryRow","displayName"],"sourceRoot":"../../../src","sources":["call-ui/CallHistoryRow.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/call-ui/CallMinimisedPill.js

@@ -0,0 +1,178 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+import { bloomShadowStyle } from '../design-tokens/shadows';
+import { useInteractionState } from "../hooks/use-interaction-state.js";
+import { RiMicLine } from "../icons/remix/RiMicLine.js";
+import { RiMicOffFill } from "../icons/remix/RiMicOffFill.js";
+import { RiPhoneFill } from "../icons/remix/RiPhoneFill.js";
+import { RiVideoOnLine } from "../icons/remix/RiVideoOnLine.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { CallControlButton } from "./CallControls.js";
+import { CallEndGlyph } from "./glyphs.js";
+import { CALL_CONTROL_LABELS, resolveCallPaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * `CallMinimisedPill`: the call while you are doing something else.
+ *
+ *   48 tall, full pill, the stage's own fill so it reads as the same call
+ *   glyph   a handset, or a camera for a video call
+ *   line    the name (one line, truncating) over the timer in TABULAR figures —
+ *           proportional digits make a running clock jitter sideways, which is
+ *           the one thing a pill parked over someone's content must not do
+ *   muted   a struck-through mic in the negative colour, drawn only while muted
+ *   end     a 32px red circle
+ *
+ * It does NOT drag itself. Position is the app's: it knows the safe areas, the
+ * keyboard and what is underneath, and a component that moves itself inside a
+ * layout it cannot see ends up under a tab bar. Pass `style` with the offsets
+ * (or an animated one), and the pill stays a pill.
+ */
+
+const HEIGHT = 48;
+const PILL_MIN_WIDTH = 184;
+const GLYPH = 18;
+function CallMinimisedPillComponent({
+  name,
+  duration,
+  statusText,
+  mode = 'voice',
+  muted = false,
+  onMutedChange,
+  onExpand,
+  onEndCall,
+  accentColor,
+  labels,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveCallPaint(theme, accentColor), [theme, accentColor]);
+  const {
+    state: hovered,
+    onIn,
+    onOut
+  } = useInteractionState();
+  const l = {
+    ...CALL_CONTROL_LABELS,
+    ...labels
+  };
+  const expandLabel = labels?.expand ?? (name === undefined ? 'Return to call' : `Return to call with ${name}`);
+  const ModeGlyph = mode === 'video' ? RiVideoOnLine : RiPhoneFill;
+  const line = statusText !== undefined && statusText !== '' ? statusText : duration;
+  const body = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: paint.control
+      },
+      children: /*#__PURE__*/_jsx(ModeGlyph, {
+        width: GLYPH,
+        height: GLYPH,
+        fill: paint.onStage
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1,
+        minWidth: 0
+      },
+      children: [name === undefined ? null : /*#__PURE__*/_jsx(Text, {
+        variant: "body-2-medium",
+        numberOfLines: 1,
+        style: {
+          color: paint.onStage
+        },
+        children: name
+      }), line === undefined ? null : /*#__PURE__*/_jsx(Text, {
+        variant: "caption-1-regular",
+        numberOfLines: 1,
+        style: {
+          color: paint.onStageMuted,
+          fontVariant: ['tabular-nums']
+        },
+        testID: testID ? `${testID}-timer` : undefined,
+        children: line
+      })]
+    }), muted && onMutedChange === undefined ? /*#__PURE__*/_jsx(RiMicOffFill, {
+      width: 16,
+      height: 16,
+      fill: paint.negativeOnStage,
+      testID: testID ? `${testID}-muted` : undefined
+    }) : null]
+  });
+  const shell = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    minHeight: HEIGHT,
+    // A floor, not a width. The two lines are laid out by the SHELL rather than
+    // by their own content: react-native-web gives a `numberOfLines` text
+    // `max-width: 100%`, and inside a shrink-to-fit column that percentage is
+    // circular — the column ends up the width of the FIRST line and truncates
+    // the second. Measured: "Reconnecting…" clipped under a 90px "Nour Haddad".
+    minWidth: PILL_MIN_WIDTH,
+    paddingTop: 8,
+    paddingRight: 8,
+    paddingBottom: 8,
+    paddingLeft: 8,
+    borderRadius: HEIGHT / 2,
+    backgroundColor: hovered ? paint.controlHover : paint.stage,
+    borderWidth: 1,
+    borderColor: paint.pipBorder,
+    ...bloomShadowStyle('m')
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      flexDirection: 'row',
+      alignSelf: 'flex-start'
+    }, style],
+    testID: testID,
+    children: [onExpand === undefined ? /*#__PURE__*/_jsx(View, {
+      style: shell,
+      children: body
+    }) : /*#__PURE__*/_jsx(Pressable, {
+      role: "button",
+      accessibilityLabel: expandLabel,
+      onPress: onExpand,
+      onHoverIn: onIn,
+      onHoverOut: onOut,
+      style: shell,
+      testID: testID ? `${testID}-expand` : undefined,
+      children: body
+    }), onMutedChange === undefined && onEndCall === undefined ? null : /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        marginLeft: 6
+      },
+      children: [onMutedChange === undefined ? null : /*#__PURE__*/_jsx(CallControlButton, {
+        icon: RiMicLine,
+        activeIcon: RiMicOffFill,
+        label: muted ? l.unmute : l.mute,
+        active: muted,
+        size: "small",
+        accentColor: accentColor,
+        onPress: () => onMutedChange(!muted),
+        testID: testID ? `${testID}-mute` : undefined
+      }), onEndCall === undefined ? null : /*#__PURE__*/_jsx(CallControlButton, {
+        icon: CallEndGlyph,
+        label: l.endCall,
+        tone: "end",
+        size: "small",
+        accentColor: accentColor,
+        onPress: onEndCall,
+        testID: testID ? `${testID}-end` : undefined
+      })]
+    })]
+  });
+}
+export const CallMinimisedPill = /*#__PURE__*/memo(CallMinimisedPillComponent);
+CallMinimisedPill.displayName = 'CallMinimisedPill';
+//# sourceMappingURL=CallMinimisedPill.js.map

package/lib/module/call-ui/CallMinimisedPill.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","Pressable","View","bloomShadowStyle","useInteractionState","RiMicLine","RiMicOffFill","RiPhoneFill","RiVideoOnLine","useTheme","Text","CallControlButton","CallEndGlyph","CALL_CONTROL_LABELS","resolveCallPaint","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","HEIGHT","PILL_MIN_WIDTH","GLYPH","CallMinimisedPillComponent","name","duration","statusText","mode","muted","onMutedChange","onExpand","onEndCall","accentColor","labels","style","testID","theme","paint","state","hovered","onIn","onOut","l","expandLabel","expand","undefined","ModeGlyph","line","body","children","width","height","borderRadius","alignItems","justifyContent","backgroundColor","control","fill","onStage","flex","minWidth","variant","numberOfLines","color","onStageMuted","fontVariant","negativeOnStage","shell","flexDirection","gap","minHeight","paddingTop","paddingRight","paddingBottom","paddingLeft","controlHover","stage","borderWidth","borderColor","pipBorder","alignSelf","role","accessibilityLabel","onPress","onHoverIn","onHoverOut","marginLeft","icon","activeIcon","label","unmute","mute","active","size","endCall","tone","CallMinimisedPill","displayName"],"sourceRoot":"../../../src","sources":["call-ui/CallMinimisedPill.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/call-ui/CallScreen.js

@@ -0,0 +1,276 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Avatar } from "../avatar/Avatar.js";
+import { RiChat3Line } from "../icons/remix/RiChat3Line.js";
+import { RiCollapseDiagonalLine } from "../icons/remix/RiCollapseDiagonalLine.js";
+import { RiGroupLine } from "../icons/remix/RiGroupLine.js";
+import { RiLockLine } from "../icons/remix/RiLockLine.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { CallControlButton, CallControls } from "./CallControls.js";
+import { CallMinimisedPill } from "./CallMinimisedPill.js";
+import { CallScrim, CallStageBackdrop, PictureInPicture } from "./parts.js";
+import { CALL_PIP_CYCLE, CALL_SCREEN_LABELS, CALL_UI_RADIUS, callIsLive, resolveCallPaint, resolveCallStatusLine } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * `CallScreen`: the whole call, as one presentational surface.
+ *
+ *   voice     a 128px avatar over an accent wash (see `parts.tsx`), the name in
+ *             `title-1-semibold`, the status line, then the encryption line
+ *   video     `remoteVideo` fills the stage, the name and status move to a
+ *             compact overlay under the top bar, and the local camera sits in a
+ *             corner as a 96×140 PiP
+ *   top bar   minimise · (slot) · chat · participants
+ *   bottom    `CallControls`, over a scrim
+ *
+ * Two scrims, not a tint: chrome over a video frame has to stay legible
+ * whatever the frame is doing, and darkening the whole picture to achieve that
+ * throws away the thing the user is looking at.
+ *
+ * `status` is never read directly for the line under the name — that is
+ * `resolveCallStatusLine`, which owns the precedence (a `duration` surviving
+ * into `ended` is the bug it exists for).
+ *
+ * The PiP MOVES BY PRESS, not by drag. A drag has no keyboard and no
+ * screen-reader equivalent, so pressing the PiP cycles the corners clockwise
+ * and reports the new one through `onMoveLocal` — the whole 96×140 frame is
+ * the target, which is also the easiest thing to hit with a thumb. An app that
+ * wants a real drag gesture wraps the screen and reports the corner it landed
+ * in; `localVideoCorner` is a controlled prop, so both paths drive the same
+ * state.
+ */
+
+const AVATAR_SIZE = 128;
+const TOP_BAR_HEIGHT = 96;
+const BOTTOM_SCRIM_HEIGHT = 200;
+function CallScreenComponent({
+  mode = 'voice',
+  name,
+  subtitle,
+  avatar,
+  avatarVariant,
+  status,
+  duration,
+  statusText,
+  accentColor,
+  encryption,
+  remoteVideo,
+  localVideo,
+  localVideoCorner = 'top-right',
+  onMoveLocal,
+  localVideoWidth = 96,
+  controls,
+  controlsSlot,
+  onMinimise,
+  onOpenChat,
+  onOpenParticipants,
+  participantCount,
+  topBarSlot,
+  minimised = false,
+  labels,
+  children,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveCallPaint(theme, accentColor), [theme, accentColor]);
+  const l = useMemo(() => ({
+    ...CALL_SCREEN_LABELS,
+    ...labels
+  }), [labels]);
+  const line = resolveCallStatusLine({
+    status,
+    duration,
+    statusText,
+    labels: l
+  });
+  const live = callIsLive(status);
+  const onStage = mode === 'video' && remoteVideo !== undefined;
+  if (minimised) {
+    return /*#__PURE__*/_jsx(CallMinimisedPill, {
+      name: name,
+      duration: duration,
+      statusText: status === 'active' ? statusText : line,
+      mode: mode,
+      muted: controls?.muted,
+      onMutedChange: controls?.onMutedChange,
+      onExpand: onMinimise,
+      onEndCall: controls?.onEndCall,
+      accentColor: accentColor,
+      style: style,
+      testID: testID
+    });
+  }
+  const identity = /*#__PURE__*/_jsxs(View, {
+    style: {
+      alignItems: 'center',
+      gap: 6
+    },
+    children: [/*#__PURE__*/_jsx(Text, {
+      variant: "title-1-semibold",
+      numberOfLines: 1,
+      style: {
+        color: paint.onStage,
+        textAlign: 'center'
+      },
+      testID: testID ? `${testID}-name` : undefined,
+      children: name
+    }), subtitle === undefined ? null : /*#__PURE__*/_jsx(Text, {
+      variant: "body-regular",
+      numberOfLines: 1,
+      style: {
+        color: paint.onStageMuted,
+        textAlign: 'center'
+      },
+      children: subtitle
+    }), /*#__PURE__*/_jsx(Text, {
+      variant: "body-medium",
+      numberOfLines: 1,
+      style: {
+        color: paint.onStageMuted,
+        textAlign: 'center'
+      },
+      testID: testID ? `${testID}-status` : undefined,
+      children: line
+    }), encryption === undefined ? null : /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        marginTop: 4
+      },
+      testID: testID ? `${testID}-encryption` : undefined,
+      children: [/*#__PURE__*/_jsx(RiLockLine, {
+        width: 13,
+        height: 13,
+        fill: paint.onStageMuted
+      }), typeof encryption === 'string' ? /*#__PURE__*/_jsx(Text, {
+        variant: "caption-1-regular",
+        style: {
+          color: paint.onStageMuted
+        },
+        children: encryption
+      }) : encryption]
+    })]
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      flex: 1,
+      minHeight: 420,
+      backgroundColor: paint.stage,
+      overflow: 'hidden',
+      borderRadius: CALL_UI_RADIUS.stage
+    }, style],
+    testID: testID,
+    children: [onStage ? /*#__PURE__*/_jsx(View, {
+      style: StyleSheet.absoluteFill,
+      testID: testID ? `${testID}-remote` : undefined,
+      children: remoteVideo
+    }) : /*#__PURE__*/_jsx(CallStageBackdrop, {
+      paint: paint
+    }), onStage ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(CallScrim, {
+        paint: paint,
+        edge: "top",
+        height: TOP_BAR_HEIGHT,
+        opacity: 0.68
+      }), /*#__PURE__*/_jsx(CallScrim, {
+        paint: paint,
+        edge: "bottom",
+        height: BOTTOM_SCRIM_HEIGHT,
+        opacity: 0.78
+      })]
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        paddingTop: 16,
+        paddingRight: 16,
+        paddingBottom: 8,
+        paddingLeft: 16
+      },
+      children: [onMinimise === undefined ? null : /*#__PURE__*/_jsx(CallControlButton, {
+        icon: RiCollapseDiagonalLine,
+        label: l.minimise,
+        size: "small",
+        accentColor: accentColor,
+        onPress: onMinimise,
+        testID: testID ? `${testID}-minimise` : undefined
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          flex: 1
+        },
+        children: topBarSlot
+      }), onOpenChat === undefined ? null : /*#__PURE__*/_jsx(CallControlButton, {
+        icon: RiChat3Line,
+        label: l.chat,
+        size: "small",
+        accentColor: accentColor,
+        onPress: onOpenChat,
+        testID: testID ? `${testID}-chat` : undefined
+      }), onOpenParticipants === undefined ? null : /*#__PURE__*/_jsx(CallControlButton, {
+        icon: RiGroupLine,
+        label: participantCount === undefined ? l.participants : `${l.participants} (${participantCount})`,
+        size: "small",
+        accentColor: accentColor,
+        onPress: onOpenParticipants,
+        testID: testID ? `${testID}-participants` : undefined
+      })]
+    }), onStage ? /*#__PURE__*/_jsx(View, {
+      style: {
+        paddingRight: 16,
+        paddingLeft: 16
+      },
+      children: identity
+    }) : /*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 24,
+        paddingRight: 24,
+        paddingLeft: 24
+      },
+      children: [/*#__PURE__*/_jsx(Avatar, {
+        source: avatar,
+        variant: avatarVariant,
+        name: name,
+        size: AVATAR_SIZE,
+        testID: testID ? `${testID}-avatar` : undefined
+      }), identity]
+    }), onStage ? /*#__PURE__*/_jsx(View, {
+      style: {
+        flex: 1
+      }
+    }) : null, localVideo === undefined ? null : /*#__PURE__*/_jsx(PictureInPicture, {
+      corner: localVideoCorner,
+      width: localVideoWidth,
+      borderColor: paint.pipBorder,
+      backgroundColor: paint.tile,
+      moveLabel: onMoveLocal === undefined ? undefined : l.movePip(CALL_PIP_CYCLE[localVideoCorner]),
+      onMove: onMoveLocal === undefined ? undefined : () => onMoveLocal(CALL_PIP_CYCLE[localVideoCorner]),
+      hintColor: paint.onStage,
+      hintBackground: paint.tilePill,
+      testID: testID ? `${testID}-pip` : undefined,
+      children: localVideo
+    }), children, /*#__PURE__*/_jsx(View, {
+      style: {
+        paddingRight: 16,
+        paddingBottom: 24,
+        paddingLeft: 16,
+        paddingTop: 8
+      },
+      children: controlsSlot !== undefined ? controlsSlot : controls !== undefined && live ? /*#__PURE__*/_jsx(CallControls, {
+        ...controls,
+        accentColor: controls.accentColor ?? accentColor,
+        testID: testID ? `${testID}-controls` : undefined
+      }) : null
+    })]
+  });
+}
+export const CallScreen = /*#__PURE__*/memo(CallScreenComponent);
+CallScreen.displayName = 'CallScreen';
+//# sourceMappingURL=CallScreen.js.map