diff --git a/web/src/ui/timeline/TimelineEvent.css b/web/src/ui/timeline/TimelineEvent.css index f701f14..15c7af2 100644 --- a/web/src/ui/timeline/TimelineEvent.css +++ b/web/src/ui/timeline/TimelineEvent.css @@ -141,7 +141,11 @@ div.event-content > div.event-reactions { gap: .25rem; margin: .25rem 0; - > span.reaction { + > div.reaction { + display: flex; + align-items: center; + gap: .25rem; + background-color: #efe; border: 1px solid #ada; border-radius: 2rem; @@ -151,6 +155,10 @@ div.event-content > div.event-reactions { text-overflow: ellipsis; overflow: hidden; max-width: 20rem; + + > img.reaction-emoji { + height: 1.5rem; + } } } diff --git a/web/src/ui/timeline/TimelineEvent.tsx b/web/src/ui/timeline/TimelineEvent.tsx index 8cda730..5ee9fb1 100644 --- a/web/src/ui/timeline/TimelineEvent.tsx +++ b/web/src/ui/timeline/TimelineEvent.tsx @@ -14,7 +14,7 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . import React, { use, useCallback } from "react" -import { getAvatarURL } from "@/api/media.ts" +import { getAvatarURL, getMediaURL } from "@/api/media.ts" import { RoomStateStore, useRoomState } from "@/api/statestore" import { EventID, MemDBEvent, MemberEventContent, UnreadType } from "@/api/types" import { isEventID } from "@/util/validation.ts" @@ -41,9 +41,13 @@ const formatShortTime = (time: Date) => const EventReactions = ({ reactions }: { reactions: Record }) => { return
- {Object.entries(reactions).map(([reaction, count]) => count > 0 ? - {reaction} {count} - : null)} + {Object.entries(reactions).map(([reaction, count]) => count > 0 ? +
+ {reaction.startsWith("mxc://") + ? + : {reaction}} + {count} +
: null)}
}