feat(messaging): render masqueraded messages

This commit is contained in:
Paul 2021-11-04 20:55:26 +00:00
parent 7e7f9d0f23
commit d82573b5fc
9 changed files with 71 additions and 37 deletions

View file

@ -1 +1 @@
1.0.0-vite 0.5.3-1

2
external/lang vendored

@ -1 +1 @@
Subproject commit 4dee74edcd717057235301496d41492d9836b51b Subproject commit bf0fd028b7702801483d4d491960b3f8af1b8c81

View file

@ -53,6 +53,7 @@
"@fontsource/comic-neue": "^4.4.5", "@fontsource/comic-neue": "^4.4.5",
"@fontsource/fira-code": "^4.4.5", "@fontsource/fira-code": "^4.4.5",
"@fontsource/inter": "^4.4.5", "@fontsource/inter": "^4.4.5",
"@fontsource/jetbrains-mono": "^4.4.5",
"@fontsource/lato": "^4.4.5", "@fontsource/lato": "^4.4.5",
"@fontsource/montserrat": "^4.4.5", "@fontsource/montserrat": "^4.4.5",
"@fontsource/noto-sans": "^4.4.5", "@fontsource/noto-sans": "^4.4.5",
@ -65,7 +66,6 @@
"@fontsource/space-mono": "^4.4.5", "@fontsource/space-mono": "^4.4.5",
"@fontsource/ubuntu": "^4.4.5", "@fontsource/ubuntu": "^4.4.5",
"@fontsource/ubuntu-mono": "^4.4.5", "@fontsource/ubuntu-mono": "^4.4.5",
"@fontsource/jetbrains-mono": "^4.4.5",
"@hcaptcha/react-hcaptcha": "^0.3.6", "@hcaptcha/react-hcaptcha": "^0.3.6",
"@preact/preset-vite": "^2.0.0", "@preact/preset-vite": "^2.0.0",
"@rollup/plugin-replace": "^2.4.2", "@rollup/plugin-replace": "^2.4.2",
@ -124,8 +124,8 @@
"react-virtualized-auto-sizer": "^1.0.5", "react-virtualized-auto-sizer": "^1.0.5",
"react-virtuoso": "^1.10.4", "react-virtuoso": "^1.10.4",
"redux": "^4.1.0", "redux": "^4.1.0",
"revolt-api": "0.5.3-alpha.0-patch.0", "revolt-api": "^0.5.3-alpha.8-patch.0",
"revolt.js": "5.1.0-alpha.6", "revolt.js": "^5.1.0-alpha.7",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"sass": "^1.35.1", "sass": "^1.35.1",
"shade-blend-color": "^1.0.0", "shade-blend-color": "^1.0.0",

View file

@ -3,6 +3,7 @@ import styled, { css } from "styled-components";
export interface IconBaseProps<T> { export interface IconBaseProps<T> {
target?: T; target?: T;
url?: string;
attachment?: Attachment; attachment?: Attachment;
size: number; size: number;

View file

@ -130,6 +130,7 @@ const Message = observer(
<MessageInfo> <MessageInfo>
{head ? ( {head ? (
<UserIcon <UserIcon
url={message.generateMasqAvatarURL()}
target={user} target={user}
size={36} size={36}
onContextMenu={userContext} onContextMenu={userContext}
@ -145,6 +146,7 @@ const Message = observer(
{head && ( {head && (
<span className="detail"> <span className="detail">
<Username <Username
override={message.masquerade?.name}
className="author" className="author"
user={user} user={user}
onContextMenu={userContext} onContextMenu={userContext}

View file

@ -11,9 +11,10 @@ import { useContext } from "preact/hooks";
import { ThemeContext } from "../../../context/Theme"; import { ThemeContext } from "../../../context/Theme";
import { useClient } from "../../../context/revoltjs/RevoltClient"; import { useClient } from "../../../context/revoltjs/RevoltClient";
import IconBase, { IconBaseProps } from "../IconBase";
import fallback from "../assets/user.png"; import fallback from "../assets/user.png";
import IconBase, { IconBaseProps } from "../IconBase";
type VoiceStatus = "muted" | "deaf"; type VoiceStatus = "muted" | "deaf";
interface Props extends IconBaseProps<User> { interface Props extends IconBaseProps<User> {
mask?: string; mask?: string;
@ -76,6 +77,8 @@ export default observer(
...svgProps ...svgProps
} = props; } = props;
let { url } = props;
if (!url) {
let override; let override;
if (target && showServerIdentity) { if (target && showServerIdentity) {
const { server } = useParams<{ server?: string }>(); const { server } = useParams<{ server?: string }>();
@ -91,12 +94,13 @@ export default observer(
} }
} }
const iconURL = url =
client.generateFileURL( client.generateFileURL(
override ?? target?.avatar ?? attachment, override ?? target?.avatar ?? attachment,
{ max_side: 256 }, { max_side: 256 },
animate, animate,
) ?? (target ? target.defaultAvatarURL : fallback); ) ?? (target ? target.defaultAvatarURL : fallback);
}
return ( return (
<IconBase <IconBase
@ -114,7 +118,7 @@ export default observer(
height="32" height="32"
class="icon" class="icon"
mask={mask ?? (status ? "url(#user)" : undefined)}> mask={mask ?? (status ? "url(#user)" : undefined)}>
{<img src={iconURL} draggable={false} loading="lazy" />} {<img src={url} draggable={false} loading="lazy" />}
</foreignObject> </foreignObject>
{props.status && ( {props.status && (
<circle <circle

View file

@ -29,11 +29,19 @@ const BotBadge = styled.div`
type UsernameProps = JSX.HTMLAttributes<HTMLElement> & { type UsernameProps = JSX.HTMLAttributes<HTMLElement> & {
user?: User; user?: User;
override?: string;
prefixAt?: boolean; prefixAt?: boolean;
showServerIdentity?: boolean | "both"; showServerIdentity?: boolean | "both";
}; };
export const Username = observer( export const Username = observer(
({ user, prefixAt, showServerIdentity, ...otherProps }: UsernameProps) => { ({
user,
override,
prefixAt,
showServerIdentity,
...otherProps
}: UsernameProps) => {
let username = user?.username; let username = user?.username;
let color; let color;
@ -75,7 +83,7 @@ export const Username = observer(
return ( return (
<> <>
<span {...otherProps} style={{ color }}> <span {...otherProps} style={{ color }}>
{username ?? ( {override ?? username ?? (
<Text id="app.main.channel.unknown_user" /> <Text id="app.main.channel.unknown_user" />
)} )}
</span> </span>
@ -89,7 +97,9 @@ export const Username = observer(
return ( return (
<span {...otherProps} style={{ color }}> <span {...otherProps} style={{ color }}>
{prefixAt ? "@" : undefined} {prefixAt ? "@" : undefined}
{username ?? <Text id="app.main.channel.unknown_user" />} {override ?? username ?? (
<Text id="app.main.channel.unknown_user" />
)}
</span> </span>
); );
}, },

View file

@ -1,8 +1,11 @@
/* eslint-disable react-hooks/rules-of-hooks */ /* eslint-disable react-hooks/rules-of-hooks */
import { X } from "@styled-icons/boxicons-regular"; import { X } from "@styled-icons/boxicons-regular";
import isEqual from "lodash.isequal";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { Masquerade } from "revolt-api/types/Channels";
import { RelationshipStatus } from "revolt-api/types/Users"; import { RelationshipStatus } from "revolt-api/types/Users";
import { Message as MessageI } from "revolt.js/dist/maps/Messages"; import { Message as MessageI } from "revolt.js/dist/maps/Messages";
import { Nullable } from "revolt.js/dist/util/null";
import styled from "styled-components"; import styled from "styled-components";
import { decodeTime } from "ulid"; import { decodeTime } from "ulid";
@ -96,8 +99,10 @@ const MessageRenderer = observer(({ renderer, queue, highlight }: Props) => {
function compare( function compare(
current: string, current: string,
curAuthor: string, curAuthor: string,
currentMasq: Nullable<Masquerade>,
previous: string, previous: string,
prevAuthor: string, prevAuthor: string,
previousMasq: Nullable<Masquerade>,
) { ) {
const atime = decodeTime(current), const atime = decodeTime(current),
adate = new Date(atime), adate = new Date(atime),
@ -113,7 +118,10 @@ const MessageRenderer = observer(({ renderer, queue, highlight }: Props) => {
head = true; head = true;
} }
head = curAuthor !== prevAuthor || Math.abs(btime - atime) >= 420000; head =
curAuthor !== prevAuthor ||
Math.abs(btime - atime) >= 420000 ||
!isEqual(currentMasq, previousMasq);
} }
let blocked = 0; let blocked = 0;
@ -135,8 +143,10 @@ const MessageRenderer = observer(({ renderer, queue, highlight }: Props) => {
compare( compare(
message._id, message._id,
message.author_id, message.author_id,
message.masquerade,
previous._id, previous._id,
previous.author_id, previous.author_id,
previous.masquerade,
); );
} }
@ -187,7 +197,14 @@ const MessageRenderer = observer(({ renderer, queue, highlight }: Props) => {
if (nonces.includes(msg.id)) continue; if (nonces.includes(msg.id)) continue;
if (previous) { if (previous) {
compare(msg.id, userId!, previous._id, previous.author_id); compare(
msg.id,
userId!,
null,
previous._id,
previous.author_id,
previous.masquerade,
);
previous = { previous = {
_id: msg.id, _id: msg.id,

View file

@ -3647,15 +3647,15 @@ reusify@^1.0.4:
resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76" resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw== integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
revolt-api@0.5.3-alpha.0-patch.0: revolt-api@^0.5.3-alpha.8-patch.0:
version "0.5.3-alpha.0-patch.0" version "0.5.3-alpha.8-patch.0"
resolved "https://registry.yarnpkg.com/revolt-api/-/revolt-api-0.5.3-alpha.0-patch.0.tgz#158556832843bb06cb06a4df50ffca24ab64be3b" resolved "https://registry.yarnpkg.com/revolt-api/-/revolt-api-0.5.3-alpha.8-patch.0.tgz#3c9f981f8100a89aec1299bc110453cf01c51f89"
integrity sha512-76l+kGyrUy6uGMSIziyAHE27r9gD97OEh5gSzb2OJRsQM55TN0NurAsfFIEiB9hUzDDlwsXchtJiqdS4UVAwQw== integrity sha512-ghupcB1nJS7fCiD41L4u+QudFoBWGE381uW4s8cuHsQS3bFXgzAH1lgtjYNoFgrVUekqQAcHWote8Kn2sOABAQ==
revolt.js@5.1.0-alpha.6: revolt.js@^5.1.0-alpha.7:
version "5.1.0-alpha.6" version "5.1.0-alpha.7"
resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-5.1.0-alpha.6.tgz#bdd1c9f3bdd7e0f45e309a3e1fa5239138e1cb1a" resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-5.1.0-alpha.7.tgz#20fe8d3390b95f351361e5bc70e8a1b31467ae69"
integrity sha512-XqdP24tGc+En9M8ccWkk74z/v2DBtH7OboTbFQBQTjWIT4fLMP/ox+GLdDVWSF7Zg6M/xPrMbg4oL/nP+xqZHQ== integrity sha512-4FLh4MEql0kt83h6++jmQ2F4KGNer3odKkRs7avliu4wEJpQDmUD21anChO41Uv1gHBZMXIFdrYt5OCK384pSg==
dependencies: dependencies:
axios "^0.21.4" axios "^0.21.4"
eventemitter3 "^4.0.7" eventemitter3 "^4.0.7"