layouts

Pexip layouts

Layouts control how the conference is composed: equal grid, speaker focus, presenter + thumbnails, etc. Pexip lets you change two layouts independently:

• Host layout (changeLayout) — what every participant sees by default
• Personal layout (changePersonalLayout) — overrides the host layout for your view only

Plus runtime info you read but rarely write: layout overlay text (name labels), lecture mode (separate guest layout), presentation in mix (server is composing presentation into the layout vs side-by-side).

This skill captures all of it.

Quick start

import {MeetingLayout} from '@pexip/media-components';
import {infinityService} from '../services/InfinityClient.service';
import {useMeetingContext} from '../hooks/meeting';

export const LayoutsPanel: React.FC = () => {
    const meeting = useMeetingContext();
    const me = meeting.getMe();
    const currentHostLayout = meeting.getCurrentHostLayout();

    const [layouts, setLayouts] = useState<Map<string, {primary: string; active: string}>>();

    useEffect(() => {
        const fetchLayouts = async () => {
            const availableLayouts = await infinityService.availableLayouts({});
            const svgs = await infinityService.layoutSvgs({});
            setLayouts(buildLayoutMap(svgs, availableLayouts));
        };
        void fetchLayouts();
    }, []);

    return (
        <MeetingLayout
            canChangeLayout={me?.canChangeLayout}
            canChangePersonalLayout={me?.canReceivePersonalMix}
            currentLayout={currentHostLayout}
            currentPersonalLayout={me?.receiveFromVideoMix?.mix_config?.transform_layout?.layout}
            setLayout={meeting.changeLayout}
            setPersonalLayout={meeting.changePersonalLayout}
            resetToMeetingLayout={meeting.resetToMeetingLayout}
            layouts={layouts}
        />
    );
};

The MeetingLayout component from @pexip/media-components does the picker UI. You feed it state + actions; it renders.