split preview view out of UnknownRoomView into WorldReadableRoomView and re-render the middle for WorldReadableRoomView to take over

Author: ashfame

src/domain/session/SessionViewModel.js

@@ -236,7 +236,13 @@ export class SessionViewModel extends ViewModel {
             roomIdOrAlias,
             session: this._client.session,
         }));
-        void roomVM.load();
+        roomVM.load().then(() => {
+            if (roomVM.previewPossible) {
+                console.log('emitting middle');
+                this.emitChange("activeMiddleViewModel");
+                this.emitChange();
+            }
+        });
         return roomVM;
     }
 

src/domain/session/room/UnknownRoomViewModel.js

@@ -64,7 +64,7 @@ export class UnknownRoomViewModel extends ViewModel {
     // matrix.org can choose not to return messages for a world_readable room
     // so this getter is used to render the correct view, if it's possible to preview the room right now
     get previewPossible() {
-        return this._worldReadable && this._room;
+        return this._worldReadable && !! this._room;
     }
 
     get checkingPreviewCapability() {

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

@@ -17,7 +17,7 @@ limitations under the License.
 
 import {LeftPanelView} from "./leftpanel/LeftPanelView.js";
 import {RoomView} from "./room/RoomView.js";
-import {UnknownRoomView} from "./room/UnknownRoomView.js";
+import {UnknownRoomView, WorldReadableRoomView} from "./room/UnknownRoomView.js";
 import {RoomBeingCreatedView} from "./room/RoomBeingCreatedView.js";
 import {InviteView} from "./room/InviteView.js";
 import {LightboxView} from "./room/LightboxView.js";
@@ -60,6 +60,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 === "worldReadableRoom") {
+                        return new WorldReadableRoomView(vm.currentRoomViewModel);
                     } else {
                         return new UnknownRoomView(vm.currentRoomViewModel);
                     }

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

@@ -27,62 +27,59 @@ export class UnknownRoomView extends TemplateView {
         super(vm);
     }
 
-    regularView(vm, t) {
-        return new InlineTemplateView(vm, (t, m) => {
-            return t.div([
-                t.h2([
-                    vm.i18n`You are currently not in ${vm.roomIdOrAlias}.`,
-                    t.br(),
-                    vm.i18n`Want to join it?`
-                ]),
-                t.button({
-                    className: "button-action primary",
-                    onClick: () => vm.join(),
-                    disabled: vm => vm.busy,
-                }, vm.i18n`Join room`),
+    render(t, vm) {
+        return t.div({className: "UnknownRoomView middle"}, [
+            t.h2([
+                vm.i18n`You are currently not in ${vm.roomIdOrAlias}.`,
                 t.br(),
-                t.if(vm => vm.checkingPreviewCapability, t => t.div({className: "checkingPreviewCapability"}, [
-                    spinner(t),
-                    t.p(vm.i18n`Checking preview capability...`)
-                ])),
-                t.if(vm => vm.error, t => t.p({className: "error"}, vm.error))
-            ]);
-        });
+                vm.i18n`Want to join it?`
+            ]),
+            t.button({
+                className: "button-action primary",
+                onClick: () => vm.join(),
+                disabled: vm => vm.busy,
+            }, vm.i18n`Join room`),
+            t.br(),
+            t.if(vm => vm.checkingPreviewCapability, t => t.div({className: "checkingPreviewCapability"}, [
+                spinner(t),
+                t.p(vm.i18n`Checking preview capability...`)
+            ])),
+            t.if(vm => vm.error, t => t.p({className: "error"}, vm.error))
+        ]);
     }
+}
 
-    previewView(vm, t) {
-        return new InlineTemplateView(vm, (t, m) => {
-            return t.div({className: "RoomView WorldReadableRoomView"}, [
-                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, viewClassForTile) :
-                            new TimelineLoadingView(vm);    // vm is just needed for i18n
-                    }),
-                    t.div({className: "WorldReadableRoomComposerView"}, [
-                        t.h3(vm => vm.i18n`Join the room to participate`),
-                        t.button({className: "joinRoomButton", onClick: () => vm.join()}, vm.i18n`Join Room`)
-                    ])
-                ])
-            ]);
-        });
+export class WorldReadableRoomView extends TemplateView {
+
+    constructor(vm) {
+        super(vm);
     }
 
     render(t, vm) {
-        return t.main({className: "UnknownRoomView middle"}, t.mapView(vm => vm.kind, kind => {
-            return vm.previewPossible ? this.previewView(vm, t) : this.regularView(vm, t);
-        }));
+        return t.div({className: "RoomView WorldReadableRoomView 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, viewClassForTile) :
+                        new TimelineLoadingView(vm);    // vm is just needed for i18n
+                }),
+                t.div({className: "WorldReadableRoomComposerView"}, [
+                    t.h3(vm => vm.i18n`Join the room to participate`),
+                    t.button({className: "joinRoomButton", onClick: () => vm.join()}, vm.i18n`Join Room`)
+                ])
+            ])
+        ]);
     }
 }