feat(StatusChatListItem): enable assigning emoji to chat item

sandbox/controls/ListItems.qml

@@ -64,6 +64,12 @@ GridLayout {
         type: StatusChatListItem.Type.CommunityChat
     }
 
+    StatusChatListItem {
+        name: "community-channel-emoji"
+        type: StatusChatListItem.Type.CommunityChat
+        emoji: "😁"
+    }
+
     StatusChatListItem {
         name: "community-channel-with-image"
         image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"

src/StatusQ/Components/StatusChatList.qml

@@ -97,11 +97,12 @@ Column {
                     chatId: model.itemId
                     categoryId: model.parentItemId? model.parentItemId : ""
                     name: model.name
+                    emoji: model.emoji
                     type: !!model.type ? model.type : StatusChatListItem.Type.CommunityChat
                     muted: model.muted
                     hasUnreadMessages: model.hasUnreadMessages
                     notificationsCount: model.notificationsCount
-                    highlightWhenCreated: model.highlight
+                    highlightWhenCreated: !!model.highlight
                     selected: model.active
                     icon.color: model.color
                     image.isIdenticon: model.isIdenticon

src/StatusQ/Components/StatusChatListItem.qml

@@ -16,6 +16,7 @@ Rectangle {
     property string chatId: ""
     property string categoryId: ""
     property string name: ""
+    property string emoji: ""
     property alias badge: statusBadge
     property bool hasUnreadMessages: false
     property int notificationsCount: 0
@@ -28,7 +29,7 @@ Rectangle {
         width: 24
         height: 24
         color: Theme.palette.miscColor5
-        letterSize: 15
+        letterSize: emoji ? 14 : 15
     }
     property int type: StatusChatListItem.Type.PublicChat
     property bool highlighted: false
@@ -85,6 +86,7 @@ Rectangle {
             image: statusChatListItem.image
             icon: statusChatListItem.icon
             name: statusChatListItem.name
+            emoji: statusChatListItem.emoji
         }
 
         StatusIcon {

src/StatusQ/Components/StatusLetterIdenticon.qml

@@ -1,12 +1,14 @@
 import QtQuick 2.13
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
+import StatusQ.Core.Utils 0.1
 
 Rectangle {
     id: statusLetterIdenticon
 
     property alias identiconText: identiconText
     property string name
+    property string emoji
     property int letterSize: 21
 
     color: Theme.palette.miscColor5
@@ -16,9 +18,14 @@ Rectangle {
 
     StatusBaseText {
         id: identiconText
-        text: ((statusLetterIdenticon.name.charAt(0) === "#")
+        text: {
-              || (statusLetterIdenticon.name.charAt(0) === "@") ?
+            if (emoji) {
-              statusLetterIdenticon.name.charAt(1) : statusLetterIdenticon.name.charAt(0)).toUpperCase()
+                return Emoji.parse(emoji)
+            }
+            return ((statusLetterIdenticon.name.charAt(0) === "#")
+                || (statusLetterIdenticon.name.charAt(0) === "@") ?
+                statusLetterIdenticon.name.charAt(1) : statusLetterIdenticon.name.charAt(0)).toUpperCase()
+        }
         font.weight: Font.Bold
         font.pixelSize: statusLetterIdenticon.letterSize
         color: Qt.rgba(255, 255, 255, 0.7)

src/StatusQ/Components/StatusSmartIdenticon.qml

@@ -7,6 +7,7 @@ Loader {
     id: statusSmartIdenticon
 
     property string name: ""
+    property string emoji: ""
     property int dZ: 100
 
     // Badge color properties must be set if badgeItem.visible = true
@@ -83,6 +84,7 @@ Loader {
             height: statusSmartIdenticon.icon.height
             color: statusSmartIdenticon.icon.color
             name: statusSmartIdenticon.name
+            emoji: statusSmartIdenticon.emoji
             letterSize: statusSmartIdenticon.icon.letterSize
         }
     }

src/StatusQ/Core/Utils/Emoji.qml

@@ -0,0 +1,97 @@
+pragma Singleton
+
+import QtQuick 2.13
+
+//import shared.status 1.0
+import "../../../assets/twemoji/twemoji.js" as Twemoji
+
+QtObject {
+    readonly property var size: {
+        "big": "72x72",
+        "middle": "32x32",
+        "small": "18x18"
+    }
+    property string base: Qt.resolvedUrl("../../../assets/twemoji/")
+    function parse(text, renderSize = size.small) {
+        const renderSizes = renderSize.split("x");
+        if (!renderSize.includes("x") || renderSizes.length !== 2) {
+            throw new Error("Invalid value for 'renderSize' parameter: ", renderSize);
+        }
+
+        Twemoji.twemoji.base = base
+        Twemoji.twemoji.ext = ".svg"
+        Twemoji.twemoji.size = "svg"
+        return Twemoji.twemoji.parse(text, {
+            attributes: function() {
+              return {
+                width: renderSizes[0],
+                height: renderSizes[1],
+                style: "vertical-align: top"
+              }
+            }
+        })
+    }
+    function fromCodePoint(value) {
+        return Twemoji.twemoji.convert.fromCodePoint(value)
+    }
+    function deparse(value) {
+        // /StatusQ/src/assets/twemoji/
+        return value.replace(/<img src=\"qrc:\/StatusQ\/src\/assets\/twemoji\/.+?" alt=\"(.+?)\" width=\"[0-9]*\" height=\"[0-9]*\" style=\"(.+?)\" ?\/>/g, "$1");
+    }
+    function deparseFromParse(value) {
+        return value.replace(/<img class=\"emoji\" draggable=\"false\" alt=\"(.+?)\" src=\"qrc:\/StatusQ\/src\/assets\/twemoji\/.+?" width=\"[0-9]*\" height=\"[0-9]*\" style=\"(.+?)\" ?\/>/g, "$1");
+    }
+    function hasEmoji(value) {
+        let match = value.match(/<img src=\"qrc:\/StatusQ\/src\/assets\/twemoji\/.+?" alt=\"(.+?)\" width=\"[0-9]*\" height=\"[0-9]*\" style=\"(.+?)\" ?\/>/g)
+        return match && match.length > 0
+    }
+    function nbEmojis(value) {
+        let match = value.match(/<img src=\"qrc:\/StatusQ\/src\/assets\/twemoji\/.+?" alt=\"(.+?)\" width=\"[0-9]*\" height=\"[0-9]*\" style=\"(.+?)\" ?\/>/g)
+        return match ? match.length : 0
+    }
+    function getEmojis(value) {
+        return value.match(/<img class=\"emoji\" draggable=\"false\" alt=\"(.+?)\" src=\"qrc:\/StatusQ\/src\/assets\/twemoji\/.+?" width=\"[0-9]*\" height=\"[0-9]*\" style=\"(.+?)\" ?\/>/g, "$1");
+    }
+    function getEmojiUnicode(shortname) {
+        var _emoji;
+        EmojiJSON.emoji_json.forEach(function(emoji) {
+            if (emoji.shortname === shortname)
+                _emoji = emoji;
+        })
+
+        if (_emoji !== undefined)
+            return _emoji.unicode;
+        return undefined;
+    }
+
+    function getEmojiCodepoint(iconCodePoint) {
+        // Split the codepoint to get all the parts and then encode them from hex to utf8
+        const splitCodePoint = iconCodePoint.split('-')
+        let codePointParts = []
+        splitCodePoint.forEach(function (codePoint) {
+            codePointParts.push(`0x${codePoint}`)
+        })
+        return String.fromCodePoint(...codePointParts);
+    }
+
+    function getShortcodeFromId(emojiId) {
+        switch (emojiId) {
+            case 1: return ":heart:"
+            case 2: return ":thumbsup:"
+            case 3: return ":thumbsdown:"
+            case 4: return ":laughing:"
+            case 5: return ":cry:"
+            case 6: return ":angry:"
+            default: return undefined
+        }
+    }
+
+    function getEmojiFromId(emojiId) {
+        let shortcode = Emoji.getShortcodeFromId(emojiId)
+        let emojiUnicode = Emoji.getEmojiUnicode(shortcode)
+        if (emojiUnicode) {
+            return Emoji.fromCodePoint(emojiUnicode)
+        }
+        return undefined
+    }
+}

src/StatusQ/Core/Utils/qmldir

@@ -1,4 +1,5 @@
 module StatusQ.Core.Utils
 
+EmojiJSON 1.0 emojiList.js
 singleton Utils 0.1 Utils.qml
-
+singleton Emoji 0.1 Emoji.qml