"Fossies" - the Fresh Open Source Software Archive 
Member "jitsi-meet-7547/react/features/settings/components/web/SettingsDialog.tsx" (25 Sep 2023, 12337 Bytes) of package /linux/misc/jitsi-meet-7547.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 "SettingsDialog.tsx":
jitsi-meet_8922_vs_jitsi-meet_8960.
1 import React from 'react';
2 import { connect } from 'react-redux';
3 import { makeStyles } from 'tss-react/mui';
4
5 import { IReduxState, IStore } from '../../../app/types';
6 import {
7 IconBell,
8 IconCalendar,
9 IconGear,
10 IconImage,
11 IconModerator,
12 IconShortcuts,
13 IconUser,
14 IconVideo,
15 IconVolumeUp
16 } from '../../../base/icons/svg';
17 import DialogWithTabs, { IDialogTab } from '../../../base/ui/components/web/DialogWithTabs';
18 import { isCalendarEnabled } from '../../../calendar-sync/functions.web';
19 import { submitAudioDeviceSelectionTab, submitVideoDeviceSelectionTab } from '../../../device-selection/actions.web';
20 import AudioDevicesSelection from '../../../device-selection/components/AudioDevicesSelection';
21 import VideoDeviceSelection from '../../../device-selection/components/VideoDeviceSelection';
22 import {
23 getAudioDeviceSelectionDialogProps,
24 getVideoDeviceSelectionDialogProps
25 } from '../../../device-selection/functions.web';
26 import { checkBlurSupport, checkVirtualBackgroundEnabled } from '../../../virtual-background/functions';
27 import { iAmVisitor } from '../../../visitors/functions';
28 import {
29 submitModeratorTab,
30 submitMoreTab,
31 submitNotificationsTab,
32 submitProfileTab,
33 submitShortcutsTab,
34 submitVirtualBackgroundTab
35 } from '../../actions';
36 import { SETTINGS_TABS } from '../../constants';
37 import {
38 getModeratorTabProps,
39 getMoreTabProps,
40 getNotificationsMap,
41 getNotificationsTabProps,
42 getProfileTabProps,
43 getShortcutsTabProps,
44 getVirtualBackgroundTabProps
45 } from '../../functions';
46
47 import CalendarTab from './CalendarTab';
48 import ModeratorTab from './ModeratorTab';
49 import MoreTab from './MoreTab';
50 import NotificationsTab from './NotificationsTab';
51 import ProfileTab from './ProfileTab';
52 import ShortcutsTab from './ShortcutsTab';
53 import VirtualBackgroundTab from './VirtualBackgroundTab';
54
55 /**
56 * The type of the React {@code Component} props of
57 * {@link ConnectedSettingsDialog}.
58 */
59 interface IProps {
60
61 /**
62 * Information about the tabs to be rendered.
63 */
64 _tabs: IDialogTab<any>[];
65
66 /**
67 * Which settings tab should be initially displayed. If not defined then
68 * the first tab will be displayed.
69 */
70 defaultTab: string;
71
72 /**
73 * Invoked to save changed settings.
74 */
75 dispatch: IStore['dispatch'];
76
77 /**
78 * Indicates whether the device selection dialog is displayed on the
79 * welcome page or not.
80 */
81 isDisplayedOnWelcomePage: boolean;
82 }
83
84 const useStyles = makeStyles()(() => {
85 return {
86 settingsDialog: {
87 display: 'flex',
88 width: '100%'
89 }
90 };
91 });
92
93 const SettingsDialog = ({ _tabs, defaultTab, dispatch }: IProps) => {
94 const { classes } = useStyles();
95
96 const correctDefaultTab = _tabs.find(tab => tab.name === defaultTab)?.name;
97 const tabs = _tabs.map(tab => {
98 return {
99 ...tab,
100 className: `settings-pane ${classes.settingsDialog}`,
101 submit: (...args: any) => tab.submit
102 && dispatch(tab.submit(...args))
103 };
104 });
105
106 return (
107 <DialogWithTabs
108 className = 'settings-dialog'
109 defaultTab = { correctDefaultTab }
110 tabs = { tabs }
111 titleKey = 'settings.title' />
112 );
113 };
114
115 /**
116 * Maps (parts of) the Redux state to the associated props for the
117 * {@code ConnectedSettingsDialog} component.
118 *
119 * @param {Object} state - The Redux state.
120 * @param {Object} ownProps - The props passed to the component.
121 * @private
122 * @returns {{
123 * tabs: Array<Object>
124 * }}
125 */
126 function _mapStateToProps(state: IReduxState, ownProps: any) {
127 const { isDisplayedOnWelcomePage } = ownProps;
128 const configuredTabs = interfaceConfig.SETTINGS_SECTIONS || [];
129
130 // The settings sections to display.
131 const showDeviceSettings = configuredTabs.includes('devices');
132 const moreTabProps = getMoreTabProps(state);
133 const moderatorTabProps = getModeratorTabProps(state);
134 const { showModeratorSettings } = moderatorTabProps;
135 const showMoreTab = configuredTabs.includes('more');
136 const showProfileSettings
137 = configuredTabs.includes('profile') && !state['features/base/config'].disableProfile;
138 const showCalendarSettings
139 = configuredTabs.includes('calendar') && isCalendarEnabled(state);
140 const showSoundsSettings = configuredTabs.includes('sounds');
141 const enabledNotifications = getNotificationsMap(state);
142 const showNotificationsSettings = Object.keys(enabledNotifications).length > 0;
143 const virtualBackgroundSupported = checkBlurSupport();
144 const enableVirtualBackground = checkVirtualBackgroundEnabled(state);
145 const tabs: IDialogTab<any>[] = [];
146 const _iAmVisitor = iAmVisitor(state);
147
148 if (showDeviceSettings) {
149 tabs.push({
150 name: SETTINGS_TABS.AUDIO,
151 component: AudioDevicesSelection,
152 labelKey: 'settings.audio',
153 props: getAudioDeviceSelectionDialogProps(state, isDisplayedOnWelcomePage),
154 propsUpdateFunction: (tabState: any, newProps: ReturnType<typeof getAudioDeviceSelectionDialogProps>) => {
155 // Ensure the device selection tab gets updated when new devices
156 // are found by taking the new props and only preserving the
157 // current user selected devices. If this were not done, the
158 // tab would keep using a copy of the initial props it received,
159 // leaving the device list to become stale.
160
161 return {
162 ...newProps,
163 noiseSuppressionEnabled: tabState.noiseSuppressionEnabled,
164 selectedAudioInputId: tabState.selectedAudioInputId,
165 selectedAudioOutputId: tabState.selectedAudioOutputId
166 };
167 },
168 submit: (newState: any) => submitAudioDeviceSelectionTab(newState, isDisplayedOnWelcomePage),
169 icon: IconVolumeUp
170 });
171 !_iAmVisitor && tabs.push({
172 name: SETTINGS_TABS.VIDEO,
173 component: VideoDeviceSelection,
174 labelKey: 'settings.video',
175 props: getVideoDeviceSelectionDialogProps(state, isDisplayedOnWelcomePage),
176 propsUpdateFunction: (tabState: any, newProps: ReturnType<typeof getVideoDeviceSelectionDialogProps>) => {
177 // Ensure the device selection tab gets updated when new devices
178 // are found by taking the new props and only preserving the
179 // current user selected devices. If this were not done, the
180 // tab would keep using a copy of the initial props it received,
181 // leaving the device list to become stale.
182
183 return {
184 ...newProps,
185 currentFramerate: tabState?.currentFramerate,
186 localFlipX: tabState.localFlipX,
187 selectedVideoInputId: tabState.selectedVideoInputId
188 };
189 },
190 submit: (newState: any) => submitVideoDeviceSelectionTab(newState, isDisplayedOnWelcomePage),
191 icon: IconVideo
192 });
193 }
194
195 if (virtualBackgroundSupported && !_iAmVisitor && enableVirtualBackground) {
196 tabs.push({
197 name: SETTINGS_TABS.VIRTUAL_BACKGROUND,
198 component: VirtualBackgroundTab,
199 labelKey: 'virtualBackground.title',
200 props: getVirtualBackgroundTabProps(state, isDisplayedOnWelcomePage),
201 propsUpdateFunction: (tabState: any, newProps: ReturnType<typeof getVirtualBackgroundTabProps>,
202 tabStates: any) => {
203 const videoTabState = tabStates[tabs.findIndex(tab => tab.name === SETTINGS_TABS.VIDEO)];
204
205 return {
206 ...newProps,
207 selectedVideoInputId: videoTabState?.selectedVideoInputId || newProps.selectedVideoInputId,
208 options: tabState.options
209 };
210 },
211 submit: (newState: any) => submitVirtualBackgroundTab(newState),
212 cancel: () => {
213 const { options } = getVirtualBackgroundTabProps(state, isDisplayedOnWelcomePage);
214
215 return submitVirtualBackgroundTab({ options }, true);
216 },
217 icon: IconImage
218 });
219 }
220
221 if ((showSoundsSettings || showNotificationsSettings) && !_iAmVisitor) {
222 tabs.push({
223 name: SETTINGS_TABS.NOTIFICATIONS,
224 component: NotificationsTab,
225 labelKey: 'settings.notifications',
226 propsUpdateFunction: (tabState: any, newProps: ReturnType<typeof getNotificationsTabProps>) => {
227 return {
228 ...newProps,
229 enabledNotifications: tabState?.enabledNotifications || {},
230 soundsIncomingMessage: tabState?.soundsIncomingMessage,
231 soundsParticipantJoined: tabState?.soundsParticipantJoined,
232 soundsParticipantKnocking: tabState?.soundsParticipantKnocking,
233 soundsParticipantLeft: tabState?.soundsParticipantLeft,
234 soundsReactions: tabState?.soundsReactions,
235 soundsTalkWhileMuted: tabState?.soundsTalkWhileMuted
236 };
237 },
238 props: getNotificationsTabProps(state, showSoundsSettings),
239 submit: submitNotificationsTab,
240 icon: IconBell
241 });
242 }
243
244 if (showModeratorSettings && !_iAmVisitor) {
245 tabs.push({
246 name: SETTINGS_TABS.MODERATOR,
247 component: ModeratorTab,
248 labelKey: 'settings.moderator',
249 props: moderatorTabProps,
250 propsUpdateFunction: (tabState: any, newProps: typeof moderatorTabProps) => {
251 // Updates tab props, keeping users selection
252
253 return {
254 ...newProps,
255 followMeEnabled: tabState?.followMeEnabled,
256 startAudioMuted: tabState?.startAudioMuted,
257 startVideoMuted: tabState?.startVideoMuted,
258 startReactionsMuted: tabState?.startReactionsMuted
259 };
260 },
261 submit: submitModeratorTab,
262 icon: IconModerator
263 });
264 }
265
266 if (showProfileSettings) {
267 tabs.push({
268 name: SETTINGS_TABS.PROFILE,
269 component: ProfileTab,
270 labelKey: 'profile.title',
271 props: getProfileTabProps(state),
272 submit: submitProfileTab,
273 icon: IconUser
274 });
275 }
276
277 if (showCalendarSettings && !_iAmVisitor) {
278 tabs.push({
279 name: SETTINGS_TABS.CALENDAR,
280 component: CalendarTab,
281 labelKey: 'settings.calendar.title',
282 icon: IconCalendar
283 });
284 }
285
286 !_iAmVisitor && tabs.push({
287 name: SETTINGS_TABS.SHORTCUTS,
288 component: ShortcutsTab,
289 labelKey: 'settings.shortcuts',
290 props: getShortcutsTabProps(state, isDisplayedOnWelcomePage),
291 propsUpdateFunction: (tabState: any, newProps: ReturnType<typeof getShortcutsTabProps>) => {
292 // Updates tab props, keeping users selection
293
294 return {
295 ...newProps,
296 keyboardShortcutsEnabled: tabState?.keyboardShortcutsEnabled
297 };
298 },
299 submit: submitShortcutsTab,
300 icon: IconShortcuts
301 });
302
303 if (showMoreTab && !_iAmVisitor) {
304 tabs.push({
305 name: SETTINGS_TABS.MORE,
306 component: MoreTab,
307 labelKey: 'settings.more',
308 props: moreTabProps,
309 propsUpdateFunction: (tabState: any, newProps: typeof moreTabProps) => {
310 // Updates tab props, keeping users selection
311
312 return {
313 ...newProps,
314 currentLanguage: tabState?.currentLanguage,
315 hideSelfView: tabState?.hideSelfView,
316 showPrejoinPage: tabState?.showPrejoinPage,
317 maxStageParticipants: tabState?.maxStageParticipants
318 };
319 },
320 submit: submitMoreTab,
321 icon: IconGear
322 });
323 }
324
325 return { _tabs: tabs };
326 }
327
328 export default connect(_mapStateToProps)(SettingsDialog);