diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index 7881bbaa3..04606c069 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -191,7 +191,7 @@ RemoteVideo.prototype.waitForPlayback = function (sel, stream) { APP.RTC.attachMediaStream(sel, stream); } if (RTCBrowserType.isTemasysPluginUsed()) { - sel = self.VideoLayout.getPeerVideoSel(resourceJid); + sel = self.selectVideoElement(); } self.VideoLayout.videoactive(sel, resourceJid); sel[0].onplaying = null; @@ -233,9 +233,6 @@ RemoteVideo.prototype.addRemoteStreamElement = function (sid, stream, thessrc) { }; - // Name of video element name is different for IE/Safari - var videoElem = APP.RTC.getVideoElementName(); - // Add click handler. var onClickHandler = function (event) { diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js index f2de63a0b..715f16fde 100644 --- a/modules/UI/videolayout/SmallVideo.js +++ b/modules/UI/videolayout/SmallVideo.js @@ -284,10 +284,20 @@ SmallVideo.prototype.createModeratorIndicatorElement = function () { APP.translation.translateElement($('#' + this.videoSpanId + ' .focusindicator')); }; +SmallVideo.prototype.selectVideoElement = function () { + var videoElem = APP.RTC.getVideoElementName(); + if (!RTCBrowserType.isTemasysPluginUsed()) { + return $('#' + this.videoSpanId).find(videoElem); + } else { + return $('#' + this.videoSpanId + + (this.isLocal ? '>>' : '>') + + videoElem + '>param[value="video"]').parent(); + } +}; + SmallVideo.prototype.getSrc = function () { - var videoElement = APP.RTC.getVideoElementName(); - return APP.RTC.getVideoSrc( - $('#' + this.videoSpanId).find(videoElement).get(0)); + var videoElement = this.selectVideoElement().get(0); + return APP.RTC.getVideoSrc(videoElement); }; SmallVideo.prototype.focus = function(isFocused) { @@ -299,8 +309,7 @@ SmallVideo.prototype.focus = function(isFocused) { }; SmallVideo.prototype.hasVideo = function () { - return $("#" + this.videoSpanId).find( - APP.RTC.getVideoElementName()).length !== 0; + return this.selectVideoElement().length !== 0; }; /** @@ -320,8 +329,8 @@ SmallVideo.prototype.showAvatar = function (show) { } var resourceJid = this.getResourceJid(); - var videoElem = APP.RTC.getVideoElementName(); - var video = $('#' + this.videoSpanId).find(videoElem); + var video = this.selectVideoElement(); + var avatar = $('#avatar_' + resourceJid); if (show === undefined || show === null) { diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 0fe5189c8..36f6a940c 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -145,21 +145,21 @@ var VideoLayout = (function (my) { } }; - my.electLastVisibleVideo = function() { + my.electLastVisibleVideo = function () { // pick the last visible video in the row // if nobody else is left, this picks the local video var jid; - var videoElem = RTC.getVideoElementName(); - var pick = $('#remoteVideos>span[id!="mixedstream"]:visible:last>' + videoElem); - if (pick.length && APP.RTC.getVideoSrc(pick[0])) { - jid = VideoLayout.getPeerContainerResourceJid(pick[0].parentNode); + var pick = $('#remoteVideos>span[id!="mixedstream"]:visible:last'); + if (pick.length) { + jid = VideoLayout.getPeerContainerResourceJid(pick[0]); } else { console.info("Last visible video no longer exists"); - pick = $('#remoteVideos>span[id!="mixedstream"]>' + videoElem); - if (pick.length && APP.RTC.getVideoSrc(pick[0])) { - jid = VideoLayout.getPeerContainerResourceJid(pick[0].parentNode); - } else { - // Try local video + pick = $('#remoteVideos>span[id!="mixedstream"]'); + if (pick.length) { + jid = VideoLayout.getPeerContainerResourceJid(pick[0]); + } + if (!jid) { + // Go with local video console.info("Fallback to local video..."); jid = APP.xmpp.myResource(); } @@ -467,15 +467,14 @@ var VideoLayout = (function (my) { * DOM element */ my.getPeerContainerResourceJid = function (containerElement) { + if (localVideoThumbnail.container === containerElement) { + return localVideoThumbnail.getResourceJid(); + } + var i = containerElement.id.indexOf('participant_'); if (i >= 0) - return containerElement.id.substring(i + 12); - }; - - my.getPeerVideoSel = function (peerResourceJid) { - return $('#participant_' + peerResourceJid + - '>' + APP.RTC.getVideoElementName()); + return containerElement.id.substring(i + 12); }; /** @@ -492,9 +491,9 @@ var VideoLayout = (function (my) { } var resource = Strophe.getResourceFromJid(jid); - var videoSel = VideoLayout.getPeerVideoSel(resource); - if (videoSel.length > 0) { - var videoThumb = videoSel[0]; + var remoteVideo = remoteVideos[resource]; + if (remoteVideo && remoteVideo.selectVideoElement().length) { + var videoThumb = remoteVideo.selectVideoElement()[0]; // It is not always the case that a videoThumb exists (if there is // no actual video). if (RTC.getVideoSrc(videoThumb)) { @@ -553,9 +552,10 @@ var VideoLayout = (function (my) { var resource = Strophe.getResourceFromJid(jid); VideoLayout.ensurePeerContainerExists(jid); - remoteVideos[resource].showVideoIndicator(value); + var remoteVideo = remoteVideos[resource]; + remoteVideo.showVideoIndicator(value); - var el = VideoLayout.getPeerVideoSel(resource); + var el = remoteVideo.selectVideoElement(); if (!value) el.show(); else @@ -587,18 +587,19 @@ var VideoLayout = (function (my) { if (resourceJid === APP.xmpp.myResource()) return; + var remoteVideo = remoteVideos[resourceJid]; var members = APP.xmpp.getMembers(); // Update the current dominant speaker. if (resourceJid !== currentDominantSpeaker) { var currentJID = APP.xmpp.findJidFromResource(currentDominantSpeaker); var newJID = APP.xmpp.findJidFromResource(resourceJid); - if(currentDominantSpeaker && (!members || !members[currentJID] || - !members[currentJID].displayName) && remoteVideos[resourceJid]) { - remoteVideos[resourceJid].setDisplayName(null); + if (currentDominantSpeaker && (!members || !members[currentJID] || + !members[currentJID].displayName) && remoteVideo) { + remoteVideo.setDisplayName(null); } - if(resourceJid && (!members || !members[newJID] || - !members[newJID].displayName) && remoteVideos[resourceJid]) { - remoteVideos[resourceJid].setDisplayName(null, + if (resourceJid && (!members || !members[newJID] || + !members[newJID].displayName) && remoteVideo) { + remoteVideo.setDisplayName(null, interfaceConfig.DEFAULT_DOMINANT_SPEAKER_DISPLAY_NAME); } currentDominantSpeaker = resourceJid; @@ -606,8 +607,11 @@ var VideoLayout = (function (my) { return; } + if (!remoteVideo) + return; + // Obtain container for new dominant speaker. - var videoSel = VideoLayout.getPeerVideoSel(resourceJid); + var videoSel = remoteVideo.selectVideoElement(); // Local video will not have container found, but that's ok // since we don't want to switch to local video. @@ -706,14 +710,15 @@ var VideoLayout = (function (my) { endpointsEnteringLastN.forEach(function (resourceJid) { var isVisible = $('#participant_' + resourceJid).is(':visible'); - remoteVideos[resourceJid].showPeerContainer('show'); + var remoteVideo = remoteVideos[resourceJid]; + remoteVideo.showPeerContainer('show'); if (!isVisible) { console.log("Add to last N", resourceJid); var jid = APP.xmpp.findJidFromResource(resourceJid); var mediaStream = APP.RTC.remoteStreams[jid][MediaStreamType.VIDEO_TYPE]; - var sel = VideoLayout.getPeerVideoSel(resourceJid); + var sel = remoteVideo.selectVideoElement(); APP.RTC.attachMediaStream(sel, mediaStream.stream); if (lastNPickupJid == mediaStream.peerjid) {