@selfcommunity/react-ui/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/FocusLayout.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { ParticipantTile } from './ParticipantTile';
import { mergeProps } from './utils';
/**
 * The `FocusLayoutContainer` is a layout component that expects two children:
 * A small side component: In a video conference, this is usually a carousel of participants
 * who are not in focus. And a larger main component to display the focused participant.
 * For example, with the `FocusLayout` component.
 */
export function FocusLayoutContainer(props) {
    const elementProps = mergeProps(props, { className: 'lk-focus-layout' });
    return _jsx("div", Object.assign({}, elementProps, { children: props.children }));
}
export function FocusLayoutContainerNoParticipants(props) {
    const elementProps = mergeProps(props, { className: 'lk-focus-layout' });
    return (_jsx("div", Object.assign({}, elementProps, { style: { gridTemplateColumns: 'none' } }, { children: props.children })));
}
/**
 * The `FocusLayout` component is just a light wrapper around the `ParticipantTile` to display a single participant.
 */
export function FocusLayout(_a) {
    var { trackRef, disableTileFocusToggle = false } = _a, htmlProps = __rest(_a, ["trackRef", "disableTileFocusToggle"]);
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    return _jsx(ParticipantTile, Object.assign({ trackRef: trackRef, disableTileFocusToggle: disableTileFocusToggle }, htmlProps));
}