gaja-group
/
matrix-bot
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix inbound audio 

This was caused by an <img> being the first thing in the <div> rather than
the <audio>. This caused a conflict because the "not in call" render was just
<div><audio /></div> and "in call" render was <div><img /> <audio /></div>

React can't tell in this case that the <audio> tags are the "same" so was
clobbering it (which meant that on inbound calls we would call play() on an
audio tag which would then immediately be clobbered by another audio tag).
This commit is contained in:
Kegan Dougal 2015-10-27 12:59:04 +00:00
parent ed52bc37b2
commit 05dba9c2d4
1 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/skins/vector/views/molecules/voip/IncomingCallBox.js
View File

@ -31,24 +31,29 @@ module.exports = React.createClass({
}, },
render: function() { render: function() {
// NB: This block MUST be the first thing inside the <div> else react won't
// know that they refer to the same thing and so will clobber them between
// in-call / not-in-call resulting in no inbound audio.
var audioBlock = (
<audio ref="ringAudio" loop>
<source src="media/ring.ogg" type="audio/ogg" />
<source src="media/ring.mp3" type="audio/mpeg" />
</audio>
);
if (!this.state.incomingCall || !this.state.incomingCall.roomId) { if (!this.state.incomingCall || !this.state.incomingCall.roomId) {
return ( return (
<div> <div>
<audio ref="ringAudio" loop> {audioBlock}
<source src="media/ring.ogg" type="audio/ogg" />
<source src="media/ring.mp3" type="audio/mpeg" />
</audio>
</div> </div>
); );
} }
var caller = MatrixClientPeg.get().getRoom(this.state.incomingCall.roomId).name; var caller = MatrixClientPeg.get().getRoom(this.state.incomingCall.roomId).name;
return ( return (
<div className="mx_IncomingCallBox"> <div className="mx_IncomingCallBox">
{audioBlock}
<img className="mx_IncomingCallBox_chevron" src="img/chevron-left.png" width="9" height="16" /> <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_title"> <div className="mx_IncomingCallBox_title">
Incoming { this.state.incomingCall ? this.state.incomingCall.type : '' } call from { caller } Incoming { this.state.incomingCall ? this.state.incomingCall.type : '' } call from { caller }
</div> </div>