Peeking functionality

src/domain/session/SessionViewModel.js

@@ -218,11 +218,26 @@ export class SessionViewModel extends ViewModel {
         return null;
     }
 
-    _createUnknownRoomViewModel(roomIdOrAlias) {
-        return new UnknownRoomViewModel(this.childOptions({
+    async _createUnknownRoomViewModel(roomIdOrAlias) {
+        let roomId;
+        if ( roomIdOrAlias[0] !== "!" ) {
+            let response = await this._client._requestScheduler.hsApi.resolveRoomAlias(roomIdOrAlias).response();
+            roomId = response.room_id;
+        } else {
+            roomId = roomIdOrAlias;
+        }
+        const peekable = await this._client.session.canPeekInRoom(roomId);
+
+        let vm = new UnknownRoomViewModel(this.childOptions({
             roomIdOrAlias,
             session: this._client.session,
+            peekable: peekable
         }));
+        if (peekable) {
+            await vm.peek();
+        }
+
+        return vm;
     }
 
     async _createArchivedRoomViewModel(roomId) {

src/domain/session/room/UnknownRoomViewModel.js

@@ -15,21 +15,33 @@ limitations under the License.
 */
 
 import {ViewModel} from "../../ViewModel";
+import {TimelineViewModel} from "./timeline/TimelineViewModel";
+import {tileClassForEntry as defaultTileClassForEntry} from "./timeline/tiles/index";
+import {getAvatarHttpUrl} from "../../avatar";
 
 export class UnknownRoomViewModel extends ViewModel {
     constructor(options) {
         super(options);
-        const {roomIdOrAlias, session} = options;
+        const {roomIdOrAlias, session, peekable} = options;
         this._session = session;
         this.roomIdOrAlias = roomIdOrAlias;
+        this._peekable = peekable;
         this._error = null;
         this._busy = false;
     }
 
+    get peekable() {
+        return this._peekable;
+    }
+
     get error() {
         return this._error?.message;
     }
 
+    get room() {
+        return this._room;
+    }
+
     async join() {
         this._busy = true;
         this.emitChange("busy");
@@ -53,6 +65,38 @@ export class UnknownRoomViewModel extends ViewModel {
     }
 
     get kind() {
-        return "unknown";
+        return this._peekable ? "peekable" : "unknown";
+    }
+
+    get timelineViewModel() {
+        return this._timelineVM;
+    }
+
+    avatarUrl(size) {
+        return getAvatarHttpUrl(this._room.avatarUrl, size, this.platform, this._room.mediaRepository);
+    }
+
+    async peek() {
+        if ( !this._peekable ) {
+            return;
+        }
+        try {
+            this._room = await this._session.loadPeekableRoom(this.roomIdOrAlias);
+            const timeline = await this._room.openTimeline();
+            this._tileOptions = this.childOptions({
+                roomVM: this,
+                timeline,
+                tileClassForEntry: defaultTileClassForEntry,
+            });
+            this._timelineVM = this.track(new TimelineViewModel(this.childOptions({
+                tileOptions: this._tileOptions,
+                timeline,
+            })));
+            this.emitChange("timelineViewModel");
+        } catch (err) {
+            console.error(`room.openTimeline(): ${err.message}:\n${err.stack}`);
+            this._timelineError = err;
+            this.emitChange("error");
+        }
     }
 }

src/matrix/Session.js

@@ -46,6 +46,8 @@ import {
 } from "./ssss/index";
 import {SecretStorage} from "./ssss/SecretStorage";
 import {ObservableValue, RetainedObservableValue} from "../observable/ObservableValue";
+import {EventKey} from "./room/timeline/EventKey";
+import {createEventEntry} from "./room/timeline/persistence/common";
 
 const PICKLE_KEY = "DEFAULT_KEY";
 const PUSHER_KEY = "pusher";
@@ -585,6 +587,22 @@ export class Session {
         return room;
     }
 
+    /** @internal */
+    _createPeekableRoom(roomId) {
+        return new Room({
+            roomId,
+            getSyncToken: this._getSyncToken,
+            storage: this._storage,
+            emitCollectionChange: this._roomUpdateCallback,
+            hsApi: this._hsApi,
+            mediaRepository: this._mediaRepository,
+            pendingEvents: [],
+            user: this._user,
+            createRoomEncryption: this._createRoomEncryption,
+            platform: this._platform
+        });
+    }
+
     get invites() {
         return this._invites;
     }
@@ -942,12 +960,111 @@ export class Session {
         });
     }
 
+    loadPeekableRoom(roomId, log = null) {
+        return this._platform.logger.wrapOrRun(log, "loadPeekableRoom", async log => {
+            log.set("id", roomId);
+
+            const room = this._createPeekableRoom(roomId);
+            let response = await this._loadEventsPeekableRoom(roomId, 100, 'b', null, log);
+            // Note: response.end to be used in the next call for sync functionality
+
+            let summary = await this._preparePeekableRoomSummary(roomId, log);
+            const txn = await this._storage.readTxn([
+                this._storage.storeNames.timelineFragments,
+                this._storage.storeNames.timelineEvents,
+                this._storage.storeNames.roomMembers,
+            ]);
+            await room.load(summary, txn, log);
+
+            return room;
+        });
+    }
+
+    async _preparePeekableRoomSummary(roomId, log = null) {
+        return this._platform.logger.wrapOrRun(log, "preparePeekableRoomSummary", async log => {
+            log.set("id", roomId);
+
+            let summary = {};
+            const resp = await this._hsApi.currentState(roomId).response();
+            for ( let i=0; i<resp.length; i++ ) {
+                if ( resp[i].type === 'm.room.name') {
+                    summary["name"] = resp[i].content.name;
+                } else if ( resp[i].type === 'm.room.canonical_alias' ) {
+                    summary["canonicalAlias"] = resp[i].content.alias;
+                } else if ( resp[i].type === 'm.room.avatar' ) {
+                    summary["avatarUrl"] = resp[i].content.url;
+                }
+            }
+
+            return summary;
+        });
+    }
+
+    async _loadEventsPeekableRoom(roomId, limit = 30, dir = 'b', end = null, log = null) {
+        return this._platform.logger.wrapOrRun(log, "loadEventsPeekableRoom", async log => {
+            log.set("id", roomId);
+            let options = {
+                limit: limit,
+                dir: 'b',
+                filter: {
+                    lazy_load_members: true,
+                    include_redundant_members: true,
+                }
+            }
+            if (end !== null) {
+                options['from'] = end;
+            }
+
+            const response = await this._hsApi.messages(roomId, options, {log}).response();
+            log.set("/messages endpoint response", response);
+
+            const txn = await this._storage.readWriteTxn([
+                this._storage.storeNames.timelineFragments,
+                this._storage.storeNames.timelineEvents,
+            ]);
+
+            // clear old records for this room
+            txn.timelineFragments.removeAllForRoom(roomId);
+            txn.timelineEvents.removeAllForRoom(roomId);
+
+            // insert fragment and event records for this room
+            const fragment = {
+                roomId: roomId,
+                id: 0,
+                previousId: null,
+                nextId: null,
+                previousToken: response.start,
+                nextToken: null,
+            };
+            txn.timelineFragments.add(fragment);
+
+            let eventKey = EventKey.defaultLiveKey;
+            for (let i = 0; i < response.chunk.length; i++) {
+                if (i) {
+                    eventKey = eventKey.previousKey();
+                }
+                let txn = await this._storage.readWriteTxn([this._storage.storeNames.timelineEvents]);
+                let eventEntry = createEventEntry(eventKey, roomId, response.chunk[i]);
+                await txn.timelineEvents.tryInsert(eventEntry, log);
+            }
+
+            return response;
+        });
+    }
+
     joinRoom(roomIdOrAlias, log = null) {
         return this._platform.logger.wrapOrRun(log, "joinRoom", async log => {
             const body = await this._hsApi.joinIdOrAlias(roomIdOrAlias, {log}).response();
             return body.room_id;
         });
     }
+
+    canPeekInRoom(roomId, log = null) {
+        return this._platform.logger.wrapOrRun(log, "canPeekInRoom", async log => {
+            const body = await this._hsApi.state(roomId, 'm.room.history_visibility', '', {log}).response();
+            return body.history_visibility === 'world_readable';
+        });
+    }
 }
 
 export function tests() {

src/matrix/net/HomeServerApi.ts

@@ -129,6 +129,10 @@ export class HomeServerApi {
         return this._get("/sync", {since, timeout, filter}, undefined, options);
     }
 
+    resolveRoomAlias(roomAlias: string): IHomeServerRequest {
+        return this._unauthedRequest( "GET", this._url( `/directory/room/${encodeURIComponent(roomAlias)}`, CS_V3_PREFIX ) );
+    }
+
     context(roomId: string, eventId: string, limit: number, filter: string): IHomeServerRequest {
         return this._get(`/rooms/${encodeURIComponent(roomId)}/context/${encodeURIComponent(eventId)}`, {filter, limit});
     }
@@ -160,6 +164,10 @@ export class HomeServerApi {
         return this._get(`/rooms/${encodeURIComponent(roomId)}/state/${encodeURIComponent(eventType)}/${encodeURIComponent(stateKey)}`, {}, undefined, options);
     }
 
+    currentState(roomId: string): IHomeServerRequest {
+        return this._get(`/rooms/${encodeURIComponent(roomId)}/state`, {}, undefined);
+    }
+
     getLoginFlows(): IHomeServerRequest {
         return this._unauthedRequest("GET", this._url("/login"));
     }

src/platform/web/ui/css/themes/element/theme.css

@@ -950,7 +950,7 @@ button.link {
     width: 100%;
 }
 
-.DisabledComposerView {
+.DisabledComposerView, .PeekableRoomComposerView {
     padding: 12px;
     background-color: var(--background-color-secondary);
 }
@@ -977,6 +977,17 @@ button.link {
     width: 100%;
 }
 
+.PeekableRoomView .Timeline_message:hover > .Timeline_messageOptions{
+    display: none;
+}
+.PeekableRoomComposerView h3 {
+    display: inline-block;
+    margin: 0;
+}
+.PeekableRoomComposerView .joinRoomButton {
+    float: right;
+}
+
 .LoadingView {
     height: 100%;
     width: 100%;

src/platform/web/ui/session/SessionView.js

@@ -30,6 +30,7 @@ import {CreateRoomView} from "./CreateRoomView.js";
 import {RightPanelView} from "./rightpanel/RightPanelView.js";
 import {viewClassForTile} from "./room/common";
 import {JoinRoomView} from "./JoinRoomView";
+import {PeekableRoomView} from "./room/PeekableRoomView";
 
 export class SessionView extends TemplateView {
     render(t, vm) {
@@ -58,6 +59,8 @@ export class SessionView extends TemplateView {
                         return new RoomView(vm.currentRoomViewModel, viewClassForTile);
                     } else if (vm.currentRoomViewModel.kind === "roomBeingCreated") {
                         return new RoomBeingCreatedView(vm.currentRoomViewModel);
+                    } else if (vm.currentRoomViewModel.kind === "peekable") {
+                        return new PeekableRoomView(vm.currentRoomViewModel, viewClassForTile);
                     } else {
                         return new UnknownRoomView(vm.currentRoomViewModel);
                     }

src/platform/web/ui/session/room/PeekableRoomView.js

@@ -0,0 +1,41 @@
+import {TemplateView} from "../../general/TemplateView";
+import {TimelineView} from "./TimelineView";
+import {TimelineLoadingView} from "./TimelineLoadingView";
+import {AvatarView} from "../../AvatarView";
+
+export class PeekableRoomView extends TemplateView {
+
+    constructor(vm, viewClassForTile) {
+        super(vm);
+        this._viewClassForTile = viewClassForTile;
+    }
+
+    render(t, vm) {
+        return t.main({className: "RoomView PeekableRoomView middle"}, [
+            t.div({className: "RoomHeader middle-header"}, [
+                t.view(new AvatarView(vm, 32)),
+                t.div({className: "room-description"}, [
+                    t.h2(vm => vm.room.name),
+                ]),
+            ]),
+            t.div({className: "RoomView_body"}, [
+                t.div({className: "RoomView_error"}, [
+                    t.if(vm => vm.error, t => t.div(
+                        [
+                            t.p({}, vm => vm.error),
+                            t.button({ className: "RoomView_error_closerButton", onClick: evt => vm.dismissError(evt) })
+                        ])
+                    )]),
+                t.mapView(vm => vm.timelineViewModel, timelineViewModel => {
+                    return timelineViewModel ?
+                        new TimelineView(timelineViewModel, this._viewClassForTile) :
+                        new TimelineLoadingView(vm);    // vm is just needed for i18n
+                }),
+                t.div({className: "PeekableRoomComposerView"}, [
+                    t.h3(vm => vm.i18n`Join the room to participate`),
+                    t.button({className: "joinRoomButton", onClick: () => vm.join()}, vm.i18n`Join Room`)
+                ])
+            ])
+        ]);
+    }
+}

src/platform/web/ui/session/room/timeline/BaseMessageView.js

@@ -62,7 +62,7 @@ export class BaseMessageView extends TemplateView {
                 li.removeChild(li.querySelector(".Timeline_messageAvatar"));
                 li.removeChild(li.querySelector(".Timeline_messageSender"));
             } else if (!isContinuation && !this._isReplyPreview) {
-                const avatar = tag.a({href: vm.memberPanelLink, className: "Timeline_messageAvatar"}, [renderStaticAvatar(vm, 30)]);
+                const avatar = vm.options.peekable ? tag.div({className: "Timeline_messageAvatar"}, [renderStaticAvatar(vm, 30)]) : tag.a({href: vm.memberPanelLink, className: "Timeline_messageAvatar"}, [renderStaticAvatar(vm, 30)]);
                 const sender = tag.div({className: `Timeline_messageSender usercolor${vm.avatarColorNumber}`}, vm.displayName);
                 li.insertBefore(avatar, li.firstChild);
                 li.insertBefore(sender, li.firstChild);