diff --git a/static/css/chat.css b/static/css/chat.css index 3af32de2..b637f6b6 100644 --- a/static/css/chat.css +++ b/static/css/chat.css @@ -135,13 +135,14 @@ body { z-index: 1; } -/* XXX once we get the local-video stapled to the remote-video, +/* YYYaudit once we get the local-video stapled to the remote-video, much of this stuff may be irrelevant. Audit this as part of that landing. */ #call .local-video { position: absolute; bottom: 10px; /* 10px seems to give stablest stapling across most sizes */ - right: 5px; + right: 5px; /* Adjusted dynamically, currently by callView resize handler + * If you change this; edit that handler */ width: 20vw; min-width: 80px; max-width: 200px; diff --git a/static/js/chat/views.js b/static/js/chat/views.js index 0c2b3801..34c1eaf4 100644 --- a/static/js/chat/views.js +++ b/static/js/chat/views.js @@ -397,6 +397,7 @@ this.call.on('change:state', this.render, this); + window.addEventListener("resize", this._onWindowResize.bind(this)); this.render(); }, @@ -442,6 +443,32 @@ this.$el.show(); else this.$el.hide(); + }, + + // be sure to change the localVideo.right property in chat.css when + // changing this! + _localVideoGutterWidth: 5, + + _onWindowResize: function(event) { + + // (re)positions localVideo to be stapled inside right of remote-video + + var localVideo = this.$('#local-video').get(0); + var remoteVideo = this.$('#remote-video').get(0); + + var streamHeight = remoteVideo.videoHeight; + var streamWidth = remoteVideo.videoWidth; + + if (!streamHeight || !streamWidth) { + return; + } + + var pillarboxWidth = app.utils.getPillarboxWidth( + [remoteVideo.clientWidth, remoteVideo.clientHeight], + [streamWidth, streamHeight]); + + localVideo.style.right = + this._localVideoGutterWidth + pillarboxWidth + "px"; } }); diff --git a/static/js/utils.js b/static/js/utils.js index 09b51795..b3100116 100644 --- a/static/js/utils.js +++ b/static/js/utils.js @@ -183,4 +183,27 @@ return [scaleFactor * streamSize[0], scaleFactor * streamSize[1]]; }; + /** + * Returns the width of the pillarbox (blank vertical column to the left + * or right of the video when preserving the video stream's aspect ratio + * requires the displayed video to be smaller than its containing box. + * + * XXX need to define behavior when width is not an integer + * + * @param {Array} boxSize -- size of entire