TimelineView.qml

import QtQuick 2.9
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.2
import QtGraphicalEffects 1.0
import QtQuick.Window 2.2

import im.nheko 1.0
import im.nheko.EmojiModel 1.0

import "./delegates"
import "./emoji"

Page {
	id: timelineRoot

	property var colors: currentActivePalette
	property var systemInactive: SystemPalette { colorGroup: SystemPalette.Disabled }
	property var inactiveColors: currentInactivePalette ? currentInactivePalette : systemInactive
	property int avatarSize: 40
	property real highlightHue: colors.highlight.hslHue
	property real highlightSat: colors.highlight.hslSaturation
	property real highlightLight: colors.highlight.hslLightness

	palette: colors

	FontMetrics {
		id: fontMetrics
	}

	EmojiPicker {
		id: emojiPopup
		width: 7 * 52 + 20
		height: 6 * 52 
		colors: palette
		model: EmojiProxyModel {
			category: EmojiCategory.People
			sourceModel: EmojiModel {}
		}
	}

	Menu {
		id: messageContextMenu
		modal: true

		function show(eventId_, eventType_, isEncrypted_, showAt_, position) {
			eventId = eventId_
			eventType = eventType_
			isEncrypted = isEncrypted_

			if (position)
			popup(position, showAt_)
			else
			popup(showAt_)
		}

		property string eventId
		property int eventType
		property bool isEncrypted

		MenuItem {
			text: qsTr("React")
			onClicked: emojiPopup.show(messageContextMenu.parent, messageContextMenu.eventId)
		}
		MenuItem {
			text: qsTr("Reply")
			onClicked: chat.model.replyAction(messageContextMenu.eventId)
		}
		MenuItem {
			text: qsTr("Read receipts")
			onTriggered: chat.model.readReceiptsAction(messageContextMenu.eventId)
		}
		MenuItem {
			text: qsTr("Mark as read")
		}
		MenuItem {
			text: qsTr("View raw message")
			onTriggered: chat.model.viewRawMessage(messageContextMenu.eventId)
		}
		MenuItem {
			visible: messageContextMenu.isEncrypted
			height: visible ? implicitHeight : 0
			text: qsTr("View decrypted raw message")
			onTriggered: chat.model.viewDecryptedRawMessage(messageContextMenu.eventId)
		}
		MenuItem {
			text: qsTr("Redact message")
			onTriggered: chat.model.redactEvent(messageContextMenu.eventId)
		}
		MenuItem {
			visible: messageContextMenu.eventType == MtxEvent.ImageMessage || messageContextMenu.eventType == MtxEvent.VideoMessage || messageContextMenu.eventType == MtxEvent.AudioMessage || messageContextMenu.eventType == MtxEvent.FileMessage || messageContextMenu.eventType == MtxEvent.Sticker
			height: visible ? implicitHeight : 0
			text: qsTr("Save as")
			onTriggered: timelineManager.timeline.saveMedia(messageContextMenu.eventId)
		}
	}

	Rectangle {
		anchors.fill: parent
		color: colors.window

		Label {
			visible: !timelineManager.timeline && !timelineManager.isInitialSync
			anchors.centerIn: parent
			text: qsTr("No room open")
			font.pointSize: 24
			color: colors.text
		}

		BusyIndicator {
			visible: running
			anchors.centerIn: parent
			running: timelineManager.isInitialSync
			height: 200
			width: 200
			z: 3
		}

		ColumnLayout {
			anchors.fill: parent
			Rectangle {
				id: topBar

				Layout.fillWidth: true
				implicitHeight: topLayout.height + 16
				z: 3

				color: colors.base

				MouseArea {
					anchors.fill: parent
					onClicked: timelineManager.openRoomSettings();
				}

				GridLayout {
					id: topLayout

					anchors.left: parent.left
					anchors.right: parent.right
					anchors.margins: 8
					anchors.verticalCenter: parent.verticalCenter

					//Layout.margins: 8

					ImageButton {
						id: backToRoomsButton

						Layout.column: 0
						Layout.row: 0
						Layout.rowSpan: 2
						Layout.alignment: Qt.AlignVCenter

						visible: timelineManager.isNarrowView

						image: ":/icons/icons/ui/angle-pointing-to-left.png"

						ToolTip.visible: hovered
						ToolTip.text: qsTr("Back to room list")

						onClicked: timelineManager.backToRooms()
					}

					Avatar {
						Layout.column: 1
						Layout.row: 0
						Layout.rowSpan: 2
						Layout.alignment: Qt.AlignVCenter

						width: avatarSize
						height: avatarSize

						url: chat.model ? chat.model.roomAvatarUrl.replace("mxc://", "image://MxcImage/") : ""
						displayName: chat.model ? chat.model.roomName : qsTr("No room selected")

						MouseArea {
							anchors.fill: parent
							onClicked: timelineManager.openRoomSettings();
						}
					}

					Label {
						Layout.fillWidth: true
						Layout.column: 2
						Layout.row: 0

						font.pointSize: fontMetrics.font.pointSize * 1.1

						text: chat.model ? chat.model.roomName : qsTr("No room selected")

						MouseArea {
							anchors.fill: parent
							onClicked: timelineManager.openRoomSettings();
						}
					}
					MatrixText {
						Layout.fillWidth: true
						Layout.column: 2
						Layout.row: 1
						Layout.maximumHeight: fontMetrics.lineSpacing * 2 // show 2 lines
						clip: true

						text: chat.model ? chat.model.roomTopic : ""
					}

					ImageButton {
						id: roomOptionsButton

						Layout.column: 3
						Layout.row: 0
						Layout.rowSpan: 2
						Layout.alignment: Qt.AlignVCenter

						image: ":/icons/icons/ui/vertical-ellipsis.png"

						ToolTip.visible: hovered
						ToolTip.text: qsTr("Room options")

						onClicked: roomOptionsMenu.popup(roomOptionsButton)

						Menu {
							id: roomOptionsMenu
							MenuItem {
								text: qsTr("Invite users")
								onTriggered: timelineManager.openInviteUsersDialog();
							}
							MenuItem {
								text: qsTr("Members")
								onTriggered: timelineManager.openMemberListDialog();
							}
							MenuItem {
								text: qsTr("Leave room")
								onTriggered: timelineManager.openLeaveRoomDialog();
							}
							MenuItem {
								text: qsTr("Settings")
								onTriggered: timelineManager.openRoomSettings();
							}
						}
					}
				}
			}

		ListView {
			id: chat

			visible: !!timelineManager.timeline

			cacheBuffer: 400

			Layout.fillWidth: true
			Layout.fillHeight: true

			model: timelineManager.timeline

			boundsBehavior: Flickable.StopAtBounds

			ScrollHelper {
				flickable: parent
				anchors.fill: parent
			}

			pixelAligned: true

			Shortcut {
				sequence: StandardKey.MoveToPreviousPage
				onActivated: { chat.contentY = chat.contentY - chat.height / 2; chat.returnToBounds(); }
			}
			Shortcut {
				sequence: StandardKey.MoveToNextPage
				onActivated: { chat.contentY = chat.contentY + chat.height / 2; chat.returnToBounds(); }
			}
			Shortcut {
				sequence: StandardKey.Cancel
				onActivated: chat.model.reply = undefined
			}
			Shortcut {
				sequence: "Alt+Up"
				onActivated: chat.model.reply = chat.model.indexToId(chat.model.reply? chat.model.idToIndex(chat.model.reply) + 1 : 0)
			}
			Shortcut {
				sequence: "Alt+Down"
				onActivated: {
					var idx = chat.model.reply? chat.model.idToIndex(chat.model.reply) - 1 : -1
					chat.model.reply = idx >= 0 ? chat.model.indexToId(idx) : undefined
				}
			}

			ScrollBar.vertical: ScrollBar {
				id: scrollbar
			}

			spacing: 4
			verticalLayoutDirection: ListView.BottomToTop

			onCountChanged: if (atYEnd) model.currentIndex = 0 // Mark last event as read, since we are at the bottom

			property int delegateMaxWidth: (settings.timelineMaxWidth > 100 && (parent.width - settings.timelineMaxWidth) > scrollbar.width*2) ? settings.timelineMaxWidth : (parent.width - scrollbar.width*2)

			delegate: Item {
				// This would normally be previousSection, but our model's order is inverted.
				property bool sectionBoundary: (ListView.nextSection != "" && ListView.nextSection !== ListView.section) || model.index === chat.count - 1

				id: wrapper
				property Item section
				anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
				width: chat.delegateMaxWidth
				height: section ? section.height + timelinerow.height : timelinerow.height

				TimelineRow {
					id: timelinerow
					y: section ? section.y + section.height : 0
				}

				onSectionBoundaryChanged: {
					if (sectionBoundary) {
						var properties = {
							'modelData': model.dump,
							'section': ListView.section,
							'nextSection': ListView.nextSection
						}
						section = sectionHeader.createObject(wrapper, properties)
					} else {
						section.destroy()
						section = null
					}
				}

				Connections {
					target: chat
					function onMovementEnded() {
						if (y + height + 2 * chat.spacing > chat.contentY + chat.height && y < chat.contentY + chat.height)
							chat.model.currentIndex = index;
					}
				}
			}

			section {
				property: "section"
			}
			Component {
				id: sectionHeader
				Column {
					property var modelData
					property string section
					property string nextSection

					topPadding: 4
					bottomPadding: 4
					spacing: 8

					visible: !!modelData

					width: parent.width
					height: (section.includes(" ") ? dateBubble.height + 8 + userName.height : userName.height) + 8

					Label {
						id: dateBubble
						anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
						visible: section.includes(" ")
						text: chat.model.formatDateSeparator(modelData.timestamp)
						color: colors.text

                        height: fontMetrics.height * 1.4
                        width: contentWidth * 1.2

                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
						background: Rectangle {
							radius: parent.height / 2
							color: colors.base
						}
					}
					Row {
						height: userName.height
						spacing: 8

						Avatar {
							width: avatarSize
							height: avatarSize
							url: chat.model.avatarUrl(modelData.userId).replace("mxc://", "image://MxcImage/")
							displayName: modelData.userName
							userid: modelData.userId

							MouseArea {
								anchors.fill: parent
								onClicked: chat.model.openUserProfile(modelData.userId)
								cursorShape: Qt.PointingHandCursor
								propagateComposedEvents: true
							}
						}

						Label { 
							id: userName
							text: timelineManager.escapeEmoji(modelData.userName)
							color: timelineManager.userColor(modelData.userId, colors.window)
							textFormat: Text.RichText

							MouseArea {
								anchors.fill: parent
								onClicked: chat.model.openUserProfile(section.split(" ")[0])
								cursorShape: Qt.PointingHandCursor
								propagateComposedEvents: true
							}
						}

						Label {
							color: colors.buttonText
							text: timelineManager.userStatus(modelData.userId)
							textFormat: Text.PlainText
							elide: Text.ElideRight
							width: chat.delegateMaxWidth - parent.spacing*2 - userName.implicitWidth - avatarSize
							font.italic: true
						}
					}
				}
			}

			footer:  BusyIndicator {
				anchors.horizontalCenter: parent.horizontalCenter
				running: chat.model && chat.model.paginationInProgress
				height: 50
				width: 50
				z: 3
			}
		}

		Item {
			id: chatFooter

			implicitHeight: Math.max(fontMetrics.height * 1.2, footerContent.height)
			Layout.fillWidth: true
			z: 3

			Column {
				id: footerContent
				anchors.left: parent.left
				anchors.right: parent.right
				anchors.bottom: parent.bottom
                Rectangle {
                    id: typingRect
                    anchors.left: parent.left
                    anchors.right: parent.right
                    color: (chat.model && chat.model.typingUsers.length > 0) ? colors.window : "transparent"
                    height: typingDisplay.height
                    Label {
                        id: typingDisplay
                        anchors.left: parent.left
                        anchors.leftMargin: 10
                        anchors.right: parent.right
                        anchors.rightMargin: 10
                        color: colors.text
                        text: chat.model ? chat.model.formatTypingUsers(chat.model.typingUsers, colors.window) : ""
                        textFormat: Text.RichText
                    }
                }

				Rectangle {
					anchors.left: parent.left
					anchors.right: parent.right

					id: replyPopup

					visible: chat.model && chat.model.reply
					// Height of child, plus margins, plus border
					height: replyPreview.height + 10
					color: colors.base


					Reply {
						id: replyPreview

						anchors.left: parent.left
						anchors.leftMargin: 10
						anchors.right: closeReplyButton.left
						anchors.rightMargin: 20
						anchors.bottom: parent.bottom

						modelData: chat.model ? chat.model.getDump(chat.model.reply, chat.model.id) : {}
						userColor: timelineManager.userColor(modelData.userId, colors.window)
					}

					ImageButton {
						id: closeReplyButton

						anchors.right: parent.right
						anchors.rightMargin: 15
						anchors.top: replyPreview.top
						hoverEnabled: true
						width: 16
						height: 16

						image: ":/icons/icons/ui/remove-symbol.png"
						ToolTip.visible: closeReplyButton.hovered
						ToolTip.text: qsTr("Close")

						onClicked: chat.model.reply = undefined
					}
				}
			}
		}

		Rectangle {
			id: activeCallBar
			visible: timelineManager.callState != WebRTCState.DISCONNECTED

			Layout.fillWidth: true
			implicitHeight: topLayout.height + 16
			color: "#2ECC71"
			z: 3

			GridLayout {
				anchors.left: parent.left
				anchors.right: parent.right
				anchors.margins: 8
				anchors.verticalCenter: parent.verticalCenter

				Avatar {
					Layout.column: 1
					Layout.row: 0
					Layout.rowSpan: 2
					Layout.alignment: Qt.AlignVCenter

					width: avatarSize
					height: avatarSize

					url: chat.model ? chat.model.roomAvatarUrl.replace("mxc://", "image://MxcImage/") : ""
					displayName: chat.model ? chat.model.roomName : qsTr("No room selected")
				}

				Label {
					Layout.column: 2
					Layout.row: 0
					Layout.rowSpan: 2
					Layout.alignment: Qt.AlignVCenter

					font.pointSize: fontMetrics.font.pointSize * 1.1
					text: chat.model ? "  " + chat.model.roomName + " " : ""
				}

				Image {
					Layout.column: 3
					Layout.row: 0
					Layout.rowSpan: 2
					Layout.alignment: Qt.AlignVCenter
					Layout.preferredWidth: 23
					Layout.preferredHeight: 23
					source: "qrc:/icons/icons/ui/place-call.png"
				}

				Connections {
					target: timelineManager
					function onCallStateChanged(state) {
						switch (state) {
							case WebRTCState.INITIATING:
								callStateLabel.text = "Initiating call..."
								break;
							case WebRTCState.INITIATED:
								callStateLabel.text = "Call initiated..."
								break;
							case WebRTCState.OFFERSENT:
								callStateLabel.text = "Calling..."
								break;
							case WebRTCState.CONNECTING:
								callStateLabel.text = "Connecting..."
								break;
							case WebRTCState.CONNECTED:
								callStateLabel.text = "00:00"
								var d = new Date()
								callTimer.startTime = Math.floor(d.getTime() / 1000)
								break;
							}
					}
				 }

				Label {
					id: callStateLabel
					Layout.column: 4
					Layout.row: 0
					Layout.rowSpan: 2
					Layout.alignment: Qt.AlignVCenter
					font.pointSize: fontMetrics.font.pointSize * 1.1
				}

				Timer {
					id: callTimer
					property int startTime
					interval: 1000
					running: timelineManager.callState == WebRTCState.CONNECTED
					repeat: true
					onTriggered: {
						var d = new Date()
						let seconds = Math.floor(d.getTime() / 1000 - startTime)
						let s = Math.floor(seconds % 60)
						let m = Math.floor(seconds / 60) % 60
						let h = Math.floor(seconds / 3600)
						callStateLabel.text = (h ? (pad(h) + ":") : "") + pad(m) + ":" + pad(s)
					} 

					function pad(n) {
						return (n < 10) ? ("0" + n) : n
					}
				}

				Item {
					Layout.column: 5
					Layout.fillWidth: true
				}

				ImageButton {
					Layout.column: 6
					Layout.row: 0
					Layout.rowSpan: 2
					Layout.alignment: Qt.AlignVCenter

					width: 22
					height: 22
					src: "qrc:/icons/icons/ui/microphone-mute.png"

					hoverEnabled: true
					ToolTip.visible: hovered
					ToolTip.text: qsTr("Mute Mic")

					onClicked: {
						if (timelineManager.toggleMuteAudioSource()) {
							src = "qrc:/icons/icons/ui/microphone-unmute.png"
							ToolTip.text = qsTr("Unmute Mic")
						}
						else {
							src = "qrc:/icons/icons/ui/microphone-mute.png"
							ToolTip.text = qsTr("Mute Mic")
						}
					}
				}

				Item {
					Layout.column: 7
					implicitWidth: 16
				}
			}
		}
	}
	}
}