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 1/2] 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 ee437f0a64..41afa83e01 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>

From 35862e0c663ccc6de1ceeaa624083234299def94 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Wed, 28 Oct 2015 11:43:13 +0000
Subject: [PATCH 2/2] Explicitly make React use the same audio element.. Use a
 'key' and comment why it is required.

---
 src/skins/vector/views/molecules/voip/IncomingCallBox.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/skins/vector/views/molecules/voip/IncomingCallBox.js b/src/skins/vector/views/molecules/voip/IncomingCallBox.js
index 41afa83e01..c3bcd82584 100644
--- a/src/skins/vector/views/molecules/voip/IncomingCallBox.js
+++ b/src/skins/vector/views/molecules/voip/IncomingCallBox.js
@@ -32,11 +32,10 @@ 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.
+        // NB: This block MUST have a "key" so React doesn't clobber the elements
+        // between in-call / not-in-call.
         var audioBlock = (
-            <audio ref="ringAudio" loop>
+            <audio ref="ringAudio" key="voip_ring_audio" loop>
                 <source src="media/ring.ogg" type="audio/ogg" />
                 <source src="media/ring.mp3" type="audio/mpeg" />
             </audio>