From 43ab6074c99a7290c260f5eff26930398e24d621 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sun, 13 Dec 2015 04:32:48 +0000
Subject: [PATCH] sacrifice a herd of goats to correctly size the remote video
 element when on a call. turns out flexbox isn't smart enough to let us say
 that the minimum height of the element should be the (scaled) intrinsic
 height of the video stream, and that the max height should be ~80% of the
 height of the normal timeline. so we fudge it with JS instead, which turns
 out to work fine. after a lot of poking at flexbox i'm fairly convinced this
 is a fundamental limitation: the implicit height of the video tag can only be
 used as the minimum height of the auxPanel if you give up on the flexbox
 shrink/grow being able to constrain it too. there's a chance I made a
 mistake, but whatever, this works well enough.

---
 src/components/structures/RoomView.js | 30 +++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 15d1ac3a53..5bad92bf3a 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -58,7 +58,7 @@ module.exports = React.createClass({
             searching: false,
             searchResults: null,
             syncState: MatrixClientPeg.get().getSyncState(),
-            hasUnsentMessages: this._hasUnsentMessages(room)
+            hasUnsentMessages: this._hasUnsentMessages(room),
         }
     },
 
@@ -90,6 +90,8 @@ module.exports = React.createClass({
             MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
             MatrixClientPeg.get().removeListener("sync", this.onSyncStateChange);
         }
+
+        window.removeEventListener('resize', this.onResize);        
     },
 
     onAction: function(payload) {
@@ -277,6 +279,9 @@ module.exports = React.createClass({
         }
 
         this._updateConfCallNotification();
+
+        window.addEventListener('resize', this.onResize);
+        this.onResize();
     },
 
     componentDidUpdate: function() {
@@ -832,6 +837,27 @@ module.exports = React.createClass({
         scrollNode.scrollTop = scrollNode.scrollHeight;
     },
 
+    onResize: function(e) {
+        // It seems flexbox doesn't give us a way to constrain the auxPanel height to have
+        // a minimum of the height of the video element, whilst also capping it from pushing out the page
+        // so we have to do it via JS instead.  In this implementation we cap the height by putting
+        // a maxHeight on the underlying remote video tag.
+        var auxPanelMaxHeight;
+        if (this.refs.callView) {
+            // XXX: don't understand why we have to call findDOMNode here in react 0.14 - it should already be a DOM node.
+            var video = ReactDOM.findDOMNode(this.refs.callView.refs.video.refs.remote);
+
+            // header + footer + status + give us at least 100px of scrollback at all times.
+            auxPanelMaxHeight = window.innerHeight - (83 + 72 + 36 + 100);
+
+            // XXX: this is a bit of a hack and might possibly cause the video to push out the page anyway
+            // but it's better than the video going missing entirely
+            if (auxPanelMaxHeight < 50) auxPanelMaxHeight = 50;
+            
+            video.style.maxHeight = auxPanelMaxHeight + "px";
+        }
+    },
+
     render: function() {
         var RoomHeader = sdk.getComponent('rooms.RoomHeader');
         var MessageComposer = sdk.getComponent('rooms.MessageComposer');
@@ -1016,7 +1042,7 @@ module.exports = React.createClass({
                         onSettingsClick={this.onSettingsClick} onSaveClick={this.onSaveClick} onCancelClick={this.onCancelClick} />
                     { fileDropTarget }    
                     <div className="mx_RoomView_auxPanel">
-                        <CallView room={this.state.room} ConferenceHandler={this.props.ConferenceHandler}/>
+                        <CallView ref="callView" room={this.state.room} ConferenceHandler={this.props.ConferenceHandler}/>
                         { conferenceCallNotification }
                         { aux }
                     </div>