basic skin of incomingCallBox

pull/1/head
Matthew Hodgson 2015-07-19 01:58:04 +01:00
parent 919e1cf84f
commit 1e1f7492d8
4 changed files with 71 additions and 17 deletions

View File

@ -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;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 179 B

View File

@ -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,26 +41,27 @@ 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}>
Decline
<div className="mx_IncomingCallBox_buttons_cell">
<div className="mx_IncomingCallBox_buttons_decline" onClick={this.onRejectClick}>
Decline
</div>
</div>
<div className="mx_IncomingCallBox_buttons_accept"
onClick={this.onAnswerClick}>
Accept
<div className="mx_IncomingCallBox_buttons_cell">
<div className="mx_IncomingCallBox_buttons_accept" onClick={this.onAnswerClick}>
Accept
</div>
</div>
</div>
</div>

View File

@ -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
});
}
};