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 { memo } from "preact/compat";
import { useContext } from "preact/hooks";
import { useState } from "preact/hooks";
import { QueuedMessage } from "../../../redux/reducers/queue";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { useUser } from "../../../context/revoltjs/hooks";
import { MessageObject } from "../../../context/revoltjs/util";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import Overline from "../../ui/Overline";
......@@ -34,103 +35,123 @@ interface Props {
head?: boolean;
}
function Message({
highlight,
attachContext,
message,
contrast,
content: replacement,
head: preferHead,
queued,
}: Props) {
// TODO: Can improve re-renders here by providing a list
// TODO: of dependencies. We only need to update on u/avatar.
const user = useUser(message.author);
const client = useContext(AppContext);
const { openScreen } = useIntermediate();
const Message = observer(
({
highlight,
attachContext,
message,
contrast,
content: replacement,
head: preferHead,
queued,
}: Props) => {
const client = useClient();
const user = message.author;
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;
const head = preferHead || (message.replies && message.replies.length > 0);
// ! TODO: tell fatal to make this type generic
// 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
// bree: Fatal please...
const userContext = attachContext
? (attachContextMenu("Menu", {
user: message.author,
contextualChannel: message.channel,
}) as any)
: undefined;
const openProfile = () =>
openScreen({ id: "profile", user_id: message.author_id });
const openProfile = () =>
openScreen({ id: "profile", user_id: message.author });
// ! FIXME(?): animate on hover
const [animate, setAnimate] = useState(false);
return (
<div id={message._id}>
{message.replies?.map((message_id, index) => (
<MessageReply
index={index}
id={message_id}
channel={message.channel}
/>
))}
<MessageBase
highlight={highlight}
head={head && !(message.replies && message.replies.length > 0)}
contrast={contrast}
sending={typeof queued !== "undefined"}
mention={message.mentions?.includes(client.user!._id)}
failed={typeof queued?.error !== "undefined"}
onContextMenu={
attachContext
? attachContextMenu("Menu", {
message,
contextualChannel: message.channel,
queued,
})
: undefined
}>
<MessageInfo>
{head ? (
<UserIcon
target={user}
size={36}
onContextMenu={userContext}
onClick={openProfile}
/>
) : (
<MessageDetail message={message} position="left" />
)}
</MessageInfo>
<MessageContent>
{head && (
<span className="detail">
<Username
className="author"
user={user}
return (
<div id={message._id}>
{message.reply_ids?.map((message_id, index) => (
<MessageReply
key={message_id}
index={index}
id={message_id}
channel={message.channel!}
/>
))}
<MessageBase
highlight={highlight}
head={
(head &&
!(
message.reply_ids &&
message.reply_ids.length > 0
)) ??
false
}
contrast={contrast}
sending={typeof queued !== "undefined"}
mention={message.mention_ids?.includes(client.user!._id)}
failed={typeof queued?.error !== "undefined"}
onContextMenu={
attachContext
? attachContextMenu("Menu", {
message,
contextualChannel: message.channel_id,
queued,
})
: undefined
}
onMouseEnter={() => setAnimate(true)}
onMouseLeave={() => setAnimate(false)}>
<MessageInfo>
{head ? (
<UserIcon
target={user}
size={36}
onContextMenu={userContext}
onClick={openProfile}
animate={animate}
/>
<MessageDetail message={message} position="top" />
</span>
)}
{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>
);
}
) : (
<MessageDetail message={message} position="left" />
)}
</MessageInfo>
<MessageContent>
{head && (
<span className="detail">
<Username
className="author"
user={user}
onContextMenu={userContext}
onClick={openProfile}
/>
<MessageDetail
message={message}
position="top"
/>
</span>
)}
{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);
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 { decodeTime } from "ulid";
......@@ -6,7 +8,6 @@ import { Text } from "preact-i18n";
import { useDictionary } from "../../../lib/i18n";
import { dayjs } from "../../../context/Locale";
import { MessageObject } from "../../../context/revoltjs/util";
import Tooltip from "../Tooltip";
......@@ -31,14 +32,18 @@ export default styled.div<BaseMessageProps>`
overflow: none;
padding: 0.125rem;
flex-direction: row;
padding-right: 16px;
padding-inline-end: 16px;
@media (pointer: coarse) {
user-select: none;
}
${(props) =>
props.contrast &&
css`
padding: 0.3rem;
border-radius: 4px;
background: var(--hover);
border-radius: var(--border-radius);
`}
${(props) =>
......@@ -89,12 +94,20 @@ export default styled.div<BaseMessageProps>`
gap: 8px;
display: flex;
align-items: center;
flex-shrink: 0;
}
.author {
overflow: hidden;
cursor: pointer;
font-weight: 600 !important;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
white-space: normal;
&:hover {
text-decoration: underline;
}
......@@ -161,6 +174,10 @@ export const MessageInfo = styled.div`
color: var(--tertiary-foreground);
}
}
.header {
cursor: pointer;
}
`;
export const MessageContent = styled.div`
......@@ -168,68 +185,75 @@ export const MessageContent = styled.div`
flex-grow: 1;
display: flex;
// overflow: hidden;
font-size: var(--text-size);
flex-direction: column;
justify-content: center;
font-size: var(--text-size);
`;
export const DetailBase = styled.div`
flex-shrink: 0;
gap: 4px;
font-size: 10px;
display: inline-flex;
color: var(--tertiary-foreground);
.edited {
cursor: default;
&::selection {
background-color: transparent;
color: var(--tertiary-foreground);
}
}
`;
export function MessageDetail({
message,
position,
}: {
message: MessageObject;
position: "left" | "top";
}) {
const dict = useDictionary();
if (position === "left") {
if (message.edited) {
return (
<>
<time className="copyTime">
<i className="copyBracket">[</i>
{dayjs(decodeTime(message._id)).format(
dict.dayjs.timeFormat,
)}
<i className="copyBracket">]</i>
</time>
<span className="edited">
<Tooltip content={dayjs(message.edited).format("LLLL")}>
<Text id="app.main.channel.edited" />
</Tooltip>
</span>
</>
);
} else {
export const MessageDetail = observer(
({ message, position }: { message: Message; position: "left" | "top" }) => {
const dict = useDictionary();
if (position === "left") {
if (message.edited) {
return (
<>
<time className="copyTime">
<i className="copyBracket">[</i>
{dayjs(decodeTime(message._id)).format(
dict.dayjs?.timeFormat,
)}
<i className="copyBracket">]</i>
</time>
<span className="edited">
<Tooltip
content={dayjs(message.edited).format("LLLL")}>
<Text id="app.main.channel.edited" />
</Tooltip>
</span>
</>
);
}
return (
<>
<time>
<i className="copyBracket">[</i>
{dayjs(decodeTime(message._id)).format(
dict.dayjs.timeFormat,
dict.dayjs?.timeFormat,
)}
<i className="copyBracket">]</i>
</time>
</>
);
}
}
return (
<DetailBase>
<time>{dayjs(decodeTime(message._id)).calendar()}</time>
{message.edited && (
<Tooltip content={dayjs(message.edited).format("LLLL")}>
<Text id="app.main.channel.edited" />
</Tooltip>
)}
</DetailBase>
);
}
return (
<DetailBase>
<time>{dayjs(decodeTime(message._id)).calendar()}</time>
{message.edited && (
<Tooltip content={dayjs(message.edited).format("LLLL")}>
<span className="edited">
<Text id="app.main.channel.edited" />
</span>
</Tooltip>
)}
</DetailBase>
);
},
);
src/components/common/messaging/MessageBox.tsx
View file @ 1ac5de17
import { Send, HappyAlt, ShieldX } from "@styled-icons/boxicons-solid";
import { Styleshare } from "@styled-icons/simple-icons";
import { Send, ShieldX } from "@styled-icons/boxicons-solid";
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 { Channel } from "revolt.js/dist/maps/Channels";
import styled from "styled-components";
import { ulid } from "ulid";
......@@ -31,7 +31,6 @@ import {
uploadFile,
} from "../../../context/revoltjs/FileUploads";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { useChannelPermission } from "../../../context/revoltjs/hooks";
import { takeError } from "../../../context/revoltjs/util";
import IconButton from "../../ui/IconButton";
......@@ -110,7 +109,7 @@ const Action = styled.div`
// ! FIXME: add to app config and load from app config
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 [uploadState, setUploadState] = useState<UploadState>({
......@@ -123,8 +122,7 @@ export default function MessageBox({ channel }: Props) {
const client = useContext(AppContext);
const translate = useTranslation();
const permissions = useChannelPermission(channel._id);
if (!(permissions & ChannelPermission.SendMessage)) {
if (!(channel.permission & ChannelPermission.SendMessage)) {
return (
<Base>
<Blocked>
......@@ -143,22 +141,25 @@ export default function MessageBox({ channel }: Props) {
);
}
function setMessage(content?: string) {
setDraft(content ?? "");
const setMessage = useCallback(
(content?: string) => {
setDraft(content ?? "");
if (content) {
dispatch({
type: "SET_DRAFT",
channel: channel._id,
content,
});
} else {
dispatch({
type: "CLEAR_DRAFT",
channel: channel._id,
});
}
}
if (content) {
dispatch({
type: "SET_DRAFT",
channel: channel._id,
content,
});
} else {
dispatch({
type: "CLEAR_DRAFT",
channel: channel._id,
});
}
},
[channel._id],
);
useEffect(() => {
function append(content: string, action: "quote" | "mention") {
......@@ -177,8 +178,12 @@ export default function MessageBox({ channel }: Props) {
}
}
return internalSubscribe("MessageBox", "append", append);
}, [draft]);
return internalSubscribe(
"MessageBox",
"append",
append as (...args: unknown[]) => void,
);
}, [draft, setMessage]);
async function send() {
if (uploadState.type === "uploading" || uploadState.type === "sending")
......@@ -216,7 +221,7 @@ export default function MessageBox({ channel }: Props) {
);
try {
await client.channels.sendMessage(channel._id, {
await channel.sendMessage({
content,
nonce,
replies,
......@@ -232,7 +237,7 @@ export default function MessageBox({ channel }: Props) {
async function sendFile(content: string) {
if (uploadState.type !== "attached") return;
let attachments: string[] = [];
const attachments: string[] = [];
const cancel = Axios.CancelToken.source();
const files = uploadState.files;
......@@ -290,7 +295,7 @@ export default function MessageBox({ channel }: Props) {
const nonce = ulid();
try {
await client.channels.sendMessage(channel._id, {
await channel.sendMessage({
content,
nonce,
replies,
......@@ -325,7 +330,7 @@ export default function MessageBox({ channel }: Props) {
const ws = client.websocket;
if (ws.connected) {
setTyping(+new Date() + 4000);
setTyping(+new Date() + 2500);
ws.send({
type: "BeginTyping",
channel: channel._id,
......@@ -346,9 +351,11 @@ export default function MessageBox({ channel }: Props) {
}
}
const debouncedStopTyping = useCallback(debounce(stopTyping, 1000), [
channel._id,
]);
// eslint-disable-next-line
const debouncedStopTyping = useCallback(
debounce(stopTyping as (...args: unknown[]) => void, 1000),
[channel._id],
);
const {
onChange,
onKeyUp,
......@@ -360,7 +367,7 @@ export default function MessageBox({ channel }: Props) {
users: { type: "channel", id: channel._id },
channels:
channel.channel_type === "TextChannel"
? { server: channel.server }
? { server: channel.server_id! }
: undefined,
});
......@@ -403,7 +410,7 @@ export default function MessageBox({ channel }: Props) {
setReplies={setReplies}
/>
<Base>
{permissions & ChannelPermission.UploadFiles ? (
{channel.permission & ChannelPermission.UploadFiles ? (
<Action>
<FileUploader
size={24}
......@@ -475,14 +482,12 @@ export default function MessageBox({ channel }: Props) {
placeholder={
channel.channel_type === "DirectMessage"
? translate("app.main.channel.message_who", {
person: client.users.get(
client.channels.getRecipient(channel._id),
)?.username,
person: channel.recipient?.username,
})
: channel.channel_type === "SavedMessages"
? translate("app.main.channel.message_saved")
: translate("app.main.channel.message_where", {
channel_name: channel.name,
channel_name: channel.name ?? undefined,
})
}
disabled={
......@@ -501,11 +506,14 @@ export default function MessageBox({ channel }: Props) {
{/*<IconButton onClick={emojiPicker}>
<HappyAlt size={20} />
</IconButton>*/}
<IconButton className="mobile" onClick={send}>
<IconButton
className="mobile"
onClick={send}
onMouseDown={(e) => e.preventDefault()}>
<Send size={20} />
</IconButton>
</Action>
</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 { attachContextMenu } from "preact-context-menu";
import { TextReact } from "../../../lib/i18n";
import { useForceUpdate, useUser } from "../../../context/revoltjs/hooks";
import { MessageObject } from "../../../context/revoltjs/util";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import UserShort from "../user/UserShort";
import MessageBase, { MessageDetail, MessageInfo } from "./MessageBase";
......@@ -34,129 +35,136 @@ type SystemMessageParsed =
interface Props {
attachContext?: boolean;
message: MessageObject;
message: Message;
highlight?: boolean;
hideInfo?: boolean;
}
export function SystemMessage({ attachContext, message, highlight }: Props) {
const ctx = useForceUpdate();
export const SystemMessage = observer(
({ attachContext, message, highlight, hideInfo }: Props) => {
const client = useClient();
let data: SystemMessageParsed;
let content = message.content;
if (typeof content === "object") {
switch (content.type) {
let data: SystemMessageParsed;
const content = message.content;
if (typeof content === "object") {
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":
data = content;
children = <span>{data.content}</span>;
break;
case "user_added":
case "user_remove":
data = {
type: content.type,
user: useUser(content.id, ctx) as User,
by: useUser(content.by, ctx) as User,
};
children = (
<TextReact
id={`app.main.channel.system.${
data.type === "user_added"
? "added_by"
: "removed_by"
}`}
fields={{
user: <UserShort user={data.user} />,
other_user: <UserShort user={data.by} />,
}}
/>
);
break;
case "user_joined":
case "user_left":
case "user_kicked":
case "user_banned":
data = {
type: content.type,
user: useUser(content.id, ctx) as User,
};
children = (
<TextReact
id={`app.main.channel.system.${data.type}`}
fields={{
user: <UserShort user={data.user} />,
}}
/>
);
break;
case "channel_renamed":
data = {
type: "channel_renamed",
name: content.name,
by: useUser(content.by, ctx) as User,
};
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":
data = {
type: content.type,
by: useUser(content.by, ctx) as User,
};
children = (
<TextReact
id={`app.main.channel.system.${data.type}`}
fields={{
user: <UserShort user={data.by} />,
}}
/>
);
break;
default:
data = { type: "text", content: JSON.stringify(content) };
}
} else {
data = { type: "text", content };
}
let children;
switch (data.type) {
case "text":
children = <span>{data.content}</span>;
break;
case "user_added":
case "user_remove":
children = (
<TextReact
id={`app.main.channel.system.${
data.type === "user_added" ? "added_by" : "removed_by"
}`}
fields={{
user: <UserShort user={data.user} />,
other_user: <UserShort user={data.by} />,
}}
/>
);
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>
);
}
return (
<MessageBase
highlight={highlight}
onContextMenu={
attachContext
? attachContextMenu("Menu", {
message,
contextualChannel: message.channel,
})
: undefined
}>
{!hideInfo && (
<MessageInfo>
<MessageDetail message={message} position="left" />
</MessageInfo>
)}
<SystemContent>{children}</SystemContent>
</MessageBase>
);
},
);
src/components/common/messaging/attachments/Attachment.module.scss
View file @ 1ac5de17
.attachment {
display: grid;
grid-auto-columns: min(100%, 480px);
grid-auto-flow: row dense;
grid-auto-columns: min(100%, var(--attachment-max-width));
margin: 0.125rem 0 0.125rem;
width: max-content;
max-width: 100%;
border-radius: 6px;
margin: .125rem 0 .125rem;
&[data-spoiler="true"] {
filter: blur(30px);
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 {
gap: 4px;
padding: 6px;
display: flex;
border-radius: 6px;
max-width: 100%;
flex-direction: column;
width: var(--attachment-default-width);
background: var(--secondary-background);
width: 400px;
max-width: 100%;
> audio {
width: 100%;
......@@ -76,22 +28,20 @@
&.file {
> div {
width: 400px;
max-width: 100%;
padding: 12px;
max-width: 100%;
user-select: none;
width: fit-content;
border-radius: 6px;
border-radius: var(--border-radius);
width: var(--attachment-default-width);
}
}
&.text {
width: 100%;
max-width: 800px;
overflow: hidden;
grid-auto-columns: unset;
border-radius: 6px;
max-width: var(--attachment-max-text-width);
.textContent {
height: 140px;
......@@ -100,18 +50,18 @@
overflow-y: auto;
border-radius: 0 !important;
background: var(--secondary-header);
pre {
margin: 0;
}
pre code {
font-family: var(--monoscape-font), sans-serif;
font-family: var(--monospace-font), sans-serif;
}
&[data-loading="true"] {
display: flex;
> * {
flex-grow: 1;
}
......@@ -120,52 +70,22 @@
}
}
.actions.imageAction {
grid-template:
"name icon external download" auto
"size icon external download" auto
/ minmax(20px, 1fr) min-content min-content;
.margin {
margin-top: 4px;
}
.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;
}
.container {
max-width: 100%;
overflow: hidden;
width: fit-content;
.externalType {
grid-area: external;
> :first-child {
width: min(var(--attachment-max-width), 100%, var(--width));
}
}
.iconType {
grid-area: icon;
}
.container,
.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 classNames from "classnames";
import { Text } from "preact-i18n";
import { useContext, useState } from "preact/hooks";
import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { AppContext } from "../../../../context/revoltjs/RevoltClient";
import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
import AttachmentActions from "./AttachmentActions";
import { SizedGrid } from "./Grid";
import Spoiler from "./Spoiler";
import TextFile from "./TextFile";
interface Props {
attachment: AttachmentRJS;
attachment: AttachmentI;
hasContent: boolean;
}
......@@ -34,37 +34,18 @@ export default function Attachment({ attachment, hasContent }: Props) {
switch (metadata.type) {
case "Image": {
return (
<div
className={styles.container}
onClick={() => spoiler && setSpoiler(false)}>
{spoiler && (
<div className={styles.overflow}>
<span>
<Text id="app.main.channel.misc.spoiler_attachment" />
</span>
</div>
)}
<SizedGrid
width={metadata.width}
height={metadata.height}
className={classNames({
[styles.margin]: hasContent,
spoiler,
})}>
<img
src={url}
alt={filename}
width={metadata.width}
height={metadata.height}
className={styles.image}
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={() =>
openScreen({ id: "image_viewer", attachment })
}
......@@ -72,61 +53,51 @@ export default function Attachment({ attachment, hasContent }: Props) {
ev.button === 1 && window.open(url, "_blank")
}
/>
</div>
);
}
case "Audio": {
return (
<div
className={classNames(styles.attachment, styles.audio)}
data-has-content={hasContent}>
<AttachmentActions attachment={attachment} />
<audio src={url} controls />
</div>
{spoiler && <Spoiler set={setSpoiler} />}
</SizedGrid>
);
}
case "Video": {
return (
<div
className={styles.container}
onClick={() => spoiler && setSpoiler(false)}>
{spoiler && (
<div className={styles.overflow}>
<span>
<Text id="app.main.channel.misc.spoiler_attachment" />
</span>
</div>
)}
<div
data-spoiler={spoiler}
data-has-content={hasContent}
className={classNames(styles.attachment, styles.video)}>
<AttachmentActions attachment={attachment} />
className={classNames(styles.container, {
[styles.margin]: hasContent,
})}
style={{ "--width": `${metadata.width}px` }}>
<AttachmentActions attachment={attachment} />
<SizedGrid
width={metadata.width}
height={metadata.height}
className={classNames({ spoiler })}>
<video
src={url}
alt={filename}
controls
loading="lazy"
width={metadata.width}
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) =>
ev.button === 1 && window.open(url, "_blank")
}
/>
</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>
);
}
case "Text": {
return (
<div
......@@ -137,6 +108,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
</div>
);
}
default: {
return (
<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 {
Headphone,
Video,
} 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 { useContext } from "preact/hooks";
......@@ -37,12 +37,13 @@ export default function AttachmentActions({ attachment }: Props) {
<div className={classNames(styles.actions, styles.imageAction)}>
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>
{metadata.width + "x" + metadata.height} ({filesize})
{`${metadata.width}x${metadata.height}`} ({filesize})
</span>
<a
href={open_url}
target="_blank"
className={styles.iconType}>
className={styles.iconType}
rel="noreferrer">
<IconButton>
<LinkExternal size={24} />
</IconButton>
......@@ -51,7 +52,8 @@ export default function AttachmentActions({ attachment }: Props) {
href={download_url}
className={styles.downloadIcon}
download
target="_blank">
target="_blank"
rel="noreferrer">
<IconButton>
<Download size={24} />
</IconButton>
......@@ -68,7 +70,8 @@ export default function AttachmentActions({ attachment }: Props) {
href={download_url}
className={styles.downloadIcon}
download
target="_blank">
target="_blank"
rel="noreferrer">
<IconButton>
<Download size={24} />
</IconButton>
......@@ -81,13 +84,14 @@ export default function AttachmentActions({ attachment }: Props) {
<Video size={24} className={styles.iconType} />
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>
{metadata.width + "x" + metadata.height} ({filesize})
{`${metadata.width}x${metadata.height}`} ({filesize})
</span>
<a
href={download_url}
className={styles.downloadIcon}
download
target="_blank">
target="_blank"
rel="noreferrer">
<IconButton>
<Download size={24} />
</IconButton>
......@@ -104,7 +108,8 @@ export default function AttachmentActions({ attachment }: Props) {
<a
href={open_url}
target="_blank"
className={styles.externalType}>
className={styles.externalType}
rel="noreferrer">
<IconButton>
<LinkExternal size={24} />
</IconButton>
......@@ -114,7 +119,8 @@ export default function AttachmentActions({ attachment }: Props) {
href={download_url}
className={styles.downloadIcon}
download
target="_blank">
target="_blank"
rel="noreferrer">
<IconButton>
<Download size={24} />
</IconButton>
......
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 { Text } from "preact-i18n";
import { useLayoutEffect, useState } from "preact/hooks";
import { useRenderState } from "../../../../lib/renderer/Singleton";
import { useUser } from "../../../../context/revoltjs/hooks";
import Markdown from "../../../markdown/Markdown";
import UserShort from "../../user/UserShort";
import { SystemMessage } from "../SystemMessage";
interface Props {
channel: string;
channel: Channel;
index: number;
id: string;
}
......@@ -24,19 +28,87 @@ export const ReplyBase = styled.div<{
preview?: boolean;
}>`
gap: 4px;
min-width: 0;
display: flex;
margin-inline-start: 30px;
margin-inline-end: 12px;
/*margin-bottom: 4px;*/
font-size: 0.8em;
margin-left: 30px;
user-select: none;
margin-bottom: 4px;
align-items: center;
color: var(--secondary-foreground);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&::before {
content: "";
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;
transform: scaleX(-1);
color: var(--tertiary-foreground);
......@@ -61,15 +133,26 @@ export const ReplyBase = styled.div<{
`}
`;
export function MessageReply({ index, channel, id }: Props) {
const view = useRenderState(channel);
export const MessageReply = observer(({ index, channel, id }: Props) => {
const view = useRenderState(channel._id);
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) {
return (
<ReplyBase head={index === 0} fail>
<Reply size={16} />
<span>
<Text id="app.main.channel.misc.failed_load" />
</span>
......@@ -77,23 +160,63 @@ export function MessageReply({ index, channel, id }: Props) {
);
}
const user = useUser(message.author);
const history = useHistory();
return (
<ReplyBase head={index === 0}>
<Reply size={16} />
<UserShort user={user} size={16} />
{message.attachments && message.attachments.length > 0 && (
<File size={16} />
)}
{message.author === SYSTEM_USER_ID ? (
<SystemMessage message={message} />
{message.author?.relationship === RelationshipStatus.Blocked ? (
<Text id="app.main.channel.misc.blocked_user" />
) : (
<Markdown
disallowBigEmoji
content={(message.content as string).replace(/\n/g, " ")}
/>
<>
{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>
</>
)}
</>
)}
</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 { Attachment } from "revolt.js/dist/api/objects";
import { Attachment } from "revolt-api/types/Autumn";
import styles from "./Attachment.module.scss";
import { useContext, useEffect, useState } from "preact/hooks";
......@@ -39,7 +39,7 @@ export default function TextFile({ attachment }: Props) {
setLoading(true);
let cached = fileCache[attachment._id];
const cached = fileCache[attachment._id];
if (cached) {
setContent(cached);
setLoading(false);
......@@ -60,7 +60,7 @@ export default function TextFile({ attachment }: Props) {
setLoading(false);
});
}
}, [content, loading, status]);
}, [content, loading, status, attachment._id, attachment.size, url]);
return (
<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 styled from "styled-components";
......@@ -68,7 +69,7 @@ const Divider = styled.div`
width: 4px;
height: 130px;
flex-shrink: 0;
border-radius: 4px;
border-radius: var(--border-radius);
background: var(--tertiary-background);
`;
......@@ -78,8 +79,8 @@ const EmptyEntry = styled.div`
display: grid;
flex-shrink: 0;
cursor: pointer;
border-radius: 4px;
place-items: center;
border-radius: var(--border-radius);
background: var(--primary-background);
transition: 0.1s ease background-color;
......@@ -93,12 +94,10 @@ const PreviewBox = styled.div`
grid-template: "main" 100px / minmax(100px, 1fr);
justify-items: center;
background: var(--primary-background);
overflow: hidden;
cursor: pointer;
border-radius: 4px;
overflow: hidden;
border-radius: var(--border-radius);
background: var(--primary-background);
.icon,
.overlay {
......@@ -162,7 +161,7 @@ function FileEntry({
const [url, setURL] = useState("");
useEffect(() => {
let url: string = URL.createObjectURL(file);
const url: string = URL.createObjectURL(file);
setURL(url);
return () => URL.revokeObjectURL(url);
}, [file]);
......@@ -170,7 +169,7 @@ function FileEntry({
return (
<Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}>
<PreviewBox onClick={remove}>
<img class="icon" src={url} alt={file.name} />
<img class="icon" src={url} alt={file.name} loading="eager" />
<div class="overlay">
<XCircle size={36} />
</div>
......@@ -188,7 +187,9 @@ export default function FilePreview({ state, addFile, removeFile }: Props) {
<Container>
<Carousel>
{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 />}
<FileEntry
index={index}
......@@ -200,7 +201,7 @@ export default function FilePreview({ state, addFile, removeFile }: Props) {
: undefined
}
/>
</>
</Fragment>
))}
{state.type === "attached" && (
<EmptyEntry onClick={addFile}>
......
src/components/common/messaging/bars/JumpToBottom.tsx
View file @ 1ac5de17
......@@ -17,17 +17,17 @@ const Bar = styled.div`
height: 28px;
width: 100%;
position: absolute;
border-radius: 4px 4px 0 0;
display: flex;
align-items: center;
cursor: pointer;
font-size: 13px;
padding: 0 8px;
user-select: none;
color: var(--secondary-foreground);
background: var(--secondary-background);
justify-content: space-between;
color: var(--secondary-foreground);
transition: color ease-in-out 0.08s;
background: var(--secondary-background);
border-radius: var(--border-radius) var(--border-radius) 0 0;
> div {
display: flex;
......
src/components/common/messaging/bars/ReplyBar.tsx
View file @ 1ac5de17
import {
At,
Reply as ReplyIcon,
File,
XCircle,
} from "@styled-icons/boxicons-regular";
import { At, Reply as ReplyIcon } from "@styled-icons/boxicons-regular";
import { File, XCircle } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { SYSTEM_USER_ID } from "revolt.js";
import styled from "styled-components";
......@@ -15,8 +12,6 @@ import { useRenderState } from "../../../../lib/renderer/Singleton";
import { Reply } from "../../../../redux/reducers/queue";
import { useUsers } from "../../../../context/revoltjs/hooks";
import IconButton from "../../../ui/IconButton";
import Markdown from "../../../markdown/Markdown";
......@@ -32,31 +27,55 @@ interface Props {
const Base = styled.div`
display: flex;
padding: 0 22px;
height: 30px;
padding: 0 12px;
user-select: none;
align-items: center;
background: var(--message-box);
div {
> div {
flex-grow: 1;
}
margin-bottom: 0;
.actions {
gap: 12px;
display: flex;
&::before {
display: none;
}
}
.toggle {
gap: 4px;
display: flex;
font-size: 0.7em;
font-size: 12px;
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
const MAX_REPLIES = 5;
export default function ReplyBar({ channel, replies, setReplies }: Props) {
export default observer(({ channel, replies, setReplies }: Props) => {
useEffect(() => {
return internalSubscribe(
"ReplyBar",
......@@ -64,21 +83,20 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
(id) =>
replies.length < MAX_REPLIES &&
!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);
if (view?.type !== "RENDER") return null;
const ids = replies.map((x) => x.id);
const messages = view.messages.filter((x) => ids.includes(x._id));
const users = useUsers(messages.map((x) => x.author));
return (
<div>
{replies.map((reply, index) => {
let message = messages.find((x) => reply.id === x._id);
const message = messages.find((x) => reply.id === x._id);
// ! FIXME: better solution would be to
// ! have a hook for resolving messages from
// ! render state along with relevant users
......@@ -90,28 +108,37 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
</span>
);
let user = users.find((x) => message!.author === x?._id);
if (!user) return;
return (
<Base key={reply.id}>
<ReplyBase preview>
<ReplyIcon size={22} />
<UserShort user={user} size={16} />
{message.attachments &&
message.attachments.length > 0 && (
<File size={16} />
<div class="username">
<UserShort user={message.author} size={16} />
</div>
<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 ? (
<SystemMessage message={message} />
) : (
<Markdown
disallowBigEmoji
content={(
message.content as string
).replace(/\n/g, " ")}
/>
)}
{message.author_id === SYSTEM_USER_ID ? (
<SystemMessage message={message} />
) : (
<Markdown
disallowBigEmoji
content={(
message.content as string
).replace(/\n/g, " ")}
/>
)}
</div>
</ReplyBase>
<span class="actions">
<IconButton
......@@ -143,4 +170,4 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
})}
</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 { 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 {
typing?: TypingUser[];
channel: Channel;
}
const Base = styled.div`
......@@ -57,28 +52,36 @@ const Base = styled.div`
}
`;
export function TypingIndicator({ typing }: Props) {
if (typing && typing.length > 0) {
const client = useContext(AppContext);
const users = useUsers(typing.map((x) => x.id)).filter(
(x) => typeof x !== "undefined",
) as User[];
export default observer(({ channel }: Props) => {
const users = channel.typing.filter(
(x) =>
typeof x !== "undefined" &&
x._id !== x.client.user!._id &&
x.relationship !== RelationshipStatus.Blocked,
);
if (users.length > 0) {
users.sort((a, b) =>
a._id.toUpperCase().localeCompare(b._id.toUpperCase()),
a!._id.toUpperCase().localeCompare(b!._id.toUpperCase()),
);
let text;
if (users.length >= 5) {
text = <Text id="app.main.channel.typing.several" />;
} 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
id="app.main.channel.typing.multiple"
fields={{
user: usersCopy.pop()?.username,
userlist: usersCopy.map((x) => x.username).join(", "),
user,
userlist: userlist.join(", "),
}}
/>
);
......@@ -86,7 +89,7 @@ export function TypingIndicator({ typing }: Props) {
text = (
<Text
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) {
<div className="avatars">
{users.map((user) => (
<img
src={client.users.getAvatarURL(
user._id,
{ max_side: 256 },
true,
)}
key={user!._id}
loading="eager"
src={user!.generateAvatarURL({ max_side: 256 })}
/>
))}
</div>
......@@ -112,10 +113,4 @@ export function TypingIndicator({ typing }: Props) {
}
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 @@
iframe {
border: none;
border-radius: 4px;
border-radius: var(--border-radius);
}
&.image {
......@@ -27,8 +27,8 @@
padding: 12px;
width: fit-content;
border-radius: 4px;
background: var(--primary-header);
border-radius: var(--border-radius);
.siteinfo {
display: flex;
......@@ -80,8 +80,8 @@
overflow: hidden;
display: -webkit-box;
white-space: pre-wrap;
// -webkit-line-clamp: 6;
// -webkit-box-orient: vertical;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}
.footer {
......@@ -91,7 +91,7 @@
img.image {
cursor: pointer;
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 classNames from "classnames";
import { useContext } from "preact/hooks";
import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { useClient } from "../../../../context/revoltjs/RevoltClient";
import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
import EmbedMedia from "./EmbedMedia";
interface Props {
embed: EmbedRJS;
embed: EmbedI;
}
const MAX_EMBED_WIDTH = 480;
......@@ -19,11 +20,7 @@ const CONTAINER_PADDING = 24;
const MAX_PREVIEW_SIZE = 150;
export default function Embed({ embed }: Props) {
// ! FIXME: temp code
// ! add proxy function to client
function proxyImage(url: string) {
return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url);
}
const client = useClient();
const { openScreen } = useIntermediate();
const maxWidth = Math.min(
......@@ -35,14 +32,14 @@ export default function Embed({ embed }: Props) {
w: number,
h: number,
): { width: number; height: number } {
let limitingWidth = Math.min(maxWidth, w);
const limitingWidth = Math.min(maxWidth, w);
let limitingHeight = Math.min(MAX_EMBED_HEIGHT, h);
const limitingHeight = Math.min(MAX_EMBED_HEIGHT, h);
// Calculate smallest possible WxH.
let width = Math.min(limitingWidth, limitingHeight * (w / h));
const width = Math.min(limitingWidth, limitingHeight * (w / h));
let height = Math.min(limitingHeight, limitingWidth * (h / w));
const height = Math.min(limitingHeight, limitingWidth * (h / w));
return { width, height };
}
......@@ -51,7 +48,7 @@ export default function Embed({ embed }: Props) {
case "Website": {
// Determine special embed size.
let mw, mh;
let largeMedia =
const largeMedia =
(embed.special && embed.special.type !== "None") ||
embed.image?.size === "Large";
switch (embed.special?.type) {
......@@ -80,7 +77,7 @@ export default function Embed({ embed }: Props) {
}
}
let { width, height } = calculateSize(mw, mh);
const { width, height } = calculateSize(mw, mh);
return (
<div
className={classNames(styles.embed, styles.website)}
......@@ -94,8 +91,9 @@ export default function Embed({ embed }: Props) {
<div className={styles.siteinfo}>
{embed.icon_url && (
<img
loading="lazy"
className={styles.favicon}
src={proxyImage(embed.icon_url)}
src={client.proxyFile(embed.icon_url)}
draggable={false}
onError={(e) =>
(e.currentTarget.style.display =
......@@ -115,7 +113,8 @@ export default function Embed({ embed }: Props) {
<a
href={embed.url}
target={"_blank"}
className={styles.title}>
className={styles.title}
rel="noreferrer">
{embed.title}
</a>
</span>
......@@ -151,9 +150,10 @@ export default function Embed({ embed }: Props) {
<img
className={classNames(styles.embed, styles.image)}
style={calculateSize(embed.width, embed.height)}
src={proxyImage(embed.url)}
src={client.proxyFile(embed.url)}
type="text/html"
frameBorder="0"
loading="lazy"
onClick={() => openScreen({ id: "image_viewer", embed })}
onMouseDown={(ev) =>
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 { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { useClient } from "../../../../context/revoltjs/RevoltClient";
interface Props {
embed: Embed;
......@@ -11,19 +13,15 @@ interface 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;
const { openScreen } = useIntermediate();
const client = useClient();
switch (embed.special?.type) {
case "YouTube":
return (
<iframe
loading="lazy"
src={`https://www.youtube-nocookie.com/embed/${embed.special.id}?modestbranding=1`}
allowFullScreen
style={{ height }}
......@@ -38,6 +36,7 @@ export default function EmbedMedia({ embed, width, height }: Props) {
frameBorder="0"
allowFullScreen
scrolling="no"
loading="lazy"
style={{ height }}
/>
);
......@@ -45,6 +44,7 @@ export default function EmbedMedia({ embed, width, height }: Props) {
return (
<iframe
src={`https://open.spotify.com/embed/${embed.special.content_type}/${embed.special.id}`}
loading="lazy"
frameBorder="0"
allowFullScreen
allowTransparency
......@@ -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`}
frameBorder="0"
scrolling="no"
loading="lazy"
style={{ height }}
/>
);
......@@ -69,17 +70,19 @@ export default function EmbedMedia({ embed, width, height }: Props) {
embed.special.id
}/size=large/bgcol=181a1b/linkcol=056cc4/tracklist=false/transparent=true/`}
seamless
loading="lazy"
style={{ height }}
/>
);
}
default: {
if (embed.image) {
let url = embed.image.url;
const url = embed.image.url;
return (
<img
className={styles.image}
src={proxyImage(url)}
src={client.proxyFile(url)}
loading="lazy"
style={{ width, height }}
onClick={() =>
openScreen({
......
src/components/common/messaging/embed/EmbedMediaActions.tsx
View file @ 1ac5de17
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";
......@@ -16,9 +16,13 @@ export default function EmbedMediaActions({ embed }: Props) {
<div className={styles.actions}>
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>
{embed.width + "x" + embed.height}
{`${embed.width}x${embed.height}`}
</span>
<a href={embed.url} class={styles.openIcon} target="_blank">
<a
href={embed.url}
class={styles.openIcon}
target="_blank"
rel="noreferrer">
<IconButton>
<LinkExternal size={24} />
</IconButton>
......