preflight

Pexip preflight

The preflight screen is the gauntlet between "user clicked a meeting link" and "user is in the call." Webapp3 handles a surprising amount here: device enumeration with hot-swap detection, permission prompts that can fail in 5+ different ways, mic/camera test, fallback notifications when devices vanish, blocked-permission help screens with browser-specific instructional videos, and a separate preview pipeline so effects like blur work before the main media pipeline starts.

This skill captures the right structure. The deep details live in the parent media-pipeline skill (createMedia setup) — preflight is mostly about the UI hooks that @pexip/media-components provides, plus the browser-detection pattern.

The two flows: Express vs Standard

Webapp3 has two preflight UX patterns:

// From src/viewModels/ExpressFlow.viewModel.tsx
export const ExpressFlow: React.FC<{conferenceAlias: string}> = ({conferenceAlias}) => {
    const call = useJoinMeetingCallback(conferenceAlias);
    const [callType] = useConfig('callType');

    return userAgentDetails.isMobile || userAgentDetails.isTablet ? (
        <ReadyToJoinStep call={call} />
    ) : (
        <ExpressFlowView showSpinner={false}>
            <PreflightJoin flowType={FlowType.Express}>
                <PreflightDeviceSelection />
                <JoinMeetingButton onClick={call} callType={callType} />
                {applicationConfig.availableCallTypes.length > 0 && (
                    <OtherJoiningOptions />
                )}
            </PreflightJoin>
        </ExpressFlowView>
    );
};

The mobile branch uses ReadyToJoinStep (a card-based flow), desktop uses ExpressFlowView (a sidebar layout).