feat(remotecontrol): Prevent multiple remote control sessions (#1875)

conference.js

 
 import { reload, reportError } from './modules/util/helpers';
 
+import * as RemoteControlEvents
+    from './service/remotecontrol/RemoteControlEvents';
 import UIEvents from './service/UI/UIEvents';
 import UIUtil from './modules/UI/util/UIUtil';
 import * as JitsiMeetConferenceEvents from './ConferenceEvents';
             ConferenceEvents.LOCK_STATE_CHANGED,
             (...args) => APP.store.dispatch(lockStateChanged(room, ...args)));
 
+        APP.remoteControl.on(RemoteControlEvents.ACTIVE_CHANGED, isActive => {
+            room.setLocalParticipantProperty(
+                "remoteControlSessionStatus",
+                isActive
+            );
+            APP.UI.setLocalRemoteControlActiveChanged();
+        });
+
         room.on(ConferenceEvents.PARTICIPANT_PROPERTY_CHANGED,
                 (participant, name, oldValue, newValue) => {
-            if (name === "raisedHand") {
+            switch (name) {
+            case 'raisedHand':
                 APP.UI.setRaisedHandStatus(participant, newValue);
+                break;
+            case 'remoteControlSessionStatus':
+                APP.UI.setRemoteControlActiveStatus(
+                    participant.getId(),
+                    newValue);
+                break;
+            default:
+            // ignore
             }
         });
 
             APP.UI.setLocalRaisedHandStatus(raisedHand);
         }
     },
+
     /**
      * Log event to callstats and analytics.
      * @param {string} name the event name

modules/UI/UI.js

 UI.setRemoteThumbnailsVisibility
     = shouldHide => Filmstrip.setRemoteVideoVisibility(shouldHide);
 
+/**
+ * Sets the remote control active status for a remote participant.
+ *
+ * @param {string} participantID - The id of the remote participant.
+ * @param {boolean} isActive - The new remote control active status.
+ * @returns {void}
+ */
+UI.setRemoteControlActiveStatus = function(participantID, isActive) {
+    VideoLayout.setRemoteControlActiveStatus(participantID, isActive);
+};
+
+/**
+ * Sets the remote control active status for the local participant.
+ *
+ * @returns {void}
+ */
+UI.setLocalRemoteControlActiveChanged = function() {
+    VideoLayout.setLocalRemoteControlActiveChanged();
+};
+
 const UIListeners = new Map([
     [
         UIEvents.ETHERPAD_CLICKED,

modules/UI/videolayout/RemoteVideo.js

     this.flipX = false;
     this.isLocal = false;
     this.popupMenuIsHovered = false;
+    this._isRemoteControlSessionActive = false;
     /**
      * The flag is set to <tt>true</tt> after the 'onplay' event has been
      * triggered on the current video element. It goes back to <tt>false</tt>
 
     this.initBrowserSpecificProperties();
 
-    if (APP.conference.isModerator || this._supportsRemoteControl) {
-        this.addRemoteVideoMenu();
-    }
+    this.addRemoteVideoMenu();
 
     this.VideoLayout.resizeThumbnails(false, true);
 
     let remoteControlState = null;
     let onRemoteControlToggle;
 
-    if (this._supportsRemoteControl) {
+    if (this._supportsRemoteControl
+        && ((!APP.remoteControl.active && !this._isRemoteControlSessionActive)
+            || APP.remoteControl.controller.activeParticipant === this.id)) {
         if (controller.getRequestedParticipant() === this.id) {
             onRemoteControlToggle = () => {};
             remoteControlState = REMOTE_CONTROL_MENU_STATES.REQUESTING;
 };
 
 RemoteVideo.prototype._onRemoteVideoMenuDisplay = function () {
-    this.updateRemoteVideoMenu(this.isAudioMuted, true);
+    this.updateRemoteVideoMenu();
+};
+
+/**
+ * Sets the remote control active status for the remote video.
+ *
+ * @param {boolean} isActive - The new remote control active status.
+ * @returns {void}
+ */
+RemoteVideo.prototype.setRemoteControlActiveStatus = function(isActive) {
+    this._isRemoteControlSessionActive = isActive;
+    this.updateRemoteVideoMenu();
 };
 
 /**
         return;
     }
     this._supportsRemoteControl = isSupported;
-    if(!isSupported) {
-        return;
-    }
-
-    if(!this.hasRemoteVideoMenu) {
-        //create menu
-        this.addRemoteVideoMenu();
-    } else {
-        //update the content
-        this.updateRemoteVideoMenu(this.isAudioMuted, true);
-    }
-
+    this.updateRemoteVideoMenu();
 };
 
 /**
         if(result === null) {
             return;
         }
-        this.updateRemoteVideoMenu(this.isAudioMuted, true);
+        this.updateRemoteVideoMenu();
         APP.UI.messageHandler.notify(
             "dialog.remoteControlTitle",
             (result === false) ? "dialog.remoteControlDeniedMessage"
         }
     }, error => {
         logger.error(error);
-        this.updateRemoteVideoMenu(this.isAudioMuted, true);
+        this.updateRemoteVideoMenu();
         APP.UI.messageHandler.notify(
             "dialog.remoteControlTitle",
             "dialog.remoteControlErrorMessage",
                 || interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME}
         );
     });
-    this.updateRemoteVideoMenu(this.isAudioMuted, true);
+    this.updateRemoteVideoMenu();
 };
 
 /**
 RemoteVideo.prototype._stopRemoteControl = function () {
     // send message about stopping
     APP.remoteControl.controller.stop();
-    this.updateRemoteVideoMenu(this.isAudioMuted, true);
+    this.updateRemoteVideoMenu();
 };
 
 /**
  * Updates the remote video menu.
  *
  * @param isMuted the new muted state to update to
- * @param force to work even if popover is not visible
  */
-RemoteVideo.prototype.updateRemoteVideoMenu = function (isMuted) {
+RemoteVideo.prototype.updateRemoteVideoMenu = function (
+    isMuted = this.isAudioMuted
+) {
     this.isAudioMuted = isMuted;
 
     this._generatePopupContent();
  * Adds the remote video menu element for the given <tt>id</tt> in the
  * given <tt>parentElement</tt>.
  *
- * @param id the id indicating the video for which we're adding a menu.
- * @param parentElement the parent element where this menu will be added
  */
 RemoteVideo.prototype.addRemoteVideoMenu = function () {
     if (interfaceConfig.filmStripOnly) {
 
     if (!isVideo) {
         this._audioStreamElement = streamElement;
+
+        // If the remote video menu was created before the audio stream was
+        // attached we need to update the menu in order to show the volume
+        // slider.
+        this.updateRemoteVideoMenu();
     }
 };
 

modules/UI/videolayout/VideoLayout.js

                 return;
 
             remoteVideo.showAudioIndicator(isMuted);
-            if (APP.conference.isModerator) {
-                remoteVideo.updateRemoteVideoMenu(isMuted);
-            }
+            remoteVideo.updateRemoteVideoMenu(isMuted);
         }
     },
 
      */
     getRemoteVideosCount() {
         return Object.keys(remoteVideos).length;
+    },
+    /**
+     * Sets the remote control active status for a remote participant.
+     *
+     * @param {string} participantID - The id of the remote participant.
+     * @param {boolean} isActive - The new remote control active status.
+     * @returns {void}
+     */
+    setRemoteControlActiveStatus(participantID, isActive) {
+        remoteVideos[participantID].setRemoteControlActiveStatus(isActive);
+    },
+
+    /**
+     * Sets the remote control active status for the local participant.
+     *
+     * @returns {void}
+     */
+    setLocalRemoteControlActiveChanged() {
+        Object.values(remoteVideos).forEach(
+            remoteVideo => remoteVideo.updateRemoteVideoMenu()
+        );
     }
 };
 

modules/remotecontrol/Controller.js

     PERMISSIONS_ACTIONS,
     REMOTE_CONTROL_MESSAGE_NAME
 } from '../../service/remotecontrol/Constants';
+import * as RemoteControlEvents
+    from '../../service/remotecontrol/RemoteControlEvents';
 import UIEvents from '../../service/UI/UIEvents';
 
 import RemoteControlParticipant from './RemoteControlParticipant';
             = this._onLargeVideoIdChanged.bind(this);
     }
 
+    /**
+     * Returns the current active participant's id.
+     *
+     * @returns {string|null} - The id of the current active participant.
+     */
+    get activeParticipant(): string | null {
+        return this._requestedParticipant || this._controlledParticipant;
+    }
+
     /**
      * Requests permissions from the remote control receiver side.
      *
         if (!this._enabled) {
             return Promise.reject(new Error('Remote control is disabled!'));
         }
-
+        this.emit(RemoteControlEvents.ACTIVE_CHANGED, true);
         this._area = eventCaptureArea;// $("#largeVideoWrapper")
         logger.log(`Requsting remote control permissions from: ${userId}`);
 
                     result = this._handleReply(participant, event);
                 } catch (e) {
                     clearRequest();
+                    this.emit(RemoteControlEvents.ACTIVE_CHANGED, false);
                     reject(e);
                 }
                 if (result !== null) {
                     clearRequest();
+                    if (result === false) {
+                        this.emit(RemoteControlEvents.ACTIVE_CHANGED, false);
+                    }
                     resolve(result);
                 }
             };
             onUserLeft = id => {
                 if (id === this._requestedParticipant) {
                     clearRequest();
+                    this.emit(RemoteControlEvents.ACTIVE_CHANGED, false);
                     resolve(null);
                 }
             };
         this.pause();
         this._controlledParticipant = null;
         this._area = undefined;
+        this.emit(RemoteControlEvents.ACTIVE_CHANGED, false);
         APP.UI.messageHandler.notify(
             'dialog.remoteControlTitle',
             'dialog.remoteControlStopMessage'

modules/remotecontrol/Receiver.js

     REMOTE_CONTROL_MESSAGE_NAME,
     REQUESTS
 } from '../../service/remotecontrol/Constants';
+import * as RemoteControlEvents
+    from '../../service/remotecontrol/RemoteControlEvents';
 import {
     Transport,
     PostMessageTransportBackend
             name: REMOTE_CONTROL_MESSAGE_NAME,
             type: EVENTS.stop
         });
+        this.emit(RemoteControlEvents.ACTIVE_CHANGED, false);
         if (!dontNotify) {
             APP.UI.messageHandler.notify(
                 'dialog.remoteControlTitle',
                     && message.action === PERMISSIONS_ACTIONS.request) {
                 const userId = participant.getId();
 
+                this.emit(RemoteControlEvents.ACTIVE_CHANGED, true);
                 APP.store.dispatch(
                     openRemoteControlAuthorizationDialog(userId));
             } else if (this._controller === participant.getId()) {
      * @returns {void}
      */
     deny(userId: string) {
+        this.emit(RemoteControlEvents.ACTIVE_CHANGED, false);
         this.sendRemoteControlEndpointMessage(userId, {
             type: EVENTS.permissions,
             action: PERMISSIONS_ACTIONS.deny

modules/remotecontrol/RemoteControl.js

 /* @flow */
 
+import EventEmitter from 'events';
 import { getLogger } from 'jitsi-meet-logger';
 
 import { DISCO_REMOTE_CONTROL_FEATURE }
     from '../../service/remotecontrol/Constants';
+import * as RemoteControlEvents
+    from '../../service/remotecontrol/RemoteControlEvents';
 
 import Controller from './Controller';
 import Receiver from './Receiver';
 /**
  * Implements the remote control functionality.
  */
-class RemoteControl {
+class RemoteControl extends EventEmitter {
+    _active: boolean;
     _initialized: boolean;
     controller: Controller;
     receiver: Receiver;
      * Constructs new instance. Creates controller and receiver properties.
      */
     constructor() {
+        super();
         this.controller = new Controller();
+        this._active = false;
         this._initialized = false;
+
+        this.controller.on(RemoteControlEvents.ACTIVE_CHANGED, active => {
+            this.active = active;
+        });
+    }
+
+    /**
+     * Sets the remote control session active status.
+     *
+     * @param {boolean} isActive - True - if the controller or the receiver is
+     * currently in remote control session and false otherwise.
+     * @returns {void}
+     */
+    set active(isActive: boolean) {
+        this._active = isActive;
+        this.emit(RemoteControlEvents.ACTIVE_CHANGED, isActive);
+    }
+
+    /**
+     * Returns the remote control session active status.
+     *
+     * @returns {boolean} - True - if the controller or the receiver is
+     * currently in remote control session and false otherwise.
+     */
+    get active(): boolean {
+        return this._active;
     }
 
     /**
         this._initialized = true;
         this.controller.enable(true);
         this.receiver = new Receiver();
+
+        this.receiver.on(RemoteControlEvents.ACTIVE_CHANGED, active => {
+            this.active = active;
+        });
     }
 
     /**

modules/remotecontrol/RemoteControlParticipant.js

 /* @flow */
 
+import EventEmitter from 'events';
 import { getLogger } from 'jitsi-meet-logger';
 
 import {
 /**
  * Implements common logic for Receiver class and Controller class.
  */
-export default class RemoteControlParticipant {
+export default class RemoteControlParticipant extends EventEmitter {
     _enabled: boolean;
 
     /**
      * Creates new instance.
      */
     constructor() {
+        super();
         this._enabled = false;
     }
 

react/features/remote-video-menu/components/RemoteVideoMenuTriggerButton.js

      * @returns {ReactElement}
      */
     render() {
+        const content = this._renderRemoteVideoMenu();
+
+        if (!content) {
+            return null;
+        }
+
         return (
             <AKInlineDialog
-                content = { this._renderRemoteVideoMenu() }
+                content = { content }
                 isOpen = { this.state.showRemoteMenu }
                 onClose = { this._onRemoteMenuClose }
                 position = { interfaceConfig.VERTICAL_FILMSTRIP
             participantID
         } = this.props;
 
-        return (
-            <RemoteVideoMenu id = { participantID }>
-                { isModerator
-                    ? <MuteButton
-                        isAudioMuted = { isAudioMuted }
-                        onClick = { this._onRemoteMenuClose }
-                        participantID = { participantID } />
-                    : null }
-                { isModerator
-                    ? <KickButton
-                        onClick = { this._onRemoteMenuClose }
-                        participantID = { participantID } />
-                    : null }
-                { remoteControlState
-                    ? <RemoteControlButton
-                        onClick = { onRemoteControlToggle }
-                        participantID = { participantID }
-                        remoteControlState = { remoteControlState } />
-                    : null }
-                { onVolumeChange
-                    ? <VolumeSlider
-                        initialValue = { initialVolumeValue }
-                        onChange = { onVolumeChange } />
-                    : null }
-            </RemoteVideoMenu>
-        );
+        const buttons = [];
+
+        if (isModerator) {
+            buttons.push(
+                <MuteButton
+                    isAudioMuted = { isAudioMuted }
+                    key = 'mute'
+                    onClick = { this._onRemoteMenuClose }
+                    participantID = { participantID } />
+            );
+            buttons.push(
+                <KickButton
+                    key = 'kick'
+                    onClick = { this._onRemoteMenuClose }
+                    participantID = { participantID } />
+            );
+        }
+
+        if (remoteControlState) {
+            buttons.push(
+                <RemoteControlButton
+                    key = 'remote-control'
+                    onClick = { onRemoteControlToggle }
+                    participantID = { participantID }
+                    remoteControlState = { remoteControlState } />
+            );
+        }
+
+        if (onVolumeChange && isModerator) {
+            buttons.push(
+                <VolumeSlider
+                    initialValue = { initialVolumeValue }
+                    key = 'volume-slider'
+                    onChange = { onVolumeChange } />
+            );
+        }
+
+        if (buttons.length > 0) {
+            return (
+                <RemoteVideoMenu id = { participantID }>
+                    { buttons }
+                </RemoteVideoMenu>
+            );
+        }
+
+        return null;
     }
 }
 

service/remotecontrol/RemoteControlEvents.js

+/**
+ * Events fired from the remote control module through the EventEmitter.
+ */
+
+/**
+ * Notifies about remote control active session status changes.
+ */
+export const ACTIVE_CHANGED = 'active-changed';