feat: Introduces iAmVisitor mode.

conference.js

@@ -153,7 +153,7 @@ import { createRnnoiseProcessor } from './react/features/stream-effects/rnnoise'
 import { endpointMessageReceived } from './react/features/subtitles';
 import { handleToggleVideoMuted } from './react/features/toolbox/actions.any';
 import { muteLocal } from './react/features/video-menu/actions.any';
-import { setVisitorsMode } from './react/features/visitors/actions';
+import { setIAmVisitor } from './react/features/visitors/actions';
 import UIEvents from './service/UI/UIEvents';
 
 const logger = Logger.getLogger(__filename);
@@ -343,7 +343,7 @@ class ConferenceConnector {
         case JitsiConferenceErrors.REDIRECTED: {
             generateVisitorConfig(APP.store.getState(), params);
 
-            APP.store.dispatch(setVisitorsMode(true));
+            APP.store.dispatch(setIAmVisitor(true));
 
             connection.disconnect().then(() => {
                 connect(this._conference.roomName).then(con => {

react/features/base/settings/functions.any.ts

@@ -1,4 +1,5 @@
 import { IReduxState } from '../../app/types';
+import { iAmVisitor } from '../../visitors/functions';
 import { IStateful } from '../app/types';
 import CONFIG_WHITELIST from '../config/configWhitelist';
 import { IConfigState } from '../config/reducer';
@@ -121,5 +122,5 @@ export function shouldHideShareAudioHelper(state: IReduxState): boolean | undefi
  */
 export function getHideSelfView(state: IReduxState) {
     return state['features/base/config'].disableSelfView || state['features/base/settings'].disableSelfView
-        || state['features/visitors'].enabled;
+        || iAmVisitor(state);
 }

react/features/toolbox/components/native/Toolbox.js

@@ -12,6 +12,7 @@ import { ChatButton } from '../../../chat';
 import { ReactionsMenuButton } from '../../../reactions/components';
 import { isReactionsEnabled } from '../../../reactions/functions.any';
 import { TileViewButton } from '../../../video-layout';
+import { iAmVisitor } from '../../../visitors/functions';
 import { getMovableButtons, isToolboxVisible } from '../../functions.native';
 import AudioMuteButton from '../AudioMuteButton';
 import HangupButton from '../HangupButton';
@@ -148,7 +149,7 @@ function _mapStateToProps(state: Object): Object {
         _endConferenceSupported: Boolean(endConferenceSupported),
         _styles: ColorSchemeRegistry.get(state, 'Toolbox'),
         _visible: isToolboxVisible(state),
-        _visitorsModeEnabled: state['features/visitors'].enabled,
+        _visitorsModeEnabled: iAmVisitor(state),
         _width: state['features/base/responsive-ui'].clientWidth,
         _reactionsEnabled: isReactionsEnabled(state)
     };

react/features/toolbox/components/web/Toolbox.tsx

@@ -101,6 +101,7 @@ import {
 import { VideoQualityButton, VideoQualityDialog } from '../../../video-quality/components';
 // @ts-ignore
 import { VideoBackgroundButton } from '../../../virtual-background';
+import { iAmVisitor } from '../../../visitors/functions';
 import WhiteboardButton from '../../../whiteboard/components/web/WhiteboardButton';
 import { isWhiteboardButtonVisible } from '../../../whiteboard/functions';
 import {
@@ -1565,7 +1566,7 @@ function _mapStateToProps(state: IReduxState, ownProps: Partial<IProps>) {
     const { clientWidth } = state['features/base/responsive-ui'];
     let toolbarButtons = ownProps.toolbarButtons || getToolbarButtons(state);
 
-    if (state['features/visitors'].enabled) {
+    if (iAmVisitor(state)) {
         toolbarButtons = VISITORS_MODE_BUTTONS.filter(e => toolbarButtons.indexOf(e) > -1);
     }
 

react/features/visitors/actionTypes.ts

@@ -12,8 +12,8 @@ export const UPDATE_VISITORS_COUNT = 'UPDATE_VISITORS_COUNT';
  * The type of (redux) action which enables/disables visitors UI mode.
  *
  * {
- *     type: VISITORS_MODE_ENABLED,
+ *     type: I_AM_VISITOR_MODE,
  *     enabled: boolean
  * }
  */
-export const VISITORS_MODE_ENABLED = 'VISITORS_MODE_ENABLED';
+export const I_AM_VISITOR_MODE = 'I_AM_VISITOR_MODE';

react/features/visitors/actions.ts

@@ -1,16 +1,16 @@
-import { UPDATE_VISITORS_COUNT, VISITORS_MODE_ENABLED } from './actionTypes';
+import { I_AM_VISITOR_MODE, UPDATE_VISITORS_COUNT } from './actionTypes';
 
 /**
  * Sets Visitors mode on or off.
  *
  * @param {boolean} enabled - The new visitors mode state.
  * @returns {{
- *     type: VISITORS_MODE_ENABLED,
+ *     type: I_AM_VISITOR_MODE,
  * }}
  */
-export function setVisitorsMode(enabled: boolean) {
+export function setIAmVisitor(enabled: boolean) {
     return {
-        type: VISITORS_MODE_ENABLED,
+        type: I_AM_VISITOR_MODE,
         enabled
     };
 }

react/features/visitors/components/native/VisitorsCountLabel.tsx

@@ -7,7 +7,7 @@ import { IconUsers } from '../../../base/icons/svg';
 // @ts-ignore
 import Label from '../../../base/label/components/native/Label';
 import BaseTheme from '../../../base/ui/components/BaseTheme.native';
-import { getVisitorsShortText } from '../../functions';
+import { getVisitorsShortText, iAmVisitor } from '../../functions';
 
 const styles = {
     raisedHandsCountLabel: {
@@ -26,7 +26,7 @@ const styles = {
 };
 
 const VisitorsCountLabel = () => {
-    const visitorsMode = useSelector((state: IReduxState) => state['features/visitors'].enabled);
+    const visitorsMode = useSelector((state: IReduxState) => iAmVisitor(state));
     const visitorsCount = useSelector((state: IReduxState) =>
         state['features/visitors'].count || 0);
 

react/features/visitors/components/web/VisitorsCountLabel.tsx

@@ -9,7 +9,7 @@ import Label from '../../../base/label/components/web/Label';
 // eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import { Tooltip } from '../../../base/tooltip';
-import { getVisitorsShortText } from '../../functions';
+import { getVisitorsShortText, iAmVisitor } from '../../functions';
 
 const useStyles = makeStyles()(theme => {
     return {
@@ -22,7 +22,7 @@ const useStyles = makeStyles()(theme => {
 
 const VisitorsCountLabel = () => {
     const { classes: styles, theme } = useStyles();
-    const visitorsMode = useSelector((state: IReduxState) => state['features/visitors'].enabled);
+    const visitorsMode = useSelector((state: IReduxState) => iAmVisitor(state));
     const visitorsCount = useSelector((state: IReduxState) =>
         state['features/visitors'].count || 0);
     const { t } = useTranslation();

react/features/visitors/functions.ts

@@ -1,3 +1,6 @@
+import { IStateful } from '../base/app/types';
+import { toState } from '../base/redux/functions';
+
 /**
  * A short string to represent the number of visitors.
  * Over 100 we show numbers like 0.2 K or 9.5 K.
@@ -9,3 +12,14 @@
 export function getVisitorsShortText(visitorsCount: number) {
     return visitorsCount > 100 ? `${Math.round(visitorsCount / 100) / 10} K` : String(visitorsCount);
 }
+
+/**
+ * Whether current UI is in visitor mode.
+ *
+ * @param {Function|Object} stateful - The redux store or {@code getState}
+ * function.
+ * @returns {boolean} Whether iAmVisitor is set.
+ */
+export function iAmVisitor(stateful: IStateful) {
+    return toState(stateful)['features/visitors'].iAmVisitor;
+}

react/features/visitors/reducer.ts

@@ -1,17 +1,17 @@
 import ReducerRegistry from '../base/redux/ReducerRegistry';
 
 import {
-    UPDATE_VISITORS_COUNT,
-    VISITORS_MODE_ENABLED
+    I_AM_VISITOR_MODE,
+    UPDATE_VISITORS_COUNT
 } from './actionTypes';
 
 const DEFAULT_STATE = {
-    enabled: false
+    iAmVisitor: false
 };
 
 export interface IVisitorsState {
     count?: number;
-    enabled: boolean;
+    iAmVisitor: boolean;
 }
 ReducerRegistry.register<IVisitorsState>('features/visitors', (state = DEFAULT_STATE, action): IVisitorsState => {
     switch (action.type) {
@@ -25,10 +25,10 @@ ReducerRegistry.register<IVisitorsState>('features/visitors', (state = DEFAULT_S
             count: action.count
         };
     }
-    case VISITORS_MODE_ENABLED: {
+    case I_AM_VISITOR_MODE: {
         return {
             ...state,
-            enabled: action.enabled
+            iAmVisitor: action.enabled
         };
     }
     }