fix(iframeAPI): pinParticipant & setLargeVideo

Add the ability to specify video type when in multistream mode.

modules/API/API.js

@@ -30,12 +30,13 @@ import { toggleDialog } from '../../react/features/base/dialog/actions';
 import { isSupportedBrowser } from '../../react/features/base/environment';
 import { parseJWTFromURLParams } from '../../react/features/base/jwt';
 import JitsiMeetJS, { JitsiRecordingConstants } from '../../react/features/base/lib-jitsi-meet';
-import { MEDIA_TYPE } from '../../react/features/base/media';
+import { MEDIA_TYPE, VIDEO_TYPE } from '../../react/features/base/media';
 import {
     LOCAL_PARTICIPANT_DEFAULT_ID,
     getLocalParticipant,
     getParticipantById,
     getScreenshareParticipantIds,
+    getVirtualScreenshareParticipantByOwnerId,
     grantModerator,
     hasRaisedHand,
     isLocalParticipantModerator,
@@ -235,13 +236,27 @@ function initCommands() {
                 ));
             }
         },
-        'pin-participant': id => {
+        'pin-participant': (id, videoType) => {
             logger.debug('Pin participant command received');
+
+            const state = APP.store.getState();
+            const participant = videoType === VIDEO_TYPE.DESKTOP
+                ? getVirtualScreenshareParticipantByOwnerId(state, id) : getParticipantById(state, id);
+
+            if (!participant) {
+                logger.warn('Trying to pin a non-existing participant with pin-participant command.');
+
+                return;
+            }
+
             sendAnalytics(createApiEvent('participant.pinned'));
+
+            const participantId = participant.id;
+
             if (isStageFilmstripAvailable(APP.store.getState())) {
-                APP.store.dispatch(addStageParticipant(id, true));
+                APP.store.dispatch(addStageParticipant(participantId, true));
             } else {
-                APP.store.dispatch(pinParticipant(id));
+                APP.store.dispatch(pinParticipant(participantId));
             }
         },
         'proxy-connection-event': event => {
@@ -285,10 +300,29 @@ function initCommands() {
 
             APP.store.dispatch(setFollowMe(value));
         },
-        'set-large-video-participant': participantId => {
+        'set-large-video-participant': (participantId, videoType) => {
             logger.debug('Set large video participant command received');
+
+            if (!participantId) {
+                sendAnalytics(createApiEvent('largevideo.participant.set'));
+                APP.store.dispatch(selectParticipantInLargeVideo());
+
+                return;
+            }
+
+            const state = APP.store.getState();
+            const participant = videoType === VIDEO_TYPE.DESKTOP
+                ? getVirtualScreenshareParticipantByOwnerId(state, participantId)
+                : getParticipantById(state, participantId);
+
+            if (!participant) {
+                logger.warn('Trying to select a non-existing participant with set-large-video-participant command.');
+
+                return;
+            }
+
             sendAnalytics(createApiEvent('largevideo.participant.set'));
-            APP.store.dispatch(selectParticipantInLargeVideo(participantId));
+            APP.store.dispatch(selectParticipantInLargeVideo(participant.id));
         },
         'set-participant-volume': (participantId, volume) => {
             APP.store.dispatch(setVolume(participantId, volume));

modules/API/external/external_api.js

@@ -1189,10 +1189,13 @@ export default class JitsiMeetExternalAPI extends EventEmitter {
      *
      * @param {string} participantId - Participant id (JID) of the participant
      * that needs to be pinned on the stage view.
+     * @param {string} [videoType] - Indicates the type of thumbnail to be pinned when multistream support is enabled.
+     * Accepts "camera" or "desktop" values. Default is "camera". Any invalid values will be ignored and default will
+     * be used.
      * @returns {void}
      */
-    pinParticipant(participantId) {
+    pinParticipant(participantId, videoType) {
-        this.executeCommand('pinParticipant', participantId);
+        this.executeCommand('pinParticipant', participantId, videoType);
     }
 
     /**
@@ -1283,10 +1286,13 @@ export default class JitsiMeetExternalAPI extends EventEmitter {
      * the large video participant.
      *
      * @param {string} participantId - Jid of the participant to be displayed on the large video.
+     * @param {string} [videoType] - Indicates the type of video to be set when multistream support is enabled.
+     * Accepts "camera" or "desktop" values. Default is "camera". Any invalid values will be ignored and default will
+     * be used.
      * @returns {void}
      */
-    setLargeVideoParticipant(participantId) {
+    setLargeVideoParticipant(participantId, videoType) {
-        this.executeCommand('setLargeVideoParticipant', participantId);
+        this.executeCommand('setLargeVideoParticipant', participantId, videoType);
     }
 
     /**