refactor part 2

6 files changed, 52 insertions, 20 deletions

diff --git a/public/style/master.css b/public/style/master.css
index b042a1d..a2d0d98 100644
--- a/public/style/master.css
+++ b/public/style/master.css
@@ -4,6 +4,8 @@
   font-family: "Ubuntu", sans-serif;
   font-weight: 300;
   color: white;
+  margin: 0px;
+  padding: 0px;
 }
 
 :root {
@@ -27,17 +29,20 @@ h2 {
   margin: 1em;
 }
 
-input[type="button"] {
+input[type="button"],
+button {
   padding: 0.5em;
   margin: 0.25em;
   background-color: var(--bg-light);
   border: 0px solid transparent;
   border-radius: 3px;
 }
-input[type="button"]:hover {
+input[type="button"]:hover,
+button:hover {
   background-color: var(--bg-lighter);
 }
-input[type="button"].enabled {
+input[type="button"].enabled,
+button.enabled {
   background-color: var(--bg-enabled);
 }
 input[type="text"] {
@@ -58,14 +63,14 @@ input[type="text"] {
 }
 
 .room {
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
+  width: 100%;
+  height: 100%;
+  /* display: flex; */
+  /* justify-content: center; */
 }
 
 .user {
-  display: grid;
+  /* display: grid; */
   background-color: var(--bg);
   border: 0px soly transparent;
   border-radius: 5px;
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
diff --git a/source/server/index.ts b/source/server/index.ts
index 1ee6bc9..75114ea 100644
--- a/source/server/index.ts
+++ b/source/server/index.ts
@@ -10,6 +10,8 @@ let bundleFiles: Record<string, string> = {}
 root.get("/", async c => { await c.send({ path: "index.html", root: `${Deno.cwd()}/public` }) })
 root.get("/room/:id", async c => { await c.send({ path: "index.html", root: `${Deno.cwd()}/public` }) })
 
+root.get("/favicon.ico", c => { c.response.status = 204 })
+
 // deno-lint-ignore no-explicit-any
 function respondWithType(mimeType: string, f: () => string): (c: RouterContext<any, any, any>) => void {
     return c => {