WIP: Make the lightbox open, not working yet

src/domain/navigation/URLRouter.js

@@ -36,6 +36,7 @@ export class URLRouter {
     }
 
     attach() {
+        console.log('attach');
         this._subscription = this._history.subscribe(url => this._applyUrl(url));
         // subscribe to path before applying initial url
         // so redirects in _applyNavPathToHistory are reflected in url bar
@@ -75,6 +76,7 @@ export class URLRouter {
     }
 
     _applyUrl(url) {
+        console.log('URLRouter _applyUrl', url);
         const navPath = this._urlAsNavPath(url);
         this._applyNavPathToNavigation(navPath);
     }

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";
@@ -81,12 +81,7 @@ export class SessionViewModel extends ViewModel {
         }));
         this._updateCreateRoom(createRoom.get());
 
-        const lightbox = this.navigation.observe("lightbox");
+        setupLightboxNavigation(this, 'lightboxViewModel');
-        this.track(lightbox.subscribe(eventId => {
-            this._updateLightbox(eventId);
-        }));
-        this._updateLightbox(lightbox.get());
-
 
         const rightpanel = this.navigation.observe("right-panel");
         this.track(rightpanel.subscribe(() => this._updateRightPanel()));
@@ -267,21 +262,6 @@ export class SessionViewModel extends ViewModel {
         this.emitChange("activeMiddleViewModel");
     }
 
-    _updateLightbox(eventId) {
-        if (this._lightboxViewModel) {
-            this._lightboxViewModel = this.disposeTracked(this._lightboxViewModel);
-        }
-        if (eventId) {
-            const room = this._roomFromNavigation();
-            this._lightboxViewModel = this.track(new LightboxViewModel(this.childOptions({eventId, room})));
-        }
-        this.emitChange("lightboxViewModel");
-    }
-
-    get lightboxViewModel() {
-        return this._lightboxViewModel;
-    }
-
     _roomFromNavigation() {
         const roomId = this.navigation.path.get("room")?.value;
         const room = this._client.session.rooms.get(roomId);

src/domain/session/room/LightboxViewModel.js

@@ -23,17 +23,21 @@ export class LightboxViewModel extends ViewModel {
         this._unencryptedImageUrl = null;
         this._decryptedImage = null;
         this._closeUrl = this.urlCreator.urlUntilSegment("room");
-        this._eventEntry = null;
+        this._eventEntry = options.eventEntry;
         this._date = null;
         this._subscribeToEvent(options.room, options.eventId);
     }
 
     _subscribeToEvent(room, eventId) {
-        const eventObservable = room.observeEvent(eventId);
+        let event = this._eventEntry;
-        this.track(eventObservable.subscribe(eventEntry => {
+        if (!this._eventEntry) {
-            this._loadEvent(room, eventEntry);
+            const eventObservable = room.observeEvent(eventId);
-        }));
+            this.track(eventObservable.subscribe(eventEntry => {
-        this._loadEvent(room, eventObservable.get());
+                this._loadEvent(room, eventEntry);
+            }));
+            event = eventObservable.get();
+        }
+        this._loadEvent(room, event);
     }
 
     async _loadEvent(room, eventEntry) {

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

@@ -0,0 +1,31 @@
+import {LightboxViewModel} from "./LightboxViewModel.js";
+
+let lightboxViewModelSymbol = Symbol('lightboxViewModel');
+
+export function updateLightboxViewModel(vm, fieldName, eventId) {
+    if (vm[lightboxViewModelSymbol]) {
+        vm[lightboxViewModelSymbol] = vm.disposeTracked(vm[lightboxViewModelSymbol]);
+        vm.emitChange(fieldName);
+    }
+    if (eventId) {
+        const room = vm._roomFromNavigation();
+        vm[lightboxViewModelSymbol] = vm.track(new LightboxViewModel(vm.childOptions({eventId, room})));
+        vm.emitChange(fieldName);
+    }
+}
+
+// Whenever the page navigates somewhere, keep the lightboxViewModel up to date
+export function setupLightboxNavigation(vm, fieldName = 'lightboxViewModel') {
+    Object.defineProperty(vm, fieldName, {
+        get: function() {
+            vm[lightboxViewModelSymbol];
+        }
+    });
+
+    const lightbox = vm.navigation.observe("lightbox");
+    vm.track(lightbox.subscribe(eventId => {
+        updateLightboxViewModel(vm, fieldName, eventId);
+    }));
+    const initialLightBoxEventId = lightbox.get();
+    updateLightboxViewModel(vm, fieldName, initialLightBoxEventId);
+}

src/lib.ts

@@ -25,6 +25,8 @@ 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, updateLightboxViewModel} from "./domain/session/room/lightbox-navigation.js";
 export {RightPanelView} from "./platform/web/ui/session/rightpanel/RightPanelView.js";
 export {MediaRepository} from "./matrix/net/MediaRepository";
 export {TilesCollection} from "./domain/session/room/timeline/TilesCollection.js";