@oxy.so/bloom 2.10.0 → 2.12.0

package/lib/commonjs/call-ui/GroupCallBar.js

@@ -0,0 +1,233 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GroupCallBar = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _Avatar = require("../avatar/Avatar.js");
+var _button = require("../button");
+var _useInteractionState = require("../hooks/use-interaction-state.js");
+var _RiMicLine = require("../icons/remix/RiMicLine.js");
+var _RiMicOffFill = require("../icons/remix/RiMicOffFill.js");
+var _useTheme = require("../theme/use-theme.js");
+var _index = require("../typography/index.js");
+var _shared = require("./shared.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * `GroupCallBar`: the strip that says a group call is happening, wherever you
+ * are in the app — a chat header, a channel, a list row.
+ *
+ *   an IN-APP surface, so it takes the theme and flips with the mode
+ *   a live dot + "Ana is speaking" when someone is, else the quiet
+ *   `statusText` ("4 on the call")
+ *   overlapping avatars (−10px each, the newest under the one before it) with
+ *   a `+N` mark
+ *   a Join / Leave button, and a mute toggle once you have joined
+ *
+ * The speaking line replaces the status line rather than sitting beside it.
+ * Two lines in a 56px strip is a strip that scrolls, and "who is talking" is
+ * the only thing on it that changes second to second.
+ */
+
+const AVATAR = 28;
+const OVERLAP = 10;
+function GroupCallBarComponent({
+  title,
+  speakingName,
+  statusText,
+  participants = [],
+  maxAvatars = 4,
+  joined = false,
+  onJoin,
+  onLeave,
+  muted = false,
+  onMutedChange,
+  onPress,
+  labels,
+  style,
+  testID
+}) {
+  const theme = (0, _useTheme.useTheme)();
+  const paint = (0, _react.useMemo)(() => (0, _shared.resolveCallPaint)(theme), [theme]);
+  const {
+    state: hovered,
+    onIn,
+    onOut
+  } = (0, _useInteractionState.useInteractionState)();
+  const speakingLabel = labels?.speaking ?? (name => `${name} is speaking`);
+  const line = speakingName !== undefined && speakingName !== '' ? speakingLabel(speakingName) : statusText ?? '';
+  const shown = participants.slice(0, maxAvatars);
+  const rest = Math.max(0, participants.length - shown.length);
+  const body = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flex: 1,
+        minWidth: 0,
+        gap: 2
+      },
+      children: [title === undefined ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+        variant: "body-2-medium",
+        numberOfLines: 1,
+        style: {
+          color: paint.text
+        },
+        children: title
+      }), line === '' ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 6
+        },
+        children: [speakingName === undefined || speakingName === '' ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            width: 6,
+            height: 6,
+            borderRadius: 3,
+            backgroundColor: paint.speaking
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          variant: "caption-1-regular",
+          numberOfLines: 1,
+          style: {
+            color: paint.textSecondary,
+            flexShrink: 1
+          },
+          testID: testID ? `${testID}-status` : undefined,
+          children: line
+        })]
+      })]
+    }), shown.length === 0 ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      children: [shown.map((participant, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          marginLeft: index === 0 ? 0 : -OVERLAP,
+          borderRadius: AVATAR / 2,
+          borderWidth: 2,
+          borderColor: paint.surfaceRaised,
+          zIndex: shown.length - index
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+          source: participant.avatar,
+          variant: participant.avatarVariant,
+          name: participant.name,
+          size: AVATAR
+        })
+      }, participant.id)), rest === 0 ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          marginLeft: -OVERLAP,
+          width: AVATAR,
+          height: AVATAR,
+          borderRadius: AVATAR / 2,
+          borderWidth: 2,
+          borderColor: paint.surfaceRaised,
+          backgroundColor: paint.rowSelected,
+          alignItems: 'center',
+          justifyContent: 'center',
+          // ON TOP of the stack, not under it. The avatars overlap
+          // first-over-next, so the last item's LEFT edge is covered —
+          // which clips a centred "+2" to "2".
+          zIndex: shown.length + 1
+        },
+        testID: testID ? `${testID}-more` : undefined,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          variant: "caption-2-semibold",
+          style: {
+            color: paint.textSecondary
+          },
+          children: `+${rest}`
+        })
+      })]
+    })]
+  });
+  const shell = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    flex: 1,
+    minWidth: 0,
+    borderRadius: _shared.CALL_UI_RADIUS.card - 6,
+    backgroundColor: hovered && onPress !== undefined ? paint.rowSelected : 'transparent',
+    paddingTop: 4,
+    paddingRight: 6,
+    paddingBottom: 4,
+    paddingLeft: 6
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 10,
+      borderRadius: _shared.CALL_UI_RADIUS.card,
+      borderWidth: 1,
+      borderColor: paint.border,
+      backgroundColor: paint.surfaceRaised,
+      paddingTop: 10,
+      paddingRight: 10,
+      paddingBottom: 10,
+      paddingLeft: 12
+    }, style],
+    testID: testID,
+    children: [onPress === undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: shell,
+      children: body
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      role: "button",
+      accessibilityLabel: title ?? line,
+      onPress: onPress,
+      onHoverIn: onIn,
+      onHoverOut: onOut,
+      style: shell,
+      testID: testID ? `${testID}-open` : undefined,
+      children: body
+    }), joined && onMutedChange !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      role: "button",
+      accessibilityLabel: muted ? labels?.unmute ?? _shared.CALL_CONTROL_LABELS.unmute : labels?.mute ?? _shared.CALL_CONTROL_LABELS.mute,
+      "aria-pressed": muted,
+      accessibilityState: {
+        selected: muted
+      },
+      onPress: () => onMutedChange(!muted),
+      style: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderColor: muted ? paint.negative : paint.border,
+        backgroundColor: muted ? paint.rowSelected : 'transparent'
+      },
+      testID: testID ? `${testID}-mute` : undefined,
+      children: muted ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_RiMicOffFill.RiMicOffFill, {
+        width: 16,
+        height: 16,
+        fill: paint.negative
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_RiMicLine.RiMicLine, {
+        width: 16,
+        height: 16,
+        fill: paint.textSecondary
+      })
+    }) : null, joined ? onLeave === undefined ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+      variant: "destructive",
+      size: "small",
+      onPress: onLeave,
+      testID: testID ? `${testID}-leave` : undefined,
+      children: labels?.leave ?? 'Leave'
+    }) : onJoin === undefined ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+      variant: "primary",
+      size: "small",
+      onPress: onJoin,
+      testID: testID ? `${testID}-join` : undefined,
+      children: labels?.join ?? 'Join'
+    })]
+  });
+}
+const GroupCallBar = exports.GroupCallBar = /*#__PURE__*/(0, _react.memo)(GroupCallBarComponent);
+GroupCallBar.displayName = 'GroupCallBar';
+//# sourceMappingURL=GroupCallBar.js.map

package/lib/commonjs/call-ui/GroupCallBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_Avatar","_button","_useInteractionState","_RiMicLine","_RiMicOffFill","_useTheme","_index","_shared","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AVATAR","OVERLAP","GroupCallBarComponent","title","speakingName","statusText","participants","maxAvatars","joined","onJoin","onLeave","muted","onMutedChange","onPress","labels","style","testID","theme","useTheme","paint","useMemo","resolveCallPaint","state","hovered","onIn","onOut","useInteractionState","speakingLabel","speaking","name","line","undefined","shown","slice","rest","Math","max","length","body","jsxs","Fragment","children","View","flex","minWidth","gap","jsx","Text","variant","numberOfLines","color","text","flexDirection","alignItems","width","height","borderRadius","backgroundColor","textSecondary","flexShrink","map","participant","index","marginLeft","borderWidth","borderColor","surfaceRaised","zIndex","Avatar","source","avatar","avatarVariant","size","id","rowSelected","justifyContent","shell","CALL_UI_RADIUS","card","paddingTop","paddingRight","paddingBottom","paddingLeft","border","Pressable","role","accessibilityLabel","onHoverIn","onHoverOut","unmute","CALL_CONTROL_LABELS","mute","accessibilityState","selected","negative","RiMicOffFill","fill","RiMicLine","Button","leave","join","GroupCallBar","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["call-ui/GroupCallBar.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,oBAAA,GAAAJ,OAAA;AACA,IAAAK,UAAA,GAAAL,OAAA;AACA,IAAAM,aAAA,GAAAN,OAAA;AACA,IAAAO,SAAA,GAAAP,OAAA;AACA,IAAAQ,MAAA,GAAAR,OAAA;AACA,IAAAS,OAAA,GAAAT,OAAA;AAAiF,IAAAU,WAAA,GAAAV,OAAA;AAAA,SAAAD,wBAAAY,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAd,uBAAA,YAAAA,CAAAY,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAGjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,MAAMkB,MAAM,GAAG,EAAE;AACjB,MAAMC,OAAO,GAAG,EAAE;AAElB,SAASC,qBAAqBA,CAAC;EAC7BC,KAAK;EACLC,YAAY;EACZC,UAAU;EACVC,YAAY,GAAG,EAAE;EACjBC,UAAU,GAAG,CAAC;EACdC,MAAM,GAAG,KAAK;EACdC,MAAM;EACNC,OAAO;EACPC,KAAK,GAAG,KAAK;EACbC,aAAa;EACbC,OAAO;EACPC,MAAM;EACNC,KAAK;EACLC;AACiB,CAAC,EAAE;EACpB,MAAMC,KAAK,GAAG,IAAAC,kBAAQ,EAAC,CAAC;EACxB,MAAMC,KAAK,GAAG,IAAAC,cAAO,EAAC,MAAM,IAAAC,wBAAgB,EAACJ,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAC7D,MAAM;IAAEK,KAAK,EAAEC,OAAO;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAG,IAAAC,wCAAmB,EAAC,CAAC;EAE7D,MAAMC,aAAa,GAAGb,MAAM,EAAEc,QAAQ,KAAMC,IAAY,IAAK,GAAGA,IAAI,cAAc,CAAC;EACnF,MAAMC,IAAI,GACR1B,YAAY,KAAK2B,SAAS,IAAI3B,YAAY,KAAK,EAAE,GAC7CuB,aAAa,CAACvB,YAAY,CAAC,GAC1BC,UAAU,IAAI,EAAG;EACxB,MAAM2B,KAAK,GAAG1B,YAAY,CAAC2B,KAAK,CAAC,CAAC,EAAE1B,UAAU,CAAC;EAC/C,MAAM2B,IAAI,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAE9B,YAAY,CAAC+B,MAAM,GAAGL,KAAK,CAACK,MAAM,CAAC;EAE5D,MAAMC,IAAI,gBACR,IAAA1D,WAAA,CAAA2D,IAAA,EAAA3D,WAAA,CAAA4D,QAAA;IAAAC,QAAA,gBACE,IAAA7D,WAAA,CAAA2D,IAAA,EAACpE,YAAA,CAAAuE,IAAI;MAAC3B,KAAK,EAAE;QAAE4B,IAAI,EAAE,CAAC;QAAEC,QAAQ,EAAE,CAAC;QAAEC,GAAG,EAAE;MAAE,CAAE;MAAAJ,QAAA,GAC3CtC,KAAK,KAAK4B,SAAS,GAAG,IAAI,gBACzB,IAAAnD,WAAA,CAAAkE,GAAA,EAACpE,MAAA,CAAAqE,IAAI;QAACC,OAAO,EAAC,eAAe;QAACC,aAAa,EAAE,CAAE;QAAClC,KAAK,EAAE;UAAEmC,KAAK,EAAE/B,KAAK,CAACgC;QAAK,CAAE;QAAAV,QAAA,EAC1EtC;MAAK,CACF,CACP,EACA2B,IAAI,KAAK,EAAE,GAAG,IAAI,gBACjB,IAAAlD,WAAA,CAAA2D,IAAA,EAACpE,YAAA,CAAAuE,IAAI;QAAC3B,KAAK,EAAE;UAAEqC,aAAa,EAAE,KAAK;UAAEC,UAAU,EAAE,QAAQ;UAAER,GAAG,EAAE;QAAE,CAAE;QAAAJ,QAAA,GACjErC,YAAY,KAAK2B,SAAS,IAAI3B,YAAY,KAAK,EAAE,GAAG,IAAI,gBACvD,IAAAxB,WAAA,CAAAkE,GAAA,EAAC3E,YAAA,CAAAuE,IAAI;UACH3B,KAAK,EAAE;YACLuC,KAAK,EAAE,CAAC;YACRC,MAAM,EAAE,CAAC;YACTC,YAAY,EAAE,CAAC;YACfC,eAAe,EAAEtC,KAAK,CAACS;UACzB;QAAE,CACH,CACF,eACD,IAAAhD,WAAA,CAAAkE,GAAA,EAACpE,MAAA,CAAAqE,IAAI;UACHC,OAAO,EAAC,mBAAmB;UAC3BC,aAAa,EAAE,CAAE;UACjBlC,KAAK,EAAE;YAAEmC,KAAK,EAAE/B,KAAK,CAACuC,aAAa;YAAEC,UAAU,EAAE;UAAE,CAAE;UACrD3C,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,SAAS,GAAGe,SAAU;UAAAU,QAAA,EAE/CX;QAAI,CACD,CAAC;MAAA,CACH,CACP;IAAA,CACG,CAAC,EAENE,KAAK,CAACK,MAAM,KAAK,CAAC,GAAG,IAAI,gBACxB,IAAAzD,WAAA,CAAA2D,IAAA,EAACpE,YAAA,CAAAuE,IAAI;MAAC3B,KAAK,EAAE;QAAEqC,aAAa,EAAE,KAAK;QAAEC,UAAU,EAAE;MAAS,CAAE;MAAAZ,QAAA,GACzDT,KAAK,CAAC4B,GAAG,CAAC,CAACC,WAAW,EAAEC,KAAK,kBAC5B,IAAAlF,WAAA,CAAAkE,GAAA,EAAC3E,YAAA,CAAAuE,IAAI;QAEH3B,KAAK,EAAE;UACLgD,UAAU,EAAED,KAAK,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC7D,OAAO;UACtCuD,YAAY,EAAExD,MAAM,GAAG,CAAC;UACxBgE,WAAW,EAAE,CAAC;UACdC,WAAW,EAAE9C,KAAK,CAAC+C,aAAa;UAChCC,MAAM,EAAEnC,KAAK,CAACK,MAAM,GAAGyB;QACzB,CAAE;QAAArB,QAAA,eAEF,IAAA7D,WAAA,CAAAkE,GAAA,EAAC1E,OAAA,CAAAgG,MAAM;UACLC,MAAM,EAAER,WAAW,CAACS,MAAO;UAC3BtB,OAAO,EAAEa,WAAW,CAACU,aAAc;UACnC1C,IAAI,EAAEgC,WAAW,CAAChC,IAAK;UACvB2C,IAAI,EAAExE;QAAO,CACd;MAAC,GAdG6D,WAAW,CAACY,EAeb,CACP,CAAC,EACDvC,IAAI,KAAK,CAAC,GAAG,IAAI,gBAChB,IAAAtD,WAAA,CAAAkE,GAAA,EAAC3E,YAAA,CAAAuE,IAAI;QACH3B,KAAK,EAAE;UACLgD,UAAU,EAAE,CAAC9D,OAAO;UACpBqD,KAAK,EAAEtD,MAAM;UACbuD,MAAM,EAAEvD,MAAM;UACdwD,YAAY,EAAExD,MAAM,GAAG,CAAC;UACxBgE,WAAW,EAAE,CAAC;UACdC,WAAW,EAAE9C,KAAK,CAAC+C,aAAa;UAChCT,eAAe,EAAEtC,KAAK,CAACuD,WAAW;UAClCrB,UAAU,EAAE,QAAQ;UACpBsB,cAAc,EAAE,QAAQ;UACxB;UACA;UACA;UACAR,MAAM,EAAEnC,KAAK,CAACK,MAAM,GAAG;QACzB,CAAE;QACFrB,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,OAAO,GAAGe,SAAU;QAAAU,QAAA,eAE9C,IAAA7D,WAAA,CAAAkE,GAAA,EAACpE,MAAA,CAAAqE,IAAI;UAACC,OAAO,EAAC,oBAAoB;UAACjC,KAAK,EAAE;YAAEmC,KAAK,EAAE/B,KAAK,CAACuC;UAAc,CAAE;UAAAjB,QAAA,EACtE,IAAIP,IAAI;QAAE,CACP;MAAC,CACH,CACP;IAAA,CACG,CACP;EAAA,CACD,CACH;EAED,MAAM0C,KAAK,GAAG;IACZxB,aAAa,EAAE,KAAc;IAC7BC,UAAU,EAAE,QAAiB;IAC7BR,GAAG,EAAE,EAAE;IACPF,IAAI,EAAE,CAAC;IACPC,QAAQ,EAAE,CAAC;IACXY,YAAY,EAAEqB,sBAAc,CAACC,IAAI,GAAG,CAAC;IACrCrB,eAAe,EAAElC,OAAO,IAAIV,OAAO,KAAKkB,SAAS,GAAGZ,KAAK,CAACuD,WAAW,GAAG,aAAa;IACrFK,UAAU,EAAE,CAAC;IACbC,YAAY,EAAE,CAAC;IACfC,aAAa,EAAE,CAAC;IAChBC,WAAW,EAAE;EACf,CAAC;EAED,oBACE,IAAAtG,WAAA,CAAA2D,IAAA,EAACpE,YAAA,CAAAuE,IAAI;IACH3B,KAAK,EAAE,CACL;MACEqC,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBR,GAAG,EAAE,EAAE;MACPW,YAAY,EAAEqB,sBAAc,CAACC,IAAI;MACjCd,WAAW,EAAE,CAAC;MACdC,WAAW,EAAE9C,KAAK,CAACgE,MAAM;MACzB1B,eAAe,EAAEtC,KAAK,CAAC+C,aAAa;MACpCa,UAAU,EAAE,EAAE;MACdC,YAAY,EAAE,EAAE;MAChBC,aAAa,EAAE,EAAE;MACjBC,WAAW,EAAE;IACf,CAAC,EACDnE,KAAK,CACL;IACFC,MAAM,EAAEA,MAAO;IAAAyB,QAAA,GAEd5B,OAAO,KAAKkB,SAAS,gBACpB,IAAAnD,WAAA,CAAAkE,GAAA,EAAC3E,YAAA,CAAAuE,IAAI;MAAC3B,KAAK,EAAE6D,KAAM;MAAAnC,QAAA,EAAEH;IAAI,CAAO,CAAC,gBAEjC,IAAA1D,WAAA,CAAAkE,GAAA,EAAC3E,YAAA,CAAAiH,SAAS;MACRC,IAAI,EAAC,QAAQ;MACbC,kBAAkB,EAAEnF,KAAK,IAAI2B,IAAK;MAClCjB,OAAO,EAAEA,OAAQ;MACjB0E,SAAS,EAAE/D,IAAK;MAChBgE,UAAU,EAAE/D,KAAM;MAClBV,KAAK,EAAE6D,KAAM;MACb5D,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,OAAO,GAAGe,SAAU;MAAAU,QAAA,EAE7CH;IAAI,CACI,CACZ,EAEA9B,MAAM,IAAII,aAAa,KAAKmB,SAAS,gBACpC,IAAAnD,WAAA,CAAAkE,GAAA,EAAC3E,YAAA,CAAAiH,SAAS;MACRC,IAAI,EAAC,QAAQ;MACbC,kBAAkB,EAChB3E,KAAK,GACAG,MAAM,EAAE2E,MAAM,IAAIC,2BAAmB,CAACD,MAAM,GAC5C3E,MAAM,EAAE6E,IAAI,IAAID,2BAAmB,CAACC,IAC1C;MACD,gBAAchF,KAAM;MACpBiF,kBAAkB,EAAE;QAAEC,QAAQ,EAAElF;MAAM,CAAE;MACxCE,OAAO,EAAEA,CAAA,KAAMD,aAAa,CAAC,CAACD,KAAK,CAAE;MACrCI,KAAK,EAAE;QACLuC,KAAK,EAAE,EAAE;QACTC,MAAM,EAAE,EAAE;QACVC,YAAY,EAAE,EAAE;QAChBH,UAAU,EAAE,QAAQ;QACpBsB,cAAc,EAAE,QAAQ;QACxBX,WAAW,EAAE,CAAC;QACdC,WAAW,EAAEtD,KAAK,GAAGQ,KAAK,CAAC2E,QAAQ,GAAG3E,KAAK,CAACgE,MAAM;QAClD1B,eAAe,EAAE9C,KAAK,GAAGQ,KAAK,CAACuD,WAAW,GAAG;MAC/C,CAAE;MACF1D,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,OAAO,GAAGe,SAAU;MAAAU,QAAA,EAE7C9B,KAAK,gBACJ,IAAA/B,WAAA,CAAAkE,GAAA,EAACtE,aAAA,CAAAuH,YAAY;QAACzC,KAAK,EAAE,EAAG;QAACC,MAAM,EAAE,EAAG;QAACyC,IAAI,EAAE7E,KAAK,CAAC2E;MAAS,CAAE,CAAC,gBAE7D,IAAAlH,WAAA,CAAAkE,GAAA,EAACvE,UAAA,CAAA0H,SAAS;QAAC3C,KAAK,EAAE,EAAG;QAACC,MAAM,EAAE,EAAG;QAACyC,IAAI,EAAE7E,KAAK,CAACuC;MAAc,CAAE;IAC/D,CACQ,CAAC,GACV,IAAI,EAEPlD,MAAM,GACLE,OAAO,KAAKqB,SAAS,GAAG,IAAI,gBAC1B,IAAAnD,WAAA,CAAAkE,GAAA,EAACzE,OAAA,CAAA6H,MAAM;MACLlD,OAAO,EAAC,aAAa;MACrBwB,IAAI,EAAC,OAAO;MACZ3D,OAAO,EAAEH,OAAQ;MACjBM,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,QAAQ,GAAGe,SAAU;MAAAU,QAAA,EAE9C3B,MAAM,EAAEqF,KAAK,IAAI;IAAO,CACnB,CACT,GACC1F,MAAM,KAAKsB,SAAS,GAAG,IAAI,gBAC7B,IAAAnD,WAAA,CAAAkE,GAAA,EAACzE,OAAA,CAAA6H,MAAM;MACLlD,OAAO,EAAC,SAAS;MACjBwB,IAAI,EAAC,OAAO;MACZ3D,OAAO,EAAEJ,MAAO;MAChBO,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,OAAO,GAAGe,SAAU;MAAAU,QAAA,EAE7C3B,MAAM,EAAEsF,IAAI,IAAI;IAAM,CACjB,CACT;EAAA,CACG,CAAC;AAEX;AAEO,MAAMC,YAAY,GAAAC,OAAA,CAAAD,YAAA,gBAAG,IAAAE,WAAI,EAACrG,qBAAqB,CAAC;AACvDmG,YAAY,CAACG,WAAW,GAAG,cAAc","ignoreList":[]}

package/lib/commonjs/call-ui/GroupCallGrid.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GroupCallGrid = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _useTheme = require("../theme/use-theme.js");
+var _index = require("../typography/index.js");
+var _GroupCallTile = require("./GroupCallTile.js");
+var _shared = require("./shared.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * `GroupCallGrid`: everyone on the call.
+ *
+ *   layout="grid"       equal tiles, `ceil(sqrt(n))` columns — 2 side by side,
+ *                       4 a square, 6 as 3×2, 9 as 3×3
+ *   layout="spotlight"  one big tile (the presenter, else the speaker, else the
+ *                       first) over a strip of the rest
+ *
+ * Past `maxTiles` the last CELL becomes `+N`, rather than a cell being added
+ * beside the grid: a 9-up grid that quietly becomes a 10-cell 4×3 the moment a
+ * tenth person joins is the failure this shape exists to stop. The maths is
+ * `callGridLayout`, a pure function, and it is tested as one.
+ *
+ * The grid MEASURES itself (`onLayout`) unless `width` is given, and draws
+ * nothing until it has a width — a first paint at zero stacks every tile on top
+ * of itself, and on native that frame is visible.
+ */
+
+/** Tiles in the spotlight strip before it stops adding them. */
+const STRIP_MAX = 5;
+function GroupCallGridComponent({
+  participants,
+  layout = 'grid',
+  spotlightId,
+  maxTiles = 9,
+  columns: columnsOverride,
+  gap = 8,
+  aspectRatio = 1,
+  width,
+  onParticipantPress,
+  formatOverflow,
+  formatMuted,
+  style,
+  testID
+}) {
+  const theme = (0, _useTheme.useTheme)();
+  const paint = (0, _react.useMemo)(() => (0, _shared.resolveCallPaint)(theme), [theme]);
+  const [measured, setMeasured] = (0, _react.useState)(0);
+  const available = width ?? measured;
+  const onLayout = event => {
+    const next = Math.round(event.nativeEvent.layout.width);
+    setMeasured(current => current === next ? current : next);
+  };
+  const overflowText = formatOverflow ?? (count => `+${count} more`);
+  const spotlightAt = layout === 'spotlight' ? (0, _shared.callSpotlightIndex)(participants, spotlightId) : -1;
+  const spotlight = spotlightAt >= 0 ? participants[spotlightAt] : undefined;
+  const strip = layout === 'spotlight' ? participants.filter((_, i) => i !== spotlightAt).slice(0, STRIP_MAX) : [];
+  const grid = layout === 'spotlight' ? undefined : (0, _shared.callGridLayout)(participants.length, maxTiles, columnsOverride);
+  const tileWidth = grid === undefined ? 0 : Math.floor((available - gap * (grid.columns - 1)) / grid.columns);
+  const stripWidth = strip.length === 0 ? 0 : Math.floor((available - gap * (strip.length - 1)) / strip.length);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [{
+      width: '100%'
+    }, style],
+    onLayout: width === undefined ? onLayout : undefined,
+    testID: testID,
+    children: available <= 0 ? null : layout === 'spotlight' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        gap
+      },
+      children: [spotlight === undefined ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupCallTile.GroupCallTile, {
+        participant: spotlight,
+        width: available,
+        height: Math.round(available / Math.max(0.5, aspectRatio * 1.35)),
+        prominent: true,
+        onPress: onParticipantPress,
+        formatMuted: formatMuted,
+        testID: testID ? `${testID}-spotlight` : undefined
+      }), strip.length === 0 ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          flexDirection: 'row',
+          gap
+        },
+        children: strip.map(participant => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupCallTile.GroupCallTile, {
+          participant: participant,
+          width: stripWidth,
+          height: Math.round(stripWidth / aspectRatio),
+          onPress: onParticipantPress,
+          formatMuted: formatMuted,
+          testID: testID ? `${testID}-strip-${participant.id}` : undefined
+        }, participant.id))
+      })]
+    }) : grid === undefined ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap
+      },
+      children: [participants.slice(0, grid.visible).map(participant => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupCallTile.GroupCallTile, {
+        participant: participant,
+        width: tileWidth,
+        height: Math.round(tileWidth / aspectRatio),
+        onPress: onParticipantPress,
+        formatMuted: formatMuted,
+        testID: testID ? `${testID}-tile-${participant.id}` : undefined
+      }, participant.id)), grid.overflow > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        accessibilityLabel: overflowText(grid.overflow),
+        style: {
+          width: tileWidth,
+          height: Math.round(tileWidth / aspectRatio),
+          borderRadius: _shared.CALL_UI_RADIUS.tile,
+          backgroundColor: paint.tile,
+          alignItems: 'center',
+          justifyContent: 'center'
+        },
+        testID: testID ? `${testID}-overflow` : undefined,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          variant: "title-2-medium",
+          numberOfLines: 1,
+          style: {
+            color: paint.onStage
+          },
+          children: overflowText(grid.overflow)
+        })
+      }) : null]
+    })
+  });
+}
+const GroupCallGrid = exports.GroupCallGrid = /*#__PURE__*/(0, _react.memo)(GroupCallGridComponent);
+GroupCallGrid.displayName = 'GroupCallGrid';
+//# sourceMappingURL=GroupCallGrid.js.map

package/lib/commonjs/call-ui/GroupCallGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_useTheme","_index","_GroupCallTile","_shared","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","STRIP_MAX","GroupCallGridComponent","participants","layout","spotlightId","maxTiles","columns","columnsOverride","gap","aspectRatio","width","onParticipantPress","formatOverflow","formatMuted","style","testID","theme","useTheme","paint","useMemo","resolveCallPaint","measured","setMeasured","useState","available","onLayout","event","next","Math","round","nativeEvent","current","overflowText","count","spotlightAt","callSpotlightIndex","spotlight","undefined","strip","filter","_","slice","grid","callGridLayout","length","tileWidth","floor","stripWidth","jsx","View","children","jsxs","GroupCallTile","participant","height","max","prominent","onPress","flexDirection","map","id","flexWrap","visible","overflow","accessibilityLabel","borderRadius","CALL_UI_RADIUS","tile","backgroundColor","alignItems","justifyContent","Text","variant","numberOfLines","color","onStage","GroupCallGrid","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["call-ui/GroupCallGrid.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/call-ui/GroupCallTile.js

@@ -0,0 +1,177 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GroupCallTile = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _Avatar = require("../avatar/Avatar.js");
+var _RiCastLine = require("../icons/remix/RiCastLine.js");
+var _RiMicOffFill = require("../icons/remix/RiMicOffFill.js");
+var _useTheme = require("../theme/use-theme.js");
+var _index = require("../typography/index.js");
+var _shared = require("./shared.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * `GroupCallTile`: one participant in a group call.
+ *
+ *   the video frame, or the avatar centred on a raised wash of the stage
+ *   a name pill bottom-left (the tile's own fill at 45%, so it survives both a
+ *   bright frame and a dark one), with the muted glyph inside it
+ *   a speaking RING drawn as an overlay, never as the tile's own border —
+ *   a border that appears changes the content box, so every tile would shift
+ *   by 3px each time somebody started talking
+ *
+ * The ring PULSES by opacity on a 900ms loop and holds still at full opacity
+ * under reduced motion. Opacity is the right channel: it composites, so the
+ * pulse costs nothing on either platform and it cannot move the layout.
+ */
+
+const RING_WIDTH = 3;
+function SpeakingRing({
+  color,
+  radius
+}) {
+  const reduced = (0, _reactNativeReanimated.useReducedMotion)();
+  const pulse = (0, _reactNativeReanimated.useSharedValue)(1);
+  (0, _react.useEffect)(() => {
+    if (reduced) {
+      pulse.value = 1;
+      return;
+    }
+    pulse.value = (0, _reactNativeReanimated.withRepeat)((0, _reactNativeReanimated.withTiming)(0.4, {
+      duration: _shared.CALL_SPEAKING_PULSE_MS,
+      easing: _reactNativeReanimated.Easing.inOut(_reactNativeReanimated.Easing.quad)
+    }), -1, true);
+  }, [reduced, pulse]);
+  const style = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    opacity: pulse.value
+  }), [pulse]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+    pointerEvents: "none",
+    style: [_reactNative.StyleSheet.absoluteFill, {
+      borderRadius: radius,
+      borderWidth: RING_WIDTH,
+      borderColor: color
+    }, style]
+  });
+}
+function GroupCallTileComponent({
+  participant,
+  width,
+  height,
+  onPress,
+  formatMuted,
+  prominent = false,
+  style,
+  testID
+}) {
+  const theme = (0, _useTheme.useTheme)();
+  const paint = (0, _react.useMemo)(() => (0, _shared.resolveCallPaint)(theme, participant.accentColor), [theme, participant.accentColor]);
+  const {
+    id,
+    name,
+    avatar,
+    avatarVariant,
+    video,
+    muted,
+    speaking,
+    presenting,
+    label
+  } = participant;
+  const caption = label ?? name;
+  const avatarSize = Math.max(28, Math.min(prominent ? 112 : 64, Math.floor(Math.min(width, height) * 0.42)));
+  const accessibleName = muted === true ? (formatMuted ?? (n => `${n}, muted`))(caption) : caption;
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [video === undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+        source: avatar,
+        variant: avatarVariant,
+        name: name,
+        size: avatarSize
+      })
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: _reactNative.StyleSheet.absoluteFill,
+      children: video
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        position: 'absolute',
+        left: 6,
+        bottom: 6,
+        right: 6,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        alignSelf: 'flex-start'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 4,
+          maxWidth: '100%',
+          borderRadius: 999,
+          backgroundColor: paint.tilePill,
+          paddingTop: 2,
+          paddingRight: 8,
+          paddingBottom: 2,
+          paddingLeft: 8
+        },
+        children: [presenting === true ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_RiCastLine.RiCastLine, {
+          width: 12,
+          height: 12,
+          fill: paint.onStage
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          variant: prominent ? 'body-2-medium' : 'caption-1-medium',
+          numberOfLines: 1,
+          style: {
+            color: paint.onStage,
+            flexShrink: 1
+          },
+          children: caption
+        }), muted === true ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_RiMicOffFill.RiMicOffFill, {
+          width: 12,
+          height: 12,
+          fill: paint.negativeOnStage,
+          testID: testID ? `${testID}-muted` : undefined
+        }) : null]
+      })
+    }), speaking === true ? /*#__PURE__*/(0, _jsxRuntime.jsx)(SpeakingRing, {
+      color: paint.speaking,
+      radius: _shared.CALL_UI_RADIUS.tile
+    }) : null]
+  });
+  const shell = {
+    width,
+    height,
+    borderRadius: _shared.CALL_UI_RADIUS.tile,
+    backgroundColor: paint.tile,
+    overflow: 'hidden'
+  };
+  if (onPress === undefined) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [shell, style],
+      testID: testID,
+      children: content
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    role: "button",
+    accessibilityLabel: accessibleName,
+    onPress: () => onPress(id),
+    style: [shell, style],
+    testID: testID,
+    children: content
+  });
+}
+const GroupCallTile = exports.GroupCallTile = /*#__PURE__*/(0, _react.memo)(GroupCallTileComponent);
+GroupCallTile.displayName = 'GroupCallTile';
+//# sourceMappingURL=GroupCallTile.js.map

package/lib/commonjs/call-ui/GroupCallTile.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_Avatar","_RiCastLine","_RiMicOffFill","_useTheme","_index","_shared","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","RING_WIDTH","SpeakingRing","color","radius","reduced","useReducedMotion","pulse","useSharedValue","useEffect","value","withRepeat","withTiming","duration","CALL_SPEAKING_PULSE_MS","easing","Easing","inOut","quad","style","useAnimatedStyle","opacity","jsx","View","pointerEvents","StyleSheet","absoluteFill","borderRadius","borderWidth","borderColor","GroupCallTileComponent","participant","width","height","onPress","formatMuted","prominent","testID","theme","useTheme","paint","useMemo","resolveCallPaint","accentColor","id","name","avatar","avatarVariant","video","muted","speaking","presenting","label","caption","avatarSize","Math","max","min","floor","accessibleName","content","jsxs","Fragment","children","undefined","flex","alignItems","justifyContent","Avatar","source","variant","size","position","left","bottom","right","flexDirection","gap","alignSelf","maxWidth","backgroundColor","tilePill","paddingTop","paddingRight","paddingBottom","paddingLeft","RiCastLine","fill","onStage","Text","numberOfLines","flexShrink","RiMicOffFill","negativeOnStage","CALL_UI_RADIUS","tile","shell","overflow","Pressable","role","accessibilityLabel","GroupCallTile","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["call-ui/GroupCallTile.tsx"],"mappings":"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","ignoreList":[]}