show leave reason instead of composer for archived room

src/domain/session/room/RoomViewModel.js

@@ -29,7 +29,12 @@ export class RoomViewModel extends ViewModel {
         this._onRoomChange = this._onRoomChange.bind(this);
         this._timelineError = null;
         this._sendError = null;
+        this._composerVM = null;
+        if (room.isArchived) {
+            this._composerVM = new ArchivedViewModel(this.childOptions({archivedRoom: room}));
+        } else {
             this._composerVM = new ComposerViewModel(this);
+        }
         this._clearUnreadTimout = null;
         this._closeUrl = this.urlCreator.urlUntilSegment("session");
     }
@@ -54,7 +59,7 @@ export class RoomViewModel extends ViewModel {
     }
 
     async _clearUnreadAfterDelay() {
-        if (this._clearUnreadTimout) {
+        if (this._room.isArchived || this._clearUnreadTimout) {
             return;
         }
         this._clearUnreadTimout = this.clock.createTimeout(2000);
@@ -85,6 +90,9 @@ export class RoomViewModel extends ViewModel {
     // room doesn't tell us yet which fields changed,
     // so emit all fields originating from summary
     _onRoomChange() {
+        if (this._room.isArchived) {
+            this._composerVM.emitChange();
+        }
         this.emitChange();
     }
 
@@ -122,7 +130,7 @@ export class RoomViewModel extends ViewModel {
     }
     
     async _sendMessage(message) {
-        if (message) {
+        if (!this._room.isArchived && message) {
             try {
                 let msgtype = "m.text";
                 if (message.startsWith("/me ")) {
@@ -303,6 +311,10 @@ class ComposerViewModel extends ViewModel {
             this.emitChange("canSend");
         }
     }
+
+    get kind() {
+        return "composer";
+    }
 }
 
 function imageToInfo(image) {
@@ -319,3 +331,32 @@ function videoToInfo(video) {
     info.duration = video.duration;
     return info;
 }
+
+class ArchivedViewModel extends ViewModel {
+    constructor(options) {
+        super(options);
+        this._archivedRoom = options.archivedRoom;
+    }
+
+    get description() {
+        if (this._archivedRoom.isKicked) {
+            if (this._archivedRoom.kickReason) {
+                return this.i18n`You were kicked from the room by ${this._archivedRoom.kickedBy.name} because: ${this._archivedRoom.kickReason}`;
+            } else {
+                return this.i18n`You were kicked from the room by ${this._archivedRoom.kickedBy.name}.`;
+            }
+        } else if (this._archivedRoom.isBanned) {
+            if (this._archivedRoom.kickReason) {
+                return this.i18n`You were banned from the room by ${this._archivedRoom.kickedBy.name} because: ${this._archivedRoom.kickReason}`;
+            } else {
+                return this.i18n`You were banned from the room by ${this._archivedRoom.kickedBy.name}.`;
+            }
+        } else {
+            return this.i18n`You left this room`;
+        }
+    }
+
+    get kind() {
+        return "archived";
+    }
+}

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

@@ -897,3 +897,12 @@ button.link {
     display: block;
     width: 100%;
 }
+
+.RoomArchivedView {
+    padding: 12px;
+    background-color: rgba(245, 245, 245, 0.90);
+}
+
+.RoomArchivedView h3 {
+    margin: 0;
+}

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

@@ -0,0 +1,23 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {TemplateView} from "../../general/TemplateView.js";
+
+export class RoomArchivedView extends TemplateView {
+    render(t, vm) {
+        return t.div({className: "RoomArchivedView"}, t.h3(vm => vm.description));
+    }
+}

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

@@ -19,10 +19,17 @@ import {TemplateView} from "../../general/TemplateView.js";
 import {TimelineList} from "./TimelineList.js";
 import {TimelineLoadingView} from "./TimelineLoadingView.js";
 import {MessageComposer} from "./MessageComposer.js";
+import {RoomArchivedView} from "./RoomArchivedView.js";
 import {AvatarView} from "../../avatar.js";
 
 export class RoomView extends TemplateView {
     render(t, vm) {
+        let bottomView;
+        if (vm.composerViewModel.kind === "composer") {
+            bottomView = new MessageComposer(vm.composerViewModel);
+        } else if (vm.composerViewModel.kind === "archived") {
+            bottomView = new RoomArchivedView(vm.composerViewModel);
+        }
         return t.main({className: "RoomView middle"}, [
             t.div({className: "RoomHeader middle-header"}, [
                 t.a({className: "button-utility close-middle", href: vm.closeUrl, title: vm.i18n`Close room`}),
@@ -38,7 +45,7 @@ export class RoomView extends TemplateView {
                         new TimelineList(timelineViewModel) :
                         new TimelineLoadingView(vm);    // vm is just needed for i18n
                 }),
-                t.view(new MessageComposer(vm.composerViewModel)),
+                t.view(bottomView),
             ])
         ]);
     }