Merge branch 'rbdr-peer-abstraction' into 'main'

Add Peer and Media abstractions

See merge request rbdr/junction!5

diff --git a/extension/content_script.js b/extension/content_script.js
index 84a2fd3bce3ed6bd3cd1a306e860fa9f5eed43df..70c085fa3d98531d18bed7d3e334462ec5f3b90c 100644 (file)
--- a/extension/content_script.js
+++ b/extension/content_script.js
@@ -1,6 +1,10 @@
+'use strict';
+
 (() => {
 
   const io = require('socket.io-client');
+  const Peers = require('./peers');
+  const Media = require('./media');
 
   const internals = {
 
@@ -16,8 +20,10 @@
 
     async joinAudioCall(data) {
 
+      internals.tada = data.tada; // Keeping for fun
+
       try {
-        const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        const mediaStream = await Media.start();
 
         internals.socket = io(internals.kSocketUrl, {
           transports: ['websocket']
@@ -49,17 +55,15 @@
         internals.socket.on('addPeer', function(data) {
 
           console.log(data);
-          internals.peers++;
-          console.log(`There are now ${internals.peers} participants`);
+          Peers.add('id-'+Peers.count(), internals.tada);
+          console.log(`There are now ${Peers.count()} participants`);
         });
 
         internals.socket.on('removePeer', function() {
 
-          internals.peers--;
-          console.log(`There are now ${internals.peers} participants`);
+          Peers.remove('id-'+(Peers.count() - 1)); // This is only for testing, don't use count to remove ids.
+          console.log(`There are now ${Peers.count()} participants`);
         });
-
-        internals.createAudioElement(data.tada);
       }
       catch (err) {
 
@@ -67,24 +71,15 @@
           action: 'error'
         });
         internals.port.disconnect();
-        internals.createAudioElement(data.tada);
       }
     },
 
     hangUp() {
-      document.querySelectorAll('.junction-call-audio').forEach((audioElement) => audioElement.remove());
+
+      Peers.reset();
+      Media.stop();
       internals.socket.close();
       internals.port.disconnect();
-    },
-
-    createAudioElement(source, type = 'audio/wav') {
-
-      const audioElement = document.createElement('audio');
-      audioElement.setAttribute('class', 'junction-call-audio');
-      audioElement.src = source;
-      audioElement.autoplay = 'autoplay';
-      audioElement.type = type;
-      document.querySelector('body').appendChild(audioElement);
     }
   };
 

diff --git a/extension/media.js b/extension/media.js
new file mode 100644 (file)
index 0000000..33c6fee
--- /dev/null
+++ b/extension/media.js
@@ -0,0 +1,29 @@
+'use strict';
+
+const internals = {
+  mediaStream: null
+};
+
+module.exports = {
+  async start() {
+
+    internals.mediaStream = internals.mediaStream || await navigator.mediaDevices.getUserMedia({
+      audio: true
+    });
+
+    return internals.mediaStream;
+  },
+
+  stop() {
+
+    if (!internals.mediaStream) {
+      return;
+    }
+
+    for (const track of internals.mediaStream.getAudioTracks()) {
+      track.stop();
+    }
+
+    internals.mediaStream = null;
+  }
+};

diff --git a/extension/peers.js b/extension/peers.js
new file mode 100644 (file)
index 0000000..41155d4
--- /dev/null
+++ b/extension/peers.js
@@ -0,0 +1,41 @@
+'use strict';
+
+const internals = {
+  peers: {},
+
+  createAudioElement(source) {
+
+    const audioElement = document.createElement('audio');
+    audioElement.setAttribute('class', 'junction-call-audio');
+    audioElement.src = source;
+    audioElement.autoplay = 'autoplay';
+    document.querySelector('body').appendChild(audioElement);
+
+    return audioElement;
+  }
+};
+
+module.exports = {
+  add(id, url) {
+
+    internals.peers[id] && this.remove(id);
+    internals.peers[id] = internals.createAudioElement(url)
+  },
+
+  remove(id) {
+
+    internals.peers[id] && internals.peers[id].remove();
+    delete internals.peers[id];
+  },
+
+  count() {
+
+    return Object.keys(internals.peers).length;
+  },
+
+  reset() {
+
+    internals.peers = {};
+    document.querySelectorAll('.junction-call-audio').forEach((audioElement) => audioElement.remove());
+  }
+};