Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
No results found
Show changes
Hide whitespace changes
Inline Side-by-side
Showing
with 1023 additions and 645 deletions
src/components/common/ServerHeader.tsx
View file @ 1ac5de17
import { Cog } from "@styled-icons/boxicons-solid"; import { Cog } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Server } from "revolt.js/dist/api/objects";
import { ServerPermission } from "revolt.js/dist/api/permissions"; import { ServerPermission } from "revolt.js/dist/api/permissions";
import { Server } from "revolt.js/dist/maps/Servers";
import styled from "styled-components"; import styled from "styled-components";
import { HookContext, useServerPermission } from "../../context/revoltjs/hooks";
import Header from "../ui/Header"; import Header from "../ui/Header";
import IconButton from "../ui/IconButton"; import IconButton from "../ui/IconButton";
interface Props { interface Props {
server: Server; server: Server;
ctx: HookContext;
} }
const ServerName = styled.div` const ServerName = styled.div`
flex-grow: 1; flex-grow: 1;
`; `;
export default function ServerHeader({ server, ctx }: Props) { export default observer(({ server }: Props) => {
const permissions = useServerPermission(server._id, ctx); const bannerURL = server.generateBannerURL({ width: 480 });
const bannerURL = ctx.client.servers.getBannerURL(
server._id,
{ width: 480 },
true,
);
return ( return (
<Header <Header
...@@ -35,7 +28,7 @@ export default function ServerHeader({ server, ctx }: Props) { ...@@ -35,7 +28,7 @@ export default function ServerHeader({ server, ctx }: Props) {
background: bannerURL ? `url('${bannerURL}')` : undefined, background: bannerURL ? `url('${bannerURL}')` : undefined,
}}> }}>
<ServerName>{server.name}</ServerName> <ServerName>{server.name}</ServerName>
{(permissions & ServerPermission.ManageServer) > 0 && ( {(server.permission & ServerPermission.ManageServer) > 0 && (
<div className="actions"> <div className="actions">
<Link to={`/server/${server._id}/settings`}> <Link to={`/server/${server._id}/settings`}>
<IconButton> <IconButton>
...@@ -46,4 +39,4 @@ export default function ServerHeader({ server, ctx }: Props) { ...@@ -46,4 +39,4 @@ export default function ServerHeader({ server, ctx }: Props) {
)} )}
</Header> </Header>
); );
} });
src/components/common/ServerIcon.tsx
View file @ 1ac5de17
import { Server } from "revolt.js/dist/api/objects"; import { observer } from "mobx-react-lite";
import { Server } from "revolt.js/dist/maps/Servers";
import styled from "styled-components"; import styled from "styled-components";
import { useContext } from "preact/hooks"; import { useContext } from "preact/hooks";
...@@ -21,48 +22,47 @@ const ServerText = styled.div` ...@@ -21,48 +22,47 @@ const ServerText = styled.div`
background: var(--primary-background); background: var(--primary-background);
`; `;
const fallback = "/assets/group.png"; // const fallback = "/assets/group.png";
export default function ServerIcon( export default observer(
props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>, (
) { props: Props &
const client = useContext(AppContext); Omit<
JSX.HTMLAttributes<HTMLImageElement>,
keyof Props | "children" | "as"
>,
) => {
const client = useContext(AppContext);
const { const { target, attachment, size, animate, server_name, ...imgProps } =
target, props;
attachment, const iconURL = client.generateFileURL(
size, target?.icon ?? attachment,
animate, { max_side: 256 },
server_name, animate,
children, );
as,
...imgProps if (typeof iconURL === "undefined") {
} = props; const name = target?.name ?? server_name ?? "";
const iconURL = client.generateFileURL(
target?.icon ?? attachment,
{ max_side: 256 },
animate,
);
if (typeof iconURL === "undefined") { return (
const name = target?.name ?? server_name ?? ""; <ServerText style={{ width: size, height: size }}>
{name
.split(" ")
.map((x) => x[0])
.filter((x) => typeof x !== "undefined")}
</ServerText>
);
}
return ( return (
<ServerText style={{ width: size, height: size }}> <ImageIconBase
{name {...imgProps}
.split(" ") width={size}
.map((x) => x[0]) height={size}
.filter((x) => typeof x !== "undefined")} src={iconURL}
</ServerText> loading="lazy"
aria-hidden="true"
/>
); );
} },
);
return (
<ImageIconBase
{...imgProps}
width={size}
height={size}
aria-hidden="true"
src={iconURL}
/>
);
}
src/components/common/Tooltip.tsx
View file @ 1ac5de17
...@@ -16,8 +16,8 @@ export default function Tooltip(props: Props) { ...@@ -16,8 +16,8 @@ export default function Tooltip(props: Props) {
return ( return (
<Tippy content={content} {...tippyProps}> <Tippy content={content} {...tippyProps}>
{/* {/*
// @ts-expect-error */} // @ts-expect-error Type mis-match. */}
<div>{children}</div> <div style={`display: flex;`}>{children}</div>
</Tippy> </Tippy>
); );
} }
...@@ -35,7 +35,7 @@ const PermissionTooltipBase = styled.div` ...@@ -35,7 +35,7 @@ const PermissionTooltipBase = styled.div`
} }
code { code {
font-family: var(--monoscape-font); font-family: var(--monospace-font);
} }
`; `;
......
src/components/common/UpdateIndicator.tsx
View file @ 1ac5de17
import { Download } from "@styled-icons/boxicons-regular"; /* eslint-disable react-hooks/rules-of-hooks */
import { Download, CloudDownload } from "@styled-icons/boxicons-regular";
import { useContext, useEffect, useState } from "preact/hooks"; import { useContext, useEffect, useState } from "preact/hooks";
...@@ -9,11 +10,16 @@ import { ThemeContext } from "../../context/Theme"; ...@@ -9,11 +10,16 @@ import { ThemeContext } from "../../context/Theme";
import IconButton from "../ui/IconButton"; import IconButton from "../ui/IconButton";
import { updateSW } from "../../main"; import { updateSW } from "../../main";
import Tooltip from "./Tooltip";
var pendingUpdate = false; let pendingUpdate = false;
internalSubscribe("PWA", "update", () => (pendingUpdate = true)); internalSubscribe("PWA", "update", () => (pendingUpdate = true));
export default function UpdateIndicator() { interface Props {
style: "titlebar" | "channel";
}
export default function UpdateIndicator({ style }: Props) {
const [pending, setPending] = useState(pendingUpdate); const [pending, setPending] = useState(pendingUpdate);
useEffect(() => { useEffect(() => {
...@@ -23,6 +29,22 @@ export default function UpdateIndicator() { ...@@ -23,6 +29,22 @@ export default function UpdateIndicator() {
if (!pending) return null; if (!pending) return null;
const theme = useContext(ThemeContext); const theme = useContext(ThemeContext);
if (style === "titlebar") {
return (
<div class="actions">
<Tooltip
content="A new update is available!"
placement="bottom">
<div onClick={() => updateSW(true)}>
<CloudDownload size={22} color={theme.success} />
</div>
</Tooltip>
</div>
);
}
if (window.isNative) return null;
return ( return (
<IconButton onClick={() => updateSW(true)}> <IconButton onClick={() => updateSW(true)}>
<Download size={22} color={theme.success} /> <Download size={22} color={theme.success} />
......
src/components/common/messaging/Message.tsx
View file @ 1ac5de17
import { observer } from "mobx-react-lite";
import { Message as MessageObject } from "revolt.js/dist/maps/Messages";
import { attachContextMenu } from "preact-context-menu"; import { attachContextMenu } from "preact-context-menu";
import { memo } from "preact/compat"; import { memo } from "preact/compat";
import { useContext } from "preact/hooks"; import { useState } from "preact/hooks";
import { QueuedMessage } from "../../../redux/reducers/queue"; import { QueuedMessage } from "../../../redux/reducers/queue";
import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { AppContext } from "../../../context/revoltjs/RevoltClient"; import { useClient } from "../../../context/revoltjs/RevoltClient";
import { useUser } from "../../../context/revoltjs/hooks";
import { MessageObject } from "../../../context/revoltjs/util";
import Overline from "../../ui/Overline"; import Overline from "../../ui/Overline";
...@@ -28,106 +29,129 @@ interface Props { ...@@ -28,106 +29,129 @@ interface Props {
attachContext?: boolean; attachContext?: boolean;
queued?: QueuedMessage; queued?: QueuedMessage;
message: MessageObject; message: MessageObject;
highlight?: boolean;
contrast?: boolean; contrast?: boolean;
content?: Children; content?: Children;
head?: boolean; head?: boolean;
} }
function Message({ const Message = observer(
attachContext, ({
message, highlight,
contrast, attachContext,
content: replacement, message,
head: preferHead, contrast,
queued, content: replacement,
}: Props) { head: preferHead,
// TODO: Can improve re-renders here by providing a list queued,
// TODO: of dependencies. We only need to update on u/avatar. }: Props) => {
const user = useUser(message.author); const client = useClient();
const client = useContext(AppContext); const user = message.author;
const { openScreen } = useIntermediate();
const { openScreen } = useIntermediate();
const content = message.content as string;
const head =
preferHead || (message.reply_ids && message.reply_ids.length > 0);
const content = message.content as string; // ! TODO: tell fatal to make this type generic
const head = preferHead || (message.replies && message.replies.length > 0); // bree: Fatal please...
const userContext = attachContext
? (attachContextMenu("Menu", {
user: message.author_id,
contextualChannel: message.channel_id,
// eslint-disable-next-line
}) as any)
: undefined;
// ! FIXME: tell fatal to make this type generic const openProfile = () =>
// bree: Fatal please... openScreen({ id: "profile", user_id: message.author_id });
const userContext = attachContext
? (attachContextMenu("Menu", {
user: message.author,
contextualChannel: message.channel,
}) as any)
: undefined;
const openProfile = () => // ! FIXME(?): animate on hover
openScreen({ id: "profile", user_id: message.author }); const [animate, setAnimate] = useState(false);
return ( return (
<div id={message._id}> <div id={message._id}>
{message.replies?.map((message_id, index) => ( {message.reply_ids?.map((message_id, index) => (
<MessageReply <MessageReply
index={index} key={message_id}
id={message_id} index={index}
channel={message.channel} id={message_id}
/> channel={message.channel!}
))} />
<MessageBase ))}
head={head && !(message.replies && message.replies.length > 0)} <MessageBase
contrast={contrast} highlight={highlight}
sending={typeof queued !== "undefined"} head={
mention={message.mentions?.includes(client.user!._id)} (head &&
failed={typeof queued?.error !== "undefined"} !(
onContextMenu={ message.reply_ids &&
attachContext message.reply_ids.length > 0
? attachContextMenu("Menu", { )) ??
message, false
contextualChannel: message.channel, }
queued, contrast={contrast}
}) sending={typeof queued !== "undefined"}
: undefined mention={message.mention_ids?.includes(client.user!._id)}
}> failed={typeof queued?.error !== "undefined"}
<MessageInfo> onContextMenu={
{head ? ( attachContext
<UserIcon ? attachContextMenu("Menu", {
target={user} message,
size={36} contextualChannel: message.channel_id,
onContextMenu={userContext} queued,
onClick={openProfile} })
/> : undefined
) : ( }
<MessageDetail message={message} position="left" /> onMouseEnter={() => setAnimate(true)}
)} onMouseLeave={() => setAnimate(false)}>
</MessageInfo> <MessageInfo>
<MessageContent> {head ? (
{head && ( <UserIcon
<span className="detail"> target={user}
<Username size={36}
className="author"
user={user}
onContextMenu={userContext} onContextMenu={userContext}
onClick={openProfile} onClick={openProfile}
animate={animate}
/> />
<MessageDetail message={message} position="top" /> ) : (
</span> <MessageDetail message={message} position="left" />
)} )}
{replacement ?? <Markdown content={content} />} </MessageInfo>
{queued?.error && ( <MessageContent>
<Overline type="error" error={queued.error} /> {head && (
)} <span className="detail">
{message.attachments?.map((attachment, index) => ( <Username
<Attachment className="author"
key={index} user={user}
attachment={attachment} onContextMenu={userContext}
hasContent={index > 0 || content.length > 0} onClick={openProfile}
/> />
))} <MessageDetail
{message.embeds?.map((embed, index) => ( message={message}
<Embed key={index} embed={embed} /> position="top"
))} />
</MessageContent> </span>
</MessageBase> )}
</div> {replacement ?? <Markdown content={content} />}
); {queued?.error && (
} <Overline type="error" error={queued.error} />
)}
{message.attachments?.map((attachment, index) => (
<Attachment
key={index}
attachment={attachment}
hasContent={index > 0 || content.length > 0}
/>
))}
{message.embeds?.map((embed, index) => (
<Embed key={index} embed={embed} />
))}
</MessageContent>
</MessageBase>
</div>
);
},
);
export default memo(Message); export default memo(Message);
src/components/common/messaging/MessageBase.tsx
View file @ 1ac5de17
import dayjs from "dayjs"; import { observer } from "mobx-react-lite";
import styled, { css } from "styled-components"; import { Message } from "revolt.js/dist/maps/Messages";
import styled, { css, keyframes } from "styled-components";
import { decodeTime } from "ulid"; import { decodeTime } from "ulid";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { MessageObject } from "../../../context/revoltjs/util"; import { useDictionary } from "../../../lib/i18n";
import { dayjs } from "../../../context/Locale";
import Tooltip from "../Tooltip"; import Tooltip from "../Tooltip";
...@@ -15,21 +18,32 @@ export interface BaseMessageProps { ...@@ -15,21 +18,32 @@ export interface BaseMessageProps {
blocked?: boolean; blocked?: boolean;
sending?: boolean; sending?: boolean;
contrast?: boolean; contrast?: boolean;
highlight?: boolean;
} }
const highlight = keyframes`
0% { background: var(--mention); }
66% { background: var(--mention); }
100% { background: transparent; }
`;
export default styled.div<BaseMessageProps>` export default styled.div<BaseMessageProps>`
display: flex; display: flex;
overflow-x: none; overflow: none;
padding: 0.125rem; padding: 0.125rem;
flex-direction: row; flex-direction: row;
padding-right: 16px; padding-inline-end: 16px;
@media (pointer: coarse) {
user-select: none;
}
${(props) => ${(props) =>
props.contrast && props.contrast &&
css` css`
padding: 0.3rem; padding: 0.3rem;
border-radius: 4px;
background: var(--hover); background: var(--hover);
border-radius: var(--border-radius);
`} `}
${(props) => ${(props) =>
...@@ -68,16 +82,32 @@ export default styled.div<BaseMessageProps>` ...@@ -68,16 +82,32 @@ export default styled.div<BaseMessageProps>`
color: var(--error); color: var(--error);
`} `}
${(props) =>
props.highlight &&
css`
animation-name: ${highlight};
animation-timing-function: ease;
animation-duration: 3s;
`}
.detail { .detail {
gap: 8px; gap: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
flex-shrink: 0;
} }
.author { .author {
overflow: hidden;
cursor: pointer; cursor: pointer;
font-weight: 600 !important; font-weight: 600 !important;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
white-space: normal;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
...@@ -144,6 +174,10 @@ export const MessageInfo = styled.div` ...@@ -144,6 +174,10 @@ export const MessageInfo = styled.div`
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
} }
} }
.header {
cursor: pointer;
}
`; `;
export const MessageContent = styled.div` export const MessageContent = styled.div`
...@@ -151,62 +185,75 @@ export const MessageContent = styled.div` ...@@ -151,62 +185,75 @@ export const MessageContent = styled.div`
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
// overflow: hidden; // overflow: hidden;
font-size: 0.875rem;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
font-size: var(--text-size);
`; `;
export const DetailBase = styled.div` export const DetailBase = styled.div`
flex-shrink: 0;
gap: 4px; gap: 4px;
font-size: 10px; font-size: 10px;
display: inline-flex; display: inline-flex;
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
.edited {
cursor: default;
&::selection {
background-color: transparent;
color: var(--tertiary-foreground);
}
}
`; `;
export function MessageDetail({ export const MessageDetail = observer(
message, ({ message, position }: { message: Message; position: "left" | "top" }) => {
position, const dict = useDictionary();
}: {
message: MessageObject; if (position === "left") {
position: "left" | "top"; if (message.edited) {
}) { return (
if (position === "left") { <>
if (message.edited) { <time className="copyTime">
return ( <i className="copyBracket">[</i>
<> {dayjs(decodeTime(message._id)).format(
<time className="copyTime"> dict.dayjs?.timeFormat,
<i className="copyBracket">[</i> )}
{dayjs(decodeTime(message._id)).format("H:mm")} <i className="copyBracket">]</i>
<i className="copyBracket">]</i> </time>
</time> <span className="edited">
<span className="edited"> <Tooltip
<Tooltip content={dayjs(message.edited).format("LLLL")}> content={dayjs(message.edited).format("LLLL")}>
<Text id="app.main.channel.edited" /> <Text id="app.main.channel.edited" />
</Tooltip> </Tooltip>
</span> </span>
</> </>
); );
} else { }
return ( return (
<> <>
<time> <time>
<i className="copyBracket">[</i> <i className="copyBracket">[</i>
{dayjs(decodeTime(message._id)).format("H:mm")} {dayjs(decodeTime(message._id)).format(
dict.dayjs?.timeFormat,
)}
<i className="copyBracket">]</i> <i className="copyBracket">]</i>
</time> </time>
</> </>
); );
} }
}
return ( return (
<DetailBase> <DetailBase>
<time>{dayjs(decodeTime(message._id)).calendar()}</time> <time>{dayjs(decodeTime(message._id)).calendar()}</time>
{message.edited && ( {message.edited && (
<Tooltip content={dayjs(message.edited).format("LLLL")}> <Tooltip content={dayjs(message.edited).format("LLLL")}>
<Text id="app.main.channel.edited" /> <span className="edited">
</Tooltip> <Text id="app.main.channel.edited" />
)} </span>
</DetailBase> </Tooltip>
); )}
} </DetailBase>
);
},
);
src/components/common/messaging/MessageBox.tsx
View file @ 1ac5de17
import { ShieldX } from "@styled-icons/boxicons-regular"; import { Send, ShieldX } from "@styled-icons/boxicons-solid";
import { Send } from "@styled-icons/boxicons-solid";
import Axios, { CancelTokenSource } from "axios"; import Axios, { CancelTokenSource } from "axios";
import { Channel } from "revolt.js"; import { observer } from "mobx-react-lite";
import { ChannelPermission } from "revolt.js/dist/api/permissions"; import { ChannelPermission } from "revolt.js/dist/api/permissions";
import { Channel } from "revolt.js/dist/maps/Channels";
import styled from "styled-components"; import styled from "styled-components";
import { ulid } from "ulid"; import { ulid } from "ulid";
...@@ -20,8 +20,7 @@ import { ...@@ -20,8 +20,7 @@ import {
SMOOTH_SCROLL_ON_RECEIVE, SMOOTH_SCROLL_ON_RECEIVE,
} from "../../../lib/renderer/Singleton"; } from "../../../lib/renderer/Singleton";
import { dispatch } from "../../../redux"; import { dispatch, getState } from "../../../redux";
import { connectState } from "../../../redux/connector";
import { Reply } from "../../../redux/reducers/queue"; import { Reply } from "../../../redux/reducers/queue";
import { SoundContext } from "../../../context/Settings"; import { SoundContext } from "../../../context/Settings";
...@@ -32,7 +31,6 @@ import { ...@@ -32,7 +31,6 @@ import {
uploadFile, uploadFile,
} from "../../../context/revoltjs/FileUploads"; } from "../../../context/revoltjs/FileUploads";
import { AppContext } from "../../../context/revoltjs/RevoltClient"; import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { useChannelPermission } from "../../../context/revoltjs/hooks";
import { takeError } from "../../../context/revoltjs/util"; import { takeError } from "../../../context/revoltjs/util";
import IconButton from "../../ui/IconButton"; import IconButton from "../../ui/IconButton";
...@@ -44,7 +42,6 @@ import ReplyBar from "./bars/ReplyBar"; ...@@ -44,7 +42,6 @@ import ReplyBar from "./bars/ReplyBar";
type Props = { type Props = {
channel: Channel; channel: Channel;
draft?: string;
}; };
export type UploadState = export type UploadState =
...@@ -65,38 +62,56 @@ const Base = styled.div` ...@@ -65,38 +62,56 @@ const Base = styled.div`
background: var(--message-box); background: var(--message-box);
textarea { textarea {
font-size: 0.875rem; font-size: var(--text-size);
background: transparent; background: transparent;
&::placeholder {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
} }
`; `;
const Blocked = styled.div` const Blocked = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
padding: 14px 0;
user-select: none; user-select: none;
font-size: 0.875rem; font-size: var(--text-size);
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
.text {
padding: 14px 14px 14px 0;
}
svg { svg {
flex-shrink: 0; flex-shrink: 0;
margin-inline-end: 10px;
} }
`; `;
const Action = styled.div` const Action = styled.div`
display: grid; display: flex;
place-items: center; place-items: center;
> div { > div {
padding: 10px 12px; height: 48px;
width: 48px;
padding: 12px;
}
.mobile {
@media (pointer: fine) {
display: none;
}
} }
`; `;
// ! FIXME: add to app config and load from app config // ! FIXME: add to app config and load from app config
export const CAN_UPLOAD_AT_ONCE = 5; export const CAN_UPLOAD_AT_ONCE = 4;
export default observer(({ channel }: Props) => {
const [draft, setDraft] = useState(getState().drafts[channel._id] ?? "");
function MessageBox({ channel, draft }: Props) {
const [uploadState, setUploadState] = useState<UploadState>({ const [uploadState, setUploadState] = useState<UploadState>({
type: "none", type: "none",
}); });
...@@ -107,36 +122,44 @@ function MessageBox({ channel, draft }: Props) { ...@@ -107,36 +122,44 @@ function MessageBox({ channel, draft }: Props) {
const client = useContext(AppContext); const client = useContext(AppContext);
const translate = useTranslation(); const translate = useTranslation();
const permissions = useChannelPermission(channel._id); if (!(channel.permission & ChannelPermission.SendMessage)) {
if (!(permissions & ChannelPermission.SendMessage)) {
return ( return (
<Base> <Base>
<Blocked> <Blocked>
<PermissionTooltip <Action>
permission="SendMessages" <PermissionTooltip
placement="top"> permission="SendMessages"
<ShieldX size={22} /> placement="top">
</PermissionTooltip> <ShieldX size={22} />
<Text id="app.main.channel.misc.no_sending" /> </PermissionTooltip>
</Action>
<div className="text">
<Text id="app.main.channel.misc.no_sending" />
</div>
</Blocked> </Blocked>
</Base> </Base>
); );
} }
function setMessage(content?: string) { const setMessage = useCallback(
if (content) { (content?: string) => {
dispatch({ setDraft(content ?? "");
type: "SET_DRAFT",
channel: channel._id, if (content) {
content, dispatch({
}); type: "SET_DRAFT",
} else { channel: channel._id,
dispatch({ content,
type: "CLEAR_DRAFT", });
channel: channel._id, } else {
}); dispatch({
} type: "CLEAR_DRAFT",
} channel: channel._id,
});
}
},
[channel._id],
);
useEffect(() => { useEffect(() => {
function append(content: string, action: "quote" | "mention") { function append(content: string, action: "quote" | "mention") {
...@@ -155,8 +178,12 @@ function MessageBox({ channel, draft }: Props) { ...@@ -155,8 +178,12 @@ function MessageBox({ channel, draft }: Props) {
} }
} }
return internalSubscribe("MessageBox", "append", append); return internalSubscribe(
}, [draft]); "MessageBox",
"append",
append as (...args: unknown[]) => void,
);
}, [draft, setMessage]);
async function send() { async function send() {
if (uploadState.type === "uploading" || uploadState.type === "sending") if (uploadState.type === "uploading" || uploadState.type === "sending")
...@@ -194,7 +221,7 @@ function MessageBox({ channel, draft }: Props) { ...@@ -194,7 +221,7 @@ function MessageBox({ channel, draft }: Props) {
); );
try { try {
await client.channels.sendMessage(channel._id, { await channel.sendMessage({
content, content,
nonce, nonce,
replies, replies,
...@@ -210,7 +237,7 @@ function MessageBox({ channel, draft }: Props) { ...@@ -210,7 +237,7 @@ function MessageBox({ channel, draft }: Props) {
async function sendFile(content: string) { async function sendFile(content: string) {
if (uploadState.type !== "attached") return; if (uploadState.type !== "attached") return;
let attachments: string[] = []; const attachments: string[] = [];
const cancel = Axios.CancelToken.source(); const cancel = Axios.CancelToken.source();
const files = uploadState.files; const files = uploadState.files;
...@@ -268,7 +295,7 @@ function MessageBox({ channel, draft }: Props) { ...@@ -268,7 +295,7 @@ function MessageBox({ channel, draft }: Props) {
const nonce = ulid(); const nonce = ulid();
try { try {
await client.channels.sendMessage(channel._id, { await channel.sendMessage({
content, content,
nonce, nonce,
replies, replies,
...@@ -303,7 +330,7 @@ function MessageBox({ channel, draft }: Props) { ...@@ -303,7 +330,7 @@ function MessageBox({ channel, draft }: Props) {
const ws = client.websocket; const ws = client.websocket;
if (ws.connected) { if (ws.connected) {
setTyping(+new Date() + 4000); setTyping(+new Date() + 2500);
ws.send({ ws.send({
type: "BeginTyping", type: "BeginTyping",
channel: channel._id, channel: channel._id,
...@@ -324,9 +351,11 @@ function MessageBox({ channel, draft }: Props) { ...@@ -324,9 +351,11 @@ function MessageBox({ channel, draft }: Props) {
} }
} }
const debouncedStopTyping = useCallback(debounce(stopTyping, 1000), [ // eslint-disable-next-line
channel._id, const debouncedStopTyping = useCallback(
]); debounce(stopTyping as (...args: unknown[]) => void, 1000),
[channel._id],
);
const { const {
onChange, onChange,
onKeyUp, onKeyUp,
...@@ -338,7 +367,7 @@ function MessageBox({ channel, draft }: Props) { ...@@ -338,7 +367,7 @@ function MessageBox({ channel, draft }: Props) {
users: { type: "channel", id: channel._id }, users: { type: "channel", id: channel._id },
channels: channels:
channel.channel_type === "TextChannel" channel.channel_type === "TextChannel"
? { server: channel.server } ? { server: channel.server_id! }
: undefined, : undefined,
}); });
...@@ -381,7 +410,7 @@ function MessageBox({ channel, draft }: Props) { ...@@ -381,7 +410,7 @@ function MessageBox({ channel, draft }: Props) {
setReplies={setReplies} setReplies={setReplies}
/> />
<Base> <Base>
{permissions & ChannelPermission.UploadFiles ? ( {channel.permission & ChannelPermission.UploadFiles ? (
<Action> <Action>
<FileUploader <FileUploader
size={24} size={24}
...@@ -423,10 +452,10 @@ function MessageBox({ channel, draft }: Props) { ...@@ -423,10 +452,10 @@ function MessageBox({ channel, draft }: Props) {
autoFocus autoFocus
hideBorder hideBorder
maxRows={20} maxRows={20}
padding={12}
id="message" id="message"
value={draft ?? ""}
onKeyUp={onKeyUp} onKeyUp={onKeyUp}
value={draft ?? ""}
padding="var(--message-box-padding)"
onKeyDown={(e) => { onKeyDown={(e) => {
if (onKeyDown(e)) return; if (onKeyDown(e)) return;
...@@ -453,15 +482,13 @@ function MessageBox({ channel, draft }: Props) { ...@@ -453,15 +482,13 @@ function MessageBox({ channel, draft }: Props) {
placeholder={ placeholder={
channel.channel_type === "DirectMessage" channel.channel_type === "DirectMessage"
? translate("app.main.channel.message_who", { ? translate("app.main.channel.message_who", {
person: client.users.get( person: channel.recipient?.username,
client.channels.getRecipient(channel._id), })
)?.username,
})
: channel.channel_type === "SavedMessages" : channel.channel_type === "SavedMessages"
? translate("app.main.channel.message_saved") ? translate("app.main.channel.message_saved")
: translate("app.main.channel.message_where", { : translate("app.main.channel.message_where", {
channel_name: channel.name, channel_name: channel.name ?? undefined,
}) })
} }
disabled={ disabled={
uploadState.type === "uploading" || uploadState.type === "uploading" ||
...@@ -475,24 +502,18 @@ function MessageBox({ channel, draft }: Props) { ...@@ -475,24 +502,18 @@ function MessageBox({ channel, draft }: Props) {
onFocus={onFocus} onFocus={onFocus}
onBlur={onBlur} onBlur={onBlur}
/> />
{isTouchscreenDevice && ( <Action>
<Action> {/*<IconButton onClick={emojiPicker}>
<IconButton onClick={send}> <HappyAlt size={20} />
<Send size={20} /> </IconButton>*/}
</IconButton> <IconButton
</Action> className="mobile"
)} onClick={send}
onMouseDown={(e) => e.preventDefault()}>
<Send size={20} />
</IconButton>
</Action>
</Base> </Base>
</> </>
); );
} });
export default connectState<Omit<Props, "dispatch" | "draft">>(
MessageBox,
(state, { channel }) => {
return {
draft: state.drafts[channel._id],
};
},
true,
);
src/components/common/messaging/SystemMessage.tsx
View file @ 1ac5de17
import { User } from "revolt.js"; import { observer } from "mobx-react-lite";
import { Message } from "revolt.js/dist/maps/Messages";
import { User } from "revolt.js/dist/maps/Users";
import styled from "styled-components"; import styled from "styled-components";
import { attachContextMenu } from "preact-context-menu"; import { attachContextMenu } from "preact-context-menu";
import { TextReact } from "../../../lib/i18n"; import { TextReact } from "../../../lib/i18n";
import { useForceUpdate, useUser } from "../../../context/revoltjs/hooks"; import { useClient } from "../../../context/revoltjs/RevoltClient";
import { MessageObject } from "../../../context/revoltjs/util";
import UserShort from "../user/UserShort"; import UserShort from "../user/UserShort";
import MessageBase, { MessageDetail, MessageInfo } from "./MessageBase"; import MessageBase, { MessageDetail, MessageInfo } from "./MessageBase";
...@@ -34,127 +35,136 @@ type SystemMessageParsed = ...@@ -34,127 +35,136 @@ type SystemMessageParsed =
interface Props { interface Props {
attachContext?: boolean; attachContext?: boolean;
message: MessageObject; message: Message;
highlight?: boolean;
hideInfo?: boolean;
} }
export function SystemMessage({ attachContext, message }: Props) { export const SystemMessage = observer(
const ctx = useForceUpdate(); ({ attachContext, message, highlight, hideInfo }: Props) => {
const client = useClient();
let data: SystemMessageParsed; let data: SystemMessageParsed;
let content = message.content; const content = message.content;
if (typeof content === "object") { if (typeof content === "object") {
switch (content.type) { switch (content.type) {
case "text":
data = content;
break;
case "user_added":
case "user_remove":
data = {
type: content.type,
user: client.users.get(content.id)!,
by: client.users.get(content.by)!,
};
break;
case "user_joined":
case "user_left":
case "user_kicked":
case "user_banned":
data = {
type: content.type,
user: client.users.get(content.id)!,
};
break;
case "channel_renamed":
data = {
type: "channel_renamed",
name: content.name,
by: client.users.get(content.by)!,
};
break;
case "channel_description_changed":
case "channel_icon_changed":
data = {
type: content.type,
by: client.users.get(content.by)!,
};
break;
default:
data = { type: "text", content: JSON.stringify(content) };
}
} else {
data = { type: "text", content };
}
let children;
switch (data.type) {
case "text": case "text":
data = content; children = <span>{data.content}</span>;
break; break;
case "user_added": case "user_added":
case "user_remove": case "user_remove":
data = { children = (
type: content.type, <TextReact
user: useUser(content.id, ctx) as User, id={`app.main.channel.system.${
by: useUser(content.by, ctx) as User, data.type === "user_added"
}; ? "added_by"
: "removed_by"
}`}
fields={{
user: <UserShort user={data.user} />,
other_user: <UserShort user={data.by} />,
}}
/>
);
break; break;
case "user_joined": case "user_joined":
case "user_left": case "user_left":
case "user_kicked": case "user_kicked":
case "user_banned": case "user_banned":
data = { children = (
type: content.type, <TextReact
user: useUser(content.id, ctx) as User, id={`app.main.channel.system.${data.type}`}
}; fields={{
user: <UserShort user={data.user} />,
}}
/>
);
break; break;
case "channel_renamed": case "channel_renamed":
data = { children = (
type: "channel_renamed", <TextReact
name: content.name, id={`app.main.channel.system.channel_renamed`}
by: useUser(content.by, ctx) as User, fields={{
}; user: <UserShort user={data.by} />,
name: <b>{data.name}</b>,
}}
/>
);
break; break;
case "channel_description_changed": case "channel_description_changed":
case "channel_icon_changed": case "channel_icon_changed":
data = { children = (
type: content.type, <TextReact
by: useUser(content.by, ctx) as User, id={`app.main.channel.system.${data.type}`}
}; fields={{
user: <UserShort user={data.by} />,
}}
/>
);
break; break;
default:
data = { type: "text", content: JSON.stringify(content) };
} }
} else {
data = { type: "text", content };
}
let children; return (
switch (data.type) { <MessageBase
case "text": highlight={highlight}
children = <span>{data.content}</span>; onContextMenu={
break; attachContext
case "user_added": ? attachContextMenu("Menu", {
case "user_remove": message,
children = ( contextualChannel: message.channel,
<TextReact })
id={`app.main.channel.system.${ : undefined
data.type === "user_added" ? "added_by" : "removed_by" }>
}`} {!hideInfo && (
fields={{ <MessageInfo>
user: <UserShort user={data.user} />, <MessageDetail message={message} position="left" />
other_user: <UserShort user={data.by} />, </MessageInfo>
}} )}
/> <SystemContent>{children}</SystemContent>
); </MessageBase>
break; );
case "user_joined": },
case "user_left": );
case "user_kicked":
case "user_banned":
children = (
<TextReact
id={`app.main.channel.system.${data.type}`}
fields={{
user: <UserShort user={data.user} />,
}}
/>
);
break;
case "channel_renamed":
children = (
<TextReact
id={`app.main.channel.system.channel_renamed`}
fields={{
user: <UserShort user={data.by} />,
name: <b>{data.name}</b>,
}}
/>
);
break;
case "channel_description_changed":
case "channel_icon_changed":
children = (
<TextReact
id={`app.main.channel.system.${data.type}`}
fields={{
user: <UserShort user={data.by} />,
}}
/>
);
break;
}
return (
<MessageBase
onContextMenu={
attachContext
? attachContextMenu("Menu", {
message,
contextualChannel: message.channel,
})
: undefined
}>
<MessageInfo>
<MessageDetail message={message} position="left" />
</MessageInfo>
<SystemContent>{children}</SystemContent>
</MessageBase>
);
}
src/components/common/messaging/attachments/Attachment.module.scss
View file @ 1ac5de17
.attachment { .attachment {
display: grid; display: grid;
grid-auto-columns: min(100%, 480px);
grid-auto-flow: row dense; grid-auto-flow: row dense;
grid-auto-columns: min(100%, var(--attachment-max-width));
margin: 0.125rem 0 0.125rem;
width: max-content; width: max-content;
max-width: 100%;
border-radius: 6px;
margin: .125rem 0 .125rem;
&[data-spoiler="true"] { &[data-spoiler="true"] {
filter: blur(30px); filter: blur(30px);
pointer-events: none; pointer-events: none;
} }
&[data-has-content="true"] {
margin-top: 4px;
}
&.image {
cursor: pointer;
max-height: 640px;
max-width: min(480px, 100%);
object-fit: contain;
&.loaded {
width: auto;
height: auto;
}
}
&.video {
.actions {
padding: 10px 12px;
border-radius: 6px 6px 0 0;
}
video {
border-radius: 0 0 6px 6px;
max-height: 640px;
max-width: min(480px, 100%);
}
video.loaded {
width: auto;
height: auto;
}
}
&.audio { &.audio {
gap: 4px; gap: 4px;
padding: 6px; padding: 6px;
display: flex; display: flex;
border-radius: 6px; max-width: 100%;
flex-direction: column; flex-direction: column;
width: var(--attachment-default-width);
background: var(--secondary-background); background: var(--secondary-background);
max-width: 400px;
> audio { > audio {
width: 100%; width: 100%;
...@@ -66,21 +28,20 @@ ...@@ -66,21 +28,20 @@
&.file { &.file {
> div { > div {
width: 400px;
padding: 12px; padding: 12px;
max-width: 100%;
user-select: none; user-select: none;
width: fit-content; width: fit-content;
border-radius: 6px; border-radius: var(--border-radius);
width: var(--attachment-default-width);
} }
} }
&.text { &.text {
width: 100%; width: 100%;
max-width: 800px;
overflow: hidden; overflow: hidden;
grid-auto-columns: unset; grid-auto-columns: unset;
max-width: var(--attachment-max-text-width);
border-radius: 6px;
.textContent { .textContent {
height: 140px; height: 140px;
...@@ -89,18 +50,18 @@ ...@@ -89,18 +50,18 @@
overflow-y: auto; overflow-y: auto;
border-radius: 0 !important; border-radius: 0 !important;
background: var(--secondary-header); background: var(--secondary-header);
pre { pre {
margin: 0; margin: 0;
} }
pre code { pre code {
font-family: var(--monoscape-font), sans-serif; font-family: var(--monospace-font), sans-serif;
} }
&[data-loading="true"] { &[data-loading="true"] {
display: flex; display: flex;
> * { > * {
flex-grow: 1; flex-grow: 1;
} }
...@@ -109,48 +70,22 @@ ...@@ -109,48 +70,22 @@
} }
} }
.actions.imageAction { .margin {
grid-template: margin-top: 4px;
"name icon download" auto
"size icon download" auto
/ minmax(20px, 1fr) min-content min-content;
} }
.actions { .container {
display: grid; max-width: 100%;
grid-template: overflow: hidden;
"icon name download" auto width: fit-content;
"icon size download" auto
/ min-content minmax(20px, 1fr) min-content;
align-items: center;
column-gap: 8px;
width: 100%;
padding: 8px;
overflow: none;
color: var(--foreground);
background: var(--secondary-background);
span { > :first-child {
text-overflow: ellipsis; width: min(var(--attachment-max-width), 100%, var(--width));
white-space: nowrap;
overflow: hidden;
}
.filesize {
grid-area: size;
font-size: 10px;
color: var(--secondary-foreground);
}
.downloadIcon {
grid-area: download;
} }
}
.iconType { .container,
grid-area: icon; .attachment,
} .image {
border-radius: var(--border-radius);
} }
src/components/common/messaging/attachments/Attachment.tsx
View file @ 1ac5de17
import { Attachment as AttachmentRJS } from "revolt.js/dist/api/objects"; import { Attachment as AttachmentI } from "revolt-api/types/Autumn";
import styles from "./Attachment.module.scss"; import styles from "./Attachment.module.scss";
import classNames from "classnames"; import classNames from "classnames";
import { Text } from "preact-i18n";
import { useContext, useState } from "preact/hooks"; import { useContext, useState } from "preact/hooks";
import { useIntermediate } from "../../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { AppContext } from "../../../../context/revoltjs/RevoltClient"; import { AppContext } from "../../../../context/revoltjs/RevoltClient";
import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
import AttachmentActions from "./AttachmentActions"; import AttachmentActions from "./AttachmentActions";
import { SizedGrid } from "./Grid";
import Spoiler from "./Spoiler";
import TextFile from "./TextFile"; import TextFile from "./TextFile";
interface Props { interface Props {
attachment: AttachmentRJS; attachment: AttachmentI;
hasContent: boolean; hasContent: boolean;
} }
...@@ -24,7 +24,6 @@ export default function Attachment({ attachment, hasContent }: Props) { ...@@ -24,7 +24,6 @@ export default function Attachment({ attachment, hasContent }: Props) {
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const { filename, metadata } = attachment; const { filename, metadata } = attachment;
const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_")); const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_"));
const [loaded, setLoaded] = useState(false);
const url = client.generateFileURL( const url = client.generateFileURL(
attachment, attachment,
...@@ -35,81 +34,70 @@ export default function Attachment({ attachment, hasContent }: Props) { ...@@ -35,81 +34,70 @@ export default function Attachment({ attachment, hasContent }: Props) {
switch (metadata.type) { switch (metadata.type) {
case "Image": { case "Image": {
return ( return (
<div <SizedGrid
className={styles.container} width={metadata.width}
onClick={() => spoiler && setSpoiler(false)}> height={metadata.height}
{spoiler && ( className={classNames({
<div className={styles.overflow}> [styles.margin]: hasContent,
<span> spoiler,
<Text id="app.main.channel.misc.spoiler_attachment" /> })}>
</span>
</div>
)}
<img <img
src={url} src={url}
alt={filename} alt={filename}
width={metadata.width} className={styles.image}
height={metadata.height} loading="lazy"
data-spoiler={spoiler}
data-has-content={hasContent}
className={classNames(
styles.attachment,
styles.image,
loaded && styles.loaded,
)}
onClick={() => onClick={() =>
openScreen({ id: "image_viewer", attachment }) openScreen({ id: "image_viewer", attachment })
} }
onMouseDown={(ev) => onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank") ev.button === 1 && window.open(url, "_blank")
} }
onLoad={() => setLoaded(true)}
/> />
</div> {spoiler && <Spoiler set={setSpoiler} />}
); </SizedGrid>
}
case "Audio": {
return (
<div
className={classNames(styles.attachment, styles.audio)}
data-has-content={hasContent}>
<AttachmentActions attachment={attachment} />
<audio src={url} controls />
</div>
); );
} }
case "Video": { case "Video": {
return ( return (
<div <div
className={styles.container} className={classNames(styles.container, {
onClick={() => spoiler && setSpoiler(false)}> [styles.margin]: hasContent,
{spoiler && ( })}
<div className={styles.overflow}> style={{ "--width": `${metadata.width}px` }}>
<span> <AttachmentActions attachment={attachment} />
<Text id="app.main.channel.misc.spoiler_attachment" /> <SizedGrid
</span> width={metadata.width}
</div> height={metadata.height}
)} className={classNames({ spoiler })}>
<div
data-spoiler={spoiler}
data-has-content={hasContent}
className={classNames(styles.attachment, styles.video)}>
<AttachmentActions attachment={attachment} />
<video <video
src={url} src={url}
alt={filename}
controls
loading="lazy"
width={metadata.width} width={metadata.width}
height={metadata.height} height={metadata.height}
className={classNames(loaded && styles.loaded)}
controls
onMouseDown={(ev) => onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank") ev.button === 1 && window.open(url, "_blank")
} }
onLoadedMetadata={() => setLoaded(true)}
/> />
</div> {spoiler && <Spoiler set={setSpoiler} />}
</SizedGrid>
</div>
);
}
case "Audio": {
return (
<div
className={classNames(styles.attachment, styles.audio)}
data-has-content={hasContent}>
<AttachmentActions attachment={attachment} />
<audio src={url} controls />
</div> </div>
); );
} }
case "Text": { case "Text": {
return ( return (
<div <div
...@@ -120,6 +108,7 @@ export default function Attachment({ attachment, hasContent }: Props) { ...@@ -120,6 +108,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
</div> </div>
); );
} }
default: { default: {
return ( return (
<div <div
......
src/components/common/messaging/attachments/AttachmentActions.module.scss 0 → 100644
View file @ 1ac5de17
.actions.imageAction {
grid-template:
"name icon external download" auto
"size icon external download" auto
/ minmax(20px, 1fr) min-content min-content;
}
.actions {
display: grid;
grid-template:
"icon name external download" auto
"icon size external download" auto
/ min-content minmax(20px, 1fr) min-content;
align-items: center;
column-gap: 12px;
width: 100%;
padding: 8px;
overflow: none;
color: var(--foreground);
background: var(--secondary-background);
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.filesize {
grid-area: size;
font-size: 10px;
color: var(--secondary-foreground);
}
.downloadIcon {
grid-area: download;
}
.externalType {
grid-area: external;
}
.iconType {
grid-area: icon;
}
}
src/components/common/messaging/attachments/AttachmentActions.tsx
View file @ 1ac5de17
...@@ -5,9 +5,9 @@ import { ...@@ -5,9 +5,9 @@ import {
Headphone, Headphone,
Video, Video,
} from "@styled-icons/boxicons-regular"; } from "@styled-icons/boxicons-regular";
import { Attachment } from "revolt.js/dist/api/objects"; import { Attachment } from "revolt-api/types/Autumn";
import styles from "./Attachment.module.scss"; import styles from "./AttachmentActions.module.scss";
import classNames from "classnames"; import classNames from "classnames";
import { useContext } from "preact/hooks"; import { useContext } from "preact/hooks";
...@@ -37,12 +37,13 @@ export default function AttachmentActions({ attachment }: Props) { ...@@ -37,12 +37,13 @@ export default function AttachmentActions({ attachment }: Props) {
<div className={classNames(styles.actions, styles.imageAction)}> <div className={classNames(styles.actions, styles.imageAction)}>
<span className={styles.filename}>{filename}</span> <span className={styles.filename}>{filename}</span>
<span className={styles.filesize}> <span className={styles.filesize}>
{metadata.width + "x" + metadata.height} ({filesize}) {`${metadata.width}x${metadata.height}`} ({filesize})
</span> </span>
<a <a
href={open_url} href={open_url}
target="_blank" target="_blank"
className={styles.iconType}> className={styles.iconType}
rel="noreferrer">
<IconButton> <IconButton>
<LinkExternal size={24} /> <LinkExternal size={24} />
</IconButton> </IconButton>
...@@ -51,7 +52,8 @@ export default function AttachmentActions({ attachment }: Props) { ...@@ -51,7 +52,8 @@ export default function AttachmentActions({ attachment }: Props) {
href={download_url} href={download_url}
className={styles.downloadIcon} className={styles.downloadIcon}
download download
target="_blank"> target="_blank"
rel="noreferrer">
<IconButton> <IconButton>
<Download size={24} /> <Download size={24} />
</IconButton> </IconButton>
...@@ -68,7 +70,8 @@ export default function AttachmentActions({ attachment }: Props) { ...@@ -68,7 +70,8 @@ export default function AttachmentActions({ attachment }: Props) {
href={download_url} href={download_url}
className={styles.downloadIcon} className={styles.downloadIcon}
download download
target="_blank"> target="_blank"
rel="noreferrer">
<IconButton> <IconButton>
<Download size={24} /> <Download size={24} />
</IconButton> </IconButton>
...@@ -81,13 +84,14 @@ export default function AttachmentActions({ attachment }: Props) { ...@@ -81,13 +84,14 @@ export default function AttachmentActions({ attachment }: Props) {
<Video size={24} className={styles.iconType} /> <Video size={24} className={styles.iconType} />
<span className={styles.filename}>{filename}</span> <span className={styles.filename}>{filename}</span>
<span className={styles.filesize}> <span className={styles.filesize}>
{metadata.width + "x" + metadata.height} ({filesize}) {`${metadata.width}x${metadata.height}`} ({filesize})
</span> </span>
<a <a
href={download_url} href={download_url}
className={styles.downloadIcon} className={styles.downloadIcon}
download download
target="_blank"> target="_blank"
rel="noreferrer">
<IconButton> <IconButton>
<Download size={24} /> <Download size={24} />
</IconButton> </IconButton>
...@@ -100,11 +104,23 @@ export default function AttachmentActions({ attachment }: Props) { ...@@ -100,11 +104,23 @@ export default function AttachmentActions({ attachment }: Props) {
<File size={24} className={styles.iconType} /> <File size={24} className={styles.iconType} />
<span className={styles.filename}>{filename}</span> <span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>{filesize}</span> <span className={styles.filesize}>{filesize}</span>
{metadata.type === "Text" && (
<a
href={open_url}
target="_blank"
className={styles.externalType}
rel="noreferrer">
<IconButton>
<LinkExternal size={24} />
</IconButton>
</a>
)}
<a <a
href={download_url} href={download_url}
className={styles.downloadIcon} className={styles.downloadIcon}
download download
target="_blank"> target="_blank"
rel="noreferrer">
<IconButton> <IconButton>
<Download size={24} /> <Download size={24} />
</IconButton> </IconButton>
......
src/components/common/messaging/attachments/Grid.tsx 0 → 100644
View file @ 1ac5de17
import styled from "styled-components";
import { Children } from "../../../../types/Preact";
const Grid = styled.div`
display: grid;
overflow: hidden;
max-width: min(var(--attachment-max-width), 100%, var(--width));
max-height: min(var(--attachment-max-height), var(--height));
aspect-ratio: var(--aspect-ratio);
img,
video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
grid-area: 1 / 1;
}
&.spoiler {
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;
};
export function SizedGrid(props: Props) {
const { width, height, children, style, ...divProps } = props;
return (
<Grid
{...divProps}
style={{
...style,
"--width": `${width}px`,
"--height": `${height}px`,
"--aspect-ratio": width / height,
}}>
{children}
</Grid>
);
}
src/components/common/messaging/attachments/MessageReply.tsx
View file @ 1ac5de17
import { Reply, File } from "@styled-icons/boxicons-regular"; import { File } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { useHistory } from "react-router-dom";
import { RelationshipStatus } from "revolt-api/types/Users";
import { SYSTEM_USER_ID } from "revolt.js";
import { Channel } from "revolt.js/dist/maps/Channels";
import { Message } from "revolt.js/dist/maps/Messages";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useLayoutEffect, useState } from "preact/hooks";
import { useRenderState } from "../../../../lib/renderer/Singleton"; import { useRenderState } from "../../../../lib/renderer/Singleton";
import { useUser } from "../../../../context/revoltjs/hooks";
import Markdown from "../../../markdown/Markdown"; import Markdown from "../../../markdown/Markdown";
import UserShort from "../../user/UserShort"; import UserShort from "../../user/UserShort";
import { SystemMessage } from "../SystemMessage";
interface Props { interface Props {
channel: string; channel: Channel;
index: number; index: number;
id: string; id: string;
} }
...@@ -22,19 +28,87 @@ export const ReplyBase = styled.div<{ ...@@ -22,19 +28,87 @@ export const ReplyBase = styled.div<{
preview?: boolean; preview?: boolean;
}>` }>`
gap: 4px; gap: 4px;
min-width: 0;
display: flex; display: flex;
margin-inline-start: 30px;
margin-inline-end: 12px;
/*margin-bottom: 4px;*/
font-size: 0.8em; font-size: 0.8em;
margin-left: 30px;
user-select: none; user-select: none;
margin-bottom: 4px;
align-items: center; align-items: center;
color: var(--secondary-foreground); color: var(--secondary-foreground);
overflow: hidden; &::before {
white-space: nowrap; content: "";
text-overflow: ellipsis; height: 10px;
width: 28px;
margin-inline-end: 2px;
align-self: flex-end;
display: flex;
border-top: 2.2px solid var(--tertiary-foreground);
border-inline-start: 2.2px solid var(--tertiary-foreground);
border-start-start-radius: 6px;
}
svg:first-child { * {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.user {
gap: 6px;
display: flex;
flex-shrink: 0;
font-weight: 600;
overflow: visible;
align-items: center;
padding: 2px 0;
span {
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
/*&::before {
position:relative;
width: 50px;
height: 2px;
background: red;
}*/
}
.content {
padding: 2px 0;
gap: 4px;
display: flex;
cursor: pointer;
align-items: center;
flex-direction: row;
transition: filter 1s ease-in-out;
transition: transform ease-in-out 0.1s;
filter: brightness(1);
&:hover {
filter: brightness(2);
}
&:active {
transform: translateY(1px);
}
> * {
pointer-events: none;
}
/*> span > p {
display: flex;
}*/
}
> svg:first-child {
flex-shrink: 0; flex-shrink: 0;
transform: scaleX(-1); transform: scaleX(-1);
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
...@@ -59,15 +133,26 @@ export const ReplyBase = styled.div<{ ...@@ -59,15 +133,26 @@ export const ReplyBase = styled.div<{
`} `}
`; `;
export function MessageReply({ index, channel, id }: Props) { export const MessageReply = observer(({ index, channel, id }: Props) => {
const view = useRenderState(channel); const view = useRenderState(channel._id);
if (view?.type !== "RENDER") return null; if (view?.type !== "RENDER") return null;
const message = view.messages.find((x) => x._id === id); const [message, setMessage] = useState<Message | 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);
if (m) {
setMessage(m);
} else {
channel.fetchMessage(id).then(setMessage);
}
}, [id, channel, view.messages]);
if (!message) { if (!message) {
return ( return (
<ReplyBase head={index === 0} fail> <ReplyBase head={index === 0} fail>
<Reply size={16} />
<span> <span>
<Text id="app.main.channel.misc.failed_load" /> <Text id="app.main.channel.misc.failed_load" />
</span> </span>
...@@ -75,19 +160,63 @@ export function MessageReply({ index, channel, id }: Props) { ...@@ -75,19 +160,63 @@ export function MessageReply({ index, channel, id }: Props) {
); );
} }
const user = useUser(message.author); const history = useHistory();
return ( return (
<ReplyBase head={index === 0}> <ReplyBase head={index === 0}>
<Reply size={16} /> {message.author?.relationship === RelationshipStatus.Blocked ? (
<UserShort user={user} size={16} /> <Text id="app.main.channel.misc.blocked_user" />
{message.attachments && message.attachments.length > 0 && ( ) : (
<File size={16} /> <>
{message.author_id === SYSTEM_USER_ID ? (
<SystemMessage message={message} hideInfo />
) : (
<>
<div className="user">
<UserShort user={message.author} size={16} />
</div>
<div
className="content"
onClick={() => {
const channel = message.channel!;
if (
channel.channel_type === "TextChannel"
) {
console.log(
`/server/${channel.server_id}/channel/${channel._id}/${message._id}`,
);
history.push(
`/server/${channel.server_id}/channel/${channel._id}/${message._id}`,
);
} else {
history.push(
`/channel/${channel._id}/${message._id}`,
);
}
}}>
{message.attachments && (
<>
<File size={16} />
<em>
{message.attachments.length > 1 ? (
<Text id="app.main.channel.misc.sent_multiple_files" />
) : (
<Text id="app.main.channel.misc.sent_file" />
)}
</em>
</>
)}
<Markdown
disallowBigEmoji
content={(
message.content as string
).replace(/\n/g, " ")}
/>
</div>
</>
)}
</>
)} )}
<Markdown
disallowBigEmoji
content={(message.content as string).replace(/\n/g, " ")}
/>
</ReplyBase> </ReplyBase>
); );
} });
src/components/common/messaging/attachments/Spoiler.tsx 0 → 100644
View file @ 1ac5de17
import styled from "styled-components";
import { Text } from "preact-i18n";
const Base = styled.div`
display: grid;
place-items: center;
z-index: 1;
grid-area: 1 / 1;
cursor: pointer;
user-select: none;
text-transform: uppercase;
span {
padding: 8px;
color: var(--foreground);
background: var(--primary-background);
border-radius: calc(var(--border-radius) * 4);
}
`;
interface Props {
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>
</Base>
);
}
src/components/common/messaging/attachments/TextFile.tsx
View file @ 1ac5de17
import axios from "axios"; import axios from "axios";
import { Attachment } from "revolt.js/dist/api/objects"; import { Attachment } from "revolt-api/types/Autumn";
import styles from "./Attachment.module.scss"; import styles from "./Attachment.module.scss";
import { useContext, useEffect, useState } from "preact/hooks"; import { useContext, useEffect, useState } from "preact/hooks";
...@@ -29,15 +29,23 @@ export default function TextFile({ attachment }: Props) { ...@@ -29,15 +29,23 @@ export default function TextFile({ attachment }: Props) {
useEffect(() => { useEffect(() => {
if (typeof content !== "undefined") return; if (typeof content !== "undefined") return;
if (loading) return; if (loading) return;
if (attachment.size > 20_000) {
setContent(
"This file is > 20 KB, for your sake I did not load it.\nSee tracking issue here for previews: https://gitlab.insrt.uk/revolt/revite/-/issues/2",
);
return;
}
setLoading(true); setLoading(true);
let cached = fileCache[attachment._id]; const cached = fileCache[attachment._id];
if (cached) { if (cached) {
setContent(cached); setContent(cached);
setLoading(false); setLoading(false);
} else { } else {
axios axios
.get(url) .get(url, { transformResponse: [] })
.then((res) => { .then((res) => {
setContent(res.data); setContent(res.data);
fileCache[attachment._id] = res.data; fileCache[attachment._id] = res.data;
...@@ -52,7 +60,7 @@ export default function TextFile({ attachment }: Props) { ...@@ -52,7 +60,7 @@ export default function TextFile({ attachment }: Props) {
setLoading(false); setLoading(false);
}); });
} }
}, [content, loading, status]); }, [content, loading, status, attachment._id, attachment.size, url]);
return ( return (
<div <div
......
src/components/common/messaging/bars/FilePreview.tsx
View file @ 1ac5de17
/* eslint-disable react-hooks/rules-of-hooks */
import { XCircle, Plus, Share, X, File } from "@styled-icons/boxicons-regular"; import { XCircle, Plus, Share, X, File } from "@styled-icons/boxicons-regular";
import styled from "styled-components"; import styled from "styled-components";
...@@ -68,7 +69,7 @@ const Divider = styled.div` ...@@ -68,7 +69,7 @@ const Divider = styled.div`
width: 4px; width: 4px;
height: 130px; height: 130px;
flex-shrink: 0; flex-shrink: 0;
border-radius: 4px; border-radius: var(--border-radius);
background: var(--tertiary-background); background: var(--tertiary-background);
`; `;
...@@ -78,8 +79,8 @@ const EmptyEntry = styled.div` ...@@ -78,8 +79,8 @@ const EmptyEntry = styled.div`
display: grid; display: grid;
flex-shrink: 0; flex-shrink: 0;
cursor: pointer; cursor: pointer;
border-radius: 4px;
place-items: center; place-items: center;
border-radius: var(--border-radius);
background: var(--primary-background); background: var(--primary-background);
transition: 0.1s ease background-color; transition: 0.1s ease background-color;
...@@ -93,12 +94,10 @@ const PreviewBox = styled.div` ...@@ -93,12 +94,10 @@ const PreviewBox = styled.div`
grid-template: "main" 100px / minmax(100px, 1fr); grid-template: "main" 100px / minmax(100px, 1fr);
justify-items: center; justify-items: center;
background: var(--primary-background);
overflow: hidden;
cursor: pointer; cursor: pointer;
border-radius: 4px; overflow: hidden;
border-radius: var(--border-radius);
background: var(--primary-background);
.icon, .icon,
.overlay { .overlay {
...@@ -107,7 +106,6 @@ const PreviewBox = styled.div` ...@@ -107,7 +106,6 @@ const PreviewBox = styled.div`
.icon { .icon {
height: 100px; height: 100px;
width: 100%;
margin-bottom: 4px; margin-bottom: 4px;
object-fit: contain; object-fit: contain;
} }
...@@ -163,7 +161,7 @@ function FileEntry({ ...@@ -163,7 +161,7 @@ function FileEntry({
const [url, setURL] = useState(""); const [url, setURL] = useState("");
useEffect(() => { useEffect(() => {
let url: string = URL.createObjectURL(file); const url: string = URL.createObjectURL(file);
setURL(url); setURL(url);
return () => URL.revokeObjectURL(url); return () => URL.revokeObjectURL(url);
}, [file]); }, [file]);
...@@ -171,7 +169,7 @@ function FileEntry({ ...@@ -171,7 +169,7 @@ function FileEntry({
return ( return (
<Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}> <Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}>
<PreviewBox onClick={remove}> <PreviewBox onClick={remove}>
<img class="icon" src={url} alt={file.name} /> <img class="icon" src={url} alt={file.name} loading="eager" />
<div class="overlay"> <div class="overlay">
<XCircle size={36} /> <XCircle size={36} />
</div> </div>
...@@ -189,7 +187,9 @@ export default function FilePreview({ state, addFile, removeFile }: Props) { ...@@ -189,7 +187,9 @@ export default function FilePreview({ state, addFile, removeFile }: Props) {
<Container> <Container>
<Carousel> <Carousel>
{state.files.map((file, index) => ( {state.files.map((file, index) => (
<> // @ts-expect-error brokey
// eslint-disable-next-line react/jsx-no-undef
<Fragment key={file.name}>
{index === CAN_UPLOAD_AT_ONCE && <Divider />} {index === CAN_UPLOAD_AT_ONCE && <Divider />}
<FileEntry <FileEntry
index={index} index={index}
...@@ -201,7 +201,7 @@ export default function FilePreview({ state, addFile, removeFile }: Props) { ...@@ -201,7 +201,7 @@ export default function FilePreview({ state, addFile, removeFile }: Props) {
: undefined : undefined
} }
/> />
</> </Fragment>
))} ))}
{state.type === "attached" && ( {state.type === "attached" && (
<EmptyEntry onClick={addFile}> <EmptyEntry onClick={addFile}>
......
src/components/common/messaging/bars/JumpToBottom.tsx
View file @ 1ac5de17
import { DownArrow } from "@styled-icons/boxicons-regular"; import { DownArrowAlt } from "@styled-icons/boxicons-regular";
import styled from "styled-components"; import styled from "styled-components";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
...@@ -14,18 +14,20 @@ const Bar = styled.div` ...@@ -14,18 +14,20 @@ const Bar = styled.div`
> div { > div {
top: -26px; top: -26px;
height: 28px;
width: 100%; width: 100%;
position: absolute; position: absolute;
border-radius: 4px 4px 0 0;
display: flex; display: flex;
align-items: center;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
padding: 4px 8px; padding: 0 8px;
user-select: none; user-select: none;
color: var(--secondary-foreground);
background: var(--secondary-background);
justify-content: space-between; justify-content: space-between;
color: var(--secondary-foreground);
transition: color ease-in-out 0.08s; transition: color ease-in-out 0.08s;
background: var(--secondary-background);
border-radius: var(--border-radius) var(--border-radius) 0 0;
> div { > div {
display: flex; display: flex;
...@@ -40,6 +42,12 @@ const Bar = styled.div` ...@@ -40,6 +42,12 @@ const Bar = styled.div`
&:active { &:active {
transform: translateY(1px); transform: translateY(1px);
} }
@media (pointer: coarse) {
height: 34px;
top: -32px;
padding: 0 12px;
}
} }
`; `;
...@@ -56,7 +64,7 @@ export default function JumpToBottom({ id }: { id: string }) { ...@@ -56,7 +64,7 @@ export default function JumpToBottom({ id }: { id: string }) {
</div> </div>
<div> <div>
<Text id="app.main.channel.misc.jump_present" />{" "} <Text id="app.main.channel.misc.jump_present" />{" "}
<DownArrow size={18} /> <DownArrowAlt size={20} />
</div> </div>
</div> </div>
</Bar> </Bar>
......
src/components/common/messaging/bars/ReplyBar.tsx
View file @ 1ac5de17
import { import { At, Reply as ReplyIcon } from "@styled-icons/boxicons-regular";
At, import { File, XCircle } from "@styled-icons/boxicons-solid";
Reply as ReplyIcon, import { observer } from "mobx-react-lite";
File, import { SYSTEM_USER_ID } from "revolt.js";
XCircle,
} from "@styled-icons/boxicons-regular";
import styled from "styled-components"; import styled from "styled-components";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
...@@ -14,12 +12,11 @@ import { useRenderState } from "../../../../lib/renderer/Singleton"; ...@@ -14,12 +12,11 @@ import { useRenderState } from "../../../../lib/renderer/Singleton";
import { Reply } from "../../../../redux/reducers/queue"; import { Reply } from "../../../../redux/reducers/queue";
import { useUsers } from "../../../../context/revoltjs/hooks";
import IconButton from "../../../ui/IconButton"; import IconButton from "../../../ui/IconButton";
import Markdown from "../../../markdown/Markdown"; import Markdown from "../../../markdown/Markdown";
import UserShort from "../../user/UserShort"; import UserShort from "../../user/UserShort";
import { SystemMessage } from "../SystemMessage";
import { ReplyBase } from "../attachments/MessageReply"; import { ReplyBase } from "../attachments/MessageReply";
interface Props { interface Props {
...@@ -30,31 +27,55 @@ interface Props { ...@@ -30,31 +27,55 @@ interface Props {
const Base = styled.div` const Base = styled.div`
display: flex; display: flex;
padding: 0 22px; height: 30px;
padding: 0 12px;
user-select: none; user-select: none;
align-items: center; align-items: center;
background: var(--message-box); background: var(--message-box);
div { > div {
flex-grow: 1; flex-grow: 1;
} margin-bottom: 0;
.actions { &::before {
gap: 12px; display: none;
display: flex; }
} }
.toggle { .toggle {
gap: 4px; gap: 4px;
display: flex; display: flex;
font-size: 0.7em; font-size: 12px;
align-items: center; align-items: center;
font-weight: 600;
}
.username {
display: flex;
align-items: center;
gap: 6px;
font-weight: 600;
}
.message {
display: flex;
}
.actions {
gap: 12px;
display: flex;
} }
/*@media (pointer: coarse) { //FIXME: Make action buttons bigger on pointer coarse
.actions > svg {
height: 25px;
}
}*/
`; `;
// ! FIXME: Move to global config // ! FIXME: Move to global config
const MAX_REPLIES = 5; const MAX_REPLIES = 5;
export default function ReplyBar({ channel, replies, setReplies }: Props) { export default observer(({ channel, replies, setReplies }: Props) => {
useEffect(() => { useEffect(() => {
return internalSubscribe( return internalSubscribe(
"ReplyBar", "ReplyBar",
...@@ -62,21 +83,20 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) { ...@@ -62,21 +83,20 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
(id) => (id) =>
replies.length < MAX_REPLIES && replies.length < MAX_REPLIES &&
!replies.find((x) => x.id === id) && !replies.find((x) => x.id === id) &&
setReplies([...replies, { id, mention: false }]), setReplies([...replies, { id: id as string, mention: false }]),
); );
}, [replies]); }, [replies, setReplies]);
const view = useRenderState(channel); const view = useRenderState(channel);
if (view?.type !== "RENDER") return null; if (view?.type !== "RENDER") return null;
const ids = replies.map((x) => x.id); const ids = replies.map((x) => x.id);
const messages = view.messages.filter((x) => ids.includes(x._id)); const messages = view.messages.filter((x) => ids.includes(x._id));
const users = useUsers(messages.map((x) => x.author));
return ( return (
<div> <div>
{replies.map((reply, index) => { {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 // ! FIXME: better solution would be to
// ! have a hook for resolving messages from // ! have a hook for resolving messages from
// ! render state along with relevant users // ! render state along with relevant users
...@@ -88,25 +108,37 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) { ...@@ -88,25 +108,37 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
</span> </span>
); );
let user = users.find((x) => message!.author === x?._id);
if (!user) return;
return ( return (
<Base key={reply.id}> <Base key={reply.id}>
<ReplyBase preview> <ReplyBase preview>
<ReplyIcon size={22} /> <ReplyIcon size={22} />
<UserShort user={user} size={16} /> <div class="username">
{message.attachments && <UserShort user={message.author} size={16} />
message.attachments.length > 0 && ( </div>
<File size={16} /> <div class="message">
{message.attachments && (
<>
<File size={16} />
<em>
{message.attachments.length > 1 ? (
<Text id="app.main.channel.misc.sent_multiple_files" />
) : (
<Text id="app.main.channel.misc.sent_file" />
)}
</em>
</>
)} )}
<Markdown {message.author_id === SYSTEM_USER_ID ? (
disallowBigEmoji <SystemMessage message={message} />
content={(message.content as string).replace( ) : (
/\n/g, <Markdown
" ", disallowBigEmoji
content={(
message.content as string
).replace(/\n/g, " ")}
/>
)} )}
/> </div>
</ReplyBase> </ReplyBase>
<span class="actions"> <span class="actions">
<IconButton <IconButton
...@@ -138,4 +170,4 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) { ...@@ -138,4 +170,4 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
})} })}
</div> </div>
); );
} });
src/components/common/messaging/bars/TypingIndicator.tsx
View file @ 1ac5de17
import { User } from "revolt.js"; import { observer } from "mobx-react-lite";
import { RelationshipStatus } from "revolt-api/types/Users";
import { Channel } from "revolt.js/dist/maps/Channels";
import styled from "styled-components"; import styled from "styled-components";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useContext } from "preact/hooks";
import { connectState } from "../../../../redux/connector";
import { TypingUser } from "../../../../redux/reducers/typing";
import { AppContext } from "../../../../context/revoltjs/RevoltClient";
import { useUsers } from "../../../../context/revoltjs/hooks";
interface Props { interface Props {
typing?: TypingUser[]; channel: Channel;
} }
const Base = styled.div` const Base = styled.div`
...@@ -57,28 +52,36 @@ const Base = styled.div` ...@@ -57,28 +52,36 @@ const Base = styled.div`
} }
`; `;
export function TypingIndicator({ typing }: Props) { export default observer(({ channel }: Props) => {
if (typing && typing.length > 0) { const users = channel.typing.filter(
const client = useContext(AppContext); (x) =>
const users = useUsers(typing.map((x) => x.id)).filter( typeof x !== "undefined" &&
(x) => typeof x !== "undefined", x._id !== x.client.user!._id &&
) as User[]; x.relationship !== RelationshipStatus.Blocked,
);
if (users.length > 0) {
users.sort((a, b) => users.sort((a, b) =>
a._id.toUpperCase().localeCompare(b._id.toUpperCase()), a!._id.toUpperCase().localeCompare(b!._id.toUpperCase()),
); );
let text; let text;
if (users.length >= 5) { if (users.length >= 5) {
text = <Text id="app.main.channel.typing.several" />; text = <Text id="app.main.channel.typing.several" />;
} else if (users.length > 1) { } else if (users.length > 1) {
const usersCopy = [...users]; const userlist = [...users].map((x) => x!.username);
const user = userlist.pop();
/*for (let i = 0; i < userlist.length - 1; i++) {
userlist.splice(i * 2 + 1, 0, ", ");
}*/
text = ( text = (
<Text <Text
id="app.main.channel.typing.multiple" id="app.main.channel.typing.multiple"
fields={{ fields={{
user: usersCopy.pop()?.username, user,
userlist: usersCopy.map((x) => x.username).join(", "), userlist: userlist.join(", "),
}} }}
/> />
); );
...@@ -86,7 +89,7 @@ export function TypingIndicator({ typing }: Props) { ...@@ -86,7 +89,7 @@ export function TypingIndicator({ typing }: Props) {
text = ( text = (
<Text <Text
id="app.main.channel.typing.single" id="app.main.channel.typing.single"
fields={{ user: users[0].username }} fields={{ user: users[0]!.username }}
/> />
); );
} }
...@@ -97,11 +100,9 @@ export function TypingIndicator({ typing }: Props) { ...@@ -97,11 +100,9 @@ export function TypingIndicator({ typing }: Props) {
<div className="avatars"> <div className="avatars">
{users.map((user) => ( {users.map((user) => (
<img <img
src={client.users.getAvatarURL( key={user!._id}
user._id, loading="eager"
{ max_side: 256 }, src={user!.generateAvatarURL({ max_side: 256 })}
true,
)}
/> />
))} ))}
</div> </div>
...@@ -112,10 +113,4 @@ export function TypingIndicator({ typing }: Props) { ...@@ -112,10 +113,4 @@ export function TypingIndicator({ typing }: Props) {
} }
return null; return null;
}
export default connectState<{ id: string }>(TypingIndicator, (state, props) => {
return {
typing: state.typing && state.typing[props.id],
};
}); });