1251 lines
36 KiB
JavaScript
1251 lines
36 KiB
JavaScript
/* global APP, $, interfaceConfig */
|
|
const logger = require('jitsi-meet-logger').getLogger(__filename);
|
|
|
|
import {
|
|
JitsiParticipantConnectionStatus
|
|
} from '../../../react/features/base/lib-jitsi-meet';
|
|
import {
|
|
getPinnedParticipant,
|
|
pinParticipant
|
|
} from '../../../react/features/base/participants';
|
|
|
|
import Filmstrip from './Filmstrip';
|
|
import UIEvents from '../../../service/UI/UIEvents';
|
|
import UIUtil from '../util/UIUtil';
|
|
|
|
import RemoteVideo from './RemoteVideo';
|
|
import LargeVideoManager from './LargeVideoManager';
|
|
import { VIDEO_CONTAINER_TYPE } from './VideoContainer';
|
|
import LocalVideo from './LocalVideo';
|
|
|
|
const remoteVideos = {};
|
|
let localVideoThumbnail = null;
|
|
|
|
let currentDominantSpeaker = null;
|
|
|
|
let eventEmitter = null;
|
|
|
|
let largeVideo;
|
|
|
|
/**
|
|
* flipX state of the localVideo
|
|
*/
|
|
let localFlipX = null;
|
|
|
|
/**
|
|
* Handler for local flip X changed event.
|
|
* @param {Object} val
|
|
*/
|
|
function onLocalFlipXChanged(val) {
|
|
localFlipX = val;
|
|
if (largeVideo) {
|
|
largeVideo.onLocalFlipXChange(val);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Returns the corresponding resource id to the given peer container
|
|
* DOM element.
|
|
*
|
|
* @return the corresponding resource id to the given peer container
|
|
* DOM element
|
|
*/
|
|
function getPeerContainerResourceId(containerElement) {
|
|
if (localVideoThumbnail.container === containerElement) {
|
|
return localVideoThumbnail.id;
|
|
}
|
|
|
|
const i = containerElement.id.indexOf('participant_');
|
|
|
|
if (i >= 0) {
|
|
return containerElement.id.substring(i + 12);
|
|
}
|
|
}
|
|
|
|
const VideoLayout = {
|
|
init(emitter) {
|
|
eventEmitter = emitter;
|
|
|
|
// Unregister listeners in case of reinitialization
|
|
this.unregisterListeners();
|
|
|
|
localVideoThumbnail = new LocalVideo(VideoLayout, emitter);
|
|
|
|
// sets default video type of local video
|
|
// FIXME container type is totally different thing from the video type
|
|
localVideoThumbnail.setVideoType(VIDEO_CONTAINER_TYPE);
|
|
|
|
// if we do not resize the thumbs here, if there is no video device
|
|
// the local video thumb maybe one pixel
|
|
this.resizeThumbnails(false, true);
|
|
|
|
this._onContactClicked = onContactClicked.bind(this);
|
|
|
|
this.registerListeners();
|
|
},
|
|
|
|
/**
|
|
* Cleans up any existing largeVideo instance.
|
|
*
|
|
* @returns {void}
|
|
*/
|
|
resetLargeVideo() {
|
|
if (largeVideo) {
|
|
largeVideo.destroy();
|
|
}
|
|
largeVideo = null;
|
|
},
|
|
|
|
/**
|
|
* Registering listeners for UI events in Video layout component.
|
|
*
|
|
* @returns {void}
|
|
*/
|
|
registerListeners() {
|
|
eventEmitter.addListener(UIEvents.LOCAL_FLIPX_CHANGED,
|
|
onLocalFlipXChanged);
|
|
eventEmitter.addListener(UIEvents.CONTACT_CLICKED,
|
|
this._onContactClicked);
|
|
},
|
|
|
|
/**
|
|
* Unregistering listeners for UI events in Video layout component.
|
|
*
|
|
* @returns {void}
|
|
*/
|
|
unregisterListeners() {
|
|
if (this._onContactClicked) {
|
|
eventEmitter.removeListener(UIEvents.CONTACT_CLICKED,
|
|
this._onContactClicked);
|
|
}
|
|
},
|
|
|
|
initLargeVideo() {
|
|
this.resetLargeVideo();
|
|
|
|
largeVideo = new LargeVideoManager(eventEmitter);
|
|
if (localFlipX) {
|
|
largeVideo.onLocalFlipXChange(localFlipX);
|
|
}
|
|
largeVideo.updateContainerSize();
|
|
},
|
|
|
|
/**
|
|
* Sets the audio level of the video elements associated to the given id.
|
|
*
|
|
* @param id the video identifier in the form it comes from the library
|
|
* @param lvl the new audio level to update to
|
|
*/
|
|
setAudioLevel(id, lvl) {
|
|
const smallVideo = this.getSmallVideo(id);
|
|
|
|
if (smallVideo) {
|
|
smallVideo.updateAudioLevelIndicator(lvl);
|
|
}
|
|
|
|
if (largeVideo && id === largeVideo.id) {
|
|
largeVideo.updateLargeVideoAudioLevel(lvl);
|
|
}
|
|
},
|
|
|
|
changeLocalVideo(stream) {
|
|
const localId = APP.conference.getMyUserId();
|
|
|
|
this.onVideoTypeChanged(localId, stream.videoType);
|
|
|
|
localVideoThumbnail.changeVideo(stream);
|
|
|
|
/* Update if we're currently being displayed */
|
|
if (this.isCurrentlyOnLarge(localId)) {
|
|
this.updateLargeVideo(localId);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Get's the localID of the conference and set it to the local video
|
|
* (small one). This needs to be called as early as possible, when muc is
|
|
* actually joined. Otherwise events can come with information like email
|
|
* and setting them assume the id is already set.
|
|
*/
|
|
mucJoined() {
|
|
if (largeVideo && !largeVideo.id) {
|
|
this.updateLargeVideo(APP.conference.getMyUserId(), true);
|
|
}
|
|
|
|
// FIXME: replace this call with a generic update call once SmallVideo
|
|
// only contains a ReactElement. Then remove this call once the
|
|
// Filmstrip is fully in React.
|
|
localVideoThumbnail.updateIndicators();
|
|
},
|
|
|
|
/**
|
|
* Adds or removes icons for not available camera and microphone.
|
|
* @param resourceJid the jid of user
|
|
* @param devices available devices
|
|
*/
|
|
setDeviceAvailabilityIcons(id, devices) {
|
|
if (APP.conference.isLocalId(id)) {
|
|
localVideoThumbnail.setDeviceAvailabilityIcons(devices);
|
|
|
|
return;
|
|
}
|
|
|
|
const video = remoteVideos[id];
|
|
|
|
if (!video) {
|
|
return;
|
|
}
|
|
|
|
video.setDeviceAvailabilityIcons(devices);
|
|
},
|
|
|
|
/**
|
|
* Enables/disables device availability icons for the given participant id.
|
|
* The default value is {true}.
|
|
* @param id the identifier of the participant
|
|
* @param enable {true} to enable device availability icons
|
|
*/
|
|
enableDeviceAvailabilityIcons(id, enable) {
|
|
let video;
|
|
|
|
if (APP.conference.isLocalId(id)) {
|
|
video = localVideoThumbnail;
|
|
} else {
|
|
video = remoteVideos[id];
|
|
}
|
|
|
|
if (video) {
|
|
video.enableDeviceAvailabilityIcons(enable);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Shows/hides local video.
|
|
* @param {boolean} true to make the local video visible, false - otherwise
|
|
*/
|
|
setLocalVideoVisible(visible) {
|
|
localVideoThumbnail.setVisible(visible);
|
|
},
|
|
|
|
/**
|
|
* Checks if removed video is currently displayed and tries to display
|
|
* another one instead.
|
|
* Uses focusedID if any or dominantSpeakerID if any,
|
|
* otherwise elects new video, in this order.
|
|
*/
|
|
updateAfterThumbRemoved(id) {
|
|
// Always trigger an update if large video is empty.
|
|
if (!largeVideo
|
|
|| (this.getLargeVideoID() && !this.isCurrentlyOnLarge(id))) {
|
|
return;
|
|
}
|
|
|
|
const pinnedId = this.getPinnedId();
|
|
let newId;
|
|
|
|
if (pinnedId) {
|
|
newId = pinnedId;
|
|
} else if (currentDominantSpeaker) {
|
|
newId = currentDominantSpeaker;
|
|
} else { // Otherwise select last visible video
|
|
newId = this.electLastVisibleVideo();
|
|
}
|
|
|
|
this.updateLargeVideo(newId);
|
|
},
|
|
|
|
electLastVisibleVideo() {
|
|
// pick the last visible video in the row
|
|
// if nobody else is left, this picks the local video
|
|
const remoteThumbs = Filmstrip.getThumbs(true).remoteThumbs;
|
|
let thumbs = remoteThumbs.filter('[id!="mixedstream"]');
|
|
|
|
const lastVisible = thumbs.filter(':visible:last');
|
|
|
|
if (lastVisible.length) {
|
|
const id = getPeerContainerResourceId(lastVisible[0]);
|
|
|
|
if (remoteVideos[id]) {
|
|
logger.info(`electLastVisibleVideo: ${id}`);
|
|
|
|
return id;
|
|
}
|
|
|
|
// The RemoteVideo was removed (but the DOM elements may still
|
|
// exist).
|
|
}
|
|
|
|
logger.info('Last visible video no longer exists');
|
|
thumbs = Filmstrip.getThumbs().remoteThumbs;
|
|
if (thumbs.length) {
|
|
const id = getPeerContainerResourceId(thumbs[0]);
|
|
|
|
if (remoteVideos[id]) {
|
|
logger.info(`electLastVisibleVideo: ${id}`);
|
|
|
|
return id;
|
|
}
|
|
|
|
// The RemoteVideo was removed (but the DOM elements may
|
|
// still exist).
|
|
}
|
|
|
|
// Go with local video
|
|
logger.info('Fallback to local video...');
|
|
|
|
const id = APP.conference.getMyUserId();
|
|
|
|
logger.info(`electLastVisibleVideo: ${id}`);
|
|
|
|
return id;
|
|
},
|
|
|
|
onRemoteStreamAdded(stream) {
|
|
const id = stream.getParticipantId();
|
|
const remoteVideo = remoteVideos[id];
|
|
|
|
if (!remoteVideo) {
|
|
return;
|
|
}
|
|
|
|
remoteVideo.addRemoteStreamElement(stream);
|
|
|
|
// Make sure track's muted state is reflected
|
|
if (stream.getType() === 'audio') {
|
|
this.onAudioMute(stream.getParticipantId(), stream.isMuted());
|
|
} else {
|
|
this.onVideoMute(stream.getParticipantId(), stream.isMuted());
|
|
}
|
|
},
|
|
|
|
onRemoteStreamRemoved(stream) {
|
|
const id = stream.getParticipantId();
|
|
const remoteVideo = remoteVideos[id];
|
|
|
|
// Remote stream may be removed after participant left the conference.
|
|
|
|
if (remoteVideo) {
|
|
remoteVideo.removeRemoteStreamElement(stream);
|
|
}
|
|
this.updateMutedForNoTracks(id, stream.getType());
|
|
},
|
|
|
|
/**
|
|
* FIXME get rid of this method once muted indicator are reactified (by
|
|
* making sure that user with no tracks is displayed as muted )
|
|
*
|
|
* If participant has no tracks will make the UI display muted status.
|
|
* @param {string} participantId
|
|
* @param {string} mediaType 'audio' or 'video'
|
|
*/
|
|
updateMutedForNoTracks(participantId, mediaType) {
|
|
const participant = APP.conference.getParticipantById(participantId);
|
|
|
|
if (participant
|
|
&& !participant.getTracksByMediaType(mediaType).length) {
|
|
if (mediaType === 'audio') {
|
|
APP.UI.setAudioMuted(participantId, true);
|
|
} else if (mediaType === 'video') {
|
|
APP.UI.setVideoMuted(participantId, true);
|
|
} else {
|
|
logger.error(`Unsupported media type: ${mediaType}`);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Return the type of the remote video.
|
|
* @param id the id for the remote video
|
|
* @returns {String} the video type video or screen.
|
|
*/
|
|
getRemoteVideoType(id) {
|
|
const smallVideo = VideoLayout.getSmallVideo(id);
|
|
|
|
|
|
return smallVideo ? smallVideo.getVideoType() : null;
|
|
},
|
|
|
|
isPinned(id) {
|
|
return id === this.getPinnedId();
|
|
},
|
|
|
|
getPinnedId() {
|
|
const { id } = getPinnedParticipant(APP.store.getState()) || {};
|
|
|
|
return id || null;
|
|
},
|
|
|
|
/**
|
|
* Updates the desired pinned participant and notifies web UI of the change.
|
|
*
|
|
* @param {string|null} id - The participant id of the participant to be
|
|
* pinned. Pass in null to unpin without pinning another participant.
|
|
* @returns {void}
|
|
*/
|
|
pinParticipant(id) {
|
|
APP.store.dispatch(pinParticipant(id));
|
|
APP.UI.emitEvent(UIEvents.PINNED_ENDPOINT, id, Boolean(id));
|
|
},
|
|
|
|
/**
|
|
* Handles the click on a video thumbnail.
|
|
*
|
|
* @param id the identifier of the video thumbnail
|
|
*/
|
|
handleVideoThumbClicked(id) {
|
|
const smallVideo = VideoLayout.getSmallVideo(id);
|
|
const pinnedId = this.getPinnedId();
|
|
|
|
if (pinnedId) {
|
|
const oldSmallVideo = VideoLayout.getSmallVideo(pinnedId);
|
|
|
|
if (oldSmallVideo && !interfaceConfig.filmStripOnly) {
|
|
oldSmallVideo.focus(false);
|
|
}
|
|
}
|
|
|
|
// Unpin if currently pinned.
|
|
if (pinnedId === id) {
|
|
this.pinParticipant(null);
|
|
|
|
// Enable the currently set dominant speaker.
|
|
if (currentDominantSpeaker) {
|
|
if (smallVideo && smallVideo.hasVideo()) {
|
|
this.updateLargeVideo(currentDominantSpeaker);
|
|
}
|
|
} else {
|
|
// if there is no currentDominantSpeaker, it can also be
|
|
// that local participant is the dominant speaker
|
|
// we should act as a participant has left and was on large
|
|
// and we should choose somebody (electLastVisibleVideo)
|
|
this.updateLargeVideo(this.electLastVisibleVideo());
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
// Update focused/pinned interface.
|
|
if (id) {
|
|
if (smallVideo && !interfaceConfig.filmStripOnly) {
|
|
smallVideo.focus(true);
|
|
this.pinParticipant(id);
|
|
}
|
|
}
|
|
|
|
this.updateLargeVideo(id);
|
|
},
|
|
|
|
/**
|
|
* Creates or adds a participant container for the given id and smallVideo.
|
|
*
|
|
* @param {JitsiParticipant} user the participant to add
|
|
* @param {SmallVideo} smallVideo optional small video instance to add as a
|
|
* remote video, if undefined <tt>RemoteVideo</tt> will be created
|
|
*/
|
|
addParticipantContainer(user, smallVideo) {
|
|
const id = user.getId();
|
|
let remoteVideo;
|
|
|
|
if (smallVideo) {
|
|
remoteVideo = smallVideo;
|
|
} else {
|
|
remoteVideo = new RemoteVideo(user, VideoLayout, eventEmitter);
|
|
}
|
|
this._setRemoteControlProperties(user, remoteVideo);
|
|
this.addRemoteVideoContainer(id, remoteVideo);
|
|
|
|
this.updateMutedForNoTracks(id, 'audio');
|
|
this.updateMutedForNoTracks(id, 'video');
|
|
|
|
const remoteVideosCount = Object.keys(remoteVideos).length;
|
|
|
|
if (remoteVideosCount === 1) {
|
|
window.setTimeout(() => {
|
|
const updatedRemoteVideosCount
|
|
= Object.keys(remoteVideos).length;
|
|
|
|
if (updatedRemoteVideosCount === 1 && remoteVideos[id]) {
|
|
this._maybePlaceParticipantOnLargeVideo(id);
|
|
}
|
|
}, 3000);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Adds remote video container for the given id and <tt>SmallVideo</tt>.
|
|
*
|
|
* @param {string} the id of the video to add
|
|
* @param {SmallVideo} smallVideo the small video instance to add as a
|
|
* remote video
|
|
*/
|
|
addRemoteVideoContainer(id, remoteVideo) {
|
|
remoteVideos[id] = remoteVideo;
|
|
|
|
if (!remoteVideo.getVideoType()) {
|
|
// make video type the default one (camera)
|
|
// FIXME container type is not a video type
|
|
remoteVideo.setVideoType(VIDEO_CONTAINER_TYPE);
|
|
}
|
|
|
|
VideoLayout.resizeThumbnails(false, true);
|
|
|
|
// Initialize the view
|
|
remoteVideo.updateView();
|
|
},
|
|
|
|
// FIXME: what does this do???
|
|
remoteVideoActive(videoElement, resourceJid) {
|
|
|
|
logger.info(`${resourceJid} video is now active`, videoElement);
|
|
|
|
VideoLayout.resizeThumbnails(
|
|
false, false, () => {
|
|
if (videoElement) {
|
|
$(videoElement).show();
|
|
}
|
|
});
|
|
|
|
this._maybePlaceParticipantOnLargeVideo(resourceJid);
|
|
},
|
|
|
|
/**
|
|
* Update the large video to the last added video only if there's no current
|
|
* dominant, focused speaker or update it to the current dominant speaker.
|
|
*
|
|
* @params {string} resourceJid - The id of the user to maybe display on
|
|
* large video.
|
|
* @returns {void}
|
|
*/
|
|
_maybePlaceParticipantOnLargeVideo(resourceJid) {
|
|
const pinnedId = this.getPinnedId();
|
|
|
|
if ((!pinnedId
|
|
&& !currentDominantSpeaker
|
|
&& this.isLargeContainerTypeVisible(VIDEO_CONTAINER_TYPE))
|
|
|| pinnedId === resourceJid
|
|
|| (!pinnedId && resourceJid
|
|
&& currentDominantSpeaker === resourceJid)
|
|
|
|
/* Playback started while we're on the stage - may need to update
|
|
video source with the new stream */
|
|
|| this.isCurrentlyOnLarge(resourceJid)) {
|
|
|
|
this.updateLargeVideo(resourceJid, true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Shows a visual indicator for the moderator of the conference.
|
|
* On local or remote participants.
|
|
*/
|
|
showModeratorIndicator() {
|
|
const isModerator = APP.conference.isModerator;
|
|
|
|
if (isModerator) {
|
|
localVideoThumbnail.addModeratorIndicator();
|
|
} else {
|
|
localVideoThumbnail.removeModeratorIndicator();
|
|
}
|
|
|
|
APP.conference.listMembers().forEach(member => {
|
|
const id = member.getId();
|
|
const remoteVideo = remoteVideos[id];
|
|
|
|
if (!remoteVideo) {
|
|
return;
|
|
}
|
|
|
|
if (member.isModerator()) {
|
|
remoteVideo.addModeratorIndicator();
|
|
}
|
|
|
|
if (isModerator) {
|
|
// We are moderator, but user is not - add menu
|
|
if (!remoteVideo.hasRemoteVideoMenu) {
|
|
remoteVideo.addRemoteVideoMenu();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
/*
|
|
* Shows or hides the audio muted indicator over the local thumbnail video.
|
|
* @param {boolean} isMuted
|
|
*/
|
|
showLocalAudioIndicator(isMuted) {
|
|
localVideoThumbnail.showAudioIndicator(isMuted);
|
|
},
|
|
|
|
/**
|
|
* Shows/hides the indication about local connection being interrupted.
|
|
*
|
|
* @param {boolean} isInterrupted <tt>true</tt> if local connection is
|
|
* currently in the interrupted state or <tt>false</tt> if the connection
|
|
* is fine.
|
|
*/
|
|
showLocalConnectionInterrupted(isInterrupted) {
|
|
// Currently local video thumbnail displays only "active" or
|
|
// "interrupted" despite the fact that ConnectionIndicator supports more
|
|
// states.
|
|
const status
|
|
= isInterrupted
|
|
? JitsiParticipantConnectionStatus.INTERRUPTED
|
|
: JitsiParticipantConnectionStatus.ACTIVE;
|
|
|
|
localVideoThumbnail.updateConnectionStatus(status);
|
|
},
|
|
|
|
/**
|
|
* Resizes thumbnails.
|
|
*/
|
|
resizeThumbnails(
|
|
animate = false,
|
|
forceUpdate = false,
|
|
onComplete = null) {
|
|
const { localVideo, remoteVideo }
|
|
= Filmstrip.calculateThumbnailSize();
|
|
|
|
Filmstrip.resizeThumbnails(localVideo, remoteVideo,
|
|
animate, forceUpdate)
|
|
.then(() => {
|
|
if (onComplete && typeof onComplete === 'function') {
|
|
onComplete();
|
|
}
|
|
});
|
|
|
|
return { localVideo,
|
|
remoteVideo };
|
|
},
|
|
|
|
/**
|
|
* On audio muted event.
|
|
*/
|
|
onAudioMute(id, isMuted) {
|
|
if (APP.conference.isLocalId(id)) {
|
|
localVideoThumbnail.showAudioIndicator(isMuted);
|
|
} else {
|
|
const remoteVideo = remoteVideos[id];
|
|
|
|
if (!remoteVideo) {
|
|
return;
|
|
}
|
|
|
|
remoteVideo.showAudioIndicator(isMuted);
|
|
remoteVideo.updateRemoteVideoMenu(isMuted);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* On video muted event.
|
|
*/
|
|
onVideoMute(id, value) {
|
|
if (APP.conference.isLocalId(id)) {
|
|
localVideoThumbnail.setVideoMutedView(value);
|
|
} else {
|
|
const remoteVideo = remoteVideos[id];
|
|
|
|
if (remoteVideo) {
|
|
remoteVideo.setVideoMutedView(value);
|
|
}
|
|
}
|
|
|
|
if (this.isCurrentlyOnLarge(id)) {
|
|
// large video will show avatar instead of muted stream
|
|
this.updateLargeVideo(id, true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Display name changed.
|
|
*/
|
|
onDisplayNameChanged(id, displayName, status) {
|
|
if (id === 'localVideoContainer'
|
|
|| APP.conference.isLocalId(id)) {
|
|
localVideoThumbnail.setDisplayName(displayName);
|
|
} else {
|
|
const remoteVideo = remoteVideos[id];
|
|
|
|
if (remoteVideo) {
|
|
remoteVideo.setDisplayName(displayName, status);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets the "raised hand" status for a participant identified by 'id'.
|
|
*/
|
|
setRaisedHandStatus(id, raisedHandStatus) {
|
|
const video
|
|
= APP.conference.isLocalId(id)
|
|
? localVideoThumbnail : remoteVideos[id];
|
|
|
|
if (video) {
|
|
video.showRaisedHandIndicator(raisedHandStatus);
|
|
if (raisedHandStatus) {
|
|
video.showDominantSpeakerIndicator(false);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* On dominant speaker changed event.
|
|
*/
|
|
onDominantSpeakerChanged(id) {
|
|
if (id === currentDominantSpeaker) {
|
|
return;
|
|
}
|
|
|
|
const oldSpeakerRemoteVideo = remoteVideos[currentDominantSpeaker];
|
|
|
|
// We ignore local user events, but just unmark remote user as dominant
|
|
// while we are talking
|
|
|
|
if (APP.conference.isLocalId(id)) {
|
|
if (oldSpeakerRemoteVideo) {
|
|
oldSpeakerRemoteVideo.showDominantSpeakerIndicator(false);
|
|
currentDominantSpeaker = null;
|
|
}
|
|
localVideoThumbnail.showDominantSpeakerIndicator(true);
|
|
|
|
return;
|
|
}
|
|
|
|
const remoteVideo = remoteVideos[id];
|
|
|
|
if (!remoteVideo) {
|
|
return;
|
|
}
|
|
|
|
// Update the current dominant speaker.
|
|
remoteVideo.showDominantSpeakerIndicator(true);
|
|
localVideoThumbnail.showDominantSpeakerIndicator(false);
|
|
|
|
// let's remove the indications from the remote video if any
|
|
if (oldSpeakerRemoteVideo) {
|
|
oldSpeakerRemoteVideo.showDominantSpeakerIndicator(false);
|
|
}
|
|
currentDominantSpeaker = id;
|
|
|
|
// Local video will not have container found, but that's ok
|
|
// since we don't want to switch to local video.
|
|
// Update the large video if the video source is already available,
|
|
// otherwise wait for the "videoactive.jingle" event.
|
|
// FIXME: there is no "videoactive.jingle" event.
|
|
if (!interfaceConfig.filmStripOnly && !this.getPinnedId()
|
|
&& remoteVideo.hasVideoStarted()
|
|
&& !this.getCurrentlyOnLargeContainer().stayOnStage()) {
|
|
this.updateLargeVideo(id);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Shows/hides warning about remote user's connectivity issues.
|
|
*
|
|
* @param {string} id the ID of the remote participant(MUC nickname)
|
|
*/
|
|
// eslint-disable-next-line no-unused-vars
|
|
onParticipantConnectionStatusChanged(id) {
|
|
// Show/hide warning on the large video
|
|
if (this.isCurrentlyOnLarge(id)) {
|
|
if (largeVideo) {
|
|
// We have to trigger full large video update to transition from
|
|
// avatar to video on connectivity restored.
|
|
this.updateLargeVideo(id, true /* force update */);
|
|
}
|
|
}
|
|
|
|
// Show/hide warning on the thumbnail
|
|
const remoteVideo = remoteVideos[id];
|
|
|
|
if (remoteVideo) {
|
|
// Updating only connection status indicator is not enough, because
|
|
// when we the connection is restored while the avatar was displayed
|
|
// (due to 'muted while disconnected' condition) we may want to show
|
|
// the video stream again and in order to do that the display mode
|
|
// must be updated.
|
|
// remoteVideo.updateConnectionStatusIndicator(isActive);
|
|
remoteVideo.updateView();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* On last N change event.
|
|
*
|
|
* @param endpointsLeavingLastN the list currently leaving last N
|
|
* endpoints
|
|
* @param endpointsEnteringLastN the list currently entering last N
|
|
* endpoints
|
|
*/
|
|
onLastNEndpointsChanged(endpointsLeavingLastN, endpointsEnteringLastN) {
|
|
if (endpointsLeavingLastN) {
|
|
endpointsLeavingLastN.forEach(this._updateRemoteVideo, this);
|
|
}
|
|
|
|
if (endpointsEnteringLastN) {
|
|
endpointsEnteringLastN.forEach(this._updateRemoteVideo, this);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Updates remote video by id if it exists.
|
|
* @param {string} id of the remote video
|
|
* @private
|
|
*/
|
|
_updateRemoteVideo(id) {
|
|
const remoteVideo = remoteVideos[id];
|
|
|
|
if (remoteVideo) {
|
|
remoteVideo.updateView();
|
|
if (remoteVideo.isCurrentlyOnLargeVideo()) {
|
|
this.updateLargeVideo(id);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Hides the connection indicator
|
|
* @param id
|
|
*/
|
|
hideConnectionIndicator(id) {
|
|
const remoteVideo = remoteVideos[id];
|
|
|
|
if (remoteVideo) {
|
|
remoteVideo.removeConnectionIndicator();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Hides all the indicators
|
|
*/
|
|
hideStats() {
|
|
for (const video in remoteVideos) { // eslint-disable-line guard-for-in
|
|
const remoteVideo = remoteVideos[video];
|
|
|
|
if (remoteVideo) {
|
|
remoteVideo.removeConnectionIndicator();
|
|
}
|
|
}
|
|
localVideoThumbnail.removeConnectionIndicator();
|
|
},
|
|
|
|
removeParticipantContainer(id) {
|
|
// Unlock large video
|
|
if (this.getPinnedId() === id) {
|
|
logger.info('Focused video owner has left the conference');
|
|
this.pinParticipant(null);
|
|
}
|
|
|
|
if (currentDominantSpeaker === id) {
|
|
logger.info('Dominant speaker has left the conference');
|
|
currentDominantSpeaker = null;
|
|
}
|
|
|
|
const remoteVideo = remoteVideos[id];
|
|
|
|
if (remoteVideo) {
|
|
// Remove remote video
|
|
logger.info(`Removing remote video: ${id}`);
|
|
delete remoteVideos[id];
|
|
remoteVideo.remove();
|
|
} else {
|
|
logger.warn(`No remote video for ${id}`);
|
|
}
|
|
|
|
VideoLayout.resizeThumbnails();
|
|
},
|
|
|
|
onVideoTypeChanged(id, newVideoType) {
|
|
if (VideoLayout.getRemoteVideoType(id) === newVideoType) {
|
|
return;
|
|
}
|
|
|
|
logger.info('Peer video type changed: ', id, newVideoType);
|
|
|
|
let smallVideo;
|
|
|
|
if (APP.conference.isLocalId(id)) {
|
|
if (!localVideoThumbnail) {
|
|
logger.warn('Local video not ready yet');
|
|
|
|
return;
|
|
}
|
|
smallVideo = localVideoThumbnail;
|
|
} else if (remoteVideos[id]) {
|
|
smallVideo = remoteVideos[id];
|
|
} else {
|
|
return;
|
|
}
|
|
smallVideo.setVideoType(newVideoType);
|
|
|
|
if (this.isCurrentlyOnLarge(id)) {
|
|
this.updateLargeVideo(id, true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Resizes the video area.
|
|
*
|
|
* @param forceUpdate indicates that hidden thumbnails will be shown
|
|
* @param completeFunction a function to be called when the video area is
|
|
* resized.
|
|
*/
|
|
resizeVideoArea(
|
|
forceUpdate = false,
|
|
animate = false,
|
|
completeFunction = null) {
|
|
if (largeVideo) {
|
|
largeVideo.updateContainerSize();
|
|
largeVideo.resize(animate);
|
|
}
|
|
|
|
// Calculate available width and height.
|
|
const availableHeight = window.innerHeight;
|
|
const availableWidth = UIUtil.getAvailableVideoWidth();
|
|
|
|
if (availableWidth < 0 || availableHeight < 0) {
|
|
return;
|
|
}
|
|
|
|
// Resize the thumbnails first.
|
|
this.resizeThumbnails(false, forceUpdate);
|
|
|
|
// Resize the video area element.
|
|
$('#videospace').animate({
|
|
right: window.innerWidth - availableWidth,
|
|
width: availableWidth,
|
|
height: availableHeight
|
|
}, {
|
|
queue: false,
|
|
duration: animate ? 500 : 1,
|
|
complete: completeFunction
|
|
});
|
|
},
|
|
|
|
getSmallVideo(id) {
|
|
if (APP.conference.isLocalId(id)) {
|
|
return localVideoThumbnail;
|
|
}
|
|
|
|
return remoteVideos[id];
|
|
|
|
},
|
|
|
|
changeUserAvatar(id, avatarUrl) {
|
|
const smallVideo = VideoLayout.getSmallVideo(id);
|
|
|
|
if (smallVideo) {
|
|
smallVideo.avatarChanged(avatarUrl);
|
|
} else {
|
|
logger.warn(
|
|
`Missed avatar update - no small video yet for ${id}`
|
|
);
|
|
}
|
|
if (this.isCurrentlyOnLarge(id)) {
|
|
largeVideo.updateAvatar(avatarUrl);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Indicates that the video has been interrupted.
|
|
*/
|
|
onVideoInterrupted() {
|
|
if (largeVideo) {
|
|
largeVideo.onVideoInterrupted();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Indicates that the video has been restored.
|
|
*/
|
|
onVideoRestored() {
|
|
if (largeVideo) {
|
|
largeVideo.onVideoRestored();
|
|
}
|
|
},
|
|
|
|
isLargeVideoVisible() {
|
|
return this.isLargeContainerTypeVisible(VIDEO_CONTAINER_TYPE);
|
|
},
|
|
|
|
/**
|
|
* @return {LargeContainer} the currently displayed container on large
|
|
* video.
|
|
*/
|
|
getCurrentlyOnLargeContainer() {
|
|
return largeVideo.getCurrentContainer();
|
|
},
|
|
|
|
isCurrentlyOnLarge(id) {
|
|
return largeVideo && largeVideo.id === id;
|
|
},
|
|
|
|
/**
|
|
* Triggers an update of remote video and large video displays so they may
|
|
* pick up any state changes that have occurred elsewhere.
|
|
*
|
|
* @returns {void}
|
|
*/
|
|
updateAllVideos() {
|
|
const displayedUserId = this.getLargeVideoID();
|
|
|
|
if (displayedUserId) {
|
|
this.updateLargeVideo(displayedUserId, true);
|
|
}
|
|
|
|
Object.keys(remoteVideos).forEach(video => {
|
|
remoteVideos[video].updateView();
|
|
});
|
|
},
|
|
|
|
updateLargeVideo(id, forceUpdate) {
|
|
if (!largeVideo) {
|
|
return;
|
|
}
|
|
const currentContainer = largeVideo.getCurrentContainer();
|
|
const currentContainerType = largeVideo.getCurrentContainerType();
|
|
const currentId = largeVideo.id;
|
|
const isOnLarge = this.isCurrentlyOnLarge(id);
|
|
const smallVideo = this.getSmallVideo(id);
|
|
|
|
if (isOnLarge && !forceUpdate
|
|
&& LargeVideoManager.isVideoContainer(currentContainerType)
|
|
&& smallVideo) {
|
|
const currentStreamId = currentContainer.getStreamID();
|
|
const newStreamId
|
|
= smallVideo.videoStream
|
|
? smallVideo.videoStream.getId() : null;
|
|
|
|
// FIXME it might be possible to get rid of 'forceUpdate' argument
|
|
if (currentStreamId !== newStreamId) {
|
|
logger.debug('Enforcing large video update for stream change');
|
|
forceUpdate = true; // eslint-disable-line no-param-reassign
|
|
}
|
|
}
|
|
|
|
if (!isOnLarge || forceUpdate) {
|
|
const videoType = this.getRemoteVideoType(id);
|
|
|
|
// FIXME video type is not the same thing as container type
|
|
|
|
if (id !== currentId && videoType === VIDEO_CONTAINER_TYPE) {
|
|
eventEmitter.emit(UIEvents.SELECTED_ENDPOINT, id);
|
|
}
|
|
|
|
let oldSmallVideo;
|
|
|
|
if (currentId) {
|
|
oldSmallVideo = this.getSmallVideo(currentId);
|
|
}
|
|
|
|
smallVideo.waitForResolutionChange();
|
|
if (oldSmallVideo) {
|
|
oldSmallVideo.waitForResolutionChange();
|
|
}
|
|
|
|
largeVideo.updateLargeVideo(
|
|
id,
|
|
smallVideo.videoStream,
|
|
videoType
|
|
).then(() => {
|
|
// update current small video and the old one
|
|
smallVideo.updateView();
|
|
oldSmallVideo && oldSmallVideo.updateView();
|
|
}, () => {
|
|
// use clicked other video during update, nothing to do.
|
|
});
|
|
|
|
} else if (currentId) {
|
|
const currentSmallVideo = this.getSmallVideo(currentId);
|
|
|
|
currentSmallVideo.updateView();
|
|
}
|
|
},
|
|
|
|
addLargeVideoContainer(type, container) {
|
|
largeVideo && largeVideo.addContainer(type, container);
|
|
},
|
|
|
|
removeLargeVideoContainer(type) {
|
|
largeVideo && largeVideo.removeContainer(type);
|
|
},
|
|
|
|
/**
|
|
* @returns Promise
|
|
*/
|
|
showLargeVideoContainer(type, show) {
|
|
if (!largeVideo) {
|
|
return Promise.reject();
|
|
}
|
|
|
|
const isVisible = this.isLargeContainerTypeVisible(type);
|
|
|
|
if (isVisible === show) {
|
|
return Promise.resolve();
|
|
}
|
|
|
|
const currentId = largeVideo.id;
|
|
let oldSmallVideo;
|
|
|
|
if (currentId) {
|
|
oldSmallVideo = this.getSmallVideo(currentId);
|
|
}
|
|
|
|
let containerTypeToShow = type;
|
|
|
|
// if we are hiding a container and there is focusedVideo
|
|
// (pinned remote video) use its video type,
|
|
// if not then use default type - large video
|
|
|
|
if (!show) {
|
|
const pinnedId = this.getPinnedId();
|
|
|
|
if (pinnedId) {
|
|
containerTypeToShow = this.getRemoteVideoType(pinnedId);
|
|
} else {
|
|
containerTypeToShow = VIDEO_CONTAINER_TYPE;
|
|
}
|
|
}
|
|
|
|
return largeVideo.showContainer(containerTypeToShow)
|
|
.then(() => {
|
|
if (oldSmallVideo) {
|
|
oldSmallVideo && oldSmallVideo.updateView();
|
|
}
|
|
});
|
|
},
|
|
|
|
isLargeContainerTypeVisible(type) {
|
|
return largeVideo && largeVideo.state === type;
|
|
},
|
|
|
|
/**
|
|
* Returns the id of the current video shown on large.
|
|
* Currently used by tests (torture).
|
|
*/
|
|
getLargeVideoID() {
|
|
return largeVideo.id;
|
|
},
|
|
|
|
/**
|
|
* Returns the the current video shown on large.
|
|
* Currently used by tests (torture).
|
|
*/
|
|
getLargeVideo() {
|
|
return largeVideo;
|
|
},
|
|
|
|
/**
|
|
* Sets the flipX state of the local video.
|
|
* @param {boolean} true for flipped otherwise false;
|
|
*/
|
|
setLocalFlipX(val) {
|
|
this.localFlipX = val;
|
|
},
|
|
|
|
getEventEmitter() {
|
|
return eventEmitter;
|
|
},
|
|
|
|
/**
|
|
* 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));
|
|
},
|
|
|
|
/**
|
|
* Returns the wrapper jquery selector for the largeVideo
|
|
* @returns {JQuerySelector} the wrapper jquery selector for the largeVideo
|
|
*/
|
|
getLargeVideoWrapper() {
|
|
return this.getCurrentlyOnLargeContainer().$wrapper;
|
|
},
|
|
|
|
/**
|
|
* Returns the number of remove video ids.
|
|
*
|
|
* @returns {number} The number of remote videos.
|
|
*/
|
|
getRemoteVideosCount() {
|
|
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()
|
|
);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* On contact list item clicked.
|
|
*/
|
|
function onContactClicked(id) {
|
|
if (APP.conference.isLocalId(id)) {
|
|
$('#localVideoContainer').click();
|
|
|
|
return;
|
|
}
|
|
|
|
const remoteVideo = remoteVideos[id];
|
|
|
|
if (remoteVideo && remoteVideo.hasVideo()) {
|
|
// It is not always the case that a videoThumb exists (if there is
|
|
// no actual video).
|
|
if (remoteVideo.hasVideoStarted()) {
|
|
// We have a video src, great! Let's update the large video
|
|
// now.
|
|
VideoLayout.handleVideoThumbClicked(id);
|
|
} else {
|
|
|
|
// If we don't have a video src for jid, there's absolutely
|
|
// no point in calling handleVideoThumbClicked; Quite
|
|
// simply, it won't work because it needs an src to attach
|
|
// to the large video.
|
|
//
|
|
// Instead, we trigger the pinned endpoint changed event to
|
|
// let the bridge adjust its lastN set for myjid and store
|
|
// the pinned user in the lastNPickupId variable to be
|
|
// picked up later by the lastN changed event handler.
|
|
// eslint-disable-next-line no-invalid-this
|
|
this.pinParticipant(remoteVideo.id);
|
|
}
|
|
}
|
|
}
|
|
|
|
export default VideoLayout;
|