Add support for rendering media captions (#43)

* Add support for rendering media captions

* Run prettier

* Deduplicate body props

* Add basic test

* Fix import order in test

* Fix test?

Author: tulir

src/components/views/messages/MessageEvent.tsx

@@ -190,25 +190,42 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
             }
         }
 
-        return BodyType ? (
-            <BodyType
-                ref={this.body}
-                mxEvent={this.props.mxEvent}
-                highlights={this.props.highlights}
-                highlightLink={this.props.highlightLink}
-                showUrlPreview={this.props.showUrlPreview}
-                forExport={this.props.forExport}
-                maxImageHeight={this.props.maxImageHeight}
-                replacingEventId={this.props.replacingEventId}
-                editState={this.props.editState}
-                onHeightChanged={this.props.onHeightChanged}
-                onMessageAllowed={this.onTileUpdate}
-                permalinkCreator={this.props.permalinkCreator}
-                mediaEventHelper={this.mediaHelper}
-                getRelationsForEvent={this.props.getRelationsForEvent}
-                isSeeingThroughMessageHiddenForModeration={this.props.isSeeingThroughMessageHiddenForModeration}
-                inhibitInteraction={this.props.inhibitInteraction}
-            />
-        ) : null;
+        const hasCaption =
+            [MsgType.Image, MsgType.File, MsgType.Audio, MsgType.Video].includes(msgtype as MsgType) &&
+            content.filename &&
+            content.filename !== content.body;
+        const bodyProps: IBodyProps = {
+            ref: this.body,
+            mxEvent: this.props.mxEvent,
+            highlights: this.props.highlights,
+            highlightLink: this.props.highlightLink,
+            showUrlPreview: this.props.showUrlPreview,
+            forExport: this.props.forExport,
+            maxImageHeight: this.props.maxImageHeight,
+            replacingEventId: this.props.replacingEventId,
+            editState: this.props.editState,
+            onHeightChanged: this.props.onHeightChanged,
+            onMessageAllowed: this.onTileUpdate,
+            permalinkCreator: this.props.permalinkCreator,
+            mediaEventHelper: this.mediaHelper,
+            getRelationsForEvent: this.props.getRelationsForEvent,
+            isSeeingThroughMessageHiddenForModeration: this.props.isSeeingThroughMessageHiddenForModeration,
+            inhibitInteraction: this.props.inhibitInteraction,
+        };
+        if (hasCaption) {
+            return <CaptionBody {...bodyProps} WrappedBodyType={BodyType} />;
+        }
+
+        return BodyType ? <BodyType {...bodyProps} /> : null;
     }
 }
+
+const CaptionBody: React.FunctionComponent<IBodyProps & { WrappedBodyType: React.ComponentType<IBodyProps> }> = ({
+    WrappedBodyType,
+    ...props
+}) => (
+    <div className="mx_EventTile_content">
+        <WrappedBodyType {...props} />
+        <TextualBody {...{ ...props, ref: undefined }} />
+    </div>
+);

src/components/views/messages/TextualBody.tsx

@@ -556,6 +556,9 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         const content = mxEvent.getContent();
         const isNotice = content.msgtype === MsgType.Notice;
         const isEmote = content.msgtype === MsgType.Emote;
+        const isCaption = [MsgType.Image, MsgType.File, MsgType.Audio, MsgType.Video].includes(
+            content.msgtype as MsgType,
+        );
 
         const willHaveWrapper =
             this.props.replacingEventId || this.props.isSeeingThroughMessageHiddenForModeration || isEmote;
@@ -635,6 +638,14 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
                 </div>
             );
         }
+        if (isCaption) {
+            return (
+                <div className="mx_MTextBody mx_EventTile_caption" onClick={this.onBodyLinkClick}>
+                    {body}
+                    {widgets}
+                </div>
+            );
+        }
         return (
             <div className="mx_MTextBody mx_EventTile_content" onClick={this.onBodyLinkClick}>
                 {body}

src/utils/FileUtils.ts

@@ -38,7 +38,9 @@ export function presentableTextForFile(
     shortened = false,
 ): string {
     let text = fallbackText;
-    if (content.body?.length) {
+    if (content.filename?.length) {
+        text = content.filename;
+    } else if (content.body?.length) {
         // The content body should be the name of the file including a
         // file extension.
         text = content.body;

test/components/views/messages/MessageEvent-test.tsx

@@ -8,7 +8,10 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import { render, RenderResult } from "@testing-library/react";
-import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+import { MatrixClient, MatrixEvent, EventType, Room, MsgType } from "matrix-js-sdk/src/matrix";
+import fetchMock from "fetch-mock-jest";
+import fs from "fs";
+import path from "path";
 
 import SettingsStore from "../../../../src/settings/SettingsStore";
 import { VoiceBroadcastInfoEventType, VoiceBroadcastInfoState } from "../../../../src/voice-broadcast";
@@ -25,6 +28,26 @@ jest.mock("../../../../src/voice-broadcast/components/VoiceBroadcastBody", () =>
     VoiceBroadcastBody: () => <div data-testid="voice-broadcast-body" />,
 }));
 
+jest.mock("../../../../src/components/views/messages/MImageBody", () => ({
+    __esModule: true,
+    default: () => <div data-testid="image-body" />,
+}));
+
+jest.mock("../../../../src/components/views/messages/MImageReplyBody", () => ({
+    __esModule: true,
+    default: () => <div data-testid="image-reply-body" />,
+}));
+
+jest.mock("../../../../src/components/views/messages/MStickerBody", () => ({
+    __esModule: true,
+    default: () => <div data-testid="sticker-body" />,
+}));
+
+jest.mock("../../../../src/components/views/messages/TextualBody.tsx", () => ({
+    __esModule: true,
+    default: () => <div data-testid="textual-body" />,
+}));
+
 describe("MessageEvent", () => {
     let room: Room;
     let client: MatrixClient;
@@ -68,4 +91,42 @@ describe("MessageEvent", () => {
             result.getByTestId("voice-broadcast-body");
         });
     });
+
+    describe("when an image with a caption is sent", () => {
+        let result: RenderResult;
+
+        beforeEach(() => {
+            event = mkEvent({
+                event: true,
+                type: EventType.RoomMessage,
+                user: client.getUserId()!,
+                room: room.roomId,
+                content: {
+                    body: "caption for a test image",
+                    format: "org.matrix.custom.html",
+                    formatted_body: "<strong>caption for a test image</strong>",
+                    msgtype: MsgType.Image,
+                    filename: "image.webp",
+                    info: {
+                        w: 40,
+                        h: 50,
+                    },
+                    url: "mxc://server/image",
+                },
+            });
+            result = renderMessageEvent();
+        });
+
+        it("should render a TextualBody and an ImageBody", () => {
+            fetchMock.getOnce(
+                "https://server/_matrix/media/v3/download/server/image",
+                {
+                    body: fs.readFileSync(path.resolve(__dirname, "..", "..", "..", "images", "animated-logo.webp")),
+                },
+                { sendAsJson: false },
+            );
+            result.getByTestId("image-body");
+            result.getByTestId("textual-body");
+        });
+    });
 });