Factor out a separate auxpanel, and cleanup the maxHeight management

Basically two changes here:

1. Factor out auxpanel from RoomView
2. Rather than setting maxHeight attributes by poking directly into the DOM,
pass them down as properties.

src/components/views/voip/CallView.js

@@ -19,38 +19,32 @@ var CallHandler = require("../../../CallHandler");
 var sdk = require('../../../index');
 var MatrixClientPeg = require("../../../MatrixClientPeg");
 
-/*
- * State vars:
- * this.state.call = MatrixCall|null
- *
- * Props:
- * this.props.room = Room (JS SDK)
- * this.props.ConferenceHandler = A Conference Handler implementation
- *                                Must have a function signature:
- *                                getConferenceCallForRoom(roomId: string): MatrixCall
- */
-
 module.exports = React.createClass({
     displayName: 'CallView',
 
     propTypes: {
-        // a callback which is called when the video within the callview
-        // due to a change in video metadata
+        // js-sdk room object
+        room: React.PropTypes.object.isRequired,
+
+        // A Conference Handler implementation
+        // Must have a function signature:
+        //  getConferenceCallForRoom(roomId: string): MatrixCall
+        ConferenceHandler: React.PropTypes.object,
+
+        // maxHeight style attribute for the video panel
+        maxVideoHeight: React.PropTypes.number,
+
+        // a callback which is called when the user clicks on the video div
+        onClick: React.PropTypes.func,
+
+        // a callback which is called when the video within the callview is
+        // resized due to a change in video metadata
         onResize: React.PropTypes.func,
     },
 
     componentDidMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
-        if (this.props.room) {
-            this.showCall(this.props.room.roomId);
-        }
-        else {
-            // XXX: why would we ever not have a this.props.room?
-            var call = CallHandler.getAnyActiveCall();
-            if (call) {
-                this.showCall(call.roomId);
-            }
-        }
+        this.showCall(this.props.room.roomId);
     },
 
     componentWillUnmount: function() {
@@ -103,7 +97,10 @@ module.exports = React.createClass({
     render: function(){
         var VideoView = sdk.getComponent('voip.VideoView');
         return (
-            <VideoView ref="video" onClick={ this.props.onClick } onResize={ this.props.onResize }/>
+            <VideoView ref="video" onClick={ this.props.onClick }
+                onResize={ this.props.onResize }
+                maxHeight={ this.props.maxVideoHeight }
+            />
         );
     }
 });

src/components/views/voip/VideoFeed.js

@@ -22,6 +22,9 @@ module.exports = React.createClass({
     displayName: 'VideoFeed',
 
     propTypes: {
+        // maxHeight style attribute for the video element
+        maxHeight: React.PropTypes.number,
+
         // a callback which is called when the video element is resized
         // due to a change in video metadata
         onResize: React.PropTypes.func,
@@ -43,7 +46,7 @@ module.exports = React.createClass({
 
     render: function() {
         return (
-            <video ref="vid">
+            <video ref="vid" style={{maxHeight: this.props.maxHeight}}>
             </video>
         );
     },

src/components/views/voip/VideoView.js

@@ -25,6 +25,18 @@ var dis = require('../../../dispatcher');
 module.exports = React.createClass({
     displayName: 'VideoView',
 
+    propTypes: {
+        // maxHeight style attribute for the video element
+        maxHeight: React.PropTypes.number,
+
+        // a callback which is called when the user clicks on the video div
+        onClick: React.PropTypes.func,
+
+        // a callback which is called when the video element is resized due to
+        // a change in video metadata
+        onResize: React.PropTypes.func,
+    },
+
     componentDidMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
     },
@@ -64,7 +76,6 @@ module.exports = React.createClass({
                         element.msRequestFullscreen
                     );
                     requestMethod.call(element);
-                    this.getRemoteVideoElement().style.maxHeight = "inherit";
                 }
                 else {
                     var exitMethod = (
@@ -83,10 +94,18 @@ module.exports = React.createClass({
 
     render: function() {
         var VideoFeed = sdk.getComponent('voip.VideoFeed');
+
+        // if we're fullscreen, we don't want to set a maxHeight on the video element.
+        var fullscreenElement = (document.fullscreenElement ||
+                 document.mozFullScreenElement ||
+                 document.webkitFullscreenElement);
+        var maxVideoHeight = fullscreenElement ? null : this.props.maxHeight;
+
         return (
             <div className="mx_VideoView" ref={this.setContainer} onClick={ this.props.onClick }>
                 <div className="mx_VideoView_remoteVideoFeed">
-                    <VideoFeed ref="remote" onResize={this.props.onResize}/>
+                    <VideoFeed ref="remote" onResize={this.props.onResize}
+                        maxHeight={maxVideoHeight} />
                     <audio ref="remoteAudio"/>
                 </div>
                 <div className="mx_VideoView_localVideoFeed">