From 1a90a2c42656ee2ecebd06c67e8459a893b72ebc Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 17 Dec 2015 02:53:53 +0000
Subject: [PATCH] position the inbound call box correctly, and fix various
 issues with when the video preview and callview are shown

---
 src/components/structures/LeftPanel.js              |  6 ++----
 src/components/structures/RoomSubList.js            |  7 +++++--
 .../vector/css/molecules/voip/IncomingCallbox.css   | 13 +++++++------
 vector/index.html                                   | 12 ++++++++----
 4 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index aaab8084d..1bc08cbed 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -62,7 +62,7 @@ var LeftPanel = React.createClass({
         // audio/video not crap out
         var activeCall = CallHandler.getAnyActiveCall();
         var callForRoom = CallHandler.getCallForRoom(selectedRoomId);
-        var showCall = (activeCall && !callForRoom);
+        var showCall = (activeCall && activeCall.call_state === 'connected' && !callForRoom);
         this.setState({
             showCallElement: showCall
         });
@@ -87,7 +87,6 @@ var LeftPanel = React.createClass({
     render: function() {
         var RoomList = sdk.getComponent('rooms.RoomList');
         var BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu');
-        var IncomingCallBox = sdk.getComponent('voip.IncomingCallBox');
 
         var collapseButton;
         var classes = "mx_LeftPanel";
@@ -100,7 +99,7 @@ var LeftPanel = React.createClass({
         }
 
         var callPreview;
-        if (this.state.showCallElement) {
+        if (this.state.showCallElement && !this.props.collapsed) {
             var CallView = sdk.getComponent('voip.CallView');
             callPreview = (
                 <CallView
@@ -112,7 +111,6 @@ var LeftPanel = React.createClass({
         return (
             <aside className={classes}>
                 { collapseButton }
-                <IncomingCallBox />
                 { callPreview }
                 <RoomList
                     selectedRoom={this.props.selectedRoom}
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index f7efb4254..13330ec68 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -64,7 +64,8 @@ var RoomSubList = React.createClass({
         bottommost: React.PropTypes.bool,
         selectedRoom: React.PropTypes.string.isRequired,
         activityMap: React.PropTypes.object.isRequired,
-        collapsed: React.PropTypes.bool.isRequired
+        collapsed: React.PropTypes.bool.isRequired,
+        incomingCall: React.PropTypes.object,
     },
 
     getInitialState: function() {
@@ -239,7 +240,9 @@ var RoomSubList = React.createClass({
                     selected={ selected }
                     unread={ self.props.activityMap[room.roomId] === 1 }
                     highlight={ self.props.activityMap[room.roomId] === 2 }
-                    isInvite={ self.props.label === 'Invites' } />
+                    isInvite={ self.props.label === 'Invites' }
+                    incomingCall={ self.props.incomingCall && (self.props.incomingCall.roomId === room.roomId) ? self.props.incomingCall : null }
+                     />
             );
         });
     },
diff --git a/src/skins/vector/css/molecules/voip/IncomingCallbox.css b/src/skins/vector/css/molecules/voip/IncomingCallbox.css
index 24b24cc20..163ec43fc 100644
--- a/src/skins/vector/css/molecules/voip/IncomingCallbox.css
+++ b/src/skins/vector/css/molecules/voip/IncomingCallbox.css
@@ -19,11 +19,12 @@ limitations under the License.
     border: 1px solid #a4a4a4;
     border-radius: 8px;
     background-color: #fff;
-    position: absolute;
+    position: fixed;
     z-index: 1000;
-    left: 235px;
-    top: 155px;
     padding: 6px;
+    margin-top: -3px;
+    margin-left: -20px;
+    width: 200px;
 }
 
 .mx_IncomingCallBox_chevron {
@@ -39,14 +40,13 @@ limitations under the License.
 }
 
 .mx_IncomingCallBox_buttons {
-    display: table-row;
+    display: flex;
 }
 
 .mx_IncomingCallBox_buttons_cell {
     vertical-align: middle;
-    display: table-cell;
     padding: 6px;
-    width: 50%;
+    flex: 1;
 }
 
 .mx_IncomingCallBox_buttons_decline,
@@ -57,6 +57,7 @@ limitations under the License.
     line-height: 36px;
     border-radius: 36px;
     color: #fff;
+    margin: auto;
 }
 
 .mx_IncomingCallBox_buttons_decline {
diff --git a/vector/index.html b/vector/index.html
index 273cb4394..f926cea58 100644
--- a/vector/index.html
+++ b/vector/index.html
@@ -27,6 +27,14 @@
     <meta name="theme-color" content="#ffffff">
   </head>
   <body style="height: 100%;">
+    <section id="matrixchat" style="height: 100%;"></section>
+    <script src="bundle.js"></script>
+    <link rel="stylesheet" href="bundle.css">
+    <img src="img/warning.svg" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+    <audio id="ringAudio" loop>
+        <source src="media/ring.ogg" type="audio/ogg" />
+        <source src="media/ring.mp3" type="audio/mpeg" />
+    </audio>
     <audio id="ringbackAudio" loop>
         <source src="media/ringback.ogg" type="audio/ogg" />
         <source src="media/ringback.mp3" type="audio/mpeg" />
@@ -39,9 +47,5 @@
         <source src="media/busy.ogg" type="audio/ogg" />
         <source src="media/busy.mp3" type="audio/mpeg" />
     </audio>
-    <section id="matrixchat" style="height: 100%;"></section>
-    <script src="bundle.js"></script>
-    <link rel="stylesheet" href="bundle.css">
-    <img src="img/warning.svg" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
   </body>
 </html>