source/client/user.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

import { log } from "./logger"
import { Room } from "./room"


export abstract class User {
    name: string
    room: Room

    el: HTMLElement
    view_el?: HTMLElement

    local: boolean = false

    stream: MediaStream = new MediaStream()

    constructor(room: Room, name: string) {
        this.name = name
        this.room = room
        this.el = document.createElement("div")
        this.room.el.append(this.el)
        this.update_view()
    }

    add_track(t: MediaStreamTrack) {
        this.stream.addTrack(t)
        this.update_view()
        t.onended = () => {
            log("media", "track ended", t)
            this.stream.removeTrack(t)
            this.update_view()
        }
        t.onmute = () => {
            log("media", "track muted", t)
            this.stream.removeTrack(t)
            this.update_view()
        }
        t.onunmute = () => {
            log("media", "track unmuted", t)
            this.stream.addTrack(t)
            this.update_view()
        }
    }

    update_view() {
        if (this.view_el) this.el.removeChild(this.view_el)
        this.view_el = this.create_view()
        this.el.appendChild(this.view_el)
    }

    create_view() {
        const el = document.createElement("video")
        el.autoplay = true
        el.toggleAttribute("playsinline")
        el.srcObject = this.stream
        console.log(el);

        return el
    }
}