change renderMessage fn to base class

as preparation to create menu items in subclasses

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

@@ -14,11 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {TemplateView} from "../../../general/TemplateView.js";
+import {BaseMessageView} from "./BaseMessageView.js";
-import {renderMessage} from "./common.js";
 
-export class BaseMediaView extends TemplateView {
+export class BaseMediaView extends BaseMessageView {
-    render(t, vm) {
+    renderMessageBody(t, vm) {
         const heightRatioPercent = (vm.height / vm.width) * 100; 
         let spacerStyle = `padding-top: ${heightRatioPercent}%;`;
         if (vm.platform.isIE11) {
@@ -52,9 +51,9 @@ export class BaseMediaView extends TemplateView {
             });
             children.push(sendStatus, progress);
         }
-        return renderMessage(t, vm, t.div({className: "Timeline_messageBody"}, [
+        return t.div({className: "Timeline_messageBody"}, [
             t.div({className: "media", style: `max-width: ${vm.width}px`}, children),
             t.if(vm => vm.error, t => t.p({className: "error"}, vm.error))
-        ]));
+        ]);
     }
 }

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

@@ -0,0 +1,42 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+Copyright 2020 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 {renderStaticAvatar} from "../../../avatar.js";
+import {TemplateView} from "../../../general/TemplateView.js";
+
+export class BaseMessageView extends TemplateView {
+    render(t, vm) {
+        const classes = {
+            "Timeline_message": true,
+            own: vm.isOwn,
+            unsent: vm.isUnsent,
+            unverified: vm.isUnverified,
+            continuation: vm => vm.isContinuation,
+        };
+        return t.li({className: classes}, [
+            t.if(vm => !vm.isContinuation, t => renderStaticAvatar(vm, 30, "Timeline_messageAvatar")),
+            t.if(vm => !vm.isContinuation, t => t.div({className: `Timeline_messageSender usercolor${vm.avatarColorNumber}`}, vm.displayName)),
+            this.renderMessageBody(t, vm),
+            // should be after body as it is overlayed on top
+            t.button({className: "Timeline_messageOptions"}, "⋯"),
+        ]);   
+    }
+
+    renderMessageBody() {
+
+    }
+}

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

@@ -14,22 +14,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {TemplateView} from "../../../general/TemplateView.js";
+import {BaseMessageView} from "./BaseMessageView.js";
-import {renderMessage} from "./common.js";
 
-export class FileView extends TemplateView {
+export class FileView extends BaseMessageView {
-    render(t, vm) {
+    renderMessageBody(t, vm) {
         if (vm.isPending) {
-            return renderMessage(t, vm, t.p([
+            return t.p([
                 vm => vm.label,
                 " ",
                 t.button({className: "link", onClick: () => vm.abortSending()}, vm.i18n`Cancel`),
-            ]));
+            ]);
         } else {
-            return renderMessage(t, vm, t.p({className: "Timeline_messageBody statusMessage"}, [
+            return t.p({className: "Timeline_messageBody statusMessage"}, [
                 t.button({className: "link", onClick: () => vm.download()}, vm => vm.label),
                 t.time(vm.date + " " + vm.time)
-            ]));
+            ]);
         }
     }
 }

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

@@ -14,12 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {TemplateView} from "../../../general/TemplateView.js";
+import {BaseMessageView} from "./BaseMessageView.js";
-import {renderMessage} from "./common.js";
 
-export class MissingAttachmentView extends TemplateView {
+export class MissingAttachmentView extends BaseMessageView {
-    render(t, vm) {
+    renderMessageBody(t, vm) {
         const remove = t.button({className: "link", onClick: () => vm.abortSending()}, vm.i18n`Remove`);
-        return renderMessage(t, vm, t.p({className: "Timeline_messageBody statusMessage"}, [vm.label, " ", remove]));
+        return t.p({className: "Timeline_messageBody statusMessage"}, [vm.label, " ", remove]);
     }
 }

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

@@ -14,14 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {TemplateView} from "../../../general/TemplateView.js";
+import {BaseMessageView} from "./BaseMessageView.js";
-import {renderMessage} from "./common.js";
 
-export class RedactedView extends TemplateView {
+export class RedactedView extends BaseMessageView {
-    render(t, vm) {
+    renderMessageBody(t, vm) {
         const cancelButton = t.if(vm => vm.isRedacting, t => t.button({onClick: () => vm.abortPendingRedaction()}, "Cancel"));
-        return renderMessage(t, vm,
+        return t.p({className: "Timeline_messageBody statusMessage"}, [vm => vm.description, " ", cancelButton]);
-            t.p({className: "Timeline_messageBody statusMessage"}, [vm => vm.description, " ", cancelButton])
-        );
     }
 }

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

@@ -14,21 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {TemplateView} from "../../../general/TemplateView.js";
 import {StaticView} from "../../../general/StaticView.js";
 import {tag, text} from "../../../general/html.js";
-import {renderMessage} from "./common.js";
+import {BaseMessageView} from "./BaseMessageView.js";
 
-export class TextMessageView extends TemplateView {
+export class TextMessageView extends BaseMessageView {
-    render(t, vm) {
+    renderMessageBody(t, vm) {
-        const bodyView = t.mapView(vm => vm.body, body => new BodyView(body));
+        return t.p({
-        return renderMessage(t, vm, t.p({
             className: "Timeline_messageBody",
             statusMessage: vm => vm.shape === "message-status"
         }, [
-            bodyView,
+            t.mapView(vm => vm.body, body => new BodyView(body)),
             t.time({className: {hidden: !vm.date}}, vm.date + " " + vm.time)
-        ]));
+        ]);
     }
 }
 

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

@@ -1,35 +0,0 @@
-/*
-Copyright 2020 Bruno Windels <bruno@windels.cloud>
-Copyright 2020 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 {renderStaticAvatar} from "../../../avatar.js";
-
-export function renderMessage(t, vm, body) {
-    const classes = {
-        "Timeline_message": true,
-        own: vm.isOwn,
-        unsent: vm.isUnsent,
-        unverified: vm.isUnverified,
-        continuation: vm => vm.isContinuation,
-    };
-    return t.li({className: classes}, [
-        t.if(vm => !vm.isContinuation, t => renderStaticAvatar(vm, 30, "Timeline_messageAvatar")),
-        t.if(vm => !vm.isContinuation, t => t.div({className: `Timeline_messageSender usercolor${vm.avatarColorNumber}`}, vm.displayName)),
-        body,
-        // should be after body as it is overlayed on top
-        t.button({className: "Timeline_messageOptions"}, "⋯"),
-    ]);
-}