diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.scss index 8fe3a3e94c..ccb0069190 100644 --- a/res/css/views/rooms/_ReplyTile.scss +++ b/res/css/views/rooms/_ReplyTile.scss @@ -21,6 +21,14 @@ limitations under the License. position: relative; line-height: $font-16px; + &.mx_ReplyTile_audio .mx_MFileBody_info_icon::before { + mask-image: url("$(res)/img/element-icons/speaker.svg"); + } + + &.mx_ReplyTile_video .mx_MFileBody_info_icon::before { + mask-image: url("$(res)/img/element-icons/call/video-call.svg"); + } + .mx_MFileBody { .mx_MFileBody_info { margin: 5px 0; diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx index f44a75a264..18b30d33d5 100644 --- a/src/components/views/rooms/ReplyTile.tsx +++ b/src/components/views/rooms/ReplyTile.tsx @@ -80,7 +80,7 @@ export default class ReplyTile extends React.PureComponent { render() { const mxEvent = this.props.mxEvent; - const msgtype = mxEvent.getContent().msgtype; + const msgType = mxEvent.getContent().msgtype; const evType = mxEvent.getType() as EventType; const { tileHandler, isInfoMessage } = getEventDisplayInfo(this.props.mxEvent); @@ -98,6 +98,8 @@ export default class ReplyTile extends React.PureComponent { const classes = classNames("mx_ReplyTile", { mx_ReplyTile_info: isInfoMessage && !this.props.mxEvent.isRedacted(), + mx_ReplyTile_audio: msgType === MsgType.Audio, + mx_ReplyTile_video: msgType === MsgType.Video, }); let permalink = "#"; @@ -108,7 +110,7 @@ export default class ReplyTile extends React.PureComponent { let sender; const needsSenderProfile = ( !isInfoMessage && - msgtype !== MsgType.Image && + msgType !== MsgType.Image && tileHandler !== EventType.RoomCreate && evType !== EventType.Sticker );