Format and automatically fix linted code.

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

View file

@ -1,6 +1,6 @@
export const emojiDictionary = {
"100": "💯",
"1234": "🔢",
100: "💯",
1234: "🔢",
grinning: "😀",
smiley: "😃",
smile: "😄",

View file

@ -19,8 +19,8 @@ export const SOUNDS_ARRAY: Sounds[] = [
];
export function playSound(sound: Sounds) {
let file = SoundMap[sound];
let el = new Audio(file);
const file = SoundMap[sound];
const el = new Audio(file);
try {
el.play();
} catch (err) {

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>
);
}

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,

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} />;
}
}

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}`;
}

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() {

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>

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>

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>
);

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": {

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>

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,7 +25,8 @@ const Grid = styled.div`
}
&.spoiler {
img, video {
img,
video {
filter: blur(44px);
}
@ -33,25 +36,29 @@ const Grid = styled.div`
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>
)
);
}

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>
);
}

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>
)
);
}

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);

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]);

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 (

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>

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}

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>

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>
)
);
}

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}</>;

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}

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>
);
}

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) {

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", {

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));
}

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 (

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;
}
@ -249,13 +250,12 @@ export function ServerMemberSidebar({
//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>
)
);
}

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}>

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,7 +131,9 @@ 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) => (
@ -144,8 +150,6 @@ export default function ColourSwatches({ value, onChange }: Props) {
</div>
))}
</Rows>
</SwatchesBase>
);
}

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);

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;}
@ -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}

View file

@ -335,8 +335,7 @@ function Theme({ children, options }: Props) {
return (
<ThemeContext.Provider value={theme}>
<Helmet>
<meta name="theme-color" content={theme["background"]}
/>
<meta name="theme-color" content={theme["background"]} />
</Helmet>
<GlobalTheme theme={theme} />
{theme.css && (

View file

@ -1,5 +1,7 @@
import { isModalClosing } from "../../components/ui/Modal";
import { internalEmit } from "../../lib/eventEmitter";
import { isModalClosing } from "../../components/ui/Modal";
import { Screen } from "./Intermediate";
import { ClipboardModal } from "./modals/Clipboard";
import { ErrorModal } from "./modals/Error";
@ -14,7 +16,10 @@ export interface Props {
}
export default function Modals({ screen, openScreen }: Props) {
const onClose = () => isModalClosing ? openScreen({ id: "none" }) : internalEmit('Modal', 'close');
const onClose = () =>
isModalClosing
? openScreen({ id: "none" })
: internalEmit("Modal", "close");
switch (screen.id) {
case "_prompt":

View file

@ -1,7 +1,9 @@
import { useContext } from "preact/hooks";
import { isModalClosing } from "../../components/ui/Modal";
import { internalEmit } from "../../lib/eventEmitter";
import { isModalClosing } from "../../components/ui/Modal";
import { IntermediateContext, useIntermediate } from "./Intermediate";
import { SpecialInputModal } from "./modals/Input";
import { SpecialPromptModal } from "./modals/Prompt";
@ -16,7 +18,10 @@ export default function Popovers() {
const { screen } = useContext(IntermediateContext);
const { openScreen } = useIntermediate();
const onClose = () => isModalClosing ? openScreen({ id: "none" }) : internalEmit('Modal', 'close');
const onClose = () =>
isModalClosing
? openScreen({ id: "none" })
: internalEmit("Modal", "close");
switch (screen.id) {
case "profile":

View file

@ -92,7 +92,7 @@ export function SpecialPromptModal(props: SpecialProps) {
block_user: ["block_user", "block"],
};
let event = EVENTS[props.type];
const event = EVENTS[props.type];
let name;
switch (props.type) {
case "unfriend_user":

View file

@ -25,7 +25,7 @@ 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);
return `https://jan.revolt.chat/proxy?url=${encodeURIComponent(url)}`;
}
if (attachment && attachment.metadata.type !== "Image") {

View file

@ -55,7 +55,7 @@ export async function uploadFile(
const formData = new FormData();
formData.append("file", file);
const res = await Axios.post(autumnURL + "/" + tag, formData, {
const res = await Axios.post(`${autumnURL}/${tag}`, formData, {
headers: {
"Content-Type": "multipart/form-data",
},
@ -78,7 +78,7 @@ export function grabFiles(
input.onchange = async (e) => {
const files = (e.currentTarget as HTMLInputElement)?.files;
if (!files) return;
for (let file of files) {
for (const file of files) {
if (file.size > maxFileSize) {
return tooLarge();
}
@ -139,12 +139,10 @@ export function FileUploader(props: Props) {
} else {
onClick();
}
} else if (props.previewURL) {
props.remove();
} else {
if (props.previewURL) {
props.remove();
} else {
onClick();
}
onClick();
}
}
@ -156,7 +154,7 @@ export function FileUploader(props: Props) {
if (typeof items === "undefined") return;
if (props.behaviour !== "multi" || !props.append) return;
let files = [];
const files = [];
for (const item of items) {
if (!item.type.startsWith("text/")) {
const blob = item.getAsFile();
@ -190,7 +188,7 @@ export function FileUploader(props: Props) {
const dropped = e.dataTransfer?.files;
if (dropped) {
let files = [];
const files = [];
for (const item of dropped) {
if (item.size > props.maxFileSize) {
openScreen({ id: "error", error: "FileTooLarge" });

View file

@ -32,7 +32,7 @@ async function createNotification(
try {
return new Notification(title, options);
} catch (err) {
let sw = await navigator.serviceWorker.getRegistration();
const sw = await navigator.serviceWorker.getRegistration();
sw?.showNotification(title, options);
}
}
@ -90,7 +90,7 @@ function Notifier({ options, notifs }: Props) {
let image;
if (msg.attachments) {
let imageAttachment = msg.attachments.find(
const imageAttachment = msg.attachments.find(
(x) => x.metadata.type === "Image",
);
if (imageAttachment) {
@ -105,7 +105,7 @@ function Notifier({ options, notifs }: Props) {
body = client.markdownToText(msg.content);
icon = client.users.getAvatarURL(msg.author, { max_side: 256 });
} else {
let users = client.users;
const users = client.users;
switch (msg.content.type) {
case "user_added":
case "user_remove":
@ -161,7 +161,7 @@ function Notifier({ options, notifs }: Props) {
}
}
let notif = await createNotification(title, {
const notif = await createNotification(title, {
icon,
image,
body,
@ -176,7 +176,7 @@ function Notifier({ options, notifs }: Props) {
window.focus();
const id = msg.channel;
if (id !== channel_id) {
let channel = client.channels.get(id);
const channel = client.channels.get(id);
if (channel) {
if (channel.channel_type === "TextChannel") {
history.push(
@ -218,7 +218,7 @@ function Notifier({ options, notifs }: Props) {
return;
}
let notif = await createNotification(event, {
const notif = await createNotification(event, {
icon: client.users.getAvatarURL(user._id, { max_side: 256 }),
badge: "/assets/icons/android-chrome-512x512.png",
timestamp: +new Date(),

View file

@ -66,7 +66,7 @@ function Context({ auth, children }: Props) {
// Match sw.ts#L23
db = await openDB("state", 3, {
upgrade(db) {
for (let store of [
for (const store of [
"channels",
"servers",
"users",
@ -150,7 +150,7 @@ function Context({ auth, children }: Props) {
ready: () =>
operations.loggedIn() && typeof client.user !== "undefined",
openDM: async (user_id: string) => {
let channel = await client.users.openDM(user_id);
const channel = await client.users.openDM(user_id);
history.push(`/channel/${channel!._id}`);
return channel!._id;
},

View file

@ -44,10 +44,10 @@ function StateMonitor(props: Props) {
useEffect(() => {
function removeOld() {
if (!props.typing) return;
for (let channel of Object.keys(props.typing)) {
let users = props.typing[channel];
for (const channel of Object.keys(props.typing)) {
const users = props.typing[channel];
for (let user of users) {
for (const user of users) {
if (+new Date() > user.started + 5000) {
dispatch({
type: "TYPING_STOP",
@ -61,7 +61,7 @@ function StateMonitor(props: Props) {
removeOld();
let interval = setInterval(removeOld, 1000);
const interval = setInterval(removeOld, 1000);
return () => clearInterval(interval);
}, [props.typing]);

View file

@ -28,15 +28,15 @@ type Props = {
notifications: Notifications;
};
var lastValues: { [key in SyncKeys]?: any } = {};
const lastValues: { [key in SyncKeys]?: any } = {};
export function mapSync(
packet: Sync.UserSettings,
revision?: Record<string, number>,
) {
let update: { [key in SyncKeys]?: [number, SyncData[key]] } = {};
for (let key of Object.keys(packet)) {
let [timestamp, obj] = packet[key];
const update: { [key in SyncKeys]?: [number, SyncData[key]] } = {};
for (const key of Object.keys(packet)) {
const [timestamp, obj] = packet[key];
if (timestamp < (revision ?? {})[key] ?? 0) {
continue;
}
@ -81,7 +81,7 @@ function SyncManager(props: Props) {
}, [status]);
function syncChange(key: SyncKeys, data: any) {
let timestamp = +new Date();
const timestamp = +new Date();
dispatch({
type: "SYNC_SET_REVISION",
key,
@ -96,8 +96,8 @@ function SyncManager(props: Props) {
);
}
let disabled = props.sync.disabled ?? [];
for (let [key, object] of [
const disabled = props.sync.disabled ?? [];
for (const [key, object] of [
["appearance", props.settings.appearance],
["theme", props.settings.theme],
["locale", props.locale],
@ -119,7 +119,7 @@ function SyncManager(props: Props) {
useEffect(() => {
function onPacket(packet: ClientboundNotification) {
if (packet.type === "UserSettingsUpdate") {
let update: { [key in SyncKeys]?: [number, SyncData[key]] } =
const update: { [key in SyncKeys]?: [number, SyncData[key]] } =
mapSync(packet.update, props.sync.revision);
dispatch({

View file

@ -16,9 +16,9 @@ export function useForceUpdate(context?: HookContext): HookContext {
if (context) return context;
const H = useState(0);
var updateState: (_: number) => void;
let updateState: (_: number) => void;
if (Array.isArray(H)) {
let [, u] = H;
const [, u] = H;
updateState = u;
} else {
console.warn("Failed to construct using useState.");
@ -124,7 +124,7 @@ export function useDMs(context?: HookContext) {
const ctx = useForceUpdate(context);
function mutation(target: string) {
let channel = ctx.client.channels.get(target);
const channel = ctx.client.channels.get(target);
if (channel) {
if (
channel.channel_type === "DirectMessage" ||
@ -164,7 +164,7 @@ export function useUserPermission(id: string, context?: HookContext) {
return () => ctx.client.users.removeListener("update", mutation);
}, [id]);
let calculator = new PermissionCalculator(ctx.client);
const calculator = new PermissionCalculator(ctx.client);
return calculator.forUser(id);
}
@ -206,7 +206,7 @@ export function useChannelPermission(id: string, context?: HookContext) {
};
}, [id]);
let calculator = new PermissionCalculator(ctx.client);
const calculator = new PermissionCalculator(ctx.client);
return calculator.forChannel(id);
}
@ -227,6 +227,6 @@ export function useServerPermission(id: string, context?: HookContext) {
};
}, [id]);
let calculator = new PermissionCalculator(ctx.client);
const calculator = new PermissionCalculator(ctx.client);
return calculator.forServer(id);
}

View file

@ -7,7 +7,7 @@ import { Children } from "../../types/Preact";
export function takeError(error: any): string {
const type = error?.response?.data?.type;
let id = type;
const id = type;
if (!type) {
if (error?.response?.status === 403) {
return "Unauthorized";
@ -31,7 +31,7 @@ export function getChannelName(
return <Text id="app.navigation.tabs.saved" />;
if (channel.channel_type === "DirectMessage") {
let uid = client.channels.getRecipient(channel._id);
const uid = client.channels.getRecipient(channel._id);
return (
<>
{prefixType && "@"}

View file

@ -10,7 +10,6 @@ export default function ConditionalLink(props: Props) {
if (active) {
return <a>{props.children}</a>;
} else {
return <Link {...linkProps} />;
}
return <Link {...linkProps} />;
}

View file

@ -10,7 +10,6 @@ import {
LeftArrowAlt,
Trash,
} from "@styled-icons/boxicons-regular";
import Tooltip from "../components/common/Tooltip";
import { Cog, UserVoice } from "@styled-icons/boxicons-solid";
import { useHistory } from "react-router-dom";
import {
@ -61,6 +60,7 @@ import {
} from "../context/revoltjs/hooks";
import { takeError } from "../context/revoltjs/util";
import Tooltip from "../components/common/Tooltip";
import UserStatus from "../components/common/user/UserStatus";
import IconButton from "../components/ui/IconButton";
import LineDivider from "../components/ui/LineDivider";
@ -168,7 +168,7 @@ function ContextMenus(props: Props) {
)
return;
let message =
const message =
data.channel.channel_type === "TextChannel"
? data.channel.last_message
: data.channel.last_message._id;
@ -292,8 +292,9 @@ function ContextMenus(props: Props) {
const { filename } = data.attachment;
writeClipboard(
// ! FIXME: do from r.js
client.generateFileURL(data.attachment) +
`/${encodeURI(filename)}`,
`${client.generateFileURL(
data.attachment,
)}/${encodeURI(filename)}`,
);
}
break;
@ -376,7 +377,7 @@ function ContextMenus(props: Props) {
case "clear_status":
{
let { text, ...status } = client.user?.status ?? {};
const { text, ...status } = client.user?.status ?? {};
await client.users.editUser({ status });
}
break;
@ -459,7 +460,7 @@ function ContextMenus(props: Props) {
}: ContextMenuData) => {
const forceUpdate = useForceUpdate();
const elements: Children[] = [];
var lastDivider = false;
let lastDivider = false;
function generateAction(
action: Action,
@ -487,8 +488,8 @@ function ContextMenus(props: Props) {
}
if (server_list) {
let server = useServer(server_list, forceUpdate);
let permissions = useServerPermission(
const server = useServer(server_list, forceUpdate);
const permissions = useServerPermission(
server_list,
forceUpdate,
);
@ -742,7 +743,7 @@ function ContextMenus(props: Props) {
}
if (document.activeElement?.tagName === "A") {
let link =
const link =
document.activeElement.getAttribute("href");
if (link) {
pushDivider();
@ -752,7 +753,7 @@ function ContextMenus(props: Props) {
}
}
let id = sid ?? cid ?? uid ?? message?._id;
const id = sid ?? cid ?? uid ?? message?._id;
if (id) {
pushDivider();
@ -876,14 +877,23 @@ function ContextMenus(props: Props) {
<>
<div className="header">
<div className="main">
<div className="username"
onClick={() => writeClipboard(client.user!.username)}>
<Tooltip content={<Text id="app.special.copy_username" />}>
<div
className="username"
onClick={() =>
writeClipboard(client.user!.username)
}>
<Tooltip
content={
<Text id="app.special.copy_username" />
}>
@{client.user!.username}
</Tooltip>
</div>
<div className="status"
onClick={() => contextClick({ action: 'set_status' })}>
<div
className="status"
onClick={() =>
contextClick({ action: "set_status" })
}>
<UserStatus user={client.user!} />
</div>
</div>
@ -935,9 +945,7 @@ function ContextMenus(props: Props) {
data={{ action: "set_status" }}
disabled={!isOnline}>
<UserVoice size={18} />
<Text
id={`app.context_menu.custom_status`}
/>
<Text id={`app.context_menu.custom_status`} />
{client.user!.status?.text && (
<IconButton>
<MenuItem data={{ action: "clear_status" }}>
@ -959,7 +967,7 @@ function ContextMenus(props: Props) {
channel,
);
let elements: Children[] = [
const elements: Children[] = [
<MenuItem
data={{
action: "set_notification_state",

View file

@ -11,7 +11,7 @@ export default function PaintCounter({
}) {
if (import.meta.env.PROD && !always) return null;
const [uniqueId] = useState("" + Math.random());
const [uniqueId] = useState(`${Math.random()}`);
const count = counts[uniqueId] ?? 0;
counts[uniqueId] = count + 1;
return (

View file

@ -74,7 +74,7 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
useLayoutEffect(() => {
if (ref.current && ghost.current) {
ref.current.style.height = ghost.current.clientHeight + "px";
ref.current.style.height = `${ghost.current.clientHeight}px`;
}
}, [ghost, props.value]);

View file

@ -7,12 +7,12 @@ export function internalSubscribe(
event: string,
fn: (...args: any[]) => void,
) {
InternalEvent.addListener(ns + "/" + event, fn);
return () => InternalEvent.removeListener(ns + "/" + event, fn);
InternalEvent.addListener(`${ns}/${event}`, fn);
return () => InternalEvent.removeListener(`${ns}/${event}`, fn);
}
export function internalEmit(ns: string, event: string, ...args: any[]) {
InternalEvent.emit(ns + "/" + event, ...args);
InternalEvent.emit(`${ns}/${event}`, ...args);
}
// Event structure: namespace/event

View file

@ -46,10 +46,9 @@ function recursiveReplaceFields(input: string, fields: Fields) {
}
return values.flat();
} else {
// base case
return [input];
}
// base case
return [input];
}
export function TextReact({ id, fields }: Props) {
@ -57,7 +56,7 @@ export function TextReact({ id, fields }: Props) {
const path = id.split(".");
let entry = intl.dictionary[path.shift()!];
for (let key of path) {
for (const key of path) {
// @ts-expect-error
entry = entry[key];
}

View file

@ -1,7 +1,7 @@
import { isDesktop, isMobile, isTablet } from "react-device-detect";
export const isTouchscreenDevice =
(isDesktop || isTablet)
isDesktop || isTablet
? false
: (typeof window !== "undefined"
? navigator.maxTouchPoints > 0

View file

@ -74,10 +74,15 @@ export class SingletonRenderer extends EventEmitter3 {
async init(id: string, message_id?: string) {
if (message_id) {
if (this.state.type === 'RENDER') {
let message = this.state.messages.find(x => x._id === message_id);
if (this.state.type === "RENDER") {
const message = this.state.messages.find(
(x) => x._id === message_id,
);
if (message) {
this.emit("scroll", { type: "ScrollToView", id: message_id });
this.emit("scroll", {
type: "ScrollToView",
id: message_id,
});
return;
}
}
@ -103,9 +108,9 @@ export class SingletonRenderer extends EventEmitter3 {
function generateScroll(end: string): ScrollState {
if (ref) {
let heightRemoved = 0;
let messageContainer = ref.children[0];
const messageContainer = ref.children[0];
if (messageContainer) {
for (let child of Array.from(messageContainer.children)) {
for (const child of Array.from(messageContainer.children)) {
// If this child has a ulid.
if (child.id?.length === 26) {
// Check whether it was removed.
@ -127,12 +132,11 @@ export class SingletonRenderer extends EventEmitter3 {
type: "OffsetTop",
previousHeight: ref.scrollHeight - heightRemoved,
};
} else {
return {
type: "OffsetTop",
previousHeight: 0,
};
}
return {
type: "OffsetTop",
previousHeight: 0,
};
}
await this.currentRenderer.loadTop(this, generateScroll);
@ -148,9 +152,9 @@ export class SingletonRenderer extends EventEmitter3 {
function generateScroll(start: string): ScrollState {
if (ref) {
let heightRemoved = 0;
let messageContainer = ref.children[0];
const messageContainer = ref.children[0];
if (messageContainer) {
for (let child of Array.from(messageContainer.children)) {
for (const child of Array.from(messageContainer.children)) {
// If this child has a ulid.
if (child.id?.length === 26) {
// Check whether it was removed.
@ -172,11 +176,10 @@ export class SingletonRenderer extends EventEmitter3 {
type: "ScrollTop",
y: ref.scrollTop - heightRemoved,
};
} else {
return {
type: "ScrollToBottom",
};
}
return {
type: "ScrollToBottom",
};
}
await this.currentRenderer.loadBottom(this, generateScroll);

View file

@ -8,10 +8,14 @@ export const SimpleRenderer: RendererRoutines = {
if (renderer.client!.websocket.connected) {
if (nearby)
renderer
.client!.channels.fetchMessagesWithUsers(id, { nearby, limit: 100 }, true)
.client!.channels.fetchMessagesWithUsers(
id,
{ nearby, limit: 100 },
true,
)
.then(({ messages: data }) => {
data.sort((a, b) => a._id.localeCompare(b._id));
let messages = data.map((x) => mapMessage(x));
const messages = data.map((x) => mapMessage(x));
renderer.setState(
id,
{
@ -28,7 +32,7 @@ export const SimpleRenderer: RendererRoutines = {
.client!.channels.fetchMessagesWithUsers(id, {}, true)
.then(({ messages: data }) => {
data.reverse();
let messages = data.map((x) => mapMessage(x));
const messages = data.map((x) => mapMessage(x));
renderer.setState(
id,
{
@ -72,11 +76,11 @@ export const SimpleRenderer: RendererRoutines = {
if (!channel) return;
if (renderer.state.type !== "RENDER") return;
let messages = [...renderer.state.messages];
let index = messages.findIndex((x) => x._id === id);
const messages = [...renderer.state.messages];
const index = messages.findIndex((x) => x._id === id);
if (index > -1) {
let message = { ...messages[index], ...mapMessage(patch) };
const message = { ...messages[index], ...mapMessage(patch) };
messages.splice(index, 1, message);
renderer.setState(
@ -94,8 +98,8 @@ export const SimpleRenderer: RendererRoutines = {
if (!channel) return;
if (renderer.state.type !== "RENDER") return;
let messages = [...renderer.state.messages];
let index = messages.findIndex((x) => x._id === id);
const messages = [...renderer.state.messages];
const index = messages.findIndex((x) => x._id === id);
if (index > -1) {
messages.splice(index, 1);

View file

@ -8,7 +8,7 @@ export type ScrollState =
| { type: "Free" }
| { type: "Bottom"; scrollingUntil?: number }
| { type: "ScrollToBottom" | "StayAtBottom"; smooth?: boolean }
| { type: "ScrollToView", id: string }
| { type: "ScrollToView"; id: string }
| { type: "OffsetTop"; previousHeight: number }
| { type: "ScrollTop"; y: number };

View file

@ -117,10 +117,10 @@ export default class Signaling extends EventEmitter<SignalingEvents> {
this.once("close", onClose);
const json = {
id: this.index,
type: type,
type,
data,
};
ws.send(JSON.stringify(json) + "\n");
ws.send(`${JSON.stringify(json)}\n`);
this.index++;
});
}
@ -161,7 +161,7 @@ export default class Signaling extends EventEmitter<SignalingEvents> {
type: ProduceType,
rtpParameters: RtpParameters,
): Promise<string> {
let result = await this.sendRequest(WSCommandType.StartProduce, {
const result = await this.sendRequest(WSCommandType.StartProduce, {
type,
rtpParameters,
});

View file

@ -172,7 +172,7 @@ export default class VoiceClient extends EventEmitter<VoiceEvents> {
if (this.device === undefined || this.roomId === undefined)
throw new ReferenceError("Voice Client is in an invalid state");
const result = await this.signaling.authenticate(token, this.roomId);
let [room] = await Promise.all([
const [room] = await Promise.all([
this.signaling.roomInfo(),
this.device.load({ routerRtpCapabilities: result.rtpCapabilities }),
]);
@ -229,7 +229,7 @@ export default class VoiceClient extends EventEmitter<VoiceEvents> {
});
this.emit("ready");
for (let user of this.participants) {
for (const user of this.participants) {
if (user[1].audio && user[0] !== this.userId)
this.startConsume(user[0], "audio");
}
@ -323,7 +323,7 @@ export default class VoiceClient extends EventEmitter<VoiceEvents> {
await this.signaling.stopProduce(type);
} catch (error) {
if (error.error === WSErrorCode.ProducerNotFound) return;
else throw error;
throw error;
}
}
}

View file

@ -10,10 +10,10 @@ import { dispatch, getState } from "../../redux";
import { useChannel, useForceUpdate } from "../../context/revoltjs/hooks";
import AgeGate from "../../components/common/AgeGate";
import MessageBox from "../../components/common/messaging/MessageBox";
import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom";
import TypingIndicator from "../../components/common/messaging/bars/TypingIndicator";
import AgeGate from "../../components/common/AgeGate";
import MemberSidebar from "../../components/navigation/right/MemberSidebar";
import ChannelHeader from "./ChannelHeader";
@ -43,9 +43,8 @@ export function Channel({ id }: { id: string }) {
if (channel.channel_type === "VoiceChannel") {
return <VoiceChannel channel={channel} />;
} else {
return <TextChannel channel={channel} />;
}
return <TextChannel channel={channel} />;
}
const MEMBERS_SIDEBAR_KEY = "sidebar_members";
@ -54,14 +53,16 @@ function TextChannel({ channel }: { channel: Channels.Channel }) {
getState().sectionToggle[MEMBERS_SIDEBAR_KEY] ?? true,
);
let id = channel._id;
const id = channel._id;
return (
<AgeGate
type="channel"
channel={channel}
gated={(channel.channel_type === "TextChannel" ||
channel.channel_type === "Group") &&
channel.name.includes("nsfw")}>
gated={
(channel.channel_type === "TextChannel" ||
channel.channel_type === "Group") &&
channel.name.includes("nsfw")
}>
<ChannelHeader
channel={channel}
toggleSidebar={() => {

View file

@ -93,11 +93,11 @@ export default function ChannelHeader({
return (
<Header placement="primary">
{isTouchscreenDevice &&
{isTouchscreenDevice && (
<div className="menu">
<Menu size={27} />
</div>
}
)}
{icon}
<Info>
<span className="name">{name}</span>

View file

@ -3,7 +3,7 @@ import {
Cog,
PhoneCall,
PhoneOutgoing,
Group
Group,
} from "@styled-icons/boxicons-solid";
import { useHistory } from "react-router-dom";
@ -64,11 +64,11 @@ export default function HeaderActions({
)}
<VoiceActions channel={channel} />
{(channel.channel_type === "Group" ||
channel.channel_type === "TextChannel") &&
<IconButton onClick={toggleSidebar}>
<Group size={25} />
</IconButton>
}
channel.channel_type === "TextChannel") && (
<IconButton onClick={toggleSidebar}>
<Group size={25} />
</IconButton>
)}
</>
);
}
@ -90,22 +90,20 @@ function VoiceActions({ channel }: Pick<ChannelHeaderProps, "channel">) {
<PhoneOutgoing size={22} />
</IconButton>
);
} else {
return (
<IconButton
onClick={() => {
disconnect();
connect(channel._id);
}}>
<PhoneCall size={24} />
</IconButton>
);
}
} else {
return (
<IconButton>
<PhoneCall size={24} /** ! FIXME: TEMP */ color="red" />
<IconButton
onClick={() => {
disconnect();
connect(channel._id);
}}>
<PhoneCall size={24} />
</IconButton>
);
}
return (
<IconButton>
<PhoneCall size={24} /** ! FIXME: TEMP */ color="red" />
</IconButton>
);
}

View file

@ -1,3 +1,4 @@
import { useHistory, useParams } from "react-router-dom";
import { animateScroll } from "react-scroll";
import styled from "styled-components";
import useResizeObserver from "use-resize-observer";
@ -28,7 +29,6 @@ import Preloader from "../../../components/ui/Preloader";
import ConversationStart from "./ConversationStart";
import MessageRenderer from "./MessageRenderer";
import { useHistory, useParams } from "react-router-dom";
const Area = styled.div`
height: 100%;
@ -100,8 +100,9 @@ export function MessageArea({ id }: Props) {
duration: scrollState.current.smooth ? 150 : 0,
});
} else if (scrollState.current.type === "ScrollToView") {
document.getElementById(scrollState.current.id)
?.scrollIntoView({ block: 'center' });
document
.getElementById(scrollState.current.id)
?.scrollIntoView({ block: "center" });
setScrollState({ type: "Free" });
} else if (scrollState.current.type === "OffsetTop") {
@ -147,8 +148,9 @@ export function MessageArea({ id }: Props) {
// ? Handle global jump to bottom, e.g. when editing last message in chat.
useEffect(() => {
return internalSubscribe('MessageArea', 'jump_to_bottom',
() => setScrollState({ type: 'ScrollToBottom' }));
return internalSubscribe("MessageArea", "jump_to_bottom", () =>
setScrollState({ type: "ScrollToBottom" }),
);
}, []);
// ? Handle events from renderer.
@ -175,8 +177,8 @@ export function MessageArea({ id }: Props) {
setHighlight(message);
SingletonMessageRenderer.init(id, message);
let channel = client.channels.get(id);
if (channel?.channel_type === 'TextChannel') {
const channel = client.channels.get(id);
if (channel?.channel_type === "TextChannel") {
history.push(`/server/${channel.server}/channel/${id}`);
} else {
history.push(`/channel/${id}`);
@ -287,7 +289,11 @@ export function MessageArea({ id }: Props) {
</RequiresOnline>
)}
{state.type === "RENDER" && (
<MessageRenderer id={id} state={state} highlight={highlight} />
<MessageRenderer
id={id}
state={state}
highlight={highlight}
/>
)}
{state.type === "EMPTY" && <ConversationStart id={id} />}
</div>

View file

@ -61,7 +61,7 @@ function MessageRenderer({ id, state, queue, highlight }: Props) {
for (let i = state.messages.length - 1; i >= 0; i--) {
if (state.messages[i].author === userId) {
setEditing(state.messages[i]._id);
internalEmit('MessageArea', 'jump_to_bottom');
internalEmit("MessageArea", "jump_to_bottom");
return;
}
}

View file

@ -42,10 +42,7 @@ export function Friend({ user }: Props) {
<>
<IconButton
type="circle"
className={classNames(
styles.button,
styles.success,
)}
className={classNames(styles.button, styles.success)}
onClick={(ev) =>
stopPropagation(ev, openDM(user._id).then(connect))
}>
@ -88,7 +85,11 @@ export function Friend({ user }: Props) {
actions.push(
<IconButton
type="circle"
className={classNames(styles.button, styles.remove, styles.error)}
className={classNames(
styles.button,
styles.remove,
styles.error,
)}
onClick={(ev) =>
stopPropagation(
ev,

View file

@ -1,11 +1,11 @@
import { Home as HomeIcon } from "@styled-icons/boxicons-solid";
import Button from "../../components/ui/Button";
import { Link } from "react-router-dom";
import styles from "./Home.module.scss";
import { Text } from "preact-i18n";
import wideSVG from "../../assets/wide.svg";
import Button from "../../components/ui/Button";
import Header from "../../components/ui/Header";
export default function Home() {
@ -26,14 +26,13 @@ export default function Home() {
</Button>
</Link>
<Link to="/settings/feedback">
<Button contrast>
Give feedback
</Button>
<Button contrast>Give feedback</Button>
</Link>
<a href="https://gitlab.insrt.uk/revolt" target="_blank">
<Button contrast>
Source code
</Button>
<a
href="https://gitlab.insrt.uk/revolt"
target="_blank"
rel="noreferrer">
<Button contrast>Source code</Button>
</a>
</div>
</div>

View file

@ -106,14 +106,22 @@ export default function Invite() {
setProcessing(true);
if (invite.type === "Server") {
if (client.servers.get(invite.server_id)) {
history.push(`/server/${invite.server_id}/channel/${invite.channel_id}`);
if (
client.servers.get(invite.server_id)
) {
history.push(
`/server/${invite.server_id}/channel/${invite.channel_id}`,
);
}
}
let result = await client.joinInvite(code);
const result = await client.joinInvite(
code,
);
if (result.type === "Server") {
history.push(`/server/${result.server._id}/channel/${result.channel._id}`);
history.push(
`/server/${result.server._id}/channel/${result.channel._id}`,
);
}
} catch (err) {
setError(takeError(err));

View file

@ -4,15 +4,24 @@ import { Text } from "preact-i18n";
export function Legal() {
return (
<span className={styles.footer}>
<a href="https://revolt.chat/about" target="_blank">
<a
href="https://revolt.chat/about"
target="_blank"
rel="noreferrer">
<Text id="general.about" />
</a>
&middot;
<a href="https://revolt.chat/terms" target="_blank">
<a
href="https://revolt.chat/terms"
target="_blank"
rel="noreferrer">
<Text id="general.tos" />
</a>
&middot;
<a href="https://revolt.chat/privacy" target="_blank">
<a
href="https://revolt.chat/privacy"
target="_blank"
rel="noreferrer">
<Text id="general.privacy" />
</a>
</span>

View file

@ -43,7 +43,7 @@ export function MailProvider({ email }: Props) {
return (
<div className={styles.mailProvider}>
<a href={provider[1]} target="_blank">
<a href={provider[1]} target="_blank" rel="noreferrer">
<Button>
<Text
id="login.open_mail_provider"

View file

@ -147,13 +147,19 @@ export default function Settings() {
switchPage={switchPage}
category="pages"
custom={[
<a href="https://gitlab.insrt.uk/revolt" target="_blank">
<a
href="https://gitlab.insrt.uk/revolt"
target="_blank"
rel="noreferrer">
<ButtonItem compact>
<Gitlab size={20} />
<Text id="app.settings.pages.source_code" />
</ButtonItem>
</a>,
<a href="https://ko-fi.com/insertish" target="_blank">
<a
href="https://ko-fi.com/insertish"
target="_blank"
rel="noreferrer">
<ButtonItem className={styles.donate} compact>
<Coffee size={20} />
<Text id="app.settings.pages.donate.title" />
@ -172,7 +178,8 @@ export default function Settings() {
<span className={styles.revision}>
<a
href={`${REPO_URL}/${GIT_REVISION}`}
target="_blank">
target="_blank"
rel="noreferrer">
{GIT_REVISION.substr(0, 7)}
</a>
{` `}
@ -182,7 +189,8 @@ export default function Settings() {
? `https://gitlab.insrt.uk/revolt/client/-/tree/${GIT_BRANCH}`
: undefined
}
target="_blank">
target="_blank"
rel="noreferrer">
({GIT_BRANCH})
</a>
</span>

View file

@ -1,4 +1,5 @@
import { Channels } from "revolt.js/dist/api/objects";
import styled, { css } from "styled-components";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
@ -7,7 +8,7 @@ import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import { FileUploader } from "../../../context/revoltjs/FileUploads";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import styled, { css } from "styled-components";
import Button from "../../../components/ui/Button";
import InputBox from "../../../components/ui/InputBox";
@ -45,7 +46,7 @@ export default function Overview({ channel }: Props) {
const [changed, setChanged] = useState(false);
function save() {
let changes: any = {};
const changes: any = {};
if (name !== channel.name) changes.name = name;
if (description !== channel.description)
changes.description = description;

View file

@ -33,11 +33,11 @@ export default function Permissions({ channel }: Props) {
const client = useContext(AppContext);
type R = { name: string; permissions: number };
let roles: { [key: string]: R } = {};
const roles: { [key: string]: R } = {};
if (channel.channel_type !== "Group") {
const server = useServer(channel.server);
const a = server?.roles ?? {};
for (let b of Object.keys(a)) {
for (const b of Object.keys(a)) {
roles[b] = {
name: a[b].name,
permissions: a[b].permissions[1],
@ -73,7 +73,7 @@ export default function Permissions({ channel }: Props) {
<h2>select role</h2>
{selected}
{keys.map((id) => {
let role: R = id === "default" ? defaultRole : roles[id];
const role: R = id === "default" ? defaultRole : roles[id];
return (
<Checkbox
@ -85,7 +85,7 @@ export default function Permissions({ channel }: Props) {
})}
<h2>channel per??issions</h2>
{Object.keys(ChannelPermission).map((perm) => {
let value =
const value =
ChannelPermission[perm as keyof typeof ChannelPermission];
if (value & DEFAULT_PERMISSION_DM) {
return (

View file

@ -118,7 +118,7 @@ export function Account() {
onClick={() =>
openScreen({
id: "modify_account",
field: field,
field,
})
}
contrast>
@ -142,7 +142,8 @@ export function Account() {
Currently work in progress, see{" "}
<a
href="https://gitlab.insrt.uk/insert/rauth/-/issues/2"
target="_blank">
target="_blank"
rel="noreferrer">
tracking issue here
</a>
.

View file

@ -1,4 +1,6 @@
// @ts-ignore
import { Reset, Import } from "@styled-icons/boxicons-regular";
import { Pencil } from "@styled-icons/boxicons-solid";
import pSBC from "shade-blend-color";
import styles from "./Panes.module.scss";
@ -26,6 +28,7 @@ import {
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import CollapsibleSection from "../../../components/common/CollapsibleSection";
import Tooltip from "../../../components/common/Tooltip";
import Button from "../../../components/ui/Button";
import Checkbox from "../../../components/ui/Checkbox";
import ColourSwatches from "../../../components/ui/ColourSwatches";
@ -37,9 +40,6 @@ import mutantSVG from "../assets/mutant_emoji.svg";
import notoSVG from "../assets/noto_emoji.svg";
import openmojiSVG from "../assets/openmoji_emoji.svg";
import twemojiSVG from "../assets/twemoji_emoji.svg";
import { Reset, Import } from "@styled-icons/boxicons-regular";
import { Pencil } from "@styled-icons/boxicons-solid";
import Tooltip from "../../../components/common/Tooltip";
interface Props {
settings: Settings;
@ -205,7 +205,8 @@ export function Component(props: Props) {
Mutant Remix{" "}
<a
href="https://mutant.revolt.chat"
target="_blank">
target="_blank"
rel="noreferrer">
(by Revolt)
</a>
</h4>
@ -247,23 +248,37 @@ export function Component(props: Props) {
id="settings_overrides"
summary={<Text id="app.settings.pages.appearance.overrides" />}>
<div className={styles.actions}>
<Tooltip content={<Text id="app.settings.pages.appearance.reset_overrides" />}>
<Button contrast iconbutton onClick={() => setTheme({ custom: {} })}>
<Reset size={22}/>
<Tooltip
content={
<Text id="app.settings.pages.appearance.reset_overrides" />
}>
<Button
contrast
iconbutton
onClick={() => setTheme({ custom: {} })}>
<Reset size={22} />
</Button>
</Tooltip>
<div className={styles.code} onClick={() => writeClipboard(JSON.stringify(theme))}>
<Tooltip content={<Text id="app.special.copy" />}> {/*TOFIX: Try to put the tooltip above the .code div without messing up the css challenge */}
<div
className={styles.code}
onClick={() => writeClipboard(JSON.stringify(theme))}>
<Tooltip content={<Text id="app.special.copy" />}>
{" "}
{/*TOFIX: Try to put the tooltip above the .code div without messing up the css challenge */}
{JSON.stringify(theme)}
</Tooltip>
</div>
<Tooltip content={<Text id="app.settings.pages.appearance.import" />}>
<Tooltip
content={
<Text id="app.settings.pages.appearance.import" />
}>
<Button
contrast
iconbutton
onClick={async () => {
try {
const text = await navigator.clipboard.readText();
const text =
await navigator.clipboard.readText();
setOverride(JSON.parse(text));
} catch (err) {
openScreen({
@ -279,13 +294,11 @@ export function Component(props: Props) {
});
}
}}>
<Import size={22}/>
<Import size={22} />
</Button>
</Tooltip>
</div>
<h3>
App
</h3>
<h3>App</h3>
<div className={styles.overrides}>
{(
[
@ -315,7 +328,9 @@ export function Component(props: Props) {
"hover",
] as const
).map((x) => (
<div className={styles.entry} key={x}
<div
className={styles.entry}
key={x}
style={{ backgroundColor: theme[x] }}>
<div className={styles.input}>
<input
@ -330,8 +345,13 @@ export function Component(props: Props) {
</div>
<span>{x}</span>
<div className={styles.override}>
<div className={styles.picker}
onClick={e => e.currentTarget.parentElement?.parentElement?.querySelector('input')?.click()}>
<div
className={styles.picker}
onClick={(e) =>
e.currentTarget.parentElement?.parentElement
?.querySelector("input")
?.click()
}>
<Pencil size={24} />
</div>
<InputBox

View file

@ -32,8 +32,8 @@ export function Component(props: Props) {
key,
})
}
description={ EXPERIMENTS[key].description }>
{ EXPERIMENTS[key].title }
description={EXPERIMENTS[key].description}>
{EXPERIMENTS[key].title}
</Checkbox>
))}
{AVAILABLE_EXPERIMENTS.length === 0 && (

View file

@ -76,7 +76,8 @@ export function Component(props: Props) {
</span>{" "}
<a
href="https://weblate.insrt.uk/engage/revolt/?utm_source=widget"
target="_blank">
target="_blank"
rel="noreferrer">
<Text id="app.settings.tips.languages.b" />
</a>
</Tip>

View file

@ -59,7 +59,8 @@ export function Component({ options }: Props) {
}
onChange={async (desktopEnabled) => {
if (desktopEnabled) {
let permission = await Notification.requestPermission();
const permission =
await Notification.requestPermission();
if (permission !== "granted") {
return openScreen({
id: "error",
@ -126,7 +127,7 @@ export function Component({ options }: Props) {
</h3>
{SOUNDS_ARRAY.map((key) => (
<Checkbox
checked={enabledSounds[key] ? true : false}
checked={!!enabledSounds[key]}
onChange={(enabled) =>
dispatch({
type: "SETTINGS_SET_NOTIFICATION_OPTIONS",

View file

@ -1,12 +1,18 @@
import { Chrome, Android, Apple, Windows } from "@styled-icons/boxicons-logos";
import { HelpCircle } from "@styled-icons/boxicons-regular";
import {
Safari,
Firefoxbrowser,
Microsoftedge,
Linux,
Macos,
} from "@styled-icons/simple-icons";
import relativeTime from "dayjs/plugin/relativeTime";
import { useHistory } from "react-router-dom";
import { decodeTime } from "ulid";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { Safari, Firefoxbrowser, Microsoftedge, Linux, Macos } from "@styled-icons/simple-icons";
import { Chrome, Android, Apple, Windows } from "@styled-icons/boxicons-logos";
import { useContext, useEffect, useState } from "preact/hooks";
import { dayjs } from "../../../context/Locale";
@ -95,7 +101,7 @@ export function Sessions() {
});
mapped.sort((a, b) => b.timestamp - a.timestamp);
let id = mapped.findIndex((x) => x.id === deviceId);
const id = mapped.findIndex((x) => x.id === deviceId);
const render = [
mapped[id],
@ -114,7 +120,9 @@ export function Sessions() {
<div
className={styles.entry}
data-active={session.id === deviceId}
data-deleting={attemptingDelete.indexOf(session.id) > -1}>
data-deleting={
attemptingDelete.indexOf(session.id) > -1
}>
{deviceId === session.id && (
<span className={styles.label}>
<Text id="app.settings.pages.sessions.this_device" />{" "}
@ -122,18 +130,25 @@ export function Sessions() {
)}
<div className={styles.session}>
<div className={styles.detail}>
<svg width={42} height={42}
viewBox="0 0 32 32">
<svg width={42} height={42} viewBox="0 0 32 32">
<foreignObject
x="0"
y="0"
width="32"
height="32"
mask={systemIcon ? "url(#session)": undefined}>
mask={
systemIcon
? "url(#session)"
: undefined
}>
{getIcon(session)}
</foreignObject>
<foreignObject x="18" y="18" width="14" height="14">
{ systemIcon }
<foreignObject
x="18"
y="18"
width="14"
height="14">
{systemIcon}
</foreignObject>
</svg>
<div className={styles.info}>
@ -142,7 +157,8 @@ export function Sessions() {
className={styles.name}
value={session.friendly_name}
autocomplete="off"
style={{ pointerEvents: 'none' }} />
style={{ pointerEvents: "none" }}
/>
<span className={styles.time}>
<Text
id="app.settings.pages.sessions.created"
@ -155,7 +171,7 @@ export function Sessions() {
</span>
</div>
</div>
{deviceId !== session.id && (
{deviceId !== session.id && (
<Button
onClick={async () => {
setDelete([
@ -173,35 +189,37 @@ export function Sessions() {
);
}}
disabled={
attemptingDelete.indexOf(session.id) > -1
attemptingDelete.indexOf(session.id) >
-1
}>
<Text id="app.settings.pages.logOut" />
</Button>
)}
</div>
</div>
)
);
})}
<Button error
<Button
error
onClick={async () => {
// ! FIXME: add to rAuth
let del: string[] = [];
const del: string[] = [];
render.forEach((session) => {
if (deviceId !== session.id) {
del.push(session.id);
}
})
});
setDelete(del);
for (let id of del) {
for (const id of del) {
await client.req(
"DELETE",
`/auth/sessions/${id}` as "/auth/sessions",
);
}
setSessions(sessions.filter(x => x.id === deviceId));
setSessions(sessions.filter((x) => x.id === deviceId));
}}>
<Text id="app.settings.pages.sessions.logout" />
</Button>

View file

@ -46,8 +46,8 @@ export function Invites({ server }: Props) {
</div>
{typeof invites === "undefined" && <Preloader type="ring" />}
{invites?.map((invite) => {
let creator = users.find((x) => x?._id === invite.creator);
let channel = channels.find((x) => x?._id === invite.channel);
const creator = users.find((x) => x?._id === invite.creator);
const channel = channels.find((x) => x?._id === invite.channel);
return (
<div

View file

@ -40,7 +40,7 @@ export function Overview({ server }: Props) {
const [changed, setChanged] = useState(false);
function save() {
let changes: Partial<
const changes: Partial<
Pick<Servers.Server, "name" | "description" | "system_messages">
> = {};
if (name !== server.name) changes.name = name;

View file

@ -88,15 +88,14 @@ export function Roles({ server }: Props) {
<Text id="app.settings.permissions.default_role" />
</ButtonItem>
);
} else {
return (
<ButtonItem
active={role === id}
onClick={() => setRole(id)}>
{roles[id].name}
</ButtonItem>
);
}
return (
<ButtonItem
active={role === id}
onClick={() => setRole(id)}>
{roles[id].name}
</ButtonItem>
);
})}
</div>
<div className={styles.permissions}>
@ -118,7 +117,7 @@ export function Roles({ server }: Props) {
</Overline>
{Object.keys(ServerPermission).map((key) => {
if (key === "View") return;
let value =
const value =
ServerPermission[
key as keyof typeof ServerPermission
];
@ -143,7 +142,7 @@ export function Roles({ server }: Props) {
</Overline>
{Object.keys(ChannelPermission).map((key) => {
if (key === "ManageChannel") return;
let value =
const value =
ChannelPermission[
key as keyof typeof ChannelPermission
];

View file

@ -11,6 +11,6 @@ export function connectState<T>(
mapKeys: (state: State, props: T) => any,
memoize?: boolean,
): ConnectedComponent<(props: any) => h.JSX.Element | null, T> {
let c = connect(mapKeys)(component);
const c = connect(mapKeys)(component);
return memoize ? memo(c) : c;
}

View file

@ -1,10 +1,12 @@
export type Experiments = 'search';
export const AVAILABLE_EXPERIMENTS: Experiments[] = [ 'search' ];
export const EXPERIMENTS: { [key in Experiments]: { title: string, description: string } } = {
'search': {
title: 'Search',
description: 'Allows you to search for messages in channels.'
}
export type Experiments = "search";
export const AVAILABLE_EXPERIMENTS: Experiments[] = ["search"];
export const EXPERIMENTS: {
[key in Experiments]: { title: string; description: string };
} = {
search: {
title: "Search",
description: "Allows you to search for messages in channels.",
},
};
export interface ExperimentOptions {

View file

@ -1,3 +1,3 @@
export const REPO_URL = "https://gitlab.insrt.uk/revolt/revite/-/commit";
export const GIT_REVISION = "__GIT_REVISION__";
export const GIT_BRANCH: string = "__GIT_BRANCH__";
export const GIT_BRANCH = "__GIT_BRANCH__";

View file

@ -26,13 +26,13 @@ const ENCODING_LEN = ENCODING.length;
const TIME_LEN = 10;
function decodeTime(id: string) {
var time = id
const time = id
.substr(0, TIME_LEN)
.split("")
.reverse()
.reduce(function (carry, char, index) {
var encodingIndex = ENCODING.indexOf(char);
if (encodingIndex === -1) throw "invalid character found: " + char;
.reduce((carry, char, index) => {
const encodingIndex = ENCODING.indexOf(char);
if (encodingIndex === -1) throw `invalid character found: ${char}`;
return (carry += encodingIndex * Math.pow(ENCODING_LEN, index));
}, 0);
@ -43,9 +43,9 @@ function decodeTime(id: string) {
self.addEventListener("push", (event) => {
async function process() {
if (event.data === null) return;
let data: Message = event.data.json();
const data: Message = event.data.json();
let item = await localStorage.getItem("state");
const item = await localStorage.getItem("state");
if (!item) return;
const state: State = JSON.parse(item);
@ -57,7 +57,7 @@ self.addEventListener("push", (event) => {
// Match RevoltClient.tsx#L55
db = await openDB("state", 3, {
upgrade(db) {
for (let store of [
for (const store of [
"channels",
"servers",
"users",
@ -87,8 +87,8 @@ self.addEventListener("push", (event) => {
}
}
let channel = await get<Channel>("channels", data.channel);
let user = await get<User>("users", data.author);
const channel = await get<Channel>("channels", data.channel);
const user = await get<User>("users", data.author);
if (channel) {
const notifs = getNotificationState(state.notifications, channel);
@ -96,10 +96,10 @@ self.addEventListener("push", (event) => {
}
let title = `@${data.author}`;
let username = user?.username ?? data.author;
const username = user?.username ?? data.author;
let image;
if (data.attachments) {
let attachment = data.attachments[0];
const attachment = data.attachments[0];
if (attachment.metadata.type === "Image") {
image = `${autumn_url}/${attachment.tag}/${attachment._id}`;
}
@ -120,7 +120,7 @@ self.addEventListener("push", (event) => {
break;
case "TextChannel":
{
let server = await get<Server>("servers", channel.server);
const server = await get<Server>("servers", channel.server);
title = `@${user?.username} (#${channel.name}, ${server?.name})`;
}
break;
@ -150,16 +150,16 @@ self.addEventListener("push", (event) => {
// ? Open the app on notification click.
// https://stackoverflow.com/a/39457287
self.addEventListener("notificationclick", function (event) {
let url = event.notification.data;
self.addEventListener("notificationclick", (event) => {
const url = event.notification.data;
event.notification.close();
event.waitUntil(
self.clients
.matchAll({ includeUncontrolled: true, type: "window" })
.then((windowClients) => {
// Check if there is already a window/tab open with the target URL
for (var i = 0; i < windowClients.length; i++) {
var client = windowClients[i];
for (let i = 0; i < windowClients.length; i++) {
const client = windowClients[i];
// If so, just focus it.
if (client.url === url && "focus" in client) {
return client.focus();