"Fossies" - the Fresh Open Source Software Archive 
Member "jitsi-meet-7312/react/features/settings/components/web/MoreTab.tsx" (1 Jun 2023, 8364 Bytes) of package /linux/misc/jitsi-meet-7312.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.
See also the last
Fossies "Diffs" side-by-side code changes report for "MoreTab.tsx":
jitsi-meet_8319_vs_jitsi-meet_8615.
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 },
93
94 divider: {
95 margin: `${theme.spacing(4)} 0`,
96 width: '100%',
97 height: '1px',
98 border: 0,
99 backgroundColor: theme.palette.ui03
100 },
101
102 checkbox: {
103 margin: `${theme.spacing(3)} 0`
104 }
105 };
106 };
107
108 /**
109 * React {@code Component} for modifying language and moderator settings.
110 *
111 * @augments Component
112 */
113 class MoreTab extends AbstractDialogTab<IProps, any> {
114 /**
115 * Initializes a new {@code MoreTab} instance.
116 *
117 * @param {Object} props - The read-only properties with which the new
118 * instance is to be initialized.
119 */
120 constructor(props: IProps) {
121 super(props);
122
123 // Bind event handler so it is only bound once for every instance.
124 this._onShowPrejoinPageChanged = this._onShowPrejoinPageChanged.bind(this);
125 this._renderMaxStageParticipantsSelect = this._renderMaxStageParticipantsSelect.bind(this);
126 this._onMaxStageParticipantsSelect = this._onMaxStageParticipantsSelect.bind(this);
127 this._onHideSelfViewChanged = this._onHideSelfViewChanged.bind(this);
128 this._onLanguageItemSelect = this._onLanguageItemSelect.bind(this);
129 }
130
131 /**
132 * Implements React's {@link Component#render()}.
133 *
134 * @inheritdoc
135 * @returns {ReactElement}
136 */
137 render() {
138 const {
139 showPrejoinSettings,
140 classes,
141 disableHideSelfView,
142 iAmVisitor,
143 hideSelfView,
144 showLanguageSettings,
145 t } = this.props;
146
147 return (
148 <div
149 className = { clsx('more-tab', classes.container) }
150 key = 'more'>
151 {showPrejoinSettings && <>
152 {this._renderPrejoinScreenSettings()}
153 <hr className = { classes.divider } />
154 </>}
155 {this._renderMaxStageParticipantsSelect()}
156 {!disableHideSelfView && !iAmVisitor && (
157 <Checkbox
158 checked = { hideSelfView }
159 className = { classes.checkbox }
160 label = { t('videothumbnail.hideSelfView') }
161 name = 'hide-self-view'
162 onChange = { this._onHideSelfViewChanged } />
163 )}
164 {showLanguageSettings && this._renderLanguageSelect()}
165 </div>
166 );
167 }
168
169 /**
170 * Callback invoked to select if the lobby
171 * should be shown.
172 *
173 * @param {Object} e - The key event to handle.
174 *
175 * @returns {void}
176 */
177 _onShowPrejoinPageChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
178 super._onChange({ showPrejoinPage: checked });
179 }
180
181 /**
182 * Callback invoked to select a max number of stage participants from the select dropdown.
183 *
184 * @param {Object} e - The key event to handle.
185 * @private
186 * @returns {void}
187 */
188 _onMaxStageParticipantsSelect(e: React.ChangeEvent<HTMLSelectElement>) {
189 const maxParticipants = Number(e.target.value);
190
191 super._onChange({ maxStageParticipants: maxParticipants });
192 }
193
194 /**
195 * Callback invoked to select if hide self view should be enabled.
196 *
197 * @param {Object} e - The key event to handle.
198 *
199 * @returns {void}
200 */
201 _onHideSelfViewChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
202 super._onChange({ hideSelfView: checked });
203 }
204
205 /**
206 * Callback invoked to select a language from select dropdown.
207 *
208 * @param {Object} e - The key event to handle.
209 *
210 * @returns {void}
211 */
212 _onLanguageItemSelect(e: React.ChangeEvent<HTMLSelectElement>) {
213 const language = e.target.value;
214
215 super._onChange({ currentLanguage: language });
216 }
217
218 /**
219 * Returns the React Element for modifying prejoin screen settings.
220 *
221 * @private
222 * @returns {ReactElement}
223 */
224 _renderPrejoinScreenSettings() {
225 const { t, showPrejoinPage } = this.props;
226
227 return (
228 <Checkbox
229 checked = { showPrejoinPage }
230 label = { t('prejoin.showScreen') }
231 name = 'show-prejoin-page'
232 onChange = { this._onShowPrejoinPageChanged } />
233 );
234 }
235
236 /**
237 * Returns the React Element for the max stage participants dropdown.
238 *
239 * @returns {ReactElement}
240 */
241 _renderMaxStageParticipantsSelect() {
242 const { maxStageParticipants, t, stageFilmstripEnabled } = this.props;
243
244 if (!stageFilmstripEnabled) {
245 return null;
246 }
247 const maxParticipantsItems = Array(MAX_ACTIVE_PARTICIPANTS).fill(0)
248 .map((no, index) => {
249 return {
250 value: index + 1,
251 label: `${index + 1}`
252 };
253 });
254
255 return (
256 <Select
257 label = { t('settings.maxStageParticipants') }
258 onChange = { this._onMaxStageParticipantsSelect }
259 options = { maxParticipantsItems }
260 value = { maxStageParticipants } />
261 );
262 }
263
264 /**
265 * Returns the menu item for changing displayed language.
266 *
267 * @private
268 * @returns {ReactElement}
269 */
270 _renderLanguageSelect() {
271 const {
272 classes,
273 currentLanguage,
274 languages,
275 t
276 } = this.props;
277
278 const languageItems
279 = languages.map((language: string) => {
280 return {
281 value: language,
282 label: t(`languages:${language}`)
283 };
284 });
285
286 return (
287 <Select
288 className = { classes.bottomMargin }
289 label = { t('settings.language') }
290 onChange = { this._onLanguageItemSelect }
291 options = { languageItems }
292 value = { currentLanguage } />
293 );
294 }
295 }
296
297 export default withStyles(styles)(translate(MoreTab));