From 7a5ace2defa7252b3cfc25e4223865f95c7cb82f Mon Sep 17 00:00:00 2001 From: Paul Date: Fri, 9 Jul 2021 09:58:38 +0100 Subject: [PATCH 1/3] Highlight messages we jump to. --- src/components/common/messaging/Message.tsx | 3 +++ src/components/common/messaging/MessageBase.tsx | 17 ++++++++++++++++- .../common/messaging/SystemMessage.tsx | 4 +++- src/pages/channels/messaging/MessageArea.tsx | 7 +++++-- .../channels/messaging/MessageRenderer.tsx | 5 ++++- 5 files changed, 31 insertions(+), 5 deletions(-) diff --git a/src/components/common/messaging/Message.tsx b/src/components/common/messaging/Message.tsx index f2ca22cd..8e87ae28 100644 --- a/src/components/common/messaging/Message.tsx +++ b/src/components/common/messaging/Message.tsx @@ -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({ /> ))} 0)} contrast={contrast} sending={typeof queued !== "undefined"} diff --git a/src/components/common/messaging/MessageBase.tsx b/src/components/common/messaging/MessageBase.tsx index e040168e..56b82e7e 100644 --- a/src/components/common/messaging/MessageBase.tsx +++ b/src/components/common/messaging/MessageBase.tsx @@ -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` display: flex; overflow: none; @@ -70,6 +77,14 @@ export default styled.div` color: var(--error); `} + ${(props) => + props.highlight && + css` + animation-name: ${highlight}; + animation-timing-function: ease; + animation-duration: 3s; + `} + .detail { gap: 8px; display: flex; diff --git a/src/components/common/messaging/SystemMessage.tsx b/src/components/common/messaging/SystemMessage.tsx index c0822924..67e0d499 100644 --- a/src/components/common/messaging/SystemMessage.tsx +++ b/src/components/common/messaging/SystemMessage.tsx @@ -35,9 +35,10 @@ type SystemMessageParsed = interface Props { attachContext?: boolean; message: MessageObject; + highlight?: boolean; } -export function SystemMessage({ attachContext, message }: Props) { +export function SystemMessage({ attachContext, message, highlight }: Props) { const ctx = useForceUpdate(); let data: SystemMessageParsed; @@ -143,6 +144,7 @@ export function SystemMessage({ attachContext, message }: Props) { return ( (); + const [highlight, setHighlight] = useState(undefined); // ? This is the scroll container. const ref = useRef(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) { )} {state.type === "RENDER" && ( - + )} {state.type === "EMPTY" && } diff --git a/src/pages/channels/messaging/MessageRenderer.tsx b/src/pages/channels/messaging/MessageRenderer.tsx index d573578b..7201da1d 100644 --- a/src/pages/channels/messaging/MessageRenderer.tsx +++ b/src/pages/channels/messaging/MessageRenderer.tsx @@ -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} />, ); } From 3075fc8e32f2995e26b65100b0eaae8e569cbcbd Mon Sep 17 00:00:00 2001 From: Paul Date: Fri, 9 Jul 2021 10:10:36 +0100 Subject: [PATCH 2/3] Add links to message replies and load older messages. --- .../common/messaging/SystemMessage.tsx | 7 +- .../messaging/attachments/MessageReply.tsx | 83 ++++++++++++++----- 2 files changed, 67 insertions(+), 23 deletions(-) diff --git a/src/components/common/messaging/SystemMessage.tsx b/src/components/common/messaging/SystemMessage.tsx index 67e0d499..61929399 100644 --- a/src/components/common/messaging/SystemMessage.tsx +++ b/src/components/common/messaging/SystemMessage.tsx @@ -36,9 +36,10 @@ interface Props { attachContext?: boolean; message: MessageObject; highlight?: boolean; + hideInfo?: boolean; } -export function SystemMessage({ attachContext, message, highlight }: Props) { +export function SystemMessage({ attachContext, message, highlight, hideInfo }: Props) { const ctx = useForceUpdate(); let data: SystemMessageParsed; @@ -153,9 +154,9 @@ export function SystemMessage({ attachContext, message, highlight }: Props) { }) : undefined }> - + { !hideInfo && - + } {children} ); diff --git a/src/components/common/messaging/attachments/MessageReply.tsx b/src/components/common/messaging/attachments/MessageReply.tsx index 6fef2bf7..b9b0e6b4 100644 --- a/src/components/common/messaging/attachments/MessageReply.tsx +++ b/src/components/common/messaging/attachments/MessageReply.tsx @@ -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,29 @@ 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; + align-items: center; + flex-direction: row; + + cursor: pointer; + } + + > svg:first-child { flex-shrink: 0; transform: scaleX(-1); color: var(--tertiary-foreground); @@ -62,10 +77,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(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 ( @@ -77,23 +105,38 @@ export function MessageReply({ index, channel, id }: Props) { ); } - const user = useUser(message.author); + const user = useUser(message.author, ctx); + const history = useHistory(); return ( - - {message.attachments && message.attachments.length > 0 && ( - - )} - {message.author === SYSTEM_USER_ID ? ( - - ) : ( - - )} + { user?.relationship === Users.Relationship.Blocked ? + <>Blocked User : + <> + {message.author === SYSTEM_USER_ID ? ( + + ) : <> + +
{ + 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 && ( + + )} + +
+ } + + } ); } From b806902bc4cd5c1f7dea05e5aab6b15de8dded59 Mon Sep 17 00:00:00 2001 From: Paul Date: Fri, 9 Jul 2021 10:15:32 +0100 Subject: [PATCH 3/3] Fix: Prevent clicking on links in reply / channel header. Jump to existing message if exists. --- .../common/messaging/attachments/MessageReply.tsx | 5 ++++- src/lib/renderer/Singleton.ts | 10 ++++++++++ src/pages/channels/ChannelHeader.tsx | 4 ++++ 3 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/components/common/messaging/attachments/MessageReply.tsx b/src/components/common/messaging/attachments/MessageReply.tsx index b9b0e6b4..435f2d54 100644 --- a/src/components/common/messaging/attachments/MessageReply.tsx +++ b/src/components/common/messaging/attachments/MessageReply.tsx @@ -45,10 +45,13 @@ export const ReplyBase = styled.div<{ .content { gap: 4px; display: flex; + cursor: pointer; align-items: center; flex-direction: row; - cursor: pointer; + > * { + pointer-events: none; + } } > svg:first-child { diff --git a/src/lib/renderer/Singleton.ts b/src/lib/renderer/Singleton.ts index 83bb2efe..be9829d1 100644 --- a/src/lib/renderer/Singleton.ts +++ b/src/lib/renderer/Singleton.ts @@ -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" }); diff --git a/src/pages/channels/ChannelHeader.tsx b/src/pages/channels/ChannelHeader.tsx index 31cb705e..95b964b0 100644 --- a/src/pages/channels/ChannelHeader.tsx +++ b/src/pages/channels/ChannelHeader.tsx @@ -58,6 +58,10 @@ const Info = styled.div` font-size: 0.8em; font-weight: 400; color: var(--secondary-foreground); + + > * { + pointer-events: none; + } } `;