diff --git a/conference.js b/conference.js index bc8e243e9..6df6db2a9 100644 --- a/conference.js +++ b/conference.js @@ -1231,6 +1231,12 @@ export default { room.dial(sipNumber); }); + APP.UI.addListener(UIEvents.RESOLUTION_CHANGED, + (id, oldResolution, newResolution, delay) => { + room.sendApplicationLog("Resolution change id=" + id + + " old=" + oldResolution + " new=" + newResolution + + " delay=" + delay); + }); // Starts or stops the recording for the conference. APP.UI.addListener(UIEvents.RECORDING_TOGGLED, (options) => { diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js index 37a5d1c2a..0d18fdb59 100644 --- a/modules/UI/videolayout/SmallVideo.js +++ b/modules/UI/videolayout/SmallVideo.js @@ -2,6 +2,7 @@ /* jshint -W101 */ import Avatar from "../avatar/Avatar"; import UIUtil from "../util/UIUtil"; +import UIEvents from "../../../service/UI/UIEvents"; const RTCUIHelper = JitsiMeetJS.util.RTCUIHelper; @@ -487,4 +488,37 @@ SmallVideo.prototype.getIndicatorSpan = function(id) { return indicatorSpan; }; +/** + * Adds a listener for onresize events for this video, which will monitor for + * resolution changes, will calculate the delay since the moment the listened + * is added, and will fire a RESOLUTION_CHANGED event. + */ +SmallVideo.prototype.waitForResolutionChange = function() { + let self = this; + let beforeChange = window.performance.now(); + let videos = this.selectVideoElement(); + if (!videos || !videos.length || videos.length <= 0) + return; + let video = videos[0]; + let oldWidth = video.videoWidth; + let oldHeight = video.videoHeight; + video.onresize = (event) => { + if (video.videoWidth != oldWidth || video.videoHeight != oldHeight) { + // Only run once. + video.onresize = null; + + let delay = window.performance.now() - beforeChange; + let emitter = self.VideoLayout.getEventEmitter(); + if (emitter) { + emitter.emit( + UIEvents.RESOLUTION_CHANGED, + self.getId(), + oldWidth + "x" + oldHeight, + video.videoWidth + "x" + video.videoHeight, + delay); + } + } + }; +}; + export default SmallVideo; diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index c47be8854..af4f04e90 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -1010,11 +1010,16 @@ var VideoLayout = { if (id !== currentId && videoType === VIDEO_CONTAINER_TYPE) { eventEmitter.emit(UIEvents.SELECTED_ENDPOINT, id); } - if (currentId) { - var oldSmallVideo = this.getSmallVideo(currentId); - } let smallVideo = this.getSmallVideo(id); + let oldSmallVideo; + if (currentId) { + oldSmallVideo = this.getSmallVideo(currentId); + } + + smallVideo.waitForResolutionChange(); + if (oldSmallVideo) + oldSmallVideo.waitForResolutionChange(); largeVideo.updateLargeVideo( id, @@ -1118,7 +1123,9 @@ var VideoLayout = { setLocalFlipX: function (val) { this.localFlipX = val; - } + }, + + getEventEmitter: () => {return eventEmitter;} }; export default VideoLayout; diff --git a/service/UI/UIEvents.js b/service/UI/UIEvents.js index 4ea05aef8..3d9c5f95c 100644 --- a/service/UI/UIEvents.js +++ b/service/UI/UIEvents.js @@ -80,5 +80,8 @@ export default { /** * Notifies that flipX property of the local video is changed. */ - LOCAL_FLIPX_CHANGED: "UI.local_flipx_changed" + LOCAL_FLIPX_CHANGED: "UI.local_flipx_changed", + // An event which indicates that the resolution of a remote video has + // changed. + RESOLUTION_CHANGED: "UI.resolution_changed" };