From 88da0f4dcf500c44c5bae2673b538f0f47ac76b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 15 Jul 2021 15:17:41 +0200
Subject: [PATCH] Give audio and video replies an icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_ReplyTile.scss      | 8 ++++++++
 src/components/views/rooms/ReplyTile.tsx | 6 ++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

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<IProps> {
 
     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<IProps> {
 
         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<IProps> {
         let sender;
         const needsSenderProfile = (
             !isInfoMessage &&
-            msgtype !== MsgType.Image &&
+            msgType !== MsgType.Image &&
             tileHandler !== EventType.RoomCreate &&
             evType !== EventType.Sticker
         );