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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
/*
This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
Copyright (C) 2023 metamuffin <metamuffin.org>
*/
/// <reference lib="dom" />
import { ChatMessage } from "../../common/packets.d.ts";
import { e, image_view, notify } from "./helper.ts";
import { PO } from "./locale/mod.ts";
import { log } from "./logger.ts";
import { chat_control } from "./menu.ts";
import { PREFS } from "./preferences/mod.ts";
import { Room } from "./room.ts";
import { LocalUser } from "./user/local.ts";
import { User } from "./user/mod.ts";
interface ControlMessage {
join?: User,
leave?: User,
change_room?: string,
}
export class Chat {
messages: HTMLElement
controls: HTMLElement
send_el: HTMLInputElement
element: HTMLElement
public room?: Room
constructor() {
const send = document.createElement("input")
send.ariaLabel = PO.chatbox_label
send.type = "text"
send.placeholder = PO.chatbox_placeholder
const messages = e("div", { class: "messages", aria_live: "polite" })
const controls = e("div", { class: "controls" })
controls.append(send)
this.element = e("section", { class: "chat", aria_label: PO.chat, role: "dialog" }, messages, controls)
this.messages = messages
this.controls = controls
this.send_el = send
send.onkeydown = (ev) => {
if (ev.key == "Enter") {
if (send.value.trim().length == 0) {
// keybind for toggle chat is Enter, so lets close here
return chat_control(false)
}
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);
}
}
}
focus() { this.send_el.focus() }
send(msg: ChatMessage) {
if (this.room) {
this.room.local_user.chat(msg)
this.add_message(this.room.local_user, msg)
}
}
remove_oldest_message() {
this.messages.firstChild?.remove()
}
add_control_message(m: ControlMessage) {
const el = e("div", { class: ["message", "control-message"] },
...(m.join ? PO.join_message : PO.leave_message)(e("span", { class: "author" }, m.join?.display_name ?? m.leave?.display_name ?? ""))
)
this.messages.append(el)
el.scrollIntoView({ block: "end", behavior: "smooth", inline: "end" })
}
create_text_message(text: string) : HTMLElement {
const div = document.createElement("div")
div.classList.add("text")
// test for uris and make them clickable
const regex = (/(\b[a-z]{2,15}:\/\/\S+\b)/ig)
div.innerText = text // assigning to innerText will escape the html
div.innerHTML = div.innerHTML.replaceAll(regex, '<a href="$1" target="_blank" class="chat-link">$1</a>')
return div
}
add_message(sender: User, message: ChatMessage) {
const els : HTMLElement[] = []
if (message.text) els.push(this.create_text_message(message.text))
if (message.image) els.push(image_view(message.image, { class: "image" }))
chat_control(true)
const el = e("div", { class: "message" }, e("span", { class: "author" }, sender.display_name), ": ", ...els)
this.messages.append(el)
el.scrollIntoView({ block: "end", behavior: "smooth", inline: "end" })
let body_str = PO.summary_empty_message
if (message.text) body_str = message.text
if (message.image) body_str = PO.summery_image
if (!(sender instanceof LocalUser) && PREFS.notify_chat) notify(body_str, sender.display_name)
}
}
|
