WIP: Render the whole view instead of messageBody

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

@@ -17,7 +17,7 @@ limitations under the License.
 import {TemplateView} from "../../general/TemplateView";
 import {Popup} from "../../general/Popup.js";
 import {Menu} from "../../general/Menu.js";
-import {viewClassForEntry} from "./TimelineView"
+import {viewClassForEntry} from "./common"
 
 export class MessageComposer extends TemplateView {
     constructor(viewModel) {

src/platform/web/ui/session/room/TimelineView.ts

@@ -27,6 +27,7 @@ import {AnnouncementView} from "./timeline/AnnouncementView.js";
 import {RedactedView} from "./timeline/RedactedView.js";
 import {SimpleTile} from "../../../../../domain/session/room/timeline/tiles/SimpleTile.js";
 import {BaseObservableList as ObservableList} from "../../../../../observable/list/BaseObservableList";
+import {viewClassForEntry} from "./common";
 
 //import {TimelineViewModel} from "../../../../../domain/session/room/timeline/TimelineViewModel.js";
 export interface TimelineViewModel extends IObservableValue {
@@ -35,25 +36,9 @@ export interface TimelineViewModel extends IObservableValue {
     setVisibleTileRange(start?: SimpleTile, end?: SimpleTile);
 }
 
-type TileView = GapView | AnnouncementView | TextMessageView |
+export type TileView = GapView | AnnouncementView | TextMessageView |
     ImageView | VideoView | FileView | MissingAttachmentView | RedactedView;
-type TileViewConstructor = (this: TileView, SimpleTile) => void;
 
-export function viewClassForEntry(entry: SimpleTile): TileViewConstructor | undefined {
-    switch (entry.shape) {
-        case "gap": return GapView;
-        case "announcement": return AnnouncementView;
-        case "message":
-        case "message-status":
-            return TextMessageView;
-        case "image": return ImageView;
-        case "video": return VideoView;
-        case "file": return FileView;
-        case "missing-attachment": return MissingAttachmentView;
-        case "redacted":
-            return RedactedView;
-    }
-}
 
 function bottom(node: HTMLElement): number {
     return node.offsetTop + node.clientHeight;

src/platform/web/ui/session/room/common.ts

@@ -0,0 +1,43 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+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 {TextMessageView} from "./timeline/TextMessageView.js";
+import {ImageView} from "./timeline/ImageView.js";
+import {VideoView} from "./timeline/VideoView.js";
+import {FileView} from "./timeline/FileView.js";
+import {MissingAttachmentView} from "./timeline/MissingAttachmentView.js";
+import {AnnouncementView} from "./timeline/AnnouncementView.js";
+import {RedactedView} from "./timeline/RedactedView.js";
+import {SimpleTile} from "../../../../../domain/session/room/timeline/tiles/SimpleTile.js";
+import {GapView} from "./timeline/GapView.js";
+import type {TileView} from "./TimelineView";
+
+type TileViewConstructor = (this: TileView, SimpleTile) => void;
+export function viewClassForEntry(entry: SimpleTile): TileViewConstructor | undefined {
+    switch (entry.shape) {
+        case "gap": return GapView;
+        case "announcement": return AnnouncementView;
+        case "message":
+        case "message-status":
+            return TextMessageView;
+        case "image": return ImageView;
+        case "video": return VideoView;
+        case "file": return FileView;
+        case "missing-attachment": return MissingAttachmentView;
+        case "redacted":
+            return RedactedView;
+    }
+}

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

@@ -54,7 +54,7 @@ export class BaseMessageView extends TemplateView {
             if (isContinuation && wasContinuation === false) {
                 li.removeChild(li.querySelector(".Timeline_messageAvatar"));
                 li.removeChild(li.querySelector(".Timeline_messageSender"));
-            } else if (!isContinuation) {
+            } else if (!isContinuation && this._interactive) {
                 const avatar = 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);

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

@@ -16,7 +16,7 @@ limitations under the License.
 
 import {renderStaticAvatar} from "../../../avatar";
 import {TemplateView} from "../../../general/TemplateView";
-import {viewClassForEntry} from "../TimelineView";
+import {viewClassForEntry} from "../common";
 
 export class ReplyPreviewView extends TemplateView {
     render(t, vm) {
@@ -26,8 +26,9 @@ export class ReplyPreviewView extends TemplateView {
     _renderReplyPreview(t, vm) {
         // todo: this should probably be called viewClassForTile instead
         const viewClass = viewClassForEntry(vm);
-        const view = new viewClass(vm)
-        const rendered = this._renderContent(t, vm, view);
+        const view = new viewClass(vm, false)
+        // const rendered = this._renderContent(t, vm, view);
+        const rendered = view.render(t, vm);
         return this._renderReplyHeader(t, vm, [rendered]);
     }