WIP: Make the lightbox open, not working yet

This commit is contained in:
Eric Eastwood 2022-06-07 17:16:58 -05:00
parent ae673862dc
commit 2d3b78b725
5 changed files with 47 additions and 28 deletions

View file

@ -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);
}

View file

@ -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);

View file

@ -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) {

View file

@ -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);
}

View file

@ -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";