Now the sticker picker looks much better...

qml/components/StickerPicker.qml

@@ -29,6 +29,17 @@ Item {
 
     property variant recentStickers: stickerManager.getRecentStickers()
     property variant installedStickerSets: stickerManager.getInstalledStickerSets()
+    property bool pickerLoaded: false
+
+    Timer {
+        id: stickerPickerLoadedTimer
+        interval: 100
+        running: true
+        repeat: false
+        onTriggered: {
+            stickerPickerOverlayItem.pickerLoaded = true;
+        }
+    }
 
     Rectangle {
         id: stickerPickerOverlayBackground
@@ -37,10 +48,16 @@ Item {
         color: Theme.overlayBackgroundColor
         opacity: 0.7
     }
+
     Flickable {
         id: stickerPickerFlickable
         anchors.fill: parent
         anchors.margins: Theme.paddingMedium
+
+        opacity: stickerPickerOverlayItem.pickerLoaded ? 1 : 0
+        Behavior on opacity { NumberAnimation {} }
+        visible: stickerPickerOverlayItem.pickerLoaded
+
         contentHeight: stickerPickerColumn.height
         clip: true
 
@@ -78,18 +95,25 @@ Item {
                                 id: singleRecentStickerRow
                                 spacing: Theme.paddingSmall
                                 Image {
-                                    source: modelData.sticker.local.path
+                                    source: modelData.thumbnail.photo.local.path
-                                    width: Theme.itemSizeMedium
+                                    width: Theme.itemSizeExtraLarge
-                                    height: Theme.itemSizeMedium
+                                    height: Theme.itemSizeExtraLarge
+                                    asynchronous: true
+                                    onStatusChanged: {
+                                        if (status === Image.Ready) {
+                                            stickerPickerLoadedTimer.restart();
+                                        }
+                                    }
                                 }
                             }
 
                             MouseArea {
                                 anchors.fill: parent
                                 onClicked: {
-                                    tdLibWrapper.sendStickerMessage(chatInformation.id, modelData.sticker.local.path);
+                                    tdLibWrapper.sendStickerMessage(chatInformation.id, modelData.sticker.remote.id);
                                     stickerPickerOverlayItem.visible = false;
                                     attachmentOptionsRow.visible = false;
+                                    stickerPickerLoader.active = false;
                                 }
                             }
                         }
@@ -126,61 +150,69 @@ Item {
                                 model: modelData.stickers
 
                                 Item {
-                                    width: Theme.itemSizeMedium
+                                    width: Theme.itemSizeExtraLarge
-                                    height: Theme.itemSizeMedium
+                                    height: Theme.itemSizeExtraLarge
-
+                                    Image {
-                                    Component.onCompleted: {
+                                        id: singleStickerImage
-                                        if (!modelData.sticker.local.is_downloading_completed) {
+                                        source: modelData.thumbnail.photo.local.is_downloading_completed ? modelData.thumbnail.photo.local.path : ""
-                                            tdLibWrapper.downloadFile(modelData.sticker.id);
+                                        anchors.fill: parent
-                                        }
+                                        visible: modelData.thumbnail.photo.local.is_downloading_completed
-                                    }
+                                        asynchronous: true
-
+                                        onStatusChanged: {
-                                    Connections {
+                                            if (status === Image.Ready) {
-                                        target: tdLibWrapper
+                                                stickerPickerLoadedTimer.restart();
-                                        onFileUpdated : {
-                                            if (fileInformation.local.is_downloading_completed) {
-                                                if (fileId === modelData.sticker.id) {
-                                                    singleStickerImage.source = fileInformation.local.path;
-                                                }
                                             }
                                         }
                                     }
-
-                                    Image {
-                                        id: singleStickerImage
-                                        source: modelData.sticker.local.is_downloading_completed ? modelData.sticker.local.path : ""
-                                        anchors.fill: parent
-                                        visible: modelData.sticker.local.is_downloading_completed
-                                    }
                                     Text {
-                                        font.pixelSize: Theme.fontSizeLarge
+                                        font.pixelSize: Theme.fontSizeHuge
                                         color: Theme.primaryColor
                                         anchors.fill: parent
                                         maximumLineCount: 1
                                         elide: Text.ElideRight
                                         text: Emoji.emojify(modelData.emoji, font.pixelSize)
-                                        visible: !modelData.sticker.local.is_downloading_completed
+                                        visible: !modelData.thumbnail.photo.local.is_downloading_completed
                                     }
 
                                     MouseArea {
                                         anchors.fill: parent
                                         onClicked: {
-                                            tdLibWrapper.sendStickerMessage(chatInformation.id, modelData.sticker.local.path);
+                                            tdLibWrapper.sendStickerMessage(chatInformation.id, modelData.sticker.remote.id);
                                             stickerPickerOverlayItem.visible = false;
                                             attachmentOptionsRow.visible = false;
+                                            stickerPickerLoader.active = false;
                                         }
                                     }
                                 }
-
                             }
                         }
                     }
-
-
                 }
             }
-
         }
     }
+
+    Column {
+        anchors.centerIn: parent
+        width: parent.width
+        spacing: Theme.paddingMedium
+
+        opacity: stickerPickerOverlayItem.pickerLoaded ? 0 : 1
+        Behavior on opacity { NumberAnimation {} }
+        visible: !stickerPickerOverlayItem.pickerLoaded
+
+        InfoLabel {
+            id: loadingLabel
+            text: qsTr("Loading stickers...")
+        }
+
+        BusyIndicator {
+            id: loadingBusyIndicator
+            anchors.horizontalCenter: parent.horizontalCenter
+            running: !stickerPickerOverlayItem.pickerLoaded
+            size: BusyIndicatorSize.Large
+        }
+    }
+
 }
 

qml/pages/ChatPage.qml

@@ -30,6 +30,7 @@ import "../js/functions.js" as Functions
 Page {
     id: chatPage
     allowedOrientations: Orientation.All
+    backNavigation: !stickerPickerLoader.active
 
     property bool loading: true;
     property bool isInitialized: false;
@@ -279,7 +280,7 @@ Page {
         anchors.fill: parent
 
         PullDownMenu {
-            visible: chatInformation.id !== chatPage.myUserId
+            visible: chatInformation.id !== chatPage.myUserId && !stickerPickerLoader.active
             MenuItem {
                 id: muteChatMenuItem
                 onClicked: {
@@ -945,10 +946,14 @@ Page {
                     }
                 }
 
-//                StickerPicker {
+                Loader {
-//                    id: stickerPicker
+                    id: stickerPickerLoader
-//                    visible: false
+                    active: false
-//                }
+                    asynchronous: true
+                    anchors.fill: parent
+                    source: "../components/StickerPicker.qml"
+                }
+
             }
 
             Column {
@@ -1050,17 +1055,15 @@ Page {
                     }
                     HighlightImage {
                         source: "../../images/icon-m-sticker.png"
-                        width: documentAttachmentButton.width
+                        width: Theme.itemSizeSmall
-                        height: documentAttachmentButton.height
+                        height: Theme.itemSizeSmall
                         color: Theme.primaryColor
                         highlightColor: Theme.highlightColor
-                        highlighted: stickerPicker.visible
+                        highlighted: stickerPickerLoader.active
                         MouseArea {
                             anchors.fill: parent
                             onClicked: {
-                                //console.log("RECENT STICKERS: " + JSON.stringify(stickerManager.getRecentStickers()));
+                                stickerPickerLoader.active = !stickerPickerLoader.active;
-                                //console.log("INSTALLED SETS: " + JSON.stringify(stickerManager.getInstalledStickerSets()));
-                                stickerPicker.visible = !stickerPicker.visible;
                             }
                         }
                     }
@@ -1198,10 +1201,11 @@ Page {
 
                         anchors.bottom: parent.bottom
                         anchors.bottomMargin: Theme.paddingSmall
-                        enabled: !(attachmentPreviewRow.visible || stickerPicker.visible)
+                        enabled: !attachmentPreviewRow.visible
                         onClicked: {
                             if (attachmentOptionsRow.visible) {
                                 attachmentOptionsRow.visible = false;
+                                stickerPickerLoader.active = false;
                             } else {
                                 attachmentOptionsRow.visible = true;
                             }

src/stickermanager.cpp

@@ -107,4 +107,14 @@ void StickerManager::handleStickerSetReceived(const QVariantMap &stickerSet)
     this->stickerSets.insert(stickerSetId, stickerSet);
     int setIndex = this->stickerSetMap.value(stickerSetId).toInt();
     this->installedStickerSets.replace(setIndex, stickerSet);
+    QVariantList stickerList = stickerSet.value("stickers").toList();
+    QListIterator<QVariant> stickerIterator(stickerList);
+    while (stickerIterator.hasNext()) {
+        QVariantMap singleSticker = stickerIterator.next().toMap();
+        QVariantMap thumbnailFile = singleSticker.value("thumbnail").toMap().value("photo").toMap();
+        QVariantMap thumbnailLocalFile = thumbnailFile.value("local").toMap();
+        if (!thumbnailLocalFile.value("is_downloading_completed").toBool()) {
+            tdLibWrapper->downloadFile(thumbnailFile.value("id").toString());
+        }
+    }
 }

src/tdlibwrapper.cpp

@@ -337,9 +337,9 @@ void TDLibWrapper::sendDocumentMessage(const QString &chatId, const QString &fil
     this->sendRequest(requestObject);
 }
 
-void TDLibWrapper::sendStickerMessage(const QString &chatId, const QString &filePath, const QString &replyToMessageId)
+void TDLibWrapper::sendStickerMessage(const QString &chatId, const QString &fileId, const QString &replyToMessageId)
 {
-    LOG("Sending sticker message" << chatId << filePath << replyToMessageId);
+    LOG("Sending sticker message" << chatId << fileId << replyToMessageId);
     QVariantMap requestObject;
     requestObject.insert(_TYPE, "sendMessage");
     requestObject.insert("chat_id", chatId);
@@ -350,8 +350,8 @@ void TDLibWrapper::sendStickerMessage(const QString &chatId, const QString &file
     inputMessageContent.insert(_TYPE, "inputMessageSticker");
 
     QVariantMap stickerInputFile;
-    stickerInputFile.insert(_TYPE, "inputFileLocal");
+    stickerInputFile.insert(_TYPE, "inputFileRemote");
-    stickerInputFile.insert("path", filePath);
+    stickerInputFile.insert("id", fileId);
 
     inputMessageContent.insert("sticker", stickerInputFile);
 

src/tdlibwrapper.h

@@ -118,7 +118,7 @@ public:
     Q_INVOKABLE void sendPhotoMessage(const QString &chatId, const QString &filePath, const QString &message, const QString &replyToMessageId = "0");
     Q_INVOKABLE void sendVideoMessage(const QString &chatId, const QString &filePath, const QString &message, const QString &replyToMessageId = "0");
     Q_INVOKABLE void sendDocumentMessage(const QString &chatId, const QString &filePath, const QString &message, const QString &replyToMessageId = "0");
-    Q_INVOKABLE void sendStickerMessage(const QString &chatId, const QString &filePath, const QString &replyToMessageId = "0");
+    Q_INVOKABLE void sendStickerMessage(const QString &chatId, const QString &fileId, const QString &replyToMessageId = "0");
     Q_INVOKABLE void getMessage(const QString &chatId, const QString &messageId);
     Q_INVOKABLE void setOptionInteger(const QString &optionName, const int &optionValue);
     Q_INVOKABLE void setChatNotificationSettings(const QString &chatId, const QVariantMap &notificationSettings);

translations/harbour-fernschreiber-es.ts

@@ -529,6 +529,10 @@
         <source>Recently used</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <source>Loading stickers...</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 <context>
     <name>VideoPage</name>

translations/harbour-fernschreiber-fi.ts

@@ -529,6 +529,10 @@
         <source>Recently used</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <source>Loading stickers...</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 <context>
     <name>VideoPage</name>

translations/harbour-fernschreiber-hu.ts

@@ -529,6 +529,10 @@
         <source>Recently used</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <source>Loading stickers...</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 <context>
     <name>VideoPage</name>

translations/harbour-fernschreiber-pl.ts

@@ -529,6 +529,10 @@
         <source>Recently used</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <source>Loading stickers...</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 <context>
     <name>VideoPage</name>

translations/harbour-fernschreiber-ru.ts

@@ -529,6 +529,10 @@
         <source>Recently used</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <source>Loading stickers...</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 <context>
     <name>VideoPage</name>

translations/harbour-fernschreiber-zh_CN.ts

@@ -529,6 +529,10 @@
         <source>Recently used</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <source>Loading stickers...</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 <context>
     <name>VideoPage</name>

translations/harbour-fernschreiber.ts

@@ -529,6 +529,10 @@
         <source>Recently used</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <source>Loading stickers...</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 <context>
     <name>VideoPage</name>