Peeking unknown rooms#1037
Conversation
…e by fetching messages and storing in the indexed db tables
…ligned with Matrix spec
Co-authored-by: Paulo Pinto <paulo.pinto@automattic.com>
…nd loading things async and updating view as we do This shows a spinner on UnknownRoomView stating "checking preview capability" and goes away when done and if room is world_readable, then renders the timeline with the last 100 messages
|
Related: #719 |
- UnknownRoomViewModel now receives a promise using which it can display a spinner to the user indicating we are checking whether the preview is possible for this room and updates the model to WorldReadableRoomViewModel - kind is now changed to "preview" for WorldReadableRooms - data stored is now deleted when navigating away to another room by clicking on it
|
@MidhunSureshR This is now finished and ready for your review :) |
MidhunSureshR
left a comment
There was a problem hiding this comment.
Doing an initial review; mostly looks good 👍
| if (room.isArchived) { | ||
| this._composerVM = this.track(new ArchivedViewModel(this.childOptions({archivedRoom: room}))); | ||
| } else { | ||
| } else if (!room.isWorldReadable) { |
There was a problem hiding this comment.
I don't see this property (isWorldReadable) added to Room anywhere?
| onClick: () => vm.join(), | ||
| disabled: vm => vm.busy, | ||
| }, vm.i18n`Join room`), | ||
| t.br(), |
There was a problem hiding this comment.
Can we use CSS to add some margin/padding instead of the br element?
| disabled: vm => vm.busy, | ||
| }, vm.i18n`Join room`), | ||
| t.br(), | ||
| t.if(vm => vm.checkingPreviewCapability, t => t.div({className: "checkingPreviewCapability"}, [ |
There was a problem hiding this comment.
| t.if(vm => vm.checkingPreviewCapability, t => t.div({className: "checkingPreviewCapability"}, [ | |
| t.if(vm => vm.checkingPreviewCapability, t => t.div({className: "UnknownRoomVIew__PreviewIndicator"}, [ |
Following BEM
| disabled: vm => vm.busy, | ||
| }, vm.i18n`Join room`), | ||
| t.br(), | ||
| t.if(vm => vm.checkingPreviewCapability, t => t.div({className: "checkingPreviewCapability"}, [ |
There was a problem hiding this comment.
| t.if(vm => vm.checkingPreviewCapability, t => t.div({className: "checkingPreviewCapability"}, [ | |
| t.if(vm => vm.checkingPreviewCapability, t => t.div({className: "UnknownRoomVIew__PreviewIndicator"}, [ |
Following BEM
| }); | ||
| } | ||
|
|
||
| async _fetchWorldReadableRoomEvents(roomId, limit = 30, dir = 'b', end = null, log = null) { |
There was a problem hiding this comment.
Can you add a typescript const enum for dir? You can add it in HomeSeverApi.
| log.set("id", roomId); | ||
| let options = { | ||
| limit: limit, | ||
| dir: 'b', |
There was a problem hiding this comment.
| dir: 'b', | |
| dir |
| 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; | ||
| } | ||
| } |
There was a problem hiding this comment.
We usually use for-of loops whenever possible. Also can you refactor the if-else ladder here into a switch-case?
| return new UnknownRoomViewModel(this.childOptions({ | ||
| roomIdOrAlias, | ||
| session: this._client.session, | ||
| isWorldReadablePromise: isWorldReadablePromise |
There was a problem hiding this comment.
| isWorldReadablePromise: isWorldReadablePromise | |
| isWorldReadablePromise |
| })); | ||
| } | ||
|
|
||
| async _createWorldReadableRoomViewModel(roomIdOrAlias) { |
There was a problem hiding this comment.
Is this method used anywhere?
👋 This PR introduces the preview/peeking functionality when you load an unknown room by directly going to the URL
http://localhost:3000/#/session/3442497412902854/room/!wOlkWNmgkAZFxbTaqj%3Amatrix.orgWhen you land on this page, we check whether the room supports preview/peeking i.e.
world_readablehistory visibility by showing a spinner in the UI:Then if the room isn't preview-able, the spinner goes away and we are left with Unknown Room View exactly how it is prior to this PR. But in case, if its possible to preview the room messages, we fetch the 100 most recent messages from the homeserver and store them in indexedDB tables (
timelineEventsandtimelineFragments) as they would have been stored via sync response for a regular room. On every page load, the old messages stored in both tables are deleted and freshly fetched 100 messages are shown. Also when you are navigating away from a room, by clicking on another room from left sidebar, we delete the data from both tables that were fetched in context of peeking.Currently back-scrolling works but it doesn't sync new messages i.e. doesn't show more messages as they come in, in the room. Also, the users are currently displayed as their matrix identity.
Looking forward to your review and happy to make any changes as needed to get this merged :)