Zergling_man/moment
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Big performance refactoring & various improvements

Browse Source 
Instead of passing all sorts of events for the JS to handle and manually
add to different data models, we now handle everything we can in Python.

For any change, the python models send a sync event with their
contents (no more than 4 times per second) to JS, and the QSyncable
library's JsonListModel takes care of converting it to a QML ListModel
and sending the appropriate signals.

The SortFilterProxyModel library is not used anymore, the only case
where we need to filter/sort something now is when the user interacts
with the "Filter rooms" or "Filter members" fields. These cases are
handled by a simple JS function.

We now keep separated room and timeline models for different accounts,
the previous approach of sharing all the data we could between accounts
created a lot of complications (local echoes, decrypted messages
replacing others, etc).

The users's own account profile changes are now hidden in the timeline.
On startup, if all events for a room were only own profile changes, more
events will be loaded.

Any kind of image format supported by Qt is now handled by the
pyotherside image provider, instead of just PNG/JPG.
SVGs which previously caused errors are supported as well.

The typing members bar paddings/margins are fixed.

The behavior of the avatar/"upload a profile picture" overlay is fixed.

Config files read from disk are now cached (TODO: make them reloadable
again).

Pylint is not used anymore because of all its annoying false warnings
and lack of understanding for dataclasses, it is replaced by flake8 with
a custom config and various plugins.

Debug mode is now considered on if the program was compiled with
the right option, instead of taking an argument from CLI.
When on, C++ will set a flag in the Window QML component.

The loading screen is now unloaded after the UI is ready, where
previously it just stayed in the background invisible and wasted CPU.

The overall refactoring and improvements make us now able to handle
rooms with thousand of members and no lazy-loading, where previously
everything would freeze and simply scrolling up to load past events
in any room would block the UI for a few seconds.
This commit is contained in:
miruka
2019-08-11 08:01:22 -04:00
parent b534318b95
commit 67dde68126
70 changed files with 1261 additions and 1288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/qml/Chat/Banners/LeftBanner.qml
View File

@@ -6,7 +6,6 @@ import "../../Base"
Banner {
property string userId: ""
readonly property var userInfo: users.find(userId)
color: theme.chat.leftBanner.background

34
src/qml/Chat/Chat.qml
View File

@@ -4,29 +4,26 @@
import QtQuick 2.12
import QtQuick.Layouts 1.12
import "../Base"
import "../utils.js" as Utils
HPage {
id: chatPage
property bool ready: roomInfo && ! roomInfo.loading
property string userId: ""
property string roomId: ""
property var roomInfo: null
property bool ready: roomInfo !== "waiting"
readonly property var roomInfo: Utils.getItem(
modelSources[["Room", userId]] || [], "room_id", roomId
) || "waiting"
onRoomInfoChanged: if (! roomInfo) { pageStack.showPage("Default") }
readonly property string userId: roomInfo.userId
readonly property string category: roomInfo.category
readonly property string roomId: roomInfo.roomId
readonly property var senderInfo: users.find(userId)
readonly property bool hasUnknownDevices: false
//category == "Rooms" ?
//Backend.clients.get(userId).roomHasUnknownDevices(roomId) : false
header: RoomHeader {
header: Loader {
id: roomHeader
displayName: roomInfo.displayName
topic: roomInfo.topic
source: ready ? "RoomHeader.qml" : ""
clip: height < implicitHeight
width: parent.width
@@ -37,18 +34,7 @@ HPage {
page.leftPadding: 0
page.rightPadding: 0
Loader {
Timer {
interval: 200
repeat: true
running: ! ready
onTriggered: {
let info = rooms.find(userId, category, roomId)
if (! info.loading) { roomInfo = Qt.binding(() => info) }
}
}
source: ready ? "ChatSplitView.qml" : "../Base/HBusyIndicator.qml"
Layout.fillWidth: ready

23
src/qml/Chat/ChatSplitView.qml
View File

@@ -28,25 +28,21 @@ HSplitView {
}
InviteBanner {
visible: category == "Invites"
inviterId: roomInfo.inviterId
id: inviteBanner
visible: Boolean(inviterId)
inviterId: chatPage.roomInfo.inviter_id
Layout.fillWidth: true
}
//UnknownDevicesBanner {
//visible: category == "Rooms" && hasUnknownDevices
//
//Layout.fillWidth: true
//}
SendBox {
id: sendBox
visible: category == "Rooms" && ! hasUnknownDevices
visible: ! inviteBanner.visible && ! leftBanner.visible
}
LeftBanner {
visible: category == "Left"
id: leftBanner
visible: chatPage.roomInfo.left
userId: chatPage.userId
Layout.fillWidth: true
@@ -56,7 +52,8 @@ HSplitView {
RoomSidePane {
id: roomSidePane
activeView: roomHeader.activeButton
activeView: roomHeader.item ? roomHeader.item.activeButton : null
property int oldWidth: width
onActiveViewChanged:
activeView ? restoreAnimation.start() : hideAnimation.start()
@@ -89,7 +86,9 @@ HSplitView {
collapsed: width < theme.controls.avatar.size + theme.spacing
property bool wasSnapped: false
property int referenceWidth: roomHeader.buttonsWidth
property int referenceWidth:
roomHeader.item ? roomHeader.item.buttonsWidth : 0
onReferenceWidthChanged: {
if (! chatSplitView.manuallyResized || wasSnapped) {
if (wasSnapped) { chatSplitView.manuallyResized = false }

11
src/qml/Chat/RoomHeader.qml
View File

@@ -6,9 +6,6 @@ import QtQuick.Layouts 1.12
import "../Base"
HRectangle {
property string displayName: ""
property string topic: ""
property alias buttonsImplicitWidth: viewButtons.implicitWidth
property int buttonsWidth: viewButtons.Layout.preferredWidth
property var activeButton: "members"
@@ -29,14 +26,14 @@ HRectangle {
HRoomAvatar {
id: avatar
userId: chatPage.userId
roomId: chatPage.roomId
displayName: chatPage.roomInfo.display_name
avatarUrl: chatPage.roomInfo.avatar_url
Layout.alignment: Qt.AlignTop
}
HLabel {
id: roomName
text: displayName
text: chatPage.roomInfo.display_name
font.pixelSize: theme.fontSize.big
color: theme.chat.roomHeader.name
elide: Text.ElideRight
@@ -53,7 +50,7 @@ HRectangle {
HLabel {
id: roomTopic
text: topic
text: chatPage.roomInfo.topic
font.pixelSize: theme.fontSize.small
color: theme.chat.roomHeader.topic
elide: Text.ElideRight

9
src/qml/Chat/RoomSidePane/MemberDelegate.qml
View File

@@ -4,14 +4,13 @@
import QtQuick 2.12
import QtQuick.Layouts 1.12
import "../../Base"
import "../../utils.js" as Utils
HInteractiveRectangle {
id: memberDelegate
width: memberList.width
height: childrenRect.height
property var memberInfo: users.find(model.userId)
Row {
width: parent.width - leftPadding * 2
padding: roomSidePane.currentSpacing / 2
@@ -24,7 +23,9 @@ HInteractiveRectangle {
HUserAvatar {
id: avatar
userId: model.userId
userId: model.user_id
displayName: model.display_name
avatarUrl: model.avatar_url
}
HColumnLayout {
@@ -32,7 +33,7 @@ HInteractiveRectangle {
HLabel {
id: memberName
text: memberInfo.displayName || model.userId
text: model.display_name || model.user_id
elide: Text.ElideRight
verticalAlignment: Qt.AlignVCenter

23
src/qml/Chat/RoomSidePane/MembersView.qml
View File

@@ -3,7 +3,6 @@
import QtQuick 2.12
import QtQuick.Layouts 1.12
import SortFilterProxyModel 0.2
import "../../Base"
import "../../utils.js" as Utils
@@ -13,23 +12,11 @@ HColumnLayout {
bottomMargin: currentSpacing
model: HListModel {
sourceModel: chatPage.roomInfo.members
proxyRoles: ExpressionRole {
name: "displayName"
expression: users.find(userId).displayName || userId
}
sorters: StringSorter {
roleName: "displayName"
}
filters: ExpressionFilter {
function filterIt(filter, text) {
return Utils.filterMatches(filter, text)
}
expression: filterIt(filterField.text, displayName)
}
keyField: "user_id"
source: Utils.filterModelSource(
modelSources[["Member", chatPage.roomId]] || [],
filterField.text
)
}
delegate: MemberDelegate {}

15
src/qml/Chat/SendBox.qml
View File

@@ -4,6 +4,7 @@
import QtQuick 2.12
import QtQuick.Layouts 1.12
import "../Base"
import "../utils.js" as Utils
HRectangle {
function setFocus() { areaScrollView.forceActiveFocus() }
@@ -11,9 +12,12 @@ HRectangle {
property string indent: " "
property var aliases: window.settings.writeAliases
property string writingUserId: chatPage.userId
property string toSend: ""
property string writingUserId: chatPage.userId
readonly property var writingUserInfo:
Utils.getItem(modelSources["Account"] || [], "user_id", writingUserId)
property bool textChangedSinceLostFocus: false
property alias textArea: areaScrollView.area
@@ -57,6 +61,8 @@ HRectangle {
HUserAvatar {
id: avatar
userId: writingUserId
displayName: writingUserInfo.display_name
avatarUrl: writingUserInfo.avatar_url
}
HScrollableTextArea {
@@ -166,6 +172,13 @@ HRectangle {
})
area.Keys.onPressed.connect(event => {
if (event.modifiers == Qt.MetaModifier) {
// Prevent super+key from sending the key as text
// on xwayland
event.accepted = true
return
}
if (event.modifiers == Qt.NoModifier &&
event.key == Qt.Key_Backspace &&
! textArea.selectedText)

10
src/qml/Chat/Timeline/EventContent.qml
View File

@@ -19,7 +19,9 @@ Row {
HUserAvatar {
id: avatar
userId: model.senderId
userId: model.sender_id
displayName: model.sender_name
avatarUrl: model.sender_avatar
width: hideAvatar ? 0 : 48
height: hideAvatar ? 0 : collapseAvatar ? 1 : 48
}
@@ -52,8 +54,8 @@ Row {
width: parent.width
visible: ! hideNameLine
text: senderInfo.displayName || model.senderId
color: Utils.nameColor(avatar.name)
text: Utils.coloredNameHtml(model.sender_name, model.sender_id)
textFormat: Text.StyledText
elide: Text.ElideRight
horizontalAlignment: onRight ? Text.AlignRight : Text.AlignLeft
@@ -74,7 +76,7 @@ Row {
Qt.formatDateTime(model.date, "hh:mm:ss") +
"</font>" +
// local echo icon
(model.isLocalEcho ?
(model.is_local_echo ?
"&nbsp;<font size=" + theme.fontSize.small +
"px>⏳</font>" : "")

14
src/qml/Chat/Timeline/EventDelegate.qml
View File

@@ -18,9 +18,7 @@ Column {
nextItem = eventList.model.get(model.index - 1)
}
property var senderInfo: senderInfo = users.find(model.senderId)
property bool isOwn: chatPage.userId === model.senderId
property bool isOwn: chatPage.userId === model.sender_id
property bool onRight: eventList.ownEventsOnRight && isOwn
property bool combine: eventList.canCombine(previousItem, model)
property bool talkBreak: eventList.canTalkBreak(previousItem, model)
@@ -28,22 +26,22 @@ Column {
readonly property bool smallAvatar:
eventList.canCombine(model, nextItem) &&
(model.eventType == "RoomMessageEmote" ||
! model.eventType.startsWith("RoomMessage"))
(model.event_type == "RoomMessageEmote" ||
! model.event_type.startsWith("RoomMessage"))
readonly property bool collapseAvatar: combine
readonly property bool hideAvatar: onRight
readonly property bool hideNameLine:
model.eventType == "RoomMessageEmote" ||
! model.eventType.startsWith("RoomMessage") ||
model.event_type == "RoomMessageEmote" ||
! model.event_type.startsWith("RoomMessage") ||
onRight ||
combine
width: eventList.width
topPadding:
model.eventType == "RoomCreateEvent" ? 0 :
model.event_type == "RoomCreateEvent" ? 0 :
dayBreak ? theme.spacing * 4 :
talkBreak ? theme.spacing * 6 :
combine ? theme.spacing / 2 :

35
src/qml/Chat/Timeline/EventList.qml
View File

@@ -2,7 +2,6 @@
// This file is part of harmonyqml, licensed under LGPLv3.
import QtQuick 2.12
import SortFilterProxyModel 0.2
import "../../Base"
import "../../utils.js" as Utils
@@ -22,7 +21,7 @@ HRectangle {
return Boolean(
! canTalkBreak(item, itemAfter) &&
! canDayBreak(item, itemAfter) &&
item.senderId === itemAfter.senderId &&
item.sender_id === itemAfter.sender_id &&
Utils.minutesBetween(item.date, itemAfter.date) <= 5
)
}
@@ -42,18 +41,15 @@ HRectangle {
}
return Boolean(
itemAfter.eventType == "RoomCreateEvent" ||
itemAfter.event_type == "RoomCreateEvent" ||
item.date.getDate() != itemAfter.date.getDate()
)
}
model: HListModel {
sourceModel: timelines
filters: ValueFilter {
roleName: "roomId"
value: chatPage.roomId
}
keyField: "client_id"
source:
modelSources[["Event", chatPage.userId, chatPage.roomId]] || []
}
property bool ownEventsOnRight:
@@ -76,23 +72,20 @@ HRectangle {
// Declaring this as "alias" provides the on... signal
property real yPos: visibleArea.yPosition
property bool canLoad: true
// property int zz: 0
onYPosChanged: Qt.callLater(loadPastEvents)
onYPosChanged: {
if (chatPage.category != "Invites" && canLoad && yPos <= 0.1) {
// zz += 1
// print(canLoad, zz)
eventList.canLoad = false
py.callClientCoro(
chatPage.userId, "load_past_events", [chatPage.roomId],
moreToLoad => { eventList.canLoad = moreToLoad }
)
}
function loadPastEvents() {
if (chatPage.invited_id || ! canLoad || yPos > 0.1) { return }
eventList.canLoad = false
py.callClientCoro(
chatPage.userId, "load_past_events", [chatPage.roomId],
moreToLoad => { eventList.canLoad = moreToLoad }
)
}
}
HNoticePage {
text: qsTr("Nothing to show here yet...")
text: qsTr("Nothing here yet...")
visible: eventList.model.count < 1
anchors.fill: parent

27
src/qml/Chat/TypingMembersBar.qml
View File

@@ -11,31 +11,42 @@ HRectangle {
property alias label: typingLabel
color: theme.chat.typingMembers.background
implicitHeight: typingLabel.text ? typingLabel.height : 0
implicitHeight: typingLabel.text ? rowLayout.height : 0
Behavior on implicitHeight { HNumberAnimation {} }
HRowLayout {
id: rowLayout
spacing: theme.spacing
anchors.fill: parent
Layout.leftMargin: spacing
Layout.rightMargin: spacing
Layout.topMargin: spacing / 4
Layout.bottomMargin: spacing / 4
HIcon {
id: icon
svgName: "typing" // TODO: animate
height: typingLabel.height
Layout.fillHeight: true
Layout.leftMargin: rowLayout.spacing / 2
}
HLabel {
id: typingLabel
text: chatPage.roomInfo.typingText
textFormat: Text.StyledText
elide: Text.ElideRight
text: {
let tm = chatPage.roomInfo.typing_members
if (tm.length == 0) return ""
if (tm.length == 1) return qsTr("%1 is typing...").arg(tm[0])
return qsTr("%1 and %2 are typing...")
.arg(tm.slice(0, -1).join(", ")).arg(tm.slice(-1)[0])
}
Layout.fillWidth: true
Layout.fillHeight: true
Layout.topMargin: rowLayout.spacing / 4
Layout.bottomMargin: rowLayout.spacing / 4
Layout.leftMargin: rowLayout.spacing / 2
Layout.rightMargin: rowLayout.spacing / 2
}
}
}