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;
queued?: QueuedMessage;
message: MessageObject;
highlight?: boolean;
contrast?: boolean;
content?: Children;
head?: boolean;
}
function Message({
highlight,
attachContext,
message,
contrast,
@ -72,6 +74,7 @@ function Message({
/>
))}
<MessageBase
highlight={highlight}
head={head && !(message.replies && message.replies.length > 0)}
contrast={contrast}
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 { Text } from "preact-i18n";
@ -17,8 +17,15 @@ export interface BaseMessageProps {
blocked?: boolean;
sending?: boolean;
contrast?: boolean;
highlight?: boolean;
}
const highlight = keyframes`
0% { background: var(--mention); }
66% { background: var(--mention); }
100% { background: transparent; }
`;
export default styled.div<BaseMessageProps>`
display: flex;
overflow: none;
@ -70,6 +77,14 @@ export default styled.div<BaseMessageProps>`
color: var(--error);
`}
${(props) =>
props.highlight &&
css`
animation-name: ${highlight};
animation-timing-function: ease;
animation-duration: 3s;
`}
.detail {
gap: 8px;
display: flex;

View file

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

View file

@ -6,11 +6,15 @@ import { Text } from "preact-i18n";
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 UserShort from "../../user/UserShort";
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 {
channel: string;
@ -25,18 +29,32 @@ export const ReplyBase = styled.div<{
}>`
gap: 4px;
display: flex;
margin: 0 30px;
font-size: 0.8em;
margin-left: 30px;
user-select: none;
margin-bottom: 4px;
align-items: center;
color: var(--secondary-foreground);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
* {
overflow: hidden;
white-space: nowrap;
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;
transform: scaleX(-1);
color: var(--tertiary-foreground);
@ -62,10 +80,23 @@ export const ReplyBase = styled.div<{
`;
export function MessageReply({ index, channel, id }: Props) {
const ctx = useForceUpdate();
const view = useRenderState(channel);
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) {
return (
<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 (
<ReplyBase head={index === 0}>
<Reply size={16} />
<UserShort user={user} size={16} />
{message.attachments && message.attachments.length > 0 && (
<File size={16} />
)}
{message.author === SYSTEM_USER_ID ? (
<SystemMessage message={message} />
) : (
<Markdown
disallowBigEmoji
content={(message.content as string).replace(/\n/g, " ")}
/>
)}
{ user?.relationship === Users.Relationship.Blocked ?
<>Blocked User</> :
<>
{message.author === SYSTEM_USER_ID ? (
<SystemMessage message={message} hideInfo />
) : <>
<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 && (
<File size={16} />
)}
<Markdown
disallowBigEmoji
content={(message.content as string).replace(/\n/g, " ")}
/>
</div>
</>}
</>
}
</ReplyBase>
);
}

View file

@ -73,6 +73,16 @@ export class SingletonRenderer extends EventEmitter3 {
}
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.stale = false;
this.setStateUnguarded({ type: "LOADING" });

View file

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

View file

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

View file

@ -28,6 +28,7 @@ import MessageEditor from "./MessageEditor";
interface Props {
id: string;
state: RenderState;
highlight?: string;
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;
const client = useContext(AppContext);
@ -132,6 +133,7 @@ function MessageRenderer({ id, state, queue }: Props) {
key={message._id}
message={message}
attachContext
highlight={highlight === message._id}
/>,
);
} else {
@ -158,6 +160,7 @@ function MessageRenderer({ id, state, queue }: Props) {
) : undefined
}
attachContext
highlight={highlight === message._id}
/>,
);
}