"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7561/react/features/lobby/components/web/LobbySection.tsx" (29 Sep 2023, 3651 Bytes) of package /linux/misc/jitsi-meet-7561.tar.gz:

    1 import React, { PureComponent } from 'react';
    2 import { WithTranslation } from 'react-i18next';
    3 import { connect } from 'react-redux';
    4 
    5 import { IReduxState, IStore } from '../../../app/types';
    6 import { getSecurityUiConfig } from '../../../base/config/functions.any';
    7 import { translate } from '../../../base/i18n/functions';
    8 import { isLocalParticipantModerator } from '../../../base/participants/functions';
    9 import Switch from '../../../base/ui/components/web/Switch';
   10 import { isInBreakoutRoom } from '../../../breakout-rooms/functions';
   11 import { toggleLobbyMode } from '../../actions';
   12 
   13 interface IProps extends WithTranslation {
   14 
   15     /**
   16      * True if lobby is currently enabled in the conference.
   17      */
   18     _lobbyEnabled: boolean;
   19 
   20     /**
   21      * True if the section should be visible.
   22      */
   23     _visible: boolean;
   24 
   25     /**
   26      * The Redux Dispatch function.
   27      */
   28     dispatch: IStore['dispatch'];
   29 }
   30 
   31 interface IState {
   32 
   33     /**
   34      * True if the lobby switch is toggled on.
   35      */
   36     lobbyEnabled: boolean;
   37 }
   38 
   39 /**
   40  * Implements a security feature section to control lobby mode.
   41  */
   42 class LobbySection extends PureComponent<IProps, IState> {
   43     /**
   44      * Instantiates a new component.
   45      *
   46      * @inheritdoc
   47      */
   48     constructor(props: IProps) {
   49         super(props);
   50 
   51         this.state = {
   52             lobbyEnabled: props._lobbyEnabled
   53         };
   54 
   55         this._onToggleLobby = this._onToggleLobby.bind(this);
   56     }
   57 
   58     /**
   59      * Implements React's {@link Component#getDerivedStateFromProps()}.
   60      *
   61      * @inheritdoc
   62      */
   63     static getDerivedStateFromProps(props: IProps, state: IState) {
   64         if (props._lobbyEnabled !== state.lobbyEnabled) {
   65 
   66             return {
   67                 lobbyEnabled: props._lobbyEnabled
   68             };
   69         }
   70 
   71         return null;
   72     }
   73 
   74     /**
   75      * Implements {@code PureComponent#render}.
   76      *
   77      * @inheritdoc
   78      */
   79     render() {
   80         const { _visible, t } = this.props;
   81 
   82         if (!_visible) {
   83             return null;
   84         }
   85 
   86         return (
   87             <div id = 'lobby-section'>
   88                 <p
   89                     className = 'description'
   90                     role = 'banner'>
   91                     { t('lobby.enableDialogText') }
   92                 </p>
   93                 <div className = 'control-row'>
   94                     <label htmlFor = 'lobby-section-switch'>
   95                         { t('lobby.toggleLabel') }
   96                     </label>
   97                     <Switch
   98                         checked = { this.state.lobbyEnabled }
   99                         id = 'lobby-section-switch'
  100                         onChange = { this._onToggleLobby } />
  101                 </div>
  102             </div>
  103         );
  104     }
  105 
  106     /**
  107      * Callback to be invoked when the user toggles the lobby feature on or off.
  108      *
  109      * @returns {void}
  110      */
  111     _onToggleLobby() {
  112         const newValue = !this.state.lobbyEnabled;
  113 
  114         this.setState({
  115             lobbyEnabled: newValue
  116         });
  117 
  118         this.props.dispatch(toggleLobbyMode(newValue));
  119     }
  120 }
  121 
  122 /**
  123  * Maps part of the Redux state to the props of this component.
  124  *
  125  * @param {Object} state - The Redux state.
  126  * @returns {IProps}
  127  */
  128 function mapStateToProps(state: IReduxState) {
  129     const { conference } = state['features/base/conference'];
  130     const { hideLobbyButton } = getSecurityUiConfig(state);
  131 
  132     return {
  133         _lobbyEnabled: state['features/lobby'].lobbyEnabled,
  134         _visible: conference?.isLobbySupported() && isLocalParticipantModerator(state)
  135             && !hideLobbyButton && !isInBreakoutRoom(state)
  136     };
  137 }
  138 
  139 export default translate(connect(mapStateToProps)(LobbySection));