From 6c4ad49b78426d227cd988bdd1ed6fcb023ca704 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 31 Aug 2016 21:50:46 +0100
Subject: [PATCH 1/3] use a top-level audio tag for playing all VoIP
 audio.\n\nfixes https://github.com/vector-im/vector-web/issues/1271 and
 https://github.com/vector-im/vector-web/issues/621

---
 src/components/views/voip/CallView.js  | 3 +--
 src/components/views/voip/VideoView.js | 6 ++++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/views/voip/CallView.js b/src/components/views/voip/CallView.js
index cc5289e7f1..4651e53551 100644
--- a/src/components/views/voip/CallView.js
+++ b/src/components/views/voip/CallView.js
@@ -79,8 +79,7 @@ module.exports = React.createClass({
         if (call) {
             call.setLocalVideoElement(this.getVideoView().getLocalVideoElement());
             call.setRemoteVideoElement(this.getVideoView().getRemoteVideoElement());
-            // give a separate element for audio stream playback - both for voice calls
-            // and for the voice stream of screen captures
+            // always use a separate element for audio stream playback
             call.setRemoteAudioElement(this.getVideoView().getRemoteAudioElement());
         }
         if (call && call.type === "video" && call.call_state !== "ended" && call.call_state !== "ringing") {
diff --git a/src/components/views/voip/VideoView.js b/src/components/views/voip/VideoView.js
index 46c5b354f8..487fd9f6ac 100644
--- a/src/components/views/voip/VideoView.js
+++ b/src/components/views/voip/VideoView.js
@@ -50,7 +50,10 @@ module.exports = React.createClass({
     },
 
     getRemoteAudioElement: function() {
-        return this.refs.remoteAudio;
+        // this needs to be somewhere at the top of the DOM which
+        // always exists to avoid audio interruptions.
+        // Might as well just use DOM.
+        return document.getElementById("remoteAudio");
     },
 
     getLocalVideoElement: function() {
@@ -106,7 +109,6 @@ module.exports = React.createClass({
                 <div className="mx_VideoView_remoteVideoFeed">
                     <VideoFeed ref="remote" onResize={this.props.onResize}
                         maxHeight={maxVideoHeight} />
-                    <audio ref="remoteAudio"/>
                 </div>
                 <div className="mx_VideoView_localVideoFeed">                
                     <VideoFeed ref="local"/>

From 4829ac0c4d1c83d9d69a228c4f8cc693c74338e1 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 1 Sep 2016 11:07:46 +0100
Subject: [PATCH 2/3] comment

---
 src/components/views/voip/CallView.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/views/voip/CallView.js b/src/components/views/voip/CallView.js
index 4651e53551..e3894e0249 100644
--- a/src/components/views/voip/CallView.js
+++ b/src/components/views/voip/CallView.js
@@ -79,7 +79,10 @@ module.exports = React.createClass({
         if (call) {
             call.setLocalVideoElement(this.getVideoView().getLocalVideoElement());
             call.setRemoteVideoElement(this.getVideoView().getRemoteVideoElement());
-            // always use a separate element for audio stream playback
+            // always use a separate element for audio stream playback.
+            // this is to let us move CallView around the DOM without interrupting remote audio
+            // during playback, by having the audio rendered by a top-level <audio/> element.
+            // rather than being rendered by the main remoteVideo <video/> element.
             call.setRemoteAudioElement(this.getVideoView().getRemoteAudioElement());
         }
         if (call && call.type === "video" && call.call_state !== "ended" && call.call_state !== "ringing") {

From f0d5f429215d5983c9de23ae75f9437f2211bef7 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 1 Sep 2016 13:58:26 +0100
Subject: [PATCH 3/3] whine loudly if remoteAudio element is missing

---
 src/components/views/voip/VideoView.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/views/voip/VideoView.js b/src/components/views/voip/VideoView.js
index 487fd9f6ac..d018a2603c 100644
--- a/src/components/views/voip/VideoView.js
+++ b/src/components/views/voip/VideoView.js
@@ -53,7 +53,11 @@ module.exports = React.createClass({
         // this needs to be somewhere at the top of the DOM which
         // always exists to avoid audio interruptions.
         // Might as well just use DOM.
-        return document.getElementById("remoteAudio");
+        var remoteAudioElement = document.getElementById("remoteAudio");
+        if (!remoteAudioElement) {
+            console.error("Failed to find remoteAudio element - cannot play audio!  You need to add an <audio/> to the DOM.");
+        }
+        return remoteAudioElement;
     },
 
     getLocalVideoElement: function() {