feat(external_api): Add cmd for selecting a user to be displayed in large video

modules/API/API.js

@@ -21,6 +21,7 @@ import {
 import { isEnabled as isDropboxEnabled } from '../../react/features/dropbox';
 import { toggleE2EE } from '../../react/features/e2ee/actions';
 import { invite } from '../../react/features/invite';
+import { selectParticipantInLargeVideo } from '../../react/features/large-video/actions';
 import { toggleLobbyMode } from '../../react/features/lobby/actions.web';
 import { RECORDING_TYPES } from '../../react/features/recording/constants';
 import { getActiveSession } from '../../react/features/recording/functions';
@@ -123,6 +124,11 @@ function initCommands() {
 
             APP.store.dispatch(sendTones(tones, duration, pause));
         },
+        'set-large-video-participant': participantId => {
+            logger.debug('Set large video participant command received');
+            sendAnalytics(createApiEvent('largevideo.participant.changed'));
+            APP.store.dispatch(selectParticipantInLargeVideo(participantId));
+        },
         'subject': subject => {
             sendAnalytics(createApiEvent('subject.changed'));
             APP.store.dispatch(setSubject(subject));
@@ -710,8 +716,7 @@ class API {
     }
 
     /**
-     * Notify external application (if API is enabled) that user changed their
-     * nickname.
+     * Notify external application (if API is enabled) that local user has left the conference.
      *
      * @param {string} roomName - User id.
      * @returns {void}

modules/API/external/external_api.js

@@ -37,6 +37,7 @@ const commands = {
     password: 'password',
     sendEndpointTextMessage: 'send-endpoint-text-message',
     sendTones: 'send-tones',
+    setLargeVideoParticipant: 'set-large-video-participant',
     setVideoQuality: 'set-video-quality',
     startRecording: 'start-recording',
     stopRecording: 'stop-recording',

react/features/large-video/actions.js

@@ -49,16 +49,19 @@ export function selectParticipant() {
 }
 
 /**
- * Action to select the participant to be displayed in LargeVideo based on a
- * variety of factors: If there is a dominant or pinned speaker, or if there are
- * remote tracks, etc.
+ * Action to select the participant to be displayed in LargeVideo based on the
+ * participant id provided. If a partcipant id is not provided, the LargeVideo
+ * participant will be selected based on a variety of factors: If there is a
+ * dominant or pinned speaker, or if there are remote tracks, etc.
  *
+ * @param {string} participant - The participant id of the user that needs to be
+ * displayed on the large video.
  * @returns {Function}
  */
-export function selectParticipantInLargeVideo() {
+export function selectParticipantInLargeVideo(participant: ?string) {
     return (dispatch: Dispatch<any>, getState: Function) => {
         const state = getState();
-        const participantId = _electParticipantInLargeVideo(state);
+        const participantId = participant ?? _electParticipantInLargeVideo(state);
         const largeVideo = state['features/large-video'];
 
         if (participantId !== largeVideo.participantId) {