import React from 'react'; import { WithTranslation } from 'react-i18next'; // @ts-expect-error import keyboardShortcut from '../../../../../modules/keyboardshortcut/keyboardshortcut'; import AbstractDialogTab, { Props as AbstractDialogTabProps } from '../../../base/dialog/components/web/AbstractDialogTab'; import { translate } from '../../../base/i18n/functions'; import Checkbox from '../../../base/ui/components/web/Checkbox'; import Select from '../../../base/ui/components/web/Select'; import { MAX_ACTIVE_PARTICIPANTS } from '../../../filmstrip/constants'; import { SS_DEFAULT_FRAME_RATE } from '../../constants'; /** * The type of the React {@code Component} props of {@link MoreTab}. */ export type Props = AbstractDialogTabProps & WithTranslation & { /** * The currently selected desktop share frame rate in the frame rate select dropdown. */ currentFramerate: string; /** * The currently selected language to display in the language select * dropdown. */ currentLanguage: string; /** * All available desktop capture frame rates. */ desktopShareFramerates: Array; /** * Whether to show hide self view setting. */ disableHideSelfView: boolean; /** * The types of enabled notifications that can be configured and their specific visibility. */ enabledNotifications: Object; /** * Whether or not follow me is currently active (enabled by some other participant). */ followMeActive: boolean; /** * Whether or not to hide self-view screen. */ hideSelfView: boolean; /** * All available languages to display in the language select dropdown. */ languages: Array; /** * The number of max participants to display on stage. */ maxStageParticipants: number; /** * Whether or not to display the language select dropdown. */ showLanguageSettings: boolean; /** * Whether or not to display moderator-only settings. */ showModeratorSettings: boolean; /** * Whether or not to display notifications settings. */ showNotificationsSettings: boolean; /** * Whether or not to show prejoin screen. */ showPrejoinPage: boolean; /** * Whether or not to display the prejoin settings section. */ showPrejoinSettings: boolean; /** * Wether or not the stage filmstrip is enabled. */ stageFilmstripEnabled: boolean; /** * Invoked to obtain translated strings. */ t: Function; }; /** * React {@code Component} for modifying language and moderator settings. * * @augments Component */ class MoreTab extends AbstractDialogTab { /** * Initializes a new {@code MoreTab} instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ constructor(props: Props) { super(props); // Bind event handler so it is only bound once for every instance. this._onFramerateItemSelect = this._onFramerateItemSelect.bind(this); this._onLanguageItemSelect = this._onLanguageItemSelect.bind(this); this._onEnabledNotificationsChanged = this._onEnabledNotificationsChanged.bind(this); this._onShowPrejoinPageChanged = this._onShowPrejoinPageChanged.bind(this); this._onKeyboardShortcutEnableChanged = this._onKeyboardShortcutEnableChanged.bind(this); this._onHideSelfViewChanged = this._onHideSelfViewChanged.bind(this); this._renderMaxStageParticipantsSelect = this._renderMaxStageParticipantsSelect.bind(this); this._onMaxStageParticipantsSelect = this._onMaxStageParticipantsSelect.bind(this); } /** * Implements React's {@link Component#render()}. * * @inheritdoc * @returns {ReactElement} */ render() { const content = []; content.push(this._renderSettingsLeft()); content.push(this._renderSettingsRight()); return (
{ content }
); } /** * Callback invoked to select a frame rate from the select dropdown. * * @param {Object} e - The key event to handle. * @private * @returns {void} */ _onFramerateItemSelect(e: React.ChangeEvent) { const frameRate = e.target.value; super._onChange({ currentFramerate: frameRate }); } /** * Callback invoked to select a language from select dropdown. * * @param {Object} e - The key event to handle. * * @returns {void} */ _onLanguageItemSelect(e: React.ChangeEvent) { const language = e.target.value; super._onChange({ currentLanguage: language }); } /** * Callback invoked to select if the lobby * should be shown. * * @param {Object} e - The key event to handle. * * @returns {void} */ _onShowPrejoinPageChanged({ target: { checked } }: React.ChangeEvent) { super._onChange({ showPrejoinPage: checked }); } /** * Callback invoked to select if the given type of * notifications should be shown. * * @param {Object} e - The key event to handle. * @param {string} type - The type of the notification. * * @returns {void} */ _onEnabledNotificationsChanged({ target: { checked } }: React.ChangeEvent, type: any) { super._onChange({ enabledNotifications: { ...this.props.enabledNotifications, [type]: checked } }); } /** * Callback invoked to select if global keyboard shortcuts * should be enabled. * * @param {Object} e - The key event to handle. * * @returns {void} */ _onKeyboardShortcutEnableChanged({ target: { checked } }: React.ChangeEvent) { keyboardShortcut.enable(checked); super._onChange({ keyboardShortcutEnable: checked }); } /** * Callback invoked to select if hide self view should be enabled. * * @param {Object} e - The key event to handle. * * @returns {void} */ _onHideSelfViewChanged({ target: { checked } }: React.ChangeEvent) { super._onChange({ hideSelfView: checked }); } /** * Callback invoked to select a max number of stage participants from the select dropdown. * * @param {Object} e - The key event to handle. * @private * @returns {void} */ _onMaxStageParticipantsSelect(e: React.ChangeEvent) { const maxParticipants = Number(e.target.value); super._onChange({ maxStageParticipants: maxParticipants }); } /** * Returns the React Element for the desktop share frame rate dropdown. * * @returns {ReactElement} */ _renderFramerateSelect() { const { currentFramerate, desktopShareFramerates, t } = this.props; const frameRateItems = desktopShareFramerates.map((frameRate: number) => { return { value: frameRate, label: `${frameRate} ${t('settings.framesPerSecond')}` }; }); return (
); } /** * Returns the React Element for modifying prejoin screen settings. * * @private * @returns {ReactElement} */ _renderPrejoinScreenSettings() { const { t, showPrejoinPage } = this.props; return (
{ t('prejoin.premeeting') }
); } /** * Returns the React Element for modifying the enabled notifications settings. * * @private * @returns {ReactElement} */ _renderNotificationsSettings() { const { t, enabledNotifications } = this.props; return (
{ t('notify.displayNotifications') } { Object.keys(enabledNotifications).map(key => ( this._onEnabledNotificationsChanged(e, key) } /> )) }
); } /** * Returns the React Element for the max stage participants dropdown. * * @returns {ReactElement} */ _renderMaxStageParticipantsSelect() { const { maxStageParticipants, t, stageFilmstripEnabled } = this.props; if (!stageFilmstripEnabled) { return null; } const maxParticipantsItems = Array(MAX_ACTIVE_PARTICIPANTS).fill(0) .map((no, index) => { return { value: index + 1, label: `${index + 1}` }; }); return (