basic skin of incomingCallBox

skins/base/css/molecules/voip/IncomingCallbox.css

@@ -13,3 +13,56 @@ 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.
 */
+
+.mx_IncomingCallBox {
+    text-align: center;
+    border: 1px solid #a9dbf4;
+    border-radius: 8px;
+    background-color: #fff;
+    position: absolute;
+    z-index: 1000;
+    left: 235px;
+    top: 155px;
+    padding: 6px;
+}
+
+.mx_IncomingCallBox_chevron {
+    padding: 12px;
+    position: absolute;
+    left: -21px;
+    top: 0px;
+}
+
+.mx_IncomingCallBox_title {
+    padding: 6px;
+    font-weight: bold;
+}
+
+.mx_IncomingCallBox_buttons {
+    display: table-row;
+}
+
+.mx_IncomingCallBox_buttons_cell {
+    vertical-align: middle;
+    display: table-cell;
+    padding: 6px;
+    width: 50%;
+}
+
+.mx_IncomingCallBox_buttons_decline,
+.mx_IncomingCallBox_buttons_accept {
+    vertical-align: middle;
+    width: 80px;
+    height: 36px;
+    line-height: 36px;
+    border-radius: 36px;
+    color: #fff;
+}
+
+.mx_IncomingCallBox_buttons_decline {
+    background-color: #f48080;
+}
+
+.mx_IncomingCallBox_buttons_accept {
+    background-color: #80f480;
+}

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

@@ -17,7 +17,7 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
-var classNames = require('classnames');
+var MatrixClientPeg = require("../../../../../src/MatrixClientPeg");
 var IncomingCallBoxController = require(
     "../../../../../src/controllers/molecules/voip/IncomingCallBox"
 );
@@ -31,7 +31,7 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        if (!this.state.incomingCallRoomId) {
+        if (!this.state.incomingCall || !this.state.incomingCall.roomId) {
             return (
                 <div>
                     <audio ref="ringAudio" loop>
@@ -41,29 +41,30 @@ module.exports = React.createClass({
                 </div>
             );
         }
+        var caller = MatrixClientPeg.get().getRoom(this.state.incomingCall.roomId).name;
         return (
             <div className="mx_IncomingCallBox">
+                <img className="mx_IncomingCallBox_chevron" src="/img/chevron-left.png" width="9" height="16" />
                 <audio ref="ringAudio" loop>
                     <source src="media/ring.ogg" type="audio/ogg" />
                     <source src="media/ring.mp3" type="audio/mpeg" />
                 </audio>
-                <div className="mx_IncomingCallBox_avatar">
-                    <img src="img/voip.png" width="42" height="42"/>
-                </div>
                 <div className="mx_IncomingCallBox_title">
-                    General Incoming Call
+                    Incoming { this.state.incomingCall ? this.state.incomingCall.type : '' } call from { caller }
                 </div>
                 <div className="mx_IncomingCallBox_buttons">
-                    <div className="mx_IncomingCallBox_buttons_decline"
-                    onClick={this.onRejectClick}>
+                    <div className="mx_IncomingCallBox_buttons_cell">
+                        <div className="mx_IncomingCallBox_buttons_decline" onClick={this.onRejectClick}>
                             Decline
                         </div>
-                    <div className="mx_IncomingCallBox_buttons_accept"
-                    onClick={this.onAnswerClick}>
+                    </div>
+                    <div className="mx_IncomingCallBox_buttons_cell">
+                        <div className="mx_IncomingCallBox_buttons_accept" onClick={this.onAnswerClick}>
                             Accept
                         </div>
                     </div>
                 </div>
+            </div>
         );
     }
 });

src/controllers/molecules/voip/IncomingCallBox.js

@@ -30,7 +30,7 @@ module.exports = {
 
     getInitialState: function() {
         return {
-            incomingCallRoomId: null
+            incomingCall: null
         }
     },
 
@@ -41,7 +41,7 @@ module.exports = {
         var call = CallHandler.getCall(payload.room_id);
         if (!call || call.call_state !== 'ringing') {
             this.setState({
-                incomingCallRoomId: null
+                incomingCall: null,
             });
             this.getRingAudio().pause();
             return;
@@ -55,20 +55,20 @@ module.exports = {
         }
 
         this.setState({
-            incomingCallRoomId: call.roomId
+            incomingCall: call
         });
     },
 
     onAnswerClick: function() {
         dis.dispatch({
             action: 'answer',
-            room_id: this.state.incomingCallRoomId
+            room_id: this.state.incomingCall.roomId
         });
     },
     onRejectClick: function() {
         dis.dispatch({
             action: 'hangup',
-            room_id: this.state.incomingCallRoomId
+            room_id: this.state.incomingCall.roomId
         });
     }
 };