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
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 2402 additions and 592 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 { Message as MessageObject } from "revolt.js/dist/maps/Messages";
import { attachContextMenu } from "preact-context-menu";
import { memo } from "preact/compat";
import { useState } from "preact/hooks";
import { QueuedMessage } from "../../../redux/reducers/queue";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import Overline from "../../ui/Overline";
import { Children } from "../../../types/Preact";
import Markdown from "../../markdown/Markdown";
import UserIcon from "../user/UserIcon"; import UserIcon from "../user/UserIcon";
import { Username } from "../user/UserShort"; import { Username } from "../user/UserShort";
import Markdown from "../../markdown/Markdown"; import MessageBase, {
import { Children } from "../../../types/Preact"; MessageContent,
MessageDetail,
MessageInfo,
} from "./MessageBase";
import Attachment from "./attachments/Attachment"; import Attachment from "./attachments/Attachment";
import { attachContextMenu } from "preact-context-menu"; import { MessageReply } from "./attachments/MessageReply";
import { useUser } from "../../../context/revoltjs/hooks"; import Embed from "./embed/Embed";
import { MessageObject } from "../../../context/revoltjs/util";
import MessageBase, { MessageContent, MessageDetail, MessageInfo } from "./MessageBase";
interface Props { interface Props {
attachContext?: boolean attachContext?: boolean;
message: MessageObject queued?: QueuedMessage;
contrast?: boolean message: MessageObject;
content?: Children highlight?: boolean;
head?: boolean contrast?: boolean;
content?: Children;
head?: boolean;
} }
export default function Message({ attachContext, message, contrast, content: replacement, head }: 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,
let user = useUser(message.author); attachContext,
message,
const content = message.content as string; contrast,
return ( content: replacement,
<MessageBase contrast={contrast} head: preferHead,
onContextMenu={attachContext ? attachContextMenu('Menu', { message, contextualChannel: message.channel }) : undefined}> queued,
<MessageInfo> }: Props) => {
{ head ? const client = useClient();
<UserIcon target={user} size={36} /> : const user = message.author;
<MessageDetail message={message} /> }
</MessageInfo> const { openScreen } = useIntermediate();
<MessageContent>
{ head && <Username user={user} /> } const content = message.content as string;
{ replacement ?? <Markdown content={content} /> } const head =
{ message.attachments?.map((attachment, index) => preferHead || (message.reply_ids && message.reply_ids.length > 0);
<Attachment key={index} attachment={attachment} hasContent={ index > 0 || content.length > 0 } />) }
{ message.embeds?.map((embed, index) => // ! TODO: tell fatal to make this type generic
<Embed key={index} embed={embed} />) } // bree: Fatal please...
</MessageContent> const userContext = attachContext
</MessageBase> ? (attachContextMenu("Menu", {
) user: message.author_id,
} contextualChannel: message.channel_id,
// eslint-disable-next-line
}) as any)
: undefined;
const openProfile = () =>
openScreen({ id: "profile", user_id: message.author_id });
// ! 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 styled, { css } from "styled-components"; import { Message } from "revolt.js/dist/maps/Messages";
import styled, { css, keyframes } from "styled-components";
import { decodeTime } from "ulid"; import { decodeTime } from "ulid";
import { MessageObject } from "../../../context/revoltjs/util";
import { Text } from "preact-i18n";
import { useDictionary } from "../../../lib/i18n";
import { dayjs } from "../../../context/Locale";
import Tooltip from "../Tooltip";
export interface BaseMessageProps { export interface BaseMessageProps {
head?: boolean, head?: boolean;
status?: 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.contrast &&
css`
padding: 0.3rem;
background: var(--hover);
border-radius: var(--border-radius);
`}
${(props) =>
props.head &&
css`
margin-top: 12px;
`}
${(props) =>
props.mention &&
css`
background: var(--mention);
`}
${(props) =>
props.blocked &&
css`
filter: blur(4px);
transition: 0.2s ease filter;
${ props => props.head && css` &:hover {
margin-top: 12px; filter: none;
` } }
`}
${ props => props.mention && css` ${(props) =>
background: var(--mention); props.sending &&
` } css`
opacity: 0.8;
color: var(--tertiary-foreground);
`}
${ props => props.blocked && css` ${(props) =>
filter: blur(4px); props.failed &&
transition: 0.2s ease filter; css`
color: var(--error);
`}
${(props) =>
props.highlight &&
css`
animation-name: ${highlight};
animation-timing-function: ease;
animation-duration: 3s;
`}
.detail {
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 { &:hover {
filter: none; text-decoration: underline;
} }
` } }
${ props => props.sending && css`
opacity: 0.8;
color: var(--tertiary-foreground);
` }
${ props => props.status && css`
color: var(--error);
` }
.copy { .copy {
width: 0; display: block;
opacity: 0; overflow: hidden;
} }
&:hover { &:hover {
...@@ -73,39 +135,125 @@ export const MessageInfo = styled.div` ...@@ -73,39 +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 function MessageDetail({ message }: { message: MessageObject }) { export const DetailBase = styled.div`
return ( flex-shrink: 0;
<> gap: 4px;
<time> font-size: 10px;
<i className="copy">[</i> display: inline-flex;
{dayjs(decodeTime(message._id)).format("H:mm")} color: var(--tertiary-foreground);
<i className="copy">]</i>
</time> .edited {
</> cursor: default;
) &::selection {
} background-color: transparent;
color: var(--tertiary-foreground);
}
}
`;
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,
)}
<i className="copyBracket">]</i>
</time>
</>
);
}
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, ShieldX } from "@styled-icons/boxicons-solid";
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 { ulid } from "ulid"; import { ulid } from "ulid";
import { Channel } from "revolt.js";
import TextArea from "../../ui/TextArea"; import { Text } from "preact-i18n";
import { useContext } from "preact/hooks"; 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 { useTranslation } from "../../../lib/i18n";
import { connectState } from "../../../redux/connector";
import { WithDispatcher } from "../../../redux/reducers";
import { takeError } from "../../../context/revoltjs/util";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { SingletonMessageRenderer, SMOOTH_SCROLL_ON_RECEIVE } from "../../../lib/renderer/Singleton"; import {
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 {
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 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;
}; };
function MessageBox({ channel, draft, dispatcher }: Props) { export type UploadState =
const client = useContext(AppContext); | { type: "none" }
| { type: "attached"; files: File[] }
| {
type: "uploading";
files: File[];
percent: number;
cancel: CancelTokenSource;
}
| { type: "sending"; files: File[] }
| { type: "failed"; files: File[]; error: string };
function setMessage(content?: string) { const Base = styled.div`
if (content) { display: flex;
dispatcher({ align-items: flex-start;
type: "SET_DRAFT", background: var(--message-box);
channel: channel._id,
content textarea {
}); font-size: var(--text-size);
} else { background: transparent;
dispatcher({
type: "CLEAR_DRAFT", &::placeholder {
channel: channel._id 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`
display: flex;
place-items: center;
> div {
height: 48px;
width: 48px;
padding: 12px;
}
.mobile {
@media (pointer: fine) {
display: none;
}
}
`;
// ! FIXME: add to app config and load from app config
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 [replies, setReplies] = useState<Reply[]>([]);
const playSound = useContext(SoundContext);
const { openScreen } = useIntermediate();
const client = useContext(AppContext);
const translate = useTranslation();
if (!(channel.permission & ChannelPermission.SendMessage)) {
return (
<Base>
<Blocked>
<Action>
<PermissionTooltip
permission="SendMessages"
placement="top">
<ShieldX size={22} />
</PermissionTooltip>
</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(() => {
function append(content: string, action: "quote" | "mention") {
const text =
action === "quote"
? `${content
.split("\n")
.map((x) => `> ${x}`)
.join("\n")}\n\n`
: `${content} `;
if (!draft || draft.length === 0) {
setMessage(text);
} else {
setMessage(`${draft}\n${text}`);
}
}
return internalSubscribe(
"MessageBox",
"append",
append as (...args: unknown[]) => void,
);
}, [draft, setMessage]);
async function send() { async function send() {
const nonce = ulid(); if (uploadState.type === "uploading" || uploadState.type === "sending")
return;
const content = draft?.trim() ?? ''; const content = draft?.trim() ?? "";
if (uploadState.type === "attached") return sendFile(content);
if (content.length === 0) return; if (content.length === 0) return;
stopTyping();
setMessage(); setMessage();
dispatcher({ setReplies([]);
playSound("outbound");
const nonce = ulid();
dispatch({
type: "QUEUE_ADD", type: "QUEUE_ADD",
nonce, nonce,
channel: channel._id, channel: channel._id,
...@@ -50,47 +207,313 @@ function MessageBox({ channel, draft, dispatcher }: Props) { ...@@ -50,47 +207,313 @@ 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(() =>
// Sounds.playOutbound(); 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) {
if (uploadState.type !== "attached") return;
const attachments: string[] = [];
const cancel = Axios.CancelToken.source();
const files = uploadState.files;
stopTyping();
setUploadState({ type: "uploading", files, percent: 0, cancel });
try {
for (let i = 0; i < files.length && i < CAN_UPLOAD_AT_ONCE; i++) {
const file = files[i];
attachments.push(
await uploadFile(
client.configuration!.features.autumn.url,
"attachments",
file,
{
onUploadProgress: (e) =>
setUploadState({
type: "uploading",
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) {
if (err?.message === "cancel") {
setUploadState({
type: "attached",
files,
});
} else {
setUploadState({
type: "failed",
files,
error: takeError(err),
});
}
return;
}
setUploadState({
type: "sending",
files,
});
const nonce = ulid();
try {
await channel.sendMessage({
content,
nonce,
replies,
attachments,
});
} catch (err) {
setUploadState({
type: "failed",
files,
error: takeError(err),
});
return;
}
setMessage();
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() {
if (typeof typing === "number" && +new Date() < typing) return;
const ws = client.websocket;
if (ws.connected) {
setTyping(+new Date() + 2500);
ws.send({
type: "BeginTyping",
channel: channel._id,
}); });
} }
} }
function stopTyping(force?: boolean) {
if (force || typing) {
const ws = client.websocket;
if (ws.connected) {
setTyping(false);
ws.send({
type: "EndTyping",
channel: channel._id,
});
}
}
}
// eslint-disable-next-line
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 (
<div style={{ display: 'flex' }}> <>
<TextArea <AutoComplete {...autoCompleteProps} />
value={draft} <FilePreview
onKeyDown={e => { state={uploadState}
if (!e.shiftKey && e.key === "Enter" && !isTouchscreenDevice) { addFile={() =>
e.preventDefault(); uploadState.type === "attached" &&
return send(); 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) {
setUploadState({ type: "none" });
} else {
setUploadState({
type: "attached",
files: uploadState.files.filter(
(_, i) => index !== i,
),
});
} }
}} }}
onChange={e => setMessage(e.currentTarget.value)} /> />
<IconButton onClick={send}> <ReplyBar
<Send size={20} /> channel={channel._id}
</IconButton> replies={replies}
</div> setReplies={setReplies}
) />
} <Base>
{channel.permission & ChannelPermission.UploadFiles ? (
export default connectState<Omit<Props, "dispatcher" | "draft">>(MessageBox, (state, { channel }) => { <Action>
return { <FileUploader
draft: state.drafts[channel._id] size={24}
} behaviour="multi"
}, true) style="attachment"
fileType="attachments"
maxFileSize={20_000_000}
attached={uploadState.type !== "none"}
uploading={
uploadState.type === "uploading" ||
uploadState.type === "sending"
}
remove={async () =>
setUploadState({ type: "none" })
}
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
autoFocus
hideBorder
maxRows={20}
id="message"
onKeyUp={onKeyUp}
value={draft ?? ""}
padding="var(--message-box-padding)"
onKeyDown={(e) => {
if (onKeyDown(e)) return;
if (
e.key === "ArrowUp" &&
(!draft || draft.length === 0)
) {
e.preventDefault();
internalEmit("MessageRenderer", "edit_last");
return;
}
if (
!e.shiftKey &&
e.key === "Enter" &&
!isTouchscreenDevice
) {
e.preventDefault();
return send();
}
debouncedStopTyping(true);
}}
placeholder={
channel.channel_type === "DirectMessage"
? translate("app.main.channel.message_who", {
person: channel.recipient?.username,
})
: 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"
}
onChange={(e) => {
setMessage(e.currentTarget.value);
startTyping();
onChange(e);
}}
onFocus={onFocus}
onBlur={onBlur}
/>
<Action>
{/*<IconButton onClick={emojiPicker}>
<HappyAlt size={20} />
</IconButton>*/}
<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 classNames from "classnames"; 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 { attachContextMenu } from "preact-context-menu";
import { MessageObject } from "../../../context/revoltjs/util";
import { useForceUpdate, useUser } from "../../../context/revoltjs/hooks";
import { TextReact } from "../../../lib/i18n"; import { TextReact } from "../../../lib/i18n";
import UserIcon from "../user/UserIcon";
import Username from "../user/UserShort"; import { useClient } from "../../../context/revoltjs/RevoltClient";
import UserShort from "../user/UserShort"; import UserShort from "../user/UserShort";
import MessageBase, { MessageDetail, MessageInfo } from "./MessageBase"; import MessageBase, { MessageDetail, MessageInfo } from "./MessageBase";
import styled from "styled-components";
const SystemContent = styled.div` const SystemContent = styled.div`
gap: 4px; gap: 4px;
...@@ -33,120 +35,136 @@ type SystemMessageParsed = ...@@ -33,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; return (
switch (data.type) { <MessageBase
case "text": highlight={highlight}
children = <span>{data.content}</span>; onContextMenu={
break; attachContext
case "user_added": ? attachContextMenu("Menu", {
case "user_remove": message,
children = ( contextualChannel: message.channel,
<TextReact })
id={`app.main.channel.system.${data.type === 'user_added' ? "added_by" : "removed_by"}`} : undefined
fields={{ }>
user: <UserShort user={data.user} />, {!hideInfo && (
other_user: <UserShort user={data.by} /> <MessageInfo>
}} <MessageDetail message={message} position="left" />
/> </MessageInfo>
); )}
break; <SystemContent>{children}</SystemContent>
case "user_joined": </MessageBase>
case "user_left": );
case "user_kicked": },
case "user_banned": );
children = (
<TextReact
id={`app.main.channel.system.${data.type}`}
fields={{
user: <UserShort user={data.user} />
}}
/>
);
break;
case "channel_renamed":
children = (
<TextReact
id={`app.main.channel.system.channel_renamed`}
fields={{
user: <UserShort user={data.by} />,
name: <b>{data.name}</b>
}}
/>
);
break;
case "channel_description_changed":
case "channel_icon_changed":
children = (
<TextReact
id={`app.main.channel.system.${data.type}`}
fields={{
user: <UserShort user={data.by} />
}}
/>
);
break;
}
return (
<MessageBase
onContextMenu={attachContext ? attachContextMenu('Menu',
{ message, contextualChannel: message.channel }
) : undefined}>
<MessageInfo>
<MessageDetail message={message} />
</MessageInfo>
<SystemContent>{children}</SystemContent>
</MessageBase>
);
}
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/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
This diff is collapsed.
src/components/common/messaging/attachments/Spoiler.tsx 0 → 100644
View file @ 1ac5de17
This diff is collapsed.
src/components/common/messaging/bars/FilePreview.tsx 0 → 100644
View file @ 1ac5de17
This diff is collapsed.
src/components/common/messaging/bars/JumpToBottom.tsx 0 → 100644
View file @ 1ac5de17
This diff is collapsed.
src/components/common/messaging/bars/ReplyBar.tsx 0 → 100644
View file @ 1ac5de17
This diff is collapsed.
src/components/common/messaging/bars/TypingIndicator.tsx 0 → 100644
View file @ 1ac5de17
This diff is collapsed.