"Fossies" - the Fresh Open Source Software Archive 
Member "jitsi-meet-7316/react/features/settings/components/web/ModeratorTab.tsx" (5 Jun 2023, 6357 Bytes) of package /linux/misc/jitsi-meet-7316.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 "ModeratorTab.tsx":
jitsi-meet_8319_vs_jitsi-meet_8615.
1 import { Theme } from '@mui/material';
2 import { withStyles } from '@mui/styles';
3 import React from 'react';
4 import { WithTranslation } from 'react-i18next';
5
6 import AbstractDialogTab, {
7 IProps as AbstractDialogTabProps } from '../../../base/dialog/components/web/AbstractDialogTab';
8 import { translate } from '../../../base/i18n/functions';
9 import { withPixelLineHeight } from '../../../base/styles/functions.web';
10 import Checkbox from '../../../base/ui/components/web/Checkbox';
11
12 /**
13 * The type of the React {@code Component} props of {@link ModeratorTab}.
14 */
15 export interface IProps extends AbstractDialogTabProps, WithTranslation {
16
17 /**
18 * CSS classes object.
19 */
20 classes: any;
21
22 /**
23 * If set hides the reactions moderation setting.
24 */
25 disableReactionsModeration: boolean;
26
27 /**
28 * Whether or not follow me is currently active (enabled by some other participant).
29 */
30 followMeActive: boolean;
31
32 /**
33 * Whether or not the user has selected the Follow Me feature to be enabled.
34 */
35 followMeEnabled: boolean;
36
37 /**
38 * Whether or not the user has selected the Start Audio Muted feature to be
39 * enabled.
40 */
41 startAudioMuted: boolean;
42
43 /**
44 * Whether or not the user has selected the Start Reactions Muted feature to be
45 * enabled.
46 */
47 startReactionsMuted: boolean;
48
49 /**
50 * Whether or not the user has selected the Start Video Muted feature to be
51 * enabled.
52 */
53 startVideoMuted: boolean;
54 }
55
56 const styles = (theme: Theme) => {
57 return {
58 container: {
59 display: 'flex',
60 flexDirection: 'column' as const
61 },
62
63 title: {
64 ...withPixelLineHeight(theme.typography.heading6),
65 color: `${theme.palette.text01} !important`,
66 marginBottom: theme.spacing(3)
67 },
68
69 checkbox: {
70 marginBottom: theme.spacing(3)
71 }
72 };
73 };
74
75 /**
76 * React {@code Component} for modifying language and moderator settings.
77 *
78 * @augments Component
79 */
80 class ModeratorTab extends AbstractDialogTab<IProps, any> {
81 /**
82 * Initializes a new {@code ModeratorTab} instance.
83 *
84 * @param {Object} props - The read-only properties with which the new
85 * instance is to be initialized.
86 */
87 constructor(props: IProps) {
88 super(props);
89
90 // Bind event handler so it is only bound once for every instance.
91 this._onStartAudioMutedChanged = this._onStartAudioMutedChanged.bind(this);
92 this._onStartVideoMutedChanged = this._onStartVideoMutedChanged.bind(this);
93 this._onStartReactionsMutedChanged = this._onStartReactionsMutedChanged.bind(this);
94 this._onFollowMeEnabledChanged = this._onFollowMeEnabledChanged.bind(this);
95 }
96
97 /**
98 * Callback invoked to select if conferences should start
99 * with audio muted.
100 *
101 * @param {Object} e - The key event to handle.
102 *
103 * @returns {void}
104 */
105 _onStartAudioMutedChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
106 super._onChange({ startAudioMuted: checked });
107 }
108
109 /**
110 * Callback invoked to select if conferences should start
111 * with video disabled.
112 *
113 * @param {Object} e - The key event to handle.
114 *
115 * @returns {void}
116 */
117 _onStartVideoMutedChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
118 super._onChange({ startVideoMuted: checked });
119 }
120
121 /**
122 * Callback invoked to select if conferences should start
123 * with reactions muted.
124 *
125 * @param {Object} e - The key event to handle.
126 *
127 * @returns {void}
128 */
129 _onStartReactionsMutedChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
130 super._onChange({ startReactionsMuted: checked });
131 }
132
133 /**
134 * Callback invoked to select if follow-me mode
135 * should be activated.
136 *
137 * @param {Object} e - The key event to handle.
138 *
139 * @returns {void}
140 */
141 _onFollowMeEnabledChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
142 super._onChange({ followMeEnabled: checked });
143 }
144
145 /**
146 * Implements React's {@link Component#render()}.
147 *
148 * @inheritdoc
149 * @returns {ReactElement}
150 */
151 render() {
152 const {
153 classes,
154 disableReactionsModeration,
155 followMeActive,
156 followMeEnabled,
157 startAudioMuted,
158 startVideoMuted,
159 startReactionsMuted,
160 t
161 } = this.props;
162
163 return (
164 <div
165 className = { `moderator-tab ${classes.container}` }
166 key = 'moderator'>
167 <h2 className = { classes.title }>
168 {t('settings.moderatorOptions')}
169 </h2>
170 <Checkbox
171 checked = { startAudioMuted }
172 className = { classes.checkbox }
173 label = { t('settings.startAudioMuted') }
174 name = 'start-audio-muted'
175 onChange = { this._onStartAudioMutedChanged } />
176 <Checkbox
177 checked = { startVideoMuted }
178 className = { classes.checkbox }
179 label = { t('settings.startVideoMuted') }
180 name = 'start-video-muted'
181 onChange = { this._onStartVideoMutedChanged } />
182 <Checkbox
183 checked = { followMeEnabled && !followMeActive }
184 className = { classes.checkbox }
185 disabled = { followMeActive }
186 label = { t('settings.followMe') }
187 name = 'follow-me'
188 onChange = { this._onFollowMeEnabledChanged } />
189 { !disableReactionsModeration
190 && <Checkbox
191 checked = { startReactionsMuted }
192 className = { classes.checkbox }
193 label = { t('settings.startReactionsMuted') }
194 name = 'start-reactions-muted'
195 onChange = { this._onStartReactionsMutedChanged } /> }
196 </div>
197 );
198 }
199 }
200
201 export default withStyles(styles)(translate(ModeratorTab));