Render stickers as stickers

src/app/molecules/media/Media.jsx

@@ -196,6 +196,41 @@ Image.propTypes = {
   type: PropTypes.string,
 };
 
+function Sticker({
+  name, link, file, type,
+}) {
+  const [url, setUrl] = useState(null);
+
+  useEffect(() => {
+    let unmounted = false;
+    async function fetchUrl() {
+      const myUrl = await getUrl(link, type, file);
+      if (unmounted) return;
+      setUrl(myUrl);
+    }
+    fetchUrl();
+    return () => {
+      unmounted = true;
+    };
+  }, []);
+
+  return (
+    <div className="sticker-container">
+      { url !== null && <img src={url || link} alt={name} />}
+    </div>
+  );
+}
+Sticker.defaultProps = {
+  file: null,
+  type: '',
+};
+Sticker.propTypes = {
+  name: PropTypes.string.isRequired,
+  link: PropTypes.string.isRequired,
+  file: PropTypes.shape({}),
+  type: PropTypes.string,
+};
+
 function Audio({
   name, link, type, file,
 }) {
@@ -315,5 +350,5 @@ Video.propTypes = {
 };
 
 export {
-  File, Image, Audio, Video,
+  File, Image, Sticker, Audio, Video,
 };

src/app/molecules/media/Media.scss

@@ -42,6 +42,15 @@
   background-size: cover;
 }
 
+.sticker-container {
+  display: inline-flex;
+  max-width: 128px;
+  width: 100%;
+  & img {
+    width: 100% !important;
+  }
+}
+
 .image-container {
   & img {
     max-width: unset !important;

src/app/molecules/message/Message.jsx

@@ -411,9 +411,9 @@ function MessageReactionGroup({ roomTimeline, mEvent }) {
         count: 0,
         users: [],
         isActive: false,
-        shortcode,
       };
     }
+    if (shortcode) reaction.shortcode = shortcode;
     if (count) {
       reaction.count = count;
     } else {
@@ -608,7 +608,7 @@ function genMediaContent(mE) {
   if (typeof mediaMXC === 'undefined' || mediaMXC === '') return <span style={{ color: 'var(--bg-danger)' }}>Malformed event</span>;
 
   let msgType = mE.getContent()?.msgtype;
-  if (mE.getType() === 'm.sticker') msgType = 'm.image';
+  if (mE.getType() === 'm.sticker') msgType = 'm.sticker';
 
   switch (msgType) {
     case 'm.file':
@@ -631,6 +631,15 @@ function genMediaContent(mE) {
           type={mContent.info?.mimetype}
         />
       );
+    case 'm.sticker':
+      return (
+        <Media.Sticker
+          name={mContent.body}
+          link={mx.mxcUrlToHttp(mediaMXC)}
+          file={isEncryptedFile ? mContent.file : null}
+          type={mContent.info?.mimetype}
+        />
+      );
     case 'm.audio':
       return (
         <Media.Audio