fix(iframeAPI): pinParticipant & setLargeVideo

Add the ability to specify video type when in multistream mode.
This commit is contained in:
Hristo Terezov 2022-11-01 16:47:49 -05:00
parent 2b3989e5e6
commit 49bcf5c179
2 changed files with 50 additions and 10 deletions

View File

@ -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));

View File

@ -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) {
this.executeCommand('pinParticipant', participantId);
pinParticipant(participantId, videoType) {
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) {
this.executeCommand('setLargeVideoParticipant', participantId);
setLargeVideoParticipant(participantId, videoType) {
this.executeCommand('setLargeVideoParticipant', participantId, videoType);
}
/**