From d302f3eebb21c6f61f03eccdbefdb26d6db2e67d Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Tue, 20 Oct 2015 09:55:34 +0100
Subject: [PATCH] Add in voip mute video/audio skin. Needs a bit more CSS
 tweaks.

---
 src/skins/vector/css/molecules/MemberTile.css |  4 +++
 src/skins/vector/css/molecules/RoomHeader.css |  4 +++
 .../vector/views/molecules/RoomHeader.js      | 32 +++++++++++++++++--
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/skins/vector/css/molecules/MemberTile.css b/src/skins/vector/css/molecules/MemberTile.css
index a4310d206b..faae142abf 100644
--- a/src/skins/vector/css/molecules/MemberTile.css
+++ b/src/skins/vector/css/molecules/MemberTile.css
@@ -128,3 +128,7 @@ limitations under the License.
 .mx_MemberTile_zalgo {
     font-family: Helvetica, Arial, Sans-Serif;
 }
+
+.mx_MemberTile:hover .mx_MessageTimestamp {
+    display: block;
+}
diff --git a/src/skins/vector/css/molecules/RoomHeader.css b/src/skins/vector/css/molecules/RoomHeader.css
index 4f09275daa..2736efcfa4 100644
--- a/src/skins/vector/css/molecules/RoomHeader.css
+++ b/src/skins/vector/css/molecules/RoomHeader.css
@@ -163,3 +163,7 @@ limitations under the License.
 .mx_RoomHeader_button img {
     cursor: pointer;
 }
+
+.mx_RoomHeader_voipButton {
+    display: table-cell;
+}
diff --git a/src/skins/vector/views/molecules/RoomHeader.js b/src/skins/vector/views/molecules/RoomHeader.js
index 3518d1dd58..262e331168 100644
--- a/src/skins/vector/views/molecules/RoomHeader.js
+++ b/src/skins/vector/views/molecules/RoomHeader.js
@@ -19,6 +19,7 @@ limitations under the License.
 var React = require('react');
 var sdk = require('matrix-react-sdk')
 
+var CallHandler = require('matrix-react-sdk/lib/CallHandler');
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 var RoomHeaderController = require('matrix-react-sdk/lib/controllers/molecules/RoomHeader')
 
@@ -54,9 +55,36 @@ module.exports = React.createClass({
 
             var callButtons;
             if (this.state && this.state.call_state != 'ended') {
+                var muteVideoButton;
+                var activeCall = (
+                    CallHandler.getCallForRoom(this.props.room.roomId)
+                );
+                if (activeCall && activeCall.type === "video") {
+                    muteVideoButton = (
+                        <div className="mx_RoomHeader_textButton mx_RoomHeader_voipButton"
+                                onClick={this.onMuteVideoClick}>
+                            {
+                                (activeCall.isLocalVideoMuted() ?
+                                    "Unmute" : "Mute") + " video"
+                            }
+                        </div>
+                    );
+                }
+
                 callButtons = (
-                    <div className="mx_RoomHeader_textButton" onClick={this.onHangupClick}>
-                        End call
+                    <div>
+                        <div className="mx_RoomHeader_textButton mx_RoomHeader_voipButton"
+                                onClick={this.onHangupClick}>
+                            End call
+                        </div>
+                        {muteVideoButton}
+                        <div className="mx_RoomHeader_textButton mx_RoomHeader_voipButton"
+                                onClick={this.onMuteAudioClick}>
+                            {
+                                (activeCall && activeCall.isMicrophoneMuted() ?
+                                    "Unmute" : "Mute") + " audio"
+                            }
+                        </div>
                     </div>
                 );
             }