imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add support for rendering media captions (#43)

Browse source 
* Add support for rendering media captions

* Run prettier

* Deduplicate body props

* Add basic test

* Fix import order in test

* Fix test?
This commit is contained in:
Tulir Asokan 2024-10-04 15:58:22 +02:00 • committed by GitHub
parent 26b0e83ac4
commit 5fbc5af884
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 113 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/components/views/messages/MessageEvent.tsx
View file

@ -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>
);