images in chat

1 files changed, 40 insertions, 12 deletions

diff --git a/client-web/source/chat.ts b/client-web/source/chat.ts
index dfef73f..792a620 100644
--- a/client-web/source/chat.ts
+++ b/client-web/source/chat.ts
@@ -1,4 +1,6 @@
-import { ediv, espan, OverlayUi } from "./helper.ts";
+import { ChatMessage } from "../../common/packets.d.ts";
+import { ediv, espan, image_view, OverlayUi } from "./helper.ts";
+import { log } from "./logger.ts";
 import { Room } from "./room.ts";
 import { User } from "./user/mod.ts";
 
@@ -9,13 +11,7 @@ export class Chat extends OverlayUi {
     constructor(public room: Room) {
         const send = document.createElement("input")
         send.type = "text"
-        send.onkeydown = (ev) => {
-            if (ev.code == "Enter") {
-                room.local_user.chat(send.value)
-                this.send_message(room.local_user, send.value)
-                send.value = ""
-            }
-        }
+
         const messages = ediv({ class: "messages" })
         const controls = ediv({ class: "controls" })
         controls.append(send)
@@ -23,13 +19,45 @@ export class Chat extends OverlayUi {
         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)
     }
 
-    send_message(sender: User, message: string) {
+    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" }),
-            ": ",
-            espan(message, { class: "content" })
+            espan(sender.display_name, { class: "author" }), ": ", ...els
         ))
     }
 }