ref(follow-me): hook into redux (jitsi#3991)

Use subscribers to detect state change and emit those
out to other participants. Use middleware to register
the command listener.

modules/UI/UI.js

@@ -32,7 +32,6 @@ import {
 const EventEmitter = require('events');
 
 UI.messageHandler = messageHandler;
-import FollowMe from '../FollowMe';
 
 const eventEmitter = new EventEmitter();
 
@@ -41,8 +40,6 @@ UI.eventEmitter = eventEmitter;
 let etherpadManager;
 let sharedVideoManager;
 
-let followMeHandler;
-
 const JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP = {
     microphone: {},
     camera: {}
@@ -86,9 +83,6 @@ const UIListeners = new Map([
     ], [
         UIEvents.TOGGLE_FILMSTRIP,
         () => UI.toggleFilmstrip()
-    ], [
-        UIEvents.FOLLOW_ME_ENABLED,
-        enabled => followMeHandler && followMeHandler.enableFollowMe(enabled)
     ]
 ]);
 
@@ -193,12 +187,6 @@ UI.initConference = function() {
     if (displayName) {
         UI.changeDisplayName('localVideoContainer', displayName);
     }
-
-    // FollowMe attempts to copy certain aspects of the moderator's UI into the
-    // other participants' UI. Consequently, it needs (1) read and write access
-    // to the UI (depending on the moderator role of the local participant) and
-    // (2) APP.conference as means of communication between the participants.
-    followMeHandler = new FollowMe(APP.conference, UI);
 };
 
 /**

modules/UI/etherpad/Etherpad.js

@@ -5,7 +5,6 @@ import { getToolboxHeight } from '../../../react/features/toolbox';
 
 import VideoLayout from '../videolayout/VideoLayout';
 import LargeContainer from '../videolayout/LargeContainer';
-import UIEvents from '../../../service/UI/UIEvents';
 import Filmstrip from '../videolayout/Filmstrip';
 
 /**
@@ -250,9 +249,6 @@ export default class EtherpadManager {
         VideoLayout.showLargeVideoContainer(
             ETHERPAD_CONTAINER_TYPE, !isVisible);
 
-        this.eventEmitter
-            .emit(UIEvents.TOGGLED_SHARED_DOCUMENT, !isVisible);
-
         APP.store.dispatch(setDocumentEditingState(!isVisible));
     }
 }

react/features/app/components/AbstractApp.js

@@ -4,6 +4,7 @@ import React, { Fragment } from 'react';
 
 import { BaseApp } from '../../base/app';
 import { toURLString } from '../../base/util';
+import '../../follow-me';
 import { OverlayContainer } from '../../overlay';
 
 import { appNavigate } from '../actions';

react/features/base/conference/actions.js

@@ -1,7 +1,5 @@
 // @flow
 
-import UIEvents from '../../../../service/UI/UIEvents';
-
 import {
     createStartMutedConfigurationEvent,
     sendAnalytics
@@ -547,10 +545,6 @@ export function setDesktopSharingEnabled(desktopSharingEnabled: boolean) {
  * }}
  */
 export function setFollowMe(enabled: boolean) {
-    if (typeof APP !== 'undefined') {
-        APP.UI.emitEvent(UIEvents.FOLLOW_ME_ENABLED, enabled);
-    }
-
     return {
         type: SET_FOLLOW_ME,
         enabled

react/features/etherpad/reducer.js

@@ -7,24 +7,45 @@ import {
     SET_DOCUMENT_EDITING_STATUS
 } from './actionTypes';
 
+const DEFAULT_STATE = {
+
+    /**
+     * Whether or not Etherpad is currently open.
+     *
+     * @public
+     * @type {boolean}
+     */
+    editing: false,
+
+    /**
+     * Whether or not Etherpad is ready to use.
+     *
+     * @public
+     * @type {boolean}
+     */
+    initialized: false
+};
+
 /**
  * Reduces the Redux actions of the feature features/etherpad.
  */
-ReducerRegistry.register('features/etherpad', (state = {}, action) => {
-    switch (action.type) {
-    case ETHERPAD_INITIALIZED:
-        return {
-            ...state,
-            initialized: true
-        };
-
-    case SET_DOCUMENT_EDITING_STATUS:
-        return {
-            ...state,
-            editing: action.editing
-        };
-
-    default:
-        return state;
-    }
-});
+ReducerRegistry.register(
+    'features/etherpad',
+    (state = DEFAULT_STATE, action) => {
+        switch (action.type) {
+        case ETHERPAD_INITIALIZED:
+            return {
+                ...state,
+                initialized: true
+            };
+
+        case SET_DOCUMENT_EDITING_STATUS:
+            return {
+                ...state,
+                editing: action.editing
+            };
+
+        default:
+            return state;
+        }
+    });

react/features/follow-me/constants.js

@@ -0,0 +1,6 @@
+/**
+ * The (name of the) command which transports the state (represented by
+ * {State} for the local state at the time of this writing) of a {FollowMe}
+ * (instance) between participants.
+ */
+export const FOLLOW_ME_COMMAND = 'follow-me';

react/features/follow-me/index.js

@@ -0,0 +1,2 @@
+export * from './middleware';
+export * from './subscriber';

react/features/follow-me/middleware.js

@@ -0,0 +1,162 @@
+// @flow
+
+import { CONFERENCE_WILL_JOIN } from '../base/conference';
+import {
+    getParticipantById,
+    getPinnedParticipant,
+    pinParticipant
+} from '../base/participants';
+import { MiddlewareRegistry } from '../base/redux';
+import { setFilmstripVisible } from '../filmstrip';
+import { setTileView } from '../video-layout';
+
+import { FOLLOW_ME_COMMAND } from './constants';
+
+const logger = require('jitsi-meet-logger').getLogger(__filename);
+
+declare var APP: Object;
+
+/**
+ * The timeout after which a follow-me command that has been received will be
+ * ignored if not consumed.
+ *
+ * @type {number} in seconds
+ * @private
+ */
+const _FOLLOW_ME_RECEIVED_TIMEOUT = 30;
+
+/**
+ * An instance of a timeout used as a workaround when attempting to pin a
+ * non-existent particapant, which may be caused by participant join information
+ * not being received yet.
+ *
+ * @type {TimeoutID}
+ */
+let nextOnStageTimeout;
+
+/**
+ * A count of how many seconds the nextOnStageTimeout has ticked while waiting
+ * for a participant to be discovered that should be pinned. This variable
+ * works in conjunction with {@code _FOLLOW_ME_RECEIVED_TIMEOUT} and
+ * {@code nextOnStageTimeout}.
+ *
+ * @type {number}
+ */
+let nextOnStageTimer = 0;
+
+/**
+ * Represents "Follow Me" feature which enables a moderator to (partially)
+ * control the user experience/interface (e.g. filmstrip visibility) of (other)
+ * non-moderator participant.
+ */
+MiddlewareRegistry.register(store => next => action => {
+    switch (action.type) {
+    case CONFERENCE_WILL_JOIN: {
+        const { conference } = action;
+
+        conference.addCommandListener(
+            FOLLOW_ME_COMMAND, ({ attributes }, id) => {
+                _onFollowMeCommand(attributes, id, store);
+            });
+    }
+    }
+
+    return next(action);
+});
+
+/**
+ * Notifies this instance about a "Follow Me" command received by the Jitsi
+ * conference.
+ *
+ * @param {Object} attributes - The attributes carried by the command.
+ * @param {string} id - The identifier of the participant who issuing the
+ * command. A notable idiosyncrasy to be mindful of here is that the command
+ * may be issued by the local participant.
+ * @param {Object} store - The redux store. Used to calculate and dispatch
+ * updates.
+ * @private
+ * @returns {void}
+ */
+function _onFollowMeCommand(attributes = {}, id, store) {
+    const state = store.getState();
+
+    // We require to know who issued the command because (1) only a
+    // moderator is allowed to send commands and (2) a command MUST be
+    // issued by a defined commander.
+    if (typeof id === 'undefined') {
+        return;
+    }
+
+    const participantSendingCommand = getParticipantById(state, id);
+
+    // The Command(s) API will send us our own commands and we don't want
+    // to act upon them.
+    if (participantSendingCommand.local) {
+        return;
+    }
+
+    if (participantSendingCommand.role !== 'moderator') {
+        logger.warn('Received follow-me command not from moderator');
+
+        return;
+    }
+
+    // XMPP will translate all booleans to strings, so explicitly check against
+    // the string form of the boolean {@code true}.
+    store.dispatch(setFilmstripVisible(attributes.filmstripVisible === 'true'));
+    store.dispatch(setTileView(attributes.tileViewEnabled === 'true'));
+
+    // For now gate etherpad checks behind a web-app check to be extra safe
+    // against calling a web-app global.
+    if (typeof APP !== 'undefined' && state['features/etherpad'].initialized) {
+        const isEtherpadVisible = attributes.sharedDocumentVisible === 'true';
+        const documentManager = APP.UI.getSharedDocumentManager();
+
+        if (documentManager
+                && isEtherpadVisible !== state['features/etherpad'].editing) {
+            documentManager.toggleEtherpad();
+        }
+    }
+
+    const pinnedParticipant
+        = getPinnedParticipant(state, attributes.nextOnStage);
+    const idOfParticipantToPin = attributes.nextOnStage;
+
+    if (typeof idOfParticipantToPin !== 'undefined'
+            && (!pinnedParticipant
+                || idOfParticipantToPin !== pinnedParticipant.id)) {
+        _pinVideoThumbnailById(store, idOfParticipantToPin);
+    } else if (typeof idOfParticipantToPin === 'undefined'
+            && pinnedParticipant) {
+        store.dispatch(pinParticipant(null));
+    }
+}
+
+/**
+ * Pins the video thumbnail given by clickId.
+ *
+ * @param {Object} store - The redux store.
+ * @param {string} clickId - The identifier of the participant to pin.
+ * @private
+ * @returns {void}
+ */
+function _pinVideoThumbnailById(store, clickId) {
+    if (getParticipantById(store.getState(), clickId)) {
+        clearTimeout(nextOnStageTimeout);
+        nextOnStageTimer = 0;
+
+        store.dispatch(pinParticipant(clickId));
+    } else {
+        nextOnStageTimeout = setTimeout(() => {
+            if (nextOnStageTimer > _FOLLOW_ME_RECEIVED_TIMEOUT) {
+                nextOnStageTimer = 0;
+
+                return;
+            }
+
+            nextOnStageTimer++;
+
+            _pinVideoThumbnailById(store, clickId);
+        }, 1000);
+    }
+}