diff --git a/modules/UI/videolayout/LargeVideo.js b/modules/UI/videolayout/LargeVideo.js index 9f27bb8b2..7d755f670 100644 --- a/modules/UI/videolayout/LargeVideo.js +++ b/modules/UI/videolayout/LargeVideo.js @@ -150,7 +150,7 @@ function getDesktopVideoPosition(videoWidth, return { horizontalIndent, verticalIndent }; } -export const VideoContainerType = "video"; +export const VideoContainerType = "camera"; /** * Container for user video. @@ -357,6 +357,8 @@ export default class LargeVideoManager { this.state = VideoContainerType; this.videoContainer = new VideoContainer(() => this.resizeContainer(VideoContainerType)); this.addContainer(VideoContainerType, this.videoContainer); + // use the same video container to handle and desktop tracks + this.addContainer("desktop", this.videoContainer); this.width = 0; this.height = 0; @@ -413,7 +415,8 @@ export default class LargeVideoManager { } get id () { - return this.videoContainer.id; + let container = this.getContainer(this.state); + return container.id; } scheduleLargeVideoUpdate () { @@ -430,8 +433,9 @@ export default class LargeVideoManager { this.newStreamData = null; console.info("hover in %s", id); - this.state = VideoContainerType; - this.videoContainer.setStream(stream, videoType); + this.state = videoType; + let container = this.getContainer(this.state); + container.setStream(stream, videoType); // change the avatar url on large this.updateAvatar(Avatar.getAvatarUrl(id)); @@ -439,7 +443,7 @@ export default class LargeVideoManager { let isVideoMuted = stream ? stream.isMuted() : true; // show the avatar on large if needed - this.videoContainer.showAvatar(isVideoMuted); + container.showAvatar(isVideoMuted); let promise; @@ -449,7 +453,7 @@ export default class LargeVideoManager { this.showWatermark(true); promise = Promise.resolve(); } else { - promise = this.videoContainer.show(); + promise = container.show(); } // resolve updateLargeVideo promise after everything is done @@ -529,7 +533,8 @@ export default class LargeVideoManager { * @param enable true to enable, false to disable */ enableVideoProblemFilter (enable) { - this.videoContainer.$video.toggleClass("videoProblemFilter", enable); + let container = this.getContainer(this.state); + container.$video.toggleClass("videoProblemFilter", enable); } /** diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 3a6e7c2fe..31adc8ae1 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -801,10 +801,11 @@ var VideoLayout = { * @param forceUpdate indicates that hidden thumbnails will be shown * @param completeFunction a function to be called when the video area is * resized. - */resizeVideoArea (isSideBarVisible, - forceUpdate = false, - animate = false, - completeFunction = null) { + */ + resizeVideoArea (isSideBarVisible, + forceUpdate = false, + animate = false, + completeFunction = null) { if (largeVideo) { largeVideo.updateContainerSize(isSideBarVisible);