n/nyxmuks
1
0
Fork 0
forked from Mirrors/gomuks
Code Pull requests Activity

web/timeline: add support for rendering custom emoji reactions

Browse source
This commit is contained in:
Tulir Asokan 2024-10-22 01:34:27 +03:00
parent 27f1d0f3e4
commit 65b221d38e
2 changed files with 17 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
web/src/ui/timeline/TimelineEvent.css
View file

@ -141,7 +141,11 @@ div.event-content > div.event-reactions {
gap: .25rem; gap: .25rem;
margin: .25rem 0; margin: .25rem 0;
> span.reaction { > div.reaction {
display: flex;
align-items: center;
gap: .25rem;
background-color: #efe; background-color: #efe;
border: 1px solid #ada; border: 1px solid #ada;
border-radius: 2rem; border-radius: 2rem;
@ -151,6 +155,10 @@ div.event-content > div.event-reactions {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
max-width: 20rem; max-width: 20rem;
> img.reaction-emoji {
height: 1.5rem;
}
} }
} }

12
web/src/ui/timeline/TimelineEvent.tsx
View file

@ -14,7 +14,7 @@
// You should have received a copy of the GNU Affero General Public License // You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>. // along with this program. If not, see <https://www.gnu.org/licenses/>.
import React, { use, useCallback } from "react" 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 { RoomStateStore, useRoomState } from "@/api/statestore"
import { EventID, MemDBEvent, MemberEventContent, UnreadType } from "@/api/types" import { EventID, MemDBEvent, MemberEventContent, UnreadType } from "@/api/types"
import { isEventID } from "@/util/validation.ts" import { isEventID } from "@/util/validation.ts"
@ -41,9 +41,13 @@ const formatShortTime = (time: Date) =>
const EventReactions = ({ reactions }: { reactions: Record<string, number> }) => { const EventReactions = ({ reactions }: { reactions: Record<string, number> }) => {
return <div className="event-reactions"> return <div className="event-reactions">
{Object.entries(reactions).map(([reaction, count]) => count > 0 ? <span key={reaction} className="reaction" title={reaction}> {Object.entries(reactions).map(([reaction, count]) => count > 0 ?
<span className="reaction">{reaction}</span> <span className="reaction-count">{count}</span> <div key={reaction} className="reaction" title={reaction}>
</span> : null)} {reaction.startsWith("mxc://")
? <img className="reaction-emoji" src={getMediaURL(reaction)} alt=""/>
: <span className="reaction-emoji">{reaction}</span>}
<span className="reaction-count">{count}</span>
</div> : null)}
</div> </div>
} }