Be able to load past room state (no UI yet)

src/js/Timeline.js

@@ -5,6 +5,10 @@ import {Anchor} from $to_relative "/js/Anchor.js"
 import * as lsm from $to_relative "/js/lsm.js"
 import {resolveMxc} from $to_relative "/js/functions.js"
 
+let debug = false
+
+const NO_MAX = Symbol("NO_MAX")
+
 const dateFormatter = Intl.DateTimeFormat("default", {hour: "numeric", minute: "numeric", day: "numeric", month: "short", year: "numeric"})
 
 let sentIndex = 0
@@ -13,10 +17,10 @@ function getTxnId() {
 	return Date.now() + (sentIndex++)
 }
 
-function eventSearch(list, event, min = 0, max = -1) {
+function eventSearch(list, event, min = 0, max = NO_MAX) {
 	if (list.length === 0) return {success: false, i: 0}
 
-	if (max === -1) max = list.length - 1
+	if (max === NO_MAX) max = list.length - 1
 	let mid = Math.floor((max + min) / 2)
 	// success condition
 	if (list[mid] && list[mid].data.event_id === event.data.event_id) return {success: true, i: mid}
@@ -78,8 +82,12 @@ class Event extends ElemJS {
 		} else if (this.data.type === "m.room.member") {
 			if (this.data.content.membership === "join") {
 				this.child(ejs("i").text("joined the room"))
-			} else {
+			} else if (this.data.content.membership === "invite") {
+				this.child(ejs("i").text(`invited ${this.data.content.displayname} to the room`))
+			} else if (this.data.content.membership === "leave") {
 				this.child(ejs("i").text("left the room"))
+			} else {
+				this.child(ejs("i").text("unknown membership event"))
 			}
 		} else if (this.data.type === "m.room.encrypted") {
 			this.child(ejs("i").text("Carbon does not yet support encrypted messages."))
@@ -178,10 +186,21 @@ class ReactiveTimeline extends ElemJS {
 	}
 
 	addEvent(event) {
+		// if (debug) console.log("running search", this.list, event)
+		// if (debug) debugger;
 		const search = eventSearch(this.list, event)
 		// console.log(search, this.list.map(l => l.data.sender), event.data)
-		if (!search.success && search.i >= 1) this.tryAddGroups(event, [search.i-1, search.i])
+		if (!search.success) {
-		else this.tryAddGroups(event, [search.i])
+			if (search.i >= 1) {
+				// add at end
+				this.tryAddGroups(event, [search.i-1, search.i])
+			} else {
+				// add at start
+				this.tryAddGroups(event, [0, -1])
+			}
+		} else {
+			this.tryAddGroups(event, [search.i])
+		}
 	}
 
 	tryAddGroups(event, indices) {
@@ -189,6 +208,10 @@ class ReactiveTimeline extends ElemJS {
 			if (!this.list[i]) {
 				// if (printed++ < 100) console.log("tryadd success, created group")
 				const group = new EventGroup(this, [event])
+				if (i === -1) {
+					// here, -1 means at the start, before the first group
+					i = 0 // jank but it does the trick
+				}
 				this.list.splice(i, 0, group)
 				this.childAt(i, group)
 				event.setGroup(group)
@@ -234,6 +257,8 @@ class Timeline extends Subscribable {
 		this.reactiveTimeline = new ReactiveTimeline(this.id, [])
 		this.latest = 0
 		this.pending = new Set()
+		this.pendingEdits = []
+		this.from = null
 	}
 
 	updateStateEvents(events) {
@@ -282,17 +307,8 @@ class Timeline extends Subscribable {
 				}
 				// handle edits
 				if (eventData.type === "m.room.message" && eventData.content["m.relates_to"] && eventData.content["m.relates_to"].rel_type === "m.replace") {
-					const replaces = eventData.content["m.relates_to"].event_id
+					this.pendingEdits.push(eventData)
-					if (this.map.has(replaces)) {
+					continue
-						const event = this.map.get(replaces)
-						event.data.content = eventData.content["m.new_content"]
-						event.setEdited(eventData.origin_server_ts)
-						event.update(event.data)
-						continue
-					} else {
-						// uhhhhhhh
-						console.error(`want to replace event ${replaces} with ${eventData.id} but replaced event not found`)
-					}
 				}
 				// add new event
 				const event = new Event(eventData)
@@ -300,6 +316,19 @@ class Timeline extends Subscribable {
 				this.reactiveTimeline.addEvent(event)
 			}
 		}
+		// apply edits
+		this.pendingEdits = this.pendingEdits.filter(eventData => {
+			const replaces = eventData.content["m.relates_to"].event_id
+			if (this.map.has(replaces)) {
+				const event = this.map.get(replaces)
+				event.data.content = eventData.content["m.new_content"]
+				event.setEdited(eventData.origin_server_ts)
+				event.update(event.data)
+				return false // handled; remove from list
+			} else {
+				return true // we don't have the event it edits yet; keep in list
+			}
+		})
 		this.broadcast("afterChange")
 	}
 
@@ -313,6 +342,25 @@ class Timeline extends Subscribable {
 		return this.reactiveTimeline
 	}
 
+	async loadScrollback() {
+		debug = true
+		if (!this.from) throw new Error("Can't load scrollback, no from token")
+		const url = new URL(`${lsm.get("domain")}/_matrix/client/r0/rooms/${this.id}/messages`)
+		url.searchParams.set("access_token", lsm.get("access_token"))
+		url.searchParams.set("from", this.from)
+		url.searchParams.set("dir", "b")
+		url.searchParams.set("limit", 10)
+		const filter = {
+			lazy_load_members: true
+		}
+		url.searchParams.set("filter", JSON.stringify(filter))
+		const root = await fetch(url.toString()).then(res => res.json())
+		this.from = root.end
+		console.log(this.updateEvents, root.chunk)
+		if (root.state) this.updateStateEvents(root.state)
+		this.updateEvents(root.chunk)
+	}
+
 	send(body) {
 		const tx = getTxnId()
 		const id = `pending$${tx}`

src/js/sync/sync.js

@@ -53,6 +53,7 @@ function manageSync(root) {
 			}
 			const room = store.rooms.get(id).value()
 			const timeline = room.timeline
+			if (!timeline.from) timeline.from = data.timeline.prev_batch
 			if (data.timeline.events.length) newEvents = true
 			timeline.updateStateEvents(data.state.events)
 			timeline.updateEvents(data.timeline.events)