refactor part 1

1 files changed, 30 insertions, 78 deletions

diff --git a/source/client/user.ts b/source/client/user.ts
index ef1449f..4f458d6 100644
--- a/source/client/user.ts
+++ b/source/client/user.ts
@@ -1,6 +1,7 @@
 
 import { log } from "./logger.ts"
 import { Room } from "./room.ts"
+import { TrackHandle } from "./track_handle.ts";
 
 
 export abstract class User {
@@ -8,13 +9,10 @@ export abstract class User {
     room: Room
 
     el: HTMLElement
-    media_el?: HTMLElement
-
-    display?: { audio_status_el: HTMLElement, video_status_el: HTMLElement }
 
     local = false
 
-    stream: MediaStream = new MediaStream()
+    protected tracks: Set<TrackHandle> = new Set()
 
     constructor(room: Room, name: string) {
         this.name = name
@@ -23,27 +21,28 @@ export abstract class User {
         this.el.classList.add("user")
         this.room.el.append(this.el)
         this.setup_view()
-        setTimeout(() => this.update_view(), 1)
     }
 
-    add_track(t: MediaStreamTrack) {
-        this.stream.addTrack(t)
-        this.update_view()
-        t.onended = () => {
+    add_track(t: TrackHandle) {
+        this.tracks.add(t)
+        this.create_track_element(t)
+        t.addEventListener("ended", () => {
             log("media", "track ended", t)
-            this.stream.removeTrack(t)
-            this.update_view()
-        }
-        t.onmute = () => {
+            this.tracks.delete(t)
+        })
+        t.addEventListener("mute", () => {
             log("media", "track muted", t)
-            this.stream.removeTrack(t)
-            this.update_view()
-        }
-        t.onunmute = () => {
+        })
+        t.addEventListener("unmute", () => {
             log("media", "track unmuted", t)
-            this.stream.addTrack(t)
-            this.update_view()
-        }
+        })
+        //@ts-ignore a
+        window.blub = t
+        // setTimeout(() => {
+        //     console.log("ev");
+        //     t.dispatchEvent(new Event("ended"))
+        //     // t.dispatchEvent(new MediaStreamTrackEvent("ended", { track: t, bubbles: false, cancelable: true, composed: false }))
+        // }, 5000)
     }
 
     setup_view() {
@@ -52,70 +51,23 @@ export abstract class User {
         const name_el = document.createElement("span")
         name_el.textContent = this.name
         name_el.classList.add("name")
-        const audio_status_el = document.createElement("span")
-        const video_status_el = document.createElement("span")
-        video_status_el.classList.add("status", "video-status")
-        audio_status_el.classList.add("status", "audio-status")
-        audio_status_el.textContent = "A"
-        video_status_el.textContent = "V"
-        info_el.append(audio_status_el, video_status_el, name_el)
-        this.display = { video_status_el, audio_status_el }
+        info_el.append(name_el)
         this.el.append(info_el)
     }
 
-    update_view() {
-        if (this.stream.getAudioTracks().length > 0)
-            this.display?.audio_status_el.classList.add("enabled")
-        else this.display?.audio_status_el.classList.remove("enabled")
-
-        if (this.stream.getVideoTracks().length > 0)
-            this.display?.video_status_el.classList.add("enabled")
-        else this.display?.video_status_el.classList.remove("enabled")
-
-        if (this.media_el) this.el.removeChild(this.media_el)
-        this.media_el = this.create_media_view()
-        this.el.appendChild(this.media_el)
-    }
-
-    create_media_view() {
-        const has_video = this.stream.getVideoTracks().length > 0
-        const has_audio = this.stream.getAudioTracks().length > 0
-        if (this.local && !has_video) return document.createElement("div")
-        const media_el = has_video ? document.createElement("video") : document.createElement("audio")
+    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])
         media_el.classList.add("media")
         media_el.autoplay = true
-        if (has_video) media_el.toggleAttribute("playsinline")
-        media_el.srcObject = this.stream
-        if (has_video) media_el.addEventListener("click", () => {
-            media_el.classList.remove("maximized")
-        })
-        if (this.local) media_el.muted = true
+        media_el.controls = true
 
-        const controls_el = document.createElement("div")
-        controls_el.classList.add("media-controls")
-        if (has_video) {
-            const pip_el = document.createElement("input")
-            pip_el.type = "button"
-            pip_el.addEventListener("click", () => {
-                // @ts-ignore firefox feature
-                media_el.requestPictureInPicture()
-            })
-            pip_el.value = "Picture-in-Picture"
-            const max_el = document.createElement("input")
-            max_el.type = "button"
-            max_el.addEventListener("click", () => {
-                media_el.classList.add("maximized")
-            })
-            max_el.value = "Maximize"
-            controls_el.append(max_el, pip_el)
-        }
-        if (has_audio) {
-            // TODO volume controls
-        }
+        if (this.local) media_el.muted = true
 
-        const el = document.createElement("div")
-        el.classList.add("media-container")
-        el.append(media_el, controls_el)
-        return el
+        this.el.append(media_el)
+        t.addEventListener("ended", () => {
+            media_el.remove()
+        })
     }
 }
\ No newline at end of file