Matrix-Mirrors/schildi-web
1
0
Fork 0
mirror of https://github.com/SchildiChat/element-web.git synced 2024-10-01 01:26:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

Implement ringing audio. Add other audio tags.

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
examples/trivial/index.html
View File

@ -6,6 +6,18 @@
<link href='https://fonts.googleapis.com/css?family=Muli:300,400' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Muli:300,400' rel='stylesheet' type='text/css'>
</head> </head>
<body style="height: 100%;"> <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> <section id="matrixchat" style="height: 100%;"></section>
<script src="bundle.js"></script> <script src="bundle.js"></script>
<link rel="stylesheet" href="node_modules/matrix-react-sdk/bundle.css"> <link rel="stylesheet" href="node_modules/matrix-react-sdk/bundle.css">

0
media/busy.mp3 → examples/trivial/media/busy.mp3
View File

0
media/busy.ogg → examples/trivial/media/busy.ogg
View File

0
media/callend.mp3 → examples/trivial/media/callend.mp3
View File

0
media/callend.ogg → examples/trivial/media/callend.ogg
View File

0
media/message.mp3 → examples/trivial/media/message.mp3
View File

0
media/message.ogg → examples/trivial/media/message.ogg
View File

0
media/ring.mp3 → examples/trivial/media/ring.mp3
View File

0
media/ring.ogg → examples/trivial/media/ring.ogg
View File

0
media/ringback.mp3 → examples/trivial/media/ringback.mp3
View File

0
media/ringback.ogg → examples/trivial/media/ringback.ogg
View File

15
skins/base/views/molecules/voip/IncomingCallBox.js
View File

@ -26,14 +26,27 @@ module.exports = React.createClass({
displayName: 'IncomingCallBox', displayName: 'IncomingCallBox',
mixins: [IncomingCallBoxController], mixins: [IncomingCallBoxController],
getRingAudio: function() {
return this.refs.ringAudio.getDOMNode();
},
render: function() { render: function() {
if (!this.state.incomingCallRoomId) { if (!this.state.incomingCallRoomId) {
return ( 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 ( return (
<div className="mx_IncomingCallBox"> <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"> <div className="mx_IncomingCallBox_avatar">
<img src="img/voip.png" width="42" height="42"/> <img src="img/voip.png" width="42" height="42"/>
</div> </div>

9
src/controllers/molecules/voip/IncomingCallBox.js
View File

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