diff --git a/examples/trivial/index.html b/examples/trivial/index.html
index 502c8605..b5a48296 100644
--- a/examples/trivial/index.html
+++ b/examples/trivial/index.html
@@ -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">
diff --git a/media/busy.mp3 b/examples/trivial/media/busy.mp3
similarity index 100%
rename from media/busy.mp3
rename to examples/trivial/media/busy.mp3
diff --git a/media/busy.ogg b/examples/trivial/media/busy.ogg
similarity index 100%
rename from media/busy.ogg
rename to examples/trivial/media/busy.ogg
diff --git a/media/callend.mp3 b/examples/trivial/media/callend.mp3
similarity index 100%
rename from media/callend.mp3
rename to examples/trivial/media/callend.mp3
diff --git a/media/callend.ogg b/examples/trivial/media/callend.ogg
similarity index 100%
rename from media/callend.ogg
rename to examples/trivial/media/callend.ogg
diff --git a/media/message.mp3 b/examples/trivial/media/message.mp3
similarity index 100%
rename from media/message.mp3
rename to examples/trivial/media/message.mp3
diff --git a/media/message.ogg b/examples/trivial/media/message.ogg
similarity index 100%
rename from media/message.ogg
rename to examples/trivial/media/message.ogg
diff --git a/media/ring.mp3 b/examples/trivial/media/ring.mp3
similarity index 100%
rename from media/ring.mp3
rename to examples/trivial/media/ring.mp3
diff --git a/media/ring.ogg b/examples/trivial/media/ring.ogg
similarity index 100%
rename from media/ring.ogg
rename to examples/trivial/media/ring.ogg
diff --git a/media/ringback.mp3 b/examples/trivial/media/ringback.mp3
similarity index 100%
rename from media/ringback.mp3
rename to examples/trivial/media/ringback.mp3
diff --git a/media/ringback.ogg b/examples/trivial/media/ringback.ogg
similarity index 100%
rename from media/ringback.ogg
rename to examples/trivial/media/ringback.ogg
diff --git a/skins/base/views/molecules/voip/IncomingCallBox.js b/skins/base/views/molecules/voip/IncomingCallBox.js
index 95263fb6..5adc71af 100644
--- a/skins/base/views/molecules/voip/IncomingCallBox.js
+++ b/skins/base/views/molecules/voip/IncomingCallBox.js
@@ -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>
diff --git a/src/controllers/molecules/voip/IncomingCallBox.js b/src/controllers/molecules/voip/IncomingCallBox.js
index dc993936..1d6cca9e 100644
--- a/src/controllers/molecules/voip/IncomingCallBox.js
+++ b/src/controllers/molecules/voip/IncomingCallBox.js
@@ -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
});