Remove ImageItem, Paintable and use unified image provider.

imports/Spectral/Component/Avatar.qml

@@ -0,0 +1,63 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtGraphicalEffects 1.0
+
+Item {
+    property string hint: "H"
+    property string source: ""
+    readonly property url realSource: source ? "image://mxc/" + source : ""
+
+    id: root
+
+    Image {
+        anchors.fill: parent
+
+        id: image
+        visible: realSource
+        source: realSource
+        sourceSize.width: width
+        sourceSize.height: width
+        fillMode: Image.PreserveAspectCrop
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            maskSource: Rectangle {
+                width: image.width
+                height: image.width
+
+                radius: width / 2
+            }
+        }
+    }
+
+    Rectangle {
+        anchors.fill: parent
+
+        visible: !realSource || image.status != Image.Ready
+
+        radius: height / 2
+
+        color: stringToColor(hint)
+
+        Label {
+            anchors.centerIn: parent
+
+            color: "white"
+            text: hint[0].toUpperCase()
+            font.pixelSize: root.width / 2
+            font.bold: true
+        }
+    }
+
+    function stringToColor(str) {
+        var hash = 0;
+        for (var i = 0; i < str.length; i++) {
+            hash = str.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        var colour = '#';
+        for (var j = 0; j < 3; j++) {
+            var value = (hash >> (j * 8)) & 0xFF;
+            colour += ('00' + value.toString(16)).substr(-2);
+        }
+        return colour;
+    }
+}

imports/Spectral/Component/ScrollHelper.qml

@@ -66,14 +66,13 @@ MouseArea {
     }
 
     onWheel: {
-        var newPos = calculateNewPosition(flickable, wheel);
         // console.warn("Delta: ", wheel.pixelDelta.y);
         // console.warn("Old position: ", flickable.contentY);
         // console.warn("New position: ", newPos);
 
         // Show the scrollbars
         flickable.flick(0, 0);
-        flickable.contentY = newPos;
+        flickable.contentY = calculateNewPosition(flickable, wheel);
         cancelFlickStateTimer.start()
     }
 

imports/Spectral/Component/Timeline/ImageDelegate.qml

@@ -43,14 +43,14 @@ ColumnLayout {
 
         spacing: 4
 
-        ImageItem {
+        Avatar {
             Layout.preferredWidth: 32
             Layout.preferredHeight: 32
             Layout.alignment: Qt.AlignTop
 
             visible: avatarVisible
             hint: author.displayName
-            source: author.paintable
+            source: author.avatarUrl
         }
 
         Label {

imports/Spectral/Component/Timeline/MessageDelegate.qml

@@ -42,14 +42,14 @@ ColumnLayout {
 
         spacing: 4
 
-        ImageItem {
+        Avatar {
             Layout.preferredWidth: 32
             Layout.preferredHeight: 32
             Layout.alignment: Qt.AlignTop
 
             visible: avatarVisible
             hint: author.displayName
-            source: author.paintable
+            source: author.avatarUrl
         }
 
         Label {
@@ -119,12 +119,12 @@ ColumnLayout {
                     contentItem: RowLayout {
                         spacing: 8
 
-                        ImageItem {
+                        Avatar {
                             Layout.preferredWidth: 36
                             Layout.preferredHeight: 36
                             Layout.alignment: Qt.AlignTop
 
-                            source: replyAuthor ? replyAuthor.paintable : null
+                            source: replyAuthor ? replyAuthor.avatarUrl : ""
                         }
 
                         ColumnLayout {

imports/Spectral/Component/qmldir

@@ -6,3 +6,4 @@ ScrollHelper 2.0 ScrollHelper.qml
 AutoListView 2.0 AutoListView.qml
 AutoTextField 2.0 AutoTextField.qml
 SplitView 2.0 SplitView.qml
+Avatar 2.0 Avatar.qml

imports/Spectral/Panel/RoomDrawer.qml

@@ -7,8 +7,6 @@ import Spectral.Component 2.0
 
 import Spectral 0.1
 
-import "qrc:/js/util.js" as Util
-
 Drawer {
     property var room
 
@@ -20,13 +18,13 @@ Drawer {
         anchors.fill: parent
         anchors.margins: 32
 
-        ImageItem {
+        Avatar {
             Layout.preferredWidth: 96
             Layout.preferredHeight: 96
             Layout.alignment: Qt.AlignHCenter
 
             hint: room ? room.displayName : "No name"
-            source: room ? room.paintable : null
+            source: room ? room.avatarUrl : null
         }
 
         Label {
@@ -117,11 +115,11 @@ Drawer {
                     anchors.margins: 8
                     spacing: 12
 
-                    ImageItem {
+                    Avatar {
                         Layout.preferredWidth: height
                         Layout.fillHeight: true
 
-                        source: paintable
+                        source: avatar
                         hint: name
                     }
 

imports/Spectral/Panel/RoomHeader.qml

@@ -5,9 +5,10 @@ import QtQuick.Controls.Material 2.2
 
 import Spectral 0.1
 import Spectral.Effect 2.0
+import Spectral.Component 2.0
 
 Control {
-    property alias paintable: headerImage.source
+    property alias avatar: headerImage.source
     property alias topic: headerTopicLabel.text
     property bool atTop: false
     signal clicked()
@@ -31,13 +32,13 @@ Control {
 
         spacing: 12
 
-        ImageItem {
+        Avatar {
             Layout.preferredWidth: height
             Layout.fillHeight: true
 
             id: headerImage
 
-            source: currentRoom.paintable
+            source: currentRoom.avatarUrl
             hint: currentRoom ? currentRoom.displayName : "No name"
         }
 

imports/Spectral/Panel/RoomListPanel.qml

@@ -110,13 +110,13 @@ Rectangle {
                     contentItem: ColumnLayout {
                         spacing: 4
 
-                        ImageItem {
+                        Avatar {
                             Layout.preferredWidth: 200
                             Layout.preferredHeight: 200
                             Layout.margins: 12
                             Layout.alignment: Qt.AlignHCenter
 
-                            source: root.user ? root.user.paintable : null
+                            source: root.user ? root.user.avatarUrl : null
                             hint: root.user ? root.user.displayName : "?"
                         }
 
@@ -646,14 +646,14 @@ Rectangle {
                     background: Item {}
                 }
 
-                ImageItem {
+                Avatar {
                     Layout.preferredWidth: height
                     Layout.fillHeight: true
                     Layout.alignment: Qt.AlignRight
 
                     visible: !searchField.active
 
-                    source: root.user ? root.user.paintable : null
+                    source: root.user ? root.user.avatarUrl : null
                     hint: root.user ? root.user.displayName : "?"
 
                     MouseArea {
@@ -765,13 +765,11 @@ Rectangle {
 
                     spacing: 12
 
-                    ImageItem {
-                        id: imageItem
-
+                    Avatar {
                         Layout.preferredWidth: height
                         Layout.fillHeight: true
 
-                        source: paintable
+                        source: avatar
                         hint: name || "No Name"
                     }
 

imports/Spectral/Panel/RoomPanel.qml

@@ -14,7 +14,6 @@ import Spectral.Setting 0.1
 import SortFilterProxyModel 0.2
 
 import "qrc:/js/md.js" as Markdown
-import "qrc:/js/util.js" as Util
 
 Item {
     property var currentRoom: null
@@ -63,7 +62,7 @@ Item {
 
             id: roomHeader
 
-            paintable: currentRoom ? currentRoom.paintable : null
+            avatar: currentRoom ? currentRoom.avatarUrl : ""
             topic: currentRoom ? (currentRoom.topic).replace(/(\r\n\t|\n|\r\t)/gm,"") : ""
             atTop: messageListView.atYBeginning
 
@@ -295,11 +294,11 @@ Item {
                             anchors.margins: 8
                             spacing: 12
 
-                            ImageItem {
+                            Avatar {
                                 Layout.preferredWidth: height
                                 Layout.fillHeight: true
 
-                                source: modelData.paintable
+                                source: modelData.avatar
                                 hint: modelData.displayName
                             }
 

imports/Spectral/Panel/RoomPanelInput.qml

@@ -50,11 +50,11 @@ Control {
 
             spacing: 8
 
-            ImageItem {
+            Avatar {
                 Layout.preferredWidth: 32
                 Layout.preferredHeight: 32
 
-                source: replyUser ? replyUser.paintable : null
+                source: replyUser ? replyUser.avatarUrl : ""
                 hint: replyUser ? replyUser.displayName : "No name"
             }
 
@@ -125,11 +125,11 @@ Control {
                         verticalAlignment: Text.AlignVCenter
                         horizontalAlignment: Text.AlignHCenter
                     }
-                    ImageItem {
+                    Avatar {
                         width: 20
                         height: 20
                         visible: !isEmoji
-                        source: modelData.paintable || null
+                        source: modelData.avatarUrl || null
                     }
                     Label {
                         height: parent.height