1 files changed, 69 insertions, 10 deletions

diff --git a/source/client/user.ts b/source/client/user.ts
index 7d6991a..579886f 100644
--- a/source/client/user.ts
+++ b/source/client/user.ts
@@ -7,7 +7,9 @@ export abstract class User {
     room: Room
 
     el: HTMLElement
-    view_el?: HTMLElement
+    media_el?: HTMLElement
+
+    display?: { audio_status_el: HTMLElement, video_status_el: HTMLElement }
 
     local: boolean = false
 
@@ -17,7 +19,9 @@ export abstract class User {
         this.name = name
         this.room = room
         this.el = document.createElement("div")
+        this.el.classList.add("user")
         this.room.el.append(this.el)
+        this.setup_view()
         this.update_view()
     }
 
@@ -41,19 +45,74 @@ export abstract class User {
         }
     }
 
+    setup_view() {
+        const info_el = document.createElement("div")
+        info_el.classList.add("info")
+        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 }
+        this.el.append(info_el)
+    }
+
     update_view() {
-        if (this.view_el) this.el.removeChild(this.view_el)
-        this.view_el = this.create_view()
-        this.el.appendChild(this.view_el)
+        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_view() {
-        const el = document.createElement("video")
-        el.autoplay = true
-        el.toggleAttribute("playsinline")
-        el.srcObject = this.stream
-        console.log(el);
+    create_media_view() {
+        const has_video = this.stream.getVideoTracks().length > 0
+        const has_audio = this.stream.getAudioTracks().length > 0
+        const media_el = has_video ? document.createElement("video") : document.createElement("audio")
+        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")
+        })
+
+        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
+                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
+        }
 
+        const el = document.createElement("div")
+        el.classList.add("media-container")
+        el.append(media_el, controls_el)
         return el
     }
 }
\ No newline at end of file