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] 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>