Implement ringing audio. Add other audio tags.

This commit is contained in:
Kegan Dougal 2015-07-17 16:42:16 +01:00
parent ff567faeaa
commit 827e777079
13 changed files with 35 additions and 1 deletions

View file

@ -6,6 +6,18 @@
<link href='https://fonts.googleapis.com/css?family=Muli:300,400' rel='stylesheet' type='text/css'>
</head>
<body style="height: 100%;">
<audio id="ringbackAudio" loop>
<source src="media/ringback.ogg" type="audio/ogg" />
<source src="media/ringback.mp3" type="audio/mpeg" />
</audio>
<audio id="callendAudio">
<source src="media/callend.ogg" type="audio/ogg" />
<source src="media/callend.mp3" type="audio/mpeg" />
</audio>
<audio id="busyAudio">
<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="node_modules/matrix-react-sdk/bundle.css">

View file

@ -26,14 +26,27 @@ module.exports = React.createClass({
displayName: 'IncomingCallBox',
mixins: [IncomingCallBoxController],
getRingAudio: function() {
return this.refs.ringAudio.getDOMNode();
},
render: function() {
if (!this.state.incomingCallRoomId) {
return (
<div></div>
<div>
<audio ref="ringAudio" loop>
<source src="media/ring.ogg" type="audio/ogg" />
<source src="media/ring.mp3" type="audio/mpeg" />
</audio>
</div>
);
}
return (
<div className="mx_IncomingCallBox">
<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>

View file

@ -43,8 +43,17 @@ module.exports = {
this.setState({
incomingCallRoomId: null
});
this.getRingAudio().pause();
return;
}
if (call.call_state === "ringing") {
this.getRingAudio().load();
this.getRingAudio().play();
}
else {
this.getRingAudio().pause();
}
this.setState({
incomingCallRoomId: call.roomId
});