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 2020 additions and 805 deletions
src/components/common/Tooltip.tsx
View file @ 1ac5de17
import Tippy, { TippyProps } from "@tippyjs/react";
import styled from "styled-components"; import styled from "styled-components";
import { Text } from "preact-i18n";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
import { Position, Tooltip as TooltipCore, TooltipProps } from "react-tippy";
type Props = Omit<TooltipProps, 'html'> & { type Props = Omit<TippyProps, "children"> & {
position?: Position;
children: Children; children: Children;
content: Children; content: Children;
};
export default function Tooltip(props: Props) {
const { children, content, ...tippyProps } = props;
return (
<Tippy content={content} {...tippyProps}>
{/*
// @ts-expect-error Type mis-match. */}
<div style={`display: flex;`}>{children}</div>
</Tippy>
);
} }
const TooltipBase = styled.div` const PermissionTooltipBase = styled.div`
padding: 8px; display: flex;
font-size: 12px; align-items: center;
border-radius: 4px; flex-direction: column;
color: var(--foreground);
background: var(--secondary-background); span {
font-weight: 700;
text-transform: uppercase;
color: var(--secondary-foreground);
font-size: 11px;
}
code {
font-family: var(--monospace-font);
}
`; `;
export default function Tooltip(props: Props) { export function PermissionTooltip(
props: Omit<Props, "content"> & { permission: string },
) {
const { permission, ...tooltipProps } = props;
return ( return (
<TooltipCore <Tooltip
{...props} content={
// @ts-expect-error <PermissionTooltipBase>
html={<TooltipBase>{props.content}</TooltipBase>} /> <span>
<Text id="app.permissions.required" />
</span>
<code>{permission}</code>
</PermissionTooltipBase>
}
{...tooltipProps}
/>
); );
} }
src/components/common/UpdateIndicator.tsx 0 → 100644
View file @ 1ac5de17
/* eslint-disable react-hooks/rules-of-hooks */
import { Download, CloudDownload } from "@styled-icons/boxicons-regular";
import { useContext, useEffect, useState } from "preact/hooks";
import { internalSubscribe } from "../../lib/eventEmitter";
import { ThemeContext } from "../../context/Theme";
import IconButton from "../ui/IconButton";
import { updateSW } from "../../main";
import Tooltip from "./Tooltip";
let pendingUpdate = false;
internalSubscribe("PWA", "update", () => (pendingUpdate = true));
interface Props {
style: "titlebar" | "channel";
}
export default function UpdateIndicator({ style }: Props) {
const [pending, setPending] = useState(pendingUpdate);
useEffect(() => {
return internalSubscribe("PWA", "update", () => setPending(true));
});
if (!pending) return null;
const theme = useContext(ThemeContext);
if (style === "titlebar") {
return (
<div class="actions">
<Tooltip
content="A new update is available!"
placement="bottom">
<div onClick={() => updateSW(true)}>
<CloudDownload size={22} color={theme.success} />
</div>
</Tooltip>
</div>
);
}
if (window.isNative) return null;
return (
<IconButton onClick={() => updateSW(true)}>
<Download size={22} color={theme.success} />
</IconButton>
);
}
src/components/common/messaging/Message.tsx
View file @ 1ac5de17
import Embed from "./embed/Embed"; import { observer } from "mobx-react-lite";
import UserIcon from "../user/UserIcon"; import { Message as MessageObject } from "revolt.js/dist/maps/Messages";
import { Username } from "../user/UserShort";
import Markdown from "../../markdown/Markdown";
import { Children } from "../../../types/Preact";
import Attachment from "./attachments/Attachment";
import { attachContextMenu } from "preact-context-menu"; import { attachContextMenu } from "preact-context-menu";
import { useUser } from "../../../context/revoltjs/hooks"; import { memo } from "preact/compat";
import { useState } from "preact/hooks";
import { QueuedMessage } from "../../../redux/reducers/queue"; import { QueuedMessage } from "../../../redux/reducers/queue";
import { MessageObject } from "../../../context/revoltjs/util";
import MessageBase, { MessageContent, MessageDetail, MessageInfo } from "./MessageBase"; import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import Overline from "../../ui/Overline"; import Overline from "../../ui/Overline";
import { useContext } from "preact/hooks";
import { AppContext } from "../../../context/revoltjs/RevoltClient"; import { Children } from "../../../types/Preact";
import Markdown from "../../markdown/Markdown";
import UserIcon from "../user/UserIcon";
import { Username } from "../user/UserShort";
import MessageBase, {
MessageContent,
MessageDetail,
MessageInfo,
} from "./MessageBase";
import Attachment from "./attachments/Attachment";
import { MessageReply } from "./attachments/MessageReply";
import Embed from "./embed/Embed";
interface Props { interface Props {
attachContext?: boolean attachContext?: boolean;
queued?: QueuedMessage queued?: QueuedMessage;
message: MessageObject message: MessageObject;
contrast?: boolean highlight?: boolean;
content?: Children contrast?: boolean;
head?: boolean content?: Children;
head?: boolean;
} }
export default function Message({ attachContext, message, contrast, content: replacement, head, queued }: Props) { const Message = observer(
// TODO: Can improve re-renders here by providing a list ({
// TODO: of dependencies. We only need to update on u/avatar. highlight,
const user = useUser(message.author); attachContext,
const client = useContext(AppContext); message,
contrast,
const content = message.content as string; content: replacement,
return ( head: preferHead,
<MessageBase id={message._id} queued,
head={head} }: Props) => {
contrast={contrast} const client = useClient();
sending={typeof queued !== 'undefined'} const user = message.author;
mention={message.mentions?.includes(client.user!._id)}
failed={typeof queued?.error !== 'undefined'} const { openScreen } = useIntermediate();
onContextMenu={attachContext ? attachContextMenu('Menu', { message, contextualChannel: message.channel, queued }) : undefined}>
<MessageInfo> const content = message.content as string;
{ head ? const head =
<UserIcon target={user} size={36} /> : preferHead || (message.reply_ids && message.reply_ids.length > 0);
<MessageDetail message={message} position="left" /> }
</MessageInfo> // ! TODO: tell fatal to make this type generic
<MessageContent> // bree: Fatal please...
{ head && <span className="author"> const userContext = attachContext
<Username user={user} /> ? (attachContextMenu("Menu", {
<MessageDetail message={message} position="top" /> user: message.author_id,
</span> } contextualChannel: message.channel_id,
{ replacement ?? <Markdown content={content} /> } // eslint-disable-next-line
{ queued?.error && <Overline type="error" error={queued.error} /> } }) as any)
{ message.attachments?.map((attachment, index) => : undefined;
<Attachment key={index} attachment={attachment} hasContent={ index > 0 || content.length > 0 } />) }
{ message.embeds?.map((embed, index) => const openProfile = () =>
<Embed key={index} embed={embed} />) } openScreen({ id: "profile", user_id: message.author_id });
</MessageContent>
</MessageBase> // ! FIXME(?): animate on hover
) const [animate, setAnimate] = useState(false);
}
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="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 dayjs from "dayjs"; import { observer } from "mobx-react-lite";
import Tooltip from "../Tooltip"; import { Message } from "revolt.js/dist/maps/Messages";
import styled, { css, keyframes } from "styled-components";
import { decodeTime } from "ulid"; import { decodeTime } from "ulid";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import styled, { css } from "styled-components";
import { MessageObject } from "../../../context/revoltjs/util"; import { useDictionary } from "../../../lib/i18n";
import { dayjs } from "../../../context/Locale";
import Tooltip from "../Tooltip";
export interface BaseMessageProps { export interface BaseMessageProps {
head?: boolean, head?: boolean;
failed?: boolean, failed?: boolean;
mention?: boolean, mention?: boolean;
blocked?: boolean, blocked?: boolean;
sending?: boolean, sending?: boolean;
contrast?: boolean contrast?: boolean;
highlight?: boolean;
} }
const highlight = keyframes`
0% { background: var(--mention); }
66% { background: var(--mention); }
100% { background: transparent; }
`;
export default styled.div<BaseMessageProps>` export default styled.div<BaseMessageProps>`
display: flex; display: flex;
overflow-x: none; overflow: none;
padding: .125rem; padding: 0.125rem;
flex-direction: row; flex-direction: row;
padding-right: 16px; padding-inline-end: 16px;
${ props => props.contrast && css` @media (pointer: coarse) {
padding: .3rem; user-select: none;
border-radius: 4px; }
background: var(--hover);
` }
${ props => props.head && css` ${(props) =>
margin-top: 12px; props.contrast &&
` } css`
padding: 0.3rem;
background: var(--hover);
border-radius: var(--border-radius);
`}
${ props => props.mention && css` ${(props) =>
background: var(--mention); props.head &&
` } css`
margin-top: 12px;
`}
${ props => props.blocked && css` ${(props) =>
filter: blur(4px); props.mention &&
transition: 0.2s ease filter; css`
background: var(--mention);
`}
&:hover { ${(props) =>
filter: none; props.blocked &&
} css`
` } filter: blur(4px);
transition: 0.2s ease filter;
${ props => props.sending && css` &:hover {
opacity: 0.8; filter: none;
color: var(--tertiary-foreground); }
` } `}
${ props => props.failed && css` ${(props) =>
color: var(--error); props.sending &&
` } css`
opacity: 0.8;
color: var(--tertiary-foreground);
`}
.author { ${(props) =>
props.failed &&
css`
color: var(--error);
`}
${(props) =>
props.highlight &&
css`
animation-name: ${highlight};
animation-timing-function: ease;
animation-duration: 3s;
`}
.detail {
gap: 8px; gap: 8px;
display: flex; display: flex;
align-items: center; 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;
}
}
.copy { .copy {
width: 0; display: block;
opacity: 0; overflow: hidden;
} }
&:hover { &:hover {
...@@ -81,72 +135,125 @@ export const MessageInfo = styled.div` ...@@ -81,72 +135,125 @@ export const MessageInfo = styled.div`
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
::selection { .copyBracket {
background-color: transparent; opacity: 0;
color: var(--tertiary-foreground); position: absolute;
}
.copyTime {
opacity: 0;
position: absolute;
}
svg {
user-select: none;
cursor: pointer;
&:active {
transform: translateY(1px);
}
} }
time { time {
opacity: 0; opacity: 0;
}
time,
.edited {
margin-top: 1px;
cursor: default; cursor: default;
display: inline; display: inline;
font-size: 10px; font-size: 10px;
padding-top: 1px;
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
} }
time,
.edited > div {
&::selection {
background-color: transparent;
color: var(--tertiary-foreground);
}
}
.header {
cursor: pointer;
}
`; `;
export const MessageContent = styled.div` export const MessageContent = styled.div`
min-width: 0; min-width: 0;
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
overflow: hidden; // overflow: hidden;
font-size: 0.875rem;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
font-size: var(--text-size);
`; `;
export const DetailBase = styled.div` export const DetailBase = styled.div`
flex-shrink: 0;
gap: 4px; gap: 4px;
font-size: 10px; font-size: 10px;
display: inline-flex; display: inline-flex;
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
.edited {
cursor: default;
&::selection {
background-color: transparent;
color: var(--tertiary-foreground);
}
}
`; `;
export function MessageDetail({ message, position }: { message: MessageObject, position: 'left' | 'top' }) { export const MessageDetail = observer(
if (position === 'left') { ({ message, position }: { message: Message; position: "left" | "top" }) => {
if (message.edited) { const dict = useDictionary();
return (
<span> if (position === "left") {
<span className="copy"> if (message.edited) {
[<time>{dayjs(decodeTime(message._id)).format("H:mm")}</time>] return (
</span> <>
<Tooltip content={dayjs(message.edited).format("LLLL")}> <time className="copyTime">
<Text id="app.main.channel.edited" /> <i className="copyBracket">[</i>
</Tooltip> {dayjs(decodeTime(message._id)).format(
</span> dict.dayjs?.timeFormat,
) )}
} else { <i className="copyBracket">]</i>
</time>
<span className="edited">
<Tooltip
content={dayjs(message.edited).format("LLLL")}>
<Text id="app.main.channel.edited" />
</Tooltip>
</span>
</>
);
}
return ( return (
<> <>
<time> <time>
<i className="copy">[</i> <i className="copyBracket">[</i>
{ dayjs(decodeTime(message._id)).format("H:mm") } {dayjs(decodeTime(message._id)).format(
<i className="copy">]</i> dict.dayjs?.timeFormat,
)}
<i className="copyBracket">]</i>
</time> </time>
</> </>
) );
} }
}
return ( return (
<DetailBase> <DetailBase>
<time> <time>{dayjs(decodeTime(message._id)).calendar()}</time>
{dayjs(decodeTime(message._id)).calendar()} {message.edited && (
</time> <Tooltip content={dayjs(message.edited).format("LLLL")}>
{ message.edited && <Tooltip content={dayjs(message.edited).format("LLLL")}> <span className="edited">
<Text id="app.main.channel.edited" /> <Text id="app.main.channel.edited" />
</Tooltip> } </span>
</DetailBase> </Tooltip>
) )}
} </DetailBase>
);
},
);
src/components/common/messaging/MessageBox.tsx
View file @ 1ac5de17
import { ulid } from "ulid"; import { Send, ShieldX } from "@styled-icons/boxicons-solid";
import { Channel } from "revolt.js"; import Axios, { CancelTokenSource } from "axios";
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 styled from "styled-components";
import { ulid } from "ulid";
import { Text } from "preact-i18n";
import { useCallback, useContext, useEffect, useState } from "preact/hooks";
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import { debounce } from "../../../lib/debounce";
import { defer } from "../../../lib/defer"; import { defer } from "../../../lib/defer";
import IconButton from "../../ui/IconButton"; import { internalEmit, internalSubscribe } from "../../../lib/eventEmitter";
import { Send } from '@styled-icons/feather';
import Axios, { CancelTokenSource } from "axios";
import { useTranslation } from "../../../lib/i18n"; import { useTranslation } from "../../../lib/i18n";
import { connectState } from "../../../redux/connector";
import { WithDispatcher } from "../../../redux/reducers";
import { takeError } from "../../../context/revoltjs/util";
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { internalEmit, internalSubscribe } from "../../../lib/eventEmitter"; import {
import { useCallback, useContext, useEffect, useState } from "preact/hooks"; SingletonMessageRenderer,
SMOOTH_SCROLL_ON_RECEIVE,
} from "../../../lib/renderer/Singleton";
import { dispatch, getState } from "../../../redux";
import { Reply } from "../../../redux/reducers/queue";
import { SoundContext } from "../../../context/Settings";
import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { FileUploader, grabFiles, uploadFile } from "../../../context/revoltjs/FileUploads"; import {
import { SingletonMessageRenderer, SMOOTH_SCROLL_ON_RECEIVE } from "../../../lib/renderer/Singleton"; FileUploader,
grabFiles,
uploadFile,
} from "../../../context/revoltjs/FileUploads";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { takeError } from "../../../context/revoltjs/util";
import IconButton from "../../ui/IconButton";
import FilePreview from './bars/FilePreview';
import { debounce } from "../../../lib/debounce";
import AutoComplete, { useAutoComplete } from "../AutoComplete"; import AutoComplete, { useAutoComplete } from "../AutoComplete";
import { PermissionTooltip } from "../Tooltip";
import FilePreview from "./bars/FilePreview";
import ReplyBar from "./bars/ReplyBar";
type Props = WithDispatcher & { type Props = {
channel: Channel; channel: Channel;
draft?: string;
}; };
export type UploadState = export type UploadState =
| { type: "none" } | { type: "none" }
| { type: "attached"; files: File[] } | { type: "attached"; files: File[] }
| { type: "uploading"; files: File[]; percent: number; cancel: CancelTokenSource } | {
type: "uploading";
files: File[];
percent: number;
cancel: CancelTokenSource;
}
| { type: "sending"; files: File[] } | { type: "sending"; files: File[] }
| { type: "failed"; files: File[]; error: string }; | { type: "failed"; files: File[]; error: string };
const Base = styled.div` const Base = styled.div`
display: flex; display: flex;
padding: 0 12px; align-items: flex-start;
background: var(--message-box); background: var(--message-box);
textarea { textarea {
font-size: .875rem; font-size: var(--text-size);
background: transparent; background: transparent;
&::placeholder {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
`;
const Blocked = styled.div`
display: flex;
align-items: center;
user-select: none;
font-size: var(--text-size);
color: var(--tertiary-foreground);
.text {
padding: 14px 14px 14px 0;
}
svg {
flex-shrink: 0;
} }
`; `;
const Action = styled.div` const Action = styled.div`
display: grid; display: flex;
place-items: center; place-items: center;
> div {
height: 48px;
width: 48px;
padding: 12px;
}
.mobile {
@media (pointer: fine) {
display: none;
}
}
`; `;
function MessageBox({ channel, draft, dispatcher }: Props) { // ! FIXME: add to app config and load from app config
const [ uploadState, setUploadState ] = useState<UploadState>({ type: 'none' }); export const CAN_UPLOAD_AT_ONCE = 4;
export default observer(({ channel }: Props) => {
const [draft, setDraft] = useState(getState().drafts[channel._id] ?? "");
const [uploadState, setUploadState] = useState<UploadState>({
type: "none",
});
const [typing, setTyping] = useState<boolean | number>(false); const [typing, setTyping] = useState<boolean | number>(false);
const [replies, setReplies] = useState<Reply[]>([]);
const playSound = useContext(SoundContext);
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const client = useContext(AppContext); const client = useContext(AppContext);
const translate = useTranslation(); const translate = useTranslation();
function setMessage(content?: string) { if (!(channel.permission & ChannelPermission.SendMessage)) {
if (content) { return (
dispatcher({ <Base>
type: "SET_DRAFT", <Blocked>
channel: channel._id, <Action>
content <PermissionTooltip
}); permission="SendMessages"
} else { placement="top">
dispatcher({ <ShieldX size={22} />
type: "CLEAR_DRAFT", </PermissionTooltip>
channel: channel._id </Action>
}); <div className="text">
} <Text id="app.main.channel.misc.no_sending" />
</div>
</Blocked>
</Base>
);
} }
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,
});
}
},
[channel._id],
);
useEffect(() => { useEffect(() => {
function append(content: string, action: 'quote' | 'mention') { function append(content: string, action: "quote" | "mention") {
const text = const text =
action === "quote" action === "quote"
? `${content ? `${content
.split("\n") .split("\n")
.map(x => `> ${x}`) .map((x) => `> ${x}`)
.join("\n")}\n\n` .join("\n")}\n\n`
: `${content} `; : `${content} `;
...@@ -89,21 +178,28 @@ function MessageBox({ channel, draft, dispatcher }: Props) { ...@@ -89,21 +178,28 @@ function MessageBox({ channel, draft, dispatcher }: 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') return; if (uploadState.type === "uploading" || uploadState.type === "sending")
return;
const content = draft?.trim() ?? '';
if (uploadState.type === 'attached') return sendFile(content); const content = draft?.trim() ?? "";
if (uploadState.type === "attached") return sendFile(content);
if (content.length === 0) return; if (content.length === 0) return;
stopTyping(); stopTyping();
setMessage(); setMessage();
setReplies([]);
playSound("outbound");
const nonce = ulid(); const nonce = ulid();
dispatcher({ dispatch({
type: "QUEUE_ADD", type: "QUEUE_ADD",
nonce, nonce,
channel: channel._id, channel: channel._id,
...@@ -111,29 +207,37 @@ function MessageBox({ channel, draft, dispatcher }: Props) { ...@@ -111,29 +207,37 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
_id: nonce, _id: nonce,
channel: channel._id, channel: channel._id,
author: client.user!._id, author: client.user!._id,
content
} content,
replies,
},
}); });
defer(() => SingletonMessageRenderer.jumpToBottom(channel._id, SMOOTH_SCROLL_ON_RECEIVE)); defer(() =>
SingletonMessageRenderer.jumpToBottom(
channel._id,
SMOOTH_SCROLL_ON_RECEIVE,
),
);
try { try {
await client.channels.sendMessage(channel._id, { await channel.sendMessage({
content, content,
nonce nonce,
replies,
}); });
} catch (error) { } catch (error) {
dispatcher({ dispatch({
type: "QUEUE_FAIL", type: "QUEUE_FAIL",
error: takeError(error), error: takeError(error),
nonce nonce,
}); });
} }
} }
async function sendFile(content: string) { async function sendFile(content: string) {
if (uploadState.type !== 'attached') return; if (uploadState.type !== "attached") return;
let attachments = []; const attachments: string[] = [];
const cancel = Axios.CancelToken.source(); const cancel = Axios.CancelToken.source();
const files = uploadState.files; const files = uploadState.files;
...@@ -141,33 +245,43 @@ function MessageBox({ channel, draft, dispatcher }: Props) { ...@@ -141,33 +245,43 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
setUploadState({ type: "uploading", files, percent: 0, cancel }); setUploadState({ type: "uploading", files, percent: 0, cancel });
try { try {
for (let i=0;i<files.length;i++) { for (let i = 0; i < files.length && i < CAN_UPLOAD_AT_ONCE; i++) {
if (i>0)continue; // ! FIXME: temp, allow multiple uploads on server
const file = files[i]; const file = files[i];
attachments.push( attachments.push(
await uploadFile(client.configuration!.features.autumn.url, 'attachments', file, { await uploadFile(
onUploadProgress: e => client.configuration!.features.autumn.url,
setUploadState({ "attachments",
type: "uploading", file,
files, {
percent: Math.round(((i * 100) + (100 * e.loaded) / e.total) / (files.length)), onUploadProgress: (e) =>
cancel setUploadState({
}), type: "uploading",
cancelToken: cancel.token files,
}) percent: Math.round(
(i * 100 + (100 * e.loaded) / e.total) /
Math.min(
files.length,
CAN_UPLOAD_AT_ONCE,
),
),
cancel,
}),
cancelToken: cancel.token,
},
),
); );
} }
} catch (err) { } catch (err) {
if (err?.message === "cancel") { if (err?.message === "cancel") {
setUploadState({ setUploadState({
type: "attached", type: "attached",
files files,
}); });
} else { } else {
setUploadState({ setUploadState({
type: "failed", type: "failed",
files, files,
error: takeError(err) error: takeError(err),
}); });
} }
...@@ -176,39 +290,50 @@ function MessageBox({ channel, draft, dispatcher }: Props) { ...@@ -176,39 +290,50 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
setUploadState({ setUploadState({
type: "sending", type: "sending",
files files,
}); });
const nonce = ulid(); const nonce = ulid();
try { try {
await client.channels.sendMessage(channel._id, { await channel.sendMessage({
content, content,
nonce, nonce,
attachment: attachments[0] // ! FIXME: temp, allow multiple uploads on server replies,
attachments,
}); });
} catch (err) { } catch (err) {
setUploadState({ setUploadState({
type: "failed", type: "failed",
files, files,
error: takeError(err) error: takeError(err),
}); });
return; return;
} }
setMessage(); setMessage();
setUploadState({ type: "none" }); setReplies([]);
playSound("outbound");
if (files.length > CAN_UPLOAD_AT_ONCE) {
setUploadState({
type: "attached",
files: files.slice(CAN_UPLOAD_AT_ONCE),
});
} else {
setUploadState({ type: "none" });
}
} }
function startTyping() { function startTyping() {
if (typeof typing === 'number' && + new Date() < typing) return; if (typeof typing === "number" && +new Date() < typing) return;
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,
}); });
} }
} }
...@@ -220,62 +345,118 @@ function MessageBox({ channel, draft, dispatcher }: Props) { ...@@ -220,62 +345,118 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
setTyping(false); setTyping(false);
ws.send({ ws.send({
type: "EndTyping", type: "EndTyping",
channel: channel._id channel: channel._id,
}); });
} }
} }
} }
const debouncedStopTyping = useCallback(debounce(stopTyping, 1000), [ channel._id ]); // eslint-disable-next-line
const { onChange, onKeyUp, onKeyDown, onFocus, onBlur, ...autoCompleteProps } = useAutoComplete(setMessage, { users: { type: 'channel', id: channel._id } }); const debouncedStopTyping = useCallback(
debounce(stopTyping as (...args: unknown[]) => void, 1000),
[channel._id],
);
const {
onChange,
onKeyUp,
onKeyDown,
onFocus,
onBlur,
...autoCompleteProps
} = useAutoComplete(setMessage, {
users: { type: "channel", id: channel._id },
channels:
channel.channel_type === "TextChannel"
? { server: channel.server_id! }
: undefined,
});
return ( return (
<> <>
<AutoComplete {...autoCompleteProps} /> <AutoComplete {...autoCompleteProps} />
<FilePreview state={uploadState} addFile={() => uploadState.type === 'attached' && <FilePreview
grabFiles(20_000_000, files => setUploadState({ type: 'attached', files: [ ...uploadState.files, ...files ] }), state={uploadState}
() => openScreen({ id: "error", error: "FileTooLarge" }), true)} addFile={() =>
removeFile={index => { uploadState.type === "attached" &&
if (uploadState.type !== 'attached') return; grabFiles(
20_000_000,
(files) =>
setUploadState({
type: "attached",
files: [...uploadState.files, ...files],
}),
() =>
openScreen({ id: "error", error: "FileTooLarge" }),
true,
)
}
removeFile={(index) => {
if (uploadState.type !== "attached") return;
if (uploadState.files.length === 1) { if (uploadState.files.length === 1) {
setUploadState({ type: 'none' }); setUploadState({ type: "none" });
} else { } else {
setUploadState({ type: 'attached', files: uploadState.files.filter((_, i) => index !== i) }); setUploadState({
type: "attached",
files: uploadState.files.filter(
(_, i) => index !== i,
),
});
} }
}} /> }}
/>
<ReplyBar
channel={channel._id}
replies={replies}
setReplies={setReplies}
/>
<Base> <Base>
<Action> {channel.permission & ChannelPermission.UploadFiles ? (
<FileUploader <Action>
size={24} <FileUploader
behaviour='multi' size={24}
style='attachment' behaviour="multi"
fileType='attachments' style="attachment"
maxFileSize={20_000_000} fileType="attachments"
maxFileSize={20_000_000}
attached={uploadState.type !== 'none'} attached={uploadState.type !== "none"}
uploading={uploadState.type === 'uploading' || uploadState.type === 'sending'} uploading={
uploadState.type === "uploading" ||
remove={async () => setUploadState({ type: "none" })} uploadState.type === "sending"
onChange={files => setUploadState({ type: "attached", files })}
cancel={() => uploadState.type === 'uploading' && uploadState.cancel.cancel("cancel")}
append={files => {
if (uploadState.type === 'none') {
setUploadState({ type: 'attached', files });
} else if (uploadState.type === 'attached') {
setUploadState({ type: 'attached', files: [ ...uploadState.files, ...files ] });
} }
}} remove={async () =>
/> setUploadState({ type: "none" })
</Action> }
onChange={(files) =>
setUploadState({ type: "attached", files })
}
cancel={() =>
uploadState.type === "uploading" &&
uploadState.cancel.cancel("cancel")
}
append={(files) => {
if (files.length === 0) return;
if (uploadState.type === "none") {
setUploadState({ type: "attached", files });
} else if (uploadState.type === "attached") {
setUploadState({
type: "attached",
files: [...uploadState.files, ...files],
});
}
}}
/>
</Action>
) : undefined}
<TextAreaAutoSize <TextAreaAutoSize
autoFocus autoFocus
hideBorder hideBorder
maxRows={5} maxRows={20}
padding={14}
id="message" id="message"
value={draft ?? ''}
onKeyUp={onKeyUp} onKeyUp={onKeyUp}
onKeyDown={e => { value={draft ?? ""}
padding="var(--message-box-padding)"
onKeyDown={(e) => {
if (onKeyDown(e)) return; if (onKeyDown(e)) return;
if ( if (
...@@ -287,39 +468,52 @@ function MessageBox({ channel, draft, dispatcher }: Props) { ...@@ -287,39 +468,52 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
return; return;
} }
if (!e.shiftKey && e.key === "Enter" && !isTouchscreenDevice) { if (
!e.shiftKey &&
e.key === "Enter" &&
!isTouchscreenDevice
) {
e.preventDefault(); e.preventDefault();
return send(); return send();
} }
debouncedStopTyping(true); debouncedStopTyping(true);
}} }}
placeholder={ placeholder={
channel.channel_type === "DirectMessage" ? translate("app.main.channel.message_who", { channel.channel_type === "DirectMessage"
person: client.users.get(client.channels.getRecipient(channel._id))?.username }) ? translate("app.main.channel.message_who", {
: channel.channel_type === "SavedMessages" ? translate("app.main.channel.message_saved") person: channel.recipient?.username,
: translate("app.main.channel.message_where", { channel_name: channel.name }) })
: channel.channel_type === "SavedMessages"
? translate("app.main.channel.message_saved")
: translate("app.main.channel.message_where", {
channel_name: channel.name ?? undefined,
})
}
disabled={
uploadState.type === "uploading" ||
uploadState.type === "sending"
} }
disabled={uploadState.type === 'uploading' || uploadState.type === 'sending'} onChange={(e) => {
onChange={e => {
setMessage(e.currentTarget.value); setMessage(e.currentTarget.value);
startTyping(); startTyping();
onChange(e); onChange(e);
}} }}
onFocus={onFocus} onFocus={onFocus}
onBlur={onBlur} /> onBlur={onBlur}
/>
<Action> <Action>
<IconButton onClick={send}> {/*<IconButton onClick={emojiPicker}>
<HappyAlt size={20} />
</IconButton>*/}
<IconButton
className="mobile"
onClick={send}
onMouseDown={(e) => e.preventDefault()}>
<Send size={20} /> <Send size={20} />
</IconButton> </IconButton>
</Action> </Action>
</Base> </Base>
</> </>
) );
} });
export default connectState<Omit<Props, "dispatcher" | "draft">>(MessageBox, (state, { channel }) => {
return {
draft: state.drafts[channel._id]
}
}, true)
src/components/common/messaging/SystemMessage.tsx
View file @ 1ac5de17
import { User } from "revolt.js"; import { observer } from "mobx-react-lite";
import { Message } from "revolt.js/dist/maps/Messages";
import { User } from "revolt.js/dist/maps/Users";
import styled from "styled-components"; import styled from "styled-components";
import UserShort from "../user/UserShort";
import { TextReact } from "../../../lib/i18n";
import { attachContextMenu } from "preact-context-menu"; import { attachContextMenu } from "preact-context-menu";
import { MessageObject } from "../../../context/revoltjs/util";
import { TextReact } from "../../../lib/i18n";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import UserShort from "../user/UserShort";
import MessageBase, { MessageDetail, MessageInfo } from "./MessageBase"; import MessageBase, { MessageDetail, MessageInfo } from "./MessageBase";
import { useForceUpdate, useUser } from "../../../context/revoltjs/hooks";
const SystemContent = styled.div` const SystemContent = styled.div`
gap: 4px; gap: 4px;
...@@ -30,120 +35,136 @@ type SystemMessageParsed = ...@@ -30,120 +35,136 @@ type SystemMessageParsed =
interface Props { interface Props {
attachContext?: boolean; attachContext?: boolean;
message: MessageObject; message: Message;
highlight?: boolean;
hideInfo?: boolean;
} }
export function SystemMessage({ attachContext, message }: Props) { export const SystemMessage = observer(
const ctx = useForceUpdate(); ({ attachContext, message, highlight, hideInfo }: Props) => {
const client = useClient();
let data: SystemMessageParsed;
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 data: SystemMessageParsed; let children;
let content = message.content; switch (data.type) {
if (typeof content === "object") {
switch (content.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;
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 ( return (
<MessageBase <MessageBase
onContextMenu={attachContext ? attachContextMenu('Menu', highlight={highlight}
{ message, contextualChannel: message.channel } onContextMenu={
) : undefined}> attachContext
<MessageInfo> ? attachContextMenu("Menu", {
<MessageDetail message={message} position="left" /> message,
</MessageInfo> contextualChannel: message.channel,
<SystemContent>{children}</SystemContent> })
</MessageBase> : 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 { .attachment {
border-radius: 6px; display: grid;
margin: .125rem 0 .125rem; 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%;
&[data-spoiler="true"] { &[data-spoiler="true"] {
filter: blur(30px); filter: blur(30px);
pointer-events: none; pointer-events: none;
} }
&[data-has-content="true"] {
margin-top: 4px;
}
&.image {
cursor: pointer;
}
&.video {
.actions {
padding: 10px 12px;
border-radius: 6px 6px 0 0;
}
video {
width: 100%;
border-radius: 0 0 6px 6px;
}
}
&.audio { &.audio {
gap: 4px; gap: 4px;
padding: 6px; padding: 6px;
display: flex; display: flex;
border-radius: 6px; max-width: 100%;
flex-direction: column; flex-direction: column;
width: var(--attachment-default-width);
background: var(--secondary-background); background: var(--secondary-background);
max-width: 400px;
> audio { > audio {
width: 100%; width: 100%;
...@@ -43,20 +28,20 @@ ...@@ -43,20 +28,20 @@
&.file { &.file {
> div { > div {
width: 400px;
padding: 12px; padding: 12px;
max-width: 100%;
user-select: none; user-select: none;
width: fit-content; width: fit-content;
border-radius: 6px; border-radius: var(--border-radius);
width: var(--attachment-default-width);
} }
} }
&.text { &.text {
display: flex; width: 100%;
overflow: hidden; overflow: hidden;
max-width: 800px; grid-auto-columns: unset;
border-radius: 6px; max-width: var(--attachment-max-text-width);
flex-direction: column;
.textContent { .textContent {
height: 140px; height: 140px;
...@@ -65,18 +50,18 @@ ...@@ -65,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: "Fira Mono", 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;
} }
...@@ -85,35 +70,22 @@ ...@@ -85,35 +70,22 @@
} }
} }
.actions { .margin {
gap: 8px; margin-top: 4px;
padding: 8px; }
display: flex;
overflow: none; .container {
max-width: 100%; max-width: 100%;
align-items: center; overflow: hidden;
flex-direction: row; width: fit-content;
color: var(--foreground);
background: var(--secondary-background);
> svg { > :first-child {
flex-shrink: 0; width: min(var(--attachment-max-width), 100%, var(--width));
} }
}
.info {
display: flex;
flex-direction: column;
flex-grow: 1;
> span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.filesize { .container,
font-size: 10px; .attachment,
color: var(--secondary-foreground); .image {
} border-radius: var(--border-radius);
}
} }
src/components/common/messaging/attachments/Attachment.tsx
View file @ 1ac5de17
import TextFile from "./TextFile"; import { Attachment as AttachmentI } from "revolt-api/types/Autumn";
import { Text } from "preact-i18n";
import classNames from "classnames";
import styles from "./Attachment.module.scss"; import styles from "./Attachment.module.scss";
import AttachmentActions from "./AttachmentActions"; import classNames from "classnames";
import { useContext, useState } from "preact/hooks"; import { useContext, useState } from "preact/hooks";
import { AppContext } from "../../../../context/revoltjs/RevoltClient";
import { Attachment as AttachmentRJS } from "revolt.js/dist/api/objects";
import { useIntermediate } from "../../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea"; import { AppContext } from "../../../../context/revoltjs/RevoltClient";
import AttachmentActions from "./AttachmentActions";
import { SizedGrid } from "./Grid";
import Spoiler from "./Spoiler";
import TextFile from "./TextFile";
interface Props { interface Props {
attachment: AttachmentRJS; attachment: AttachmentI;
hasContent: boolean; hasContent: boolean;
} }
const MAX_ATTACHMENT_WIDTH = 480; const MAX_ATTACHMENT_WIDTH = 480;
const MAX_ATTACHMENT_HEIGHT = 640;
export default function Attachment({ attachment, hasContent }: Props) { export default function Attachment({ attachment, hasContent }: Props) {
const client = useContext(AppContext); const client = useContext(AppContext);
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const { filename, metadata } = attachment; const { filename, metadata } = attachment;
const [ spoiler, setSpoiler ] = useState(filename.startsWith("SPOILER_")); const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_"));
const maxWidth = Math.min(useContext(MessageAreaWidthContext), MAX_ATTACHMENT_WIDTH);
const url = client.generateFileURL(attachment, { width: MAX_ATTACHMENT_WIDTH * 1.5 }, true);
let width = 0,
height = 0;
if (metadata.type === 'Image' || metadata.type === 'Video') {
let limitingWidth = Math.min(
maxWidth,
metadata.width
);
let limitingHeight = Math.min(
MAX_ATTACHMENT_HEIGHT,
metadata.height
);
// Calculate smallest possible WxH. const url = client.generateFileURL(
width = Math.min( attachment,
limitingWidth, { width: MAX_ATTACHMENT_WIDTH * 1.5 },
limitingHeight * (metadata.width / metadata.height) true,
); );
height = Math.min(
limitingHeight,
limitingWidth * (metadata.height / metadata.width)
);
}
switch (metadata.type) { switch (metadata.type) {
case "Image": { case "Image": {
return ( return (
<div <SizedGrid
style={{ width }} width={metadata.width}
className={styles.container} height={metadata.height}
onClick={() => spoiler && setSpoiler(false)} className={classNames({
> [styles.margin]: hasContent,
{spoiler && ( spoiler,
<div className={styles.overflow}> })}>
<div style={{ width, height }}>
<span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
</div>
</div>
)}
<img <img
src={url} src={url}
alt={filename} alt={filename}
data-spoiler={spoiler} className={styles.image}
data-has-content={hasContent} loading="lazy"
className={classNames(styles.attachment, styles.image)}
onClick={() => onClick={() =>
openScreen({ id: "image_viewer", attachment }) openScreen({ id: "image_viewer", attachment })
} }
onMouseDown={ev => onMouseDown={(ev) =>
ev.button === 1 && ev.button === 1 && window.open(url, "_blank")
window.open(url, "_blank")
} }
style={{ width, height }}
/> />
</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` }}>
<div style={{ width, height }}> <AttachmentActions attachment={attachment} />
<span><Text id="app.main.channel.misc.spoiler_attachment" /></span> <SizedGrid
</div> width={metadata.width}
</div> height={metadata.height}
)} className={classNames({ spoiler })}>
<div
style={{ width }}
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 controls
style={{ width, height }} loading="lazy"
onMouseDown={ev => width={metadata.width}
ev.button === 1 && height={metadata.height}
window.open(url, "_blank") 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> </div>
); );
} }
case 'Text': {
case "Text": {
return ( return (
<div <div
className={classNames(styles.attachment, styles.text)} className={classNames(styles.attachment, styles.text)}
data-has-content={hasContent} data-has-content={hasContent}>
>
<TextFile attachment={attachment} /> <TextFile attachment={attachment} />
<AttachmentActions attachment={attachment} /> <AttachmentActions attachment={attachment} />
</div> </div>
); );
} }
default: { default: {
return ( return (
<div <div
className={classNames(styles.attachment, styles.file)} className={classNames(styles.attachment, styles.file)}
data-has-content={hasContent} data-has-content={hasContent}>
>
<AttachmentActions attachment={attachment} /> <AttachmentActions attachment={attachment} />
</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
import { useContext } from 'preact/hooks'; import {
import styles from './Attachment.module.scss'; Download,
import IconButton from '../../../ui/IconButton'; LinkExternal,
import { Attachment } from "revolt.js/dist/api/objects"; File,
import { determineFileSize } from '../../../../lib/fileSize'; Headphone,
import { AppContext } from '../../../../context/revoltjs/RevoltClient'; Video,
import { Download, ExternalLink, File, Headphones, Video } from '@styled-icons/feather'; } from "@styled-icons/boxicons-regular";
import { Attachment } from "revolt-api/types/Autumn";
import styles from "./AttachmentActions.module.scss";
import classNames from "classnames";
import { useContext } from "preact/hooks";
import { determineFileSize } from "../../../../lib/fileSize";
import { AppContext } from "../../../../context/revoltjs/RevoltClient";
import IconButton from "../../../ui/IconButton";
interface Props { interface Props {
attachment: Attachment; attachment: Attachment;
...@@ -16,74 +27,105 @@ export default function AttachmentActions({ attachment }: Props) { ...@@ -16,74 +27,105 @@ export default function AttachmentActions({ attachment }: Props) {
const url = client.generateFileURL(attachment)!; const url = client.generateFileURL(attachment)!;
const open_url = `${url}/${filename}`; const open_url = `${url}/${filename}`;
const download_url = url.replace('attachments', 'attachments/download') const download_url = url.replace("attachments", "attachments/download");
const filesize = determineFileSize(size as any); const filesize = determineFileSize(size);
switch (metadata.type) { switch (metadata.type) {
case 'Image': case "Image":
return ( return (
<div className={styles.actions}> <div className={classNames(styles.actions, styles.imageAction)}>
<div className={styles.info}> <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})</span> {`${metadata.width}x${metadata.height}`} ({filesize})
</div> </span>
<a href={open_url} target="_blank"> <a
href={open_url}
target="_blank"
className={styles.iconType}
rel="noreferrer">
<IconButton> <IconButton>
<ExternalLink size={24} /> <LinkExternal size={24} />
</IconButton> </IconButton>
</a> </a>
<a href={download_url} download target="_blank"> <a
href={download_url}
className={styles.downloadIcon}
download
target="_blank"
rel="noreferrer">
<IconButton> <IconButton>
<Download size={24} /> <Download size={24} />
</IconButton> </IconButton>
</a> </a>
</div> </div>
) );
case 'Audio': case "Audio":
return ( return (
<div className={styles.actions}> <div className={classNames(styles.actions, styles.audioAction)}>
<Headphones size={24} strokeWidth={1.5} /> <Headphone size={24} className={styles.iconType} />
<div className={styles.info}> <span className={styles.filename}>{filename}</span>
<span className={styles.filename}>{filename}</span> <span className={styles.filesize}>{filesize}</span>
<span className={styles.filesize}>{filesize}</span> <a
</div> href={download_url}
<a href={download_url} download target="_blank"> className={styles.downloadIcon}
download
target="_blank"
rel="noreferrer">
<IconButton> <IconButton>
<Download size={24} strokeWidth={1.5} /> <Download size={24} />
</IconButton> </IconButton>
</a> </a>
</div> </div>
) );
case 'Video': case "Video":
return ( return (
<div className={styles.actions}> <div className={classNames(styles.actions, styles.videoAction)}>
<Video size={24} strokeWidth={1.5} /> <Video size={24} className={styles.iconType} />
<div className={styles.info}> <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})</span> {`${metadata.width}x${metadata.height}`} ({filesize})
</div> </span>
<a href={download_url} download target="_blank"> <a
href={download_url}
className={styles.downloadIcon}
download
target="_blank"
rel="noreferrer">
<IconButton> <IconButton>
<Download size={24} strokeWidth={1.5}/> <Download size={24} />
</IconButton> </IconButton>
</a> </a>
</div> </div>
) );
default: default:
return ( return (
<div className={styles.actions}> <div className={styles.actions}>
<File size={24} strokeWidth={1.5} /> <File size={24} className={styles.iconType} />
<div className={styles.info}> <span className={styles.filename}>{filename}</span>
<span className={styles.filename}>{filename}</span> <span className={styles.filesize}>{filesize}</span>
<span className={styles.filesize}>{filesize}</span> {metadata.type === "Text" && (
</div> <a
<a href={download_url} download target="_blank"> href={open_url}
target="_blank"
className={styles.externalType}
rel="noreferrer">
<IconButton>
<LinkExternal size={24} />
</IconButton>
</a>
)}
<a
href={download_url}
className={styles.downloadIcon}
download
target="_blank"
rel="noreferrer">
<IconButton> <IconButton>
<Download size={24} strokeWidth={1.5} /> <Download size={24} />
</IconButton> </IconButton>
</a> </a>
</div> </div>
) );
} }
} }
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 0 → 100644
View file @ 1ac5de17
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 Markdown from "../../../markdown/Markdown";
import UserShort from "../../user/UserShort";
import { SystemMessage } from "../SystemMessage";
interface Props {
channel: Channel;
index: number;
id: string;
}
export const ReplyBase = styled.div<{
head?: boolean;
fail?: boolean;
preview?: boolean;
}>`
gap: 4px;
min-width: 0;
display: flex;
margin-inline-start: 30px;
margin-inline-end: 12px;
/*margin-bottom: 4px;*/
font-size: 0.8em;
user-select: none;
align-items: center;
color: var(--secondary-foreground);
&::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);
&: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);
}
${(props) =>
props.fail &&
css`
color: var(--tertiary-foreground);
`}
${(props) =>
props.head &&
css`
margin-top: 12px;
`}
${(props) =>
props.preview &&
css`
margin-left: 0;
`}
`;
export const MessageReply = observer(({ index, channel, id }: Props) => {
const view = useRenderState(channel._id);
if (view?.type !== "RENDER") return null;
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>
<span>
<Text id="app.main.channel.misc.failed_load" />
</span>
</ReplyBase>
);
}
const history = useHistory();
return (
<ReplyBase head={index === 0}>
{message.author?.relationship === RelationshipStatus.Blocked ? (
<Text id="app.main.channel.misc.blocked_user" />
) : (
<>
{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 axios from "axios";
import Preloader from '../../../ui/Preloader'; import { Attachment } from "revolt-api/types/Autumn";
import styles from './Attachment.module.scss';
import { Attachment } from 'revolt.js/dist/api/objects'; import styles from "./Attachment.module.scss";
import { useContext, useEffect, useState } from 'preact/hooks'; import { useContext, useEffect, useState } from "preact/hooks";
import RequiresOnline from '../../../../context/revoltjs/RequiresOnline';
import { AppContext, StatusContext } from '../../../../context/revoltjs/RevoltClient'; import RequiresOnline from "../../../../context/revoltjs/RequiresOnline";
import {
AppContext,
StatusContext,
} from "../../../../context/revoltjs/RevoltClient";
import Preloader from "../../../ui/Preloader";
interface Props { interface Props {
attachment: Attachment; attachment: Attachment;
...@@ -13,45 +19,62 @@ interface Props { ...@@ -13,45 +19,62 @@ interface Props {
const fileCache: { [key: string]: string } = {}; const fileCache: { [key: string]: string } = {};
export default function TextFile({ attachment }: Props) { export default function TextFile({ attachment }: Props) {
const [ content, setContent ] = useState<undefined | string>(undefined); const [content, setContent] = useState<undefined | string>(undefined);
const [ loading, setLoading ] = useState(false); const [loading, setLoading] = useState(false);
const status = useContext(StatusContext); const status = useContext(StatusContext);
const client = useContext(AppContext); const client = useContext(AppContext);
const url = client.generateFileURL(attachment)!; const url = client.generateFileURL(attachment)!;
useEffect(() => { useEffect(() => {
if (typeof content !== 'undefined') return; if (typeof content !== "undefined") return;
if (loading) return; if (loading) return;
if (attachment.size > 20_000) {
setContent(
"This file is > 20 KB, for your sake I did not load it.\nSee tracking issue here for previews: https://gitlab.insrt.uk/revolt/revite/-/issues/2",
);
return;
}
setLoading(true); setLoading(true);
let cached = fileCache[attachment._id]; const cached = fileCache[attachment._id];
if (cached) { if (cached) {
setContent(cached); setContent(cached);
setLoading(false); setLoading(false);
} else { } else {
axios.get(url) axios
.then(res => { .get(url, { transformResponse: [] })
.then((res) => {
setContent(res.data); setContent(res.data);
fileCache[attachment._id] = res.data; fileCache[attachment._id] = res.data;
setLoading(false); setLoading(false);
}) })
.catch(() => { .catch(() => {
console.error("Failed to load text file. [", attachment._id, "]"); console.error(
setLoading(false) "Failed to load text file. [",
}) attachment._id,
"]",
);
setLoading(false);
});
} }
}, [ content, loading, status ]); }, [content, loading, status, attachment._id, attachment.size, url]);
return ( return (
<div className={styles.textContent} data-loading={typeof content === 'undefined'}> <div
{ className={styles.textContent}
content ? data-loading={typeof content === "undefined"}>
<pre><code>{ content }</code></pre> {content ? (
: <RequiresOnline> <pre>
<Preloader /> <code>{content}</code>
</RequiresOnline> </pre>
} ) : (
<RequiresOnline>
<Preloader type="ring" />
</RequiresOnline>
)}
</div> </div>
) );
} }
src/components/common/messaging/bars/FilePreview.tsx
View file @ 1ac5de17
import { Text } from "preact-i18n"; /* eslint-disable react-hooks/rules-of-hooks */
import { XCircle, Plus, Share, X, File } from "@styled-icons/boxicons-regular";
import styled from "styled-components"; import styled from "styled-components";
import { UploadState } from "../MessageBox";
import { useEffect, useState } from 'preact/hooks'; import { Text } from "preact-i18n";
import { XCircle, Plus, Share, X } from "@styled-icons/feather"; import { useEffect, useState } from "preact/hooks";
import { determineFileSize } from '../../../../lib/fileSize';
import { determineFileSize } from "../../../../lib/fileSize";
import { CAN_UPLOAD_AT_ONCE, UploadState } from "../MessageBox";
interface Props { interface Props {
state: UploadState, state: UploadState;
addFile: () => void, addFile: () => void;
removeFile: (index: number) => void removeFile: (index: number) => void;
} }
const Container = styled.div` const Container = styled.div`
...@@ -31,17 +35,13 @@ const Entry = styled.div` ...@@ -31,17 +35,13 @@ const Entry = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
img { &.fade {
height: 100px; opacity: 0.4;
margin-bottom: 4px;
border-radius: 4px;
object-fit: contain;
background: var(--secondary-background);
} }
span.fn { span.fn {
margin: auto; margin: auto;
font-size: .8em; font-size: 0.8em;
overflow: hidden; overflow: hidden;
max-width: 180px; max-width: 180px;
text-align: center; text-align: center;
...@@ -51,31 +51,10 @@ const Entry = styled.div` ...@@ -51,31 +51,10 @@ const Entry = styled.div`
} }
span.size { span.size {
font-size: .6em; font-size: 0.6em;
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
text-align: center; text-align: center;
} }
div {
position: relative;
height: 0;
div {
display: grid;
height: 100px;
cursor: pointer;
border-radius: 4px;
place-items: center;
opacity: 0;
transition: 0.1s ease opacity;
background: rgba(0, 0, 0, 0.5);
&:hover {
opacity: 1;
}
}
}
`; `;
const Description = styled.div` const Description = styled.div`
...@@ -86,14 +65,22 @@ const Description = styled.div` ...@@ -86,14 +65,22 @@ const Description = styled.div`
color: var(--secondary-foreground); color: var(--secondary-foreground);
`; `;
const Divider = styled.div`
width: 4px;
height: 130px;
flex-shrink: 0;
border-radius: var(--border-radius);
background: var(--tertiary-background);
`;
const EmptyEntry = styled.div` const EmptyEntry = styled.div`
width: 100px; width: 100px;
height: 100px; height: 100px;
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;
...@@ -102,57 +89,145 @@ const EmptyEntry = styled.div` ...@@ -102,57 +89,145 @@ const EmptyEntry = styled.div`
} }
`; `;
function FileEntry({ file, remove }: { file: File, remove?: () => void }) { const PreviewBox = styled.div`
if (!file.type.startsWith('image/')) return ( display: grid;
<Entry> grid-template: "main" 100px / minmax(100px, 1fr);
<div><div onClick={remove}><XCircle size={36} /></div></div> justify-items: center;
<span class="fn">{file.name}</span>
<span class="size">{determineFileSize(file.size)}</span>
</Entry>
);
const [ url, setURL ] = useState(''); cursor: pointer;
overflow: hidden;
border-radius: var(--border-radius);
background: var(--primary-background);
.icon,
.overlay {
grid-area: main;
}
.icon {
height: 100px;
margin-bottom: 4px;
object-fit: contain;
}
.overlay {
display: grid;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: 0.1s ease opacity;
}
&:hover {
.overlay {
visibility: visible;
opacity: 1;
background-color: rgba(0, 0, 0, 0.8);
}
}
`;
function FileEntry({
file,
remove,
index,
}: {
file: File;
remove?: () => void;
index: number;
}) {
if (!file.type.startsWith("image/"))
return (
<Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}>
<PreviewBox onClick={remove}>
<EmptyEntry className="icon">
<File size={36} />
</EmptyEntry>
<div class="overlay">
<XCircle size={36} />
</div>
</PreviewBox>
<span class="fn">{file.name}</span>
<span class="size">{determineFileSize(file.size)}</span>
</Entry>
);
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]);
return ( return (
<Entry> <Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}>
{ remove && <div><div onClick={remove}><XCircle size={36} /></div></div> } <PreviewBox onClick={remove}>
<img src={url} <img class="icon" src={url} alt={file.name} loading="eager" />
alt={file.name} /> <div class="overlay">
<XCircle size={36} />
</div>
</PreviewBox>
<span class="fn">{file.name}</span> <span class="fn">{file.name}</span>
<span class="size">{determineFileSize(file.size)}</span> <span class="size">{determineFileSize(file.size)}</span>
</Entry> </Entry>
) );
} }
export default function FilePreview({ state, addFile, removeFile }: Props) { export default function FilePreview({ state, addFile, removeFile }: Props) {
if (state.type === 'none') return null; if (state.type === "none") return null;
return ( return (
<Container> <Container>
<Carousel> <Carousel>
{ state.files.map((file, index) => <FileEntry file={file} key={file.name} remove={state.type === 'attached' ? () => removeFile(index) : undefined} />) } {state.files.map((file, index) => (
{ state.type === 'attached' && <EmptyEntry onClick={addFile}><Plus size={48} /></EmptyEntry> } // @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}
file={file}
key={file.name}
remove={
state.type === "attached"
? () => removeFile(index)
: undefined
}
/>
</Fragment>
))}
{state.type === "attached" && (
<EmptyEntry onClick={addFile}>
<Plus size={48} />
</EmptyEntry>
)}
</Carousel> </Carousel>
{ state.files.length > 1 && state.type === 'attached' && <Description>Warning: Only first file will be uploaded, this will be changed in a future update.</Description> } {state.type === "uploading" && (
{ state.type === 'uploading' && <Description> <Description>
<Share size={24} /> <Share size={24} />
<Text id="app.main.channel.uploading_file" /> ({state.percent}%) <Text id="app.main.channel.uploading_file" /> (
</Description> } {state.percent}%)
{ state.type === 'sending' && <Description> </Description>
<Share size={24} /> )}
Sending... {state.type === "sending" && (
</Description> } <Description>
{ state.type === 'failed' && <Description> <Share size={24} />
<X size={24} /> Sending...
<Text id={`error.${state.error}`} /> </Description>
</Description> } )}
{state.type === "failed" && (
<Description>
<X size={24} />
<Text id={`error.${state.error}`} />
</Description>
)}
</Container> </Container>
); );
} }
src/components/common/messaging/bars/JumpToBottom.tsx
View file @ 1ac5de17
import { Text } from "preact-i18n"; import { DownArrowAlt } from "@styled-icons/boxicons-regular";
import styled from "styled-components"; import styled from "styled-components";
import { ArrowDown } from "@styled-icons/feather";
import { SingletonMessageRenderer, useRenderState } from "../../../../lib/renderer/Singleton"; import { Text } from "preact-i18n";
import {
SingletonMessageRenderer,
useRenderState,
} from "../../../../lib/renderer/Singleton";
const Bar = styled.div` const Bar = styled.div`
z-index: 10; z-index: 10;
...@@ -9,18 +14,20 @@ const Bar = styled.div` ...@@ -9,18 +14,20 @@ const Bar = styled.div`
> div { > div {
top: -26px; top: -26px;
height: 28px;
width: 100%; width: 100%;
position: absolute; position: absolute;
border-radius: 4px 4px 0 0;
display: flex; display: flex;
align-items: center;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
padding: 4px 8px; padding: 0 8px;
user-select: none; user-select: none;
justify-content: space-between;
color: var(--secondary-foreground); color: var(--secondary-foreground);
transition: color ease-in-out 0.08s;
background: var(--secondary-background); background: var(--secondary-background);
justify-content: space-between; border-radius: var(--border-radius) var(--border-radius) 0 0;
transition: color ease-in-out .08s;
> div { > div {
display: flex; display: flex;
...@@ -35,19 +42,31 @@ const Bar = styled.div` ...@@ -35,19 +42,31 @@ const Bar = styled.div`
&:active { &:active {
transform: translateY(1px); transform: translateY(1px);
} }
@media (pointer: coarse) {
height: 34px;
top: -32px;
padding: 0 12px;
}
} }
`; `;
export default function JumpToBottom({ id }: { id: string }) { export default function JumpToBottom({ id }: { id: string }) {
const view = useRenderState(id); const view = useRenderState(id);
if (!view || view.type !== 'RENDER' || view.atBottom) return null; if (!view || view.type !== "RENDER" || view.atBottom) return null;
return ( return (
<Bar> <Bar>
<div onClick={() => SingletonMessageRenderer.jumpToBottom(id, true)}> <div
<div><Text id="app.main.channel.misc.viewing_old" /></div> onClick={() => SingletonMessageRenderer.jumpToBottom(id, true)}>
<div><Text id="app.main.channel.misc.jump_present" /> <ArrowDown size={18} strokeWidth={2}/></div> <div>
<Text id="app.main.channel.misc.viewing_old" />
</div>
<div>
<Text id="app.main.channel.misc.jump_present" />{" "}
<DownArrowAlt size={20} />
</div>
</div> </div>
</Bar> </Bar>
) );
} }
src/components/common/messaging/bars/ReplyBar.tsx 0 → 100644
View file @ 1ac5de17
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";
import { Text } from "preact-i18n";
import { StateUpdater, useEffect } from "preact/hooks";
import { internalSubscribe } from "../../../../lib/eventEmitter";
import { useRenderState } from "../../../../lib/renderer/Singleton";
import { Reply } from "../../../../redux/reducers/queue";
import IconButton from "../../../ui/IconButton";
import Markdown from "../../../markdown/Markdown";
import UserShort from "../../user/UserShort";
import { SystemMessage } from "../SystemMessage";
import { ReplyBase } from "../attachments/MessageReply";
interface Props {
channel: string;
replies: Reply[];
setReplies: StateUpdater<Reply[]>;
}
const Base = styled.div`
display: flex;
height: 30px;
padding: 0 12px;
user-select: none;
align-items: center;
background: var(--message-box);
> div {
flex-grow: 1;
margin-bottom: 0;
&::before {
display: none;
}
}
.toggle {
gap: 4px;
display: flex;
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 observer(({ channel, replies, setReplies }: Props) => {
useEffect(() => {
return internalSubscribe(
"ReplyBar",
"add",
(id) =>
replies.length < MAX_REPLIES &&
!replies.find((x) => x.id === id) &&
setReplies([...replies, { id: id as string, mention: false }]),
);
}, [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));
return (
<div>
{replies.map((reply, index) => {
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
// -> which then fetches any unknown messages
if (!message)
return (
<span>
<Text id="app.main.channel.misc.failed_load" />
</span>
);
return (
<Base key={reply.id}>
<ReplyBase preview>
<ReplyIcon size={22} />
<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_id === SYSTEM_USER_ID ? (
<SystemMessage message={message} />
) : (
<Markdown
disallowBigEmoji
content={(
message.content as string
).replace(/\n/g, " ")}
/>
)}
</div>
</ReplyBase>
<span class="actions">
<IconButton
onClick={() =>
setReplies(
replies.map((_, i) =>
i === index
? { ..._, mention: !_.mention }
: _,
),
)
}>
<span class="toggle">
<At size={16} />{" "}
{reply.mention ? "ON" : "OFF"}
</span>
</IconButton>
<IconButton
onClick={() =>
setReplies(
replies.filter((_, i) => i !== index),
)
}>
<XCircle size={16} />
</IconButton>
</span>
</Base>
);
})}
</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 { Text } from "preact-i18n";
import styled from 'styled-components';
import { useContext } from 'preact/hooks';
import { connectState } from '../../../../redux/connector';
import { useUsers } from '../../../../context/revoltjs/hooks';
import { TypingUser } from '../../../../redux/reducers/typing';
import { AppContext } from '../../../../context/revoltjs/RevoltClient';
interface Props { interface Props {
typing?: TypingUser[] channel: Channel;
} }
const Base = styled.div` const Base = styled.div`
...@@ -32,7 +30,7 @@ const Base = styled.div` ...@@ -32,7 +30,7 @@ const Base = styled.div`
.avatars { .avatars {
display: flex; display: flex;
img { img {
width: 16px; width: 16px;
height: 16px; height: 16px;
...@@ -54,25 +52,36 @@ const Base = styled.div` ...@@ -54,25 +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)) typeof x !== "undefined" &&
.filter(x => typeof x !== 'undefined') as User[]; x._id !== x.client.user!._id &&
x.relationship !== RelationshipStatus.Blocked,
);
users.sort((a, b) => a._id.toUpperCase().localeCompare(b._id.toUpperCase())); if (users.length > 0) {
users.sort((a, b) =>
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(", "),
}} }}
/> />
); );
...@@ -80,7 +89,7 @@ export function TypingIndicator({ typing }: Props) { ...@@ -80,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 }}
/> />
); );
} }
...@@ -89,9 +98,11 @@ export function TypingIndicator({ typing }: Props) { ...@@ -89,9 +98,11 @@ export function TypingIndicator({ typing }: Props) {
<Base> <Base>
<div> <div>
<div className="avatars"> <div className="avatars">
{users.map(user => ( {users.map((user) => (
<img <img
src={client.users.getAvatarURL(user._id, { max_side: 256 }, true)} key={user!._id}
loading="eager"
src={user!.generateAvatarURL({ max_side: 256 })}
/> />
))} ))}
</div> </div>
...@@ -102,10 +113,4 @@ export function TypingIndicator({ typing }: Props) { ...@@ -102,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,43 @@ ...@@ -91,7 +91,43 @@
img.image { img.image {
cursor: pointer; cursor: pointer;
object-fit: contain; object-fit: contain;
border-radius: 3px; border-radius: var(--border-radius);
} }
} }
} }
// TODO: unified actions css (see attachment.module.scss for other actions css)
.actions {
display: grid;
grid-template:
"name open" auto
"size open" auto
/ 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);
}
.openIcon {
grid-area: open;
}
}
src/components/common/messaging/embed/Embed.tsx
View file @ 1ac5de17
import classNames from 'classnames'; import { Embed as EmbedI } from "revolt-api/types/January";
import EmbedMedia from './EmbedMedia';
import styles from "./Embed.module.scss"; import styles from "./Embed.module.scss";
import { useContext } from 'preact/hooks'; import classNames from "classnames";
import { Embed as EmbedRJS } from "revolt.js/dist/api/objects"; import { useContext } from "preact/hooks";
import { useIntermediate } from '../../../../context/intermediate/Intermediate';
import { MessageAreaWidthContext } from '../../../../pages/channels/messaging/MessageArea'; 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 { interface Props {
embed: EmbedRJS; embed: EmbedI;
} }
const MAX_EMBED_WIDTH = 480; const MAX_EMBED_WIDTH = 480;
...@@ -16,78 +20,56 @@ const CONTAINER_PADDING = 24; ...@@ -16,78 +20,56 @@ 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(useContext(MessageAreaWidthContext) - CONTAINER_PADDING, MAX_EMBED_WIDTH); const maxWidth = Math.min(
useContext(MessageAreaWidthContext) - CONTAINER_PADDING,
MAX_EMBED_WIDTH,
);
function calculateSize(w: number, h: number): { width: number, height: number } { function calculateSize(
let limitingWidth = Math.min( w: number,
maxWidth, h: number,
w ): { width: number; height: number } {
); const limitingWidth = Math.min(maxWidth, w);
let limitingHeight = Math.min( const limitingHeight = Math.min(MAX_EMBED_HEIGHT, h);
MAX_EMBED_HEIGHT,
h
);
// Calculate smallest possible WxH. // Calculate smallest possible WxH.
let width = Math.min( const width = Math.min(limitingWidth, limitingHeight * (w / h));
limitingWidth,
limitingHeight * (w / h)
);
let height = Math.min( const height = Math.min(limitingHeight, limitingWidth * (h / w));
limitingHeight,
limitingWidth * (h / w)
);
return { width, height }; return { width, height };
} }
switch (embed.type) { switch (embed.type) {
case 'Website': { case "Website": {
// ! FIXME: move this to january
/*if (embed.url && YOUTUBE_RE.test(embed.url)) {
embed.color = '#FF424F';
}
if (embed.url && TWITCH_RE.test(embed.url)) {
embed.color = '#7B68EE';
}
if (embed.url && SPOTIFY_RE.test(embed.url)) {
embed.color = '#1ABC9C';
}
if (embed.url && SOUNDCLOUD_RE.test(embed.url)) {
embed.color = '#FF7F50';
}*/
// Determine special embed size. // Determine special embed size.
let mw, mh; let mw, mh;
let largeMedia = (embed.special && embed.special.type !== 'None') || embed.image?.size === 'Large'; const largeMedia =
(embed.special && embed.special.type !== "None") ||
embed.image?.size === "Large";
switch (embed.special?.type) { switch (embed.special?.type) {
case 'YouTube': case "YouTube":
case 'Bandcamp': { case "Bandcamp": {
mw = embed.video?.width ?? 1280; mw = embed.video?.width ?? 1280;
mh = embed.video?.height ?? 720; mh = embed.video?.height ?? 720;
break; break;
} }
case 'Twitch': { case "Twitch": {
mw = 1280; mw = 1280;
mh = 720; mh = 720;
break; break;
} }
default: { default: {
if (embed.image?.size === 'Preview') { if (embed.image?.size === "Preview") {
mw = MAX_EMBED_WIDTH; mw = MAX_EMBED_WIDTH;
mh = Math.min(embed.image.height ?? 0, MAX_PREVIEW_SIZE); mh = Math.min(
embed.image.height ?? 0,
MAX_PREVIEW_SIZE,
);
} else { } else {
mw = embed.image?.width ?? MAX_EMBED_WIDTH; mw = embed.image?.width ?? MAX_EMBED_WIDTH;
mh = embed.image?.height ?? 0; mh = embed.image?.height ?? 0;
...@@ -95,51 +77,91 @@ export default function Embed({ embed }: Props) { ...@@ -95,51 +77,91 @@ 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)}
style={{ style={{
borderInlineStartColor: embed.color ?? 'var(--tertiary-background)', borderInlineStartColor:
width: width + CONTAINER_PADDING embed.color ?? "var(--tertiary-background)",
width: width + CONTAINER_PADDING,
}}> }}>
<div> <div>
{ embed.site_name && <div className={styles.siteinfo}> {embed.site_name && (
{ embed.icon_url && <img className={styles.favicon} src={proxyImage(embed.icon_url)} draggable={false} onError={e => e.currentTarget.style.display = 'none'} /> } <div className={styles.siteinfo}>
<div className={styles.site}>{ embed.site_name } </div> {embed.icon_url && (
</div> } <img
loading="lazy"
className={styles.favicon}
src={client.proxyFile(embed.icon_url)}
draggable={false}
onError={(e) =>
(e.currentTarget.style.display =
"none")
}
/>
)}
<div className={styles.site}>
{embed.site_name}{" "}
</div>
</div>
)}
{/*<span><a href={embed.url} target={"_blank"} className={styles.author}>Author</a></span>*/} {/*<span><a href={embed.url} target={"_blank"} className={styles.author}>Author</a></span>*/}
{ embed.title && <span><a href={embed.url} target={"_blank"} className={styles.title}>{ embed.title }</a></span> } {embed.title && (
{ embed.description && <div className={styles.description}>{ embed.description }</div> } <span>
<a
{ largeMedia && <EmbedMedia embed={embed} height={height} /> } href={embed.url}
target={"_blank"}
className={styles.title}
rel="noreferrer">
{embed.title}
</a>
</span>
)}
{embed.description && (
<div className={styles.description}>
{embed.description}
</div>
)}
{largeMedia && (
<EmbedMedia embed={embed} height={height} />
)}
</div> </div>
{ {!largeMedia && (
!largeMedia && <div> <div>
<EmbedMedia embed={embed} width={height * ((embed.image?.width ?? 0) / (embed.image?.height ?? 0))} height={height} /> <EmbedMedia
embed={embed}
width={
height *
((embed.image?.width ?? 0) /
(embed.image?.height ?? 0))
}
height={height}
/>
</div> </div>
} )}
</div> </div>
) );
} }
case 'Image': { case "Image": {
return ( return (
<img className={classNames(styles.embed, styles.image)} <img
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"
onClick={() => loading="lazy"
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")
} }
/> />
) );
} }
default: return null; default:
return null;
} }
} }