Move position of incoming call buttons.

skins/base/views/molecules/RoomHeader.js

@@ -33,18 +33,6 @@ module.exports = React.createClass({
         var callButtons;
         if (this.state) {
             switch (this.state.call_state) {
-                case "ringing":
-                    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 "ringback":
                 case "connected":
                     callButtons = (

skins/base/views/molecules/voip/IncomingCallBox.js

@@ -0,0 +1,56 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var classNames = require('classnames');
+var IncomingCallBoxController = require(
+    "../../../../../src/controllers/molecules/voip/IncomingCallBox"
+);
+
+module.exports = React.createClass({
+    displayName: 'IncomingCallBox',
+    mixins: [IncomingCallBoxController],
+
+    render: function() {
+        if (!this.state.incomingCallRoomId) {
+            return (
+                <div></div>
+            );
+        }
+        return (
+            <div className="mx_IncomingCallBox">
+                <div className="mx_IncomingCallBox_avatar">
+                    <img src="img/voip.png" width="42" height="42"/>
+                </div>
+                <div className="mx_IncomingCallBox_title">
+                    General Incoming Call
+                </div>
+                <div className="mx_IncomingCallBox_buttons">
+                    <div className="mx_IncomingCallBox_buttons_decline"
+                    onClick={this.onRejectClick}>
+                        Decline
+                    </div>
+                    <div className="mx_IncomingCallBox_buttons_accept"
+                    onClick={this.onAnswerClick}>
+                        Accept
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});

skins/base/views/organisms/LeftPanel.js

@@ -21,6 +21,7 @@ var ComponentBroker = require('../../../../src/ComponentBroker');
 
 var RoomList = ComponentBroker.get('organisms/RoomList');
 var DirectoryMenu = ComponentBroker.get('molecules/DirectoryMenu');
+var IncomingCallBox = ComponentBroker.get('molecules/voip/IncomingCallBox');
 var RoomCreate = ComponentBroker.get('molecules/RoomCreate');
 
 module.exports = React.createClass({
@@ -30,6 +31,7 @@ module.exports = React.createClass({
         return (
             <div className="mx_LeftPanel">
                 <img className="mx_LeftPanel_hideButton" src="img/hide.png" width="32" height="32" alt="<"/>
+                <IncomingCallBox />
                 <RoomList selectedRoom={this.props.currentRoom} />
                 <DirectoryMenu />
             </div>

src/ComponentBroker.js

@@ -101,6 +101,7 @@ require('../skins/base/views/molecules/DirectoryMenu');
 require('../skins/base/views/atoms/voip/VideoFeed');
 require('../skins/base/views/molecules/voip/VideoView');
 require('../skins/base/views/molecules/voip/CallView');
+require('../skins/base/views/molecules/voip/IncomingCallBox');
 require('../skins/base/views/molecules/voip/MCallInviteTile');
 require('../skins/base/views/molecules/voip/MCallAnswerTile');
 require('../skins/base/views/molecules/voip/MCallHangupTile');

src/controllers/molecules/RoomHeader.js

@@ -76,12 +76,6 @@ module.exports = {
             action: 'hangup',
             room_id: this.props.room.roomId
         });
-    },
-    onAnswerClick: function() {
-        dis.dispatch({
-            action: 'answer',
-            room_id: this.props.room.roomId
-        });
     }
 };
 

src/controllers/molecules/voip/IncomingCallBox.js

@@ -0,0 +1,66 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var dis = require("../../../dispatcher");
+var CallHandler = require("../../../CallHandler");
+
+module.exports = {
+    componentDidMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
+    },
+
+    componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
+    },
+
+    getInitialState: function() {
+        return {
+            incomingCallRoomId: null
+        }
+    },
+
+    onAction: function(payload) {
+        if (payload.action !== 'call_state') {
+            return;
+        }
+        var call = CallHandler.getCall(payload.room_id);
+        if (!call || call.call_state !== 'ringing') {
+            this.setState({
+                incomingCallRoomId: null
+            });
+            return;
+        }
+        this.setState({
+            incomingCallRoomId: call.roomId
+        });
+    },
+
+    onAnswerClick: function() {
+        dis.dispatch({
+            action: 'answer',
+            room_id: this.state.incomingCallRoomId
+        });
+    },
+    onRejectClick: function() {
+        dis.dispatch({
+            action: 'hangup',
+            room_id: this.state.incomingCallRoomId
+        });
+    }
+};
+