feat: Audio output settings in visitor mode. (#13315)

* feat: Audio output settings in visitor mode.

* squash: Fix lint errors.

react/features/base/config/constants.ts

@@ -64,7 +64,7 @@ export const THIRD_PARTY_PREJOIN_BUTTONS = [ 'microphone', 'camera', 'select-bac
 /**
  * The toolbar buttons to show when in visitors mode.
  */
-export const VISITORS_MODE_BUTTONS = [ 'chat', 'hangup', 'raisehand', 'tileview' ];
+export const VISITORS_MODE_BUTTONS = [ 'chat', 'hangup', 'raisehand', 'settings', 'tileview' ];
 
 /**
  * The set of feature flags.

react/features/device-selection/components/AudioDevicesSelection.web.tsx

@@ -12,6 +12,7 @@ import AbstractDialogTab, {
 import { translate } from '../../base/i18n/functions';
 import { createLocalTrack } from '../../base/lib-jitsi-meet/functions.web';
 import Checkbox from '../../base/ui/components/web/Checkbox';
+import { iAmVisitor as iAmVisitorCheck } from '../../visitors/functions';
 import logger from '../logger';
 
 import AudioInputPreview from './AudioInputPreview';
@@ -92,6 +93,11 @@ interface IProps extends AbstractDialogTabProps, WithTranslation {
      */
     hideNoiseSuppression: boolean;
 
+    /**
+     * Whether we are in visitors mode.
+     */
+    iAmVisitor: boolean;
+
     /**
      * Wether noise suppression is on or not.
      */
@@ -234,6 +240,7 @@ class AudioDevicesSelection extends AbstractDialogTab<IProps, IState> {
             hideAudioOutputPreview,
             hideDeviceHIDContainer,
             hideNoiseSuppression,
+            iAmVisitor,
             noiseSuppressionEnabled,
             selectedAudioOutputId,
             t
@@ -242,12 +249,12 @@ class AudioDevicesSelection extends AbstractDialogTab<IProps, IState> {
 
         return (
             <div className = { classes.container }>
-                <div
+                {!iAmVisitor && <div
                     aria-live = 'polite'
                     className = { classes.inputContainer }>
                     {this._renderSelector(audioInput)}
-                </div>
-                {!hideAudioInputPreview && hasAudioPermission
+                </div>}
+                {!hideAudioInputPreview && hasAudioPermission && !iAmVisitor
                         && <AudioInputPreview
                             track = { this.state.previewAudioTrack } />}
                 <div
@@ -259,7 +266,7 @@ class AudioDevicesSelection extends AbstractDialogTab<IProps, IState> {
                             className = { classes.outputButton }
                             deviceId = { selectedAudioOutputId } />}
                 </div>
-                {!hideNoiseSuppression && (
+                {!hideNoiseSuppression && !iAmVisitor && (
                     <div className = { classes.noiseSuppressionContainer }>
                         <Checkbox
                             checked = { noiseSuppressionEnabled }
@@ -270,7 +277,7 @@ class AudioDevicesSelection extends AbstractDialogTab<IProps, IState> {
                             }) } />
                     </div>
                 )}
-                {!hideDeviceHIDContainer
+                {!hideDeviceHIDContainer && !iAmVisitor
                     && <DeviceHidContainer />}
             </div>
         );
@@ -380,7 +387,8 @@ class AudioDevicesSelection extends AbstractDialogTab<IProps, IState> {
 
 const mapStateToProps = (state: IReduxState) => {
     return {
-        availableDevices: state['features/base/devices'].availableDevices ?? {}
+        availableDevices: state['features/base/devices'].availableDevices ?? {},
+        iAmVisitor: iAmVisitorCheck(state)
     };
 };
 

react/features/settings/components/web/ProfileTab.tsx

@@ -69,6 +69,11 @@ export interface IProps extends AbstractDialogTabProps, WithTranslation {
      */
     hideSelfView: boolean;
 
+    /**
+     * Whether we are in visitors mode.
+     */
+    iAmVisitor: boolean;
+
     /**
      * The id of the local participant.
      */
@@ -243,6 +248,7 @@ class ProfileTab extends AbstractDialogTab<IProps, any> {
             email,
             hideEmailInSettings,
             hideSelfView,
+            iAmVisitor,
             id,
             readOnlyName,
             showLanguageSettings,
@@ -277,7 +283,7 @@ class ProfileTab extends AbstractDialogTab<IProps, any> {
                         type = 'text'
                         value = { email } />
                 </div>}
-                {!disableHideSelfView && (
+                {!disableHideSelfView && !iAmVisitor && (
                     <Checkbox
                         checked = { hideSelfView }
                         className = { classes.bottomMargin }

react/features/settings/components/web/SettingsDialog.tsx

@@ -24,6 +24,7 @@ import {
     getVideoDeviceSelectionDialogProps
 } from '../../../device-selection/functions.web';
 import { checkBlurSupport } from '../../../virtual-background/functions';
+import { iAmVisitor } from '../../../visitors/functions';
 import {
     submitModeratorTab,
     submitMoreTab,
@@ -141,6 +142,7 @@ function _mapStateToProps(state: IReduxState, ownProps: any) {
     const showNotificationsSettings = Object.keys(enabledNotifications).length > 0;
     const virtualBackgroundSupported = checkBlurSupport();
     const tabs: IDialogTab<any>[] = [];
+    const _iAmVisitor = iAmVisitor(state);
 
     if (showDeviceSettings) {
         tabs.push({
@@ -165,7 +167,7 @@ function _mapStateToProps(state: IReduxState, ownProps: any) {
             submit: (newState: any) => submitAudioDeviceSelectionTab(newState, isDisplayedOnWelcomePage),
             icon: IconVolumeUp
         });
-        tabs.push({
+        !_iAmVisitor && tabs.push({
             name: SETTINGS_TABS.VIDEO,
             component: VideoDeviceSelection,
             labelKey: 'settings.video',
@@ -189,7 +191,7 @@ function _mapStateToProps(state: IReduxState, ownProps: any) {
         });
     }
 
-    if (virtualBackgroundSupported) {
+    if (virtualBackgroundSupported && !_iAmVisitor) {
         tabs.push({
             name: SETTINGS_TABS.VIRTUAL_BACKGROUND,
             component: VirtualBackgroundTab,
@@ -213,7 +215,7 @@ function _mapStateToProps(state: IReduxState, ownProps: any) {
         });
     }
 
-    if (showSoundsSettings || showNotificationsSettings) {
+    if ((showSoundsSettings || showNotificationsSettings) && !_iAmVisitor) {
         tabs.push({
             name: SETTINGS_TABS.NOTIFICATIONS,
             component: NotificationsTab,
@@ -236,7 +238,7 @@ function _mapStateToProps(state: IReduxState, ownProps: any) {
         });
     }
 
-    if (showModeratorSettings) {
+    if (showModeratorSettings && !_iAmVisitor) {
         tabs.push({
             name: SETTINGS_TABS.MODERATOR,
             component: ModeratorTab,
@@ -269,7 +271,7 @@ function _mapStateToProps(state: IReduxState, ownProps: any) {
         });
     }
 
-    if (showCalendarSettings) {
+    if (showCalendarSettings && !_iAmVisitor) {
         tabs.push({
             name: SETTINGS_TABS.CALENDAR,
             component: CalendarTab,
@@ -278,7 +280,7 @@ function _mapStateToProps(state: IReduxState, ownProps: any) {
         });
     }
 
-    tabs.push({
+    !_iAmVisitor && tabs.push({
         name: SETTINGS_TABS.SHORTCUTS,
         component: ShortcutsTab,
         labelKey: 'settings.shortcuts',
@@ -295,7 +297,7 @@ function _mapStateToProps(state: IReduxState, ownProps: any) {
         icon: IconShortcuts
     });
 
-    if (showMoreTab) {
+    if (showMoreTab && !_iAmVisitor) {
         tabs.push({
             name: SETTINGS_TABS.MORE,
             component: MoreTab,

react/features/settings/functions.any.ts

@@ -16,6 +16,7 @@ import { isStageFilmstripEnabled } from '../filmstrip/functions';
 import { isFollowMeActive } from '../follow-me/functions';
 import { getParticipantsPaneConfig } from '../participants-pane/functions';
 import { isReactionsEnabled } from '../reactions/functions.any';
+import { iAmVisitor } from '../visitors/functions';
 
 /**
  * Used for web. Indicates if the setting section is enabled.
@@ -205,6 +206,7 @@ export function getProfileTabProps(stateful: IStateful) {
         email: localParticipant?.email,
         hideEmailInSettings,
         hideSelfView: getHideSelfView(state),
+        iAmVisitor: iAmVisitor(state),
         id: localParticipant?.id,
         languages: LANGUAGES,
         readOnlyName: isNameReadOnly(state),