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 880 additions and 619 deletions
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";
...@@ -34,103 +35,123 @@ interface Props { ...@@ -34,103 +35,123 @@ interface Props {
head?: boolean; head?: boolean;
} }
function Message({ const Message = observer(
highlight, ({
attachContext, highlight,
message, attachContext,
contrast, message,
content: replacement, contrast,
head: preferHead, content: replacement,
queued, head: preferHead,
}: Props) { queued,
// TODO: Can improve re-renders here by providing a list }: Props) => {
// TODO: of dependencies. We only need to update on u/avatar. const client = useClient();
const user = useUser(message.author); const user = message.author;
const client = useContext(AppContext);
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 ))}
highlight={highlight} <MessageBase
head={head && !(message.replies && message.replies.length > 0)} highlight={highlight}
contrast={contrast} head={
sending={typeof queued !== "undefined"} (head &&
mention={message.mentions?.includes(client.user!._id)} !(
failed={typeof queued?.error !== "undefined"} message.reply_ids &&
onContextMenu={ message.reply_ids.length > 0
attachContext )) ??
? attachContextMenu("Menu", { false
message, }
contextualChannel: message.channel, contrast={contrast}
queued, sending={typeof queued !== "undefined"}
}) mention={message.mention_ids?.includes(client.user!._id)}
: undefined failed={typeof queued?.error !== "undefined"}
}> onContextMenu={
<MessageInfo> attachContext
{head ? ( ? attachContextMenu("Menu", {
<UserIcon message,
target={user} contextualChannel: message.channel_id,
size={36} queued,
onContextMenu={userContext} })
onClick={openProfile} : undefined
/> }
) : ( onMouseEnter={() => setAnimate(true)}
<MessageDetail message={message} position="left" /> onMouseLeave={() => setAnimate(false)}>
)} <MessageInfo>
</MessageInfo> {head ? (
<MessageContent> <UserIcon
{head && ( target={user}
<span className="detail"> size={36}
<Username
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 { observer } from "mobx-react-lite";
import { Message } from "revolt.js/dist/maps/Messages";
import styled, { css, keyframes } from "styled-components"; import styled, { css, keyframes } from "styled-components";
import { decodeTime } from "ulid"; import { decodeTime } from "ulid";
...@@ -6,7 +8,6 @@ import { Text } from "preact-i18n"; ...@@ -6,7 +8,6 @@ import { Text } from "preact-i18n";
import { useDictionary } from "../../../lib/i18n"; import { useDictionary } from "../../../lib/i18n";
import { dayjs } from "../../../context/Locale"; import { dayjs } from "../../../context/Locale";
import { MessageObject } from "../../../context/revoltjs/util";
import Tooltip from "../Tooltip"; import Tooltip from "../Tooltip";
...@@ -31,14 +32,18 @@ export default styled.div<BaseMessageProps>` ...@@ -31,14 +32,18 @@ export default styled.div<BaseMessageProps>`
overflow: 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) =>
...@@ -89,12 +94,20 @@ export default styled.div<BaseMessageProps>` ...@@ -89,12 +94,20 @@ export default styled.div<BaseMessageProps>`
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;
} }
...@@ -161,6 +174,10 @@ export const MessageInfo = styled.div` ...@@ -161,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`
...@@ -168,68 +185,75 @@ export const MessageContent = styled.div` ...@@ -168,68 +185,75 @@ export const MessageContent = styled.div`
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
// overflow: hidden; // overflow: hidden;
font-size: var(--text-size);
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 (
const dict = useDictionary(); <>
<time className="copyTime">
if (position === "left") { <i className="copyBracket">[</i>
if (message.edited) { {dayjs(decodeTime(message._id)).format(
return ( dict.dayjs?.timeFormat,
<> )}
<time className="copyTime"> <i className="copyBracket">]</i>
<i className="copyBracket">[</i> </time>
{dayjs(decodeTime(message._id)).format( <span className="edited">
dict.dayjs.timeFormat, <Tooltip
)} content={dayjs(message.edited).format("LLLL")}>
<i className="copyBracket">]</i> <Text id="app.main.channel.edited" />
</time> </Tooltip>
<span className="edited"> </span>
<Tooltip content={dayjs(message.edited).format("LLLL")}> </>
<Text id="app.main.channel.edited" /> );
</Tooltip> }
</span>
</>
);
} else {
return ( return (
<> <>
<time> <time>
<i className="copyBracket">[</i> <i className="copyBracket">[</i>
{dayjs(decodeTime(message._id)).format( {dayjs(decodeTime(message._id)).format(
dict.dayjs.timeFormat, 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 { Send, HappyAlt, ShieldX } from "@styled-icons/boxicons-solid"; import { Send, ShieldX } from "@styled-icons/boxicons-solid";
import { Styleshare } from "@styled-icons/simple-icons";
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";
...@@ -31,7 +31,6 @@ import { ...@@ -31,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";
...@@ -110,7 +109,7 @@ const Action = styled.div` ...@@ -110,7 +109,7 @@ const Action = styled.div`
// ! 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 = 4; export const CAN_UPLOAD_AT_ONCE = 4;
export default function MessageBox({ channel }: Props) { export default observer(({ channel }: Props) => {
const [draft, setDraft] = useState(getState().drafts[channel._id] ?? ""); const [draft, setDraft] = useState(getState().drafts[channel._id] ?? "");
const [uploadState, setUploadState] = useState<UploadState>({ const [uploadState, setUploadState] = useState<UploadState>({
...@@ -123,8 +122,7 @@ export default function MessageBox({ channel }: Props) { ...@@ -123,8 +122,7 @@ export default function MessageBox({ channel }: 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>
...@@ -143,22 +141,25 @@ export default function MessageBox({ channel }: Props) { ...@@ -143,22 +141,25 @@ export default function MessageBox({ channel }: Props) {
); );
} }
function setMessage(content?: string) { const setMessage = useCallback(
setDraft(content ?? ""); (content?: string) => {
setDraft(content ?? "");
if (content) { if (content) {
dispatch({ dispatch({
type: "SET_DRAFT", type: "SET_DRAFT",
channel: channel._id, channel: channel._id,
content, content,
}); });
} else { } else {
dispatch({ dispatch({
type: "CLEAR_DRAFT", type: "CLEAR_DRAFT",
channel: channel._id, channel: channel._id,
}); });
} }
} },
[channel._id],
);
useEffect(() => { useEffect(() => {
function append(content: string, action: "quote" | "mention") { function append(content: string, action: "quote" | "mention") {
...@@ -177,8 +178,12 @@ export default function MessageBox({ channel }: Props) { ...@@ -177,8 +178,12 @@ export default function MessageBox({ channel }: 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")
...@@ -216,7 +221,7 @@ export default function MessageBox({ channel }: Props) { ...@@ -216,7 +221,7 @@ export default function MessageBox({ channel }: Props) {
); );
try { try {
await client.channels.sendMessage(channel._id, { await channel.sendMessage({
content, content,
nonce, nonce,
replies, replies,
...@@ -232,7 +237,7 @@ export default function MessageBox({ channel }: Props) { ...@@ -232,7 +237,7 @@ export default function MessageBox({ channel }: 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;
...@@ -290,7 +295,7 @@ export default function MessageBox({ channel }: Props) { ...@@ -290,7 +295,7 @@ export default function MessageBox({ channel }: Props) {
const nonce = ulid(); const nonce = ulid();
try { try {
await client.channels.sendMessage(channel._id, { await channel.sendMessage({
content, content,
nonce, nonce,
replies, replies,
...@@ -325,7 +330,7 @@ export default function MessageBox({ channel }: Props) { ...@@ -325,7 +330,7 @@ export default function MessageBox({ channel }: 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,
...@@ -346,9 +351,11 @@ export default function MessageBox({ channel }: Props) { ...@@ -346,9 +351,11 @@ export default function MessageBox({ channel }: 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,
...@@ -360,7 +367,7 @@ export default function MessageBox({ channel }: Props) { ...@@ -360,7 +367,7 @@ export default function MessageBox({ channel }: 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,
}); });
...@@ -403,7 +410,7 @@ export default function MessageBox({ channel }: Props) { ...@@ -403,7 +410,7 @@ export default function MessageBox({ channel }: Props) {
setReplies={setReplies} setReplies={setReplies}
/> />
<Base> <Base>
{permissions & ChannelPermission.UploadFiles ? ( {channel.permission & ChannelPermission.UploadFiles ? (
<Action> <Action>
<FileUploader <FileUploader
size={24} size={24}
...@@ -475,14 +482,12 @@ export default function MessageBox({ channel }: Props) { ...@@ -475,14 +482,12 @@ export default function MessageBox({ channel }: 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={
...@@ -501,11 +506,14 @@ export default function MessageBox({ channel }: Props) { ...@@ -501,11 +506,14 @@ export default function MessageBox({ channel }: Props) {
{/*<IconButton onClick={emojiPicker}> {/*<IconButton onClick={emojiPicker}>
<HappyAlt size={20} /> <HappyAlt size={20} />
</IconButton>*/} </IconButton>*/}
<IconButton className="mobile" onClick={send}> <IconButton
className="mobile"
onClick={send}
onMouseDown={(e) => e.preventDefault()}>
<Send size={20} /> <Send size={20} />
</IconButton> </IconButton>
</Action> </Action>
</Base> </Base>
</> </>
); );
} });
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,129 +35,136 @@ type SystemMessageParsed = ...@@ -34,129 +35,136 @@ type SystemMessageParsed =
interface Props { interface Props {
attachContext?: boolean; attachContext?: boolean;
message: MessageObject; message: Message;
highlight?: boolean; highlight?: boolean;
hideInfo?: boolean;
} }
export function SystemMessage({ attachContext, message, highlight }: 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
highlight={highlight}
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%; 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, &.video > video {
cursor: pointer;
aspect-ratio: var(--width) / var(--height);
max-height: min(640px, var(--height-px));
max-width: min(480px, 100%, var(--width-px));
object-fit: contain;
}
&.image {
&.long {
width: min(100%, var(--width-px));
height: auto;
}
&.tall {
height: min(100%, var(--height-px));
width: 100%;
}
}
&.video {
.actions {
padding: 10px 12px;
border-radius: 6px 6px 0 0;
}
video {
border-radius: 0 0 6px 6px;
&.long {
height: auto;
}
&.tall {
width: 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);
width: 400px;
max-width: 100%;
> audio { > audio {
width: 100%; width: 100%;
...@@ -76,22 +28,20 @@ ...@@ -76,22 +28,20 @@
&.file { &.file {
> div { > div {
width: 400px;
max-width: 100%;
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;
...@@ -100,18 +50,18 @@ ...@@ -100,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;
} }
...@@ -120,52 +70,22 @@ ...@@ -120,52 +70,22 @@
} }
} }
.actions.imageAction { .margin {
grid-template: margin-top: 4px;
"name icon external download" auto
"size icon external download" auto
/ minmax(20px, 1fr) min-content min-content;
} }
.actions { .container {
display: grid; max-width: 100%;
grid-template: overflow: hidden;
"icon name external download" auto width: fit-content;
"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 { > :first-child {
grid-area: external; width: min(var(--attachment-max-width), 100%, var(--width));
} }
}
.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;
} }
...@@ -34,37 +34,18 @@ export default function Attachment({ attachment, hasContent }: Props) { ...@@ -34,37 +34,18 @@ 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" loading="lazy"
data-spoiler={spoiler}
data-has-content={hasContent}
className={classNames(
styles.attachment,
styles.image,
metadata.width > metadata.height
? styles.long
: styles.tall,
)}
style={{
"--width": metadata.width,
"--height": metadata.height,
"--width-px": metadata.width + "px",
"--height-px": metadata.height + "px",
}}
onClick={() => onClick={() =>
openScreen({ id: "image_viewer", attachment }) openScreen({ id: "image_viewer", attachment })
} }
...@@ -72,61 +53,51 @@ export default function Attachment({ attachment, hasContent }: Props) { ...@@ -72,61 +53,51 @@ export default function Attachment({ attachment, hasContent }: Props) {
ev.button === 1 && window.open(url, "_blank") ev.button === 1 && window.open(url, "_blank")
} }
/> />
</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}
loading="lazy"
className={classNames(
metadata.width > metadata.height
? styles.long
: styles.tall,
)}
style={{
"--width": metadata.width,
"--height": metadata.height,
"--width-px": metadata.width + "px",
"--height-px": metadata.height + "px",
}}
controls
onMouseDown={(ev) => onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank") ev.button === 1 && window.open(url, "_blank")
} }
/> />
</div> {spoiler && <Spoiler set={setSpoiler} />}
</SizedGrid>
</div> </div>
); );
} }
case "Audio": {
return (
<div
className={classNames(styles.attachment, styles.audio)}
data-has-content={hasContent}>
<AttachmentActions attachment={attachment} />
<audio src={url} controls />
</div>
);
}
case "Text": { case "Text": {
return ( return (
<div <div
...@@ -137,6 +108,7 @@ export default function Attachment({ attachment, hasContent }: Props) { ...@@ -137,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>
...@@ -104,7 +108,8 @@ export default function AttachmentActions({ attachment }: Props) { ...@@ -104,7 +108,8 @@ export default function AttachmentActions({ attachment }: Props) {
<a <a
href={open_url} href={open_url}
target="_blank" target="_blank"
className={styles.externalType}> className={styles.externalType}
rel="noreferrer">
<IconButton> <IconButton>
<LinkExternal size={24} /> <LinkExternal size={24} />
</IconButton> </IconButton>
...@@ -114,7 +119,8 @@ export default function AttachmentActions({ attachment }: Props) { ...@@ -114,7 +119,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>
......
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 { 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"; import { SystemMessage } from "../SystemMessage";
interface Props { interface Props {
channel: string; channel: Channel;
index: number; index: number;
id: string; id: string;
} }
...@@ -24,19 +28,87 @@ export const ReplyBase = styled.div<{ ...@@ -24,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;
}
* {
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);
svg:first-child { &: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);
...@@ -61,15 +133,26 @@ export const ReplyBase = styled.div<{ ...@@ -61,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>
...@@ -77,23 +160,63 @@ export function MessageReply({ index, channel, id }: Props) { ...@@ -77,23 +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 === SYSTEM_USER_ID ? (
<SystemMessage message={message} />
) : ( ) : (
<Markdown <>
disallowBigEmoji {message.author_id === SYSTEM_USER_ID ? (
content={(message.content as string).replace(/\n/g, " ")} <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>
</>
)}
</>
)} )}
</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";
...@@ -39,7 +39,7 @@ export default function TextFile({ attachment }: Props) { ...@@ -39,7 +39,7 @@ export default function TextFile({ attachment }: Props) {
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);
...@@ -60,7 +60,7 @@ export default function TextFile({ attachment }: Props) { ...@@ -60,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 {
...@@ -162,7 +161,7 @@ function FileEntry({ ...@@ -162,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]);
...@@ -170,7 +169,7 @@ function FileEntry({ ...@@ -170,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>
...@@ -188,7 +187,9 @@ export default function FilePreview({ state, addFile, removeFile }: Props) { ...@@ -188,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}
...@@ -200,7 +201,7 @@ export default function FilePreview({ state, addFile, removeFile }: Props) { ...@@ -200,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
...@@ -17,17 +17,17 @@ const Bar = styled.div` ...@@ -17,17 +17,17 @@ const Bar = styled.div`
height: 28px; height: 28px;
width: 100%; width: 100%;
position: absolute; position: absolute;
border-radius: 4px 4px 0 0;
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
padding: 0 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;
......
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,
XCircle,
} from "@styled-icons/boxicons-regular";
import { SYSTEM_USER_ID } from "revolt.js"; import { SYSTEM_USER_ID } from "revolt.js";
import styled from "styled-components"; import styled from "styled-components";
...@@ -15,8 +12,6 @@ import { useRenderState } from "../../../../lib/renderer/Singleton"; ...@@ -15,8 +12,6 @@ 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";
...@@ -32,31 +27,55 @@ interface Props { ...@@ -32,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",
...@@ -64,21 +83,20 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) { ...@@ -64,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
...@@ -90,28 +108,37 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) { ...@@ -90,28 +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>
</>
)} )}
{message.author === SYSTEM_USER_ID ? ( {message.author_id === SYSTEM_USER_ID ? (
<SystemMessage message={message} /> <SystemMessage message={message} />
) : ( ) : (
<Markdown <Markdown
disallowBigEmoji disallowBigEmoji
content={( content={(
message.content as string message.content as string
).replace(/\n/g, " ")} ).replace(/\n/g, " ")}
/> />
)} )}
</div>
</ReplyBase> </ReplyBase>
<span class="actions"> <span class="actions">
<IconButton <IconButton
...@@ -143,4 +170,4 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) { ...@@ -143,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],
};
}); });
src/components/common/messaging/embed/Embed.module.scss
View file @ 1ac5de17
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
iframe { iframe {
border: none; border: none;
border-radius: 4px; border-radius: var(--border-radius);
} }
&.image { &.image {
...@@ -27,8 +27,8 @@ ...@@ -27,8 +27,8 @@
padding: 12px; padding: 12px;
width: fit-content; width: fit-content;
border-radius: 4px;
background: var(--primary-header); background: var(--primary-header);
border-radius: var(--border-radius);
.siteinfo { .siteinfo {
display: flex; display: flex;
...@@ -80,8 +80,8 @@ ...@@ -80,8 +80,8 @@
overflow: hidden; overflow: hidden;
display: -webkit-box; display: -webkit-box;
white-space: pre-wrap; white-space: pre-wrap;
// -webkit-line-clamp: 6; -webkit-line-clamp: 6;
// -webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.footer { .footer {
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
img.image { img.image {
cursor: pointer; cursor: pointer;
object-fit: contain; object-fit: contain;
border-radius: 3px; border-radius: var(--border-radius);
} }
} }
} }
......
src/components/common/messaging/embed/Embed.tsx
View file @ 1ac5de17
import { Embed as EmbedRJS } from "revolt.js/dist/api/objects"; import { Embed as EmbedI } from "revolt-api/types/January";
import styles from "./Embed.module.scss"; import styles from "./Embed.module.scss";
import classNames from "classnames"; import classNames from "classnames";
import { useContext } from "preact/hooks"; import { useContext } from "preact/hooks";
import { useIntermediate } from "../../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { useClient } from "../../../../context/revoltjs/RevoltClient";
import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea"; import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
import EmbedMedia from "./EmbedMedia"; import EmbedMedia from "./EmbedMedia";
interface Props { interface Props {
embed: EmbedRJS; embed: EmbedI;
} }
const MAX_EMBED_WIDTH = 480; const MAX_EMBED_WIDTH = 480;
...@@ -19,11 +20,7 @@ const CONTAINER_PADDING = 24; ...@@ -19,11 +20,7 @@ const CONTAINER_PADDING = 24;
const MAX_PREVIEW_SIZE = 150; const MAX_PREVIEW_SIZE = 150;
export default function Embed({ embed }: Props) { export default function Embed({ embed }: Props) {
// ! FIXME: temp code const client = useClient();
// ! add proxy function to client
function proxyImage(url: string) {
return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url);
}
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const maxWidth = Math.min( const maxWidth = Math.min(
...@@ -35,14 +32,14 @@ export default function Embed({ embed }: Props) { ...@@ -35,14 +32,14 @@ export default function Embed({ embed }: Props) {
w: number, w: number,
h: number, h: number,
): { width: number; height: 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. // 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 }; return { width, height };
} }
...@@ -51,7 +48,7 @@ export default function Embed({ embed }: Props) { ...@@ -51,7 +48,7 @@ export default function Embed({ embed }: Props) {
case "Website": { case "Website": {
// Determine special embed size. // Determine special embed size.
let mw, mh; let mw, mh;
let largeMedia = const largeMedia =
(embed.special && embed.special.type !== "None") || (embed.special && embed.special.type !== "None") ||
embed.image?.size === "Large"; embed.image?.size === "Large";
switch (embed.special?.type) { switch (embed.special?.type) {
...@@ -80,7 +77,7 @@ export default function Embed({ embed }: Props) { ...@@ -80,7 +77,7 @@ export default function Embed({ embed }: Props) {
} }
} }
let { width, height } = calculateSize(mw, mh); const { width, height } = calculateSize(mw, mh);
return ( return (
<div <div
className={classNames(styles.embed, styles.website)} className={classNames(styles.embed, styles.website)}
...@@ -94,8 +91,9 @@ export default function Embed({ embed }: Props) { ...@@ -94,8 +91,9 @@ export default function Embed({ embed }: Props) {
<div className={styles.siteinfo}> <div className={styles.siteinfo}>
{embed.icon_url && ( {embed.icon_url && (
<img <img
loading="lazy"
className={styles.favicon} className={styles.favicon}
src={proxyImage(embed.icon_url)} src={client.proxyFile(embed.icon_url)}
draggable={false} draggable={false}
onError={(e) => onError={(e) =>
(e.currentTarget.style.display = (e.currentTarget.style.display =
...@@ -115,7 +113,8 @@ export default function Embed({ embed }: Props) { ...@@ -115,7 +113,8 @@ export default function Embed({ embed }: Props) {
<a <a
href={embed.url} href={embed.url}
target={"_blank"} target={"_blank"}
className={styles.title}> className={styles.title}
rel="noreferrer">
{embed.title} {embed.title}
</a> </a>
</span> </span>
...@@ -151,9 +150,10 @@ export default function Embed({ embed }: Props) { ...@@ -151,9 +150,10 @@ export default function Embed({ embed }: Props) {
<img <img
className={classNames(styles.embed, styles.image)} className={classNames(styles.embed, styles.image)}
style={calculateSize(embed.width, embed.height)} style={calculateSize(embed.width, embed.height)}
src={proxyImage(embed.url)} src={client.proxyFile(embed.url)}
type="text/html" type="text/html"
frameBorder="0" frameBorder="0"
loading="lazy"
onClick={() => openScreen({ id: "image_viewer", embed })} onClick={() => openScreen({ id: "image_viewer", embed })}
onMouseDown={(ev) => onMouseDown={(ev) =>
ev.button === 1 && window.open(embed.url, "_blank") ev.button === 1 && window.open(embed.url, "_blank")
......
src/components/common/messaging/embed/EmbedMedia.tsx
View file @ 1ac5de17
import { Embed } from "revolt.js/dist/api/objects"; /* eslint-disable react-hooks/rules-of-hooks */
import { Embed } from "revolt-api/types/January";
import styles from "./Embed.module.scss"; import styles from "./Embed.module.scss";
import { useIntermediate } from "../../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { useClient } from "../../../../context/revoltjs/RevoltClient";
interface Props { interface Props {
embed: Embed; embed: Embed;
...@@ -11,19 +13,15 @@ interface Props { ...@@ -11,19 +13,15 @@ interface Props {
} }
export default function EmbedMedia({ embed, width, height }: Props) { 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);
}
if (embed.type !== "Website") return null; if (embed.type !== "Website") return null;
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const client = useClient();
switch (embed.special?.type) { switch (embed.special?.type) {
case "YouTube": case "YouTube":
return ( return (
<iframe <iframe
loading="lazy"
src={`https://www.youtube-nocookie.com/embed/${embed.special.id}?modestbranding=1`} src={`https://www.youtube-nocookie.com/embed/${embed.special.id}?modestbranding=1`}
allowFullScreen allowFullScreen
style={{ height }} style={{ height }}
...@@ -38,6 +36,7 @@ export default function EmbedMedia({ embed, width, height }: Props) { ...@@ -38,6 +36,7 @@ export default function EmbedMedia({ embed, width, height }: Props) {
frameBorder="0" frameBorder="0"
allowFullScreen allowFullScreen
scrolling="no" scrolling="no"
loading="lazy"
style={{ height }} style={{ height }}
/> />
); );
...@@ -45,6 +44,7 @@ export default function EmbedMedia({ embed, width, height }: Props) { ...@@ -45,6 +44,7 @@ export default function EmbedMedia({ embed, width, height }: Props) {
return ( return (
<iframe <iframe
src={`https://open.spotify.com/embed/${embed.special.content_type}/${embed.special.id}`} src={`https://open.spotify.com/embed/${embed.special.content_type}/${embed.special.id}`}
loading="lazy"
frameBorder="0" frameBorder="0"
allowFullScreen allowFullScreen
allowTransparency allowTransparency
...@@ -59,6 +59,7 @@ export default function EmbedMedia({ embed, width, height }: Props) { ...@@ -59,6 +59,7 @@ export default function EmbedMedia({ embed, width, height }: Props) {
)}&color=%23FF7F50&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`} )}&color=%23FF7F50&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`}
frameBorder="0" frameBorder="0"
scrolling="no" scrolling="no"
loading="lazy"
style={{ height }} style={{ height }}
/> />
); );
...@@ -69,17 +70,19 @@ export default function EmbedMedia({ embed, width, height }: Props) { ...@@ -69,17 +70,19 @@ export default function EmbedMedia({ embed, width, height }: Props) {
embed.special.id embed.special.id
}/size=large/bgcol=181a1b/linkcol=056cc4/tracklist=false/transparent=true/`} }/size=large/bgcol=181a1b/linkcol=056cc4/tracklist=false/transparent=true/`}
seamless seamless
loading="lazy"
style={{ height }} style={{ height }}
/> />
); );
} }
default: { default: {
if (embed.image) { if (embed.image) {
let url = embed.image.url; const url = embed.image.url;
return ( return (
<img <img
className={styles.image} className={styles.image}
src={proxyImage(url)} src={client.proxyFile(url)}
loading="lazy"
style={{ width, height }} style={{ width, height }}
onClick={() => onClick={() =>
openScreen({ openScreen({
......
src/components/common/messaging/embed/EmbedMediaActions.tsx
View file @ 1ac5de17
import { LinkExternal } from "@styled-icons/boxicons-regular"; import { LinkExternal } from "@styled-icons/boxicons-regular";
import { EmbedImage } from "revolt.js/dist/api/objects"; import { EmbedImage } from "revolt-api/types/January";
import styles from "./Embed.module.scss"; import styles from "./Embed.module.scss";
...@@ -16,9 +16,13 @@ export default function EmbedMediaActions({ embed }: Props) { ...@@ -16,9 +16,13 @@ export default function EmbedMediaActions({ embed }: Props) {
<div className={styles.actions}> <div className={styles.actions}>
<span className={styles.filename}>{filename}</span> <span className={styles.filename}>{filename}</span>
<span className={styles.filesize}> <span className={styles.filesize}>
{embed.width + "x" + embed.height} {`${embed.width}x${embed.height}`}
</span> </span>
<a href={embed.url} class={styles.openIcon} target="_blank"> <a
href={embed.url}
class={styles.openIcon}
target="_blank"
rel="noreferrer">
<IconButton> <IconButton>
<LinkExternal size={24} /> <LinkExternal size={24} />
</IconButton> </IconButton>
......