@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
34 lines (33 loc) • 1.92 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.FocusLayout = exports.FocusLayoutContainerNoParticipants = exports.FocusLayoutContainer = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const ParticipantTile_1 = require("./ParticipantTile");
const utils_1 = require("./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.
*/
function FocusLayoutContainer(props) {
const elementProps = (0, utils_1.mergeProps)(props, { className: 'lk-focus-layout' });
return (0, jsx_runtime_1.jsx)("div", Object.assign({}, elementProps, { children: props.children }));
}
exports.FocusLayoutContainer = FocusLayoutContainer;
function FocusLayoutContainerNoParticipants(props) {
const elementProps = (0, utils_1.mergeProps)(props, { className: 'lk-focus-layout' });
return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, elementProps, { style: { gridTemplateColumns: 'none' } }, { children: props.children })));
}
exports.FocusLayoutContainerNoParticipants = FocusLayoutContainerNoParticipants;
/**
* The `FocusLayout` component is just a light wrapper around the `ParticipantTile` to display a single participant.
*/
function FocusLayout(_a) {
var { trackRef, disableTileFocusToggle = false } = _a, htmlProps = tslib_1.__rest(_a, ["trackRef", "disableTileFocusToggle"]);
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
return (0, jsx_runtime_1.jsx)(ParticipantTile_1.ParticipantTile, Object.assign({ trackRef: trackRef, disableTileFocusToggle: disableTileFocusToggle }, htmlProps));
}
exports.FocusLayout = FocusLayout;