"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7830/react/features/settings/components/web/MoreTab.tsx" (20 Feb 2024, 8494 Bytes) of package /linux/misc/jitsi-meet-7830.tar.gz:


As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) TSX (TypeScript with React) source code syntax highlighting (style: standard) with prefixed line numbers. Alternatively you can here view or download the uninterpreted source code file.

    1 import { Theme } from '@mui/material';
    2 import { withStyles } from '@mui/styles';
    3 import clsx from 'clsx';
    4 import React from 'react';
    5 import { WithTranslation } from 'react-i18next';
    6 
    7 import AbstractDialogTab, {
    8     IProps as AbstractDialogTabProps
    9 } from '../../../base/dialog/components/web/AbstractDialogTab';
   10 import { translate } from '../../../base/i18n/functions';
   11 import Checkbox from '../../../base/ui/components/web/Checkbox';
   12 import Select from '../../../base/ui/components/web/Select';
   13 import { MAX_ACTIVE_PARTICIPANTS } from '../../../filmstrip/constants';
   14 
   15 /**
   16  * The type of the React {@code Component} props of {@link MoreTab}.
   17  */
   18 export interface IProps extends AbstractDialogTabProps, WithTranslation {
   19 
   20     /**
   21      * CSS classes object.
   22      */
   23     classes: any;
   24 
   25     /**
   26      * The currently selected language to display in the language select
   27      * dropdown.
   28      */
   29     currentLanguage: string;
   30 
   31     /**
   32      * Whether to show hide self view setting.
   33      */
   34     disableHideSelfView: boolean;
   35 
   36     /**
   37      * Whether or not follow me is currently active (enabled by some other participant).
   38      */
   39     followMeActive: boolean;
   40 
   41     /**
   42      * Whether or not to hide self-view screen.
   43      */
   44     hideSelfView: boolean;
   45 
   46     /**
   47      * Whether we are in visitors mode.
   48      */
   49     iAmVisitor: boolean;
   50 
   51     /**
   52      * All available languages to display in the language select dropdown.
   53      */
   54     languages: Array<string>;
   55 
   56     /**
   57      * The number of max participants to display on stage.
   58      */
   59     maxStageParticipants: number;
   60 
   61     /**
   62      * Whether or not to display the language select dropdown.
   63      */
   64     showLanguageSettings: boolean;
   65 
   66     /**
   67      * Whether or not to display moderator-only settings.
   68      */
   69     showModeratorSettings: boolean;
   70 
   71     /**
   72      * Whether or not to show prejoin screen.
   73      */
   74     showPrejoinPage: boolean;
   75 
   76     /**
   77      * Whether or not to display the prejoin settings section.
   78      */
   79     showPrejoinSettings: boolean;
   80 
   81     /**
   82      * Wether or not the stage filmstrip is enabled.
   83      */
   84     stageFilmstripEnabled: boolean;
   85 }
   86 
   87 const styles = (theme: Theme) => {
   88     return {
   89         container: {
   90             display: 'flex',
   91             flexDirection: 'column' as const,
   92             padding: '0 2px'
   93         },
   94 
   95         divider: {
   96             margin: `${theme.spacing(4)} 0`,
   97             width: '100%',
   98             height: '1px',
   99             border: 0,
  100             backgroundColor: theme.palette.ui03
  101         },
  102 
  103         checkbox: {
  104             margin: `${theme.spacing(3)} 0`
  105         }
  106     };
  107 };
  108 
  109 /**
  110  * React {@code Component} for modifying language and moderator settings.
  111  *
  112  * @augments Component
  113  */
  114 class MoreTab extends AbstractDialogTab<IProps, any> {
  115     /**
  116      * Initializes a new {@code MoreTab} instance.
  117      *
  118      * @param {Object} props - The read-only properties with which the new
  119      * instance is to be initialized.
  120      */
  121     constructor(props: IProps) {
  122         super(props);
  123 
  124         // Bind event handler so it is only bound once for every instance.
  125         this._onShowPrejoinPageChanged = this._onShowPrejoinPageChanged.bind(this);
  126         this._renderMaxStageParticipantsSelect = this._renderMaxStageParticipantsSelect.bind(this);
  127         this._onMaxStageParticipantsSelect = this._onMaxStageParticipantsSelect.bind(this);
  128         this._onHideSelfViewChanged = this._onHideSelfViewChanged.bind(this);
  129         this._onLanguageItemSelect = this._onLanguageItemSelect.bind(this);
  130     }
  131 
  132     /**
  133      * Implements React's {@link Component#render()}.
  134      *
  135      * @inheritdoc
  136      * @returns {ReactElement}
  137      */
  138     render() {
  139         const {
  140             showPrejoinSettings,
  141             classes,
  142             disableHideSelfView,
  143             iAmVisitor,
  144             hideSelfView,
  145             showLanguageSettings,
  146             t } = this.props;
  147 
  148         return (
  149             <div
  150                 className = { clsx('more-tab', classes.container) }
  151                 key = 'more'>
  152                 {showPrejoinSettings && <>
  153                     {this._renderPrejoinScreenSettings()}
  154                     <hr className = { classes.divider } />
  155                 </>}
  156                 {this._renderMaxStageParticipantsSelect()}
  157                 {!disableHideSelfView && !iAmVisitor && (
  158                     <Checkbox
  159                         checked = { hideSelfView }
  160                         className = { classes.checkbox }
  161                         label = { t('videothumbnail.hideSelfView') }
  162                         name = 'hide-self-view'
  163                         onChange = { this._onHideSelfViewChanged } />
  164                 )}
  165                 {showLanguageSettings && this._renderLanguageSelect()}
  166             </div>
  167         );
  168     }
  169 
  170     /**
  171      * Callback invoked to select if the lobby
  172      * should be shown.
  173      *
  174      * @param {Object} e - The key event to handle.
  175      *
  176      * @returns {void}
  177      */
  178     _onShowPrejoinPageChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
  179         super._onChange({ showPrejoinPage: checked });
  180     }
  181 
  182     /**
  183      * Callback invoked to select a max number of stage participants from the select dropdown.
  184      *
  185      * @param {Object} e - The key event to handle.
  186      * @private
  187      * @returns {void}
  188      */
  189     _onMaxStageParticipantsSelect(e: React.ChangeEvent<HTMLSelectElement>) {
  190         const maxParticipants = Number(e.target.value);
  191 
  192         super._onChange({ maxStageParticipants: maxParticipants });
  193     }
  194 
  195     /**
  196      * Callback invoked to select if hide self view should be enabled.
  197      *
  198      * @param {Object} e - The key event to handle.
  199      *
  200      * @returns {void}
  201      */
  202     _onHideSelfViewChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
  203         super._onChange({ hideSelfView: checked });
  204     }
  205 
  206     /**
  207      * Callback invoked to select a language from select dropdown.
  208      *
  209      * @param {Object} e - The key event to handle.
  210      *
  211      * @returns {void}
  212      */
  213     _onLanguageItemSelect(e: React.ChangeEvent<HTMLSelectElement>) {
  214         const language = e.target.value;
  215 
  216         super._onChange({ currentLanguage: language });
  217     }
  218 
  219     /**
  220      * Returns the React Element for modifying prejoin screen settings.
  221      *
  222      * @private
  223      * @returns {ReactElement}
  224      */
  225     _renderPrejoinScreenSettings() {
  226         const { t, showPrejoinPage } = this.props;
  227 
  228         return (
  229             <Checkbox
  230                 checked = { showPrejoinPage }
  231                 label = { t('prejoin.showScreen') }
  232                 name = 'show-prejoin-page'
  233                 onChange = { this._onShowPrejoinPageChanged } />
  234         );
  235     }
  236 
  237     /**
  238      * Returns the React Element for the max stage participants dropdown.
  239      *
  240      * @returns {ReactElement}
  241      */
  242     _renderMaxStageParticipantsSelect() {
  243         const { maxStageParticipants, t, stageFilmstripEnabled } = this.props;
  244 
  245         if (!stageFilmstripEnabled) {
  246             return null;
  247         }
  248         const maxParticipantsItems = Array(MAX_ACTIVE_PARTICIPANTS).fill(0)
  249             .map((no, index) => {
  250                 return {
  251                     value: index + 1,
  252                     label: `${index + 1}`
  253                 };
  254             });
  255 
  256         return (
  257             <Select
  258                 id = 'more-maxStageParticipants-select'
  259                 label = { t('settings.maxStageParticipants') }
  260                 onChange = { this._onMaxStageParticipantsSelect }
  261                 options = { maxParticipantsItems }
  262                 value = { maxStageParticipants } />
  263         );
  264     }
  265 
  266     /**
  267      * Returns the menu item for changing displayed language.
  268      *
  269      * @private
  270      * @returns {ReactElement}
  271      */
  272     _renderLanguageSelect() {
  273         const {
  274             classes,
  275             currentLanguage,
  276             languages,
  277             t
  278         } = this.props;
  279 
  280         const languageItems
  281             = languages.map((language: string) => {
  282                 return {
  283                     value: language,
  284                     label: t(`languages:${language}`)
  285                 };
  286             });
  287 
  288         return (
  289             <Select
  290                 className = { classes.bottomMargin }
  291                 id = 'more-language-select'
  292                 label = { t('settings.language') }
  293                 onChange = { this._onLanguageItemSelect }
  294                 options = { languageItems }
  295                 value = { currentLanguage } />
  296         );
  297     }
  298 }
  299 
  300 export default withStyles(styles)(translate(MoreTab));