participants

Pexip participants

The participants list seems simple — show users in the meeting — but webapp3's implementation is the most architecturally dense file in the project. Reasons:

• A participant has 5+ orthogonal axes (host/guest, in-meeting/external/lobby/transferring, raised-hand, can-fecc, supports-direct-chat)
• The UI needs filtered, sorted, searched, and cached projections of these
• Breakout rooms add another dimension (every group has a breakout variant)
• Participant events fire in batches during reconnect (server replays everyone)
• Cache invalidation has dependency chains (changing host/guest invalidates "in-meeting" filter)

Webapp3 solves all of this with GroupKey (a 15-value enum) and a reverse-dependency cache invalidation graph. Use it. Don't roll your own — you'll spend a week getting the edge cases right.

The 15 GroupKey values

export enum GroupKey {
    None,                    // Everyone
    Breakout,                // Has media — eligible for breakout assignment
    DirectChat,              // Capability flag
    FECC,                    // Capability flag (far-end camera control)
    Host,                    // Role — only when in-meeting
    Guest,                   // Role — only when in-meeting
    RaisedHand,
    External,                // Service-type connections (recordings, gateway)
    InMeeting,               // The active roster
    Transferring,            // In transit between conferences/rooms
    WaitingInLobby,          // Pending admission
    BreakoutRaisedHand,
    BreakoutExternal,
    BreakoutInMeeting,
    BreakoutWaitingInLobby,
}

A single participant typically belongs to multiple groups (e.g., [None, Breakout, DirectChat, InMeeting, Host, FECC]). The assignGroups helper in createParticipants.ts derives the full set from a Participant object plus a breakoutRoom boolean.

Quick start: wire it up

import {createInMeetingParticipants, GroupKey} from './utils/createParticipants';
import {participantActivityBatchedSignal} from './signals/Participant.signals';

const participants = createInMeetingParticipants(
    infinityClient,                       // exposes admit/kick/mute/setRole
    () => mediaService.media,             // for self-mute (can't use clientApis on self)
    infinityClientSignals,                // onParticipants, onParticipantJoined, etc.
    participantActivityBatchedSignal,     // emits join/leave/update activities
    {                                     // optional: prior state from a transfer
        participants: previousParticipantsMap,
        activities: previousActivitiesArray,
    },
);

// Read filtered participants
const hosts = participants.get({filterBy: GroupKey.Host});
const handsRaised = participants.get({filterBy: GroupKey.RaisedHand});
const lobby = participants.get({filterBy: GroupKey.WaitingInLobby});
const everyone = participants.get({filterBy: GroupKey.InMeeting});

// Search
const filteredHosts = participants.get({
    filterBy: GroupKey.InMeeting,
    searchQuery: 'alice',
});

// Cleanup (call on call end / transfer)
participants.release();