Add users currently typing in room bar

harmonyqml/components/chat/Root.qml

@@ -6,11 +6,13 @@ ColumnLayout {
     property var user_id: null
     property var room: null
 
+
     id: chatPage
     spacing: 0
     onFocusChanged: sendBox.setFocus()
 
     RoomHeader {}
     MessageList {}
+    TypingUsersBar {}
     SendBox { id: sendBox }
 }

harmonyqml/components/chat/TypingUsersBar.qml

@@ -0,0 +1,31 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.4
+import "../base" as Base
+import "utils.js" as ChatJS
+
+Rectangle {
+    id: root
+    Layout.fillWidth: true
+    Layout.minimumHeight: usersLabel.text ? usersLabel.implicitHeight : 0
+    Layout.maximumHeight: Layout.minimumHeight
+    color: "#BBB"
+
+    Base.HLabel {
+        id: "usersLabel"
+        anchors.fill: parent
+
+        Timer {
+            interval: 500
+            repeat: true
+            running: true
+            triggeredOnStart: true
+            onTriggered: usersLabel.text = ChatJS.get_typing_users_text(
+                chatPage.user_id, chatPage.room.room_id
+            )
+        }
+
+        elide: Text.ElideMiddle
+        maximumLineCount: 1
+    }
+}

harmonyqml/components/chat/utils.js

@@ -124,3 +124,21 @@ function get_member_event_text(dict) {
 
     return ""
 }
+
+
+function get_typing_users_text(account_id, room_id) {
+    var names = []
+    var room  = Backend.models.rooms.get(account_id)
+                .getWhere("room_id", room_id)
+
+    for (var i = 0; i < room.typing_users.length; i++) {
+        names.push(Backend.getUser(room.typing_users[i]).display_name)
+    }
+
+    if (names.length < 1) { return "" }
+
+    return "🖋 " +
+           [names.slice(0, -1).join(", "), names.slice(-1)[0]]
+           .join(names.length < 2 ? "" : " and ") +
+           (names.length > 1 ? " are" : " is") + " typing…"
+}