Adopts to new semantics of JitsiTrack#attach method.

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({

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);

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);
 },
 
 /**

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