snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

react/features/lobby/components/web/LobbySection.tsx

@@ -0,0 +1,122 @@
+import React, { PureComponent } from 'react';
+import { WithTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
+
+import { IReduxState, IStore } from '../../../app/types';
+import { translate } from '../../../base/i18n/functions';
+import Switch from '../../../base/ui/components/web/Switch';
+import { toggleLobbyMode } from '../../actions';
+
+interface IProps extends WithTranslation {
+
+    /**
+     * True if lobby is currently enabled in the conference.
+     */
+    _lobbyEnabled: boolean;
+
+    /**
+     * The Redux Dispatch function.
+     */
+    dispatch: IStore['dispatch'];
+}
+
+interface IState {
+
+    /**
+     * True if the lobby switch is toggled on.
+     */
+    lobbyEnabled: boolean;
+}
+
+/**
+ * Implements a security feature section to control lobby mode.
+ */
+class LobbySection extends PureComponent<IProps, IState> {
+    /**
+     * Instantiates a new component.
+     *
+     * @inheritdoc
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            lobbyEnabled: props._lobbyEnabled
+        };
+
+        this._onToggleLobby = this._onToggleLobby.bind(this);
+    }
+
+    /**
+     * Implements React's {@link Component#getDerivedStateFromProps()}.
+     *
+     * @inheritdoc
+     */
+    static getDerivedStateFromProps(props: IProps, state: IState) {
+        if (props._lobbyEnabled !== state.lobbyEnabled) {
+
+            return {
+                lobbyEnabled: props._lobbyEnabled
+            };
+        }
+
+        return null;
+    }
+
+    /**
+     * Implements {@code PureComponent#render}.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        const { t } = this.props;
+
+        return (
+            <div id = 'lobby-section'>
+                <p
+                    className = 'description'
+                    role = 'banner'>
+                    { t('lobby.enableDialogText') }
+                </p>
+                <div className = 'control-row'>
+                    <label htmlFor = 'lobby-section-switch'>
+                        { t('lobby.toggleLabel') }
+                    </label>
+                    <Switch
+                        checked = { this.state.lobbyEnabled }
+                        id = 'lobby-section-switch'
+                        onChange = { this._onToggleLobby } />
+                </div>
+            </div>
+        );
+    }
+
+    /**
+     * Callback to be invoked when the user toggles the lobby feature on or off.
+     *
+     * @returns {void}
+     */
+    _onToggleLobby() {
+        const newValue = !this.state.lobbyEnabled;
+
+        this.setState({
+            lobbyEnabled: newValue
+        });
+
+        this.props.dispatch(toggleLobbyMode(newValue));
+    }
+}
+
+/**
+ * Maps part of the Redux state to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @returns {IProps}
+ */
+function mapStateToProps(state: IReduxState) {
+    return {
+        _lobbyEnabled: state['features/lobby'].lobbyEnabled
+    };
+}
+
+export default translate(connect(mapStateToProps)(LobbySection));