haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixes local video thumbnail being replaced with an avatar when lastN enabled.

This commit is contained in:
paweldomas 2015-07-15 12:14:34 +02:00
parent 61f4674a28
commit 17f245df5e
6 changed files with 64 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -22,7 +22,7 @@
<script src="libs/popover.js?v=1"></script><!-- bootstrap tooltip lib --> <script src="libs/popover.js?v=1"></script><!-- bootstrap tooltip lib -->
<script src="libs/toastr.js?v=1"></script><!-- notifications lib --> <script src="libs/toastr.js?v=1"></script><!-- notifications lib -->
<script src="interface_config.js?v=5"></script> <script src="interface_config.js?v=5"></script>
<script src="libs/app.bundle.js?v=100"></script> <script src="libs/app.bundle.js?v=101"></script>
<script src="analytics.js?v=1"></script><!-- google analytics plugin --> <script src="analytics.js?v=1"></script><!-- google analytics plugin -->
<link rel="stylesheet" href="css/font.css?v=7"/> <link rel="stylesheet" href="css/font.css?v=7"/>
<link rel="stylesheet" href="css/toastr.css?v=1"> <link rel="stylesheet" href="css/toastr.css?v=1">

104
libs/app.bundle.js
View File

@ -1217,8 +1217,8 @@ var RTC = {
return this.rtcUtils.getUserMediaWithConstraints(um, success_callback, return this.rtcUtils.getUserMediaWithConstraints(um, success_callback,
failure_callback, resolution, bandwidth, fps, desktopStream); failure_callback, resolution, bandwidth, fps, desktopStream);
}, },
attachMediaStream: function (element, stream) { attachMediaStream: function (elSelector, stream) {
this.rtcUtils.attachMediaStream(element, stream); this.rtcUtils.attachMediaStream(elSelector, stream);
}, },
getStreamID: function (stream) { getStreamID: function (stream) {
return this.rtcUtils.getStreamID(stream); return this.rtcUtils.getStreamID(stream);
@ -1794,13 +1794,13 @@ function RTCUtils(RTCService, onTemasysPluginReady)
self.peerconnection = RTCPeerConnection; self.peerconnection = RTCPeerConnection;
self.getUserMedia = getUserMedia; self.getUserMedia = getUserMedia;
self.attachMediaStream = function (element, stream) { self.attachMediaStream = function (elSel, stream) {
if (stream.id === "dummyAudio" || stream.id === "dummyVideo") { if (stream.id === "dummyAudio" || stream.id === "dummyVideo") {
return; return;
} }
attachMediaStream(element[0], stream); attachMediaStream(elSel[0], stream);
}; };
self.getStreamID = function (stream) { self.getStreamID = function (stream) {
var id = SDPUtil.filter_special_chars(stream.label); var id = SDPUtil.filter_special_chars(stream.label);
@ -8825,10 +8825,11 @@ function updateActiveSpeakerAvatarSrc() {
var avatar = $("#activeSpeakerAvatar")[0]; var avatar = $("#activeSpeakerAvatar")[0];
var jid = currentSmallVideo.peerJid; var jid = currentSmallVideo.peerJid;
var url = Avatar.getGravatarUrl(jid); var url = Avatar.getGravatarUrl(jid);
if(avatar.src === url) if (avatar.src === url)
return; return;
var isMuted = null; var isMuted = null;
if(!LargeVideo.VideoLayout.isInLastN(currentSmallVideo.resourceJid)) { if (!currentSmallVideo.isLocal &&
!LargeVideo.VideoLayout.isInLastN(currentSmallVideo.resourceJid)) {
isMuted = true; isMuted = true;
} }
else else
@ -9114,6 +9115,7 @@ function LocalVideo(VideoLayout)
this.container = $("#localVideoContainer").get(0); this.container = $("#localVideoContainer").get(0);
this.VideoLayout = VideoLayout; this.VideoLayout = VideoLayout;
this.flipX = true; this.flipX = true;
this.isLocal = true;
this.peerJid = null; this.peerJid = null;
this.resourceJid = null; this.resourceJid = null;
} }
@ -9364,6 +9366,7 @@ function RemoteVideo(peerJid, VideoLayout)
nickfield.appendChild(document.createTextNode(this.resourceJid)); nickfield.appendChild(document.createTextNode(this.resourceJid));
this.container.appendChild(nickfield); this.container.appendChild(nickfield);
this.flipX = false; this.flipX = false;
this.isLocal = false;
} }
RemoteVideo.prototype = Object.create(SmallVideo.prototype); RemoteVideo.prototype = Object.create(SmallVideo.prototype);
@ -10062,7 +10065,7 @@ SmallVideo.prototype.hasVideo = function () {
* video because there is no dominant speaker and no focused speaker * video because there is no dominant speaker and no focused speaker
*/ */
SmallVideo.prototype.showAvatar = function (show) { SmallVideo.prototype.showAvatar = function (show) {
if(!this.hasAvatar) if (!this.hasAvatar)
return; return;
var videoElem = APP.RTC.getVideoElementName(); var videoElem = APP.RTC.getVideoElementName();
@ -10070,7 +10073,8 @@ SmallVideo.prototype.showAvatar = function (show) {
var avatar = $('#avatar_' + this.resourceJid); var avatar = $('#avatar_' + this.resourceJid);
if (show === undefined || show === null) { if (show === undefined || show === null) {
if(!this.VideoLayout.isInLastN(this.resourceJid)) { if (!this.isLocal &&
!this.VideoLayout.isInLastN(this.resourceJid)) {
show = true; show = true;
} }
else else
@ -10091,7 +10095,7 @@ SmallVideo.prototype.showAvatar = function (show) {
setVisibility(avatar, show); setVisibility(avatar, show);
} }
} };
SmallVideo.prototype.avatarChanged = function (thumbUrl) { SmallVideo.prototype.avatarChanged = function (thumbUrl) {
var thumbnail = $('#' + this.videoSpanId); var thumbnail = $('#' + this.videoSpanId);
@ -10572,6 +10576,11 @@ var VideoLayout = (function (my) {
return containerElement.id.substring(i + 12); return containerElement.id.substring(i + 12);
}; };
my.getPeerVideoSel = function (peerResourceJid) {
return $('#participant_' + peerResourceJid +
'>' + APP.RTC.getVideoElementName());
};
/** /**
* On contact list item clicked. * On contact list item clicked.
*/ */
@ -10580,40 +10589,39 @@ var VideoLayout = (function (my) {
return; return;
} }
if (jid == APP.xmpp.myJid()) {
$("#localVideoContainer").click();
return;
}
var resource = Strophe.getResourceFromJid(jid); var resource = Strophe.getResourceFromJid(jid);
var videoContainer = $("#participant_" + resource); var videoSel = VideoLayout.getVideoSelector(resource);
if (videoContainer.length > 0) { if (videoSel.length > 0) {
var videoThumb var videoThumb = videoSel[0];
= $(RTC.getVideoElementName(), videoContainer).get(0);
// It is not always the case that a videoThumb exists (if there is // It is not always the case that a videoThumb exists (if there is
// no actual video). // no actual video).
if (videoThumb) { if (RTC.getVideoSrc(videoThumb)) {
if (videoThumb.src && videoThumb.src != '') {
// We have a video src, great! Let's update the large video // We have a video src, great! Let's update the large video
// now. // now.
VideoLayout.handleVideoThumbClicked(
false,
Strophe.getResourceFromJid(jid));
} else {
VideoLayout.handleVideoThumbClicked( // If we don't have a video src for jid, there's absolutely
false, // no point in calling handleVideoThumbClicked; Quite
Strophe.getResourceFromJid(jid)); // simply, it won't work because it needs an src to attach
} else { // 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 lastNPickupJid variable to be
// picked up later by the lastN changed event handler.
// If we don't have a video src for jid, there's absolutely lastNPickupJid = jid;
// no point in calling handleVideoThumbClicked; Quite eventEmitter.emit(UIEvents.PINNED_ENDPOINT,
// simply, it won't work because it needs an src to attach Strophe.getResourceFromJid(jid));
// 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 lastNPickupJid variable to be
// picked up later by the lastN changed event handler.
lastNPickupJid = jid;
eventEmitter.emit(UIEvents.PINNED_ENDPOINT,
Strophe.getResourceFromJid(jid));
}
} else if (jid == APP.xmpp.myJid()) {
$("#localVideoContainer").click();
} }
} }
}); });
@ -10646,11 +10654,12 @@ var VideoLayout = (function (my) {
if (jid === APP.xmpp.myJid()) { if (jid === APP.xmpp.myJid()) {
localVideoThumbnail.showVideoIndicator(value); localVideoThumbnail.showVideoIndicator(value);
} else { } else {
VideoLayout.ensurePeerContainerExists(jid); var resource = Strophe.getResourceFromJid(jid);
remoteVideos[Strophe.getResourceFromJid(jid)].showVideoIndicator(value);
var el = $('#participant_' + Strophe.getResourceFromJid(jid) VideoLayout.ensurePeerContainerExists(jid);
+ '>' + APP.RTC.getVideoElementName()); remoteVideos[resource].showVideoIndicator(value);
var el = VideoLayout.getPeerVideoSel(resource);
if (!value) if (!value)
el.show(); el.show();
else else
@ -10703,19 +10712,15 @@ var VideoLayout = (function (my) {
} }
// Obtain container for new dominant speaker. // Obtain container for new dominant speaker.
var container = document.getElementById( var videoSel = VideoLayout.getPeerVideoSel(resourceJid);
'participant_' + resourceJid);
// Local video will not have container found, but that's ok // Local video will not have container found, but that's ok
// since we don't want to switch to local video. // since we don't want to switch to local video.
if (container && !focusedVideoResourceJid) if (!focusedVideoResourceJid && videoSel.length)
{ {
var video
= container.getElementsByTagName(RTC.getVideoElementName());
// Update the large video if the video source is already available, // Update the large video if the video source is already available,
// otherwise wait for the "videoactive.jingle" event. // otherwise wait for the "videoactive.jingle" event.
if (video.length && video[0].currentTime > 0) { if (videoSel[0].currentTime > 0) {
LargeVideo.updateLargeVideo(resourceJid); LargeVideo.updateLargeVideo(resourceJid);
} }
} }
@ -10813,8 +10818,7 @@ var VideoLayout = (function (my) {
var jid = APP.xmpp.findJidFromResource(resourceJid); var jid = APP.xmpp.findJidFromResource(resourceJid);
var mediaStream = APP.RTC.remoteStreams[jid][MediaStreamType.VIDEO_TYPE]; var mediaStream = APP.RTC.remoteStreams[jid][MediaStreamType.VIDEO_TYPE];
var sel = $('#participant_' + resourceJid + var sel = VideoLayout.getPeerVideoSel(resourceJid);
'>' + RTC.getVideoElementName());
APP.RTC.attachMediaStream(sel, mediaStream.stream); APP.RTC.attachMediaStream(sel, mediaStream.stream);
if (lastNPickupJid == mediaStream.peerjid) { if (lastNPickupJid == mediaStream.peerjid) {

5
modules/UI/videolayout/LargeVideo.js
View File

@ -186,10 +186,11 @@ function updateActiveSpeakerAvatarSrc() {
var avatar = $("#activeSpeakerAvatar")[0]; var avatar = $("#activeSpeakerAvatar")[0];
var jid = currentSmallVideo.peerJid; var jid = currentSmallVideo.peerJid;
var url = Avatar.getGravatarUrl(jid); var url = Avatar.getGravatarUrl(jid);
if(avatar.src === url) if (avatar.src === url)
return; return;
var isMuted = null; var isMuted = null;
if(!LargeVideo.VideoLayout.isInLastN(currentSmallVideo.resourceJid)) { if (!currentSmallVideo.isLocal &&
!LargeVideo.VideoLayout.isInLastN(currentSmallVideo.resourceJid)) {
isMuted = true; isMuted = true;
} }
else else

1
modules/UI/videolayout/LocalVideo.js
View File

@ -11,6 +11,7 @@ function LocalVideo(VideoLayout)
this.container = $("#localVideoContainer").get(0); this.container = $("#localVideoContainer").get(0);
this.VideoLayout = VideoLayout; this.VideoLayout = VideoLayout;
this.flipX = true; this.flipX = true;
this.isLocal = true;
this.peerJid = null; this.peerJid = null;
this.resourceJid = null; this.resourceJid = null;
} }

1
modules/UI/videolayout/RemoteVideo.js
View File

@ -20,6 +20,7 @@ function RemoteVideo(peerJid, VideoLayout)
nickfield.appendChild(document.createTextNode(this.resourceJid)); nickfield.appendChild(document.createTextNode(this.resourceJid));
this.container.appendChild(nickfield); this.container.appendChild(nickfield);
this.flipX = false; this.flipX = false;
this.isLocal = false;
} }
RemoteVideo.prototype = Object.create(SmallVideo.prototype); RemoteVideo.prototype = Object.create(SmallVideo.prototype);

7
modules/UI/videolayout/SmallVideo.js
View File

@ -305,7 +305,7 @@ SmallVideo.prototype.hasVideo = function () {
* video because there is no dominant speaker and no focused speaker * video because there is no dominant speaker and no focused speaker
*/ */
SmallVideo.prototype.showAvatar = function (show) { SmallVideo.prototype.showAvatar = function (show) {
if(!this.hasAvatar) if (!this.hasAvatar)
return; return;
var videoElem = APP.RTC.getVideoElementName(); var videoElem = APP.RTC.getVideoElementName();
@ -313,7 +313,8 @@ SmallVideo.prototype.showAvatar = function (show) {
var avatar = $('#avatar_' + this.resourceJid); var avatar = $('#avatar_' + this.resourceJid);
if (show === undefined || show === null) { if (show === undefined || show === null) {
if(!this.VideoLayout.isInLastN(this.resourceJid)) { if (!this.isLocal &&
!this.VideoLayout.isInLastN(this.resourceJid)) {
show = true; show = true;
} }
else else
@ -334,7 +335,7 @@ SmallVideo.prototype.showAvatar = function (show) {
setVisibility(avatar, show); setVisibility(avatar, show);
} }
} };
SmallVideo.prototype.avatarChanged = function (thumbUrl) { SmallVideo.prototype.avatarChanged = function (thumbUrl) {
var thumbnail = $('#' + this.videoSpanId); var thumbnail = $('#' + this.videoSpanId);