diff --git a/modules/UI/videolayout/LargeVideo.js b/modules/UI/videolayout/LargeVideo.js index e7528bce9..a0d845356 100644 --- a/modules/UI/videolayout/LargeVideo.js +++ b/modules/UI/videolayout/LargeVideo.js @@ -280,7 +280,7 @@ class VideoContainer extends LargeContainer { if(!stream) return; - stream.attach(this.$video); + stream.attach(this.$video[0]); let flipX = stream.isLocal() && !this.isScreenSharing(); this.$video.css({ diff --git a/modules/UI/videolayout/LocalVideo.js b/modules/UI/videolayout/LocalVideo.js index a2bd7bed0..a92b2d6b9 100644 --- a/modules/UI/videolayout/LocalVideo.js +++ b/modules/UI/videolayout/LocalVideo.js @@ -175,8 +175,6 @@ LocalVideo.prototype.changeVideo = function (stream) { // Put the new video always in front UIUtil.prependChild(localVideoContainer, localVideo); - var localVideoSelector = $('#' + localVideo.id); - // Add click handler to both video and video wrapper elements in case // there's no video. @@ -184,14 +182,13 @@ LocalVideo.prototype.changeVideo = function (stream) { localVideo.onclick = localVideoClick; if (this.flipX) { - localVideoSelector.addClass("flipVideoX"); + $(localVideo).addClass("flipVideoX"); } // Attach WebRTC stream - stream.attach(localVideoSelector); + localVideo = stream.attach(localVideo); let endedHandler = () => { - localVideo = $('#' + localVideo.id)[0]; localVideoContainer.removeChild(localVideo); this.VideoLayout.updateRemovedVideo(this.id); stream.off(TrackEvents.TRACK_STOPPED, endedHandler); diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index abbeebb42..023901688 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -181,7 +181,7 @@ RemoteVideo.prototype.remove = function () { } }; -RemoteVideo.prototype.waitForPlayback = function (sel, stream) { +RemoteVideo.prototype.waitForPlayback = function (streamElement, stream) { var webRtcStream = stream.getOriginalStream(); var isVideo = stream.isVideoTrack(); @@ -199,18 +199,15 @@ RemoteVideo.prototype.waitForPlayback = function (sel, stream) { //FIXME: weshould use the lib here //APP.RTC.attachMediaStream(sel, webRtcStream); } - if (RTCBrowserType.isTemasysPluginUsed()) { - sel = self.selectVideoElement(); - } - self.VideoLayout.videoactive(sel, self.id); - sel[0].onplaying = null; + self.VideoLayout.videoactive(streamElement, self.id); + streamElement.onplaying = null; if (RTCBrowserType.isTemasysPluginUsed()) { // 'currentTime' is used to check if the video has started // and the value is not set by the plugin, so we do it - sel[0].currentTime = 1; + streamElement.currentTime = 1; } }; - sel[0].onplaying = onPlayingHandler; + streamElement.onplaying = onPlayingHandler; }; RemoteVideo.prototype.addRemoteStreamElement = function (stream) { @@ -250,25 +247,20 @@ RemoteVideo.prototype.addRemoteStreamElement = function (stream) { // Put new stream element always in front UIUtils.prependChild(this.container, streamElement); - let sel = $(`#${newElementId}`); + // If we hide element when Temasys plugin is used then + // we'll never receive 'onplay' event and other logic won't work as expected + if (!RTCBrowserType.isTemasysPluginUsed()) { + $(streamElement).hide(); + } // If the container is currently visible we attach the stream to the element. if (!isVideo || (this.container.offsetParent !== null && isVideo)) { - this.waitForPlayback(sel, stream); + this.waitForPlayback(streamElement, stream); - stream.attach(sel); + streamElement = stream.attach(streamElement); } - // hide element only after stream was (maybe) attached - // because Temasys plugin requires video element - // to be visible to attach the stream - sel.hide(); - - // reselect - if (RTCBrowserType.isTemasysPluginUsed()) { - sel = $(`#${newElementId}`); - } - sel.click(onClickHandler); + $(streamElement).click(onClickHandler); }, /** diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index b83dfeaaf..11a7af5cc 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -126,7 +126,7 @@ var VideoLayout = { changeLocalAudio (stream) { let localAudio = document.getElementById('localAudio'); - stream.attach($(localAudio)); + localAudio = stream.attach(localAudio); //return; // FIXME maybe move this into the library? // Writing volume not allowed in IE @@ -142,7 +142,7 @@ var VideoLayout = { // 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 - $('#localAudio').hide(); + $(localAudio).hide(); } }, @@ -369,9 +369,9 @@ var VideoLayout = { videoactive (videoelem, resourceJid) { - console.info(resourceJid + " video is now active"); + console.info(resourceJid + " video is now active", videoelem); - videoelem.show(); + $(videoelem).show(); VideoLayout.resizeThumbnails(); // Update the large video to the last added video only if there's no