feat(messaging): render masqueraded messages

2024-11-21 14:40:58 -05:00 · 2021-11-04 20:55:26 +00:00 · 2021-11-04 20:55:26 +00:00 · d82573b5fc
commit d82573b5fc
parent 7e7f9d0f23
9 changed files with 71 additions and 37 deletions
--- a/2
+++ b/2
@ -1 +1 @@
-1.0.0-vite
+0.5.3-1
--- a/external/lang
+++ b/external/lang
@ -1 +1 @@
-Subproject commit 4dee74edcd717057235301496d41492d9836b51b
+Subproject commit bf0fd028b7702801483d4d491960b3f8af1b8c81
--- a/package.json
+++ b/package.json
@ -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",
--- a/src/components/common/IconBase.tsx
+++ b/src/components/common/IconBase.tsx
@ -3,6 +3,7 @@ import styled, { css } from "styled-components";

 export interface IconBaseProps<T> {
    target?: T;
+    url?: string;
    attachment?: Attachment;

    size: number;
--- a/src/components/common/messaging/Message.tsx
+++ b/src/components/common/messaging/Message.tsx
@ -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}
--- a/src/components/common/user/UserIcon.tsx
+++ b/src/components/common/user/UserIcon.tsx
@ -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
--- a/src/components/common/user/UserShort.tsx
+++ b/src/components/common/user/UserShort.tsx
@ -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>
        );
    },
--- a/src/pages/channels/messaging/MessageRenderer.tsx
+++ b/src/pages/channels/messaging/MessageRenderer.tsx
@ -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,
--- a/yarn.lock
+++ b/yarn.lock
@ -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"