diff --git a/src/domain/navigation/URLRouter.js b/src/domain/navigation/URLRouter.js index 586eec8a..81fc3113 100644 --- a/src/domain/navigation/URLRouter.js +++ b/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); } diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index a67df3a7..b3a63c9d 100644 --- a/src/domain/session/SessionViewModel.js +++ b/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"); - this.track(lightbox.subscribe(eventId => { - this._updateLightbox(eventId); - })); - this._updateLightbox(lightbox.get()); - + setupLightboxNavigation(this, 'lightboxViewModel'); 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); diff --git a/src/domain/session/room/LightboxViewModel.js b/src/domain/session/room/LightboxViewModel.js index 8ce8757a..527dfa5d 100644 --- a/src/domain/session/room/LightboxViewModel.js +++ b/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); - 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) { diff --git a/src/domain/session/room/lightbox-navigation.js b/src/domain/session/room/lightbox-navigation.js new file mode 100644 index 00000000..c56a04f4 --- /dev/null +++ b/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); +} diff --git a/src/lib.ts b/src/lib.ts index aa464d97..c15a8981 100644 --- a/src/lib.ts +++ b/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";