HMC/handmade-revolt
2
0
Fork 0
forked from abner/for-legacy-web
Code Pull Requests Actions Activity

Format and automatically fix linted code.

Browse Source
This commit is contained in:
Paul
2021-07-10 15:57:29 +01:00
parent 392cb23541
commit 7586b365fe
87 changed files with 789 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/components/common/AgeGate.tsx
View File

@@ -1,12 +1,16 @@
import { useHistory } from "react-router-dom";
import { useState } from "preact/hooks";
import styled from "styled-components";
import { dispatch, getState } from "../../redux";
import Checkbox from "../ui/Checkbox";
import Button from "../ui/Button";
import { Children } from "../../types/Preact";
import { Channel } from "revolt.js";
import styled from "styled-components";
import { Text } from "preact-i18n";
import { useState } from "preact/hooks";
import { dispatch, getState } from "../../redux";
import Button from "../ui/Button";
import Checkbox from "../ui/Checkbox";
import { Children } from "../../types/Preact";
const Base = styled.div`
display: flex;
@@ -38,53 +42,66 @@ type Props = {
gated: boolean;
children: Children;
} & {
type: 'channel';
type: "channel";
channel: Channel;
}
};
export default function AgeGate(props: Props) {
const history = useHistory();
const [consent, setConsent] = useState(getState().sectionToggle['nsfw'] ?? false);
const [consent, setConsent] = useState(
getState().sectionToggle["nsfw"] ?? false,
);
const [ageGate, setAgeGate] = useState(false);
if (ageGate || !props.gated) {
return <>{ props.children }</>;
} else {
if (!(props.channel.channel_type === 'Group' || props.channel.channel_type === 'TextChannel')) return <>{ props.children }</>;
return <>{props.children}</>;
}
if (
!(
props.channel.channel_type === "Group" ||
props.channel.channel_type === "TextChannel"
)
)
return <>{props.children}</>;
return (
<Base>
<img
src={"https://static.revolt.chat/emoji/mutant/26a0.svg"}
draggable={false}
/>
<h2>{props.channel.name}</h2>
<span className="subtext">
<Text id={`app.main.channel.nsfw.${props.type}.marked`} />{" "}
<a href="#"><Text id={`app.main.channel.nsfw.learn_more`} /></a>
</span>
return (
<Base>
<img
src={"https://static.revolt.chat/emoji/mutant/26a0.svg"}
draggable={false}
/>
<h2>{props.channel.name}</h2>
<span className="subtext">
<Text id={`app.main.channel.nsfw.${props.type}.marked`} />{" "}
<a href="#">
<Text id={`app.main.channel.nsfw.learn_more`} />
</a>
</span>
<Checkbox checked={consent} onChange={(v) => {
<Checkbox
checked={consent}
onChange={(v) => {
setConsent(v);
if (v) {
dispatch({ type: 'SECTION_TOGGLE_SET', id: 'nsfw', state: true });
dispatch({
type: "SECTION_TOGGLE_SET",
id: "nsfw",
state: true,
});
} else {
dispatch({ type: 'SECTION_TOGGLE_UNSET', id: 'nsfw' });
dispatch({ type: "SECTION_TOGGLE_UNSET", id: "nsfw" });
}
}}>
<Text id="app.main.channel.nsfw.confirm" />
</Checkbox>
<div className="actions">
<Button contrast onClick={() => history.goBack()}>
<Text id="app.special.modals.actions.back" />
</Button>
<Button
contrast
onClick={() => consent && setAgeGate(true)}>
<Text id={`app.main.channel.nsfw.${props.type}.confirm`} />
</Button>
</div>
</Base>
);
}
<Text id="app.main.channel.nsfw.confirm" />
</Checkbox>
<div className="actions">
<Button contrast onClick={() => history.goBack()}>
<Text id="app.special.modals.actions.back" />
</Button>
<Button contrast onClick={() => consent && setAgeGate(true)}>
<Text id={`app.main.channel.nsfw.${props.type}.confirm`} />
</Button>
</div>
</Base>
);
}

38
src/components/common/AutoComplete.tsx
View File

@@ -58,10 +58,10 @@ export function useAutoComplete(
el: HTMLTextAreaElement,
): ["emoji" | "user" | "channel", string, number] | undefined {
if (el.selectionStart === el.selectionEnd) {
let cursor = el.selectionStart;
let content = el.value.slice(0, cursor);
const cursor = el.selectionStart;
const content = el.value.slice(0, cursor);
let valid = /\w/;
const valid = /\w/;
let j = content.length - 1;
if (content[j] === "@") {
@@ -75,10 +75,10 @@ export function useAutoComplete(
}
if (j === -1) return;
let current = content[j];
const current = content[j];
if (current === ":" || current === "@" || current === "#") {
let search = content.slice(j + 1, content.length);
const search = content.slice(j + 1, content.length);
if (search.length > 0) {
return [
current === "#"
@@ -97,19 +97,19 @@ export function useAutoComplete(
function onChange(ev: JSX.TargetedEvent<HTMLTextAreaElement, Event>) {
const el = ev.currentTarget;
let result = findSearchString(el);
const result = findSearchString(el);
if (result) {
let [type, search] = result;
const [type, search] = result;
const regex = new RegExp(search, "i");
if (type === "emoji") {
// ! FIXME: we should convert it to a Binary Search Tree and use that
let matches = Object.keys(emojiDictionary)
const matches = Object.keys(emojiDictionary)
.filter((emoji: string) => emoji.match(regex))
.splice(0, 5);
if (matches.length > 0) {
let currentPosition =
const currentPosition =
state.type !== "none" ? state.selected : 0;
setState({
@@ -130,7 +130,9 @@ export function useAutoComplete(
users = client.users.toArray();
break;
case "channel": {
let channel = client.channels.get(searchClues.users.id);
const channel = client.channels.get(
searchClues.users.id,
);
switch (channel?.channel_type) {
case "Group":
case "DirectMessage":
@@ -162,7 +164,7 @@ export function useAutoComplete(
users = users.filter((x) => x._id !== SYSTEM_USER_ID);
let matches = (
const matches = (
search.length > 0
? users.filter((user) =>
user.username.toLowerCase().match(regex),
@@ -173,7 +175,7 @@ export function useAutoComplete(
.filter((x) => typeof x !== "undefined");
if (matches.length > 0) {
let currentPosition =
const currentPosition =
state.type !== "none" ? state.selected : 0;
setState({
@@ -188,14 +190,14 @@ export function useAutoComplete(
}
if (type === "channel" && searchClues?.channels) {
let channels = client.servers
const channels = client.servers
.get(searchClues.channels.server)
?.channels.map((x) => client.channels.get(x))
.filter(
(x) => typeof x !== "undefined",
) as Channels.TextChannel[];
let matches = (
const matches = (
search.length > 0
? channels.filter((channel) =>
channel.name.toLowerCase().match(regex),
@@ -206,7 +208,7 @@ export function useAutoComplete(
.filter((x) => typeof x !== "undefined");
if (matches.length > 0) {
let currentPosition =
const currentPosition =
state.type !== "none" ? state.selected : 0;
setState({
@@ -228,11 +230,11 @@ export function useAutoComplete(
function selectCurrent(el: HTMLTextAreaElement) {
if (state.type !== "none") {
let result = findSearchString(el);
const result = findSearchString(el);
if (result) {
let [_type, search, index] = result;
const [_type, search, index] = result;
let content = el.value.split("");
const content = el.value.split("");
if (state.type === "emoji") {
content.splice(
index,

3
src/components/common/ChannelIcon.tsx
View File

@@ -45,9 +45,8 @@ export default function ChannelIcon(
if (isServerChannel) {
if (target?.channel_type === "VoiceChannel") {
return <VolumeFull size={size} />;
} else {
return <Hash size={size} />;
}
return <Hash size={size} />;
}
}

4
src/components/common/Emoji.tsx
View File

@@ -1,6 +1,6 @@
import { EmojiPacks } from "../../redux/reducers/settings";
var EMOJI_PACK = "mutant";
let EMOJI_PACK = "mutant";
const REVISION = 3;
export function setEmojiPack(pack: EmojiPacks) {
@@ -41,7 +41,7 @@ function toCodePoint(rune: string) {
}
function parseEmoji(emoji: string) {
let codepoint = toCodePoint(emoji);
const codepoint = toCodePoint(emoji);
return `https://static.revolt.chat/emoji/${EMOJI_PACK}/${codepoint}.svg?rev=${REVISION}`;
}

2
src/components/common/UpdateIndicator.tsx
View File

@@ -10,7 +10,7 @@ import IconButton from "../ui/IconButton";
import { updateSW } from "../../main";
var pendingUpdate = false;
let pendingUpdate = false;
internalSubscribe("PWA", "update", () => (pendingUpdate = true));
export default function UpdateIndicator() {

27
src/components/common/messaging/MessageBase.tsx
View File

@@ -219,19 +219,18 @@ export function MessageDetail({
</span>
</>
);
} else {
return (
<>
<time>
<i className="copyBracket">[</i>
{dayjs(decodeTime(message._id)).format(
dict.dayjs.timeFormat,
)}
<i className="copyBracket">]</i>
</time>
</>
);
}
return (
<>
<time>
<i className="copyBracket">[</i>
{dayjs(decodeTime(message._id)).format(
dict.dayjs.timeFormat,
)}
<i className="copyBracket">]</i>
</time>
</>
);
}
return (
@@ -239,7 +238,9 @@ export function MessageDetail({
<time>{dayjs(decodeTime(message._id)).calendar()}</time>
{message.edited && (
<Tooltip content={dayjs(message.edited).format("LLLL")}>
<span className="edited"><Text id="app.main.channel.edited" /></span>
<span className="edited">
<Text id="app.main.channel.edited" />
</span>
</Tooltip>
)}
</DetailBase>

7
src/components/common/messaging/MessageBox.tsx
View File

@@ -232,7 +232,7 @@ export default function MessageBox({ channel }: Props) {
async function sendFile(content: string) {
if (uploadState.type !== "attached") return;
let attachments: string[] = [];
const attachments: string[] = [];
const cancel = Axios.CancelToken.source();
const files = uploadState.files;
@@ -502,8 +502,9 @@ export default function MessageBox({ channel }: Props) {
<HappyAlt size={20} />
</IconButton>*/}
<IconButton
className="mobile" onClick={send}
onMouseDown={e => e.preventDefault()}>
className="mobile"
onClick={send}
onMouseDown={(e) => e.preventDefault()}>
<Send size={20} />
</IconButton>
</Action>

17
src/components/common/messaging/SystemMessage.tsx
View File

@@ -39,11 +39,16 @@ interface Props {
hideInfo?: boolean;
}
export function SystemMessage({ attachContext, message, highlight, hideInfo }: Props) {
export function SystemMessage({
attachContext,
message,
highlight,
hideInfo,
}: Props) {
const ctx = useForceUpdate();
let data: SystemMessageParsed;
let content = message.content;
const content = message.content;
if (typeof content === "object") {
switch (content.type) {
case "text":
@@ -154,9 +159,11 @@ export function SystemMessage({ attachContext, message, highlight, hideInfo }: P
})
: undefined
}>
{ !hideInfo && <MessageInfo>
<MessageDetail message={message} position="left" />
</MessageInfo> }
{!hideInfo && (
<MessageInfo>
<MessageDetail message={message} position="left" />
</MessageInfo>
)}
<SystemContent>{children}</SystemContent>
</MessageBase>
);

43
src/components/common/messaging/attachments/Attachment.tsx
View File

@@ -8,9 +8,9 @@ import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { AppContext } from "../../../../context/revoltjs/RevoltClient";
import AttachmentActions from "./AttachmentActions";
import TextFile from "./TextFile";
import { SizedGrid } from "./Grid";
import Spoiler from "./Spoiler";
import TextFile from "./TextFile";
interface Props {
attachment: AttachmentRJS;
@@ -34,9 +34,16 @@ export default function Attachment({ attachment, hasContent }: Props) {
switch (metadata.type) {
case "Image": {
return (
<SizedGrid width={metadata.width} height={metadata.height}
className={classNames({ [styles.margin]: hasContent, spoiler })}>
<img src={url} alt={filename}
<SizedGrid
width={metadata.width}
height={metadata.height}
className={classNames({
[styles.margin]: hasContent,
spoiler,
})}>
<img
src={url}
alt={filename}
className={styles.image}
loading="lazy"
onClick={() =>
@@ -44,20 +51,28 @@ export default function Attachment({ attachment, hasContent }: Props) {
}
onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank")
} />
{ spoiler && <Spoiler set={setSpoiler} /> }
}
/>
{spoiler && <Spoiler set={setSpoiler} />}
</SizedGrid>
)
);
}
case "Video": {
return (
<div className={classNames(styles.container, { [styles.margin]: hasContent })}
style={{ '--width': metadata.width + 'px' }}>
<div
className={classNames(styles.container, {
[styles.margin]: hasContent,
})}
style={{ "--width": `${metadata.width}px` }}>
<AttachmentActions attachment={attachment} />
<SizedGrid width={metadata.width} height={metadata.height}
<SizedGrid
width={metadata.width}
height={metadata.height}
className={classNames({ spoiler })}>
<video src={url} alt={filename}
<video
src={url}
alt={filename}
controls
loading="lazy"
width={metadata.width}
@@ -66,10 +81,10 @@ export default function Attachment({ attachment, hasContent }: Props) {
ev.button === 1 && window.open(url, "_blank")
}
/>
{ spoiler && <Spoiler set={setSpoiler} /> }
{spoiler && <Spoiler set={setSpoiler} />}
</SizedGrid>
</div>
)
);
}
case "Audio": {
@@ -82,7 +97,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
</div>
);
}
case "Text": {
return (
<div

22
src/components/common/messaging/attachments/AttachmentActions.tsx
View File

@@ -37,12 +37,13 @@ export default function AttachmentActions({ attachment }: Props) {
<div className={classNames(styles.actions, styles.imageAction)}>
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>
{metadata.width + "x" + metadata.height} ({filesize})
{`${metadata.width}x${metadata.height}`} ({filesize})
</span>
<a
href={open_url}
target="_blank"
className={styles.iconType}>
className={styles.iconType}
rel="noreferrer">
<IconButton>
<LinkExternal size={24} />
</IconButton>
@@ -51,7 +52,8 @@ export default function AttachmentActions({ attachment }: Props) {
href={download_url}
className={styles.downloadIcon}
download
target="_blank">
target="_blank"
rel="noreferrer">
<IconButton>
<Download size={24} />
</IconButton>
@@ -68,7 +70,8 @@ export default function AttachmentActions({ attachment }: Props) {
href={download_url}
className={styles.downloadIcon}
download
target="_blank">
target="_blank"
rel="noreferrer">
<IconButton>
<Download size={24} />
</IconButton>
@@ -81,13 +84,14 @@ export default function AttachmentActions({ attachment }: Props) {
<Video size={24} className={styles.iconType} />
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>
{metadata.width + "x" + metadata.height} ({filesize})
{`${metadata.width}x${metadata.height}`} ({filesize})
</span>
<a
href={download_url}
className={styles.downloadIcon}
download
target="_blank">
target="_blank"
rel="noreferrer">
<IconButton>
<Download size={24} />
</IconButton>
@@ -104,7 +108,8 @@ export default function AttachmentActions({ attachment }: Props) {
<a
href={open_url}
target="_blank"
className={styles.externalType}>
className={styles.externalType}
rel="noreferrer">
<IconButton>
<LinkExternal size={24} />
</IconButton>
@@ -114,7 +119,8 @@ export default function AttachmentActions({ attachment }: Props) {
href={download_url}
className={styles.downloadIcon}
download
target="_blank">
target="_blank"
rel="noreferrer">
<IconButton>
<Download size={24} />
</IconButton>

33
src/components/common/messaging/attachments/Grid.tsx
View File

@@ -1,4 +1,5 @@
import styled from "styled-components";
import { Children } from "../../../../types/Preact";
const Grid = styled.div`
@@ -9,7 +10,8 @@ const Grid = styled.div`
max-height: min(var(--attachment-max-height), var(--height));
aspect-ratio: var(--aspect-ratio);
img, video {
img,
video {
min-width: 100%;
min-height: 100%;
@@ -23,35 +25,40 @@ const Grid = styled.div`
}
&.spoiler {
img, video {
img,
video {
filter: blur(44px);
}
border-radius: var(--border-radius);
}
`;
export default Grid;
type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as' | 'style'> & {
style?: JSX.CSSProperties,
children?: Children,
width: number,
height: number,
type Props = Omit<
JSX.HTMLAttributes<HTMLDivElement>,
"children" | "as" | "style"
> & {
style?: JSX.CSSProperties;
children?: Children;
width: number;
height: number;
};
export function SizedGrid(props: Props) {
const { width, height, children, style, ...divProps } = props;
return (
<Grid {...divProps}
<Grid
{...divProps}
style={{
...style,
"--width": width + 'px',
"--height": height + 'px',
"--width": `${width}px`,
"--height": `${height}px`,
"--aspect-ratio": width / height,
}}>
{ children }
{children}
</Grid>
)
);
}

80
src/components/common/messaging/attachments/MessageReply.tsx
View File

@@ -1,21 +1,21 @@
import { Reply } from "@styled-icons/boxicons-regular";
import { File } from "@styled-icons/boxicons-solid";
import { useHistory } from "react-router-dom";
import { SYSTEM_USER_ID } from "revolt.js";
import { Users } from "revolt.js/dist/api/objects";
import styled, { css } from "styled-components";
import { Text } from "preact-i18n";
import { useEffect, useLayoutEffect, useState } from "preact/hooks";
import { useRenderState } from "../../../../lib/renderer/Singleton";
import { useForceUpdate, useUser } from "../../../../context/revoltjs/hooks";
import { mapMessage, MessageObject } from "../../../../context/revoltjs/util";
import Markdown from "../../../markdown/Markdown";
import UserShort from "../../user/UserShort";
import { SystemMessage } from "../SystemMessage";
import { Users } from "revolt.js/dist/api/objects";
import { useHistory } from "react-router-dom";
import { useEffect, useLayoutEffect, useState } from "preact/hooks";
import { mapMessage, MessageObject } from "../../../../context/revoltjs/util";
interface Props {
channel: string;
@@ -73,7 +73,7 @@ export const ReplyBase = styled.div<{
align-items: center;
flex-direction: row;
transition: filter 1s ease-in-out;
transition: transform ease-in-out .1s;
transition: transform ease-in-out 0.1s;
filter: brightness(1);
&:hover {
@@ -123,7 +123,9 @@ export function MessageReply({ index, channel, id }: Props) {
const view = useRenderState(channel);
if (view?.type !== "RENDER") return null;
const [ message, setMessage ] = useState<MessageObject | undefined>(undefined);
const [message, setMessage] = useState<MessageObject | undefined>(
undefined,
);
useLayoutEffect(() => {
// ! FIXME: We should do this through the message renderer, so it can fetch it from cache if applicable.
const m = view.messages.find((x) => x._id === id);
@@ -131,10 +133,11 @@ export function MessageReply({ index, channel, id }: Props) {
if (m) {
setMessage(m);
} else {
ctx.client.channels.fetchMessage(channel, id)
.then(m => setMessage(mapMessage(m)));
ctx.client.channels
.fetchMessage(channel, id)
.then((m) => setMessage(mapMessage(m)));
}
}, [ view.messages ]);
}, [view.messages]);
if (!message) {
return (
@@ -153,32 +156,47 @@ export function MessageReply({ index, channel, id }: Props) {
return (
<ReplyBase head={index === 0}>
<Reply size={16} />
{ user?.relationship === Users.Relationship.Blocked ?
<>Blocked User</> :
{user?.relationship === Users.Relationship.Blocked ? (
<>Blocked User</>
) : (
<>
{message.author === SYSTEM_USER_ID ? (
<SystemMessage message={message} hideInfo />
) : <>
<div className="user"><UserShort user={user} size={16} /></div>
<div className="content" onClick={() => {
let obj = ctx.client.channels.get(channel);
if (obj?.channel_type === 'TextChannel') {
history.push(`/server/${obj.server}/channel/${obj._id}/${message._id}`);
} else {
history.push(`/channel/${channel}/${message._id}`);
}
}}>
{message.attachments && message.attachments.length > 0 && (
<File size={16} />
)}
<Markdown
disallowBigEmoji
content={(message.content as string).replace(/\n/g, " ")}
/>
</div>
</>}
) : (
<>
<div className="user">
<UserShort user={user} size={16} />
</div>
<div
className="content"
onClick={() => {
const obj =
ctx.client.channels.get(channel);
if (obj?.channel_type === "TextChannel") {
history.push(
`/server/${obj.server}/channel/${obj._id}/${message._id}`,
);
} else {
history.push(
`/channel/${channel}/${message._id}`,
);
}
}}>
{message.attachments &&
message.attachments.length > 0 && (
<File size={16} />
)}
<Markdown
disallowBigEmoji
content={(
message.content as string
).replace(/\n/g, " ")}
/>
</div>
</>
)}
</>
}
)}
</ReplyBase>
);
}

13
src/components/common/messaging/attachments/Spoiler.tsx
View File

@@ -1,5 +1,6 @@
import styled from "styled-components";
import { Text } from "preact-i18n";
import styled from "styled-components"
const Base = styled.div`
display: grid;
@@ -21,13 +22,15 @@ const Base = styled.div`
`;
interface Props {
set: (v: boolean) => void
set: (v: boolean) => void;
}
export default function Spoiler({ set }: Props) {
return (
<Base onClick={() => set(false)}>
<span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
<span>
<Text id="app.main.channel.misc.spoiler_attachment" />
</span>
</Base>
)
}
);
}

2
src/components/common/messaging/attachments/TextFile.tsx
View File

@@ -39,7 +39,7 @@ export default function TextFile({ attachment }: Props) {
setLoading(true);
let cached = fileCache[attachment._id];
const cached = fileCache[attachment._id];
if (cached) {
setContent(cached);
setLoading(false);

2
src/components/common/messaging/bars/FilePreview.tsx
View File

@@ -160,7 +160,7 @@ function FileEntry({
const [url, setURL] = useState("");
useEffect(() => {
let url: string = URL.createObjectURL(file);
const url: string = URL.createObjectURL(file);
setURL(url);
return () => URL.revokeObjectURL(url);
}, [file]);

2
src/components/common/messaging/bars/JumpToBottom.tsx
View File

@@ -28,7 +28,7 @@ const Bar = styled.div`
transition: color ease-in-out 0.08s;
background: var(--secondary-background);
border-radius: var(--border-radius) var(--border-radius) 0 0;
> div {
display: flex;
align-items: center;

4
src/components/common/messaging/bars/ReplyBar.tsx
View File

@@ -78,7 +78,7 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
return (
<div>
{replies.map((reply, index) => {
let message = messages.find((x) => reply.id === x._id);
const message = messages.find((x) => reply.id === x._id);
// ! FIXME: better solution would be to
// ! have a hook for resolving messages from
// ! render state along with relevant users
@@ -90,7 +90,7 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
</span>
);
let user = users.find((x) => message!.author === x?._id);
const user = users.find((x) => message!.author === x?._id);
if (!user) return;
return (

17
src/components/common/messaging/embed/Embed.tsx
View File

@@ -22,7 +22,7 @@ export default function Embed({ embed }: Props) {
// ! FIXME: temp code
// ! add proxy function to client
function proxyImage(url: string) {
return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url);
return `https://jan.revolt.chat/proxy?url=${encodeURIComponent(url)}`;
}
const { openScreen } = useIntermediate();
@@ -35,14 +35,14 @@ export default function Embed({ embed }: Props) {
w: number,
h: number,
): { width: number; height: number } {
let limitingWidth = Math.min(maxWidth, w);
const limitingWidth = Math.min(maxWidth, w);
let limitingHeight = Math.min(MAX_EMBED_HEIGHT, h);
const limitingHeight = Math.min(MAX_EMBED_HEIGHT, h);
// Calculate smallest possible WxH.
let width = Math.min(limitingWidth, limitingHeight * (w / h));
const width = Math.min(limitingWidth, limitingHeight * (w / h));
let height = Math.min(limitingHeight, limitingWidth * (h / w));
const height = Math.min(limitingHeight, limitingWidth * (h / w));
return { width, height };
}
@@ -51,7 +51,7 @@ export default function Embed({ embed }: Props) {
case "Website": {
// Determine special embed size.
let mw, mh;
let largeMedia =
const largeMedia =
(embed.special && embed.special.type !== "None") ||
embed.image?.size === "Large";
switch (embed.special?.type) {
@@ -80,7 +80,7 @@ export default function Embed({ embed }: Props) {
}
}
let { width, height } = calculateSize(mw, mh);
const { width, height } = calculateSize(mw, mh);
return (
<div
className={classNames(styles.embed, styles.website)}
@@ -115,7 +115,8 @@ export default function Embed({ embed }: Props) {
<a
href={embed.url}
target={"_blank"}
className={styles.title}>
className={styles.title}
rel="noreferrer">
{embed.title}
</a>
</span>

4
src/components/common/messaging/embed/EmbedMedia.tsx
View File

@@ -14,7 +14,7 @@ export default function EmbedMedia({ embed, width, height }: Props) {
// ! FIXME: temp code
// ! add proxy function to client
function proxyImage(url: string) {
return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url);
return `https://jan.revolt.chat/proxy?url=${encodeURIComponent(url)}`;
}
if (embed.type !== "Website") return null;
@@ -75,7 +75,7 @@ export default function EmbedMedia({ embed, width, height }: Props) {
}
default: {
if (embed.image) {
let url = embed.image.url;
const url = embed.image.url;
return (
<img
className={styles.image}

8
src/components/common/messaging/embed/EmbedMediaActions.tsx
View File

@@ -16,9 +16,13 @@ export default function EmbedMediaActions({ embed }: Props) {
<div className={styles.actions}>
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>
{embed.width + "x" + embed.height}
{`${embed.width}x${embed.height}`}
</span>
<a href={embed.url} class={styles.openIcon} target="_blank">
<a
href={embed.url}
class={styles.openIcon}
target="_blank"
rel="noreferrer">
<IconButton>
<LinkExternal size={24} />
</IconButton>

39
src/components/common/user/UserHover.tsx
View File

@@ -1,14 +1,15 @@
import { InfoCircle } from "@styled-icons/boxicons-regular";
import { Children } from "../../../types/Preact";
import { Username } from "./UserShort";
import styled from "styled-components";
import UserStatus from "./UserStatus";
import Tooltip from "../Tooltip";
import { User } from "revolt.js";
import styled from "styled-components";
import { Children } from "../../../types/Preact";
import Tooltip from "../Tooltip";
import { Username } from "./UserShort";
import UserStatus from "./UserStatus";
interface Props {
user?: User,
children: Children
user?: User;
children: Children;
}
const Base = styled.div`
@@ -38,16 +39,18 @@ const Base = styled.div`
export default function UserHover({ user, children }: Props) {
return (
<Tooltip placement="right-end" content={
<Base>
<Username className="username" user={user} />
<span className="status">
<UserStatus user={user} />
</span>
{/*<div className="tip"><InfoCircle size={13}/>Right-click on the avatar to access the quick menu</div>*/}
</Base>
}>
{ children }
<Tooltip
placement="right-end"
content={
<Base>
<Username className="username" user={user} />
<span className="status">
<UserStatus user={user} />
</span>
{/*<div className="tip"><InfoCircle size={13}/>Right-click on the avatar to access the quick menu</div>*/}
</Base>
}>
{children}
</Tooltip>
)
);
}

7
src/components/common/user/UserStatus.tsx
View File

@@ -2,6 +2,7 @@ import { User } from "revolt.js";
import { Users } from "revolt.js/dist/api/objects";
import { Text } from "preact-i18n";
import Tooltip from "../Tooltip";
interface Props {
@@ -14,10 +15,10 @@ export default function UserStatus({ user, tooltip }: Props) {
if (user.status?.text) {
if (tooltip) {
return (
<Tooltip arrow={undefined} content={ user.status.text }>
{ user.status.text }
<Tooltip arrow={undefined} content={user.status.text}>
{user.status.text}
</Tooltip>
)
);
}
return <>{user.status.text}</>;

54
src/components/markdown/Renderer.tsx
View File

@@ -35,7 +35,7 @@ declare global {
if (typeof window !== "undefined") {
window.copycode = function (element: HTMLDivElement) {
try {
let code = element.parentElement?.parentElement?.children[1];
const code = element.parentElement?.parentElement?.children[1];
if (code) {
navigator.clipboard.writeText(code.textContent?.trim() ?? "");
}
@@ -47,9 +47,9 @@ export const md: MarkdownIt = MarkdownIt({
breaks: true,
linkify: true,
highlight: (str, lang) => {
let v = Prism.languages[lang];
const v = Prism.languages[lang];
if (v) {
let out = Prism.highlight(str, v, lang);
const out = Prism.highlight(str, v, lang);
return `<pre class="code"><div class="lang"><div onclick="copycode(this)">${lang}</div></div><code class="language-${lang}">${out}</code></pre>`;
}
@@ -66,7 +66,7 @@ export const md: MarkdownIt = MarkdownIt({
.use(MarkdownKatex, {
throwOnError: false,
maxExpand: 0,
maxSize: 10
maxSize: 10,
});
// TODO: global.d.ts file for defining globals
@@ -89,7 +89,7 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
// We replace the message with the mention at the time of render.
// We don't care if the mention changes.
let newContent = content.replace(
const newContent = content.replace(
RE_MENTIONS,
(sub: string, ...args: any[]) => {
const id = args[0],
@@ -109,7 +109,7 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
const toggle = useCallback((ev: MouseEvent) => {
if (ev.currentTarget) {
let element = ev.currentTarget as HTMLDivElement;
const element = ev.currentTarget as HTMLDivElement;
if (element.classList.contains("spoiler")) {
element.classList.add("shown");
}
@@ -123,7 +123,7 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
const pathname = url.pathname;
if (pathname.startsWith("/@")) {
let id = pathname.substr(2);
const id = pathname.substr(2);
if (/[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}/.test(id)) {
ev.preventDefault();
internalEmit("Intermediate", "openProfile", id);
@@ -137,19 +137,20 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
return (
<span
ref={el => {
ref={(el) => {
if (el) {
(el.querySelectorAll<HTMLDivElement>('.spoiler'))
.forEach(element => {
element.removeEventListener('click', toggle);
element.addEventListener('click', toggle);
});
el.querySelectorAll<HTMLDivElement>(".spoiler").forEach(
(element) => {
element.removeEventListener("click", toggle);
element.addEventListener("click", toggle);
},
);
(el.querySelectorAll<HTMLAnchorElement>('a'))
.forEach(element => {
element.removeEventListener('click', handleLink);
element.removeAttribute('data-type');
element.removeAttribute('target');
el.querySelectorAll<HTMLAnchorElement>("a").forEach(
(element) => {
element.removeEventListener("click", handleLink);
element.removeAttribute("data-type");
element.removeAttribute("target");
let internal;
const href = element.href;
@@ -159,19 +160,26 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
if (url.hostname === location.hostname) {
internal = true;
element.addEventListener('click', handleLink);
element.addEventListener(
"click",
handleLink,
);
if (url.pathname.startsWith('/@')) {
element.setAttribute('data-type', 'mention');
if (url.pathname.startsWith("/@")) {
element.setAttribute(
"data-type",
"mention",
);
}
}
} catch (err) {}
}
if (!internal) {
element.setAttribute('target', '_blank');
element.setAttribute("target", "_blank");
}
});
},
);
}
}}
className={styles.markdown}

3
src/components/navigation/BottomNavigation.tsx
View File

@@ -1,5 +1,5 @@
import { Message, Group, Inbox } from "@styled-icons/boxicons-solid";
import { Search } from "@styled-icons/boxicons-regular";
import { Message, Group, Inbox } from "@styled-icons/boxicons-solid";
import { useHistory, useLocation } from "react-router";
import styled, { css } from "styled-components";
@@ -113,7 +113,6 @@ export function BottomNavigation({ lastOpened }: Props) {
</Button>
</Navbar>
</Base>
);
}

2
src/components/navigation/left/HomeSidebar.tsx
View File

@@ -149,7 +149,7 @@ function HomeSidebar(props: Props) {
if (x.channel_type === "DirectMessage") {
if (!x.active) return null;
let recipient = client.channels.getRecipient(x._id);
const recipient = client.channels.getRecipient(x._id);
user = users.find((x) => x?._id === recipient);
if (!user) {

51
src/components/navigation/left/ServerListSidebar.tsx
View File

@@ -21,16 +21,16 @@ import {
useServers,
} from "../../../context/revoltjs/hooks";
import logoSVG from "../../../assets/logo.svg";
import ServerIcon from "../../common/ServerIcon";
import Tooltip from "../../common/Tooltip";
import UserHover from "../../common/user/UserHover";
import UserIcon from "../../common/user/UserIcon";
import IconButton from "../../ui/IconButton";
import LineDivider from "../../ui/LineDivider";
import { mapChannelWithUnread } from "./common";
import logoSVG from '../../../assets/logo.svg';
import { Children } from "../../../types/Preact";
import UserHover from "../../common/user/UserHover";
function Icon({
children,
@@ -129,7 +129,7 @@ const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
!props.active &&
css`
display: none;
` }
`}
svg {
width: 57px;
@@ -152,13 +152,17 @@ const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
function Swoosh() {
return (
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="57" height="117" fill="var(--sidebar-active)">
<path d="M27.746 86.465c14 0 28 11.407 28 28s.256-56 .256-56-42.256 28-28.256 28z"/>
<path d="M56 58.465c0 15.464-12.536 28-28 28s-28-12.536-28-28 12.536-28 28-28 28 12.536 28 28z"/>
<path d="M28.002 30.465c14 0 28-11.407 28-28s0 56 0 56-42-28-28-28z"/>
<svg
xmlns="http://www.w3.org/2000/svg"
width="57"
height="117"
fill="var(--sidebar-active)">
<path d="M27.746 86.465c14 0 28 11.407 28 28s.256-56 .256-56-42.256 28-28.256 28z" />
<path d="M56 58.465c0 15.464-12.536 28-28 28s-28-12.536-28-28 12.536-28 28-28 28 12.536 28 28z" />
<path d="M28.002 30.465c14 0 28-11.407 28-28s0 56 0 56-42-28-28-28z" />
</svg>
</span>
)
);
}
interface Props {
@@ -178,8 +182,8 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
const servers = activeServers.map((server) => {
let alertCount = 0;
for (let id of server.channels) {
let channel = channels.find((x) => x._id === id);
for (const id of server.channels) {
const channel = channels.find((x) => x._id === id);
if (channel?.alertCount) {
alertCount += channel.alertCount;
}
@@ -206,7 +210,7 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
let homeUnread: "mention" | "unread" | undefined;
let alertCount = 0;
for (let x of channels) {
for (const x of channels) {
if (
((x.channel_type === "DirectMessage" && x.active) ||
x.channel_type === "Group") &&
@@ -229,10 +233,14 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
to={lastOpened.home ? `/channel/${lastOpened.home}` : "/"}>
<ServerEntry home active={homeActive}>
<Swoosh />
{ isTouchscreenDevice ?
{isTouchscreenDevice ? (
<Icon size={42} unread={homeUnread}>
<img style={{ width: 32, height: 32 }} src={logoSVG} />
</Icon> :
<img
style={{ width: 32, height: 32 }}
src={logoSVG}
/>
</Icon>
) : (
<div
onContextMenu={attachContextMenu("Status")}
onClick={() =>
@@ -240,11 +248,15 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
}>
<UserHover user={self}>
<Icon size={42} unread={homeUnread}>
<UserIcon target={self} size={32} status />
<UserIcon
target={self}
size={32}
status
/>
</Icon>
</UserHover>
</div>
}
)}
</ServerEntry>
</ConditionalLink>
<LineDivider />
@@ -255,10 +267,9 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
return (
<ConditionalLink
active={active}
to={
`/server/${entry!._id}` +
(id ? `/channel/${id}` : "")
}>
to={`/server/${entry!._id}${
id ? `/channel/${id}` : ""
}`}>
<ServerEntry
active={active}
onContextMenu={attachContextMenu("Menu", {

12
src/components/navigation/left/ServerSidebar.tsx
View File

@@ -81,8 +81,8 @@ function ServerSidebar(props: Props) {
});
}, [channel_id]);
let uncategorised = new Set(server.channels);
let elements = [];
const uncategorised = new Set(server.channels);
const elements = [];
function addChannel(id: string) {
const entry = channels.find((x) => x._id === id);
@@ -106,9 +106,9 @@ function ServerSidebar(props: Props) {
}
if (server.categories) {
for (let category of server.categories) {
let channels = [];
for (let id of category.channels) {
for (const category of server.categories) {
const channels = [];
for (const id of category.channels) {
uncategorised.delete(id);
channels.push(addChannel(id));
}
@@ -124,7 +124,7 @@ function ServerSidebar(props: Props) {
}
}
for (let id of Array.from(uncategorised).reverse()) {
for (const id of Array.from(uncategorised).reverse()) {
elements.unshift(addChannel(id));
}

2
src/components/navigation/right/ChannelDebugInfo.tsx
View File

@@ -6,7 +6,7 @@ interface Props {
export function ChannelDebugInfo({ id }: Props) {
if (process.env.NODE_ENV !== "development") return null;
let view = useRenderState(id);
const view = useRenderState(id);
if (!view) return null;
return (

100
src/components/navigation/right/MemberSidebar.tsx
View File

@@ -1,12 +1,14 @@
import { useParams } from "react-router";
import { Link } from "react-router-dom";
import { User } from "revolt.js";
import { Channels, Message, Servers, Users } from "revolt.js/dist/api/objects";
import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";
import { Link } from "react-router-dom";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { getState } from "../../../redux";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import {
AppContext,
@@ -22,14 +24,13 @@ import {
import CollapsibleSection from "../../common/CollapsibleSection";
import Category from "../../ui/Category";
import InputBox from "../../ui/InputBox";
import Preloader from "../../ui/Preloader";
import placeholderSVG from "../items/placeholder.svg";
import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
import { UserButton } from "../items/ButtonItem";
import { ChannelDebugInfo } from "./ChannelDebugInfo";
import InputBox from "../../ui/InputBox";
import { getState } from "../../../redux";
interface Props {
ctx: HookContext;
@@ -56,7 +57,7 @@ export function GroupMemberSidebar({
}: Props & { channel: Channels.GroupChannel }) {
const { openScreen } = useIntermediate();
const users = useUsers(undefined, ctx);
let members = channel.recipients
const members = channel.recipients
.map((x) => users.find((y) => y?._id === x))
.filter((x) => typeof x !== "undefined") as User[];
@@ -77,18 +78,18 @@ export function GroupMemberSidebar({
members.sort((a, b) => {
// ! FIXME: should probably rewrite all this code
let l =
const l =
+(
(a.online && a.status?.presence !== Users.Presence.Invisible) ??
false
) | 0;
let r =
const r =
+(
(b.online && b.status?.presence !== Users.Presence.Invisible) ??
false
) | 0;
let n = r - l;
const n = r - l;
if (n !== 0) {
return n;
}
@@ -219,18 +220,18 @@ export function ServerMemberSidebar({
// copy paste from above
users.sort((a, b) => {
// ! FIXME: should probably rewrite all this code
let l =
const l =
+(
(a.online && a.status?.presence !== Users.Presence.Invisible) ??
false
) | 0;
let r =
const r =
+(
(b.online && b.status?.presence !== Users.Presence.Invisible) ??
false
) | 0;
let n = r - l;
const n = r - l;
if (n !== 0) {
return n;
}
@@ -246,16 +247,15 @@ export function ServerMemberSidebar({
<div>{!members && <Preloader type="ring" />}</div>
{members && (
<CollapsibleSection
//sticky //will re-add later, need to fix css
//sticky //will re-add later, need to fix css
id="members"
defaultValue
summary={<span>
<Text id="app.main.categories.members" />{" "}
— {users.length}
</span>
}
>
summary={
<span>
<Text id="app.main.categories.members" /> —{" "}
{users.length}
</span>
}>
{users.length === 0 && <img src={placeholderSVG} />}
{users.map(
(user) =>
@@ -281,14 +281,18 @@ export function ServerMemberSidebar({
}
function Search({ channel }: { channel: string }) {
if (!getState().experiments.enabled?.includes('search')) return null;
if (!getState().experiments.enabled?.includes("search")) return null;
const client = useContext(AppContext);
const [query,setV] = useState('');
const [results,setResults] = useState<Message[]>([]);
const [query, setV] = useState("");
const [results, setResults] = useState<Message[]>([]);
async function search() {
let data = await client.channels.searchWithUsers(channel, { query, sort: 'Relevance' }, true);
const data = await client.channels.searchWithUsers(
channel,
{ query, sort: "Relevance" },
true,
);
setResults(data.messages);
}
@@ -298,27 +302,47 @@ function Search({ channel }: { channel: string }) {
id="search"
defaultValue={false}
summary={"Search (BETA)"}>
<InputBox style={{ width: '100%' }}
onKeyDown={e => e.key === 'Enter' && search()}
value={query} onChange={e => setV(e.currentTarget.value)} />
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px', marginTop: '8px' }}>
{
results.map(message => {
let href = '';
let channel = client.channels.get(message.channel);
if (channel?.channel_type === 'TextChannel') {
<InputBox
style={{ width: "100%" }}
onKeyDown={(e) => e.key === "Enter" && search()}
value={query}
onChange={(e) => setV(e.currentTarget.value)}
/>
<div
style={{
display: "flex",
flexDirection: "column",
gap: "4px",
marginTop: "8px",
}}>
{results.map((message) => {
let href = "";
const channel = client.channels.get(message.channel);
if (channel?.channel_type === "TextChannel") {
href += `/server/${channel.server}`;
}
href += `/channel/${message.channel}/${message._id}`;
return <Link to={href}><div style={{ margin: '2px', padding: '6px', background: 'var(--primary-background)' }}>
<b>@{ client.users.get(message.author)?.username }</b><br/>
{ message.content }
</div></Link>
})
}
return (
<Link to={href}>
<div
style={{
margin: "2px",
padding: "6px",
background: "var(--primary-background)",
}}>
<b>
@
{client.users.get(message.author)?.username}
</b>
<br />
{message.content}
</div>
</Link>
);
})}
</div>
</CollapsibleSection>
)
);
}

2
src/components/ui/Category.tsx
View File

@@ -44,7 +44,7 @@ type Props = Omit<
};
export default function Category(props: Props) {
let { text, action, ...otherProps } = props;
const { text, action, ...otherProps } = props;
return (
<CategoryBase {...otherProps}>

14
src/components/ui/ColourSwatches.tsx
View File

@@ -55,7 +55,11 @@ const SwatchesBase = styled.div`
div {
width: 8px;
height: 68px;
background: linear-gradient(to right, var(--primary-background), transparent);
background: linear-gradient(
to right,
var(--primary-background),
transparent
);
}
}
`;
@@ -127,8 +131,10 @@ export default function ColourSwatches({ value, onChange }: Props) {
<Palette size={32} />
</Swatch>
<div class="overlay"><div /></div>
<div class="overlay">
<div />
</div>
<Rows>
{presets.map((row, i) => (
<div key={i}>
@@ -144,8 +150,6 @@ export default function ColourSwatches({ value, onChange }: Props) {
</div>
))}
</Rows>
</SwatchesBase>
);
}

2
src/components/ui/ComboBox.tsx
View File

@@ -5,7 +5,7 @@ export default styled.select`
padding: 10px;
cursor: pointer;
border-radius: var(--border-radius);
font-family: inherit;
font-size: var(--text-size);
color: var(--secondary-foreground);

4
src/components/ui/DateDivider.tsx
View File

@@ -12,8 +12,8 @@ const Base = styled.div<{ unread?: boolean }>`
time {
margin-top: -2px;
font-size: .6875rem;
line-height: .6875rem;
font-size: 0.6875rem;
line-height: 0.6875rem;
padding: 2px 0 2px 0;
padding-inline-end: 5px;
color: var(--tertiary-foreground);

14
src/components/ui/Modal.tsx
View File

@@ -2,9 +2,10 @@ import styled, { css, keyframes } from "styled-components";
import { createPortal, useEffect, useState } from "preact/compat";
import { internalSubscribe } from "../../lib/eventEmitter";
import { Children } from "../../types/Preact";
import Button, { ButtonProps } from "./Button";
import { internalSubscribe } from "../../lib/eventEmitter";
const open = keyframes`
0% {opacity: 0;}
@@ -52,7 +53,7 @@ const ModalBase = styled.div`
&.closing {
animation-name: ${close};
}
&.closing > div {
animation-name: ${zoomOut};
}
@@ -145,7 +146,7 @@ export let isModalClosing = false;
export default function Modal(props: Props) {
if (!props.visible) return null;
let content = (
const content = (
<ModalContent
attachment={!!props.actions}
noBackground={props.noBackground}
@@ -167,7 +168,7 @@ export default function Modal(props: Props) {
setTimeout(() => props.onClose(), 2e2);
}
useEffect(() => internalSubscribe('Modal', 'close', onClose), []);
useEffect(() => internalSubscribe("Modal", "close", onClose), []);
useEffect(() => {
if (props.disallowClosing) return;
@@ -182,7 +183,7 @@ export default function Modal(props: Props) {
return () => document.body.removeEventListener("keydown", keyDown);
}, [props.disallowClosing, props.onClose]);
let confirmationAction = props.actions?.find(
const confirmationAction = props.actions?.find(
(action) => action.confirmation,
);
@@ -203,7 +204,8 @@ export default function Modal(props: Props) {
}, [confirmationAction]);
return createPortal(
<ModalBase className={animateClose ? 'closing' : undefined}
<ModalBase
className={animateClose ? "closing" : undefined}
onClick={(!props.disallowClosing && props.onClose) || undefined}>
<ModalContainer onClick={(e) => (e.cancelBubble = true)}>
{content}