eventually deletes elements

public/webrtc.js

@@ -77,19 +77,6 @@ class View {
    }
 }
 
-class Remote {
-   element = null;
-
-   constructor(id, stream) {
-      document.getElementById("remote").innerHTML += `
-        <video id="${id}" autoplay ></video>
-      `;
-      this.element = document.getElementById(id);
-      this.element.srcObject = stream;
-      View.log(this.element);
-   }
-}
-
 class Preview {
    element = null;
 
@@ -97,10 +84,6 @@ class Preview {
       this.element = document.getElementById(id);
       this.element.srcObject = stream;
    }
-
-   destructor() {
-      this.element.remove();
-   }
 }
 
 class Server {
@@ -112,6 +95,23 @@ class Server {
    }
 }
 
+class Remote {
+   element = null;
+
+   constructor(id, stream) {
+      document.getElementById("remote").innerHTML += `
+        <video id="${id}" autoplay ></video>
+      `;
+      this.element = document.getElementById(id);
+      this.element.srcObject = stream;
+   }
+
+   destructor() {
+      View.log("destructor called");
+      this.element.remove();
+   }
+}
+
 class Peer {
    peer = null;
    streams = {};
@@ -126,17 +126,17 @@ class Peer {
          event.streams.forEach((stream) => {
             this.streams[stream.id] = new Remote(stream.id, stream);
          });
-         View.log("/ontrack:", this.streams);
       };
-      this.peer.onremovestream = (event) => {
+      this.peer.oniceconnectionstatechange = (event) => {
-         event.streams.forEach((stream) => {
+         switch (this.peer.iceConnectionState) {
-            this.streams[stream.id].destructor();
+            case "disconnected":
-            delete this.streams[stream.id];
+            case "failed":
-         });
+            case "closed":
-         View.log("/onremovestream:", this.streams);
+               for (var k in this.streams) {
-      };
+                  this.streams[k].destructor();
-      this.peer.onconnectionstatechange = (event) => {
+                  delete this.streams[k];
-         View.log("/onconnectionstatechange:", this.streams, this.peer.connectionState);
+               }
+         }
       };
       this.peer.addStream(stream);
    }