Draft: Scratch changes for matrix-public-archive

src/domain/ViewModel.ts

@@ -29,12 +29,14 @@ import type {ILogger} from "../logging/types";
 import type {Navigation} from "./navigation/Navigation";
 import type {SegmentType} from "./navigation/index";
 import type {IURLRouter} from "./navigation/URLRouter";
+import type {History} from "../platform/web/dom/History";
 
 export type Options<T extends object = SegmentType> = {
     platform: Platform;
     logger: ILogger;
     urlCreator: IURLRouter<T>;
     navigation: Navigation<T>;
+    history: History;
     emitChange?: (params: any) => void;
 }
 
@@ -145,4 +147,8 @@ export class ViewModel<N extends object = SegmentType, O extends Options<N> = Op
         // typescript needs a little help here
         return this._options.navigation as unknown as Navigation<N>;
     }
+
+    get history(): History {
+        return this._options.history;
+    }
 }

src/domain/navigation/index.ts

@@ -34,6 +34,8 @@ export type SegmentType = {
     "details": true;
     "members": true;
     "member": string;
+    "change-dates": true;
+    "developer-options": true;
 };
 
 export function createNavigation(): Navigation<SegmentType> {
@@ -56,9 +58,9 @@ function allowsChild(parent: Segment<SegmentType> | undefined, child: Segment<Se
             // downside of the approach: both of these will control which tile is selected
             return type === "room" || type === "empty-grid-tile";
         case "room":
-            return type === "lightbox" || type === "right-panel";
+            return type === "lightbox" || type === "right-panel" || type === "developer-options";
         case "right-panel":
-            return type === "details"|| type === "members" || type === "member";
+            return type === "details"|| type === "members" || type === "member" || type === "change-dates";
         case "logout":
             return type === "forced";
         default:
@@ -173,7 +175,7 @@ export function parseUrlPath(urlPath: string, currentNavPath: Path<SegmentType>,
             if (sessionSegment) {
                 segments.push(sessionSegment);
             }
-        } else if (type === "details" || type === "members") {
+        } else if (type === "details" || type === "members" || type === "change-dates") {
             pushRightPanelSegment(segments, type);
         } else if (type === "member") {
             const userId = iterator.next().value;

src/domain/session/SessionViewModel.js

@@ -20,7 +20,7 @@ import {RoomViewModel} from "./room/RoomViewModel.js";
 import {UnknownRoomViewModel} from "./room/UnknownRoomViewModel.js";
 import {InviteViewModel} from "./room/InviteViewModel.js";
 import {RoomBeingCreatedViewModel} from "./room/RoomBeingCreatedViewModel.js";
-import {LightboxViewModel} from "./room/LightboxViewModel.js";
+import {setupLightboxNavigation} from "./room/lightbox-navigation.js";
 import {SessionStatusViewModel} from "./SessionStatusViewModel.js";
 import {RoomGridViewModel} from "./RoomGridViewModel.js";
 import {SettingsViewModel} from "./settings/SettingsViewModel.js";
@@ -91,12 +91,12 @@ export class SessionViewModel extends ViewModel {
         }));
         this._updateJoinRoom(joinRoom.get());
 
-        const lightbox = this.navigation.observe("lightbox");
-        this.track(lightbox.subscribe(eventId => {
-            this._updateLightbox(eventId);
-        }));
-        this._updateLightbox(lightbox.get());
-
+        setupLightboxNavigation(this, 'lightboxViewModel', (eventId) => {
+            return {
+                room: this._roomFromNavigation(),
+                eventId,
+            };
+        });
 
         const rightpanel = this.navigation.observe("right-panel");
         this.track(rightpanel.subscribe(() => this._updateRightPanel()));

src/domain/session/room/LightboxViewModel.js

@@ -19,21 +19,25 @@ import {ViewModel} from "../../ViewModel";
 export class LightboxViewModel extends ViewModel {
     constructor(options) {
         super(options);
-        this._eventId = options.eventId;
+        this._eventEntry = options.eventEntry;
+        this._eventId = options.eventId || options.eventEntry.id;
         this._unencryptedImageUrl = null;
         this._decryptedImage = null;
         this._closeUrl = this.urlCreator.urlUntilSegment("room");
-        this._eventEntry = null;
         this._date = null;
         this._subscribeToEvent(options.room, options.eventId);
     }
 
     _subscribeToEvent(room, eventId) {
-        const eventObservable = room.observeEvent(eventId);
-        this.track(eventObservable.subscribe(eventEntry => {
-            this._loadEvent(room, eventEntry);
-        }));
-        this._loadEvent(room, eventObservable.get());
+        let event = this._eventEntry;
+        if (!this._eventEntry) {
+            const eventObservable = room.observeEvent(eventId);
+            this.track(eventObservable.subscribe(eventEntry => {
+                this._loadEvent(room, eventEntry);
+            }));
+            event = eventObservable.get();
+        }
+        this._loadEvent(room, event);
     }
 
     async _loadEvent(room, eventEntry) {
@@ -92,6 +96,6 @@ export class LightboxViewModel extends ViewModel {
     }
 
     close() {
-        this.platform.history.pushUrl(this.closeUrl);
+        this.history.pushUrl(this.closeUrl);
     }
 }

src/domain/session/room/RoomViewModel.js

@@ -50,6 +50,7 @@ export class RoomViewModel extends ViewModel {
         this._room.on("change", this._onRoomChange);
         try {
             const timeline = await this._room.openTimeline();
+            console.log('timeline', timeline.entries);
             this._tileOptions = this.childOptions({
                 roomVM: this,
                 timeline,

src/domain/session/room/lightbox-navigation.js

@@ -0,0 +1,69 @@
+/*
+Copyright 2022 Bruno Windels <bruno@windels.cloud>
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {LightboxViewModel} from "./LightboxViewModel.js";
+
+// Store the `LightboxViewModel` under a symbol so no one else can tamper with
+// it. This acts like a private field on the class since no one else has the
+// symbol to look it up.
+let lightboxViewModelSymbol = Symbol('lightboxViewModel');
+
+/**
+ * Destroys and creates a new the `LightboxViewModel` depending if
+ * `lightboxChildOptions.eventEntry` or `lightboxChildOptions.eventId` are
+ * provided.
+ */
+function updateLightboxViewModel(vm, fieldName, lightboxChildOptions) {
+    // Remove any existing `LightboxViewModel` before we assemble the new one below
+    if (vm[lightboxViewModelSymbol]) {
+        vm[lightboxViewModelSymbol] = vm.disposeTracked(vm[lightboxViewModelSymbol]);
+        // Let the `LightboxView` know that the `LightboxViewModel` has changed
+        vm.emitChange(fieldName);
+    }
+    // Create the new `LightboxViewModel` if the `eventEntry` exists directly or
+    // `eventId` which we can load from the store 
+    if (lightboxChildOptions.eventId || lightboxChildOptions.eventEntry) {
+        vm[lightboxViewModelSymbol] = vm.track(new LightboxViewModel(vm.childOptions(lightboxChildOptions)));
+        // Let the `LightboxView` know that the `LightboxViewModel` has changed
+        vm.emitChange(fieldName);
+    }
+}
+
+/**
+ * Handles updating the `LightboxViewModel` whenever the page URL changes and
+ * emits changes which the `LightboxView` will use to re-render. This is a
+ * composable piece of logic to call in an existing `ViewModel`'s constructor.
+ */
+export function setupLightboxNavigation(vm, fieldName = 'lightboxViewModel', lightboxChildOptionsFunction) {
+    // On the given `vm`, create a getter at `fieldName` that the
+    // `LightboxViewModel` is exposed at for usage in the view.
+    Object.defineProperty(vm, fieldName, {
+        get: function() {
+            return vm[lightboxViewModelSymbol];
+        }
+    });
+
+    // Whenever the page navigates somewhere, keep the `lightboxViewModel` up to date
+    const lightbox = vm.navigation.observe("lightbox");
+    vm.track(lightbox.subscribe(eventId => {
+        updateLightboxViewModel(vm, fieldName, lightboxChildOptionsFunction(eventId));
+    }));
+    // Also handle the case where the URL already includes `/lightbox/$eventId` (like
+    // from page-load)
+    const initialLightBoxEventId = lightbox.get();
+    updateLightboxViewModel(vm, fieldName, lightboxChildOptionsFunction(initialLightBoxEventId));
+}

src/domain/session/room/timeline/TimelineViewModel.js

@@ -47,9 +47,10 @@ export class TimelineViewModel extends ViewModel {
         this._requestedEndTile = null;
         this._requestScheduled = false;
         this._showJumpDown = false;
+        this._eventIdHighlighted = null;
     }
 
-    /** if this.tiles is empty, call this with undefined for both startTile and endTile */
+    /** if this._tiles is empty, call this with undefined for both startTile and endTile */
     setVisibleTileRange(startTile, endTile) {
         // don't clear these once done as they are used to check
         // for more tiles once loadAtTop finishes
@@ -96,6 +97,23 @@ export class TimelineViewModel extends ViewModel {
         }
     }
 
+    setEventHighlight(eventId, newHighlightValue) {
+        const eventEntry = this._timeline.getByEventId(eventId);
+        if (eventEntry) {
+            eventEntry.setIsHighlighted(newHighlightValue);
+
+            // If a new highlight, emit a change so we can scroll to this new highlight
+            if (newHighlightValue) {
+                this._eventIdHighlighted = eventId;
+                this.emitChange('eventIdHighlighted');
+            }
+        }
+    }
+
+    get eventIdHighlighted() {
+        return this._eventIdHighlighted;
+    }
+
     get tiles() {
         return this._tiles;
     }

src/domain/session/room/timeline/tiles/BaseMessageTile.js

@@ -49,6 +49,10 @@ export class BaseMessageTile extends SimpleTile {
         return `https://matrix.to/#/${encodeURIComponent(this.sender)}`;
     }
 
+    get eventId() {
+        return this._entry.id;
+    }
+
     get displayName() {
         return this._entry.displayName || this.sender;
     }
@@ -75,25 +79,29 @@ export class BaseMessageTile extends SimpleTile {
     }
 
     get avatarTitle() {
-        return this.displayName;
+        return this.sender;
     }
 
     get date() {
-        return this._date && this._date.toLocaleDateString({}, {month: "numeric", day: "numeric"});
+        return this._date && this._date.toLocaleDateString({}, {month: "numeric", day: "numeric", timeZone: 'UTC'});
     }
 
     get time() {
-        return this._date && this._date.toLocaleTimeString({}, {hour: "numeric", minute: "2-digit"});
+        return this._date && this._date.toLocaleTimeString({}, {hour: "numeric", minute: "2-digit", timeZone: 'UTC'});
     }
 
     get isOwn() {
-        return this._entry.sender === this._ownMember.userId;
+        return this._entry.sender === this._ownMember?.userId;
     }
 
     get isContinuation() {
         return this._isContinuation;
     }
 
+    get isHighlighted() {
+        return this._entry.isHighlighted;
+    }
+
     get isUnverified() {
         return this._entry.isUnverified;
     }

src/domain/session/room/timeline/tiles/SimpleTile.js

@@ -37,6 +37,10 @@ export class SimpleTile extends ViewModel {
         return false;
     }
 
+    get isHighlighted() {
+        return false;
+    }
+
     get hasDateSeparator() {
         return false;
     }

src/lib.ts

@@ -26,6 +26,18 @@ export {SessionViewModel} from "./domain/session/SessionViewModel.js";
 export {SessionView} from "./platform/web/ui/session/SessionView.js";
 export {RoomViewModel} from "./domain/session/room/RoomViewModel.js";
 export {RoomView} from "./platform/web/ui/session/room/RoomView.js";
+export {LightboxView} from "./platform/web/ui/session/room/LightboxView.js";
+export {setupLightboxNavigation} from "./domain/session/room/lightbox-navigation.js";
+export {RightPanelView} from "./platform/web/ui/session/rightpanel/RightPanelView.js";
+export {MediaRepository} from "./matrix/net/MediaRepository";
+export {HomeServerApi} from "./matrix/net/HomeServerApi";
+export {Storage} from "./matrix/storage/idb/Storage";
+export {StorageFactory} from "./matrix/storage/idb/StorageFactory";
+export {TilesCollection} from "./domain/session/room/timeline/TilesCollection.js";
+export {FragmentIdComparer} from "./matrix/room/timeline/FragmentIdComparer.js";
+export {EventEntry} from "./matrix/room/timeline/entries/EventEntry.js";
+export {encodeKey, decodeKey, encodeEventIdKey, decodeEventIdKey} from "./matrix/storage/idb/stores/TimelineEventStore";
+export {Timeline} from "./matrix/room/timeline/Timeline.js";
 export {TimelineViewModel} from "./domain/session/room/timeline/TimelineViewModel.js";
 export {tileClassForEntry} from "./domain/session/room/timeline/tiles/index";
 export type {TimelineEntry, TileClassForEntryFn, Options, TileConstructor} from "./domain/session/room/timeline/tiles/index";
@@ -63,12 +75,17 @@ export {TextMessageView} from "./platform/web/ui/session/room/timeline/TextMessa
 export {VideoView} from "./platform/web/ui/session/room/timeline/VideoView.js";
 
 export {Navigation} from "./domain/navigation/Navigation.js";
+export {URLRouter} from "./domain/navigation/URLRouter";
+export {History} from "./platform/web/dom/History.js";
 export {ComposerViewModel} from "./domain/session/room/ComposerViewModel.js";
 export {MessageComposer} from "./platform/web/ui/session/room/MessageComposer.js";
+export {text, tag} from "./platform/web/ui/general/html";
 export {TemplateView} from "./platform/web/ui/general/TemplateView";
+export {ListView} from "./platform/web/ui/general/ListView";
 export {ViewModel} from "./domain/ViewModel";
 export {LoadingView} from "./platform/web/ui/general/LoadingView.js";
 export {AvatarView} from "./platform/web/ui/AvatarView.js";
+export {avatarInitials, getIdentifierColorNumber} from "./domain/avatar"
 export {RoomType} from "./matrix/room/common";
 export {EventEmitter} from "./utils/EventEmitter";
 export {Disposables} from "./utils/Disposables";

src/matrix/room/timeline/Timeline.js

@@ -85,6 +85,7 @@ export class Timeline {
         const readerRequest = this._disposables.track(this._timelineReader.readFromEnd(20, txn, log));
         try {
             const entries = await readerRequest.complete();
+            console.log('entries', entries)
             this._loadContextEntriesWhereNeeded(entries);
             this._setupEntries(entries);
         } finally {
@@ -198,8 +199,10 @@ export class Timeline {
         if (!this._localEntries?.hasSubscriptions) {
             return;
         }
-        // find any local relations to this new remote event
-        for (const pee of this._localEntries) {
+        // find any local relations to these new remote events or maybe these
+        // new remote events reference one of the other new remote events we have.
+        const entryList = new ConcatList(entries, this._localEntries);
+        for (const pee of entryList) {
             // this will work because we set relatedEventId when removing remote echos
             if (pee.relatedEventId) {
                 const relationTarget = entries.find(e => e.id === pee.relatedEventId);

src/matrix/room/timeline/entries/EventEntry.js

@@ -22,6 +22,7 @@ export class EventEntry extends BaseEventEntry {
     constructor(eventEntry, fragmentIdComparer) {
         super(fragmentIdComparer);
         this._eventEntry = eventEntry;
+        this._isHighlighted = false;
         this._decryptionError = null;
         this._decryptionResult = null;
     }
@@ -76,6 +77,10 @@ export class EventEntry extends BaseEventEntry {
         return this._eventEntry.event.sender;
     }
 
+    get roomId() {
+        return this._eventEntry.event.room_id;
+    }
+
     get displayName() {
         return this._eventEntry.displayName;
     }
@@ -92,6 +97,14 @@ export class EventEntry extends BaseEventEntry {
         return this._eventEntry.event.event_id;
     }
 
+    get isHighlighted() {
+        return this._isHighlighted;
+    }
+
+    setIsHighlighted(newValue) {
+        this._isHighlighted = newValue;
+    }
+
     setDecryptionResult(result) {
         this._decryptionResult = result;
     }

src/matrix/room/timeline/persistence/TimelineReader.js

@@ -54,6 +54,7 @@ async function readRawTimelineEntriesWithTxn(roomId, eventKey, direction, amount
         } else {
             eventsWithinFragment = await timelineStore.eventsBefore(roomId, eventKey, amount);
         }
+        console.log('readRawTimelineEntriesWithTxn eventsWithinFragment', eventsWithinFragment)
         let eventEntries = eventsWithinFragment.map(e => new EventEntry(e, fragmentIdComparer));
         entries = directionalConcat(entries, eventEntries, direction);
         // prepend or append eventsWithinFragment to entries, and wrap them in EventEntry