diff --git a/README.md b/README.md index a737fa0..357aa4b 100644 --- a/README.md +++ b/README.md @@ -55,6 +55,7 @@ early in development. These important features still need to be implemented: - Unreads +- Typing indicators - Emojis - Reactions - Encryption diff --git a/src/js/chat-input.js b/src/js/chat-input.js index 23d06fe..9558746 100644 --- a/src/js/chat-input.js +++ b/src/js/chat-input.js @@ -5,85 +5,24 @@ const {chat} = require("./chat.js") const input = q("#c-chat-textarea") -class TypingManager { - constructor() { - this.time = 20000 // how long to appear to type for - this.margin = 5000 // how long before the end of the timeout to send the request again - /** The room that we're typing in. We can semantically only type in one room at a time. */ - this.typingRoom = null - this.timeout = null - } - - request(id, typing) { - const url = new URL(`${lsm.get("domain")}/_matrix/client/r0/rooms/${id}/typing/${lsm.get("mx_user_id")}`) - url.searchParams.set("access_token", lsm.get("access_token")) - const body = {typing} - if (typing) body.timeout = this.time - fetch(url.toString(), { - method: "PUT", - body: JSON.stringify(body) - }) - } - - schedule(id) { - this.request(id, true) - this.timeout = setTimeout(() => { - this.schedule(id) - }, this.time - this.margin) - } - - update(id) { - if (id) { // typing somewhere - if (this.typingRoom === id) return // already typing, don't do anything - // state - this.typingRoom = id - // mark and schedule - this.schedule(id) - // add self to typing list now instead of waiting a round trip - const typing = store.rooms.get(id).value().timeline.typing - typing.edit(list => list.concat(lsm.get("mx_user_id"))) - } else { // stopped typing - if (this.typingRoom) { - clearTimeout(this.timeout) - this.request(this.typingRoom, false) - } - this.typingRoom = null - } - } -} - -const typingManager = new TypingManager() - store.activeRoom.subscribe("changeSelf", () => { - // stop typing. you semantically can't type in a room you're not in. - typingManager.update(null) - // focus input box if (store.activeRoom.exists()) { input.focus() } }) input.addEventListener("keydown", event => { - if (!store.activeRoom.exists()) return - // send message? if (event.key === "Enter" && !event.shiftKey && !event.ctrlKey) { event.preventDefault() const body = input.value send(input.value) input.value = "" fixHeight() - return } }) input.addEventListener("input", () => { fixHeight() - // set typing - if (input.value) { - typingManager.update(store.activeRoom.value().id) - } else { - typingManager.update(null) - } }) function fixHeight() { diff --git a/src/js/store/subscribe_value.js b/src/js/store/subscribe_value.js index 9c71959..eaa2cdd 100644 --- a/src/js/store/subscribe_value.js +++ b/src/js/store/subscribe_value.js @@ -30,7 +30,7 @@ class SubscribeValue extends Subscribable { edit(f) { if (this.exists()) { - this.data = f(this.data) + f(this.data) this.set(this.data) } else { throw new Error("Tried to edit a SubscribeValue that had no value") diff --git a/src/js/typing.js b/src/js/typing.js index b6208ef..46990d6 100644 --- a/src/js/typing.js +++ b/src/js/typing.js @@ -1,6 +1,5 @@ const {ElemJS, ejs, q} = require("./basic") const {store} = require("./store/store") -const lsm = require("./lsm") /** * Maximum number of typing users to display all names for. @@ -27,7 +26,6 @@ class Typing extends ElemJS { changeRoom() { if (this.typingUnsubscribe) { this.typingUnsubscribe() - this.typingUnsubscribe = null } if (!store.activeRoom.exists()) return const room = store.activeRoom.value() @@ -38,11 +36,8 @@ class Typing extends ElemJS { render() { if (!store.activeRoom.exists()) return const room = store.activeRoom.value() - let users = [...room.timeline.typing.value()] - // don't show own typing status - users = users.filter(u => u !== lsm.get("mx_user_id")) + const users = room.timeline.typing.value() if (users.length === 0) { - // nobody is typing this.removeClass("c-typing--typing") } else { let message = "" diff --git a/src/sass/components/messages.sass b/src/sass/components/messages.sass index 170ae71..30ab3f2 100644 --- a/src/sass/components/messages.sass +++ b/src/sass/components/messages.sass @@ -92,7 +92,6 @@ background-color: c.$darkest padding: 8px border: 1px solid c.$divider - white-space: pre-wrap code background-color: c.$darker