Wire up hangup/answer buttons.

skins/base/views/molecules/RoomHeader.js

@@ -30,6 +30,38 @@ module.exports = React.createClass({
         var topic = this.props.room.currentState.getStateEvents('m.room.topic', '');
         topic = topic ? <div className="mx_RoomHeader_topic">{ topic.getContent().topic }</div> : null;
 
+        var callButtons;
+        if (this.state) {
+            switch (this.state.callState) {
+                case "INBOUND":
+                    callButtons = (
+                        <div>
+                        <div className="mx_RoomHeader_button" onClick={this.onAnswerClick}>
+                        YUP
+                        </div>
+                        <div className="mx_RoomHeader_button" onClick={this.onHangupClick}>
+                        NOPE
+                        </div>
+                        </div>
+                    );
+                    break;
+                case "OUTBOUND":
+                    callButtons = (
+                        <div className="mx_RoomHeader_button" onClick={this.onHangupClick}>
+                        BYEBYE
+                        </div>
+                    );
+                    break;
+                case "IN_CALL":
+                    callButtons = (
+                        <div className="mx_RoomHeader_button" onClick={this.onHangupClick}>
+                        BYEBYE
+                        </div>
+                    );
+                    break;
+            }
+        }
+
         return (
             <div className="mx_RoomHeader">
                 <div className="mx_RoomHeader_wrapper">
@@ -49,13 +81,7 @@ module.exports = React.createClass({
                         <div className="mx_RoomHeader_button">
                             <img src="img/search.png" width="32" height="32"/>
                         </div>
-                        {
+                        {callButtons}
-                            this.state && this.state.inCall ?
-                            <div className="mx_RoomHeader_button" onClick={this.onHangupClick}>
-                                <img src="img/video.png" width="64" height="32"/>
-                            </div>
-                            : null
-                        }
                         <div className="mx_RoomHeader_button" onClick={this.onVideoClick}>
                             <img src="img/video.png" width="32" height="32"/>
                         </div>

src/controllers/molecules/RoomHeader.js

@@ -18,7 +18,7 @@ limitations under the License.
 
 /*
  * State vars:
- * this.state.inCall = boolean
+ * this.state.callState = OUTBOUND|INBOUND|IN_CALL|NO_CALL
  */
 
 var dis = require("../../dispatcher");
@@ -28,7 +28,7 @@ module.exports = {
     componentDidMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
         this.setState({
-            inCall: false
+            callState: "NO_CALL"
         });
     },
 
@@ -45,8 +45,24 @@ module.exports = {
         if (payload.action !== 'call_state') {
             return;
         }
+        var call = CallHandler.getCall(payload.room_id);
+        var callState = 'NO_CALL';
+        if (call && call.state !== 'ended') {
+            if (call.state === 'connected') {
+                callState = "IN_CALL";
+            }
+            else if (call.direction === 'outbound') {
+                callState = "OUTBOUND";
+            }
+            else if (call.direction === 'inbound') {
+                callState = "INBOUND";
+            }
+            else {
+                console.error("Cannot determine call state.");
+            }
+        }
         this.setState({
-            inCall: (CallHandler.getCall(payload.room_id) !== null)
+            callState: callState
         });
     },
 
@@ -69,6 +85,12 @@ module.exports = {
             action: 'hangup',
             room_id: this.props.room.roomId
         });
+    },
+    onAnswerClick: function() {
+        dis.dispatch({
+            action: 'answer',
+            room_id: this.props.room.roomId
+        });
     }
 };