@oxy.so/bloom 2.10.0 → 2.11.0

package/src/call-ui/CallScreen.tsx

@@ -0,0 +1,301 @@
+import React, { memo, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { Avatar } from '../avatar/Avatar';
+import { RiChat3Line } from '../icons/remix/RiChat3Line';
+import { RiCollapseDiagonalLine } from '../icons/remix/RiCollapseDiagonalLine';
+import { RiGroupLine } from '../icons/remix/RiGroupLine';
+import { RiLockLine } from '../icons/remix/RiLockLine';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { CallControlButton, CallControls } from './CallControls';
+import { CallMinimisedPill } from './CallMinimisedPill';
+import { CallScrim, CallStageBackdrop, PictureInPicture } from './parts';
+import {
+  CALL_PIP_CYCLE,
+  CALL_SCREEN_LABELS,
+  CALL_UI_RADIUS,
+  callIsLive,
+  resolveCallPaint,
+  resolveCallStatusLine,
+} from './shared';
+import type { CallScreenProps } from './types';
+
+/**
+ * `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,
+}: CallScreenProps) {
+  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 (
+      <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 = (
+    <View style={{ alignItems: 'center', gap: 6 }}>
+      <Text
+        variant="title-1-semibold"
+        numberOfLines={1}
+        style={{ color: paint.onStage, textAlign: 'center' }}
+        testID={testID ? `${testID}-name` : undefined}
+      >
+        {name}
+      </Text>
+      {subtitle === undefined ? null : (
+        <Text
+          variant="body-regular"
+          numberOfLines={1}
+          style={{ color: paint.onStageMuted, textAlign: 'center' }}
+        >
+          {subtitle}
+        </Text>
+      )}
+      <Text
+        variant="body-medium"
+        numberOfLines={1}
+        style={{ color: paint.onStageMuted, textAlign: 'center' }}
+        testID={testID ? `${testID}-status` : undefined}
+      >
+        {line}
+      </Text>
+      {encryption === undefined ? null : (
+        <View
+          style={{ flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 4 }}
+          testID={testID ? `${testID}-encryption` : undefined}
+        >
+          <RiLockLine width={13} height={13} fill={paint.onStageMuted} />
+          {typeof encryption === 'string' ? (
+            <Text variant="caption-1-regular" style={{ color: paint.onStageMuted }}>
+              {encryption}
+            </Text>
+          ) : (
+            encryption
+          )}
+        </View>
+      )}
+    </View>
+  );
+
+  return (
+    <View
+      style={[
+        {
+          flex: 1,
+          minHeight: 420,
+          backgroundColor: paint.stage,
+          overflow: 'hidden',
+          borderRadius: CALL_UI_RADIUS.stage,
+        },
+        style,
+      ]}
+      testID={testID}
+    >
+      {onStage ? (
+        <View style={StyleSheet.absoluteFill} testID={testID ? `${testID}-remote` : undefined}>
+          {remoteVideo}
+        </View>
+      ) : (
+        <CallStageBackdrop paint={paint} />
+      )}
+
+      {onStage ? (
+        <>
+          <CallScrim paint={paint} edge="top" height={TOP_BAR_HEIGHT} opacity={0.68} />
+          <CallScrim paint={paint} edge="bottom" height={BOTTOM_SCRIM_HEIGHT} opacity={0.78} />
+        </>
+      ) : null}
+
+      {/* Top bar */}
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 8,
+          paddingTop: 16,
+          paddingRight: 16,
+          paddingBottom: 8,
+          paddingLeft: 16,
+        }}
+      >
+        {onMinimise === undefined ? null : (
+          <CallControlButton
+            icon={RiCollapseDiagonalLine}
+            label={l.minimise}
+            size="small"
+            accentColor={accentColor}
+            onPress={onMinimise}
+            testID={testID ? `${testID}-minimise` : undefined}
+          />
+        )}
+        <View style={{ flex: 1 }}>{topBarSlot}</View>
+        {onOpenChat === undefined ? null : (
+          <CallControlButton
+            icon={RiChat3Line}
+            label={l.chat}
+            size="small"
+            accentColor={accentColor}
+            onPress={onOpenChat}
+            testID={testID ? `${testID}-chat` : undefined}
+          />
+        )}
+        {onOpenParticipants === undefined ? null : (
+          <CallControlButton
+            icon={RiGroupLine}
+            label={
+              participantCount === undefined
+                ? l.participants
+                : `${l.participants} (${participantCount})`
+            }
+            size="small"
+            accentColor={accentColor}
+            onPress={onOpenParticipants}
+            testID={testID ? `${testID}-participants` : undefined}
+          />
+        )}
+      </View>
+
+      {/* Stage */}
+      {onStage ? (
+        <View style={{ paddingRight: 16, paddingLeft: 16 }}>{identity}</View>
+      ) : (
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 24,
+            paddingRight: 24,
+            paddingLeft: 24,
+          }}
+        >
+          <Avatar
+            source={avatar}
+            variant={avatarVariant}
+            name={name}
+            size={AVATAR_SIZE}
+            testID={testID ? `${testID}-avatar` : undefined}
+          />
+          {identity}
+        </View>
+      )}
+
+      {onStage ? <View style={{ flex: 1 }} /> : null}
+
+      {/* Local picture-in-picture */}
+      {localVideo === undefined ? null : (
+        <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}
+        >
+          {localVideo}
+        </PictureInPicture>
+      )}
+
+      {children}
+
+      {/* Controls */}
+      <View style={{ paddingRight: 16, paddingBottom: 24, paddingLeft: 16, paddingTop: 8 }}>
+        {controlsSlot !== undefined
+          ? controlsSlot
+          : controls !== undefined && live
+            ? <CallControls
+                {...controls}
+                accentColor={controls.accentColor ?? accentColor}
+                testID={testID ? `${testID}-controls` : undefined}
+              />
+            : null}
+      </View>
+    </View>
+  );
+}
+
+export const CallScreen = memo(CallScreenComponent);
+CallScreen.displayName = 'CallScreen';

package/src/call-ui/GroupCallBar.tsx

@@ -0,0 +1,250 @@
+import React, { memo, useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+
+import { Avatar } from '../avatar/Avatar';
+import { Button } from '../button';
+import { useInteractionState } from '../hooks/use-interaction-state';
+import { RiMicLine } from '../icons/remix/RiMicLine';
+import { RiMicOffFill } from '../icons/remix/RiMicOffFill';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { CALL_CONTROL_LABELS, CALL_UI_RADIUS, resolveCallPaint } from './shared';
+import type { GroupCallBarProps } from './types';
+
+/**
+ * `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,
+}: GroupCallBarProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveCallPaint(theme), [theme]);
+  const { state: hovered, onIn, onOut } = useInteractionState();
+
+  const speakingLabel = labels?.speaking ?? ((name: string) => `${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 = (
+    <>
+      <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+        {title === undefined ? null : (
+          <Text variant="body-2-medium" numberOfLines={1} style={{ color: paint.text }}>
+            {title}
+          </Text>
+        )}
+        {line === '' ? null : (
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+            {speakingName === undefined || speakingName === '' ? null : (
+              <View
+                style={{
+                  width: 6,
+                  height: 6,
+                  borderRadius: 3,
+                  backgroundColor: paint.speaking,
+                }}
+              />
+            )}
+            <Text
+              variant="caption-1-regular"
+              numberOfLines={1}
+              style={{ color: paint.textSecondary, flexShrink: 1 }}
+              testID={testID ? `${testID}-status` : undefined}
+            >
+              {line}
+            </Text>
+          </View>
+        )}
+      </View>
+
+      {shown.length === 0 ? null : (
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          {shown.map((participant, index) => (
+            <View
+              key={participant.id}
+              style={{
+                marginLeft: index === 0 ? 0 : -OVERLAP,
+                borderRadius: AVATAR / 2,
+                borderWidth: 2,
+                borderColor: paint.surfaceRaised,
+                zIndex: shown.length - index,
+              }}
+            >
+              <Avatar
+                source={participant.avatar}
+                variant={participant.avatarVariant}
+                name={participant.name}
+                size={AVATAR}
+              />
+            </View>
+          ))}
+          {rest === 0 ? null : (
+            <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}
+            >
+              <Text variant="caption-2-semibold" style={{ color: paint.textSecondary }}>
+                {`+${rest}`}
+              </Text>
+            </View>
+          )}
+        </View>
+      )}
+    </>
+  );
+
+  const shell = {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    gap: 12,
+    flex: 1,
+    minWidth: 0,
+    borderRadius: CALL_UI_RADIUS.card - 6,
+    backgroundColor: hovered && onPress !== undefined ? paint.rowSelected : 'transparent',
+    paddingTop: 4,
+    paddingRight: 6,
+    paddingBottom: 4,
+    paddingLeft: 6,
+  };
+
+  return (
+    <View
+      style={[
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 10,
+          borderRadius: CALL_UI_RADIUS.card,
+          borderWidth: 1,
+          borderColor: paint.border,
+          backgroundColor: paint.surfaceRaised,
+          paddingTop: 10,
+          paddingRight: 10,
+          paddingBottom: 10,
+          paddingLeft: 12,
+        },
+        style,
+      ]}
+      testID={testID}
+    >
+      {onPress === undefined ? (
+        <View style={shell}>{body}</View>
+      ) : (
+        <Pressable
+          role="button"
+          accessibilityLabel={title ?? line}
+          onPress={onPress}
+          onHoverIn={onIn}
+          onHoverOut={onOut}
+          style={shell}
+          testID={testID ? `${testID}-open` : undefined}
+        >
+          {body}
+        </Pressable>
+      )}
+
+      {joined && onMutedChange !== undefined ? (
+        <Pressable
+          role="button"
+          accessibilityLabel={
+            muted
+              ? (labels?.unmute ?? CALL_CONTROL_LABELS.unmute)
+              : (labels?.mute ?? 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}
+        >
+          {muted ? (
+            <RiMicOffFill width={16} height={16} fill={paint.negative} />
+          ) : (
+            <RiMicLine width={16} height={16} fill={paint.textSecondary} />
+          )}
+        </Pressable>
+      ) : null}
+
+      {joined ? (
+        onLeave === undefined ? null : (
+          <Button
+            variant="destructive"
+            size="small"
+            onPress={onLeave}
+            testID={testID ? `${testID}-leave` : undefined}
+          >
+            {labels?.leave ?? 'Leave'}
+          </Button>
+        )
+      ) : onJoin === undefined ? null : (
+        <Button
+          variant="primary"
+          size="small"
+          onPress={onJoin}
+          testID={testID ? `${testID}-join` : undefined}
+        >
+          {labels?.join ?? 'Join'}
+        </Button>
+      )}
+    </View>
+  );
+}
+
+export const GroupCallBar = memo(GroupCallBarComponent);
+GroupCallBar.displayName = 'GroupCallBar';

package/src/call-ui/GroupCallGrid.tsx

@@ -0,0 +1,144 @@
+import React, { memo, useMemo, useState } from 'react';
+import { View, type LayoutChangeEvent } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { GroupCallTile } from './GroupCallTile';
+import { CALL_UI_RADIUS, callGridLayout, callSpotlightIndex, resolveCallPaint } from './shared';
+import type { GroupCallGridProps } from './types';
+
+/**
+ * `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,
+}: GroupCallGridProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveCallPaint(theme), [theme]);
+  const [measured, setMeasured] = useState(0);
+  const available = width ?? measured;
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const next = Math.round(event.nativeEvent.layout.width);
+    setMeasured((current) => (current === next ? current : next));
+  };
+
+  const overflowText = formatOverflow ?? ((count: number) => `+${count} more`);
+  const spotlightAt = layout === 'spotlight' ? 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
+      : 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 (
+    <View
+      style={[{ width: '100%' }, style]}
+      onLayout={width === undefined ? onLayout : undefined}
+      testID={testID}
+    >
+      {available <= 0 ? null : layout === 'spotlight' ? (
+        <View style={{ gap }}>
+          {spotlight === undefined ? null : (
+            <GroupCallTile
+              participant={spotlight}
+              width={available}
+              height={Math.round(available / Math.max(0.5, aspectRatio * 1.35))}
+              prominent
+              onPress={onParticipantPress}
+              formatMuted={formatMuted}
+              testID={testID ? `${testID}-spotlight` : undefined}
+            />
+          )}
+          {strip.length === 0 ? null : (
+            <View style={{ flexDirection: 'row', gap }}>
+              {strip.map((participant) => (
+                <GroupCallTile
+                  key={participant.id}
+                  participant={participant}
+                  width={stripWidth}
+                  height={Math.round(stripWidth / aspectRatio)}
+                  onPress={onParticipantPress}
+                  formatMuted={formatMuted}
+                  testID={testID ? `${testID}-strip-${participant.id}` : undefined}
+                />
+              ))}
+            </View>
+          )}
+        </View>
+      ) : grid === undefined ? null : (
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap }}>
+          {participants.slice(0, grid.visible).map((participant) => (
+            <GroupCallTile
+              key={participant.id}
+              participant={participant}
+              width={tileWidth}
+              height={Math.round(tileWidth / aspectRatio)}
+              onPress={onParticipantPress}
+              formatMuted={formatMuted}
+              testID={testID ? `${testID}-tile-${participant.id}` : undefined}
+            />
+          ))}
+          {grid.overflow > 0 ? (
+            <View
+              accessibilityLabel={overflowText(grid.overflow)}
+              style={{
+                width: tileWidth,
+                height: Math.round(tileWidth / aspectRatio),
+                borderRadius: CALL_UI_RADIUS.tile,
+                backgroundColor: paint.tile,
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+              testID={testID ? `${testID}-overflow` : undefined}
+            >
+              <Text variant="title-2-medium" numberOfLines={1} style={{ color: paint.onStage }}>
+                {overflowText(grid.overflow)}
+              </Text>
+            </View>
+          ) : null}
+        </View>
+      )}
+    </View>
+  );
+}
+
+export const GroupCallGrid = memo(GroupCallGridComponent);
+GroupCallGrid.displayName = 'GroupCallGrid';