jiti-meet/modules/UI/videolayout/VideoLayout.js

1160 lines
37 KiB
JavaScript
Raw Normal View History

/* global config, APP, $, interfaceConfig */
import FilmStrip from "./FilmStrip";
2015-12-14 12:26:50 +00:00
import UIEvents from "../../../service/UI/UIEvents";
import UIUtil from "../util/UIUtil";
2015-06-23 08:00:46 +00:00
2015-12-14 12:26:50 +00:00
import RemoteVideo from "./RemoteVideo";
import LargeVideoManager from "./LargeVideoManager";
import {VIDEO_CONTAINER_TYPE} from "./VideoContainer";
2015-12-14 12:26:50 +00:00
import LocalVideo from "./LocalVideo";
2015-06-23 08:00:46 +00:00
var remoteVideos = {};
var localVideoThumbnail = null;
2015-01-07 14:54:03 +00:00
var currentDominantSpeaker = null;
var localLastNCount = config.channelLastN;
var localLastNSet = [];
var lastNEndpointsCache = [];
2015-12-14 12:26:50 +00:00
var lastNPickupId = null;
var eventEmitter = null;
2015-01-07 14:54:03 +00:00
/**
2015-06-23 08:00:46 +00:00
* Currently focused video jid
* @type {String}
2015-01-07 14:54:03 +00:00
*/
var pinnedId = null;
/**
* flipX state of the localVideo
*/
let localFlipX = null;
2015-12-14 12:26:50 +00:00
/**
* On contact list item clicked.
*/
2015-12-14 15:40:30 +00:00
function onContactClicked (id) {
2015-12-14 12:26:50 +00:00
if (APP.conference.isLocalId(id)) {
$("#localVideoContainer").click();
return;
}
2015-12-14 15:40:30 +00:00
let remoteVideo = remoteVideos[id];
if (remoteVideo && remoteVideo.hasVideo()) {
2015-12-14 12:26:50 +00:00
// It is not always the case that a videoThumb exists (if there is
// no actual video).
if (remoteVideo.hasVideoStarted()) {
2015-12-14 12:26:50 +00:00
// We have a video src, great! Let's update the large video
// now.
VideoLayout.handleVideoThumbClicked(id);
2015-12-14 12:26:50 +00:00
} 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.
lastNPickupId = id;
eventEmitter.emit(UIEvents.PINNED_ENDPOINT, remoteVideo, true);
2015-12-14 12:26:50 +00:00
}
}
2015-12-14 15:40:30 +00:00
}
2015-12-14 12:26:50 +00:00
2015-12-14 14:51:02 +00:00
/**
* 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;
}
let i = containerElement.id.indexOf('participant_');
if (i >= 0) {
return containerElement.id.substring(i + 12);
}
}
2015-12-25 16:55:45 +00:00
let largeVideo;
2015-12-14 12:26:50 +00:00
var VideoLayout = {
init (emitter) {
eventEmitter = emitter;
eventEmitter.addListener(UIEvents.LOCAL_FLIPX_CHANGED, function (val) {
localFlipX = val;
if(largeVideo)
largeVideo.onLocalFlipXChange(val);
});
2015-12-01 12:53:01 +00:00
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);
2015-12-14 15:40:30 +00:00
emitter.addListener(UIEvents.CONTACT_CLICKED, onContactClicked);
this.lastNCount = config.channelLastN;
2015-12-14 12:26:50 +00:00
},
initLargeVideo () {
largeVideo = new LargeVideoManager(eventEmitter);
if(localFlipX) {
largeVideo.onLocalFlipXChange(localFlipX);
}
largeVideo.updateContainerSize();
2015-12-25 16:55:45 +00:00
},
2016-09-28 21:31:40 +00:00
/**
* 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
*/
2015-12-25 16:55:45 +00:00
setAudioLevel(id, lvl) {
2016-09-28 21:31:40 +00:00
let smallVideo = this.getSmallVideo(id);
if (smallVideo)
smallVideo.updateAudioLevelIndicator(lvl);
if (largeVideo && id === largeVideo.id)
largeVideo.updateLargeVideoAudioLevel(lvl);
2015-12-25 16:55:45 +00:00
},
2015-12-14 12:26:50 +00:00
isInLastN (resource) {
return this.lastNCount < 0 || // lastN is disabled
// lastNEndpoints cache not built yet
(this.lastNCount > 0 && !lastNEndpointsCache.length) ||
(lastNEndpointsCache &&
lastNEndpointsCache.indexOf(resource) !== -1);
2015-12-14 12:26:50 +00:00
},
2015-12-14 12:26:50 +00:00
changeLocalAudio (stream) {
let localAudio = document.getElementById('localAudio');
localAudio = stream.attach(localAudio);
2015-12-14 12:26:50 +00:00
// Now when Temasys plugin is converting also <audio> elements to
// plugin's <object>s, in current layout it will capture click events
// before it reaches the local video object. We hide it here in order
// to prevent that.
2016-02-02 21:50:02 +00:00
//if (RTCBrowserType.isIExplorer()) {
// The issue is not present on Safari. Also if we hide it in Safari
// then the local audio track will have 'enabled' flag set to false
// which will result in audio mute issues
2016-02-02 21:50:02 +00:00
// $(localAudio).hide();
localAudio.width = 1;
localAudio.height = 1;
//}
2015-12-14 12:26:50 +00:00
},
2015-12-14 12:26:50 +00:00
changeLocalVideo (stream) {
2016-07-08 01:44:04 +00:00
let localId = APP.conference.getMyUserId();
2015-12-30 12:14:56 +00:00
this.onVideoTypeChanged(localId, stream.videoType);
2015-12-31 15:23:23 +00:00
if (!stream.isMuted()) {
localVideoThumbnail.changeVideo(stream);
}
/* force update if we're currently being displayed */
2015-12-25 16:55:45 +00:00
if (this.isCurrentlyOnLarge(localId)) {
this.updateLargeVideo(localId, true);
}
2015-12-14 12:26:50 +00:00
},
/**
* 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.
*/
2015-12-14 12:26:50 +00:00
mucJoined () {
2015-12-25 16:55:45 +00:00
if (largeVideo && !largeVideo.id) {
2016-07-08 01:44:04 +00:00
this.updateLargeVideo(APP.conference.getMyUserId(), true);
2015-12-14 12:26:50 +00:00
}
},
/**
* Adds or removes icons for not available camera and microphone.
* @param resourceJid the jid of user
* @param devices available devices
*/
2016-01-25 22:39:05 +00:00
setDeviceAvailabilityIcons (id, devices) {
if (APP.conference.isLocalId(id)) {
localVideoThumbnail.setDeviceAvailabilityIcons(devices);
return;
2016-01-25 22:39:05 +00:00
}
2016-01-25 22:39:05 +00:00
let video = remoteVideos[id];
if (!video) {
return;
}
2016-01-25 22:39:05 +00:00
video.setDeviceAvailabilityIcons(devices);
2015-12-14 12:26:50 +00:00
},
/**
* 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);
},
2016-05-01 18:35:18 +00:00
/**
* Shows/hides local video.
* @param {boolean} true to make the local video visible, false - otherwise
*/
setLocalVideoVisible(visible) {
localVideoThumbnail.setVisible(visible);
},
/**
2014-06-19 13:40:54 +00:00
* 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) {
2015-12-25 16:55:45 +00:00
if (!this.isCurrentlyOnLarge(id)) {
2015-12-14 14:51:02 +00:00
return;
}
2015-12-14 12:26:50 +00:00
let newId;
if (pinnedId)
newId = pinnedId;
else if (currentDominantSpeaker)
newId = currentDominantSpeaker;
else // Otherwise select last visible video
2015-12-14 14:51:02 +00:00
newId = this.electLastVisibleVideo();
2015-12-25 16:55:45 +00:00
this.updateLargeVideo(newId);
2015-12-14 12:26:50 +00:00
},
2015-12-14 12:26:50 +00:00
electLastVisibleVideo () {
// pick the last visible video in the row
// if nobody else is left, this picks the local video
2016-09-15 02:20:54 +00:00
let remoteThumbs = FilmStrip.getThumbs(true).remoteThumbs;
let thumbs = remoteThumbs.filter('[id!="mixedstream"]');
2015-12-30 10:55:51 +00:00
let lastVisible = thumbs.filter(':visible:last');
if (lastVisible.length) {
let id = getPeerContainerResourceId(lastVisible[0]);
2015-12-14 14:51:02 +00:00
if (remoteVideos[id]) {
console.info("electLastVisibleVideo: " + id);
return id;
}
2015-12-14 14:51:02 +00:00
// The RemoteVideo was removed (but the DOM elements may still
// exist).
}
2015-12-14 14:51:02 +00:00
console.info("Last visible video no longer exists");
2016-09-15 02:20:54 +00:00
thumbs = FilmStrip.getThumbs().remoteThumbs;
2015-12-30 10:55:51 +00:00
if (thumbs.length) {
let id = getPeerContainerResourceId(thumbs[0]);
2015-12-14 14:51:02 +00:00
if (remoteVideos[id]) {
console.info("electLastVisibleVideo: " + id);
return id;
}
2015-12-14 14:51:02 +00:00
// The RemoteVideo was removed (but the DOM elements may
// still exist).
}
2015-12-14 14:51:02 +00:00
// Go with local video
console.info("Fallback to local video...");
2016-07-08 01:44:04 +00:00
let id = APP.conference.getMyUserId();
2015-12-14 14:51:02 +00:00
console.info("electLastVisibleVideo: " + id);
return id;
2015-12-14 12:26:50 +00:00
},
2015-11-30 11:54:54 +00:00
2015-12-14 12:26:50 +00:00
onRemoteStreamAdded (stream) {
let id = stream.getParticipantId();
2016-04-26 21:38:07 +00:00
let remoteVideo = remoteVideos[id];
if (!remoteVideo)
return;
remoteVideo.addRemoteStreamElement(stream);
// if track is muted make sure we reflect that
if(stream.isMuted())
{
if(stream.getType() === "audio")
this.onAudioMute(stream.getParticipantId(), true);
else
this.onVideoMute(stream.getParticipantId(), true);
}
2015-12-14 12:26:50 +00:00
},
onRemoteStreamRemoved (stream) {
let id = stream.getParticipantId();
let remoteVideo = remoteVideos[id];
// Remote stream may be removed after participant left the conference.
if (remoteVideo) {
remoteVideo.removeRemoteStreamElement(stream);
}
},
/**
* Return the type of the remote video.
2015-12-14 12:26:50 +00:00
* @param id the id for the remote video
* @returns {String} the video type video or screen.
*/
2015-12-14 12:26:50 +00:00
getRemoteVideoType (id) {
let smallVideo = VideoLayout.getSmallVideo(id);
return smallVideo ? smallVideo.getVideoType() : null;
2015-12-14 12:26:50 +00:00
},
isPinned (id) {
return (pinnedId) ? (id === pinnedId) : false;
},
getPinnedId () {
return pinnedId;
},
/**
* Handles the click on a video thumbnail.
*
* @param id the identifier of the video thumbnail
*/
handleVideoThumbClicked (id) {
if(pinnedId) {
var oldSmallVideo = VideoLayout.getSmallVideo(pinnedId);
if (oldSmallVideo && !interfaceConfig.filmStripOnly)
2015-06-23 08:00:46 +00:00
oldSmallVideo.focus(false);
}
var smallVideo = VideoLayout.getSmallVideo(id);
// Unpin if currently pinned.
if (pinnedId === id)
{
pinnedId = null;
// Enable the currently set dominant speaker.
if (currentDominantSpeaker) {
if(smallVideo && smallVideo.hasVideo()) {
2015-12-25 16:55:45 +00:00
this.updateLargeVideo(currentDominantSpeaker);
}
}
eventEmitter.emit(UIEvents.PINNED_ENDPOINT, smallVideo, false);
return;
}
// Lock new video
pinnedId = id;
// Update focused/pinned interface.
if (id) {
if (smallVideo && !interfaceConfig.filmStripOnly)
2015-06-23 08:00:46 +00:00
smallVideo.focus(true);
eventEmitter.emit(UIEvents.PINNED_ENDPOINT, smallVideo, true);
}
this.updateLargeVideo(id);
2015-12-14 12:26:50 +00:00
},
/**
* Creates or adds a participant container for the given id and smallVideo.
2016-04-26 21:38:07 +00:00
*
* @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) {
let id = user.getId();
let remoteVideo;
if(smallVideo)
remoteVideo = smallVideo;
else
remoteVideo = new RemoteVideo(user, VideoLayout, eventEmitter);
this.addRemoteVideoContainer(id, remoteVideo);
},
/**
* 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) {
2015-12-14 12:26:50 +00:00
remoteVideos[id] = remoteVideo;
2016-11-08 02:39:28 +00:00
if (!remoteVideo.getVideoType()) {
// make video type the default one (camera)
// FIXME container type is not a video type
2016-11-08 02:39:28 +00:00
remoteVideo.setVideoType(VIDEO_CONTAINER_TYPE);
2015-12-14 12:26:50 +00:00
}
2015-12-14 12:26:50 +00:00
// In case this is not currently in the last n we don't show it.
if (localLastNCount && localLastNCount > 0 &&
2016-09-15 02:20:54 +00:00
FilmStrip.getThumbs().remoteThumbs.length >= localLastNCount + 2) {
2015-12-14 12:26:50 +00:00
remoteVideo.showPeerContainer('hide');
} else {
VideoLayout.resizeThumbnails(false, true);
}
// Initialize the view
remoteVideo.updateView();
2015-12-14 12:26:50 +00:00
},
// FIXME: what does this do???
remoteVideoActive(videoElement, resourceJid) {
console.info(resourceJid + " video is now active", videoElement);
VideoLayout.resizeThumbnails(
false, false, function() {$(videoElement).show();});
2015-06-23 08:00:46 +00:00
// Update the large video to the last added video only if there's no
2016-03-11 18:00:10 +00:00
// current dominant, focused speaker or update it to
2015-06-23 08:00:46 +00:00
// the current dominant speaker.
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)) {
2015-12-25 16:55:45 +00:00
this.updateLargeVideo(resourceJid, true);
}
2015-12-14 12:26:50 +00:00
},
/**
* Shows a visual indicator for the moderator of the conference.
2016-01-13 21:17:33 +00:00
* On local or remote participants.
*/
2015-12-14 12:26:50 +00:00
showModeratorIndicator () {
let isModerator = APP.conference.isModerator;
if (isModerator) {
2016-09-28 21:31:40 +00:00
localVideoThumbnail.addModeratorIndicator();
2016-07-08 01:44:04 +00:00
} else {
2016-09-28 21:31:40 +00:00
localVideoThumbnail.removeModeratorIndicator();
}
2015-12-14 12:26:50 +00:00
APP.conference.listMembers().forEach(function (member) {
let id = member.getId();
2016-04-27 20:52:07 +00:00
let remoteVideo = remoteVideos[id];
if (!remoteVideo)
return;
2015-12-14 12:26:50 +00:00
if (member.isModerator()) {
2016-09-28 21:31:40 +00:00
remoteVideo.addModeratorIndicator();
}
if (isModerator) {
// We are moderator, but user is not - add menu
if(!remoteVideo.hasRemoteVideoMenu) {
2016-04-27 20:52:07 +00:00
remoteVideo.addRemoteVideoMenu();
}
}
});
2015-12-14 12:26:50 +00:00
},
/*
* Shows or hides the audio muted indicator over the local thumbnail video.
* @param {boolean} isMuted
*/
2015-12-14 12:26:50 +00:00
showLocalAudioIndicator (isMuted) {
2015-06-30 11:34:11 +00:00
localVideoThumbnail.showAudioIndicator(isMuted);
2015-12-14 12:26:50 +00:00
},
/**
* 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) {
localVideoThumbnail.connectionIndicator
.updateConnectionStatusIndicator(!isInterrupted);
},
/**
* Resizes thumbnails.
*/
resizeThumbnails ( animate = false,
forceUpdate = false,
onComplete = null) {
const { localVideo, remoteVideo }
= FilmStrip.calculateThumbnailSize();
2016-09-15 02:20:54 +00:00
FilmStrip.resizeThumbnails(localVideo, remoteVideo,
animate, forceUpdate)
.then(function () {
if (onComplete && typeof onComplete === "function")
onComplete();
2016-09-15 02:20:54 +00:00
});
return { localVideo, remoteVideo };
2015-12-14 12:26:50 +00:00
},
/**
* On audio muted event.
*/
2016-01-06 22:39:13 +00:00
onAudioMute (id, isMuted) {
if (APP.conference.isLocalId(id)) {
2015-06-23 08:00:46 +00:00
localVideoThumbnail.showAudioIndicator(isMuted);
} else {
let remoteVideo = remoteVideos[id];
if (!remoteVideo)
return;
remoteVideo.showAudioIndicator(isMuted);
2016-01-06 22:39:13 +00:00
if (APP.conference.isModerator) {
remoteVideo.updateRemoteVideoMenu(isMuted);
2015-06-23 08:00:46 +00:00
}
}
2015-12-14 12:26:50 +00:00
},
/**
* On video muted event.
*/
2016-01-06 22:39:13 +00:00
onVideoMute (id, value) {
if (APP.conference.isLocalId(id)) {
2016-09-28 21:31:40 +00:00
localVideoThumbnail.setVideoMutedView(value);
} else {
let remoteVideo = remoteVideos[id];
if (remoteVideo)
2016-09-28 21:31:40 +00:00
remoteVideo.setVideoMutedView(value);
}
2016-02-10 15:16:55 +00:00
if (this.isCurrentlyOnLarge(id)) {
// large video will show avatar instead of muted stream
this.updateLargeVideo(id, true);
}
2015-12-14 12:26:50 +00:00
},
/**
* Display name changed.
*/
2015-12-14 12:26:50 +00:00
onDisplayNameChanged (id, displayName, status) {
2015-12-01 13:41:58 +00:00
if (id === 'localVideoContainer' ||
APP.conference.isLocalId(id)) {
2015-06-23 08:00:46 +00:00
localVideoThumbnail.setDisplayName(displayName);
} else {
let remoteVideo = remoteVideos[id];
if (remoteVideo)
remoteVideo.setDisplayName(displayName, status);
}
2015-12-14 12:26:50 +00:00
},
2016-06-20 21:13:17 +00:00
/**
* Sets the "raised hand" status for a participant identified by 'id'.
*/
setRaisedHandStatus(id, raisedHandStatus) {
var video
= APP.conference.isLocalId(id)
? localVideoThumbnail : remoteVideos[id];
if (video) {
video.showRaisedHandIndicator(raisedHandStatus);
if (raisedHandStatus) {
video.showDominantSpeakerIndicator(false);
}
2016-06-20 21:13:17 +00:00
}
},
/**
* On dominant speaker changed event.
*/
2015-12-14 12:26:50 +00:00
onDominantSpeakerChanged (id) {
if (id === currentDominantSpeaker) {
return;
2014-09-03 08:57:41 +00:00
}
let 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)
{
2016-06-20 21:13:17 +00:00
oldSpeakerRemoteVideo.showDominantSpeakerIndicator(false);
currentDominantSpeaker = null;
}
2016-06-20 21:13:17 +00:00
localVideoThumbnail.showDominantSpeakerIndicator(true);
return;
}
2015-12-14 12:26:50 +00:00
let remoteVideo = remoteVideos[id];
2015-12-14 12:26:50 +00:00
if (!remoteVideo) {
return;
2015-12-14 12:26:50 +00:00
}
// Update the current dominant speaker.
2016-06-20 21:13:17 +00:00
remoteVideo.showDominantSpeakerIndicator(true);
localVideoThumbnail.showDominantSpeakerIndicator(false);
2015-12-14 12:26:50 +00:00
// let's remove the indications from the remote video if any
if (oldSpeakerRemoteVideo) {
2016-06-20 21:13:17 +00:00
oldSpeakerRemoteVideo.showDominantSpeakerIndicator(false);
2015-12-14 12:26:50 +00:00
}
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.
2016-11-08 02:45:52 +00:00
// FIXME: there is no "videoactive.jingle" event.
if (!pinnedId
&& remoteVideo.hasVideoStarted()
&& !this.getCurrentlyOnLargeContainer().stayOnStage()) {
this.updateLargeVideo(id);
}
2015-12-14 12:26:50 +00:00
},
/**
* Shows/hides warning about remote user's connectivity issues.
*
* @param {string} id the ID of the remote participant(MUC nickname)
* @param {boolean} isActive true if the connection is ok or false when
* the user is having connectivity issues.
*/
// eslint-disable-next-line no-unused-vars
onParticipantConnectionStatusChanged (id, isActive) {
// 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
let 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 lastNEndpoints the list of last N endpoints
* @param endpointsEnteringLastN the list currently entering last N
* endpoints
*/
2015-12-14 12:26:50 +00:00
onLastNEndpointsChanged (lastNEndpoints, endpointsEnteringLastN) {
if (this.lastNCount !== lastNEndpoints.length)
this.lastNCount = lastNEndpoints.length;
lastNEndpointsCache = lastNEndpoints;
2014-11-19 10:08:38 +00:00
// Say A, B, C, D, E, and F are in a conference and LastN = 3.
//
// If LastN drops to, say, 2, because of adaptivity, then E should see
// thumbnails for A, B and C. A and B are in E's server side LastN set,
// so E sees them. C is only in E's local LastN set.
//
// If F starts talking and LastN = 3, then E should see thumbnails for
// F, A, B. B gets "ejected" from E's server side LastN set, but it
// enters E's local LastN ejecting C.
// Increase the local LastN set size, if necessary.
if (this.lastNCount > localLastNCount) {
localLastNCount = this.lastNCount;
2014-11-19 10:08:38 +00:00
}
// Update the local LastN set preserving the order in which the
// endpoints appeared in the LastN/local LastN set.
var nextLocalLastNSet = lastNEndpoints.slice(0);
for (var i = 0; i < localLastNSet.length; i++) {
if (nextLocalLastNSet.length >= localLastNCount) {
break;
}
var resourceJid = localLastNSet[i];
if (nextLocalLastNSet.indexOf(resourceJid) === -1) {
nextLocalLastNSet.push(resourceJid);
}
}
localLastNSet = nextLocalLastNSet;
var updateLargeVideo = false;
2014-11-19 10:08:38 +00:00
// Handle LastN/local LastN changes.
2016-09-15 02:20:54 +00:00
FilmStrip.getThumbs().remoteThumbs.each(( index, element ) => {
2015-12-14 14:51:02 +00:00
var resourceJid = getPeerContainerResourceId(element);
var smallVideo = remoteVideos[resourceJid];
// We do not want to process any logic for our own(local) video
// because the local participant is never in the lastN set.
// The code of this function might detect that the local participant
// has been dropped out of the lastN set and will update the large
// video
// Detected from avatar tests, where lastN event override
// local video pinning
2016-01-06 22:39:13 +00:00
if(APP.conference.isLocalId(resourceJid))
return;
2014-11-19 10:08:38 +00:00
var isReceived = true;
if (resourceJid &&
lastNEndpoints.indexOf(resourceJid) < 0 &&
localLastNSet.indexOf(resourceJid) < 0) {
console.log("Remove from last N", resourceJid);
if (smallVideo)
smallVideo.showPeerContainer('hide');
2016-01-06 22:39:13 +00:00
else if (!APP.conference.isLocalId(resourceJid))
2015-08-24 09:37:23 +00:00
console.error("No remote video for: " + resourceJid);
2014-11-19 10:08:38 +00:00
isReceived = false;
} else if (resourceJid &&
//TOFIX: smallVideo may be undefined
smallVideo.isVisible() &&
lastNEndpoints.indexOf(resourceJid) < 0 &&
localLastNSet.indexOf(resourceJid) >= 0) {
// TOFIX: if we're here we already know that the smallVideo
// exists. Look at the previous FIX above.
if (smallVideo)
smallVideo.showPeerContainer('avatar');
2016-01-06 22:39:13 +00:00
else if (!APP.conference.isLocalId(resourceJid))
2015-08-24 09:37:23 +00:00
console.error("No remote video for: " + resourceJid);
2014-11-19 10:08:38 +00:00
isReceived = false;
}
2014-11-20 15:40:58 +00:00
2014-11-19 10:08:38 +00:00
if (!isReceived) {
2014-11-20 15:40:58 +00:00
// resourceJid has dropped out of the server side lastN set, so
// it is no longer being received. If resourceJid was being
// displayed in the large video we have to switch to another
// user.
if (!updateLargeVideo &&
2015-12-25 16:55:45 +00:00
this.isCurrentlyOnLarge(resourceJid)) {
updateLargeVideo = true;
2014-11-20 15:40:58 +00:00
}
}
});
if (!endpointsEnteringLastN || endpointsEnteringLastN.length < 0)
endpointsEnteringLastN = lastNEndpoints;
if (endpointsEnteringLastN && endpointsEnteringLastN.length > 0) {
endpointsEnteringLastN.forEach(function (resourceJid) {
var remoteVideo = remoteVideos[resourceJid];
if (remoteVideo)
remoteVideo.showPeerContainer('show');
if (!remoteVideo.isVisible()) {
console.log("Add to last N", resourceJid);
remoteVideo.addRemoteStreamElement(remoteVideo.videoStream);
if (lastNPickupId == resourceJid) {
2015-12-14 12:26:50 +00:00
// Clean up the lastN pickup id.
lastNPickupId = null;
VideoLayout.handleVideoThumbClicked(resourceJid);
updateLargeVideo = false;
}
remoteVideo.waitForPlayback(
remoteVideo.selectVideoElement()[0],
remoteVideo.videoStream);
}
});
}
// The endpoint that was being shown in the large video has dropped out
// of the lastN set and there was no lastN pickup jid. We need to update
// the large video now.
if (updateLargeVideo) {
var resource;
// Find out which endpoint to show in the large video.
for (i = 0; i < lastNEndpoints.length; i++) {
resource = lastNEndpoints[i];
2016-01-06 22:39:13 +00:00
if (!resource || APP.conference.isLocalId(resource))
continue;
// videoSrcToSsrc needs to be update for this call to succeed.
2015-12-25 16:55:45 +00:00
this.updateLargeVideo(resource);
break;
}
}
2015-12-14 12:26:50 +00:00
},
/**
* Updates local stats
* @param percent
* @param object
*/
2015-12-14 12:26:50 +00:00
updateLocalConnectionStats (percent, object) {
2016-01-29 15:33:16 +00:00
let resolutions = object.resolution;
2016-07-08 01:44:04 +00:00
object.resolution = resolutions[APP.conference.getMyUserId()];
2015-06-23 08:00:46 +00:00
localVideoThumbnail.updateStatsIndicator(percent, object);
2015-12-29 12:41:43 +00:00
Object.keys(resolutions).forEach(function (id) {
if (APP.conference.isLocalId(id)) {
return;
}
2015-12-29 12:41:43 +00:00
let resolution = resolutions[id];
let remoteVideo = remoteVideos[id];
if (resolution && remoteVideo) {
remoteVideo.updateResolution(resolution);
}
});
2015-12-14 12:26:50 +00:00
},
/**
* Updates remote stats.
2015-12-14 15:40:30 +00:00
* @param id the id associated with the stats
* @param percent the connection quality percent
* @param object the stats data
*/
2015-12-14 15:40:30 +00:00
updateConnectionStats (id, percent, object) {
let remoteVideo = remoteVideos[id];
if (remoteVideo) {
remoteVideo.updateStatsIndicator(percent, object);
2015-12-14 15:40:30 +00:00
}
2015-12-14 12:26:50 +00:00
},
/**
* Hides the connection indicator
2015-12-14 15:40:30 +00:00
* @param id
*/
2015-12-14 15:40:30 +00:00
hideConnectionIndicator (id) {
let remoteVideo = remoteVideos[id];
if (remoteVideo)
remoteVideo.hideConnectionIndicator();
2015-12-14 12:26:50 +00:00
},
/**
* Hides all the indicators
*/
2015-12-14 12:26:50 +00:00
hideStats () {
for (var video in remoteVideos) {
let remoteVideo = remoteVideos[video];
if (remoteVideo)
remoteVideo.hideIndicator();
}
2015-06-23 08:00:46 +00:00
localVideoThumbnail.hideIndicator();
2015-12-14 12:26:50 +00:00
},
2015-12-14 15:40:30 +00:00
removeParticipantContainer (id) {
// Unlock large video
if (pinnedId === id) {
console.info("Focused video owner has left the conference");
pinnedId = null;
}
2015-12-14 12:26:50 +00:00
if (currentDominantSpeaker === id) {
console.info("Dominant speaker has left the conference");
currentDominantSpeaker = null;
}
2015-12-14 12:26:50 +00:00
var remoteVideo = remoteVideos[id];
if (remoteVideo) {
// Remove remote video
2015-12-14 12:26:50 +00:00
console.info("Removing remote video: " + id);
delete remoteVideos[id];
remoteVideo.remove();
} else {
2015-12-14 12:26:50 +00:00
console.warn("No remote video for " + id);
}
VideoLayout.resizeThumbnails();
2015-12-14 12:26:50 +00:00
},
2015-11-30 11:54:54 +00:00
2015-12-14 12:26:50 +00:00
onVideoTypeChanged (id, newVideoType) {
if (VideoLayout.getRemoteVideoType(id) === newVideoType) {
return;
}
2015-12-14 12:26:50 +00:00
console.info("Peer video type changed: ", id, newVideoType);
var smallVideo;
2015-12-14 12:26:50 +00:00
if (APP.conference.isLocalId(id)) {
if (!localVideoThumbnail) {
console.warn("Local video not ready yet");
return;
}
smallVideo = localVideoThumbnail;
2015-12-14 12:26:50 +00:00
} else if (remoteVideos[id]) {
smallVideo = remoteVideos[id];
} else {
return;
}
smallVideo.setVideoType(newVideoType);
2015-12-25 16:55:45 +00:00
if (this.isCurrentlyOnLarge(id)) {
this.updateLargeVideo(id, true);
}
2015-12-14 12:26:50 +00:00
},
2015-11-13 17:04:49 +00:00
2016-02-10 15:26:16 +00:00
showMore (id) {
if (id === 'local') {
2015-06-23 08:00:46 +00:00
localVideoThumbnail.connectionIndicator.showMore();
} else {
2016-02-10 15:26:16 +00:00
let remoteVideo = remoteVideos[id];
if (remoteVideo) {
remoteVideo.connectionIndicator.showMore();
} else {
2016-02-10 15:26:16 +00:00
console.info("Error - no remote video for id: " + id);
}
2015-06-23 08:00:46 +00:00
}
2015-12-14 12:26:50 +00:00
},
2015-06-23 08:00:46 +00:00
/**
2015-11-13 17:04:49 +00:00
* 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) {
2015-12-25 16:55:45 +00:00
if (largeVideo) {
largeVideo.updateContainerSize();
2015-12-25 16:55:45 +00:00
largeVideo.resize(animate);
}
// Calculate available width and height.
2016-01-20 14:26:39 +00:00
let availableHeight = window.innerHeight;
let availableWidth = UIUtil.getAvailableVideoWidth();
2016-01-20 14:26:39 +00:00
if (availableWidth < 0 || availableHeight < 0) {
return;
}
// Resize the thumbnails first.
this.resizeThumbnails(false, forceUpdate);
// Resize the video area element.
2016-01-20 14:26:39 +00:00
$('#videospace').animate({
right: window.innerWidth - availableWidth,
width: availableWidth,
height: availableHeight
}, {
queue: false,
duration: animate ? 500 : 1,
complete: completeFunction
});
2015-12-14 12:26:50 +00:00
},
2015-12-14 12:26:50 +00:00
getSmallVideo (id) {
if (APP.conference.isLocalId(id)) {
2015-06-23 08:00:46 +00:00
return localVideoThumbnail;
} else {
2015-12-14 12:26:50 +00:00
return remoteVideos[id];
2015-06-23 08:00:46 +00:00
}
2015-12-14 12:26:50 +00:00
},
changeUserAvatar (id, avatarUrl) {
2015-12-02 15:24:57 +00:00
var smallVideo = VideoLayout.getSmallVideo(id);
if (smallVideo) {
smallVideo.avatarChanged(avatarUrl);
2015-12-02 15:24:57 +00:00
} else {
console.warn(
2015-12-02 15:24:57 +00:00
"Missed avatar update - no small video yet for " + id
);
}
2015-12-25 16:55:45 +00:00
if (this.isCurrentlyOnLarge(id)) {
largeVideo.updateAvatar(avatarUrl);
2015-12-25 16:55:45 +00:00
}
2015-12-14 12:26:50 +00:00
},
2015-08-03 16:21:56 +00:00
/**
* Indicates that the video has been interrupted.
*/
2015-12-14 12:26:50 +00:00
onVideoInterrupted () {
if (largeVideo) {
largeVideo.onVideoInterrupted();
}
2015-12-14 12:26:50 +00:00
},
2015-08-03 15:58:22 +00:00
2015-08-03 16:21:56 +00:00
/**
* Indicates that the video has been restored.
*/
2015-12-14 12:26:50 +00:00
onVideoRestored () {
if (largeVideo) {
largeVideo.onVideoRestored();
2015-12-25 16:55:45 +00:00
}
},
isLargeVideoVisible () {
return this.isLargeContainerTypeVisible(VIDEO_CONTAINER_TYPE);
2015-12-25 16:55:45 +00:00
},
/**
* @return {LargeContainer} the currently displayed container on large
* video.
*/
getCurrentlyOnLargeContainer () {
return largeVideo.getContainer(largeVideo.state);
},
2015-12-25 16:55:45 +00:00
isCurrentlyOnLarge (id) {
return largeVideo && largeVideo.id === id;
},
updateLargeVideo (id, forceUpdate) {
if (!largeVideo) {
return;
}
let isOnLarge = this.isCurrentlyOnLarge(id);
let currentId = largeVideo.id;
if (!isOnLarge || forceUpdate) {
let videoType = this.getRemoteVideoType(id);
// FIXME video type is not the same thing as container type
if (id !== currentId && videoType === VIDEO_CONTAINER_TYPE) {
2015-12-25 16:55:45 +00:00
eventEmitter.emit(UIEvents.SELECTED_ENDPOINT, id);
}
2016-07-08 20:14:49 +00:00
let smallVideo = this.getSmallVideo(id);
let oldSmallVideo;
2015-12-25 16:55:45 +00:00
if (currentId) {
2016-07-08 20:14:49 +00:00
oldSmallVideo = this.getSmallVideo(currentId);
2015-12-25 16:55:45 +00:00
}
2016-07-08 20:14:49 +00:00
smallVideo.waitForResolutionChange();
if (oldSmallVideo)
oldSmallVideo.waitForResolutionChange();
2015-12-25 16:55:45 +00:00
largeVideo.updateLargeVideo(
id,
smallVideo.videoStream,
videoType
).then(function() {
// update current small video and the old one
smallVideo.updateView();
oldSmallVideo && oldSmallVideo.updateView();
}, function () {
// use clicked other video during update, nothing to do.
});
2015-12-25 16:55:45 +00:00
} else if (currentId) {
let currentSmallVideo = this.getSmallVideo(currentId);
currentSmallVideo.updateView();
2015-12-25 16:55:45 +00:00
}
},
addLargeVideoContainer (type, container) {
largeVideo && largeVideo.addContainer(type, container);
},
removeLargeVideoContainer (type) {
largeVideo && largeVideo.removeContainer(type);
},
/**
* @returns Promise
*/
showLargeVideoContainer (type, show) {
if (!largeVideo) {
return Promise.reject();
}
let isVisible = this.isLargeContainerTypeVisible(type);
if (isVisible === show) {
return Promise.resolve();
}
let currentId = largeVideo.id;
if(currentId) {
var 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) {
2016-03-24 18:16:42 +00:00
if(pinnedId)
containerTypeToShow = this.getRemoteVideoType(pinnedId);
else
containerTypeToShow = VIDEO_CONTAINER_TYPE;
}
return largeVideo.showContainer(containerTypeToShow)
.then(() => {
if(oldSmallVideo)
oldSmallVideo && oldSmallVideo.updateView();
});
2015-12-25 16:55:45 +00:00
},
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;
},
/**
* Updates the resolution label, indicating to the user that the large
* video stream is currently HD.
*/
updateResolutionLabel(isResolutionHD) {
let videoResolutionLabel = $("#videoResolutionLabel");
if (isResolutionHD && !videoResolutionLabel.is(":visible"))
videoResolutionLabel.css({display: "block"});
else if (!isResolutionHD && videoResolutionLabel.is(":visible"))
videoResolutionLabel.css({display: "none"});
},
/**
* Sets the flipX state of the local video.
* @param {boolean} true for flipped otherwise false;
*/
setLocalFlipX: function (val) {
this.localFlipX = val;
2016-07-08 20:14:49 +00:00
},
getEventEmitter: () => {return eventEmitter;}
2015-12-14 12:26:50 +00:00
};
2015-01-07 14:54:03 +00:00
2015-12-14 12:26:50 +00:00
export default VideoLayout;