From 05dba9c2d4eb617d24424fd5e38c56f78a9f70df Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Tue, 27 Oct 2015 12:59:04 +0000
Subject: [PATCH] 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).
---
 .../views/molecules/voip/IncomingCallBox.js   | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/skins/vector/views/molecules/voip/IncomingCallBox.js b/src/skins/vector/views/molecules/voip/IncomingCallBox.js
index ee437f0a..41afa83e 100644
--- a/src/skins/vector/views/molecules/voip/IncomingCallBox.js
+++ b/src/skins/vector/views/molecules/voip/IncomingCallBox.js
@@ -31,24 +31,29 @@ module.exports = React.createClass({
     },
 
     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) {
             return (
                 <div>
-                    <audio ref="ringAudio" loop>
-                        <source src="media/ring.ogg" type="audio/ogg" />
-                        <source src="media/ring.mp3" type="audio/mpeg" />
-                    </audio>
+                    {audioBlock}
                 </div>
             );
         }
         var caller = MatrixClientPeg.get().getRoom(this.state.incomingCall.roomId).name;
         return (
             <div className="mx_IncomingCallBox">
+                {audioBlock}
                 <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">
                     Incoming { this.state.incomingCall ? this.state.incomingCall.type : '' } call from { caller }
                 </div>