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

web/timeline: include sender avatar and timestamp

Browse source
This commit is contained in:
Tulir Asokan 2024-10-10 22:00:43 +03:00
parent d428a26b0a
commit 26808d557c
2 changed files with 51 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,6 +2,40 @@ div.timeline-event {
width: 100%;
max-width: 100%;
overflow: hidden;
display: flex;
gap: .5rem;
margin-top: .25rem;
> div.sender-avatar {
width: 40px;
height: 40px;
padding-top: 2px;
> img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
}
> div.sender-and-content {
flex: 1;
> div.event-sender-and-time {
display: flex;
align-items: center;
gap: .5rem;
span.event-sender {
font-weight: bold;
}
span.event-time {
font-size: .8rem;
}
}
}
}
div.media-container {

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

@ -20,6 +20,7 @@ import HiddenEvent from "./content/HiddenEvent.tsx"
import MessageBody from "./content/MessageBody.tsx"
import { EventContentProps } from "./content/props.ts"
import "./TimelineEvent.css"
import { getMediaURL } from "../../api/media.ts"
export interface TimelineEventProps {
room: RoomStateStore
@ -43,16 +44,24 @@ const TimelineEvent = ({ room, eventRowID }: TimelineEventProps) => {
const memberEvt = room.getStateEvent("m.room.member", evt.sender)
const memberEvtContent = memberEvt?.content as MemberEventContent | undefined
const BodyType = getBodyType(evt)
if (BodyType === HiddenEvent) {
// if (BodyType === HiddenEvent) {
// return <div className="timeline-event">
// <BodyType room={room} event={evt}/>
// </div>
// }
return <div className="timeline-event">
<div className="sender-avatar">
<img src={getMediaURL(memberEvtContent?.avatar_url)} alt="" />
</div>
<div className="sender-and-content">
<div className="event-sender-and-time">
<span className="event-sender">{memberEvtContent?.displayname ?? evt.sender}</span>
<span className="event-time">{new Date(evt.timestamp).toLocaleTimeString()}</span>
</div>
<div className="event-content">
<BodyType room={room} event={evt}/>
</div>
}
return <div className="timeline-event">
<div className="event-sender">
{memberEvtContent?.displayname ?? evt.sender}
</div>
<BodyType room={room} event={evt}/>
</div>
}