This commit is contained in:
nizune 2021-07-09 12:29:00 +02:00
commit 9484428d63
8 changed files with 114 additions and 27 deletions

View file

@ -28,12 +28,14 @@ interface Props {
attachContext?: boolean; attachContext?: boolean;
queued?: QueuedMessage; queued?: QueuedMessage;
message: MessageObject; message: MessageObject;
highlight?: boolean;
contrast?: boolean; contrast?: boolean;
content?: Children; content?: Children;
head?: boolean; head?: boolean;
} }
function Message({ function Message({
highlight,
attachContext, attachContext,
message, message,
contrast, contrast,
@ -72,6 +74,7 @@ function Message({
/> />
))} ))}
<MessageBase <MessageBase
highlight={highlight}
head={head && !(message.replies && message.replies.length > 0)} head={head && !(message.replies && message.replies.length > 0)}
contrast={contrast} contrast={contrast}
sending={typeof queued !== "undefined"} sending={typeof queued !== "undefined"}

View file

@ -1,4 +1,4 @@
import styled, { css } from "styled-components"; import styled, { css, keyframes } from "styled-components";
import { decodeTime } from "ulid"; import { decodeTime } from "ulid";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
@ -17,8 +17,15 @@ export interface BaseMessageProps {
blocked?: boolean; blocked?: boolean;
sending?: boolean; sending?: boolean;
contrast?: boolean; contrast?: boolean;
highlight?: boolean;
} }
const highlight = keyframes`
0% { background: var(--mention); }
66% { background: var(--mention); }
100% { background: transparent; }
`;
export default styled.div<BaseMessageProps>` export default styled.div<BaseMessageProps>`
display: flex; display: flex;
overflow: none; overflow: none;
@ -70,6 +77,14 @@ export default styled.div<BaseMessageProps>`
color: var(--error); color: var(--error);
`} `}
${(props) =>
props.highlight &&
css`
animation-name: ${highlight};
animation-timing-function: ease;
animation-duration: 3s;
`}
.detail { .detail {
gap: 8px; gap: 8px;
display: flex; display: flex;

View file

@ -35,9 +35,11 @@ type SystemMessageParsed =
interface Props { interface Props {
attachContext?: boolean; attachContext?: boolean;
message: MessageObject; message: MessageObject;
highlight?: boolean;
hideInfo?: boolean;
} }
export function SystemMessage({ attachContext, message }: Props) { export function SystemMessage({ attachContext, message, highlight, hideInfo }: Props) {
const ctx = useForceUpdate(); const ctx = useForceUpdate();
let data: SystemMessageParsed; let data: SystemMessageParsed;
@ -143,6 +145,7 @@ export function SystemMessage({ attachContext, message }: Props) {
return ( return (
<MessageBase <MessageBase
highlight={highlight}
onContextMenu={ onContextMenu={
attachContext attachContext
? attachContextMenu("Menu", { ? attachContextMenu("Menu", {
@ -151,9 +154,9 @@ export function SystemMessage({ attachContext, message }: Props) {
}) })
: undefined : undefined
}> }>
<MessageInfo> { !hideInfo && <MessageInfo>
<MessageDetail message={message} position="left" /> <MessageDetail message={message} position="left" />
</MessageInfo> </MessageInfo> }
<SystemContent>{children}</SystemContent> <SystemContent>{children}</SystemContent>
</MessageBase> </MessageBase>
); );

View file

@ -6,11 +6,15 @@ import { Text } from "preact-i18n";
import { useRenderState } from "../../../../lib/renderer/Singleton"; import { useRenderState } from "../../../../lib/renderer/Singleton";
import { useUser } from "../../../../context/revoltjs/hooks"; import { useForceUpdate, useUser } from "../../../../context/revoltjs/hooks";
import Markdown from "../../../markdown/Markdown"; import Markdown from "../../../markdown/Markdown";
import UserShort from "../../user/UserShort"; import UserShort from "../../user/UserShort";
import { SystemMessage } from "../SystemMessage"; import { SystemMessage } from "../SystemMessage";
import { Users } from "revolt.js/dist/api/objects";
import { useHistory } from "react-router-dom";
import { useEffect, useLayoutEffect, useState } from "preact/hooks";
import { mapMessage, MessageObject } from "../../../../context/revoltjs/util";
interface Props { interface Props {
channel: string; channel: string;
@ -25,18 +29,32 @@ export const ReplyBase = styled.div<{
}>` }>`
gap: 4px; gap: 4px;
display: flex; display: flex;
margin: 0 30px;
font-size: 0.8em; font-size: 0.8em;
margin-left: 30px;
user-select: none; user-select: none;
margin-bottom: 4px; margin-bottom: 4px;
align-items: center; align-items: center;
color: var(--secondary-foreground); color: var(--secondary-foreground);
* {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
}
svg:first-child { .content {
gap: 4px;
display: flex;
cursor: pointer;
align-items: center;
flex-direction: row;
> * {
pointer-events: none;
}
}
> svg:first-child {
flex-shrink: 0; flex-shrink: 0;
transform: scaleX(-1); transform: scaleX(-1);
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
@ -62,10 +80,23 @@ export const ReplyBase = styled.div<{
`; `;
export function MessageReply({ index, channel, id }: Props) { export function MessageReply({ index, channel, id }: Props) {
const ctx = useForceUpdate();
const view = useRenderState(channel); const view = useRenderState(channel);
if (view?.type !== "RENDER") return null; if (view?.type !== "RENDER") return null;
const message = view.messages.find((x) => x._id === id); const [ message, setMessage ] = useState<MessageObject | undefined>(undefined);
useLayoutEffect(() => {
// ! FIXME: We should do this through the message renderer, so it can fetch it from cache if applicable.
const m = view.messages.find((x) => x._id === id);
if (m) {
setMessage(m);
} else {
ctx.client.channels.fetchMessage(channel, id)
.then(m => setMessage(mapMessage(m)));
}
}, [ view.messages ]);
if (!message) { if (!message) {
return ( return (
<ReplyBase head={index === 0} fail> <ReplyBase head={index === 0} fail>
@ -77,23 +108,38 @@ export function MessageReply({ index, channel, id }: Props) {
); );
} }
const user = useUser(message.author); const user = useUser(message.author, ctx);
const history = useHistory();
return ( return (
<ReplyBase head={index === 0}> <ReplyBase head={index === 0}>
<Reply size={16} /> <Reply size={16} />
{ user?.relationship === Users.Relationship.Blocked ?
<>Blocked User</> :
<>
{message.author === SYSTEM_USER_ID ? (
<SystemMessage message={message} hideInfo />
) : <>
<UserShort user={user} size={16} /> <UserShort user={user} size={16} />
<div className="content" onClick={() => {
let obj = ctx.client.channels.get(channel);
if (obj?.channel_type === 'TextChannel') {
history.push(`/server/${obj.server}/channel/${obj._id}/${message._id}`);
} else {
history.push(`/channel/${channel}/${message._id}`);
}
}}>
{message.attachments && message.attachments.length > 0 && ( {message.attachments && message.attachments.length > 0 && (
<File size={16} /> <File size={16} />
)} )}
{message.author === SYSTEM_USER_ID ? (
<SystemMessage message={message} />
) : (
<Markdown <Markdown
disallowBigEmoji disallowBigEmoji
content={(message.content as string).replace(/\n/g, " ")} content={(message.content as string).replace(/\n/g, " ")}
/> />
)} </div>
</>}
</>
}
</ReplyBase> </ReplyBase>
); );
} }

View file

@ -73,6 +73,16 @@ export class SingletonRenderer extends EventEmitter3 {
} }
async init(id: string, message_id?: string) { async init(id: string, message_id?: string) {
if (message_id) {
if (this.state.type === 'RENDER') {
let message = this.state.messages.find(x => x._id === message_id);
if (message) {
this.emit("scroll", { type: "ScrollToView", id: message_id });
return;
}
}
}
this.channel = id; this.channel = id;
this.stale = false; this.stale = false;
this.setStateUnguarded({ type: "LOADING" }); this.setStateUnguarded({ type: "LOADING" });

View file

@ -58,6 +58,10 @@ const Info = styled.div`
font-size: 0.8em; font-size: 0.8em;
font-weight: 400; font-weight: 400;
color: var(--secondary-foreground); color: var(--secondary-foreground);
> * {
pointer-events: none;
}
} }
`; `;

View file

@ -60,7 +60,9 @@ export function MessageArea({ id }: Props) {
const status = useContext(StatusContext); const status = useContext(StatusContext);
const { focusTaken } = useContext(IntermediateContext); const { focusTaken } = useContext(IntermediateContext);
// ? Required data for message links.
const { message } = useParams<{ message: string }>(); const { message } = useParams<{ message: string }>();
const [highlight, setHighlight] = useState<string | undefined>(undefined);
// ? This is the scroll container. // ? This is the scroll container.
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
@ -99,7 +101,7 @@ export function MessageArea({ id }: Props) {
}); });
} else if (scrollState.current.type === "ScrollToView") { } else if (scrollState.current.type === "ScrollToView") {
document.getElementById(scrollState.current.id) document.getElementById(scrollState.current.id)
?.scrollIntoView(); ?.scrollIntoView({ block: 'center' });
setScrollState({ type: "Free" }); setScrollState({ type: "Free" });
} else if (scrollState.current.type === "OffsetTop") { } else if (scrollState.current.type === "OffsetTop") {
@ -170,6 +172,7 @@ export function MessageArea({ id }: Props) {
// ? If message present or changes, load it as well. // ? If message present or changes, load it as well.
useEffect(() => { useEffect(() => {
if (message) { if (message) {
setHighlight(message);
SingletonMessageRenderer.init(id, message); SingletonMessageRenderer.init(id, message);
let channel = client.channels.get(id); let channel = client.channels.get(id);
@ -284,7 +287,7 @@ export function MessageArea({ id }: Props) {
</RequiresOnline> </RequiresOnline>
)} )}
{state.type === "RENDER" && ( {state.type === "RENDER" && (
<MessageRenderer id={id} state={state} /> <MessageRenderer id={id} state={state} highlight={highlight} />
)} )}
{state.type === "EMPTY" && <ConversationStart id={id} />} {state.type === "EMPTY" && <ConversationStart id={id} />}
</div> </div>

View file

@ -28,6 +28,7 @@ import MessageEditor from "./MessageEditor";
interface Props { interface Props {
id: string; id: string;
state: RenderState; state: RenderState;
highlight?: string;
queue: QueuedMessage[]; queue: QueuedMessage[];
} }
@ -42,7 +43,7 @@ const BlockedMessage = styled.div`
} }
`; `;
function MessageRenderer({ id, state, queue }: Props) { function MessageRenderer({ id, state, queue, highlight }: Props) {
if (state.type !== "RENDER") return null; if (state.type !== "RENDER") return null;
const client = useContext(AppContext); const client = useContext(AppContext);
@ -132,6 +133,7 @@ function MessageRenderer({ id, state, queue }: Props) {
key={message._id} key={message._id}
message={message} message={message}
attachContext attachContext
highlight={highlight === message._id}
/>, />,
); );
} else { } else {
@ -158,6 +160,7 @@ function MessageRenderer({ id, state, queue }: Props) {
) : undefined ) : undefined
} }
attachContext attachContext
highlight={highlight === message._id}
/>, />,
); );
} }