feat: Adds initial impl of visitors feature.

conference.js

@@ -153,6 +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 UIEvents from './service/UI/UIEvents';
 
 const logger = Logger.getLogger(__filename);
@@ -342,6 +343,8 @@ class ConferenceConnector {
         case JitsiConferenceErrors.REDIRECTED: {
             generateVisitorConfig(APP.store.getState(), params);
 
+            APP.store.dispatch(setVisitorsMode(true));
+
             connection.disconnect().then(() => {
                 connect(this._conference.roomName).then(con => {
                     const localTracks = getLocalTracks(APP.store.getState()['features/base/tracks']);

react/features/app/middlewares.any.ts

@@ -48,5 +48,6 @@ import '../transcribing/middleware';
 import '../video-layout/middleware';
 import '../video-quality/middleware';
 import '../videosipgw/middleware';
+import '../visitors/middleware';
 
 import './middleware';

react/features/app/reducers.any.ts

@@ -56,3 +56,4 @@ import '../transcribing/reducer';
 import '../video-layout/reducer';
 import '../video-quality/reducer';
 import '../videosipgw/reducer';
+import '../visitors/reducer';

react/features/app/types.ts

@@ -76,6 +76,7 @@ import { IVideoLayoutState } from '../video-layout/reducer';
 import { IVideoQualityPersistedState, IVideoQualityState } from '../video-quality/reducer';
 import { IVideoSipGW } from '../videosipgw/reducer';
 import { IVirtualBackground } from '../virtual-background/reducer';
+import { IVisitorsState } from '../visitors/reducer';
 import { IWhiteboardState } from '../whiteboard/reducer';
 
 export interface IStore {
@@ -163,6 +164,7 @@ export interface IReduxState {
     'features/video-quality-persistent-storage': IVideoQualityPersistedState;
     'features/videosipgw': IVideoSipGW;
     'features/virtual-background': IVirtualBackground;
+    'features/visitors': IVisitorsState;
     'features/whiteboard': IWhiteboardState;
 }
 

react/features/visitors/actionTypes.ts

@@ -0,0 +1,19 @@
+/**
+ * The type of (redux) action to update visitors count.
+ *
+ * {
+ *     type: UPDATE_VISITORS_COUNT,
+ *     count: number
+ * }
+ */
+export const UPDATE_VISITORS_COUNT = 'UPDATE_VISITORS_COUNT';
+
+/**
+ * The type of (redux) action which enables/disables visitors UI mode.
+ *
+ * {
+ *     type: VISITORS_MODE_ENABLED,
+ *     enabled: boolean
+ * }
+ */
+export const VISITORS_MODE_ENABLED = 'VISITORS_MODE_ENABLED';

react/features/visitors/actions.ts

@@ -0,0 +1,31 @@
+import { UPDATE_VISITORS_COUNT, VISITORS_MODE_ENABLED } from './actionTypes';
+
+/**
+ * Sets Visitors mode on or off.
+ *
+ * @param {boolean} enabled - The new visitors mode state.
+ * @returns {{
+ *     type: VISITORS_MODE_ENABLED,
+ * }}
+ */
+export function setVisitorsMode(enabled: boolean) {
+    return {
+        type: VISITORS_MODE_ENABLED,
+        enabled
+    };
+}
+
+/**
+ * Visitors count has been updated.
+ *
+ * @param {number} count - The new visitors count.
+ * @returns {{
+ *     type: UPDATE_VISITORS_COUNT,
+ * }}
+ */
+export function updateVisitorsCount(count: number) {
+    return {
+        type: UPDATE_VISITORS_COUNT,
+        count
+    };
+}

react/features/visitors/middleware.ts

@@ -0,0 +1,19 @@
+import { JitsiConferenceEvents } from '../base/lib-jitsi-meet';
+import StateListenerRegistry from '../base/redux/StateListenerRegistry';
+
+import { updateVisitorsCount } from './actions';
+
+StateListenerRegistry.register(
+    state => state['features/base/conference'].conference,
+    (conference, { dispatch, getState }, previousConference) => {
+        if (conference && !previousConference) {
+            conference.on(JitsiConferenceEvents.PROPERTIES_CHANGED, (properties: { 'visitor-count': number; }) => {
+                const visitorCount = Number(properties?.['visitor-count']);
+
+                if (getState()['features/visitors'].count !== visitorCount) {
+                    dispatch(updateVisitorsCount(visitorCount));
+                }
+            });
+        }
+    });
+

react/features/visitors/reducer.ts

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