Primitive timeline background support.

imports/Spectral/Dialog/AccountDetailDialog.qml

@@ -299,46 +299,6 @@ Dialog {
                 onPrimaryClicked: fontFamilyDialog.createObject(ApplicationWindow.overlay).open()
             }
         }
-
-        Control {
-            width: parent.width
-
-            contentItem: RowLayout {
-                MaterialIcon {
-                    Layout.preferredWidth: 48
-                    Layout.preferredHeight: 48
-
-                    color: MPalette.foreground
-                    icon: "\ue8aa"
-                }
-
-                Label {
-                    Layout.fillWidth: true
-
-                    color: MPalette.foreground
-                    text: "Chat Background"
-                }
-            }
-
-            RippleEffect {
-                anchors.fill: parent
-
-                onPrimaryClicked: {
-                    var fileDialog = chatBackgroundDialog.createObject(ApplicationWindow.overlay)
-
-                    fileDialog.chosen.connect(function(path) {
-                        if (!path) return
-
-                        MSettings.timelineBackground = path
-                    })
-                    fileDialog.rejected.connect(function(path) {
-                        MSettings.timelineBackground = ""
-                    })
-
-                    fileDialog.open()
-                }
-            }
-        }
     }
 
     onClosed: destroy()

imports/Spectral/Dialog/RoomSettingsDialog.qml

@@ -211,6 +211,48 @@ Dialog {
                 }
             }
         }
+
+        MenuSeparator {
+            Layout.fillWidth: true
+        }
+
+        RowLayout {
+            Layout.fillWidth: true
+
+            Button {
+                Layout.fillWidth: true
+
+                flat: true
+                text: "Set background image"
+
+                onClicked: {
+                    var fileDialog = chatBackgroundDialog.createObject(ApplicationWindow.overlay)
+
+                    fileDialog.chosen.connect(function(path) {
+                        if (!path) return
+
+                        room.setBackgroundFromLocalFile(path)
+                    })
+
+                    fileDialog.open()
+                }
+            }
+
+            Button {
+                Layout.fillWidth: true
+
+                flat: true
+                text: "Clear background image"
+
+                onClicked: room.clearBackground()
+            }
+        }
+    }
+
+    Component {
+        id: chatBackgroundDialog
+
+        OpenFileDialog {}
     }
 
     onClosed: destroy()

imports/Spectral/Panel/RoomPanel.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.12
 import QtQuick.Controls.Material 2.12
 import Qt.labs.qmlmodels 1.0
 import Qt.labs.platform 1.0
+import QtGraphicalEffects 1.0
 
 import Spectral.Component 2.0
 import Spectral.Component.Emoji 2.0
@@ -126,7 +127,7 @@ Item {
                 background: RippleEffect {
                     onClicked: {
                         var localPath = StandardPaths.writableLocation(StandardPaths.CacheLocation) + "/screenshots/" + (new Date()).getTime() + ".png"
-                         if (!imageClipboard.saveImage(localPath)) return
+                        if (!imageClipboard.saveImage(localPath)) return
                         roomPanelInput.attach(localPath)
                         attachDialog.close()
                     }
@@ -172,19 +173,24 @@ Item {
     }
 
     Image {
+        readonly property int sourceDim: (Math.ceil(Math.max(width, height) / 360) + 1) * 360
+
         anchors.fill: parent
 
-        visible: currentRoom && MSettings.timelineBackground
+        visible: currentRoom && currentRoom.backgroundMediaId
+
+        sourceSize.width: sourceDim
+        sourceSize.height: sourceDim
 
-        source: MSettings.timelineBackground
         fillMode: Image.PreserveAspectCrop
+
+        source: currentRoom && currentRoom.backgroundMediaId ? "image://mxc/" + currentRoom.backgroundMediaId : ""
     }
 
     Rectangle {
         anchors.fill: parent
 
-        visible: currentRoom && !MSettings.timelineBackground
-
+        visible: currentRoom && !currentRoom.backgroundMediaId
         color: MSettings.darkTheme ? "#242424" : "#EBEFF2"
     }
 

imports/Spectral/Setting/Setting.qml

@@ -9,7 +9,5 @@ Settings {
 
     property bool darkTheme
 
-    property string timelineBackground
-
     property string fontFamily: "Roboto,Noto Sans,Noto Color Emoji"
 }