refactor part 2

4 files changed, 37 insertions, 12 deletions

diff --git a/source/client/index.ts b/source/client/index.ts
index 85943eb..16118a6 100644
--- a/source/client/index.ts
+++ b/source/client/index.ts
@@ -4,7 +4,7 @@ import { get_query_params } from "./helper.ts"
 import { log } from "./logger.ts"
 import { Room } from "./room.ts"
 
-export const servers = {
+export const servers: RTCConfiguration = {
     iceServers: [{ urls: ["stun:stun1.l.google.com:19302", "stun:stun2.l.google.com:19302"] }],
     iceCandidatePoolSize: 10,
 }
@@ -18,10 +18,10 @@ export const parameters = get_query_params()
 
 window.onload = () => main()
 
-export function main() {    
+export function main() {
     log("*", "starting up")
     if (window.location.pathname.startsWith("/room/")) {
-        const room_name = window.location.pathname.substr("/room/".length)
+        const room_name = window.location.pathname.substring("/room/".length)
         const room = new Room(room_name)
         document.body.append(room.el)
     } else {
diff --git a/source/client/local_user.ts b/source/client/local_user.ts
index 2886a76..204f034 100644
--- a/source/client/local_user.ts
+++ b/source/client/local_user.ts
@@ -71,12 +71,12 @@ export class LocalUser extends User {
     async create_camera_track() {
         log("media", "requesting user media (camera)")
         const user_media = await window.navigator.mediaDevices.getUserMedia({ video: true })
-        return new TrackHandle(user_media.getVideoTracks()[0])
+        return new TrackHandle(user_media.getVideoTracks()[0], true)
     }
     async create_screen_track() {
         log("media", "requesting user media (screen)")
         const user_media = await window.navigator.mediaDevices.getDisplayMedia({ video: true })
-        return new TrackHandle(user_media.getVideoTracks()[0])
+        return new TrackHandle(user_media.getVideoTracks()[0], true)
     }
     async create_mic_track() {
         log("media", "requesting user media (audio)")
@@ -106,9 +106,10 @@ export class LocalUser extends User {
         }
         gain.connect(destination)
 
-        const t = new TrackHandle(destination.stream.getAudioTracks()[0])
+        const t = new TrackHandle(destination.stream.getAudioTracks()[0], true)
 
         t.addEventListener("ended", () => {
+            user_media.getTracks().forEach(t => t.stop())
             source.disconnect()
             if (rnnoise) rnnoise.disconnect()
             gain.disconnect()
diff --git a/source/client/track_handle.ts b/source/client/track_handle.ts
index bf3858f..dd96936 100644
--- a/source/client/track_handle.ts
+++ b/source/client/track_handle.ts
@@ -1,14 +1,25 @@
 
 export class TrackHandle extends EventTarget {
-    constructor(public track: MediaStreamTrack) {
+    constructor(
+        public track: MediaStreamTrack,
+        public local = false
+    ) {
         super()
         track.onended = () => this.dispatchEvent(new CustomEvent("ended"))
-        track.onmute = () => this.dispatchEvent(new CustomEvent("mute"))
-        track.onunmute = () => this.dispatchEvent(new CustomEvent("unmute"))
+        // TODO research how onmute and onunmute behave
+        track.onmute = () => this.dispatchEvent(new CustomEvent("ended")) // onmute seems to be called when the remote ends the track
+        track.onunmute = () => this.dispatchEvent(new CustomEvent("started"))
+
+        this.addEventListener("ended", () => {
+            // drop all references to help gc
+            track.onunmute = track.onmute = track.onended = null
+        })
     }
 
     get kind() { return this.track.kind }
     get label() { return this.track.label }
     get muted() { return this.track.muted }
     get id() { return this.track.id }
+
+    end() { this.track.stop(); this.dispatchEvent(new CustomEvent("ended")) }
 }
diff --git a/source/client/user.ts b/source/client/user.ts
index 4f458d6..4716d46 100644
--- a/source/client/user.ts
+++ b/source/client/user.ts
@@ -58,16 +58,29 @@ export abstract class User {
     create_track_element(t: TrackHandle) {
         const is_video = t.kind == "video"
         const media_el = is_video ? document.createElement("video") : document.createElement("audio")
-        media_el.srcObject = new MediaStream([t.track])
+        const stream = new MediaStream([t.track])
+        media_el.srcObject = stream
         media_el.classList.add("media")
         media_el.autoplay = true
         media_el.controls = true
 
         if (this.local) media_el.muted = true
 
-        this.el.append(media_el)
+
+        const el = document.createElement("div")
+        if (t.local) {
+            const end_button = document.createElement("button")
+            end_button.textContent = "end track"
+            end_button.addEventListener("click", () => {
+                t.end()
+            })
+            el.append(end_button)
+        }
+        el.append(media_el)
+        this.el.append(el)
         t.addEventListener("ended", () => {
-            media_el.remove()
+            media_el.srcObject = null
+            el.remove()
         })
     }
 }
\ No newline at end of file