gaja-group
/
element-web
forked from matrix/element-web
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

position the inbound call box correctly, and fix various issues with when the video preview and callview are shown

This commit is contained in:
Matthew Hodgson 2015-12-17 02:53:53 +00:00
parent 856156ef5c
commit 1a90a2c426
4 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/structures/LeftPanel.js
View File

@ -62,7 +62,7 @@ var LeftPanel = React.createClass({
// audio/video not crap out // audio/video not crap out
var activeCall = CallHandler.getAnyActiveCall(); var activeCall = CallHandler.getAnyActiveCall();
var callForRoom = CallHandler.getCallForRoom(selectedRoomId); var callForRoom = CallHandler.getCallForRoom(selectedRoomId);
var showCall = (activeCall && !callForRoom); var showCall = (activeCall && activeCall.call_state === 'connected' && !callForRoom);
this.setState({ this.setState({
showCallElement: showCall showCallElement: showCall
}); });
@ -87,7 +87,6 @@ var LeftPanel = React.createClass({
render: function() { render: function() {
var RoomList = sdk.getComponent('rooms.RoomList'); var RoomList = sdk.getComponent('rooms.RoomList');
var BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu'); var BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu');
var IncomingCallBox = sdk.getComponent('voip.IncomingCallBox');
var collapseButton; var collapseButton;
var classes = "mx_LeftPanel"; var classes = "mx_LeftPanel";
@ -100,7 +99,7 @@ var LeftPanel = React.createClass({
} }
var callPreview; var callPreview;
if (this.state.showCallElement) { if (this.state.showCallElement && !this.props.collapsed) {
var CallView = sdk.getComponent('voip.CallView'); var CallView = sdk.getComponent('voip.CallView');
callPreview = ( callPreview = (
<CallView <CallView
@ -112,7 +111,6 @@ var LeftPanel = React.createClass({
return ( return (
<aside className={classes}> <aside className={classes}>
{ collapseButton } { collapseButton }
<IncomingCallBox />
{ callPreview } { callPreview }
<RoomList <RoomList
selectedRoom={this.props.selectedRoom} selectedRoom={this.props.selectedRoom}

7
src/components/structures/RoomSubList.js
View File

@ -64,7 +64,8 @@ var RoomSubList = React.createClass({
bottommost: React.PropTypes.bool, bottommost: React.PropTypes.bool,
selectedRoom: React.PropTypes.string.isRequired, selectedRoom: React.PropTypes.string.isRequired,
activityMap: React.PropTypes.object.isRequired, activityMap: React.PropTypes.object.isRequired,
collapsed: React.PropTypes.bool.isRequired collapsed: React.PropTypes.bool.isRequired,
incomingCall: React.PropTypes.object,
}, },
getInitialState: function() { getInitialState: function() {
@ -239,7 +240,9 @@ var RoomSubList = React.createClass({
selected={ selected } selected={ selected }
unread={ self.props.activityMap[room.roomId] === 1 } unread={ self.props.activityMap[room.roomId] === 1 }
highlight={ self.props.activityMap[room.roomId] === 2 } 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 }
/>
); );
}); });
}, },

13
src/skins/vector/css/molecules/voip/IncomingCallbox.css
View File

@ -19,11 +19,12 @@ limitations under the License.
border: 1px solid #a4a4a4; border: 1px solid #a4a4a4;
border-radius: 8px; border-radius: 8px;
background-color: #fff; background-color: #fff;
position: absolute; position: fixed;
z-index: 1000; z-index: 1000;
left: 235px;
top: 155px;
padding: 6px; padding: 6px;
margin-top: -3px;
margin-left: -20px;
width: 200px;
} }
.mx_IncomingCallBox_chevron { .mx_IncomingCallBox_chevron {
@ -39,14 +40,13 @@ limitations under the License.
} }
.mx_IncomingCallBox_buttons { .mx_IncomingCallBox_buttons {
display: table-row; display: flex;
} }
.mx_IncomingCallBox_buttons_cell { .mx_IncomingCallBox_buttons_cell {
vertical-align: middle; vertical-align: middle;
display: table-cell;
padding: 6px; padding: 6px;
width: 50%; flex: 1;
} }
.mx_IncomingCallBox_buttons_decline, .mx_IncomingCallBox_buttons_decline,
@ -57,6 +57,7 @@ limitations under the License.
line-height: 36px; line-height: 36px;
border-radius: 36px; border-radius: 36px;
color: #fff; color: #fff;
margin: auto;
} }
.mx_IncomingCallBox_buttons_decline { .mx_IncomingCallBox_buttons_decline {

12
vector/index.html
View File

@ -27,6 +27,14 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
</head> </head>
<body style="height: 100%;"> <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> <audio id="ringbackAudio" loop>
<source src="media/ringback.ogg" type="audio/ogg" /> <source src="media/ringback.ogg" type="audio/ogg" />
<source src="media/ringback.mp3" type="audio/mpeg" /> <source src="media/ringback.mp3" type="audio/mpeg" />
@ -39,9 +47,5 @@
<source src="media/busy.ogg" type="audio/ogg" /> <source src="media/busy.ogg" type="audio/ogg" />
<source src="media/busy.mp3" type="audio/mpeg" /> <source src="media/busy.mp3" type="audio/mpeg" />
</audio> </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> </body>
</html> </html>