Display chat pictures properly

harbour-fernschreiber.pro

@@ -20,6 +20,7 @@ SOURCES += src/harbour-fernschreiber.cpp \
     src/tdlibwrapper.cpp
 
 DISTFILES += qml/harbour-fernschreiber.qml \
+    qml/js/functions.js \
     qml/pages/CoverPage.qml \
     qml/pages/InitializationPage.qml \
     qml/pages/OverviewPage.qml \

qml/components/ImageThumbnail.qml

@@ -1,97 +0,0 @@
-/*
-    Copyright (C) 2020 Sebastian J. Wolf
-
-    This file is part of Fernschreiber.
-
-    Fernschreiber is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    Fernschreiber is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-    GNU General Public License for more details.
-
-    You should have received a copy of the GNU General Public License
-    along with Fernschreiber. If not, see <http://www.gnu.org/licenses/>.
-*/
-import QtQuick 2.5
-import QtGraphicalEffects 1.0
-import Sailfish.Silica 1.0
-
-Item {
-
-    id: imageThumbnail
-
-    property variant imageData;
-
-    Image {
-
-        Component.onCompleted: {
-            if (imageData.local.is_downloading_completed) {
-                singleImage.source = imageData.local.path;
-            } else {
-                tdLibWrapper.downloadFile(imageData.id);
-            }
-        }
-
-        Connections {
-            target: tdLibWrapper
-            onFileUpdated: {
-                if (fileId === imageData.id) {
-                    console.log("File updated, completed? " + fileInformation.local.is_downloading_completed);
-                    imageThumbnail.imageData = fileInformation;
-                    if (imageThumbnail.imageData.local.is_downloading_completed) {
-                        singleImage.source = imageThumbnail.imageData.local.path;
-                    }
-                }
-            }
-        }
-
-        id: singleImage
-        width: parent.width - Theme.paddingSmall
-        height: parent.height - Theme.paddingSmall
-        anchors.centerIn: parent
-
-        fillMode: Image.PreserveAspectCrop
-        autoTransform: true
-        asynchronous: true
-        visible: false
-    }
-
-    Rectangle {
-        id: imageThumbnailMask
-        width: parent.width - Theme.paddingSmall
-        height: parent.height - Theme.paddingSmall
-        color: Theme.primaryColor
-        radius: parent.width / 2
-        anchors.centerIn: singleImage
-        visible: false
-    }
-
-    OpacityMask {
-        id: maskedThumbnail
-        source: singleImage
-        maskSource: imageThumbnailMask
-        anchors.fill: singleImage
-        visible: singleImage.status === Image.Ready ? true : false
-        opacity: singleImage.status === Image.Ready ? 1 : 0
-        Behavior on opacity { NumberAnimation {} }
-    }
-
-    Image {
-        id: imageLoadingBackgroundImage
-        source: "../../images/background" + ( Theme.colorScheme ? "-black" : "-white" ) + ".png"
-        anchors {
-            centerIn: parent
-        }
-        width: parent.width - 2 * Theme.paddingLarge
-        height: parent.height - 2 * Theme.paddingLarge
-        visible: singleImage.status !== Image.Ready
-
-        fillMode: Image.PreserveAspectFit
-        opacity: 0.15
-    }
-
-}

qml/components/ProfileThumbnail.qml

@@ -0,0 +1,126 @@
+/*
+    Copyright (C) 2020 Sebastian J. Wolf
+
+    This file is part of Fernschreiber.
+
+    Fernschreiber is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Fernschreiber is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Fernschreiber. If not, see <http://www.gnu.org/licenses/>.
+*/
+import QtQuick 2.5
+import QtGraphicalEffects 1.0
+import Sailfish.Silica 1.0
+
+Item {
+
+    id: profileThumbnail
+
+    property variant photoData;
+    property string replacementStringHint: "X"
+
+    function getReplacementString() {
+        if (replacementStringHint.length > 2) {
+            // Remove all emoji images
+            var strippedText = replacementStringHint.replace(/\<[^>]+\>/g, "").trim();
+            if (strippedText.length > 0) {
+                var textElements = strippedText.split(" ");
+                if (textElements.length > 1) {
+                    return textElements[0].charAt(0) + textElements[textElements.length - 1].charAt(0);
+                } else {
+                    return textElements[0].charAt(0);
+                }
+            }
+        }
+        return replacementStringHint;
+    }
+
+    Component.onCompleted: {
+        if (typeof photoData === "object") {
+            if (photoData.local.is_downloading_completed) {
+                singleImage.source = photoData.local.path;
+            } else {
+                tdLibWrapper.downloadFile(photoData.id);
+            }
+        }
+    }
+
+    Connections {
+        target: tdLibWrapper
+        onFileUpdated: {
+            if (fileId === photoData.id) {
+                console.log("File updated, completed? " + fileInformation.local.is_downloading_completed);
+                if (fileInformation.local.is_downloading_completed) {
+                    photoData = fileInformation;
+                    singleImage.source = photoData.local.path;
+                }
+            }
+        }
+    }
+
+    Image {
+        id: singleImage
+        width: parent.width - Theme.paddingSmall
+        height: parent.height - Theme.paddingSmall
+        anchors.centerIn: parent
+
+        fillMode: Image.PreserveAspectCrop
+        autoTransform: true
+        asynchronous: true
+        visible: false
+    }
+
+    Rectangle {
+        id: profileThumbnailMask
+        width: parent.width - Theme.paddingSmall
+        height: parent.height - Theme.paddingSmall
+        color: Theme.primaryColor
+        radius: parent.width / 2
+        anchors.centerIn: singleImage
+        visible: false
+    }
+
+    OpacityMask {
+        id: maskedThumbnail
+        source: singleImage
+        maskSource: profileThumbnailMask
+        anchors.fill: singleImage
+        visible: singleImage.status === Image.Ready ? true : false
+        opacity: singleImage.status === Image.Ready ? 1 : 0
+        Behavior on opacity { NumberAnimation {} }
+    }
+
+    Item {
+        id: replacementThumbnailItem
+        width: parent.width - Theme.paddingSmall
+        height: parent.height - Theme.paddingSmall
+        visible: singleImage.status !== Image.Ready
+
+        Rectangle {
+            id: replacementThumbnailBackground
+            anchors.fill: parent
+            color: (Theme.colorScheme === Theme.LightOnDark) ? Theme.darkSecondaryColor : Theme.lightSecondaryColor
+            radius: parent.width / 2
+            opacity: 0.8
+        }
+
+        Text {
+            id: replacementThumbnailText
+            anchors.centerIn: replacementThumbnailBackground
+            text: getReplacementString()
+            color: Theme.primaryColor
+            font.bold: true
+            font.pixelSize: Theme.fontSizeLarge
+        }
+
+    }
+
+}

qml/js/functions.js

@@ -0,0 +1,3 @@
+function getUserName(userInformation) {
+    return userInformation.first_name + " " + userInformation.last_name;
+}

qml/pages/AboutPage.qml

@@ -20,6 +20,7 @@ import QtQuick 2.0
 import Sailfish.Silica 1.0
 import "../components"
 import "../js/twemoji.js" as Emoji
+import "../js/functions.js" as Functions
 
 Page {
     id: aboutPage
@@ -160,10 +161,11 @@ Page {
                 }
             }
 
-            ImageThumbnail {
+            ProfileThumbnail {
-                imageData: aboutPage.userInformation.profile_photo.big
+                photoData: aboutPage.userInformation.profile_photo.small
                 width: Theme.itemSizeExtraLarge
                 height: Theme.itemSizeExtraLarge
+                replacementStringHint: aboutPage.userInformation.first_name + " " + aboutPage.userInformation.last_name
                 anchors {
                     horizontalCenter: parent.horizontalCenter
                 }

qml/pages/OverviewPage.qml

@@ -24,6 +24,7 @@ import Nemo.Notifications 1.0
 import WerkWolf.Fernschreiber 1.0
 import "../components"
 import "../js/twemoji.js" as Emoji
+import "../js/functions.js" as Functions
 
 Page {
     id: overviewPage
@@ -198,14 +199,14 @@ Page {
 
                             Column {
                                 id: chatListPictureColumn
-                                width: parent.width / 6
+                                width: chatListContentColumn.height
-                                height: parent.width / 6
+                                height: chatListContentColumn.height
                                 spacing: Theme.paddingSmall
 
-                                ImageThumbnail {
+                                ProfileThumbnail {
                                     id: chatListPictureThumbnail
-                                    visible: display.photo
+                                    photoData: (typeof display.photo !== "undefined") ? display.photo.small : ""
-                                    imageData: display.photo.small
+                                    replacementStringHint: chatListNameText.text
                                     width: parent.width
                                     height: parent.width
                                 }
@@ -215,11 +216,9 @@ Page {
                                 id: chatListContentColumn
                                 width: parent.width * 5 / 6 - Theme.horizontalPageMargin
 
-                                spacing: Theme.paddingSmall
-
                                 Text {
                                     id: chatListNameText
-                                    text: Emoji.emojify(display.title, Theme.fontSizeMedium)
+                                    text: display.title !== "" ? Emoji.emojify(display.title, Theme.fontSizeMedium) : qsTr("Unknown")
                                     textFormat: Text.StyledText
                                     font.pixelSize: Theme.fontSizeMedium
                                     color: Theme.primaryColor

translations/harbour-fernschreiber-de.ts

@@ -188,5 +188,9 @@
         <source>Updating content...</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <source>Unknown</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 </TS>

translations/harbour-fernschreiber.ts

@@ -188,5 +188,9 @@
         <source>Updating content...</source>
         <translation type="unfinished"></translation>
     </message>
+    <message>
+        <source>Unknown</source>
+        <translation type="unfinished"></translation>
+    </message>
 </context>
 </TS>