From 7d2f4cce05cef60d433dd1903daba4cea6ef38ff Mon Sep 17 00:00:00 2001
From: "feliks.pobiedzinski@swmansion.com" <feliks.pobiedzinski@swmansion.com>
Date: Wed, 12 Feb 2025 15:44:16 +0100
Subject: [PATCH] Suffix event names with player id

---
 assets/player.js     | 31 +++++++++++++++++++------------
 lib/webrtc/player.ex |  2 +-
 player_demo.exs      |  6 ++----
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/assets/player.js b/assets/player.js
index 7c88e29..786cce8 100644
--- a/assets/player.js
+++ b/assets/player.js
@@ -1,28 +1,35 @@
-export function createPlayerHook(iceServers = [{ urls: "stun:stun.l.google.com:19302" }]) {
+function createPlayerHook(iceServers = [{ urls: "stun:stun.l.google.com:19302" }]) {
   return {
     async mounted() {
+      console.log("MOUNTED");
+
       this.pc = new RTCPeerConnection({ iceServers: iceServers });
+      this.el.srcObject = new MediaStream();
 
-      // todo: get element by player id, different for every player
-      pc.ontrack = (event) =>
-        document.getElementById("videoPlayer").srcObject.addTrack(event.track);
+      this.pc.ontrack = (event) => {
+        console.log("NEW TRACK", this.el);
+        this.el.srcObject.addTrack(event.track);
+      };
 
       this.pc.onicecandidate = (ev) => {
+        console.log("NEW BROWSER ICE CANDIDATE");
         message = JSON.stringify({ type: "ice_candidate", data: ev.candidate });
-        this.pushEventTo(this.el, "webrtc_singaling", message);
+        this.pushEventTo(this.el, "webrtc_signaling", message);
       };
 
-      // todo: event name ("webrtc_signaling") should be suffixed with the component id
-      this.handleEvent("webrtc_singaling", async (event) => {
-        const { type, data } = JSON.parse(event);
+      const eventName = "webrtc_signaling-" + this.el.id;
+      this.handleEvent(eventName, async (event) => {
+        console.log("NEW SIGNALING MESSAGE", event);
+
+        const { type, data } = event;
 
         switch (type) {
           case "sdp_offer":
             console.log("Received SDP offer:", data);
-            await pc.setRemoteDescription(data);
+            await this.pc.setRemoteDescription(data);
 
-            const answer = await pc.createAnswer();
-            await pc.setLocalDescription(answer);
+            const answer = await this.pc.createAnswer();
+            await this.pc.setLocalDescription(answer);
 
             message = JSON.stringify({ type: "sdp_answer", data: answer });
             this.pushEventTo(this.el, "webrtc_signaling", message);
@@ -31,7 +38,7 @@ export function createPlayerHook(iceServers = [{ urls: "stun:stun.l.google.com:1
             break;
           case "ice_candidate":
             console.log("Recieved ICE candidate:", data);
-            await pc.addIceCandidate(data);
+            await this.pc.addIceCandidate(data);
         }
       });
     },
diff --git a/lib/webrtc/player.ex b/lib/webrtc/player.ex
index 98bb6db..a0e06ff 100644
--- a/lib/webrtc/player.ex
+++ b/lib/webrtc/player.ex
@@ -177,7 +177,7 @@ defmodule Boombox.Live.Player do
 
     {:noreply,
      socket
-     |> push_event("webrtc_signaling", message)}
+     |> push_event("webrtc_signaling-#{socket.assigns.player.id}", message)}
   end
 
   @impl true
diff --git a/player_demo.exs b/player_demo.exs
index 6adf312..16ba55b 100644
--- a/player_demo.exs
+++ b/player_demo.exs
@@ -103,7 +103,6 @@ defmodule Example.HomeLive do
             this.pc = new RTCPeerConnection({ iceServers: iceServers });
             this.el.srcObject = new MediaStream()
 
-            // todo: get element by player id, different for every player
             this.pc.ontrack = (event) => {
               console.log("NEW TRACK", this.el)
               this.el.srcObject.addTrack(event.track);
@@ -115,14 +114,13 @@ defmodule Example.HomeLive do
               this.pushEventTo(this.el, "webrtc_signaling", message);
             };
 
-            // todo: event name ("webrtc_signaling") should be suffixed with the component id
-            this.handleEvent("webrtc_signaling", async (event) => {
+            const eventName = "webrtc_signaling-" + this.el.id
+            this.handleEvent(eventName, async (event) => {
 
               console.log("NEW SIGNALING MESSAGE", event)
 
               const { type, data } = event;
 
-
               switch (type) {
                 case "sdp_offer":
                   console.log("Received SDP offer:", data);