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

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="" alt=""
/> />
</div> </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>} {onClose && <button className="close-reply" onClick={onClose}><CloseButton/></button>}
</div> </div>
<TextMessageBody room={room} event={event}/> <TextMessageBody room={room} event={event}/>

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

@ -176,8 +176,18 @@ div.member-body {
gap: .25rem; gap: .25rem;
} }
div.plaintext-body { div.message-text {
white-space: pre-wrap; &.plaintext-body {
white-space: pre-wrap;
}
&.notice-message {
opacity: .6;
}
&.emote-message::before {
content: "* " attr(data-event-sender) " ";
}
} }
div.html-body { 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>
<div className="event-sender-and-time" onClick={wrappedSetReplyTo}> <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> <span className="event-time" title={fullTime}>{shortTime}</span>
{(editEventTS && editTime) ? <span className="event-edited" title={editTime}> {(editEventTS && editTime) ? <span className="event-edited" title={editTime}>
(edited at {formatShortTime(editEventTS)}) (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 // 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 type { MediaMessageEventContent, MessageEventContent } from "@/api/types" import { MediaMessageEventContent, MemberEventContent, MessageEventContent } from "@/api/types"
import { EventContentProps } from "./props.ts" import { EventContentProps } from "./props.ts"
import { useMediaContent } from "./useMediaContent.tsx" 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 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) { if (event.local_content?.sanitized_html) {
const classNames = ["message-text", "html-body"] classNames.push("html-body")
if (event.local_content.was_plaintext) { if (event.local_content.was_plaintext) {
classNames.push("plaintext-body") classNames.push("plaintext-body")
} }
return <div onClick={onClickHTML} className={classNames.join(" ")} dangerouslySetInnerHTML={{ return <div
__html: event.local_content!.sanitized_html!, 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) => { export const MediaMessageBody = ({ event, room }: EventContentProps) => {