fix(avatar) revert back to defaulting to Gravatar

While the base URL remains configurable, this patch reverts back to using
Gravatar.

We noticed high latency with libravatar and contacted them. They are in the
process of migrarting to a better infrastructure (it's a single personal server
at the moment) so we'll re-evaluate once that has happened.

As for why not leave the default and change it on the meet.jit.si installation,
we don't want to kill their server :-)

ConferenceEvents.js

@@ -0,0 +1,4 @@
+/**
+ * Notifies interested parties that hangup procedure will start.
+ */
+export const BEFORE_HANGUP = 'conference.before_hangup';

app.js

@@ -17,6 +17,7 @@ import conference from './conference';
 import API from './modules/API';
 import UI from './modules/UI/UI';
 import keyboardshortcut from './modules/keyboardshortcut/keyboardshortcut';
+import remoteControl from './modules/remotecontrol/RemoteControl';
 import translation from './modules/translation/translation';
 
 // Initialize Olm as early as possible.
@@ -48,6 +49,7 @@ window.APP = {
     },
 
     keyboardshortcut,
+    remoteControl,
     translation,
     UI
 };

conference.js

@@ -3,6 +3,7 @@
 import EventEmitter from 'events';
 import Logger from 'jitsi-meet-logger';
 
+import * as JitsiMeetConferenceEvents from './ConferenceEvents';
 import { openConnection } from './connection';
 import { ENDPOINT_TEXT_MESSAGE_NAME } from './modules/API/constants';
 import AuthHandler from './modules/UI/authentication/AuthHandler';
@@ -85,8 +86,7 @@ import {
     participantMutedUs,
     participantPresenceChanged,
     participantRoleChanged,
-    participantUpdated,
-    updateRemoteParticipantFeatures
+    participantUpdated
 } from './react/features/base/participants';
 import {
     getUserSelectedCameraDeviceId,
@@ -122,13 +122,14 @@ import {
     isPrejoinPageVisible,
     makePrecallTest
 } from './react/features/prejoin';
-import { disableReceiver, stopReceiver } from './react/features/remote-control';
 import { toggleScreenshotCaptureEffect } from './react/features/screenshot-capture';
 import { setSharedVideoStatus } from './react/features/shared-video';
 import { AudioMixerEffect } from './react/features/stream-effects/audio-mixer/AudioMixerEffect';
 import { createPresenterEffect } from './react/features/stream-effects/presenter';
 import { endpointMessageReceived } from './react/features/subtitles';
 import UIEvents from './service/UI/UIEvents';
+import * as RemoteControlEvents
+    from './service/remotecontrol/RemoteControlEvents';
 
 const logger = Logger.getLogger(__filename);
 
@@ -670,6 +671,7 @@ export default {
         APP.connection = connection = con;
 
         this._createRoom(tracks);
+        APP.remoteControl.init();
 
         // if user didn't give access to mic or camera or doesn't have
         // them at all, we mark corresponding toolbar buttons as muted,
@@ -1426,8 +1428,11 @@ export default {
     async _turnScreenSharingOff(didHaveVideo) {
         this._untoggleScreenSharing = null;
         this.videoSwitchInProgress = true;
+        const { receiver } = APP.remoteControl;
 
-        APP.store.dispatch(stopReceiver());
+        if (receiver) {
+            receiver.stop();
+        }
 
         this._stopProxyConnection();
         if (config.enableScreenshotCapture) {
@@ -1850,9 +1855,8 @@ export default {
             (authEnabled, authLogin) =>
                 APP.store.dispatch(authStatusChanged(authEnabled, authLogin)));
 
-        room.on(JitsiConferenceEvents.PARTCIPANT_FEATURES_CHANGED, user => {
-            APP.store.dispatch(updateRemoteParticipantFeatures(user));
-        });
+        room.on(JitsiConferenceEvents.PARTCIPANT_FEATURES_CHANGED,
+            user => APP.UI.onUserFeaturesChanged(user));
         room.on(JitsiConferenceEvents.USER_JOINED, (id, user) => {
             // The logic shared between RN and web.
             commonUserJoinedHandling(APP.store, room, user);
@@ -1861,7 +1865,6 @@ export default {
                 return;
             }
 
-            APP.store.dispatch(updateRemoteParticipantFeatures(user));
             logger.log(`USER ${id} connnected:`, user);
             APP.UI.addUser(user);
         });
@@ -2032,6 +2035,30 @@ export default {
             JitsiConferenceEvents.LOCK_STATE_CHANGED,
             (...args) => APP.store.dispatch(lockStateChanged(room, ...args)));
 
+        APP.remoteControl.on(RemoteControlEvents.ACTIVE_CHANGED, isActive => {
+            room.setLocalParticipantProperty(
+                'remoteControlSessionStatus',
+                isActive
+            );
+            APP.UI.setLocalRemoteControlActiveChanged();
+        });
+
+        /* eslint-disable max-params */
+        room.on(
+            JitsiConferenceEvents.PARTICIPANT_PROPERTY_CHANGED,
+            (participant, name, oldValue, newValue) => {
+                switch (name) {
+                case 'remoteControlSessionStatus':
+                    APP.UI.setRemoteControlActiveStatus(
+                        participant.getId(),
+                        newValue);
+                    break;
+                default:
+
+                // ignore
+                }
+            });
+
         room.on(JitsiConferenceEvents.KICKED, participant => {
             APP.UI.hideStats();
             APP.store.dispatch(kickedOut(room, participant));
@@ -2376,6 +2403,25 @@ export default {
         APP.UI.changeDisplayName('localVideoContainer', displayName);
     },
 
+    /**
+    * Adds any room listener.
+    * @param {string} eventName one of the JitsiConferenceEvents
+    * @param {Function} listener the function to be called when the event
+    * occurs
+    */
+    addConferenceListener(eventName, listener) {
+        room.on(eventName, listener);
+    },
+
+    /**
+    * Removes any room listener.
+    * @param {string} eventName one of the JitsiConferenceEvents
+    * @param {Function} listener the listener to be removed.
+    */
+    removeConferenceListener(eventName, listener) {
+        room.off(eventName, listener);
+    },
+
     /**
      * Updates the list of current devices.
      * @param {boolean} setDeviceListChangeHandler - Whether to add the deviceList change handlers.
@@ -2658,7 +2704,7 @@ export default {
      * requested
      */
     hangup(requestFeedback = false) {
-        APP.store.dispatch(disableReceiver());
+        eventEmitter.emit(JitsiMeetConferenceEvents.BEFORE_HANGUP);
 
         this._stopProxyConnection();
 
@@ -2675,6 +2721,7 @@ export default {
         }
 
         APP.UI.removeAllListeners();
+        APP.remoteControl.removeAllListeners();
 
         let requestFeedbackPromise;
 
@@ -2857,6 +2904,29 @@ export default {
         }
     },
 
+    /**
+     * Returns the desktop sharing source id or undefined if the desktop sharing
+     * is not active at the moment.
+     *
+     * @returns {string|undefined} - The source id. If the track is not desktop
+     * track or the source id is not available, undefined will be returned.
+     */
+    getDesktopSharingSourceId() {
+        return this.localVideo.sourceId;
+    },
+
+    /**
+     * Returns the desktop sharing source type or undefined if the desktop
+     * sharing is not active at the moment.
+     *
+     * @returns {'screen'|'window'|undefined} - The source type. If the track is
+     * not desktop track or the source type is not available, undefined will be
+     * returned.
+     */
+    getDesktopSharingSourceType() {
+        return this.localVideo.sourceType;
+    },
+
     /**
      * Callback invoked by the external api create or update a direct connection
      * from the local client to an external client.

config.js

@@ -94,6 +94,11 @@ var config = {
     // input and will suggest another valid device if one is present.
     enableNoAudioDetection: true,
 
+    // Enabling this will show a "Save Logs" link in the GSM popover that can be
+    // used to collect debug information (XMPP IQs, SDP offer/answer cycles)
+    // about the call.
+    // enableSaveLogs: false,
+
     // Enabling this will run the lib-jitsi-meet noise detection module which will
     // notify the user if there is noise, other than voice, coming from the current
     // selected microphone. The purpose it to let the user know that the input could
@@ -393,6 +398,9 @@ var config = {
     // Document should be focused for this option to work
     // enableAutomaticUrlCopy: false,
 
+    // Base URL for a Gravatar-compatible service. Defaults to libravatar.
+    // gravatarBaseURL: 'https://seccdn.libravatar.org/avatar/';
+
     // Stats
     //
 

lang/languages.json

@@ -28,6 +28,7 @@
     "kab": "Kabyle",
     "ko": "Korean",
     "lt": "Lithuanian",
+    "lv": "Latvian",
     "nl": "Dutch",
     "oc": "Occitan",
     "pl": "Polish",

modules/UI/UI.js

@@ -59,6 +59,14 @@ UI.isFullScreen = function() {
     return UIUtil.isFullScreen();
 };
 
+/**
+ * Returns true if the etherpad window is currently visible.
+ * @returns {Boolean} - true if the etherpad window is currently visible.
+ */
+UI.isEtherpadVisible = function() {
+    return Boolean(etherpadManager && etherpadManager.isVisible());
+};
+
 /**
  * Returns true if there is a shared video which is being shown (?).
  * @returns {boolean} - true if there is a shared video which is being shown.
@@ -297,6 +305,44 @@ UI.toggleFilmstrip = function() {
  */
 UI.toggleChat = () => APP.store.dispatch(toggleChat());
 
+/**
+ * Handle new user display name.
+ */
+UI.inputDisplayNameHandler = function(newDisplayName) {
+    eventEmitter.emit(UIEvents.NICKNAME_CHANGED, newDisplayName);
+};
+
+// FIXME check if someone user this
+UI.showLoginPopup = function(callback) {
+    logger.log('password is required');
+
+    const message
+        = `<input name="username" type="text"
+                placeholder="user@domain.net"
+                class="input-control" autofocus>
+         <input name="password" type="password"
+                data-i18n="[placeholder]dialog.userPassword"
+                class="input-control"
+                placeholder="user password">`
+
+    ;
+
+    // eslint-disable-next-line max-params
+    const submitFunction = (e, v, m, f) => {
+        if (v && f.username && f.password) {
+            callback(f.username, f.password);
+        }
+    };
+
+    messageHandler.openTwoButtonDialog({
+        titleKey: 'dialog.passwordRequired',
+        msgString: message,
+        leftButtonKey: 'dialog.Ok',
+        submitFunction,
+        focus: ':input:first'
+    });
+};
+
 /**
  * Sets muted audio state for participant
  */
@@ -453,6 +499,14 @@ UI.notifyTokenAuthFailed = function() {
     });
 };
 
+UI.notifyInternalError = function(error) {
+    messageHandler.showError({
+        descriptionArguments: { error },
+        descriptionKey: 'dialog.internalError',
+        titleKey: 'dialog.internalErrorTitle'
+    });
+};
+
 UI.notifyFocusDisconnected = function(focus, retrySec) {
     messageHandler.participantNotification(
         null, 'notify.focus',
@@ -462,6 +516,16 @@ UI.notifyFocusDisconnected = function(focus, retrySec) {
     );
 };
 
+/**
+ * Notifies interested listeners that the raise hand property has changed.
+ *
+ * @param {boolean} isRaisedHand indicates the current state of the
+ * "raised hand"
+ */
+UI.onLocalRaiseHandChanged = function(isRaisedHand) {
+    eventEmitter.emit(UIEvents.LOCAL_RAISE_HAND_CHANGED, isRaisedHand);
+};
+
 /**
  * Update list of available physical devices.
  */
@@ -521,6 +585,48 @@ UI.onSharedVideoStop = function(id, attributes) {
     }
 };
 
+/**
+ * Handles user's features changes.
+ */
+UI.onUserFeaturesChanged = user => VideoLayout.onUserFeaturesChanged(user);
+
+/**
+ * Returns the number of known remote videos.
+ *
+ * @returns {number} The number of remote videos.
+ */
+UI.getRemoteVideosCount = () => VideoLayout.getRemoteVideosCount();
+
+/**
+ * Returns the video type of the remote participant's video.
+ * This is needed for the torture clients to determine the video type of the
+ * remote participants.
+ *
+ * @param {string} participantID - The id of the remote participant.
+ * @returns {string} The video type "camera" or "desktop".
+ */
+UI.getRemoteVideoType = participantID => VideoLayout.getRemoteVideoType(participantID);
+
+/**
+ * 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();
+};
+
 // TODO: Export every function separately. For now there is no point of doing
 // this because we are importing everything.
 export default UI;

modules/UI/audio_levels/AudioLevels.js

@@ -6,6 +6,48 @@ import UIUtil from '../util/UIUtil';
  * Responsible for drawing audio levels.
  */
 const AudioLevels = {
+    /**
+     * Fills the dot(s) with the specified "index", with as much opacity as
+     * indicated by "opacity".
+     *
+     * @param {string} elementID the parent audio indicator span element
+     * @param {number} index the index of the dots to fill, where 0 indicates
+     * the middle dot and the following increments point toward the
+     * corresponding pair of dots.
+     * @param {number} opacity the opacity to set for the specified dot.
+     */
+    _setDotLevel(elementID, index, opacity) {
+        let audioSpan
+            = document.getElementById(elementID)
+                .getElementsByClassName('audioindicator');
+
+        // Make sure the audio span is still around.
+        if (audioSpan && audioSpan.length > 0) {
+            audioSpan = audioSpan[0];
+        } else {
+            return;
+        }
+
+        const audioTopDots
+            = audioSpan.getElementsByClassName('audiodot-top');
+        const audioDotMiddle
+            = audioSpan.getElementsByClassName('audiodot-middle');
+        const audioBottomDots
+            = audioSpan.getElementsByClassName('audiodot-bottom');
+
+        // First take care of the middle dot case.
+        if (index === 0) {
+            audioDotMiddle[0].style.opacity = opacity;
+
+            return;
+        }
+
+        // Index > 0 : we are setting non-middle dots.
+        index--;// eslint-disable-line no-param-reassign
+        audioBottomDots[index].style.opacity = opacity;
+        audioTopDots[this.sideDotsCount - index - 1].style.opacity = opacity;
+    },
+
     /**
      * Updates the audio level of the large video.
      *

modules/UI/videolayout/RemoteVideo.js

@@ -12,10 +12,19 @@ import { i18next } from '../../../react/features/base/i18n';
 import {
     JitsiParticipantConnectionStatus
 } from '../../../react/features/base/lib-jitsi-meet';
-import { getParticipantById } from '../../../react/features/base/participants';
+import { MEDIA_TYPE } from '../../../react/features/base/media';
+import {
+    getParticipantById,
+    getPinnedParticipant,
+    pinParticipant
+} from '../../../react/features/base/participants';
+import { isRemoteTrackMuted } from '../../../react/features/base/tracks';
 import { PresenceLabel } from '../../../react/features/presence-status';
-import { stopController, requestRemoteControl } from '../../../react/features/remote-control';
-import { RemoteVideoMenuTriggerButton } from '../../../react/features/remote-video-menu';
+import {
+    REMOTE_CONTROL_MENU_STATES,
+    RemoteVideoMenuTriggerButton
+} from '../../../react/features/remote-video-menu';
+import { LAYOUTS, getCurrentLayout } from '../../../react/features/video-layout';
 /* eslint-enable no-unused-vars */
 import UIUtils from '../util/UIUtil';
 
@@ -72,6 +81,7 @@ export default class RemoteVideo extends SmallVideo {
         this.videoSpanId = `participant_${this.id}`;
 
         this._audioStreamElement = null;
+        this._supportsRemoteControl = false;
         this.statsPopoverLocation = interfaceConfig.VERTICAL_FILMSTRIP ? 'left bottom' : 'top center';
         this.addRemoteVideoContainer();
         this.updateIndicators();
@@ -79,6 +89,7 @@ export default class RemoteVideo extends SmallVideo {
         this.bindHoverHandler();
         this.flipX = false;
         this.isLocal = false;
+        this._isRemoteControlSessionActive = false;
 
         /**
          * The flag is set to <tt>true</tt> after the 'canplay' event has been
@@ -92,7 +103,10 @@ export default class RemoteVideo extends SmallVideo {
         // Bind event handlers so they are only bound once for every instance.
         // TODO The event handlers should be turned into actions so changes can be
         // handled through reducers and middleware.
+        this._requestRemoteControlPermissions
+            = this._requestRemoteControlPermissions.bind(this);
         this._setAudioVolume = this._setAudioVolume.bind(this);
+        this._stopRemoteControl = this._stopRemoteControl.bind(this);
 
         this.container.onclick = this._onContainerClick;
     }
@@ -128,11 +142,40 @@ export default class RemoteVideo extends SmallVideo {
             return;
         }
 
+        const { controller } = APP.remoteControl;
+        let remoteControlState = null;
+        let onRemoteControlToggle;
+
+        if (this._supportsRemoteControl
+            && ((!APP.remoteControl.active && !this._isRemoteControlSessionActive)
+                || APP.remoteControl.controller.activeParticipant === this.id)) {
+            if (controller.getRequestedParticipant() === this.id) {
+                remoteControlState = REMOTE_CONTROL_MENU_STATES.REQUESTING;
+            } else if (controller.isStarted()) {
+                onRemoteControlToggle = this._stopRemoteControl;
+                remoteControlState = REMOTE_CONTROL_MENU_STATES.STARTED;
+            } else {
+                onRemoteControlToggle = this._requestRemoteControlPermissions;
+                remoteControlState = REMOTE_CONTROL_MENU_STATES.NOT_STARTED;
+            }
+        }
+
         const initialVolumeValue = this._audioStreamElement && this._audioStreamElement.volume;
 
         // hide volume when in silent mode
         const onVolumeChange
             = APP.store.getState()['features/base/config'].startSilent ? undefined : this._setAudioVolume;
+        const participantID = this.id;
+        const currentLayout = getCurrentLayout(APP.store.getState());
+        let remoteMenuPosition;
+
+        if (currentLayout === LAYOUTS.TILE_VIEW) {
+            remoteMenuPosition = 'left top';
+        } else if (currentLayout === LAYOUTS.VERTICAL_FILMSTRIP_VIEW) {
+            remoteMenuPosition = 'left bottom';
+        } else {
+            remoteMenuPosition = 'top center';
+        }
 
         ReactDOM.render(
             <Provider store = { APP.store }>
@@ -140,10 +183,13 @@ export default class RemoteVideo extends SmallVideo {
                     <AtlasKitThemeProvider mode = 'dark'>
                         <RemoteVideoMenuTriggerButton
                             initialVolumeValue = { initialVolumeValue }
+                            menuPosition = { remoteMenuPosition }
                             onMenuDisplay
                                 = {this._onRemoteVideoMenuDisplay.bind(this)}
+                            onRemoteControlToggle = { onRemoteControlToggle }
                             onVolumeChange = { onVolumeChange }
-                            participantID = { this.id } />
+                            participantID = { participantID }
+                            remoteControlState = { remoteControlState } />
                     </AtlasKitThemeProvider>
                 </I18nextProvider>
             </Provider>,
@@ -157,6 +203,76 @@ export default class RemoteVideo extends SmallVideo {
         this.updateRemoteVideoMenu();
     }
 
+    /**
+     * Sets the remote control active status for the remote video.
+     *
+     * @param {boolean} isActive - The new remote control active status.
+     * @returns {void}
+     */
+    setRemoteControlActiveStatus(isActive) {
+        this._isRemoteControlSessionActive = isActive;
+        this.updateRemoteVideoMenu();
+    }
+
+    /**
+     * Sets the remote control supported value and initializes or updates the menu
+     * depending on the remote control is supported or not.
+     * @param {boolean} isSupported
+     */
+    setRemoteControlSupport(isSupported = false) {
+        if (this._supportsRemoteControl === isSupported) {
+            return;
+        }
+        this._supportsRemoteControl = isSupported;
+        this.updateRemoteVideoMenu();
+    }
+
+    /**
+     * Requests permissions for remote control session.
+     */
+    _requestRemoteControlPermissions() {
+        APP.remoteControl.controller.requestPermissions(this.id, this.VideoLayout.getLargeVideoWrapper())
+            .then(result => {
+                if (result === null) {
+                    return;
+                }
+                this.updateRemoteVideoMenu();
+                APP.UI.messageHandler.notify(
+                    'dialog.remoteControlTitle',
+                    result === false ? 'dialog.remoteControlDeniedMessage' : 'dialog.remoteControlAllowedMessage',
+                    { user: this.user.getDisplayName() || interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME }
+                );
+                if (result === true) {
+                    // the remote control permissions has been granted
+                    // pin the controlled participant
+                    const pinnedParticipant = getPinnedParticipant(APP.store.getState()) || {};
+                    const pinnedId = pinnedParticipant.id;
+
+                    if (pinnedId !== this.id) {
+                        APP.store.dispatch(pinParticipant(this.id));
+                    }
+                }
+            }, error => {
+                logger.error(error);
+                this.updateRemoteVideoMenu();
+                APP.UI.messageHandler.notify(
+                    'dialog.remoteControlTitle',
+                    'dialog.remoteControlErrorMessage',
+                    { user: this.user.getDisplayName() || interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME }
+                );
+            });
+        this.updateRemoteVideoMenu();
+    }
+
+    /**
+     * Stops remote control session.
+     */
+    _stopRemoteControl() {
+        // send message about stopping
+        APP.remoteControl.controller.stop();
+        this.updateRemoteVideoMenu();
+    }
+
     /**
      * Change the remote participant's volume level.
      *

modules/UI/videolayout/VideoLayout.js

@@ -293,6 +293,7 @@ const VideoLayout = {
         const jitsiParticipant = APP.conference.getParticipantById(id);
         const remoteVideo = new RemoteVideo(jitsiParticipant, VideoLayout);
 
+        this._setRemoteControlProperties(jitsiParticipant, remoteVideo);
         this.addRemoteVideoContainer(id, remoteVideo);
 
         this.updateMutedForNoTracks(id, 'audio');
@@ -653,6 +654,33 @@ const VideoLayout = {
         this.localFlipX = val;
     },
 
+    /**
+     * Handles user's features changes.
+     */
+    onUserFeaturesChanged(user) {
+        const video = this.getSmallVideo(user.getId());
+
+        if (!video) {
+            return;
+        }
+        this._setRemoteControlProperties(user, video);
+    },
+
+    /**
+     * Sets the remote control properties (checks whether remote control
+     * is supported and executes remoteVideo.setRemoteControlSupport).
+     * @param {JitsiParticipant} user the user that will be checked for remote
+     * control support.
+     * @param {RemoteVideo} remoteVideo the remoteVideo on which the properties
+     * will be set.
+     */
+    _setRemoteControlProperties(user, remoteVideo) {
+        APP.remoteControl.checkUserRemoteControlSupport(user)
+            .then(result => remoteVideo.setRemoteControlSupport(result))
+            .catch(error =>
+                logger.warn(`could not get remote control properties for: ${user.getJid()}`, error));
+    },
+
     /**
      * Returns the wrapper jquery selector for the largeVideo
      * @returns {JQuerySelector} the wrapper jquery selector for the largeVideo
@@ -670,6 +698,28 @@ const VideoLayout = {
         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()
+        );
+    },
+
     /**
      * Helper method to invoke when the video layout has changed and elements
      * have to be re-arranged and resized.

modules/keycode/keycode.js

@@ -158,9 +158,8 @@ for (let i = 0; i < 26; i++) {
 
 /**
  * Returns key associated with the keyCode from the passed event.
- *
- * @param {KeyboardEvent} event - The event.
- * @returns {KEYS} - The key on the keyboard.
+ * @param {KeyboardEvent} event the event
+ * @returns {KEYS} the key on the keyboard.
  */
 export function keyboardEventToKey(event) {
     return keyCodeToKey[event.which];

modules/remotecontrol/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+    'extends': '../../react/.eslintrc.js'
+};

modules/remotecontrol/Controller.js

@@ -0,0 +1,474 @@
+/* @flow */
+
+import { getLogger } from 'jitsi-meet-logger';
+
+import {
+    JitsiConferenceEvents
+} from '../../react/features/base/lib-jitsi-meet';
+import UIEvents from '../../service/UI/UIEvents';
+import {
+    EVENTS,
+    PERMISSIONS_ACTIONS,
+    REMOTE_CONTROL_MESSAGE_NAME
+} from '../../service/remotecontrol/Constants';
+import * as RemoteControlEvents
+    from '../../service/remotecontrol/RemoteControlEvents';
+import * as KeyCodes from '../keycode/keycode';
+
+import RemoteControlParticipant from './RemoteControlParticipant';
+
+declare var $: Function;
+declare var APP: Object;
+
+const logger = getLogger(__filename);
+
+/**
+ * Extract the keyboard key from the keyboard event.
+ *
+ * @param {KeyboardEvent} event - The event.
+ * @returns {KEYS} The key that is pressed or undefined.
+ */
+function getKey(event) {
+    return KeyCodes.keyboardEventToKey(event);
+}
+
+/**
+ * Extract the modifiers from the keyboard event.
+ *
+ * @param {KeyboardEvent} event - The event.
+ * @returns {Array} With possible values: "shift", "control", "alt", "command".
+ */
+function getModifiers(event) {
+    const modifiers = [];
+
+    if (event.shiftKey) {
+        modifiers.push('shift');
+    }
+
+    if (event.ctrlKey) {
+        modifiers.push('control');
+    }
+
+
+    if (event.altKey) {
+        modifiers.push('alt');
+    }
+
+    if (event.metaKey) {
+        modifiers.push('command');
+    }
+
+    return modifiers;
+}
+
+/**
+ * This class represents the controller party for a remote controller session.
+ * It listens for mouse and keyboard events and sends them to the receiver
+ * party of the remote control session.
+ */
+export default class Controller extends RemoteControlParticipant {
+    _area: ?Object;
+    _controlledParticipant: string | null;
+    _isCollectingEvents: boolean;
+    _largeVideoChangedListener: Function;
+    _requestedParticipant: string | null;
+    _stopListener: Function;
+    _userLeftListener: Function;
+
+    /**
+     * Creates new instance.
+     */
+    constructor() {
+        super();
+        this._isCollectingEvents = false;
+        this._controlledParticipant = null;
+        this._requestedParticipant = null;
+        this._stopListener = this._handleRemoteControlStoppedEvent.bind(this);
+        this._userLeftListener = this._onUserLeft.bind(this);
+        this._largeVideoChangedListener
+            = 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.
+     *
+     * @param {string} userId - The user id of the participant that will be
+     * requested.
+     * @param {JQuerySelector} eventCaptureArea - The area that is going to be
+     * used mouse and keyboard event capture.
+     * @returns {Promise<boolean>} Resolve values - true(accept), false(deny),
+     * null(the participant has left).
+     */
+    requestPermissions(
+            userId: string,
+            eventCaptureArea: Object
+    ): Promise<boolean | null> {
+        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}`);
+
+        return new Promise((resolve, reject) => {
+            // eslint-disable-next-line prefer-const
+            let onUserLeft, permissionsReplyListener;
+
+            const clearRequest = () => {
+                this._requestedParticipant = null;
+                APP.conference.removeConferenceListener(
+                    JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED,
+                    permissionsReplyListener);
+                APP.conference.removeConferenceListener(
+                    JitsiConferenceEvents.USER_LEFT,
+                    onUserLeft);
+            };
+
+            permissionsReplyListener = (participant, event) => {
+                let result = null;
+
+                try {
+                    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);
+                }
+            };
+
+            APP.conference.addConferenceListener(
+                JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED,
+                permissionsReplyListener);
+            APP.conference.addConferenceListener(
+                JitsiConferenceEvents.USER_LEFT,
+                onUserLeft);
+            this._requestedParticipant = userId;
+            this.sendRemoteControlEndpointMessage(
+                userId,
+                {
+                    type: EVENTS.permissions,
+                    action: PERMISSIONS_ACTIONS.request
+                },
+                e => {
+                    clearRequest();
+                    reject(e);
+                });
+        });
+    }
+
+    /**
+     * Handles the reply of the permissions request.
+     *
+     * @param {JitsiParticipant} participant - The participant that has sent the
+     * reply.
+     * @param {RemoteControlEvent} event - The remote control event.
+     * @returns {boolean|null}
+     */
+    _handleReply(participant: Object, event: Object) {
+        const userId = participant.getId();
+
+        if (this._enabled
+                && event.name === REMOTE_CONTROL_MESSAGE_NAME
+                && event.type === EVENTS.permissions
+                && userId === this._requestedParticipant) {
+            if (event.action !== PERMISSIONS_ACTIONS.grant) {
+                this._area = undefined;
+            }
+            switch (event.action) {
+            case PERMISSIONS_ACTIONS.grant: {
+                this._controlledParticipant = userId;
+                logger.log('Remote control permissions granted to:', userId);
+                this._start();
+
+                return true;
+            }
+            case PERMISSIONS_ACTIONS.deny:
+                return false;
+            case PERMISSIONS_ACTIONS.error:
+                throw new Error('Error occurred on receiver side');
+            default:
+                throw new Error('Unknown reply received!');
+            }
+        } else {
+            // different message type or another user -> ignoring the message
+            return null;
+        }
+    }
+
+    /**
+     * Handles remote control stopped.
+     *
+     * @param {JitsiParticipant} participant - The participant that has sent the
+     * event.
+     * @param {Object} event - EndpointMessage event from the data channels.
+     * @property {string} type - The function process only events with
+     * name REMOTE_CONTROL_MESSAGE_NAME.
+     * @returns {void}
+     */
+    _handleRemoteControlStoppedEvent(participant: Object, event: Object) {
+        if (this._enabled
+                && event.name === REMOTE_CONTROL_MESSAGE_NAME
+                && event.type === EVENTS.stop
+                && participant.getId() === this._controlledParticipant) {
+            this._stop();
+        }
+    }
+
+    /**
+     * Starts processing the mouse and keyboard events. Sets conference
+     * listeners. Disables keyboard events.
+     *
+     * @returns {void}
+     */
+    _start() {
+        logger.log('Starting remote control controller.');
+        APP.UI.addListener(UIEvents.LARGE_VIDEO_ID_CHANGED,
+            this._largeVideoChangedListener);
+        APP.conference.addConferenceListener(
+            JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED,
+            this._stopListener);
+        APP.conference.addConferenceListener(JitsiConferenceEvents.USER_LEFT,
+            this._userLeftListener);
+        this.resume();
+    }
+
+    /**
+     * Disables the keyboatd shortcuts. Starts collecting remote control
+     * events. It can be used to resume an active remote control session wchich
+     * was paused with this.pause().
+     *
+     * @returns {void}
+     */
+    resume() {
+        let area;
+
+        if (!this._enabled
+                || this._isCollectingEvents
+                || !(area = this._area)) {
+            return;
+        }
+        logger.log('Resuming remote control controller.');
+        this._isCollectingEvents = true;
+        APP.keyboardshortcut.enable(false);
+
+        area.mousemove(event => {
+            const area = this._area; // eslint-disable-line no-shadow
+
+            if (!area) {
+                return;
+            }
+
+            const position = area.position();
+
+            this.sendRemoteControlEndpointMessage(this._controlledParticipant, {
+                type: EVENTS.mousemove,
+                x: (event.pageX - position.left) / area.width(),
+                y: (event.pageY - position.top) / area.height()
+            });
+        });
+
+        area.mousedown(this._onMouseClickHandler.bind(this, EVENTS.mousedown));
+        area.mouseup(this._onMouseClickHandler.bind(this, EVENTS.mouseup));
+
+        area.dblclick(
+            this._onMouseClickHandler.bind(this, EVENTS.mousedblclick));
+
+        area.contextmenu(() => false);
+
+        area[0].onmousewheel = event => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.sendRemoteControlEndpointMessage(this._controlledParticipant, {
+                type: EVENTS.mousescroll,
+                x: event.deltaX,
+                y: event.deltaY
+            });
+
+            return false;
+        };
+
+        $(window).keydown(this._onKeyPessHandler.bind(this,
+            EVENTS.keydown));
+        $(window).keyup(this._onKeyPessHandler.bind(this, EVENTS.keyup));
+    }
+
+    /**
+     * Stops processing the mouse and keyboard events. Removes added listeners.
+     * Enables the keyboard shortcuts. Displays dialog to notify the user that
+     * remote control session has ended.
+     *
+     * @returns {void}
+     */
+    _stop() {
+        if (!this._controlledParticipant) {
+            return;
+        }
+        logger.log('Stopping remote control controller.');
+        APP.UI.removeListener(UIEvents.LARGE_VIDEO_ID_CHANGED,
+            this._largeVideoChangedListener);
+        APP.conference.removeConferenceListener(
+            JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED,
+            this._stopListener);
+        APP.conference.removeConferenceListener(JitsiConferenceEvents.USER_LEFT,
+            this._userLeftListener);
+        this.pause();
+        this._controlledParticipant = null;
+        this._area = undefined;
+        this.emit(RemoteControlEvents.ACTIVE_CHANGED, false);
+        APP.UI.messageHandler.notify(
+            'dialog.remoteControlTitle',
+            'dialog.remoteControlStopMessage'
+        );
+    }
+
+    /**
+     * Executes this._stop() mehtod which stops processing the mouse and
+     * keyboard events, removes added listeners, enables the keyboard shortcuts,
+     * displays dialog to notify the user that remote control session has ended.
+     * In addition sends stop message to the controlled participant.
+     *
+     * @returns {void}
+     */
+    stop() {
+        if (!this._controlledParticipant) {
+            return;
+        }
+        this.sendRemoteControlEndpointMessage(this._controlledParticipant, {
+            type: EVENTS.stop
+        });
+        this._stop();
+    }
+
+    /**
+     * Pauses the collecting of events and enables the keyboard shortcus. But
+     * it doesn't removes any other listeners. Basically the remote control
+     * session will be still active after this.pause(), but no events from the
+     * controller side will be captured and sent. You can resume the collecting
+     * of the events with this.resume().
+     *
+     * @returns {void}
+     */
+    pause() {
+        if (!this._controlledParticipant) {
+            return;
+        }
+        logger.log('Pausing remote control controller.');
+        this._isCollectingEvents = false;
+        APP.keyboardshortcut.enable(true);
+
+        const area = this._area;
+
+        if (area) {
+            area.off('contextmenu');
+            area.off('dblclick');
+            area.off('mousedown');
+            area.off('mousemove');
+            area.off('mouseup');
+
+            area[0].onmousewheel = undefined;
+        }
+
+        $(window).off('keydown');
+        $(window).off('keyup');
+    }
+
+    /**
+     * Handler for mouse click events.
+     *
+     * @param {string} type - The type of event ("mousedown"/"mouseup").
+     * @param {Event} event - The mouse event.
+     * @returns {void}
+     */
+    _onMouseClickHandler(type: string, event: Object) {
+        this.sendRemoteControlEndpointMessage(this._controlledParticipant, {
+            type,
+            button: event.which
+        });
+    }
+
+    /**
+     * Returns true if the remote control session is started.
+     *
+     * @returns {boolean}
+     */
+    isStarted() {
+        return this._controlledParticipant !== null;
+    }
+
+    /**
+     * Returns the id of the requested participant.
+     *
+     * @returns {string} The id of the requested participant.
+     * NOTE: This id should be the result of JitsiParticipant.getId() call.
+     */
+    getRequestedParticipant() {
+        return this._requestedParticipant;
+    }
+
+    /**
+     * Handler for key press events.
+     *
+     * @param {string} type - The type of event ("keydown"/"keyup").
+     * @param {Event} event - The key event.
+     * @returns {void}
+     */
+    _onKeyPessHandler(type: string, event: Object) {
+        this.sendRemoteControlEndpointMessage(this._controlledParticipant, {
+            type,
+            key: getKey(event),
+            modifiers: getModifiers(event)
+        });
+    }
+
+    /**
+     * Calls the stop method if the other side have left.
+     *
+     * @param {string} id - The user id for the participant that have left.
+     * @returns {void}
+     */
+    _onUserLeft(id: string) {
+        if (this._controlledParticipant === id) {
+            this._stop();
+        }
+    }
+
+    /**
+     * Handles changes of the participant displayed on the large video.
+     *
+     * @param {string} id - The user id for the participant that is displayed.
+     * @returns {void}
+     */
+    _onLargeVideoIdChanged(id: string) {
+        if (!this._controlledParticipant) {
+            return;
+        }
+        if (this._controlledParticipant === id) {
+            this.resume();
+        } else {
+            this.pause();
+        }
+    }
+}

modules/remotecontrol/Receiver.js

@@ -0,0 +1,331 @@
+/* @flow */
+
+import { getLogger } from 'jitsi-meet-logger';
+
+import * as JitsiMeetConferenceEvents from '../../ConferenceEvents';
+import {
+    JitsiConferenceEvents
+} from '../../react/features/base/lib-jitsi-meet';
+import {
+    openRemoteControlAuthorizationDialog
+} from '../../react/features/remote-control';
+import {
+    DISCO_REMOTE_CONTROL_FEATURE,
+    EVENTS,
+    PERMISSIONS_ACTIONS,
+    REMOTE_CONTROL_MESSAGE_NAME,
+    REQUESTS
+} from '../../service/remotecontrol/Constants';
+import * as RemoteControlEvents
+    from '../../service/remotecontrol/RemoteControlEvents';
+import { Transport, PostMessageTransportBackend } from '../transport';
+
+import RemoteControlParticipant from './RemoteControlParticipant';
+
+declare var APP: Object;
+declare var config: Object;
+declare var interfaceConfig: Object;
+
+const logger = getLogger(__filename);
+
+/**
+ * The transport instance used for communication with external apps.
+ *
+ * @type {Transport}
+ */
+const transport = new Transport({
+    backend: new PostMessageTransportBackend({
+        postisOptions: { scope: 'jitsi-remote-control' }
+    })
+});
+
+/**
+ * This class represents the receiver party for a remote controller session.
+ * It handles "remote-control-event" events and sends them to the
+ * API module. From there the events can be received from wrapper application
+ * and executed.
+ */
+export default class Receiver extends RemoteControlParticipant {
+    _controller: ?string;
+    _enabled: boolean;
+    _hangupListener: Function;
+    _remoteControlEventsListener: Function;
+    _userLeftListener: Function;
+
+    /**
+     * Creates new instance.
+     */
+    constructor() {
+        super();
+        this._controller = null;
+        this._remoteControlEventsListener
+            = this._onRemoteControlMessage.bind(this);
+        this._userLeftListener = this._onUserLeft.bind(this);
+        this._hangupListener = this._onHangup.bind(this);
+
+        // We expect here that even if we receive the supported event earlier
+        // it will be cached and we'll receive it.
+        transport.on('event', event => {
+            if (event.name === REMOTE_CONTROL_MESSAGE_NAME) {
+                this._onRemoteControlAPIEvent(event);
+
+                return true;
+            }
+
+            return false;
+        });
+    }
+
+    /**
+     * Enables / Disables the remote control.
+     *
+     * @param {boolean} enabled - The new state.
+     * @returns {void}
+     */
+    _enable(enabled: boolean) {
+        if (this._enabled === enabled) {
+            return;
+        }
+        this._enabled = enabled;
+        if (enabled === true) {
+            logger.log('Remote control receiver enabled.');
+
+            // Announce remote control support.
+            APP.connection.addFeature(DISCO_REMOTE_CONTROL_FEATURE, true);
+            APP.conference.addConferenceListener(
+                JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED,
+                this._remoteControlEventsListener);
+            APP.conference.addListener(JitsiMeetConferenceEvents.BEFORE_HANGUP,
+                this._hangupListener);
+        } else {
+            logger.log('Remote control receiver disabled.');
+            this._stop(true);
+            APP.connection.removeFeature(DISCO_REMOTE_CONTROL_FEATURE);
+            APP.conference.removeConferenceListener(
+                JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED,
+                this._remoteControlEventsListener);
+            APP.conference.removeListener(
+                JitsiMeetConferenceEvents.BEFORE_HANGUP,
+                this._hangupListener);
+        }
+    }
+
+    /**
+     * Removes the listener for JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED
+     * events. Sends stop message to the wrapper application. Optionally
+     * displays dialog for informing the user that remote control session
+     * ended.
+     *
+     * @param {boolean} [dontNotify] - If true - a notification about stopping
+     * the remote control won't be displayed.
+     * @returns {void}
+     */
+    _stop(dontNotify: boolean = false) {
+        if (!this._controller) {
+            return;
+        }
+        logger.log('Remote control receiver stop.');
+        this._controller = null;
+        APP.conference.removeConferenceListener(
+            JitsiConferenceEvents.USER_LEFT,
+            this._userLeftListener);
+        transport.sendEvent({
+            name: REMOTE_CONTROL_MESSAGE_NAME,
+            type: EVENTS.stop
+        });
+        this.emit(RemoteControlEvents.ACTIVE_CHANGED, false);
+        if (!dontNotify) {
+            APP.UI.messageHandler.notify(
+                'dialog.remoteControlTitle',
+                'dialog.remoteControlStopMessage'
+            );
+        }
+    }
+
+    /**
+     * Calls this._stop() and sends stop message to the controller participant.
+     *
+     * @returns {void}
+     */
+    stop() {
+        if (!this._controller) {
+            return;
+        }
+        this.sendRemoteControlEndpointMessage(this._controller, {
+            type: EVENTS.stop
+        });
+        this._stop();
+    }
+
+    /**
+     * Listens for data channel EndpointMessage. Handles only remote control
+     * messages. Sends the remote control messages to the external app that
+     * will execute them.
+     *
+     * @param {JitsiParticipant} participant - The controller participant.
+     * @param {Object} message - EndpointMessage from the data channels.
+     * @param {string} message.name - The function processes only messages with
+     * name REMOTE_CONTROL_MESSAGE_NAME.
+     * @returns {void}
+     */
+    _onRemoteControlMessage(participant: Object, message: Object) {
+        if (message.name !== REMOTE_CONTROL_MESSAGE_NAME) {
+            return;
+        }
+
+        if (this._enabled) {
+            if (this._controller === null
+                    && message.type === EVENTS.permissions
+                    && 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()) {
+                if (message.type === EVENTS.stop) {
+                    this._stop();
+                } else { // forward the message
+                    transport.sendEvent(message);
+                }
+            } // else ignore
+        } else {
+            logger.log('Remote control message is ignored because remote '
+                + 'control is disabled', message);
+        }
+    }
+
+    /**
+     * Denies remote control access for user associated with the passed user id.
+     *
+     * @param {string} userId - The id associated with the user who sent the
+     * request for remote control authorization.
+     * @returns {void}
+     */
+    deny(userId: string) {
+        this.emit(RemoteControlEvents.ACTIVE_CHANGED, false);
+        this.sendRemoteControlEndpointMessage(userId, {
+            type: EVENTS.permissions,
+            action: PERMISSIONS_ACTIONS.deny
+        });
+    }
+
+    /**
+     * Grants remote control access to user associated with the passed user id.
+     *
+     * @param {string} userId - The id associated with the user who sent the
+     * request for remote control authorization.
+     * @returns {void}
+     */
+    grant(userId: string) {
+        APP.conference.addConferenceListener(JitsiConferenceEvents.USER_LEFT,
+            this._userLeftListener);
+        this._controller = userId;
+        logger.log(`Remote control permissions granted to: ${userId}`);
+
+        let promise;
+
+        if (APP.conference.isSharingScreen
+                && APP.conference.getDesktopSharingSourceType() === 'screen') {
+            promise = this._sendStartRequest();
+        } else {
+            promise = APP.conference.toggleScreenSharing(
+                true,
+                {
+                    desktopSharingSources: [ 'screen' ]
+                })
+                .then(() => this._sendStartRequest());
+        }
+
+        promise
+            .then(() =>
+                this.sendRemoteControlEndpointMessage(userId, {
+                    type: EVENTS.permissions,
+                    action: PERMISSIONS_ACTIONS.grant
+                })
+            )
+            .catch(error => {
+                logger.error(error);
+
+                this.sendRemoteControlEndpointMessage(userId, {
+                    type: EVENTS.permissions,
+                    action: PERMISSIONS_ACTIONS.error
+                });
+
+                APP.UI.messageHandler.notify(
+                    'dialog.remoteControlTitle',
+                    'dialog.startRemoteControlErrorMessage'
+                );
+
+                this._stop(true);
+            });
+    }
+
+    /**
+     * Sends remote control start request.
+     *
+     * @returns {Promise}
+     */
+    _sendStartRequest() {
+        return transport.sendRequest({
+            name: REMOTE_CONTROL_MESSAGE_NAME,
+            type: REQUESTS.start,
+            sourceId: APP.conference.getDesktopSharingSourceId()
+        });
+    }
+
+    /**
+     * Handles remote control events from the external app. Currently only
+     * events with type EVENTS.supported and EVENTS.stop are
+     * supported.
+     *
+     * @param {RemoteControlEvent} event - The remote control event.
+     * @returns {void}
+     */
+    _onRemoteControlAPIEvent(event: Object) {
+        switch (event.type) {
+        case EVENTS.supported:
+            this._onRemoteControlSupported();
+            break;
+        case EVENTS.stop:
+            this.stop();
+            break;
+        }
+    }
+
+    /**
+     * Handles events for support for executing remote control events into
+     * the wrapper application.
+     *
+     * @returns {void}
+     */
+    _onRemoteControlSupported() {
+        logger.log('Remote Control supported.');
+        if (config.disableRemoteControl) {
+            logger.log('Remote Control disabled.');
+        } else {
+            this._enable(true);
+        }
+    }
+
+    /**
+     * Calls the stop method if the other side have left.
+     *
+     * @param {string} id - The user id for the participant that have left.
+     * @returns {void}
+     */
+    _onUserLeft(id: string) {
+        if (this._controller === id) {
+            this._stop();
+        }
+    }
+
+    /**
+     * Handles hangup events. Disables the receiver.
+     *
+     * @returns {void}
+     */
+    _onHangup() {
+        this._enable(false);
+    }
+}

modules/remotecontrol/RemoteControl.js

@@ -0,0 +1,98 @@
+/* @flow */
+
+import EventEmitter from 'events';
+import { getLogger } from 'jitsi-meet-logger';
+
+import JitsiMeetJS from '../../react/features/base/lib-jitsi-meet';
+import { DISCO_REMOTE_CONTROL_FEATURE }
+    from '../../service/remotecontrol/Constants';
+import * as RemoteControlEvents
+    from '../../service/remotecontrol/RemoteControlEvents';
+
+import Controller from './Controller';
+import Receiver from './Receiver';
+
+const logger = getLogger(__filename);
+
+declare var APP: Object;
+declare var config: Object;
+
+/**
+ * Implements the remote control functionality.
+ */
+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;
+    }
+
+    /**
+     * Initializes the remote control - checks if the remote control should be
+     * enabled or not.
+     *
+     * @returns {void}
+     */
+    init() {
+        if (config.disableRemoteControl || this._initialized || !JitsiMeetJS.isDesktopSharingEnabled()) {
+            return;
+        }
+        logger.log('Initializing remote control.');
+        this._initialized = true;
+        this.controller.enable(true);
+        this.receiver = new Receiver();
+
+        this.receiver.on(RemoteControlEvents.ACTIVE_CHANGED, active => {
+            this.active = active;
+        });
+    }
+
+    /**
+     * Checks whether the passed user supports remote control or not.
+     *
+     * @param {JitsiParticipant} user - The user to be tested.
+     * @returns {Promise<boolean>} The promise will be resolved with true if
+     * the user supports remote control and with false if not.
+     */
+    checkUserRemoteControlSupport(user: Object) {
+        return user.getFeatures()
+            .then(features => features.has(DISCO_REMOTE_CONTROL_FEATURE));
+    }
+}
+
+export default new RemoteControl();

modules/remotecontrol/RemoteControlParticipant.js

@@ -0,0 +1,72 @@
+/* @flow */
+
+import EventEmitter from 'events';
+import { getLogger } from 'jitsi-meet-logger';
+
+import {
+    REMOTE_CONTROL_MESSAGE_NAME
+} from '../../service/remotecontrol/Constants';
+
+const logger = getLogger(__filename);
+
+declare var APP: Object;
+
+/**
+ * Implements common logic for Receiver class and Controller class.
+ */
+export default class RemoteControlParticipant extends EventEmitter {
+    _enabled: boolean;
+
+    /**
+     * Creates new instance.
+     */
+    constructor() {
+        super();
+        this._enabled = false;
+    }
+
+    /**
+     * Enables / Disables the remote control.
+     *
+     * @param {boolean} enabled - The new state.
+     * @returns {void}
+     */
+    enable(enabled: boolean) {
+        this._enabled = enabled;
+    }
+
+    /**
+     * Sends remote control message to other participant trough data channel.
+     *
+     * @param {string} to - The participant who will receive the event.
+     * @param {RemoteControlEvent} event - The remote control event.
+     * @param {Function} onDataChannelFail - Handler for data channel failure.
+     * @returns {void}
+     */
+    sendRemoteControlEndpointMessage(
+            to: ?string,
+            event: Object,
+            onDataChannelFail: ?Function) {
+        if (!this._enabled || !to) {
+            logger.warn(
+                'Remote control: Skip sending remote control event. Params:',
+                this.enable,
+                to);
+
+            return;
+        }
+        try {
+            APP.conference.sendEndpointMessage(to, {
+                name: REMOTE_CONTROL_MESSAGE_NAME,
+                ...event
+            });
+        } catch (e) {
+            logger.error(
+                'Failed to send EndpointMessage via the datachannels',
+                e);
+            if (typeof onDataChannelFail === 'function') {
+                onDataChannelFail(e);
+            }
+        }
+    }
+}

package-lock.json

@@ -3302,9 +3302,9 @@
       }
     },
     "@jitsi/js-utils": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@jitsi/js-utils/-/js-utils-1.0.2.tgz",
-      "integrity": "sha512-ls+X9tn9EemUQwPEBr7Z0UD4sjRtwcu1Bh4MUo0Hv4arp0KVzcCYCW+mofsvuZvHg8xJX12LLNVgUKi1X5XTGg==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@jitsi/js-utils/-/js-utils-1.0.3.tgz",
+      "integrity": "sha512-m6mZz7R716mHP21lTKQffyM0nNFu3Fe/EHCaOVLFY/vdPsaUl9DhypJqtPIYzRUfPnmnugdaxcxrUeSZQXQzVA==",
       "requires": {
         "bowser": "2.7.0",
         "js-md5": "0.7.3"
@@ -10792,6 +10792,20 @@
         "webrtc-adapter": "7.5.0"
       },
       "dependencies": {
+        "@jitsi/js-utils": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@jitsi/js-utils/-/js-utils-1.0.2.tgz",
+          "integrity": "sha512-ls+X9tn9EemUQwPEBr7Z0UD4sjRtwcu1Bh4MUo0Hv4arp0KVzcCYCW+mofsvuZvHg8xJX12LLNVgUKi1X5XTGg==",
+          "requires": {
+            "bowser": "2.7.0",
+            "js-md5": "0.7.3"
+          }
+        },
+        "js-md5": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.7.3.tgz",
+          "integrity": "sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ=="
+        },
         "uuid": {
           "version": "8.1.0",
           "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.1.0.tgz",

package.json

@@ -32,7 +32,7 @@
     "@atlaskit/theme": "7.0.2",
     "@atlaskit/toggle": "5.0.14",
     "@atlaskit/tooltip": "12.1.13",
-    "@jitsi/js-utils": "1.0.2",
+    "@jitsi/js-utils": "1.0.3",
     "@microsoft/microsoft-graph-client": "1.1.0",
     "@react-native-community/async-storage": "1.3.4",
     "@react-native-community/google-signin": "3.0.1",

react/features/app/middlewares.any.js

@@ -37,7 +37,6 @@ import '../overlay/middleware';
 import '../recent-list/middleware';
 import '../recording/middleware';
 import '../rejoin/middleware';
-import '../remote-control/middleware';
 import '../room-lock/middleware';
 import '../rtcstats/middleware';
 import '../subtitles/middleware';

react/features/app/reducers.any.js

@@ -43,7 +43,6 @@ import '../notifications/reducer';
 import '../overlay/reducer';
 import '../recent-list/reducer';
 import '../recording/reducer';
-import '../remote-control/reducer';
 import '../settings/reducer';
 import '../subtitles/reducer';
 import '../toolbox/reducer';

react/features/base/connection/functions.js

@@ -59,7 +59,7 @@ export function getInviteURL(stateOrGetState: Function | Object): string {
 
     if (inviteDomain) {
         const meetingId
-            = state['features/base/config'].brandingRoomAlias || urlWithoutParams.pathname.replace('/', '');
+            = state['features/base/config'].brandingRoomAlias || urlWithoutParams.pathname.replace(/\//, '');
 
         return `${inviteDomain}/${meetingId}`;
     }

react/features/base/lastn/middleware.js

@@ -68,14 +68,13 @@ function _updateLastN({ getState }) {
         return;
     }
 
-    const defaultLastN = typeof config.channelLastN === 'undefined' ? -1 : config.channelLastN;
-    let lastN = defaultLastN;
+    let lastN = typeof config.channelLastN === 'undefined' ? -1 : config.channelLastN;
 
-    // Apply last N limit based on the # of participants
+    // Apply last N limit based on the # of participants and channelLastN settings.
     const limitedLastN = limitLastN(participantCount, lastNLimits);
 
     if (limitedLastN !== undefined) {
-        lastN = limitedLastN;
+        lastN = lastN === -1 ? limitedLastN : Math.min(limitedLastN, lastN);
     }
 
     if (typeof appState !== 'undefined' && appState !== 'active') {

react/features/base/participants/actions.js

@@ -16,15 +16,12 @@ import {
     PIN_PARTICIPANT,
     SET_LOADABLE_AVATAR_URL
 } from './actionTypes';
-import { DISCO_REMOTE_CONTROL_FEATURE } from './constants';
 import {
     getLocalParticipant,
     getNormalizedDisplayName,
     getParticipantDisplayName,
-    figureOutMutedWhileDisconnectedStatus,
-    getParticipantById
+    figureOutMutedWhileDisconnectedStatus
 } from './functions';
-import logger from './logger';
 
 /**
  * Create an action for when dominant speaker changes.
@@ -279,48 +276,6 @@ export function participantJoined(participant) {
     };
 }
 
-/**
- * Updates the features of a remote participant.
- *
- * @param {JitsiParticipant} jitsiParticipant - The ID of the participant.
- * @returns {{
-*     type: PARTICIPANT_UPDATED,
-*     participant: Participant
-* }}
-*/
-export function updateRemoteParticipantFeatures(jitsiParticipant) {
-    return (dispatch, getState) => {
-        if (!jitsiParticipant) {
-            return;
-        }
-
-        const id = jitsiParticipant.getId();
-
-        jitsiParticipant.getFeatures()
-            .then(features => {
-                const supportsRemoteControl = features.has(DISCO_REMOTE_CONTROL_FEATURE);
-                const participant = getParticipantById(getState(), id);
-
-                if (!participant || participant.local) {
-                    return;
-                }
-
-                if (participant?.supportsRemoteControl !== supportsRemoteControl) {
-                    return dispatch({
-                        type: PARTICIPANT_UPDATED,
-                        participant: {
-                            id,
-                            supportsRemoteControl
-                        }
-                    });
-                }
-            })
-            .catch(error => {
-                logger.error(`Failed to get participant features for ${id}!`, error);
-            });
-    };
-}
-
 /**
  * Action to signal that a hidden participant has joined the conference.
  *
@@ -544,4 +499,3 @@ export function setLoadableAvatarUrl(participantId, url) {
         }
     };
 }
-

react/features/base/participants/constants.js

@@ -17,11 +17,6 @@ import { IconPhone } from '../icons';
  */
 export const DEFAULT_AVATAR_RELATIVE_PATH = 'images/avatar.png';
 
-/**
- * The value for the "var" attribute of feature tag in disco-info packets.
- */
-export const DISCO_REMOTE_CONTROL_FEATURE = 'http://jitsi.org/meet/remotecontrol';
-
 /**
  * Icon URL for jigasi participants.
  *

react/features/base/participants/functions.js

@@ -1,6 +1,7 @@
 // @flow
 
 import { getGravatarURL } from '@jitsi/js-utils/avatar';
+import type { Store } from 'redux';
 
 import { JitsiParticipantConnectionStatus } from '../lib-jitsi-meet';
 import { MEDIA_TYPE, shouldRenderVideoTrack } from '../media';
@@ -23,30 +24,39 @@ declare var interfaceConfig: Object;
  */
 const AVATAR_QUEUE = [];
 const AVATAR_CHECKED_URLS = new Map();
-/* eslint-disable arrow-body-style */
+/* eslint-disable arrow-body-style, no-unused-vars */
 const AVATAR_CHECKER_FUNCTIONS = [
-    participant => {
+    (participant, _) => {
         return participant && participant.isJigasi ? JIGASI_PARTICIPANT_ICON : null;
     },
-    participant => {
+    (participant, _) => {
         return participant && participant.avatarURL ? participant.avatarURL : null;
     },
-    participant => {
-        return participant && participant.email ? getGravatarURL(participant.email) : null;
+    (participant, store) => {
+        if (participant && participant.email) {
+            // TODO: remove once libravatar has deployed their new scaled up infra. -saghul
+            const gravatarBaseURL
+                = store.getState()['features/base/config'].gravatarBaseURL ?? 'https://www.gravatar.com/avatar/';
+
+            return getGravatarURL(participant.email, gravatarBaseURL);
+        }
+
+        return null;
     }
 ];
-/* eslint-enable arrow-body-style */
+/* eslint-enable arrow-body-style, no-unused-vars */
 
 /**
  * Resolves the first loadable avatar URL for a participant.
  *
  * @param {Object} participant - The participant to resolve avatars for.
+ * @param {Store} store - Redux store.
  * @returns {Promise}
  */
-export function getFirstLoadableAvatarUrl(participant: Object) {
+export function getFirstLoadableAvatarUrl(participant: Object, store: Store<any, any>) {
     const deferred = createDeferred();
     const fullPromise = deferred.promise
-        .then(() => _getFirstLoadableAvatarUrl(participant))
+        .then(() => _getFirstLoadableAvatarUrl(participant, store))
         .then(src => {
 
             if (AVATAR_QUEUE.length) {
@@ -402,11 +412,12 @@ export function figureOutMutedWhileDisconnectedStatus(
  * Resolves the first loadable avatar URL for a participant.
  *
  * @param {Object} participant - The participant to resolve avatars for.
+ * @param {Store} store - Redux store.
  * @returns {?string}
  */
-async function _getFirstLoadableAvatarUrl(participant) {
+async function _getFirstLoadableAvatarUrl(participant, store) {
     for (let i = 0; i < AVATAR_CHECKER_FUNCTIONS.length; i++) {
-        const url = AVATAR_CHECKER_FUNCTIONS[i](participant);
+        const url = AVATAR_CHECKER_FUNCTIONS[i](participant, store);
 
         if (url) {
             if (AVATAR_CHECKED_URLS.has(url)) {

react/features/base/participants/logger.js

@@ -1,5 +0,0 @@
-// @flow
-
-import { getLogger } from '../logging/functions';
-
-export default getLogger('features/base/participants');

react/features/base/participants/middleware.js

@@ -237,13 +237,6 @@ StateListenerRegistry.register(
                         _raiseHandUpdated(store, conference, participant.getId(), newValue);
                         break;
                     }
-                    case 'remoteControlSessionStatus':
-                        store.dispatch(participantUpdated({
-                            conference,
-                            id: participant.getId(),
-                            remoteControlSessionStatus: newValue
-                        }));
-                        break;
                     default:
 
                         // Ignore for now.
@@ -372,7 +365,8 @@ function _maybePlaySounds({ getState, dispatch }, action) {
  * @private
  * @returns {Object} The value returned by {@code next(action)}.
  */
-function _participantJoinedOrUpdated({ dispatch, getState }, next, action) {
+function _participantJoinedOrUpdated(store, next, action) {
+    const { dispatch, getState } = store;
     const { participant: { avatarURL, e2eeEnabled, email, id, local, name, raisedHand } } = action;
 
     // Send an external update of the local participant's raised hand state
@@ -408,7 +402,7 @@ function _participantJoinedOrUpdated({ dispatch, getState }, next, action) {
         const participantId = !id && local ? getLocalParticipant(getState()).id : id;
         const updatedParticipant = getParticipantById(getState(), participantId);
 
-        getFirstLoadableAvatarUrl(updatedParticipant)
+        getFirstLoadableAvatarUrl(updatedParticipant, store)
             .then(url => {
                 dispatch(setLoadableAvatarUrl(participantId, url));
             });

react/features/connection-indicator/components/web/ConnectionIndicator.js

@@ -84,6 +84,12 @@ type Props = AbstractProps & {
      */
     dispatch: Dispatch<any>,
 
+    /**
+     * Whether or not should display the "Save Logs" link in the local video
+     * stats table.
+     */
+    enableSaveLogs: boolean,
+
     /**
      * Whether or not clicking the indicator should display a popover for more
      * details.
@@ -386,6 +392,7 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
                 codec = { codec }
                 connectionSummary = { this._getConnectionStatusTip() }
                 e2eRtt = { e2eRtt }
+                enableSaveLogs = { this.props.enableSaveLogs }
                 framerate = { framerate }
                 isLocalVideo = { this.props.isLocalVideo }
                 maxEnabledResolution = { maxEnabledResolution }
@@ -440,7 +447,8 @@ export function _mapStateToProps(state: Object, ownProps: Props) {
     const participant
         = typeof participantId === 'undefined' ? getLocalParticipant(state) : getParticipantById(state, participantId);
     const props = {
-        _connectionStatus: participant?.connectionStatus
+        _connectionStatus: participant?.connectionStatus,
+        enableSaveLogs: state['features/base/config'].enableSaveLogs
     };
 
     if (conference) {

react/features/connection-stats/components/ConnectionStatsTable.js

@@ -54,6 +54,11 @@ type Props = {
      */
     e2eRtt: number,
 
+    /**
+     * Whether or not should display the "Save Logs" link.
+     */
+    enableSaveLogs: boolean,
+
     /**
      * The endpoint id of this client.
      */
@@ -153,13 +158,13 @@ class ConnectionStatsTable extends Component<Props> {
      * @returns {ReactElement}
      */
     render() {
-        const { isLocalVideo } = this.props;
+        const { isLocalVideo, enableSaveLogs } = this.props;
 
         return (
             <div className = 'connection-info'>
                 { this._renderStatistics() }
                 <div className = 'connection-actions'>
-                    { isLocalVideo ? this._renderSaveLogs() : null}
+                    { isLocalVideo && enableSaveLogs ? this._renderSaveLogs() : null}
                     { this._renderShowMoreLink() }
                 </div>
                 { this.props.shouldShowMore ? this._renderAdditionalStats() : null }

react/features/large-video/actions.any.js

@@ -61,8 +61,20 @@ export function selectParticipantInLargeVideo(participant: ?string) {
         const state = getState();
         const participantId = participant ?? _electParticipantInLargeVideo(state);
         const largeVideo = state['features/large-video'];
+        const screenShares = state['features/video-layout'].screenShares;
+        let latestScreenshareParticipantId;
 
-        if (participantId !== largeVideo.participantId) {
+        if (screenShares && screenShares.length) {
+            latestScreenshareParticipantId = screenShares[screenShares.length - 1];
+        }
+
+        // When trying to auto pin screenshare, always select the endpoint even though it happens to be
+        // the large video participant in redux (for the reasons listed above in the large video selection
+        // logic above). The auto pin screenshare logic kicks in after the track is added
+        // (which updates the large video participant and selects all endpoints because of the auto tile
+        // view mode). If the screenshare endpoint is not among the forwarded endpoints from the bridge,
+        // it needs to be selected again at this point.
+        if (participantId !== largeVideo.participantId || participantId === latestScreenshareParticipantId) {
             dispatch({
                 type: SELECT_LARGE_VIDEO_PARTICIPANT,
                 participantId

react/features/lobby/middleware.js

@@ -144,12 +144,13 @@ function _conferenceJoined({ dispatch }, next, action) {
  * @param {Object} participant - The knocking participant.
  * @returns {void}
  */
-function _findLoadableAvatarForKnockingParticipant({ dispatch, getState }, { id }) {
+function _findLoadableAvatarForKnockingParticipant(store, { id }) {
+    const { dispatch, getState } = store;
     const updatedParticipant = getState()['features/lobby'].knockingParticipants.find(p => p.id === id);
     const { disableThirdPartyRequests } = getState()['features/base/config'];
 
     if (!disableThirdPartyRequests && updatedParticipant && !updatedParticipant.loadableAvatarUrl) {
-        getFirstLoadableAvatarUrl(updatedParticipant).then(loadableAvatarUrl => {
+        getFirstLoadableAvatarUrl(updatedParticipant, store).then(loadableAvatarUrl => {
             if (loadableAvatarUrl) {
                 dispatch(participantIsKnockingOrUpdated({
                     loadableAvatarUrl,

react/features/remote-control/actionTypes.js

@@ -1,70 +0,0 @@
-// @flow
-
-/**
- * The type of (redux) action which signals that the controller is capturing mouse and keyboard events.
- *
- * {
- *     type: CAPTURE_EVENTS,
- *     isCapturingEvents: boolean
- * }
- */
-export const CAPTURE_EVENTS = 'CAPTURE_EVENTS';
-
-/**
- * The type of (redux) action which signals that a remote control active state has changed.
- *
- * {
- *     type: REMOTE_CONTROL_ACTIVE,
- *     active: boolean
- * }
- */
-export const REMOTE_CONTROL_ACTIVE = 'REMOTE_CONTROL_ACTIVE';
-
-/**
- * The type of (redux) action which sets the receiver transport object.
- *
- * {
- *     type: SET_RECEIVER_TRANSPORT,
- *     transport: Transport
- * }
- */
-export const SET_RECEIVER_TRANSPORT = 'SET_RECEIVER_TRANSPORT';
-
-/**
- * The type of (redux) action which enables the receiver.
- *
- * {
- *     type: SET_RECEIVER_ENABLED,
- *     enabled: boolean
- * }
- */
-export const SET_RECEIVER_ENABLED = 'SET_RECEIVER_ENABLED';
-
-/**
- * The type of (redux) action which sets the controller participant on the receiver side.
- * {
- *     type: SET_CONTROLLER,
- *     controller: string
- * }
- */
-export const SET_CONTROLLER = 'SET_CONTROLLER';
-
-/**
- * The type of (redux) action which sets the controlled participant on the controller side.
- * {
- *     type: SET_CONTROLLED_PARTICIPANT,
- *     controlled: string
- * }
- */
-export const SET_CONTROLLED_PARTICIPANT = 'SET_CONTROLLED_PARTICIPANT';
-
-
-/**
- * The type of (redux) action which sets the requested participant on the controller side.
- * {
- *     type: SET_REQUESTED_PARTICIPANT,
- *     requestedParticipant: string
- * }
- */
-export const SET_REQUESTED_PARTICIPANT = 'SET_REQUESTED_PARTICIPANT';
-

react/features/remote-control/actions.js

@@ -1,44 +1,6 @@
-// @flow
-
 import { openDialog } from '../base/dialog';
-import { JitsiConferenceEvents } from '../base/lib-jitsi-meet';
-import { getParticipantDisplayName, getPinnedParticipant, pinParticipant } from '../base/participants';
-import { getLocalVideoTrack } from '../base/tracks';
-import { showNotification } from '../notifications';
 
-import {
-    CAPTURE_EVENTS,
-    REMOTE_CONTROL_ACTIVE,
-    SET_REQUESTED_PARTICIPANT,
-    SET_CONTROLLER,
-    SET_RECEIVER_ENABLED,
-    SET_RECEIVER_TRANSPORT,
-    SET_CONTROLLED_PARTICIPANT
-} from './actionTypes';
 import { RemoteControlAuthorizationDialog } from './components';
-import {
-    DISCO_REMOTE_CONTROL_FEATURE,
-    EVENTS,
-    REMOTE_CONTROL_MESSAGE_NAME,
-    PERMISSIONS_ACTIONS,
-    REQUESTS
-} from './constants';
-import {
-    getKey,
-    getModifiers,
-    getRemoteConrolEventCaptureArea,
-    isRemoteControlEnabled,
-    sendRemoteControlEndpointMessage
-} from './functions';
-import logger from './logger';
-
-/**
- * Listeners.
- */
-let permissionsReplyListener, receiverEndpointMessageListener, stopListener;
-
-declare var APP: Object;
-declare var $: Function;
 
 /**
  * Signals that the remote control authorization dialog should be displayed.
@@ -54,700 +16,6 @@ declare var $: Function;
  * }}
  * @public
  */
-export function openRemoteControlAuthorizationDialog(participantId: string) {
+export function openRemoteControlAuthorizationDialog(participantId) {
     return openDialog(RemoteControlAuthorizationDialog, { participantId });
 }
-
-/**
- * Sets the remote control active property.
- *
- * @param {boolean} active - The new value for the active property.
- * @returns {Function}
- */
-export function setRemoteControlActive(active: boolean) {
-    return (dispatch: Function, getState: Function) => {
-        const state = getState();
-        const { active: oldActive } = state['features/remote-control'];
-        const { conference } = state['features/base/conference'];
-
-        if (active !== oldActive) {
-            dispatch({
-                type: REMOTE_CONTROL_ACTIVE,
-                active
-            });
-            conference.setLocalParticipantProperty('remoteControlSessionStatus', active);
-        }
-    };
-}
-
-/**
- * Requests permissions from the remote control receiver side.
- *
- * @param {string} userId - The user id of the participant that will be
- * requested.
- * @returns {Function}
- */
-export function requestRemoteControl(userId: string) {
-    return (dispatch: Function, getState: Function) => {
-        const state = getState();
-        const enabled = isRemoteControlEnabled(state);
-
-        if (!enabled) {
-            return Promise.reject(new Error('Remote control is disabled!'));
-        }
-
-        dispatch(setRemoteControlActive(true));
-
-        logger.log(`Requsting remote control permissions from: ${userId}`);
-
-        const { conference } = state['features/base/conference'];
-
-
-        permissionsReplyListener = (participant, event) => {
-            dispatch(processPermissionRequestReply(participant.getId(), event));
-        };
-
-        conference.on(JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED, permissionsReplyListener);
-
-        dispatch({
-            type: SET_REQUESTED_PARTICIPANT,
-            requestedParticipant: userId
-        });
-
-        if (!sendRemoteControlEndpointMessage(
-            conference,
-            userId,
-            {
-                type: EVENTS.permissions,
-                action: PERMISSIONS_ACTIONS.request
-            })) {
-            dispatch(clearRequest());
-        }
-    };
-}
-
-/**
- * Handles permission request replies on the controller side.
- *
- * @param {string} participantId - The participant that sent the request.
- * @param {EndpointMessage} event - The permission request event.
- * @returns {Function}
- */
-export function processPermissionRequestReply(participantId: string, event: Object) {
-    return (dispatch: Function, getState: Function) => {
-        const state = getState();
-        const { action, name, type } = event;
-        const { requestedParticipant } = state['features/remote-control'].controller;
-
-        if (isRemoteControlEnabled(state) && name === REMOTE_CONTROL_MESSAGE_NAME && type === EVENTS.permissions
-                && participantId === requestedParticipant) {
-            let descriptionKey, permissionGranted = false;
-
-            switch (action) {
-            case PERMISSIONS_ACTIONS.grant: {
-                dispatch({
-                    type: SET_CONTROLLED_PARTICIPANT,
-                    controlled: participantId
-                });
-
-                logger.log('Remote control permissions granted!', participantId);
-                logger.log('Starting remote control controller.');
-
-                const { conference } = state['features/base/conference'];
-
-                stopListener = (participant, stopEvent) => {
-                    dispatch(handleRemoteControlStoppedEvent(participant.getId(), stopEvent));
-                };
-
-                conference.on(JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED, stopListener);
-
-                dispatch(resume());
-
-                permissionGranted = true;
-                descriptionKey = 'dialog.remoteControlAllowedMessage';
-                break;
-            }
-            case PERMISSIONS_ACTIONS.deny:
-                logger.log('Remote control permissions denied!', participantId);
-                descriptionKey = 'dialog.remoteControlDeniedMessage';
-                break;
-            case PERMISSIONS_ACTIONS.error:
-                logger.error('Error occurred on receiver side');
-                descriptionKey = 'dialog.remoteControlErrorMessage';
-                break;
-            default:
-                logger.error('Unknown reply received!');
-                descriptionKey = 'dialog.remoteControlErrorMessage';
-            }
-
-            dispatch(clearRequest());
-
-            if (!permissionGranted) {
-                dispatch(setRemoteControlActive(false));
-            }
-
-            dispatch(showNotification({
-                descriptionArguments: { user: getParticipantDisplayName(state, participantId) },
-                descriptionKey,
-                titleKey: 'dialog.remoteControlTitle'
-            }));
-
-            if (permissionGranted) {
-                // the remote control permissions has been granted
-                // pin the controlled participant
-                const pinnedParticipant = getPinnedParticipant(state);
-                const pinnedId = pinnedParticipant?.id;
-
-                if (pinnedId !== participantId) {
-                    dispatch(pinParticipant(participantId));
-                }
-            }
-        } else {
-            // different message type or another user -> ignoring the message
-        }
-    };
-}
-
-/**
- * Handles remote control stopped.
- *
- * @param {string} participantId - The ID of the participant that has sent the event.
- * @param {EndpointMessage} event - EndpointMessage event from the data channels.
- * @property {string} type - The function process only events with name REMOTE_CONTROL_MESSAGE_NAME.
- * @returns {void}
- */
-export function handleRemoteControlStoppedEvent(participantId: Object, event: Object) {
-    return (dispatch: Function, getState: Function) => {
-        const state = getState();
-        const { name, type } = event;
-        const { controlled } = state['features/remote-control'].controller;
-
-        if (isRemoteControlEnabled(state) && name === REMOTE_CONTROL_MESSAGE_NAME && type === EVENTS.stop
-                && participantId === controlled) {
-            dispatch(stopController());
-        }
-    };
-}
-
-/**
- * Stops processing the mouse and keyboard events. Removes added listeners.
- * Enables the keyboard shortcuts. Displays dialog to notify the user that remote control session has ended.
- *
- * @param {boolean} notifyRemoteParty - If true a endpoint message to the controlled participant will be sent.
- * @returns {void}
- */
-export function stopController(notifyRemoteParty: boolean = false) {
-    return (dispatch: Function, getState: Function) => {
-        const state = getState();
-        const { controlled } = state['features/remote-control'].controller;
-
-        if (!controlled) {
-            return;
-        }
-
-        const { conference } = state['features/base/conference'];
-
-        if (notifyRemoteParty) {
-            sendRemoteControlEndpointMessage(conference, controlled, {
-                type: EVENTS.stop
-            });
-        }
-
-        logger.log('Stopping remote control controller.');
-
-        conference.off(JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED, stopListener);
-        stopListener = undefined;
-
-        dispatch(pause());
-
-        dispatch({
-            type: SET_CONTROLLED_PARTICIPANT,
-            controlled: undefined
-        });
-
-        dispatch(setRemoteControlActive(false));
-        dispatch(showNotification({
-            descriptionKey: 'dialog.remoteControlStopMessage',
-            titleKey: 'dialog.remoteControlTitle'
-        }));
-    };
-}
-
-/**
- * Clears a pending permission request.
- *
- * @returns {Function}
- */
-export function clearRequest() {
-    return (dispatch: Function, getState: Function) => {
-        const { conference } = getState()['features/base/conference'];
-
-        dispatch({
-            type: SET_REQUESTED_PARTICIPANT,
-            requestedParticipant: undefined
-        });
-
-        conference.off(JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED, permissionsReplyListener);
-        permissionsReplyListener = undefined;
-    };
-}
-
-
-/**
- * Sets that trasnport object that is used by the receiver to communicate with the native part of the remote control
- * implementation.
- *
- * @param {Transport} transport - The transport to be set.
- * @returns {{
- *      type: SET_RECEIVER_TRANSPORT,
- *      transport: Transport
- * }}
- */
-export function setReceiverTransport(transport: Object) {
-    return {
-        type: SET_RECEIVER_TRANSPORT,
-        transport
-    };
-}
-
-/**
- * Enables the receiver functionality.
- *
- * @returns {Function}
- */
-export function enableReceiver() {
-    return (dispatch: Function, getState: Function) => {
-        const state = getState();
-        const { enabled } = state['features/remote-control'].receiver;
-
-        if (enabled) {
-            return;
-        }
-
-        const { connection } = state['features/base/connection'];
-        const { conference } = state['features/base/conference'];
-
-        if (!connection || !conference) {
-            logger.error('Couldn\'t enable the remote receiver! The connection or conference instance is undefined!');
-
-            return;
-        }
-
-        dispatch({
-            type: SET_RECEIVER_ENABLED,
-            enabled: true
-        });
-
-        connection.addFeature(DISCO_REMOTE_CONTROL_FEATURE, true);
-        receiverEndpointMessageListener = (participant, message) => {
-            dispatch(endpointMessageReceived(participant.getId(), message));
-        };
-        conference.on(JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED, receiverEndpointMessageListener);
-    };
-}
-
-/**
- * Disables the receiver functionality.
- *
- * @returns {Function}
- */
-export function disableReceiver() {
-    return (dispatch: Function, getState: Function) => {
-        const state = getState();
-        const { enabled } = state['features/remote-control'].receiver;
-
-        if (!enabled) {
-            return;
-        }
-
-        const { connection } = state['features/base/connection'];
-        const { conference } = state['features/base/conference'];
-
-        if (!connection || !conference) {
-            logger.error('Couldn\'t enable the remote receiver! The connection or conference instance is undefined!');
-
-            return;
-        }
-
-        logger.log('Remote control receiver disabled.');
-
-        dispatch({
-            type: SET_RECEIVER_ENABLED,
-            enabled: false
-        });
-
-        dispatch(stopReceiver(true));
-
-        connection.removeFeature(DISCO_REMOTE_CONTROL_FEATURE);
-        conference.off(JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED, receiverEndpointMessageListener);
-    };
-}
-
-/**
- * Stops a remote control session on the receiver side.
- *
- * @param {boolean} [dontNotifyLocalParty] - If true - a notification about stopping
- * the remote control won't be displayed.
- * @param {boolean} [dontNotifyRemoteParty] - If true a endpoint message to the controller participant will be sent.
- * @returns {Function}
- */
-export function stopReceiver(dontNotifyLocalParty: boolean = false, dontNotifyRemoteParty: boolean = false) {
-    return (dispatch: Function, getState: Function) => {
-        const state = getState();
-        const { receiver } = state['features/remote-control'];
-        const { controller, transport } = receiver;
-
-        if (!controller) {
-            return;
-        }
-
-        const { conference } = state['features/base/conference'];
-
-        if (!dontNotifyRemoteParty) {
-            sendRemoteControlEndpointMessage(conference, controller, {
-                type: EVENTS.stop
-            });
-        }
-
-        dispatch({
-            type: SET_CONTROLLER,
-            controller: undefined
-        });
-
-        transport.sendEvent({
-            name: REMOTE_CONTROL_MESSAGE_NAME,
-            type: EVENTS.stop
-        });
-
-        dispatch(setRemoteControlActive(false));
-
-        if (!dontNotifyLocalParty) {
-            dispatch(showNotification({
-                descriptionKey: 'dialog.remoteControlStopMessage',
-                titleKey: 'dialog.remoteControlTitle'
-            }));
-        }
-    };
-}
-
-
-/**
- * Handles only remote control endpoint messages.
- *
- * @param {string} participantId - The controller participant ID.
- * @param {Object} message - EndpointMessage from the data channels.
- * @param {string} message.name - The function processes only messages with
- * name REMOTE_CONTROL_MESSAGE_NAME.
- * @returns {Function}
- */
-export function endpointMessageReceived(participantId: string, message: Object) {
-    return (dispatch: Function, getState: Function) => {
-        const { action, name, type } = message;
-
-        if (name !== REMOTE_CONTROL_MESSAGE_NAME) {
-            return;
-        }
-
-        const state = getState();
-        const { receiver } = state['features/remote-control'];
-        const { enabled, transport } = receiver;
-
-        if (enabled) {
-            const { controller } = receiver;
-
-            if (!controller && type === EVENTS.permissions && action === PERMISSIONS_ACTIONS.request) {
-                dispatch(setRemoteControlActive(true));
-                dispatch(openRemoteControlAuthorizationDialog(participantId));
-            } else if (controller === participantId) {
-                if (type === EVENTS.stop) {
-                    dispatch(stopReceiver(false, true));
-                } else { // forward the message
-                    transport.sendEvent(message);
-                }
-            } // else ignore
-        } else {
-            logger.log('Remote control message is ignored because remote control is disabled', message);
-        }
-    };
-}
-
-/**
- * Denies remote control access for user associated with the passed user id.
- *
- * @param {string} participantId - The id associated with the user who sent the
- * request for remote control authorization.
- * @returns {Function}
- */
-export function deny(participantId: string) {
-    return (dispatch: Function, getState: Function) => {
-        const state = getState();
-        const { conference } = state['features/base/conference'];
-
-        dispatch(setRemoteControlActive(false));
-        sendRemoteControlEndpointMessage(conference, participantId, {
-            type: EVENTS.permissions,
-            action: PERMISSIONS_ACTIONS.deny
-        });
-    };
-}
-
-/**
- * Sends start remote control request to the native implementation.
- *
- * @returns {Function}
- */
-export function sendStartRequest() {
-    return (dispatch: Function, getState: Function) => {
-        const state = getState();
-        const tracks = state['features/base/tracks'];
-        const track = getLocalVideoTrack(tracks);
-        const { sourceId } = track?.jitsiTrack || {};
-        const { transport } = state['features/remote-control'].receiver;
-
-        return transport.sendRequest({
-            name: REMOTE_CONTROL_MESSAGE_NAME,
-            type: REQUESTS.start,
-            sourceId
-        });
-    };
-}
-
-/**
- * Grants remote control access to user associated with the passed user id.
- *
- * @param {string} participantId - The id associated with the user who sent the
- * request for remote control authorization.
- * @returns {Function}
- */
-export function grant(participantId: string) {
-    return (dispatch: Function, getState: Function) => {
-        dispatch({
-            type: SET_CONTROLLER,
-            controller: participantId
-        });
-        logger.log(`Remote control permissions granted to: ${participantId}`);
-
-        let promise;
-        const state = getState();
-        const tracks = state['features/base/tracks'];
-        const track = getLocalVideoTrack(tracks);
-        const isScreenSharing = track?.videoType === 'desktop';
-        const { sourceType } = track?.jitsiTrack || {};
-
-        if (isScreenSharing && sourceType === 'screen') {
-            promise = dispatch(sendStartRequest());
-        } else {
-            // FIXME: Use action here once toggleScreenSharing is moved to redux.
-            promise = APP.conference.toggleScreenSharing(
-                true,
-                {
-                    desktopSharingSources: [ 'screen' ]
-                })
-                .then(() => dispatch(sendStartRequest()));
-        }
-
-        const { conference } = state['features/base/conference'];
-
-        promise
-            .then(() => sendRemoteControlEndpointMessage(conference, participantId, {
-                type: EVENTS.permissions,
-                action: PERMISSIONS_ACTIONS.grant
-            }))
-            .catch(error => {
-                logger.error(error);
-
-                sendRemoteControlEndpointMessage(conference, participantId, {
-                    type: EVENTS.permissions,
-                    action: PERMISSIONS_ACTIONS.error
-                });
-
-                dispatch(showNotification({
-                    descriptionKey: 'dialog.startRemoteControlErrorMessage',
-                    titleKey: 'dialog.remoteControlTitle'
-                }));
-
-                dispatch(stopReceiver(true));
-            });
-    };
-}
-
-/**
- * Handler for mouse click events on the controller side.
- *
- * @param {string} type - The type of event ("mousedown"/"mouseup").
- * @param {Event} event - The mouse event.
- * @returns {Function}
- */
-export function mouseClicked(type: string, event: Object) {
-    return (dispatch: Function, getState: Function) => {
-        const state = getState();
-        const { conference } = state['features/base/conference'];
-        const { controller } = state['features/remote-control'];
-
-        sendRemoteControlEndpointMessage(conference, controller.controlled, {
-            type,
-            button: event.which
-        });
-    };
-}
-
-/**
- * Handles mouse moved events on the controller side.
- *
- * @param {Event} event - The mouse event.
- * @returns {Function}
- */
-export function mouseMoved(event: Object) {
-    return (dispatch: Function, getState: Function) => {
-        const area = getRemoteConrolEventCaptureArea();
-
-        if (!area) {
-            return;
-        }
-
-        const position = area.position();
-        const state = getState();
-        const { conference } = state['features/base/conference'];
-        const { controller } = state['features/remote-control'];
-
-        sendRemoteControlEndpointMessage(conference, controller.controlled, {
-            type: EVENTS.mousemove,
-            x: (event.pageX - position.left) / area.width(),
-            y: (event.pageY - position.top) / area.height()
-        });
-    };
-}
-
-/**
- * Handles mouse scroll events on the controller side.
- *
- * @param {Event} event - The mouse event.
- * @returns {Function}
- */
-export function mouseScrolled(event: Object) {
-    return (dispatch: Function, getState: Function) => {
-        const state = getState();
-        const { conference } = state['features/base/conference'];
-        const { controller } = state['features/remote-control'];
-
-        sendRemoteControlEndpointMessage(conference, controller.controlled, {
-            type: EVENTS.mousescroll,
-            x: event.deltaX,
-            y: event.deltaY
-        });
-    };
-}
-
-/**
- * Handles key press events on the controller side..
- *
- * @param {string} type - The type of event ("keydown"/"keyup").
- * @param {Event} event - The key event.
- * @returns {Function}
- */
-export function keyPressed(type: string, event: Object) {
-    return (dispatch: Function, getState: Function) => {
-        const state = getState();
-        const { conference } = state['features/base/conference'];
-        const { controller } = state['features/remote-control'];
-
-        sendRemoteControlEndpointMessage(conference, controller.controlled, {
-            type,
-            key: getKey(event),
-            modifiers: getModifiers(event)
-        });
-    };
-}
-
-/**
-* Disables the keyboatd shortcuts. Starts collecting remote control
-* events. It can be used to resume an active remote control session which
-* was paused with the pause action.
-*
-* @returns {Function}
-*/
-export function resume() {
-    return (dispatch: Function, getState: Function) => {
-        const area = getRemoteConrolEventCaptureArea();
-        const state = getState();
-        const { controller } = state['features/remote-control'];
-        const { controlled, isCapturingEvents } = controller;
-
-        if (!isRemoteControlEnabled(state) || !area || !controlled || isCapturingEvents) {
-            return;
-        }
-
-        logger.log('Resuming remote control controller.');
-
-        // FIXME: Once the keyboard shortcuts are using react/redux.
-        APP.keyboardshortcut.enable(false);
-
-        area.mousemove(event => {
-            dispatch(mouseMoved(event));
-        });
-        area.mousedown(event => dispatch(mouseClicked(EVENTS.mousedown, event)));
-        area.mouseup(event => dispatch(mouseClicked(EVENTS.mouseup, event)));
-        area.dblclick(event => dispatch(mouseClicked(EVENTS.mousedblclick, event)));
-        area.contextmenu(() => false);
-        area[0].onmousewheel = event => {
-            event.preventDefault();
-            event.stopPropagation();
-            dispatch(mouseScrolled(event));
-
-            return false;
-        };
-        $(window).keydown(event => dispatch(keyPressed(EVENTS.keydown, event)));
-        $(window).keyup(event => dispatch(keyPressed(EVENTS.keyup, event)));
-
-        dispatch({
-            type: CAPTURE_EVENTS,
-            isCapturingEvents: true
-        });
-    };
-}
-
-
-/**
- * Pauses the collecting of events and enables the keyboard shortcus. But
- * it doesn't removes any other listeners. Basically the remote control
- * session will be still active after the pause action, but no events from the
- * controller side will be captured and sent. You can resume the collecting
- * of the events with the resume action.
- *
- * @returns {Function}
- */
-export function pause() {
-    return (dispatch: Function, getState: Function) => {
-        const state = getState();
-        const { controller } = state['features/remote-control'];
-        const { controlled, isCapturingEvents } = controller;
-
-        if (!isRemoteControlEnabled(state) || !controlled || !isCapturingEvents) {
-            return;
-        }
-
-        logger.log('Pausing remote control controller.');
-
-        // FIXME: Once the keyboard shortcuts are using react/redux.
-        APP.keyboardshortcut.enable(true);
-
-        const area = getRemoteConrolEventCaptureArea();
-
-        if (area) {
-            area.off('contextmenu');
-            area.off('dblclick');
-            area.off('mousedown');
-            area.off('mousemove');
-            area.off('mouseup');
-            area[0].onmousewheel = undefined;
-        }
-
-        $(window).off('keydown');
-        $(window).off('keyup');
-
-        dispatch({
-            type: CAPTURE_EVENTS,
-            isCapturingEvents: false
-        });
-    };
-}

react/features/remote-control/components/RemoteControlAuthorizationDialog.js

@@ -6,8 +6,6 @@ import { Dialog, hideDialog } from '../../base/dialog';
 import { translate } from '../../base/i18n';
 import { getParticipantById } from '../../base/participants';
 import { connect } from '../../base/redux';
-import { getLocalVideoTrack } from '../../base/tracks';
-import { grant, deny } from '../actions';
 
 declare var APP: Object;
 
@@ -23,9 +21,6 @@ type Props = {
      */
     _displayName: string,
 
-    _isScreenSharing: boolean,
-    _sourceType: string,
-
     /**
      * Used to show/hide the dialog on cancel.
      */
@@ -92,9 +87,10 @@ class RemoteControlAuthorizationDialog extends Component<Props> {
      * @returns {ReactElement}
      */
     _getAdditionalMessage() {
-        const { _isScreenSharing, _sourceType } = this.props;
-
-        if (_isScreenSharing && _sourceType === 'screen') {
+        // FIXME: Once we have this information in redux we should
+        // start getting it from there.
+        if (APP.conference.isSharingScreen
+                && APP.conference.getDesktopSharingSourceType() === 'screen') {
             return null;
         }
 
@@ -116,9 +112,8 @@ class RemoteControlAuthorizationDialog extends Component<Props> {
      * @returns {boolean} Returns true to close the dialog.
      */
     _onCancel() {
-        const { dispatch, participantId } = this.props;
-
-        dispatch(deny(participantId));
+        // FIXME: This should be action one day.
+        APP.remoteControl.receiver.deny(this.props.participantId);
 
         return true;
     }
@@ -136,10 +131,10 @@ class RemoteControlAuthorizationDialog extends Component<Props> {
      * picker window, the action will be ignored).
      */
     _onSubmit() {
-        const { dispatch, participantId } = this.props;
+        this.props.dispatch(hideDialog());
 
-        dispatch(hideDialog());
-        dispatch(grant(participantId));
+        // FIXME: This should be action one day.
+        APP.remoteControl.receiver.grant(this.props.participantId);
 
         return false;
     }
@@ -154,24 +149,15 @@ class RemoteControlAuthorizationDialog extends Component<Props> {
  * (instance of) RemoteControlAuthorizationDialog.
  * @private
  * @returns {{
- *     _displayName: string,
- *     _isScreenSharing: boolean,
- *     _sourceId: string,
- *     _sourceType: string
+ *     _displayName: string
  * }}
  */
 function _mapStateToProps(state, ownProps) {
     const { _displayName, participantId } = ownProps;
     const participant = getParticipantById(state, participantId);
-    const tracks = state['features/base/tracks'];
-    const track = getLocalVideoTrack(tracks);
-    const _isScreenSharing = track?.videoType === 'desktop';
-    const { sourceType } = track?.jitsiTrack || {};
 
     return {
-        _displayName: participant ? participant.name : _displayName,
-        _isScreenSharing,
-        _sourceType: sourceType
+        _displayName: participant ? participant.name : _displayName
     };
 }
 

react/features/remote-control/functions.js

@@ -1,128 +0,0 @@
-// @flow
-
-import VideoLayout from '../../../modules/UI/videolayout/VideoLayout';
-import JitsiMeetJS from '../base/lib-jitsi-meet';
-
-import { enableReceiver, stopReceiver } from './actions';
-import { REMOTE_CONTROL_MESSAGE_NAME, EVENTS } from './constants';
-import { keyboardEventToKey } from './keycodes';
-import logger from './logger';
-
-/**
- * Checks if the remote contrrol is enabled.
- *
- * @param {*} state - The redux state.
- * @returns {boolean} - True if the remote control is enabled and false otherwise.
- */
-export function isRemoteControlEnabled(state: Object) {
-    return !state['features/base/config'].disableRemoteControl && JitsiMeetJS.isDesktopSharingEnabled();
-}
-
-/**
- * Sends remote control message to other participant trough data channel.
- *
- * @param {JitsiConference} conference - The JitsiConference object.
- * @param {string} to - The participant who will receive the event.
- * @param {RemoteControlEvent} event - The remote control event.
- * @returns {boolean} - True if the message was sent successfully and false otherwise.
- */
-export function sendRemoteControlEndpointMessage(
-        conference: Object,
-        to: ?string,
-        event: Object) {
-    if (!to) {
-        logger.warn('Remote control: Skip sending remote control event. Params:', to);
-
-        return false;
-    }
-
-    try {
-        conference.sendEndpointMessage(to, {
-            name: REMOTE_CONTROL_MESSAGE_NAME,
-            ...event
-        });
-
-        return true;
-    } catch (error) {
-        logger.error('Failed to send EndpointMessage via the datachannels', error);
-
-        return false;
-    }
-}
-
-/**
-* Handles remote control events from the external app. Currently only
-* events with type EVENTS.supported and EVENTS.stop are
-* supported.
-*
-* @param {RemoteControlEvent} event - The remote control event.
-* @param {Store} store - The redux store.
-* @returns {void}
-*/
-export function onRemoteControlAPIEvent(event: Object, { getState, dispatch }: Object) {
-    switch (event.type) {
-    case EVENTS.supported:
-        logger.log('Remote Control supported.');
-        if (isRemoteControlEnabled(getState())) {
-            dispatch(enableReceiver());
-        } else {
-            logger.log('Remote Control disabled.');
-        }
-        break;
-    case EVENTS.stop: {
-        dispatch(stopReceiver());
-
-        break;
-    }
-    }
-}
-
-/**
- * Returns the area used for capturing mouse and key events.
- *
- * @returns {JQuery} - A JQuery selector.
- */
-export function getRemoteConrolEventCaptureArea() {
-    return VideoLayout.getLargeVideoWrapper();
-}
-
-
-/**
- * Extract the keyboard key from the keyboard event.
- *
- * @param {KeyboardEvent} event - The event.
- * @returns {KEYS} The key that is pressed or undefined.
- */
-export function getKey(event: Object) {
-    return keyboardEventToKey(event);
-}
-
-/**
- * Extract the modifiers from the keyboard event.
- *
- * @param {KeyboardEvent} event - The event.
- * @returns {Array} With possible values: "shift", "control", "alt", "command".
- */
-export function getModifiers(event: Object) {
-    const modifiers = [];
-
-    if (event.shiftKey) {
-        modifiers.push('shift');
-    }
-
-    if (event.ctrlKey) {
-        modifiers.push('control');
-    }
-
-
-    if (event.altKey) {
-        modifiers.push('alt');
-    }
-
-    if (event.metaKey) {
-        modifiers.push('command');
-    }
-
-    return modifiers;
-}
-

react/features/remote-control/logger.js

@@ -1,5 +0,0 @@
-// @flow
-
-import { getLogger } from '../base/logging/functions';
-
-export default getLogger('features/remote-control');

react/features/remote-control/middleware.js

@@ -1,92 +0,0 @@
-// @flow
-import { PostMessageTransportBackend, Transport } from '@jitsi/js-utils/transport';
-
-import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../base/app';
-import { CONFERENCE_JOINED } from '../base/conference';
-import { PARTICIPANT_LEFT } from '../base/participants';
-import { MiddlewareRegistry } from '../base/redux';
-
-import {
-    clearRequest, setReceiverTransport, setRemoteControlActive, stopController, stopReceiver
-} from './actions';
-import { REMOTE_CONTROL_MESSAGE_NAME } from './constants';
-import { onRemoteControlAPIEvent } from './functions';
-import './subscriber';
-
-/**
- * The redux middleware for the remote control feature.
- *
- * @param {Store} store - The redux store.
- * @returns {Function}
- */
-MiddlewareRegistry.register(store => next => async action => {
-    switch (action.type) {
-    case APP_WILL_MOUNT: {
-        const { dispatch } = store;
-
-        dispatch(setReceiverTransport(new Transport({
-            backend: new PostMessageTransportBackend({
-                postisOptions: { scope: 'jitsi-remote-control' }
-            })
-        })));
-
-        break;
-    }
-    case APP_WILL_UNMOUNT: {
-        const { getState, dispatch } = store;
-        const { transport } = getState()['features/remote-control'].receiver;
-
-        if (transport) {
-            transport.dispose();
-            dispatch(setReceiverTransport());
-        }
-
-        break;
-    }
-    case CONFERENCE_JOINED: {
-        const result = next(action);
-        const { getState } = store;
-        const { transport } = getState()['features/remote-control'].receiver;
-
-        if (transport) {
-            // We expect here that even if we receive the supported event earlier
-            // it will be cached and we'll receive it.
-            transport.on('event', event => {
-                if (event.name === REMOTE_CONTROL_MESSAGE_NAME) {
-                    onRemoteControlAPIEvent(event, store);
-
-                    return true;
-                }
-
-                return false;
-            });
-        }
-
-        return result;
-    }
-    case PARTICIPANT_LEFT: {
-        const { getState, dispatch } = store;
-        const state = getState();
-        const { id } = action.participant;
-        const { receiver, controller } = state['features/remote-control'];
-        const { requestedParticipant, controlled } = controller;
-
-        if (id === controlled) {
-            dispatch(stopController());
-        }
-
-        if (id === requestedParticipant) {
-            dispatch(clearRequest());
-            dispatch(setRemoteControlActive(false));
-        }
-
-        if (receiver?.controller === id) {
-            dispatch(stopReceiver(false, true));
-        }
-
-        break;
-    }
-    }
-
-    return next(action);
-});

react/features/remote-control/reducer.js

@@ -1,68 +0,0 @@
-import { ReducerRegistry, set } from '../base/redux';
-
-import {
-    CAPTURE_EVENTS,
-    REMOTE_CONTROL_ACTIVE,
-    SET_CONTROLLED_PARTICIPANT,
-    SET_CONTROLLER,
-    SET_RECEIVER_ENABLED,
-    SET_RECEIVER_TRANSPORT,
-    SET_REQUESTED_PARTICIPANT
-} from './actionTypes';
-
-/**
- * The default state.
- */
-const DEFAULT_STATE = {
-    active: false,
-    controller: {
-        isCapturingEvents: false
-    },
-    receiver: {
-        enabled: false
-    }
-};
-
-/**
- * Listen for actions that mutate the remote control state.
- */
-ReducerRegistry.register(
-    'features/remote-control', (state = DEFAULT_STATE, action) => {
-        switch (action.type) {
-        case CAPTURE_EVENTS:
-            return {
-                ...state,
-                controller: set(state.controller, 'isCapturingEvents', action.isCapturingEvents)
-            };
-        case REMOTE_CONTROL_ACTIVE:
-            return set(state, 'active', action.active);
-        case SET_RECEIVER_TRANSPORT:
-            return {
-                ...state,
-                receiver: set(state.receiver, 'transport', action.transport)
-            };
-        case SET_RECEIVER_ENABLED:
-            return {
-                ...state,
-                receiver: set(state.receiver, 'enabled', action.enabled)
-            };
-        case SET_REQUESTED_PARTICIPANT:
-            return {
-                ...state,
-                controller: set(state.controller, 'requestedParticipant', action.requestedParticipant)
-            };
-        case SET_CONTROLLED_PARTICIPANT:
-            return {
-                ...state,
-                controller: set(state.controller, 'controlled', action.controlled)
-            };
-        case SET_CONTROLLER:
-            return {
-                ...state,
-                receiver: set(state.receiver, 'controller', action.controller)
-            };
-        }
-
-        return state;
-    },
-);

react/features/remote-control/subscriber.js

@@ -1,33 +0,0 @@
-// @flow
-
-import { StateListenerRegistry } from '../base/redux';
-
-import { resume, pause } from './actions';
-
-/**
- * Listens for large video participant ID changes.
- */
-StateListenerRegistry.register(
-    /* selector */ state => {
-        const { participantId } = state['features/large-video'];
-        const { controller } = state['features/remote-control'];
-        const { controlled } = controller;
-
-        if (!controlled) {
-            return undefined;
-        }
-
-        return controlled === participantId;
-    },
-    /* listener */ (isControlledParticipantOnStage, { dispatch }) => {
-        if (isControlledParticipantOnStage === true) {
-            dispatch(resume());
-        } else if (isControlledParticipantOnStage === false) {
-            dispatch(pause());
-        }
-
-        // else {
-        // isControlledParticipantOnStage === undefined. Ignore!
-        // }
-    }
-);

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

@@ -4,15 +4,12 @@ import React, { Component } from 'react';
 
 import { Icon, IconMenuThumb } from '../../../base/icons';
 import { MEDIA_TYPE } from '../../../base/media';
-import { getLocalParticipant, getParticipantById, PARTICIPANT_ROLE } from '../../../base/participants';
+import { getLocalParticipant, PARTICIPANT_ROLE } from '../../../base/participants';
 import { Popover } from '../../../base/popover';
 import { connect } from '../../../base/redux';
 import { isRemoteTrackMuted } from '../../../base/tracks';
-import { requestRemoteControl, stopController } from '../../../remote-control';
-import { getCurrentLayout, LAYOUTS } from '../../../video-layout';
 
 import MuteEveryoneElseButton from './MuteEveryoneElseButton';
-import { REMOTE_CONTROL_MENU_STATES } from './RemoteControlButton';
 
 import {
     GrantModeratorButton,
@@ -53,24 +50,6 @@ type Props = {
      */
     _isModerator: boolean,
 
-    /**
-     * The position relative to the trigger the remote menu should display
-     * from. Valid values are those supported by AtlasKit
-     * {@code InlineDialog}.
-     */
-    _menuPosition: string,
-
-    /**
-     * The current state of the participant's remote control session.
-     */
-    _remoteControlState: number,
-
-
-    /**
-     * The redux dispatch function.
-     */
-    dispatch: Function,
-
     /**
      * A value between 0 and 1 indicating the volume of the participant's
      * audio element.
@@ -82,16 +61,34 @@ type Props = {
      */
     onMenuDisplay: Function,
 
+    /**
+     * Callback to invoke choosing to start a remote control session with
+     * the participant.
+     */
+    onRemoteControlToggle: Function,
+
     /**
      * Callback to invoke when changing the level of the participant's
      * audio element.
      */
     onVolumeChange: Function,
 
+    /**
+     * The position relative to the trigger the remote menu should display
+     * from. Valid values are those supported by AtlasKit
+     * {@code InlineDialog}.
+     */
+    menuPosition: string,
+
     /**
      * The ID for the participant on which the remote video menu will act.
      */
     participantID: string,
+
+    /**
+     * The current state of the participant's remote control session.
+     */
+    remoteControlState: number
 };
 
 /**
@@ -141,7 +138,7 @@ class RemoteVideoMenuTriggerButton extends Component<Props> {
             <Popover
                 content = { content }
                 onPopoverOpen = { this._onShowRemoteMenu }
-                position = { this.props._menuPosition }>
+                position = { this.props.menuPosition }>
                 <span
                     className = 'popover-trigger remote-video-menu-trigger'>
                     <Icon
@@ -178,10 +175,10 @@ class RemoteVideoMenuTriggerButton extends Component<Props> {
             _disableRemoteMute,
             _isAudioMuted,
             _isModerator,
-            dispatch,
             initialVolumeValue,
+            onRemoteControlToggle,
             onVolumeChange,
-            _remoteControlState,
+            remoteControlState,
             participantID
         } = this.props;
 
@@ -217,21 +214,13 @@ class RemoteVideoMenuTriggerButton extends Component<Props> {
             }
         }
 
-        if (_remoteControlState) {
-            let onRemoteControlToggle = null;
-
-            if (_remoteControlState === REMOTE_CONTROL_MENU_STATES.STARTED) {
-                onRemoteControlToggle = () => dispatch(stopController(true));
-            } else if (_remoteControlState === REMOTE_CONTROL_MENU_STATES.NOT_STARTED) {
-                onRemoteControlToggle = () => dispatch(requestRemoteControl(participantID));
-            }
-
+        if (remoteControlState) {
             buttons.push(
                 <RemoteControlButton
                     key = 'remote-control'
                     onClick = { onRemoteControlToggle }
                     participantID = { participantID }
-                    remoteControlState = { _remoteControlState } />
+                    remoteControlState = { remoteControlState } />
             );
         }
 
@@ -269,12 +258,7 @@ class RemoteVideoMenuTriggerButton extends Component<Props> {
  * @param {Object} ownProps - The own props of the component.
  * @private
  * @returns {{
- *     _isAudioMuted: boolean,
- *     _isModerator: boolean,
- *     _disableKick: boolean,
- *     _disableRemoteMute: boolean,
- *     _menuPosition: string,
- *     _remoteControlState: number
+ *     _isModerator: boolean
  * }}
  */
 function _mapStateToProps(state, ownProps) {
@@ -283,46 +267,12 @@ function _mapStateToProps(state, ownProps) {
     const localParticipant = getLocalParticipant(state);
     const { remoteVideoMenu = {}, disableRemoteMute } = state['features/base/config'];
     const { disableKick } = remoteVideoMenu;
-    let _remoteControlState = null;
-    const participant = getParticipantById(state, participantID);
-    const _isRemoteControlSessionActive = participant?.remoteControlSessionStatus ?? false;
-    const _supportsRemoteControl = participant?.supportsRemoteControl ?? false;
-    const { active, controller } = state['features/remote-control'];
-    const { requestedParticipant, controlled } = controller;
-    const activeParticipant = requestedParticipant || controlled;
-
-    if (_supportsRemoteControl
-            && ((!active && !_isRemoteControlSessionActive) || activeParticipant === participantID)) {
-        if (requestedParticipant === participantID) {
-            _remoteControlState = REMOTE_CONTROL_MENU_STATES.REQUESTING;
-        } else if (controlled) {
-            _remoteControlState = REMOTE_CONTROL_MENU_STATES.STARTED;
-        } else {
-            _remoteControlState = REMOTE_CONTROL_MENU_STATES.NOT_STARTED;
-        }
-    }
-
-    const currentLayout = getCurrentLayout(state);
-    let _menuPosition;
-
-    switch (currentLayout) {
-    case LAYOUTS.TILE_VIEW:
-        _menuPosition = 'left top';
-        break;
-    case LAYOUTS.VERTICAL_FILMSTRIP_VIEW:
-        _menuPosition = 'left bottom';
-        break;
-    default:
-        _menuPosition = 'top center';
-    }
 
     return {
         _isAudioMuted: isRemoteTrackMuted(tracks, MEDIA_TYPE.AUDIO, participantID) || false,
         _isModerator: Boolean(localParticipant?.role === PARTICIPANT_ROLE.MODERATOR),
         _disableKick: Boolean(disableKick),
-        _disableRemoteMute: Boolean(disableRemoteMute),
-        _remoteControlState,
-        _menuPosition
+        _disableRemoteMute: Boolean(disableRemoteMute)
     };
 }
 

resources/prosody-plugins/util.lib.lua

@@ -227,7 +227,7 @@ end
 -- everything.
 function is_feature_allowed(session, feature)
     if (session.jitsi_meet_context_features == nil
-        or session.jitsi_meet_context_features[feature] == "true") then
+        or session.jitsi_meet_context_features[feature] == "true" or session.jitsi_meet_context_features[feature] == true) then
         return true;
     else
         return false;

service/remotecontrol/Constants.js

@@ -1,41 +1,8 @@
-/**
- * The type of remote control messages.
- */
-export const REMOTE_CONTROL_MESSAGE_NAME = 'remote-control';
-
 /**
  * The value for the "var" attribute of feature tag in disco-info packets.
  */
-export const DISCO_REMOTE_CONTROL_FEATURE = 'http://jitsi.org/meet/remotecontrol';
-
-/**
- * The remote control event.
- * @typedef {object} RemoteControlEvent
- * @property {EVENTS | REQUESTS} type - the type of the message
- * @property {number} x - avaibale for type === mousemove only. The new x
- * coordinate of the mouse
- * @property {number} y - For mousemove type - the new y
- * coordinate of the mouse and for mousescroll - represents the vertical
- * scrolling diff value
- * @property {number} button - 1(left), 2(middle) or 3 (right). Supported by
- * mousedown, mouseup and mousedblclick types.
- * @property {KEYS} key - Represents the key related to the event. Supported by
- * keydown and keyup types.
- * @property {KEYS[]} modifiers - Represents the modifier related to the event.
- * Supported by keydown and keyup types.
- * @property {PERMISSIONS_ACTIONS} action - Supported by type === permissions.
- * Represents the action related to the permissions event.
- *
- * Optional properties. Supported for permissions event for action === request:
- * @property {string} userId - The user id of the participant that has sent the
- * request.
- * @property {string} userJID - The full JID in the MUC of the user that has
- * sent the request.
- * @property {string} displayName - the displayName of the participant that has
- * sent the request.
- * @property {boolean} screenSharing - true if the SS is started for the local
- * participant and false if not.
- */
+export const DISCO_REMOTE_CONTROL_FEATURE
+    = 'http://jitsi.org/meet/remotecontrol';
 
 /**
  * Types of remote-control events.
@@ -77,3 +44,36 @@ export const PERMISSIONS_ACTIONS = {
     error: 'error'
 };
 
+/**
+ * The type of remote control messages.
+ */
+export const REMOTE_CONTROL_MESSAGE_NAME = 'remote-control';
+
+/**
+ * The remote control event.
+ * @typedef {object} RemoteControlEvent
+ * @property {EVENTS | REQUESTS} type - the type of the message
+ * @property {number} x - avaibale for type === mousemove only. The new x
+ * coordinate of the mouse
+ * @property {number} y - For mousemove type - the new y
+ * coordinate of the mouse and for mousescroll - represents the vertical
+ * scrolling diff value
+ * @property {number} button - 1(left), 2(middle) or 3 (right). Supported by
+ * mousedown, mouseup and mousedblclick types.
+ * @property {KEYS} key - Represents the key related to the event. Supported by
+ * keydown and keyup types.
+ * @property {KEYS[]} modifiers - Represents the modifier related to the event.
+ * Supported by keydown and keyup types.
+ * @property {PERMISSIONS_ACTIONS} action - Supported by type === permissions.
+ * Represents the action related to the permissions event.
+ *
+ * Optional properties. Supported for permissions event for action === request:
+ * @property {string} userId - The user id of the participant that has sent the
+ * request.
+ * @property {string} userJID - The full JID in the MUC of the user that has
+ * sent the request.
+ * @property {string} displayName - the displayName of the participant that has
+ * sent the request.
+ * @property {boolean} screenSharing - true if the SS is started for the local
+ * participant and false if not.
+ */

service/remotecontrol/RemoteControlEvents.js

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

static/404.html

@@ -7,7 +7,7 @@
 <body>
     <div class="error_page">
         <h2>404 Not Found</h2>
-        <p class="error_page__message">You can create new conversation <a class="link" href="/">here</a></p>
+        <p class="error_page__message">You can create a new conversation <a class="link" onclick="window.location = window.location.protocol + '//' + window.location.hostname">here</a></p>
     </div>
 </body>
 </html>