fix(StatusLetterIdentIcon): Display emoji as svg (#677)

* fix(StatusLetterIdentIcon): Display emoji as svg

* feat(StatusEmoji): Added StatusEmoji image component

ui/StatusQ/src/StatusQ/Components/StatusEmoji.qml

@@ -0,0 +1,19 @@
+import QtQuick 2.13
+import StatusQ.Core 0.1
+
+
+Image {
+    id: root
+
+    property string emojiId: ""
+    
+    width: 14
+    height: 14
+    sourceSize.width: width
+    sourceSize.height: height
+
+    fillMode: Image.PreserveAspectFit
+    mipmap: true
+    antialiasing: true
+    source: emojiId ? `../../assets/twemoji/svg/${emojiId}.svg` : ""
+}

ui/StatusQ/src/StatusQ/Components/StatusLetterIdenticon.qml

@@ -18,9 +18,18 @@ Rectangle {
     height: 40
     radius: width / 2
 
+    StatusEmoji {
+        visible: root.emoji
+        anchors.centerIn: parent
+        width: Math.round(parent.width / 2)
+        height: Math.round(parent.height / 2)
+        emojiId: Emoji.iconId(root.emoji, root.emojiSize) || ""
+    }
+    
     StatusBaseText {
         id: identiconText
 
+        visible: !root.emoji
         anchors.alignWhenCentered: false
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
@@ -32,16 +41,8 @@ Rectangle {
         color: d.luminance(root.color) > 0.5 ? Qt.rgba(0, 0, 0, 0.5) : Qt.rgba(255, 255, 255, 0.7)
 
         text: {
-            if (emoji) {
-                if(Utils.isHtml(emoji))
-                    return emoji
-                else
-                    return Emoji.parse(root.emoji, emojiSize)
-            }
-
             const shift = (root.name.charAt(0) === "#") ||
                           (root.name.charAt(0) === "@")
-
             return root.name.substring(shift, shift + charactersLen).toUpperCase()
         }
     }

ui/StatusQ/src/StatusQ/Components/qmldir

@@ -10,6 +10,7 @@ StatusChatListCategoryItem 0.1 StatusChatListCategoryItem.qml
 StatusChatListAndCategories 0.1 StatusChatListAndCategories.qml
 StatusChatToolBar 0.1 StatusChatToolBar.qml
 StatusContactRequestsIndicatorListItem 0.1 StatusContactRequestsIndicatorListItem.qml
+StatusEmoji 0.1 StatusEmoji.qml
 StatusContactVerificationIcons 0.1 StatusContactVerificationIcons.qml
 StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml
 StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml

ui/StatusQ/src/StatusQ/Core/Utils/Emoji.qml

@@ -45,7 +45,8 @@ QtObject {
     }
     function iconId(text) {
         const parsed = parse(text);
-        return parsed.match('src=".*\/(.+?).svg')[1]
+        const match = parsed.match('src=".*\/(.+?).svg');
+        return (match && match.length >= 2) ? match[1] : undefined;
     }
     function fromCodePoint(value) {
         return Twemoji.twemoji.convert.fromCodePoint(value)

ui/StatusQ/statusq.qrc

@@ -13,6 +13,7 @@
         <file>src/StatusQ/Components/StatusChatToolBar.qml</file>
         <file>src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml</file>
         <file>src/StatusQ/Components/StatusContactVerificationIcons.qml</file>
+        <file>src/StatusQ/Components/StatusEmoji.qml</file>
         <file>src/StatusQ/Components/StatusDescriptionListItem.qml</file>
         <file>src/StatusQ/Components/StatusExpandableItem.qml</file>
         <file>src/StatusQ/Components/StatusLetterIdenticon.qml</file>