forked from abner/for-legacy-web
Change invite rendering logic.
Handle link warnings on embeds. Remove "EDIT!!" 🙏🙏🙏
This commit is contained in:
Paul
@@ -24,15 +24,7 @@ import MessageBase, {
|
||||
import Attachment from "./attachments/Attachment";
|
||||
import { MessageReply } from "./attachments/MessageReply";
|
||||
import Embed from "./embed/Embed";
|
||||
import EmbedInvite from "./embed/EmbedInvite";
|
||||
|
||||
const INVITE_PATHS = [
|
||||
location.hostname + "/invite",
|
||||
"app.revolt.chat/invite",
|
||||
"nightly.revolt.chat/invite",
|
||||
"local.revolt.chat/invite",
|
||||
"rvlt.gg"
|
||||
]
|
||||
import InviteList from "./embed/EmbedInvite";
|
||||
|
||||
interface Props {
|
||||
attachContext?: boolean;
|
||||
@@ -151,28 +143,7 @@ const Message = observer(
|
||||
</span>
|
||||
)}
|
||||
{replacement ?? <Markdown content={content} />}
|
||||
{(() => {
|
||||
let isInvite = false;
|
||||
INVITE_PATHS.forEach(path => {
|
||||
if (content.includes(path)) {
|
||||
isInvite = true;
|
||||
}
|
||||
})
|
||||
if (isInvite) {
|
||||
const inviteRegex = new RegExp("(?:" + INVITE_PATHS.map((path, index) => path.split(".").join("\\.") + (index !== INVITE_PATHS.length - 1 ? "|" : "")).join("") + ")/([A-Za-z0-9]*)", "g");
|
||||
if (inviteRegex.test(content)) {
|
||||
let results: string[] = [];
|
||||
let match: RegExpExecArray | null;
|
||||
inviteRegex.lastIndex = 0;
|
||||
while ((match = inviteRegex.exec(content)) !== null) {
|
||||
if (!results.includes(match[match.length - 1])) {
|
||||
results.push(match[match.length - 1]);
|
||||
}
|
||||
}
|
||||
return results.map(code => <EmbedInvite code={code} />);
|
||||
}
|
||||
}
|
||||
})()}
|
||||
{!queued && <InviteList message={message} />}
|
||||
{queued?.error && (
|
||||
<Overline type="error" error={queued.error} />
|
||||
)}
|
||||
|
||||
@@ -22,7 +22,7 @@ const MAX_PREVIEW_SIZE = 150;
|
||||
export default function Embed({ embed }: Props) {
|
||||
const client = useClient();
|
||||
|
||||
const { openScreen } = useIntermediate();
|
||||
const { openScreen, openLink } = useIntermediate();
|
||||
const maxWidth = Math.min(
|
||||
useContext(MessageAreaWidthContext) - CONTAINER_PADDING,
|
||||
MAX_EMBED_WIDTH,
|
||||
@@ -111,6 +111,10 @@ export default function Embed({ embed }: Props) {
|
||||
{embed.title && (
|
||||
<span>
|
||||
<a
|
||||
onClick={(e) =>
|
||||
openLink(e.currentTarget.href) &&
|
||||
e.preventDefault()
|
||||
}
|
||||
href={embed.url}
|
||||
target={"_blank"}
|
||||
className={styles.title}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
import { autorun } from "mobx";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import { RetrievedInvite } from "revolt-api/types/Invites";
|
||||
import { Message } from "revolt.js/dist/maps/Messages";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { useContext, useEffect, useState } from "preact/hooks";
|
||||
|
||||
@@ -10,8 +11,6 @@ import { defer } from "../../../../lib/defer";
|
||||
|
||||
import { dispatch } from "../../../../redux";
|
||||
|
||||
import { useClient } from "../../../../context/revoltjs/RevoltClient";
|
||||
|
||||
import {
|
||||
AppContext,
|
||||
ClientStatus,
|
||||
@@ -21,10 +20,8 @@ import { takeError } from "../../../../context/revoltjs/util";
|
||||
|
||||
import ServerIcon from "../../../../components/common/ServerIcon";
|
||||
import Button from "../../../../components/ui/Button";
|
||||
import Overline from "../../../ui/Overline";
|
||||
import Preloader from "../../../ui/Preloader";
|
||||
|
||||
|
||||
const EmbedInviteBase = styled.div`
|
||||
width: 400px;
|
||||
height: 80px;
|
||||
@@ -35,22 +32,25 @@ const EmbedInviteBase = styled.div`
|
||||
padding: 0 12px;
|
||||
margin-top: 2px;
|
||||
`;
|
||||
|
||||
const EmbedInviteDetails = styled.div`
|
||||
flex-grow: 1;
|
||||
padding-left: 12px;
|
||||
`;
|
||||
|
||||
const EmbedInviteName = styled.div`
|
||||
font-weight: bold;
|
||||
`;
|
||||
|
||||
const EmbedInviteMemberCount = styled.div`
|
||||
font-size: 0.8em;
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
code: string
|
||||
}
|
||||
code: string;
|
||||
};
|
||||
|
||||
export default function EmbedInvite(props: Props) {
|
||||
export function EmbedInvite(props: Props) {
|
||||
const history = useHistory();
|
||||
const client = useContext(AppContext);
|
||||
const status = useContext(StatusContext);
|
||||
@@ -72,90 +72,120 @@ export default function EmbedInvite(props: Props) {
|
||||
.catch((err) => setError(takeError(err)));
|
||||
}
|
||||
}, [client, code, invite, status]);
|
||||
|
||||
|
||||
if (typeof invite === "undefined") {
|
||||
return error ? (
|
||||
<EmbedInviteBase>
|
||||
<ServerIcon
|
||||
size={55}
|
||||
/>
|
||||
<ServerIcon size={55} />
|
||||
<EmbedInviteDetails>
|
||||
<EmbedInviteName>
|
||||
Invalid invite!
|
||||
</EmbedInviteName>
|
||||
<EmbedInviteName>Invalid invite!</EmbedInviteName>
|
||||
</EmbedInviteDetails>
|
||||
</EmbedInviteBase>
|
||||
) : (
|
||||
<EmbedInviteBase>
|
||||
<Preloader type="ring" />
|
||||
</EmbedInviteBase>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return <EmbedInviteBase>
|
||||
<ServerIcon
|
||||
attachment={invite.server_icon}
|
||||
server_name={invite.server_name}
|
||||
size={55}
|
||||
/>
|
||||
<EmbedInviteDetails>
|
||||
<EmbedInviteName>
|
||||
{invite.server_name}
|
||||
</EmbedInviteName>
|
||||
<EmbedInviteMemberCount>
|
||||
{invite.member_count} members
|
||||
</EmbedInviteMemberCount>
|
||||
</EmbedInviteDetails>
|
||||
{processing ? (
|
||||
<div>
|
||||
<Preloader type="ring" />
|
||||
</div>
|
||||
) : (
|
||||
<Button onClick={async () => {
|
||||
try {
|
||||
setProcessing(true);
|
||||
|
||||
if (invite.type === "Server") {
|
||||
if (
|
||||
client.servers.get(invite.server_id)
|
||||
) {
|
||||
history.push(
|
||||
`/server/${invite.server_id}/channel/${invite.channel_id}`,
|
||||
);
|
||||
}
|
||||
|
||||
const dispose = autorun(() => {
|
||||
const server = client.servers.get(
|
||||
invite.server_id,
|
||||
);
|
||||
|
||||
defer(() => {
|
||||
if (server) {
|
||||
dispatch({
|
||||
type: "UNREADS_MARK_MULTIPLE_READ",
|
||||
channels:
|
||||
server.channel_ids,
|
||||
});
|
||||
return (
|
||||
<EmbedInviteBase>
|
||||
<ServerIcon
|
||||
attachment={invite.server_icon}
|
||||
server_name={invite.server_name}
|
||||
size={55}
|
||||
/>
|
||||
<EmbedInviteDetails>
|
||||
<EmbedInviteName>{invite.server_name}</EmbedInviteName>
|
||||
<EmbedInviteMemberCount>
|
||||
{invite.member_count} members
|
||||
</EmbedInviteMemberCount>
|
||||
</EmbedInviteDetails>
|
||||
{processing ? (
|
||||
<div>
|
||||
<Preloader type="ring" />
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
onClick={async () => {
|
||||
try {
|
||||
setProcessing(true);
|
||||
|
||||
if (invite.type === "Server") {
|
||||
if (client.servers.get(invite.server_id)) {
|
||||
history.push(
|
||||
`/server/${server._id}/channel/${invite.channel_id}`,
|
||||
`/server/${invite.server_id}/channel/${invite.channel_id}`,
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
dispose();
|
||||
});
|
||||
}
|
||||
const dispose = autorun(() => {
|
||||
const server = client.servers.get(
|
||||
invite.server_id,
|
||||
);
|
||||
|
||||
await client.joinInvite(code);
|
||||
setProcessing(false);
|
||||
} catch (err) {
|
||||
setError(takeError(err));
|
||||
setProcessing(false);
|
||||
}
|
||||
}}>
|
||||
{client.servers.get(invite.server_id) ? "Joined" : "Join"}
|
||||
</Button>
|
||||
)}
|
||||
</EmbedInviteBase>
|
||||
defer(() => {
|
||||
if (server) {
|
||||
dispatch({
|
||||
type: "UNREADS_MARK_MULTIPLE_READ",
|
||||
channels: server.channel_ids,
|
||||
});
|
||||
|
||||
history.push(
|
||||
`/server/${server._id}/channel/${invite.channel_id}`,
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
dispose();
|
||||
});
|
||||
}
|
||||
|
||||
await client.joinInvite(code);
|
||||
setProcessing(false);
|
||||
} catch (err) {
|
||||
setError(takeError(err));
|
||||
setProcessing(false);
|
||||
}
|
||||
}}>
|
||||
{client.servers.get(invite.server_id) ? "Joined" : "Join"}
|
||||
</Button>
|
||||
)}
|
||||
</EmbedInviteBase>
|
||||
);
|
||||
}
|
||||
|
||||
const INVITE_PATHS = [
|
||||
`${location.hostname}/invite`,
|
||||
"app.revolt.chat/invite",
|
||||
"nightly.revolt.chat/invite",
|
||||
"local.revolt.chat/invite",
|
||||
"rvlt.gg",
|
||||
];
|
||||
|
||||
const RE_INVITE = new RegExp(
|
||||
`(?:${INVITE_PATHS.map((x) => x.replaceAll(".", "\\.")).join(
|
||||
"|",
|
||||
)})/([A-Za-z0-9]*)`,
|
||||
"g",
|
||||
);
|
||||
|
||||
export default observer(({ message }: { message: Message }) => {
|
||||
if (typeof message.content !== "string") return null;
|
||||
const matches = [...message.content.matchAll(RE_INVITE)];
|
||||
|
||||
if (matches.length > 0) {
|
||||
const entries = [
|
||||
...new Set(matches.slice(0, 5).map((x) => x[1])),
|
||||
].slice(0, 5);
|
||||
|
||||
return (
|
||||
<>
|
||||
{entries.map((entry) => (
|
||||
<EmbedInvite key={entry} code={entry} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user