diff --git a/modules/UI/util/UIUtil.js b/modules/UI/util/UIUtil.js index 58cd9f69f..563c20b79 100644 --- a/modules/UI/util/UIUtil.js +++ b/modules/UI/util/UIUtil.js @@ -78,5 +78,19 @@ module.exports = { element.setAttribute("data-placement", position); element.setAttribute("data-html", true); element.setAttribute("data-container", "body"); + }, + + /** + * Inserts given child element as the first one into the container. + * @param container the container to which new child element will be added + * @param newChild the new element that will be inserted into the container + */ + prependChild: function (container, newChild) { + var firstChild = container.childNodes[0]; + if (firstChild) { + container.insertBefore(newChild, firstChild); + } else { + container.appendChild(newChild); + } } }; \ No newline at end of file diff --git a/modules/UI/videolayout/LocalVideo.js b/modules/UI/videolayout/LocalVideo.js index 926acd3ff..7c24b4928 100644 --- a/modules/UI/videolayout/LocalVideo.js +++ b/modules/UI/videolayout/LocalVideo.js @@ -201,7 +201,8 @@ LocalVideo.prototype.changeVideo = function (stream, isMuted) { localVideo.oncontextmenu = function () { return false; }; var localVideoContainer = document.getElementById('localVideoWrapper'); - localVideoContainer.appendChild(localVideo); + // Put the new video always in front + UIUtil.prependChild(localVideoContainer, localVideo); var localVideoSelector = $('#' + localVideo.id); diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index 0eee1f426..7881bbaa3 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -5,6 +5,7 @@ var AudioLevels = require("../audio_levels/AudioLevels"); var LargeVideo = require("./LargeVideo"); var Avatar = require("../avatar/Avatar"); var RTCBrowserType = require("../../RTC/RTCBrowserType"); +var UIUtils = require("../util/UIUtil"); function RemoteVideo(peerJid, VideoLayout) { this.peerJid = peerJid; @@ -212,7 +213,8 @@ RemoteVideo.prototype.addRemoteStreamElement = function (sid, stream, thessrc) { var streamElement = SmallVideo.createStreamElement(sid, stream); var newElementId = streamElement.id; - this.container.appendChild(streamElement); + // Put new stream element always in front + UIUtils.prependChild(this.container, streamElement); var sel = $('#' + newElementId); sel.hide();