diff --git a/conference.js b/conference.js index 5ca1dfd3e..02a1f6186 100644 --- a/conference.js +++ b/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 => { diff --git a/react/features/base/settings/functions.any.ts b/react/features/base/settings/functions.any.ts index 175a5cf33..70514f5f4 100644 --- a/react/features/base/settings/functions.any.ts +++ b/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); } diff --git a/react/features/toolbox/components/native/Toolbox.js b/react/features/toolbox/components/native/Toolbox.js index f01b96031..69f924d7f 100644 --- a/react/features/toolbox/components/native/Toolbox.js +++ b/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) }; diff --git a/react/features/toolbox/components/web/Toolbox.tsx b/react/features/toolbox/components/web/Toolbox.tsx index 93d26f60c..8ad0c8b34 100644 --- a/react/features/toolbox/components/web/Toolbox.tsx +++ b/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) { 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); } diff --git a/react/features/visitors/actionTypes.ts b/react/features/visitors/actionTypes.ts index 7f65b5223..c434d9d8d 100644 --- a/react/features/visitors/actionTypes.ts +++ b/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'; diff --git a/react/features/visitors/actions.ts b/react/features/visitors/actions.ts index 808a26b2d..3ad9d28c1 100644 --- a/react/features/visitors/actions.ts +++ b/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 }; } diff --git a/react/features/visitors/components/native/VisitorsCountLabel.tsx b/react/features/visitors/components/native/VisitorsCountLabel.tsx index 5ca3cb983..3f2d6f0b1 100644 --- a/react/features/visitors/components/native/VisitorsCountLabel.tsx +++ b/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); diff --git a/react/features/visitors/components/web/VisitorsCountLabel.tsx b/react/features/visitors/components/web/VisitorsCountLabel.tsx index 58b59b481..bf161b732 100644 --- a/react/features/visitors/components/web/VisitorsCountLabel.tsx +++ b/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(); diff --git a/react/features/visitors/functions.ts b/react/features/visitors/functions.ts index d5ca91cca..9f1844c27 100644 --- a/react/features/visitors/functions.ts +++ b/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; +} diff --git a/react/features/visitors/reducer.ts b/react/features/visitors/reducer.ts index 7b164ca77..600f2655f 100644 --- a/react/features/visitors/reducer.ts +++ b/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('features/visitors', (state = DEFAULT_STATE, action): IVisitorsState => { switch (action.type) { @@ -25,10 +25,10 @@ ReducerRegistry.register('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 }; } }