Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-20 18:43:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

web/timeline: add different rendering for m.notice and m.emote messages

Browse source
This commit is contained in:
Tulir Asokan 2024-10-19 17:41:24 +03:00
parent e40a97f43b
commit 7676f21292
4 changed files with 34 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/ui/timeline/ReplyBody.tsx
View file

@ -79,7 +79,7 @@ export const ReplyBody = ({ room, event, onClose }: ReplyBodyProps) => {
alt=""
/>
</div>
<span className="event-sender">{memberEvtContent?.displayname ?? event.sender}</span>
<span className="event-sender">{memberEvtContent?.displayname || event.sender}</span>
{onClose && <button className="close-reply" onClick={onClose}><CloseButton/></button>}
</div>
<TextMessageBody room={room} event={event}/>

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

@ -176,8 +176,18 @@ div.member-body {
gap: .25rem;
}
div.plaintext-body {
white-space: pre-wrap;
div.message-text {
&.plaintext-body {
white-space: pre-wrap;
}
&.notice-message {
opacity: .6;
}
&.emote-message::before {
content: "* " attr(data-event-sender) " ";
}
}
div.html-body {

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

@ -146,7 +146,7 @@ const TimelineEvent = ({ room, evt, prevEvt, setReplyToRef }: TimelineEventProps
/>
</div>
<div className="event-sender-and-time" onClick={wrappedSetReplyTo}>
<span className="event-sender">{memberEvtContent?.displayname ?? evt.sender}</span>
<span className="event-sender">{memberEvtContent?.displayname || evt.sender}</span>
<span className="event-time" title={fullTime}>{shortTime}</span>
{(editEventTS && editTime) ? <span className="event-edited" title={editTime}>
(edited at {formatShortTime(editEventTS)})

27
web/src/ui/timeline/content/MessageBody.tsx
View file

@ -13,7 +13,7 @@
//
// 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/>.
import type { MediaMessageEventContent, MessageEventContent } from "@/api/types"
import { MediaMessageEventContent, MemberEventContent, MessageEventContent } from "@/api/types"
import { EventContentProps } from "./props.ts"
import { useMediaContent } from "./useMediaContent.tsx"
@ -24,18 +24,31 @@ const onClickHTML = (evt: React.MouseEvent<HTMLDivElement>) => {
}
}
export const TextMessageBody = ({ event }: EventContentProps) => {
export const TextMessageBody = ({ event, room }: EventContentProps) => {
const content = event.content as MessageEventContent
const classNames = ["message-text"]
let eventSenderName: string | undefined
if (content.msgtype === "m.notice") {
classNames.push("notice-message")
} else if (content.msgtype === "m.emote") {
classNames.push("emote-message")
const memberEvt = room.getStateEvent("m.room.member", event.sender)
const memberEvtContent = memberEvt?.content as MemberEventContent | undefined
eventSenderName = memberEvtContent?.displayname || event.sender
}
if (event.local_content?.sanitized_html) {
const classNames = ["message-text", "html-body"]
classNames.push("html-body")
if (event.local_content.was_plaintext) {
classNames.push("plaintext-body")
}
return <div onClick={onClickHTML} className={classNames.join(" ")} dangerouslySetInnerHTML={{
__html: event.local_content!.sanitized_html!,
}}/>
return <div
onClick={onClickHTML}
className={classNames.join(" ")}
data-event-sender={eventSenderName}
dangerouslySetInnerHTML={{ __html: event.local_content!.sanitized_html! }}
/>
}
return <div className="message-text plaintext-body">{content.body}</div>
return <div className={classNames.join(" ")} data-event-sender={eventSenderName}>{content.body}</div>
}
export const MediaMessageBody = ({ event, room }: EventContentProps) => {