aboutsummaryrefslogtreecommitdiff
path: root/client-web/source/chat.ts
blob: 5776df4c6f70ca304b4eb606d237d3bb30181ec1 (plain)
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
60
61
62
63
64
65
66
67
68
69
70
import { ChatMessage } from "../../common/packets.d.ts";
import { ediv, espan, image_view, notify, OverlayUi } from "./helper.ts";
import { log } from "./logger.ts";
import { PREFS } from "./preferences/mod.ts";
import { Room } from "./room.ts";
import { User } from "./user/mod.ts";

export class Chat extends OverlayUi {
    messages: HTMLElement
    controls: HTMLElement

    constructor(public room: Room) {
        const send = document.createElement("input")
        send.type = "text"

        const messages = ediv({ class: "messages" })
        const controls = ediv({ class: "controls" })
        controls.append(send)
        messages.append(document.createElement("hr"))
        super(ediv({ class: "chat" }, messages, controls))
        this.messages = messages
        this.controls = controls

        send.onkeydown = (ev) => {
            if (ev.code == "Enter") {
                if (send.value.trim().length == 0) return // no!
                this.send({ text: send.value })
                send.value = ""
            }
        }
        document.onpaste = (pasteEvent) => {
            // TODO will only work when pasting a single image
            const item = pasteEvent.clipboardData?.items[0];
            if (!item) return
            if (item.type.indexOf("image") === 0) {
                log("*", "image pasted")
                const blob = item.getAsFile()
                if (!blob) return
                const reader = new FileReader();
                reader.onload = (event) => {
                    if (!event.target) return
                    if (typeof event.target.result != "string") return
                    this.send({ image: event.target.result })
                };
                reader.readAsDataURL(blob);
            }
        }
    }

    send(msg: ChatMessage) {
        this.room.local_user.chat(msg)
        this.add_message(this.room.local_user, msg)
    }

    add_message(sender: User, message: ChatMessage) {
        const els = []
        if (message.text) els.push(espan(message.text, { class: "text" }))
        if (message.image) els.push(image_view(message.image, { class: "image" }))

        this.messages.append(ediv({ class: "message" },
            espan(sender.display_name, { class: "author" }), ": ", ...els
        ))
        this.shown = true

        let body_str = "(empty message)"
        if (message.text) body_str = message.text
        if (message.image) body_str = "(image)"
        if (!sender.local && PREFS.notify_chat) notify(body_str, sender.display_name)
    }
}