Remove twemoji dependency.

Support re-connecting after going / starting offline.
2021-06-22 19:34:52 +01:00
parent 01efee817f
commit 29bb93f399
12 changed files with 108 additions and 276 deletions
--- a/src/components/common/Emoji.tsx
+++ b/src/components/common/Emoji.tsx
@@ -1,22 +1,43 @@
-import twemoji from 'twemoji';
+import { EmojiPacks } from '../../redux/reducers/settings';

 var EMOJI_PACK = 'mutant';
 const REVISION = 3;

-/*export function setEmojiPack(pack: EmojiPacks) {
+export function setEmojiPack(pack: EmojiPacks) {
    EMOJI_PACK = pack;
-}*/
+}
+
+// Originally taken from Twemoji source code,
+// re-written by bree to be more readable.
+function codePoints(rune: string) {
+    const pairs = [];
+    let low = 0;
+    let i = 0;
+    
+    while (i < rune.length) {
+        const charCode = rune.charCodeAt(i++);
+        if (low) {
+            pairs.push(0x10000 + ((low - 0xd800) << 10) + (charCode - 0xdc00));
+            low = 0;
+        } else if (0xd800 <= charCode && charCode <= 0xdbff) {
+            low = charCode;
+        } else {
+            pairs.push(charCode);
+        }
+    }
+    
+    return pairs;
+}

 // Taken from Twemoji source code.
 // scripts/build.js#344
 // grabTheRightIcon(rawText);
 const UFE0Fg = /\uFE0F/g;
 const U200D = String.fromCharCode(0x200D);
-function toCodePoint(emoji: string) {
-    return twemoji.convert.toCodePoint(emoji.indexOf(U200D) < 0 ?
-        emoji.replace(UFE0Fg, '') :
-        emoji
-    );
+function toCodePoint(rune: string) {
+    return codePoints(rune.indexOf(U200D) < 0 ? rune.replace(UFE0Fg, '') : rune)
+        .map((val) => val.toString(16))
+        .join("-")
 }

 function parseEmoji(emoji: string) {
--- a/src/components/common/messaging/embed/Embed.tsx
+++ b/src/components/common/messaging/embed/Embed.tsx
@@ -52,23 +52,6 @@ export default function Embed({ embed }: Props) {

    switch (embed.type) {
        case 'Website': {
-            // ! FIXME: move this to january
-            /*if (embed.url && YOUTUBE_RE.test(embed.url)) {
-                embed.color = '#FF424F';
-            }
-
-            if (embed.url && TWITCH_RE.test(embed.url)) {
-                embed.color = '#7B68EE';
-            }
-
-            if (embed.url && SPOTIFY_RE.test(embed.url)) {
-                embed.color = '#1ABC9C';
-            }
-
-            if (embed.url && SOUNDCLOUD_RE.test(embed.url)) {
-                embed.color = '#FF7F50';
-            }*/
-
            // Determine special embed size.
            let mw, mh;
            let largeMedia = (embed.special && embed.special.type !== 'None') || embed.image?.size === 'Large';
--- a/src/components/navigation/items/Item.module.scss
+++ b/src/components/navigation/items/Item.module.scss
@@ -145,159 +145,3 @@
        background: var(--error);
    }
 }
-
-/* ! FIXME: check if anything is missing, then remove this block
-.olditem {
-    display: flex;
-    user-select: none;
-    align-items: center;
-    flex-direction: row;
-
-    gap: 8px;
-    height: 48px;
-    padding: 0 8px;
-    cursor: pointer;
-    font-size: 16px;
-    border-radius: 6px;
-    box-sizing: content-box;
-    transition: .1s ease background-color;
-
-    color: var(--tertiary-foreground);
-    stroke: var(--tertiary-foreground);
-
-    .avatar {
-        flex-shrink: 0;
-        height: 32px;
-        flex-shrink: 0;
-        padding: 10px 0;
-        box-sizing: content-box;
-
-        img {
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-        }
-    }
-
-    div {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        transition: color .1s ease-in-out;
-
-        &.content {
-            gap: 8px;
-            flex-grow: 1;
-            min-width: 0;
-            display: flex;
-            align-items: center;
-            flex-direction: row;
-
-            svg {
-                flex-shrink: 0;
-            }
-
-            span {
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
-        }
-
-        &.name {
-            flex-grow: 1;
-            display: flex;
-            flex-direction: column;
-            font-size: .90625rem;
-            font-weight: 600;
-
-            .subText {
-                font-size: .6875rem;
-                margin-top: -1px;
-                color: var(--tertiary-foreground);
-                font-weight: 500;
-            }
-        }
-
-        &.unread {
-            width: 6px;
-            height: 6px;
-            margin: 9px;
-            flex-shrink: 0;
-            border-radius: 50%;
-            background: var(--foreground);
-        }
-
-        &.button {
-            flex-shrink: 0;
-
-            .icon {
-                opacity: 0;
-                display: none;
-                transition: 0.1s ease opacity;
-            }
-        }
-    }
-
-    &[data-active="true"] {
-        color: var(--foreground);
-        stroke: var(--foreground);
-        background: var(--hover);
-        cursor: default;
-
-        .subText {
-            color: var(--secondary-foreground) !important;
-        }
-
-        .unread {
-            display: none;
-        }
-    }
-
-    &[data-alert="true"] {
-        color: var(--secondary-foreground);
-    }
-
-    &[data-type="user"] {
-        opacity: 0.4;
-        color: var(--foreground);
-        transition: 0.15s ease opacity;
-        cursor: pointer;
-
-        &[data-online="true"],
-        &:hover {
-            opacity: 1;
-            //background: none;
-        }
-    }
-
-    &[data-size="compact"] {
-        margin-bottom: 2px;
-        height: 32px;
-        transition: border-inline-start .1s ease-in-out;
-        border-inline-start: 4px solid transparent;
-
-        &[data-active="true"] {
-            border-inline-start: 4px solid var(--accent);
-            border-radius: 4px;
-        }
-    }
-
-    &[data-size="small"] {
-        margin-bottom: 2px;
-        height: 42px;
-    }
-
-    &:hover {
-        background: var(--hover);
-
-        div.button .unread {
-            display: none;
-        }
-
-        div.button .icon {
-            opacity: 1;
-            display: block;
-        }
-    }
-}*/
--- a/src/context/intermediate/popovers/ImageViewer.tsx
+++ b/src/context/intermediate/popovers/ImageViewer.tsx
@@ -3,6 +3,8 @@ import Modal from "../../../components/ui/Modal";
 import { useContext, useEffect } from "preact/hooks";
 import { AppContext } from "../../revoltjs/RevoltClient";
 import { Attachment, EmbedImage } from "revolt.js/dist/api/objects";
+import EmbedMediaActions from "../../../components/common/messaging/embed/EmbedMediaActions";
+import AttachmentActions from "../../../components/common/messaging/attachments/AttachmentActions";

 interface Props {
    onClose: () => void;
@@ -11,6 +13,12 @@ interface Props {
 }

 export function ImageViewer({ attachment, embed, onClose }: Props) {
+    // ! FIXME: temp code
+    // ! add proxy function to client
+    function proxyImage(url: string) {
+        return 'https://jan.revolt.chat/proxy?url=' + encodeURIComponent(url);
+    }
+    
    if (attachment && attachment.metadata.type !== "Image") return null;
    const client = useContext(AppContext);

@@ -31,13 +39,13 @@ export function ImageViewer({ attachment, embed, onClose }: Props) {
                { attachment &&
                    <>
                        <img src={client.generateFileURL(attachment)} />
-                        {/*<AttachmentActions attachment={attachment} />*/}
+                        <AttachmentActions attachment={attachment} />
                    </>
                }
                { embed &&
                    <>
-                        {/*<img src={proxyImage(embed.url)} />*/}
-                        {/*<EmbedMediaActions embed={embed} />*/}
+                        <img src={proxyImage(embed.url)} />
+                        <EmbedMediaActions embed={embed} />
                    </>
                }
            </div>
--- a/src/context/intermediate/popovers/UserProfile.tsx
+++ b/src/context/intermediate/popovers/UserProfile.tsx
@@ -1,22 +1,24 @@
 import { decodeTime } from "ulid";
+import { Link, useHistory } from "react-router-dom";
 import { Localizer, Text } from "preact-i18n";
 import styles from "./UserProfile.module.scss";
 import Modal from "../../../components/ui/Modal";
 import { Route } from "revolt.js/dist/api/routes";
 import { Users } from "revolt.js/dist/api/objects";
 import { useIntermediate } from "../Intermediate";
-import { Link, useHistory } from "react-router-dom";
 import { CashStack } from "@styled-icons/bootstrap";
 import Preloader from "../../../components/ui/Preloader";
 import Tooltip from '../../../components/common/Tooltip';
+import IconButton from "../../../components/ui/IconButton";
 import Markdown from '../../../components/markdown/Markdown';
+import { UserPermission } from "revolt.js/dist/api/permissions";
 import UserIcon from '../../../components/common/user/UserIcon';
 import ChannelIcon from '../../../components/common/ChannelIcon';
 import UserStatus from '../../../components/common/user/UserStatus';
 import { Mail, Edit, UserPlus, Shield } from "@styled-icons/feather";
-import { useChannels, useForceUpdate, useUsers } from "../../revoltjs/hooks";
 import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks";
 import { AppContext, ClientStatus, StatusContext } from "../../revoltjs/RevoltClient";
+import { useChannels, useForceUpdate, useUserPermission, useUsers } from "../../revoltjs/hooks";

 interface Props {
    user_id: string;
@@ -43,23 +45,25 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
        undefined | null | Route<"GET", "/users/id/mutual">["response"]
    >(undefined);

+    const history = useHistory();
    const client = useContext(AppContext);
    const status = useContext(StatusContext);
    const [tab, setTab] = useState("profile");
-    const history = useHistory();

    const ctx = useForceUpdate();
    const all_users = useUsers(undefined, ctx);
    const channels = useChannels(undefined, ctx);
-
+    
    const user = all_users.find(x => x!._id === user_id);
    const users = mutual?.users ? all_users.filter(x => mutual.users.includes(x!._id)) : undefined;
-
+    
    if (!user) {
        useEffect(onClose, []);
        return null;
    }

+    const permissions = useUserPermission(user!._id, ctx);
+
    useLayoutEffect(() => {
        if (!user_id) return;
        if (typeof profile !== 'undefined') setProfile(undefined);
@@ -93,17 +97,12 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
        ) {
            setProfile(null);

-            // ! FIXME: in the future, also check if mutual guilds
-            // ! maybe just allow mutual group to allow profile viewing
-            /*if (
-                user.relationship === Users.Relationship.Friend ||
-                user.relationship === Users.Relationship.User
-            ) {*/
+            if (permissions & UserPermission.ViewProfile) {
                client.users
                    .fetchProfile(user_id)
                    .then(data => setProfile(data))
                    .catch(() => {});
-            //}
+            }
        }
    }, [profile, status]);

@@ -157,35 +156,31 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
                                    <Text id="app.context_menu.message_user" />
                                }
                            >
-                                {/*<IconButton
+                                <IconButton
                                    onClick={() => {
                                        onClose();
                                        history.push(`/open/${user_id}`);
-                                    }}
-                                >*/}
+                                    }}>
                                    <Mail size={30} strokeWidth={1.5} />
-                                {/*</IconButton>*/}
+                                </IconButton>
                            </Tooltip>
                        </Localizer>
                    )}
                    {user.relationship === Users.Relationship.User && (
-                        /*<IconButton
+                        <IconButton
                            onClick={() => {
                                onClose();
                                if (dummy) return;
                                history.push(`/settings/profile`);
-                            }}
-                        >*/
+                            }}>
                            <Edit size={28} strokeWidth={1.5} />
-                        /*</IconButton>*/
+                        </IconButton>
                    )}
                    {(user.relationship === Users.Relationship.Incoming ||
                        user.relationship === Users.Relationship.None) && (
-                        /*<IconButton
-                            onClick={() => client.users.addFriend(user.username)}
-                        >*/
+                        <IconButton onClick={() => client.users.addFriend(user.username)}>
                            <UserPlus size={28} strokeWidth={1.5} />
-                        /*</IconButton>*/
+                        </IconButton>
                    )}
                </div>
                <div className={styles.tabs}>
--- a/src/context/revoltjs/events.ts
+++ b/src/context/revoltjs/events.ts
@@ -18,23 +18,28 @@ export function registerEvents({
    operations,
    dispatcher
 }: { operations: ClientOperations } & WithDispatcher, setStatus: StateUpdater<ClientStatus>, client: Client) {
+    function attemptReconnect() {
+        if (preventReconnect) return;
+        function reconnect() {
+            preventUntil = +new Date() + 2000;
+            client.websocket.connect().catch(err => console.error(err));
+        }
+
+        if (+new Date() > preventUntil) {
+            setTimeout(reconnect, 2000);
+        } else {
+            reconnect();
+        }
+    }
+
    const listeners = {
        connecting: () =>
            operations.ready() && setStatus(ClientStatus.CONNECTING),

        dropped: () => {
-            operations.ready() && setStatus(ClientStatus.DISCONNECTED);
-
-            if (preventReconnect) return;
-            function reconnect() {
-                preventUntil = +new Date() + 2000;
-                client.websocket.connect().catch(err => console.error(err));
-            }
-
-            if (+new Date() > preventUntil) {
-                setTimeout(reconnect, 2000);
-            } else {
-                reconnect();
+            if (operations.ready()) {
+                setStatus(ClientStatus.DISCONNECTED);
+                attemptReconnect();
            }
        },

@@ -79,9 +84,7 @@ export function registerEvents({
            }
        },

-        ready: () => {
-            setStatus(ClientStatus.ONLINE);
-        }
+        ready: () => setStatus(ClientStatus.ONLINE)
    };

    let listenerFunc: { [key: string]: Function };
@@ -101,20 +104,31 @@ export function registerEvents({
        client.addListener(listener, (listenerFunc as any)[listener]);
    }

-    /*const online = () =>
-        operations.ready() && setStatus(ClientStatus.RECONNECTING);
-    const offline = () =>
-        operations.ready() && setStatus(ClientStatus.OFFLINE);
+    const online = () => {
+        if (operations.ready()) {
+            setStatus(ClientStatus.RECONNECTING);
+            setReconnectDisallowed(false);
+            attemptReconnect();
+        }
+    };
+    
+    const offline = () => {
+        if (operations.ready()) {
+            setReconnectDisallowed(true);
+            client.websocket.disconnect();
+            setStatus(ClientStatus.OFFLINE);
+        }
+    };

    window.addEventListener("online", online);
    window.addEventListener("offline", offline);

    return () => {
        for (const listener of Object.keys(listenerFunc)) {
-            RevoltClient.removeListener(listener, (listenerFunc as any)[listener]);
+            client.removeListener(listener, (listenerFunc as any)[listener]);
        }

        window.removeEventListener("online", online);
        window.removeEventListener("offline", offline);
-    };*/
+    };
 }
--- a/src/version.ts
+++ b/src/version.ts
@@ -1 +1 @@
-export const APP_VERSION = "1.0.0-vite";
+export const APP_VERSION = "__APP_VERSION__";