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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,8 +1,11 @@
/* eslint-disable react-hooks/rules-of-hooks */
import { X } from "@styled-icons/boxicons-regular";
import isEqual from "lodash.isequal";
import { observer } from "mobx-react-lite";
import { Masquerade } from "revolt-api/types/Channels";
import { RelationshipStatus } from "revolt-api/types/Users";
import { Message as MessageI } from "revolt.js/dist/maps/Messages";
import { Nullable } from "revolt.js/dist/util/null";
import styled from "styled-components";
import { decodeTime } from "ulid";
@ -96,8 +99,10 @@ const MessageRenderer = observer(({ renderer, queue, highlight }: Props) => {
function compare(
current: string,
curAuthor: string,
currentMasq: Nullable<Masquerade>,
previous: string,
prevAuthor: string,
previousMasq: Nullable<Masquerade>,
) {
const atime = decodeTime(current),
adate = new Date(atime),
@ -113,7 +118,10 @@ const MessageRenderer = observer(({ renderer, queue, highlight }: Props) => {
head = true;
}
head = curAuthor !== prevAuthor || Math.abs(btime - atime) >= 420000;
head =
curAuthor !== prevAuthor ||
Math.abs(btime - atime) >= 420000 ||
!isEqual(currentMasq, previousMasq);
}
let blocked = 0;
@ -135,8 +143,10 @@ const MessageRenderer = observer(({ renderer, queue, highlight }: Props) => {
compare(
message._id,
message.author_id,
message.masquerade,
previous._id,
previous.author_id,
previous.masquerade,
);
}
@ -187,7 +197,14 @@ const MessageRenderer = observer(({ renderer, queue, highlight }: Props) => {
if (nonces.includes(msg.id)) continue;
if (previous) {
compare(msg.id, userId!, previous._id, previous.author_id);
compare(
msg.id,
userId!,
null,
previous._id,
previous.author_id,
previous.masquerade,
);
previous = {
_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"
integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
revolt-api@0.5.3-alpha.0-patch.0:
version "0.5.3-alpha.0-patch.0"
resolved "https://registry.yarnpkg.com/revolt-api/-/revolt-api-0.5.3-alpha.0-patch.0.tgz#158556832843bb06cb06a4df50ffca24ab64be3b"
integrity sha512-76l+kGyrUy6uGMSIziyAHE27r9gD97OEh5gSzb2OJRsQM55TN0NurAsfFIEiB9hUzDDlwsXchtJiqdS4UVAwQw==
revolt-api@^0.5.3-alpha.8-patch.0:
version "0.5.3-alpha.8-patch.0"
resolved "https://registry.yarnpkg.com/revolt-api/-/revolt-api-0.5.3-alpha.8-patch.0.tgz#3c9f981f8100a89aec1299bc110453cf01c51f89"
integrity sha512-ghupcB1nJS7fCiD41L4u+QudFoBWGE381uW4s8cuHsQS3bFXgzAH1lgtjYNoFgrVUekqQAcHWote8Kn2sOABAQ==
revolt.js@5.1.0-alpha.6:
version "5.1.0-alpha.6"
resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-5.1.0-alpha.6.tgz#bdd1c9f3bdd7e0f45e309a3e1fa5239138e1cb1a"
integrity sha512-XqdP24tGc+En9M8ccWkk74z/v2DBtH7OboTbFQBQTjWIT4fLMP/ox+GLdDVWSF7Zg6M/xPrMbg4oL/nP+xqZHQ==
revolt.js@^5.1.0-alpha.7:
version "5.1.0-alpha.7"
resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-5.1.0-alpha.7.tgz#20fe8d3390b95f351361e5bc70e8a1b31467ae69"
integrity sha512-4FLh4MEql0kt83h6++jmQ2F4KGNer3odKkRs7avliu4wEJpQDmUD21anChO41Uv1gHBZMXIFdrYt5OCK384pSg==
dependencies:
axios "^0.21.4"
eventemitter3 "^4.0.7"