Add support for rendering media captions

Author: tulir

src/components/views/messages/MessageEvent.tsx

@@ -190,6 +190,32 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
             }
         }
 
+        const hasCaption =
+            [MsgType.Image, MsgType.File, MsgType.Audio, MsgType.Video].includes(msgtype as MsgType) &&
+            content.filename &&
+            content.filename !== content.body;
+        if (hasCaption) {
+            return <CaptionBody
+                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}
+                WrappedBodyType={BodyType}
+            />;
+        }
+
         return BodyType ? (
             <BodyType
                 ref={this.body}
@@ -212,3 +238,13 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
         ) : 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,7 @@ 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 +636,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;