Render non-text messages as well

src/domain/session/room/timeline/tiles/BaseMessageTile.js

@@ -24,6 +24,7 @@ export class BaseMessageTile extends SimpleTile {
         this._date = this._entry.timestamp ? new Date(this._entry.timestamp) : null;
         this._isContinuation = false;
         this._reactions = null;
+        this._replyTextTile = null;
         if (this._entry.annotations || this._entry.pendingAnnotations) {
             this._updateReactions();
         }
@@ -210,4 +211,17 @@ export class BaseMessageTile extends SimpleTile {
             this._reactions.update(annotations, pendingAnnotations);
         }
     }
+
+    get replyTextTile() {
+        if (!this._entry.contextEventId) {
+            return null;
+        }
+        if (!this._replyTextTile) {
+            const entry = this._entry.contextEntry;
+            if (entry) {
+                this._replyTextTile = this._tileCreator(entry);
+            }
+        }
+        return this._replyTextTile;
+    }
 }

src/domain/session/room/timeline/tiles/TextTile.js

@@ -22,7 +22,6 @@ export class TextTile extends BaseTextTile {
 
     constructor(options) {
         super(options);
-        this._replyTextTile = null;
     }
 
     _getContentString(key) {
@@ -66,16 +65,4 @@ export class TextTile extends BaseTextTile {
         return messageBody;
     }
 
-    get replyTextTile() {
-        if (!this._entry.contextEventId) {
-            return null;
-        }
-        if (!this._replyTextTile) {
-            const entry = this._entry.contextEntry;
-            if (entry) {
-                this._replyTextTile = this._tileCreator(entry);
-            }
-        }
-        return this._replyTextTile;
-    }
 }

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

@@ -17,7 +17,10 @@ limitations under the License.
 import {renderStaticAvatar} from "../../../avatar";
 import {tag} from "../../../general/html";
 import {TemplateView} from "../../../general/TemplateView";
-import {renderPart} from "./TextMessageView.js";
+import {FileView} from "./FileView";
+import {ImageView} from "./ImageView";
+import {TextMessageView} from "./TextMessageView.js";
+import {VideoView} from "./VideoView";
 
 export class ReplyPreviewView extends TemplateView {
     render(t, vm) {
@@ -26,7 +29,7 @@ export class ReplyPreviewView extends TemplateView {
             while (replyContainer.lastChild) {
                 replyContainer.removeChild(replyContainer.lastChild);
             }
-            replyContainer.appendChild(vm.isRedacted? this._renderRedaction(vm) : this._renderReplyPreview(vm));
+            replyContainer.appendChild(vm.isRedacted? this._renderRedaction(vm) : this._renderReplyPreview(t, vm));
         })
         return replyContainer;
     }
@@ -37,15 +40,46 @@ export class ReplyPreviewView extends TemplateView {
         return reply;
     }
 
-    _renderReplyPreview(vm) {
-        const reply = this._renderReplyHeader(vm);
-        const body = vm.body;
-        for (const part of body.parts) {
-            reply.appendChild(renderPart(part));
+    _renderReplyPreview(t, vm) {
+        let reply;
+        switch (vm.shape) {
+            case "image":
+            case "video":
+                reply = this._renderMediaPreview(t, vm);
+                break;
+            default:
+                reply = this._renderPreview(t, vm);
+                break;
         }
         return reply;
     }
 
+    _renderPreview(t, vm) {
+        const view = this._viewFromShape(vm);
+        const rendered = view.renderMessageBody(t, vm);
+        return this._renderReplyHeader(vm, [rendered]);
+    }
+
+    _renderMediaPreview(t, vm) {
+        const view = this._viewFromShape(vm);
+        const rendered = view.renderMedia(t, vm);
+        return this._renderReplyHeader(vm, [rendered]);
+    }
+
+    _viewFromShape(vm) {
+        const shape = vm.shape;
+        switch (shape) {
+            case "image":
+                return new ImageView(vm);
+            case "video":
+                return new VideoView(vm);
+            case "file":
+                return new FileView(vm);
+            case "message":
+                return new TextMessageView(vm);
+        }
+    }
+
     _renderReplyHeader(vm, children = []) {
         return tag.blockquote(
             [