init

react/features/remote-control/actionTypes.ts

@@ -0,0 +1,68 @@
+/**
+ * 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.ts

@@ -0,0 +1,770 @@
+// @ts-expect-error
+import $ from 'jquery';
+import React from 'react';
+
+import { IStore } from '../app/types';
+import { openDialog } from '../base/dialog/actions';
+import { JitsiConferenceEvents } from '../base/lib-jitsi-meet';
+import { pinParticipant } from '../base/participants/actions';
+import {
+    getParticipantDisplayName,
+    getPinnedParticipant,
+    getVirtualScreenshareParticipantByOwnerId
+} from '../base/participants/functions';
+import { toggleScreensharing } from '../base/tracks/actions';
+import { getLocalDesktopTrack } from '../base/tracks/functions';
+import { showNotification } from '../notifications/actions';
+import { NOTIFICATION_TIMEOUT_TYPE } from '../notifications/constants';
+import { isScreenVideoShared } from '../screen-share/functions';
+
+import {
+    CAPTURE_EVENTS,
+    REMOTE_CONTROL_ACTIVE,
+    SET_CONTROLLED_PARTICIPANT,
+    SET_CONTROLLER,
+    SET_RECEIVER_ENABLED,
+    SET_RECEIVER_TRANSPORT,
+    SET_REQUESTED_PARTICIPANT
+} from './actionTypes';
+import RemoteControlAuthorizationDialog from './components/RemoteControlAuthorizationDialog';
+import {
+    DISCO_REMOTE_CONTROL_FEATURE,
+    EVENTS,
+    PERMISSIONS_ACTIONS,
+    REMOTE_CONTROL_MESSAGE_NAME,
+    REQUESTS
+} from './constants';
+import {
+    getKey,
+    getModifiers,
+    getRemoteConrolEventCaptureArea,
+    isRemoteControlEnabled,
+    sendRemoteControlEndpointMessage
+} from './functions';
+import logger from './logger';
+
+/**
+ * Listeners.
+ */
+let permissionsReplyListener: Function | undefined,
+    receiverEndpointMessageListener: Function, stopListener: Function | undefined;
+
+/**
+ * Signals that the remote control authorization dialog should be displayed.
+ *
+ * @param {string} participantId - The id of the participant who is requesting
+ * the authorization.
+ * @returns {{
+ *     type: OPEN_DIALOG,
+ *     component: {RemoteControlAuthorizationDialog},
+ *     componentProps: {
+ *         participantId: {string}
+ *      }
+ * }}
+ * @public
+ */
+export function openRemoteControlAuthorizationDialog(participantId: string) {
+    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: IStore['dispatch'], getState: IStore['getState']) => {
+        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: IStore['dispatch'], getState: IStore['getState']) => {
+        const state = getState();
+        const enabled = isRemoteControlEnabled(state);
+
+        if (!enabled) {
+            return Promise.reject(new Error('Remote control is disabled!'));
+        }
+
+        dispatch(setRemoteControlActive(true));
+
+        logger.log(`Requesting remote control permissions from: ${userId}`);
+
+        const { conference } = state['features/base/conference'];
+
+
+        permissionsReplyListener = (participant: any, event: any) => {
+            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: any) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        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: any, stopEvent: { name: string; type: string; }) => {
+                    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'
+            }, NOTIFICATION_TIMEOUT_TYPE.MEDIUM));
+
+            if (permissionGranted) {
+                // the remote control permissions has been granted
+                // pin the controlled participant
+                const pinnedParticipant = getPinnedParticipant(state);
+                const virtualScreenshareParticipant = getVirtualScreenshareParticipantByOwnerId(state, participantId);
+                const pinnedId = pinnedParticipant?.id;
+
+                if (virtualScreenshareParticipant?.id && pinnedId !== virtualScreenshareParticipant?.id) {
+                    dispatch(pinParticipant(virtualScreenshareParticipant?.id));
+                } else if (!virtualScreenshareParticipant?.id && 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: { name: string; type: string; }) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        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 = false) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        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'
+        }, NOTIFICATION_TIMEOUT_TYPE.LONG));
+    };
+}
+
+/**
+ * Clears a pending permission request.
+ *
+ * @returns {Function}
+ */
+export function clearRequest() {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        const { conference } = getState()['features/base/conference'];
+
+        dispatch({
+            type: SET_REQUESTED_PARTICIPANT,
+            requestedParticipant: undefined
+        });
+
+        conference?.off(JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED, permissionsReplyListener);
+        permissionsReplyListener = undefined;
+    };
+}
+
+
+/**
+ * Sets that transport 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: IStore['dispatch'], getState: IStore['getState']) => {
+        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: any, message: {
+            action: string; name: string; type: string; }) => {
+            dispatch(endpointMessageReceived(participant.getId(), message));
+        };
+        conference.on(JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED, receiverEndpointMessageListener);
+    };
+}
+
+/**
+ * Disables the receiver functionality.
+ *
+ * @returns {Function}
+ */
+export function disableReceiver() {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        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 = false, dontNotifyRemoteParty = false) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        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'
+            }, NOTIFICATION_TIMEOUT_TYPE.LONG));
+        }
+    };
+}
+
+
+/**
+ * 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: {
+    action: string; name: string; type: string; }) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        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
+                    try {
+                        transport?.sendEvent(message);
+                    } catch (error) {
+                        logger.error('Error while trying to execute remote control message', error);
+                    }
+                }
+            } // 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: IStore['dispatch'], getState: IStore['getState']) => {
+        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: IStore['dispatch'], getState: IStore['getState']) => {
+        const state = getState();
+        const tracks = state['features/base/tracks'];
+        const track = getLocalDesktopTrack(tracks);
+        const { sourceId } = track?.jitsiTrack || {};
+        const { transport } = state['features/remote-control'].receiver;
+
+        if (typeof sourceId === 'undefined') {
+            return Promise.reject(new Error('Cannot identify screen for the remote control session'));
+        }
+
+        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: IStore['dispatch'], getState: IStore['getState']) => {
+        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 = getLocalDesktopTrack(tracks);
+        const isScreenSharing = isScreenVideoShared(state);
+        const { sourceType } = track?.jitsiTrack || {};
+
+        if (isScreenSharing && sourceType === 'screen') {
+            promise = dispatch(sendStartRequest());
+        } else {
+            promise = dispatch(toggleScreensharing(
+                true,
+                false,
+                { 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: any) => {
+                logger.error(error);
+
+                sendRemoteControlEndpointMessage(conference, participantId, {
+                    type: EVENTS.permissions,
+                    action: PERMISSIONS_ACTIONS.error
+                });
+
+                dispatch(showNotification({
+                    descriptionKey: 'dialog.startRemoteControlErrorMessage',
+                    titleKey: 'dialog.remoteControlTitle'
+                }, NOTIFICATION_TIMEOUT_TYPE.LONG));
+
+                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: React.MouseEvent) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        const state = getState();
+        const { conference } = state['features/base/conference'];
+        const { controller } = state['features/remote-control'];
+
+        sendRemoteControlEndpointMessage(conference, controller.controlled, {
+            type,
+
+            // @ts-ignore
+            button: event.which
+        });
+    };
+}
+
+/**
+ * Handles mouse moved events on the controller side.
+ *
+ * @param {Event} event - The mouse event.
+ * @returns {Function}
+ */
+export function mouseMoved(event: React.MouseEvent) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        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: { deltaX: number; deltaY: number; }) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        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: React.KeyboardEvent) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        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: IStore['dispatch'], getState: IStore['getState']) => {
+        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.');
+
+        area.mousemove((event: React.MouseEvent) => {
+            dispatch(mouseMoved(event));
+        });
+        area.mousedown((event: React.MouseEvent) => dispatch(mouseClicked(EVENTS.mousedown, event)));
+        area.mouseup((event: React.MouseEvent) => dispatch(mouseClicked(EVENTS.mouseup, event)));
+        area.dblclick((event: React.MouseEvent) => dispatch(mouseClicked(EVENTS.mousedblclick, event)));
+        area.contextmenu(() => false);
+        area[0].onwheel = (event: any) => {
+            event.preventDefault();
+            event.stopPropagation();
+            dispatch(mouseScrolled(event));
+
+            return false;
+        };
+        $(window).keydown((event: React.KeyboardEvent) => dispatch(keyPressed(EVENTS.keydown, event)));
+        $(window).keyup((event: React.KeyboardEvent) => 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: IStore['dispatch'], getState: IStore['getState']) => {
+        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.');
+
+        const area = getRemoteConrolEventCaptureArea();
+
+        if (area) {
+            area.off('contextmenu');
+            area.off('dblclick');
+            area.off('mousedown');
+            area.off('mousemove');
+            area.off('mouseup');
+            area[0].onwheel = undefined;
+        }
+
+        $(window).off('keydown');
+        $(window).off('keyup');
+
+        dispatch({
+            type: CAPTURE_EVENTS,
+            isCapturingEvents: false
+        });
+    };
+}

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

@@ -0,0 +1,170 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import { IReduxState, IStore } from '../../app/types';
+import { translate } from '../../base/i18n/functions';
+import { getParticipantById } from '../../base/participants/functions';
+import { getLocalVideoTrack } from '../../base/tracks/functions.any';
+import Dialog from '../../base/ui/components/web/Dialog';
+import { deny, grant } from '../actions';
+
+/**
+ * The type of the React {@code Component} props of
+ * {@link RemoteControlAuthorizationDialog}.
+ */
+interface IProps {
+
+    /**
+     * The display name of the participant who is requesting authorization for
+     * remote desktop control session.
+     */
+    _displayName: string;
+
+    _isScreenSharing: boolean;
+    _sourceType: string;
+
+    /**
+     * Used to show/hide the dialog on cancel.
+     */
+    dispatch: IStore['dispatch'];
+
+    /**
+     * The ID of the participant who is requesting authorization for remote
+     * desktop control session.
+     */
+    participantId: string;
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function;
+}
+
+/**
+ * Implements a dialog for remote control authorization.
+ */
+class RemoteControlAuthorizationDialog extends Component<IProps> {
+    /**
+     * Initializes a new RemoteControlAuthorizationDialog instance.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this._onCancel = this._onCancel.bind(this);
+        this._onSubmit = this._onSubmit.bind(this);
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        return (
+            <Dialog
+                ok = {{ translationKey: 'dialog.allow' }}
+                onCancel = { this._onCancel }
+                onSubmit = { this._onSubmit }
+                titleKey = 'dialog.remoteControlTitle'>
+                {
+                    this.props.t(
+                        'dialog.remoteControlRequestMessage',
+                        { user: this.props._displayName })
+                }
+                {
+                    this._getAdditionalMessage()
+                }
+            </Dialog>
+        );
+    }
+
+    /**
+     * Renders additional message text for the dialog.
+     *
+     * @private
+     * @returns {ReactElement}
+     */
+    _getAdditionalMessage() {
+        const { _isScreenSharing, _sourceType } = this.props;
+
+        if (_isScreenSharing && _sourceType === 'screen') {
+            return null;
+        }
+
+        return (
+            <div>
+                <br />
+                { this.props.t('dialog.remoteControlShareScreenWarning') }
+            </div>
+        );
+    }
+
+    /**
+     * Notifies the remote control module about the denial of the remote control
+     * request.
+     *
+     * @private
+     * @returns {boolean} Returns true to close the dialog.
+     */
+    _onCancel() {
+        const { dispatch, participantId } = this.props;
+
+        dispatch(deny(participantId));
+
+        return true;
+    }
+
+    /**
+     * Notifies the remote control module that the remote control request is
+     * accepted.
+     *
+     * @private
+     * @returns {boolean} Returns false to prevent closure because the dialog is
+     * closed manually to be sure that if the desktop picker dialog can be
+     * displayed (if this dialog is displayed when we try to display the desktop
+     * picker window, the action will be ignored).
+     */
+    _onSubmit() {
+        const { dispatch, participantId } = this.props;
+
+        dispatch(grant(participantId));
+
+        return false;
+    }
+}
+
+/**
+ * Maps (parts of) the Redux state to the RemoteControlAuthorizationDialog's
+ * props.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {Object} ownProps - The React Component props passed to the associated
+ * (instance of) RemoteControlAuthorizationDialog.
+ * @private
+ * @returns {{
+ *     _displayName: string,
+ *     _isScreenSharing: boolean,
+ *     _sourceId: string,
+ *     _sourceType: string
+ * }}
+ */
+function _mapStateToProps(state: IReduxState, ownProps: any) {
+    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
+    };
+}
+
+export default translate(
+    connect(_mapStateToProps)(RemoteControlAuthorizationDialog));

react/features/remote-control/constants.ts

@@ -0,0 +1,86 @@
+/**
+ * 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.
+ */
+
+/**
+ * Types of remote-control events.
+ *
+  * @readonly
+  * @enum {string}
+ */
+export const EVENTS = {
+    mousemove: 'mousemove',
+    mousedown: 'mousedown',
+    mouseup: 'mouseup',
+    mousedblclick: 'mousedblclick',
+    mousescroll: 'mousescroll',
+    keydown: 'keydown',
+    keyup: 'keyup',
+    permissions: 'permissions',
+    start: 'start',
+    stop: 'stop',
+    supported: 'supported'
+};
+
+/**
+ * Types of remote-control requests.
+ *
+  * @readonly
+  * @enum {string}
+ */
+export const REQUESTS = {
+    start: 'start'
+};
+
+/**
+ * Actions for the remote control permission events.
+ *
+ * @readonly
+ * @enum {string}
+ */
+export const PERMISSIONS_ACTIONS = {
+    request: 'request',
+    grant: 'grant',
+    deny: 'deny',
+    error: 'error'
+};
+

react/features/remote-control/functions.ts

@@ -0,0 +1,131 @@
+import React from 'react';
+
+// @ts-expect-error
+import VideoLayout from '../../../modules/UI/videolayout/VideoLayout';
+import { IReduxState, IStore } from '../app/types';
+import { IJitsiConference } from '../base/conference/reducer';
+import JitsiMeetJS from '../base/lib-jitsi-meet';
+
+import { enableReceiver, stopReceiver } from './actions';
+import { EVENTS, REMOTE_CONTROL_MESSAGE_NAME } from './constants';
+import { keyboardEventToKey } from './keycodes';
+import logger from './logger';
+
+/**
+ * Checks if the remote control is enabled.
+ *
+ * @param {*} state - The redux state.
+ * @returns {boolean} - True if the remote control is enabled and false otherwise.
+ */
+export function isRemoteControlEnabled(state: IReduxState) {
+    return !state['features/base/config'].disableRemoteControl && JitsiMeetJS.isDesktopSharingEnabled();
+}
+
+/**
+ * Sends remote control message to other participant through 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: IJitsiConference | undefined,
+        to: string | undefined,
+        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: { type: string; }, { getState, dispatch }: IStore) {
+    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: React.KeyboardEvent) {
+    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: React.KeyboardEvent) {
+    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/keycodes.ts

@@ -0,0 +1,176 @@
+import React from 'react';
+
+/**
+ * Enumerates the supported keys.
+ * NOTE: The maps represents physical keys on the keyboard, not chars.
+ *
+ * @readonly
+ * @enum {string}
+ */
+export const KEYS = {
+    BACKSPACE: 'backspace',
+    DELETE: 'delete',
+    RETURN: 'enter',
+    TAB: 'tab',
+    ESCAPE: 'escape',
+    UP: 'up',
+    DOWN: 'down',
+    RIGHT: 'right',
+    LEFT: 'left',
+    HOME: 'home',
+    END: 'end',
+    PAGEUP: 'pageup',
+    PAGEDOWN: 'pagedown',
+
+    F1: 'f1',
+    F2: 'f2',
+    F3: 'f3',
+    F4: 'f4',
+    F5: 'f5',
+    F6: 'f6',
+    F7: 'f7',
+    F8: 'f8',
+    F9: 'f9',
+    F10: 'f10',
+    F11: 'f11',
+    F12: 'f12',
+    META: 'command',
+    CMD_L: 'command',
+    CMD_R: 'command',
+    ALT: 'alt',
+    CONTROL: 'control',
+    SHIFT: 'shift',
+    CAPS_LOCK: 'capslock',
+    SPACE: 'space',
+    PRINTSCREEN: 'printscreen',
+    INSERT: 'insert',
+
+    NUMPAD_0: 'numpad_0',
+    NUMPAD_1: 'numpad_1',
+    NUMPAD_2: 'numpad_2',
+    NUMPAD_3: 'numpad_3',
+    NUMPAD_4: 'numpad_4',
+    NUMPAD_5: 'numpad_5',
+    NUMPAD_6: 'numpad_6',
+    NUMPAD_7: 'numpad_7',
+    NUMPAD_8: 'numpad_8',
+    NUMPAD_9: 'numpad_9',
+
+    COMMA: ',',
+
+    PERIOD: '.',
+    SEMICOLON: ';',
+    QUOTE: '\'',
+    BRACKET_LEFT: '[',
+    BRACKET_RIGHT: ']',
+    BACKQUOTE: '`',
+    BACKSLASH: '\\',
+    MINUS: '-',
+    EQUAL: '=',
+    SLASH: '/',
+    ASTERISK: '*',
+    PLUS: '+'
+};
+
+/**
+ * Mapping between the key codes and keys defined in KEYS.
+ * The mappings are based on
+ * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode#Specifications.
+ */
+/* eslint-enable max-len */
+const keyCodeToKey = {
+    8: KEYS.BACKSPACE,
+    9: KEYS.TAB,
+    13: KEYS.RETURN,
+    16: KEYS.SHIFT,
+    17: KEYS.CONTROL,
+    18: KEYS.ALT,
+    20: KEYS.CAPS_LOCK,
+    27: KEYS.ESCAPE,
+    32: KEYS.SPACE,
+    33: KEYS.PAGEUP,
+    34: KEYS.PAGEDOWN,
+    35: KEYS.END,
+    36: KEYS.HOME,
+    37: KEYS.LEFT,
+    38: KEYS.UP,
+    39: KEYS.RIGHT,
+    40: KEYS.DOWN,
+    42: KEYS.PRINTSCREEN,
+    44: KEYS.PRINTSCREEN,
+    45: KEYS.INSERT,
+    46: KEYS.DELETE,
+    59: KEYS.SEMICOLON,
+    61: KEYS.EQUAL,
+    91: KEYS.CMD_L,
+    92: KEYS.CMD_R,
+    93: KEYS.CMD_R,
+    96: KEYS.NUMPAD_0,
+    97: KEYS.NUMPAD_1,
+    98: KEYS.NUMPAD_2,
+    99: KEYS.NUMPAD_3,
+    100: KEYS.NUMPAD_4,
+    101: KEYS.NUMPAD_5,
+    102: KEYS.NUMPAD_6,
+    103: KEYS.NUMPAD_7,
+    104: KEYS.NUMPAD_8,
+    105: KEYS.NUMPAD_9,
+    106: KEYS.ASTERISK,
+    107: KEYS.PLUS,
+    109: KEYS.MINUS,
+    110: KEYS.PERIOD,
+    111: KEYS.SLASH,
+    112: KEYS.F1,
+    113: KEYS.F2,
+    114: KEYS.F3,
+    115: KEYS.F4,
+    116: KEYS.F5,
+    117: KEYS.F6,
+    118: KEYS.F7,
+    119: KEYS.F8,
+    120: KEYS.F9,
+    121: KEYS.F10,
+    122: KEYS.F11,
+    123: KEYS.F12,
+    124: KEYS.PRINTSCREEN,
+    173: KEYS.MINUS,
+    186: KEYS.SEMICOLON,
+    187: KEYS.EQUAL,
+    188: KEYS.COMMA,
+    189: KEYS.MINUS,
+    190: KEYS.PERIOD,
+    191: KEYS.SLASH,
+    192: KEYS.BACKQUOTE,
+    219: KEYS.BRACKET_LEFT,
+    220: KEYS.BACKSLASH,
+    221: KEYS.BRACKET_RIGHT,
+    222: KEYS.QUOTE,
+    224: KEYS.META,
+    229: KEYS.SEMICOLON
+};
+
+/**
+ * Generate codes for digit keys (0-9).
+ */
+for (let i = 0; i < 10; i++) {
+    keyCodeToKey[(i + 48) as keyof typeof keyCodeToKey] = `${i}`;
+}
+
+/**
+ * Generate codes for letter keys (a-z).
+ */
+for (let i = 0; i < 26; i++) {
+    const keyCode = i + 65;
+
+    keyCodeToKey[keyCode as keyof typeof keyCodeToKey] = String.fromCharCode(keyCode).toLowerCase();
+}
+
+/**
+ * Returns key associated with the keyCode from the passed event.
+ *
+ * @param {KeyboardEvent} event - The event.
+ * @returns {KEYS} - The key on the keyboard.
+ */
+export function keyboardEventToKey(event: React.KeyboardEvent) {
+    return keyCodeToKey[event.which as keyof typeof keyCodeToKey];
+}

react/features/remote-control/logger.ts

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

react/features/remote-control/middleware.ts

@@ -0,0 +1,92 @@
+// @ts-expect-error
+import { PostMessageTransportBackend, Transport } from '@jitsi/js-utils/transport';
+
+import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../base/app/actionTypes';
+import { CONFERENCE_JOINED } from '../base/conference/actionTypes';
+import { PARTICIPANT_LEFT } from '../base/participants/actionTypes';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
+
+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 => 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: { name: string; type: string; }) => {
+                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.ts

@@ -0,0 +1,88 @@
+import ReducerRegistry from '../base/redux/ReducerRegistry';
+import { set } from '../base/redux/functions';
+
+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
+    }
+};
+
+export interface IRemoteControlState {
+    active: boolean;
+    controller: {
+        controlled?: string;
+        isCapturingEvents: boolean;
+        requestedParticipant?: string;
+    };
+    receiver: {
+        controller?: string;
+        enabled: boolean;
+        transport?: {
+            dispose: Function;
+            on: Function;
+            sendEvent: Function;
+            sendRequest: Function;
+        };
+    };
+}
+
+/**
+ * Listen for actions that mutate the remote control state.
+ */
+ReducerRegistry.register<IRemoteControlState>(
+    'features/remote-control', (state = DEFAULT_STATE, action): IRemoteControlState => {
+        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.ts

@@ -0,0 +1,53 @@
+import {
+    getParticipantById,
+    getVirtualScreenshareParticipantByOwnerId,
+    getVirtualScreenshareParticipantOwnerId,
+    isScreenShareParticipant
+} from '../base/participants/functions';
+import StateListenerRegistry from '../base/redux/StateListenerRegistry';
+
+import { pause, resume } 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;
+        }
+
+        const participant = getParticipantById(state, participantId);
+
+        if (isScreenShareParticipant(participant)) {
+            // multistream support is enabled and the user has selected the desktop sharing thumbnail.
+            const id = getVirtualScreenshareParticipantOwnerId(participantId);
+
+            return id === controlled;
+        }
+
+        const virtualParticipant = getVirtualScreenshareParticipantByOwnerId(state, participantId);
+
+        if (virtualParticipant) { // multistream is enabled and the user has selected the camera thumbnail.
+            return false;
+
+        }
+
+        return controlled === participantId;
+    },
+    /* listener */ (isControlledParticipantOnStage, { dispatch }) => {
+        if (isControlledParticipantOnStage === true) {
+            dispatch(resume());
+        } else if (isControlledParticipantOnStage === false) {
+            dispatch(pause());
+        }
+
+        // else {
+        // isControlledParticipantOnStage === undefined. Ignore!
+        // }
+    }
+);