|
|
@@ -1,18 +1,23 @@
|
|
|
1
|
+import { Theme } from '@mui/material';
|
|
|
2
|
+import { withStyles } from '@mui/styles';
|
|
1
|
3
|
import React from 'react';
|
|
2
|
4
|
import { WithTranslation } from 'react-i18next';
|
|
3
|
5
|
|
|
4
|
|
-// @ts-ignore
|
|
5
|
|
-import { AbstractDialogTab } from '../../../base/dialog';
|
|
6
|
|
-// eslint-disable-next-line lines-around-comment
|
|
7
|
|
-// @ts-ignore
|
|
8
|
|
-import type { Props as AbstractDialogTabProps } from '../../../base/dialog';
|
|
|
6
|
+import AbstractDialogTab, {
|
|
|
7
|
+ IProps as AbstractDialogTabProps } from '../../../base/dialog/components/web/AbstractDialogTab';
|
|
9
|
8
|
import { translate } from '../../../base/i18n/functions';
|
|
|
9
|
+import { withPixelLineHeight } from '../../../base/styles/functions.web';
|
|
10
|
10
|
import Checkbox from '../../../base/ui/components/web/Checkbox';
|
|
11
|
11
|
|
|
12
|
12
|
/**
|
|
13
|
13
|
* The type of the React {@code Component} props of {@link ModeratorTab}.
|
|
14
|
14
|
*/
|
|
15
|
|
-export type Props = AbstractDialogTabProps & WithTranslation & {
|
|
|
15
|
+export interface IProps extends AbstractDialogTabProps, WithTranslation {
|
|
|
16
|
+
|
|
|
17
|
+ /**
|
|
|
18
|
+ * CSS classes object.
|
|
|
19
|
+ */
|
|
|
20
|
+ classes: any;
|
|
16
|
21
|
|
|
17
|
22
|
/**
|
|
18
|
23
|
* If set hides the reactions moderation setting.
|
|
|
@@ -46,11 +51,25 @@ export type Props = AbstractDialogTabProps & WithTranslation & {
|
|
46
|
51
|
* enabled.
|
|
47
|
52
|
*/
|
|
48
|
53
|
startVideoMuted: boolean;
|
|
|
54
|
+}
|
|
49
|
55
|
|
|
50
|
|
- /**
|
|
51
|
|
- * Invoked to obtain translated strings.
|
|
52
|
|
- */
|
|
53
|
|
- t: Function;
|
|
|
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
|
+ };
|
|
54
|
73
|
};
|
|
55
|
74
|
|
|
56
|
75
|
/**
|
|
|
@@ -58,14 +77,14 @@ export type Props = AbstractDialogTabProps & WithTranslation & {
|
|
58
|
77
|
*
|
|
59
|
78
|
* @augments Component
|
|
60
|
79
|
*/
|
|
61
|
|
-class ModeratorTab extends AbstractDialogTab<Props> {
|
|
|
80
|
+class ModeratorTab extends AbstractDialogTab<IProps, any> {
|
|
62
|
81
|
/**
|
|
63
|
82
|
* Initializes a new {@code ModeratorTab} instance.
|
|
64
|
83
|
*
|
|
65
|
84
|
* @param {Object} props - The read-only properties with which the new
|
|
66
|
85
|
* instance is to be initialized.
|
|
67
|
86
|
*/
|
|
68
|
|
- constructor(props: Props) {
|
|
|
87
|
+ constructor(props: IProps) {
|
|
69
|
88
|
super(props);
|
|
70
|
89
|
|
|
71
|
90
|
// Bind event handler so it is only bound once for every instance.
|
|
|
@@ -75,16 +94,6 @@ class ModeratorTab extends AbstractDialogTab<Props> {
|
|
75
|
94
|
this._onFollowMeEnabledChanged = this._onFollowMeEnabledChanged.bind(this);
|
|
76
|
95
|
}
|
|
77
|
96
|
|
|
78
|
|
- /**
|
|
79
|
|
- * Implements React's {@link Component#render()}.
|
|
80
|
|
- *
|
|
81
|
|
- * @inheritdoc
|
|
82
|
|
- * @returns {ReactElement}
|
|
83
|
|
- */
|
|
84
|
|
- render() {
|
|
85
|
|
- return <div className = 'moderator-tab box'>{ this._renderModeratorSettings() }</div>;
|
|
86
|
|
- }
|
|
87
|
|
-
|
|
88
|
97
|
/**
|
|
89
|
98
|
* Callback invoked to select if conferences should start
|
|
90
|
99
|
* with audio muted.
|
|
|
@@ -134,58 +143,59 @@ class ModeratorTab extends AbstractDialogTab<Props> {
|
|
134
|
143
|
}
|
|
135
|
144
|
|
|
136
|
145
|
/**
|
|
137
|
|
- * Returns the React Element for modifying conference-wide settings.
|
|
|
146
|
+ * Implements React's {@link Component#render()}.
|
|
138
|
147
|
*
|
|
139
|
|
- * @private
|
|
|
148
|
+ * @inheritdoc
|
|
140
|
149
|
* @returns {ReactElement}
|
|
141
|
150
|
*/
|
|
142
|
|
- _renderModeratorSettings() {
|
|
|
151
|
+ render() {
|
|
143
|
152
|
const {
|
|
|
153
|
+ classes,
|
|
144
|
154
|
disableReactionsModeration,
|
|
145
|
155
|
followMeActive,
|
|
146
|
156
|
followMeEnabled,
|
|
147
|
157
|
startAudioMuted,
|
|
148
|
158
|
startVideoMuted,
|
|
149
|
159
|
startReactionsMuted,
|
|
150
|
|
- t // @ts-ignore
|
|
|
160
|
+ t
|
|
151
|
161
|
} = this.props;
|
|
152
|
162
|
|
|
153
|
163
|
return (
|
|
154
|
164
|
<div
|
|
155
|
|
- className = 'settings-sub-pane-element'
|
|
|
165
|
+ className = { `moderator-tab ${classes.container}` }
|
|
156
|
166
|
key = 'moderator'>
|
|
157
|
|
- <div className = 'moderator-settings-wrapper'>
|
|
158
|
|
- <Checkbox
|
|
159
|
|
- checked = { startAudioMuted }
|
|
160
|
|
- className = 'settings-checkbox'
|
|
161
|
|
- label = { t('settings.startAudioMuted') }
|
|
162
|
|
- name = 'start-audio-muted'
|
|
163
|
|
- onChange = { this._onStartAudioMutedChanged } />
|
|
164
|
|
- <Checkbox
|
|
165
|
|
- checked = { startVideoMuted }
|
|
166
|
|
- className = 'settings-checkbox'
|
|
167
|
|
- label = { t('settings.startVideoMuted') }
|
|
168
|
|
- name = 'start-video-muted'
|
|
169
|
|
- onChange = { this._onStartVideoMutedChanged } />
|
|
170
|
|
- <Checkbox
|
|
171
|
|
- checked = { followMeEnabled && !followMeActive }
|
|
172
|
|
- className = 'settings-checkbox'
|
|
173
|
|
- disabled = { followMeActive }
|
|
174
|
|
- label = { t('settings.followMe') }
|
|
175
|
|
- name = 'follow-me'
|
|
176
|
|
- onChange = { this._onFollowMeEnabledChanged } />
|
|
177
|
|
- { !disableReactionsModeration
|
|
|
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
|
|
178
|
190
|
&& <Checkbox
|
|
179
|
191
|
checked = { startReactionsMuted }
|
|
180
|
|
- className = 'settings-checkbox'
|
|
|
192
|
+ className = { classes.checkbox }
|
|
181
|
193
|
label = { t('settings.startReactionsMuted') }
|
|
182
|
194
|
name = 'start-reactions-muted'
|
|
183
|
195
|
onChange = { this._onStartReactionsMutedChanged } /> }
|
|
184
|
|
- </div>
|
|
185
|
196
|
</div>
|
|
186
|
197
|
);
|
|
187
|
198
|
}
|
|
188
|
199
|
}
|
|
189
|
200
|
|
|
190
|
|
-// @ts-ignore
|
|
191
|
|
-export default translate(ModeratorTab);
|
|
|
201
|
+export default withStyles(styles)(translate(ModeratorTab));
|
Robert Pintilii
2 years ago
