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 2248 additions and 375 deletions
src/components/common/AgeGate.tsx 0 → 100644
View file @ 1ac5de17
import { observer } from "mobx-react-lite";
import { useHistory } from "react-router-dom";
import { Channel } from "revolt.js/dist/maps/Channels";
import styled from "styled-components";
import { Text } from "preact-i18n";
import { useState } from "preact/hooks";
import { dispatch, getState } from "../../redux";
import Button from "../ui/Button";
import Checkbox from "../ui/Checkbox";
import { Children } from "../../types/Preact";
const Base = styled.div`
display: flex;
flex-grow: 1;
flex-direction: column;
align-items: center;
justify-content: center;
user-select: none;
padding: 12px;
img {
height: 150px;
}
.subtext {
color: var(--secondary-foreground);
margin-bottom: 12px;
font-size: 14px;
}
.actions {
margin-top: 20px;
display: flex;
gap: 12px;
}
`;
type Props = {
gated: boolean;
children: Children;
} & {
type: "channel";
channel: Channel;
};
export default observer((props: Props) => {
const history = useHistory();
const [consent, setConsent] = useState(
getState().sectionToggle["nsfw"] ?? false,
);
const [ageGate, setAgeGate] = useState(false);
if (ageGate || !props.gated) {
return <>{props.children}</>;
}
if (
!(
props.channel.channel_type === "Group" ||
props.channel.channel_type === "TextChannel"
)
)
return <>{props.children}</>;
return (
<Base>
<img
loading="eager"
src={"https://static.revolt.chat/emoji/mutant/26a0.svg"}
draggable={false}
/>
<h2>{props.channel.name}</h2>
<span className="subtext">
<Text id={`app.main.channel.nsfw.${props.type}.marked`} />{" "}
<a href="#">
<Text id={`app.main.channel.nsfw.learn_more`} />
</a>
</span>
<Checkbox
checked={consent}
onChange={(v) => {
setConsent(v);
if (v) {
dispatch({
type: "SECTION_TOGGLE_SET",
id: "nsfw",
state: true,
});
} else {
dispatch({ type: "SECTION_TOGGLE_UNSET", id: "nsfw" });
}
}}>
<Text id="app.main.channel.nsfw.confirm" />
</Checkbox>
<div className="actions">
<Button contrast onClick={() => history.goBack()}>
<Text id="app.special.modals.actions.back" />
</Button>
<Button contrast onClick={() => consent && setAgeGate(true)}>
<Text id={`app.main.channel.nsfw.${props.type}.confirm`} />
</Button>
</div>
</Base>
);
});
src/components/common/AutoComplete.tsx 0 → 100644
View file @ 1ac5de17
import { SYSTEM_USER_ID } from "revolt.js";
import { Channel } from "revolt.js/dist/maps/Channels";
import { User } from "revolt.js/dist/maps/Users";
import styled, { css } from "styled-components";
import { StateUpdater, useState } from "preact/hooks";
import { useClient } from "../../context/revoltjs/RevoltClient";
import { emojiDictionary } from "../../assets/emojis";
import ChannelIcon from "./ChannelIcon";
import Emoji from "./Emoji";
import UserIcon from "./user/UserIcon";
export type AutoCompleteState =
| { type: "none" }
| ({ selected: number; within: boolean } & (
| {
type: "emoji";
matches: string[];
}
| {
type: "user";
matches: User[];
}
| {
type: "channel";
matches: Channel[];
}
));
export type SearchClues = {
users?: { type: "channel"; id: string } | { type: "all" };
channels?: { server: string };
};
export type AutoCompleteProps = {
detached?: boolean;
state: AutoCompleteState;
setState: StateUpdater<AutoCompleteState>;
onKeyUp: (ev: KeyboardEvent) => void;
onKeyDown: (ev: KeyboardEvent) => boolean;
onChange: (ev: JSX.TargetedEvent<HTMLTextAreaElement, Event>) => void;
onClick: JSX.MouseEventHandler<HTMLButtonElement>;
onFocus: JSX.FocusEventHandler<HTMLTextAreaElement>;
onBlur: JSX.FocusEventHandler<HTMLTextAreaElement>;
};
export function useAutoComplete(
setValue: (v?: string) => void,
searchClues?: SearchClues,
): AutoCompleteProps {
const [state, setState] = useState<AutoCompleteState>({ type: "none" });
const [focused, setFocused] = useState(false);
const client = useClient();
function findSearchString(
el: HTMLTextAreaElement,
): ["emoji" | "user" | "channel", string, number] | undefined {
if (el.selectionStart === el.selectionEnd) {
const cursor = el.selectionStart;
const content = el.value.slice(0, cursor);
const valid = /\w/;
let j = content.length - 1;
if (content[j] === "@") {
return ["user", "", j];
} else if (content[j] === "#") {
return ["channel", "", j];
}
while (j >= 0 && valid.test(content[j])) {
j--;
}
if (j === -1) return;
const current = content[j];
if (current === ":" || current === "@" || current === "#") {
const search = content.slice(j + 1, content.length);
if (search.length > 0) {
return [
current === "#"
? "channel"
: current === ":"
? "emoji"
: "user",
search.toLowerCase(),
j + 1,
];
}
}
}
}
function onChange(ev: JSX.TargetedEvent<HTMLTextAreaElement, Event>) {
const el = ev.currentTarget;
const result = findSearchString(el);
if (result) {
const [type, search] = result;
const regex = new RegExp(search, "i");
if (type === "emoji") {
// ! TODO: we should convert it to a Binary Search Tree and use that
const matches = Object.keys(emojiDictionary)
.filter((emoji: string) => emoji.match(regex))
.splice(0, 5);
if (matches.length > 0) {
const currentPosition =
state.type !== "none" ? state.selected : 0;
setState({
type: "emoji",
matches,
selected: Math.min(currentPosition, matches.length - 1),
within: false,
});
return;
}
}
if (type === "user" && searchClues?.users) {
let users: User[] = [];
switch (searchClues.users.type) {
case "all":
users = [...client.users.values()];
break;
case "channel": {
const channel = client.channels.get(
searchClues.users.id,
);
switch (channel?.channel_type) {
case "Group":
case "DirectMessage":
users = channel.recipients!.filter(
(x) => typeof x !== "undefined",
) as User[];
break;
case "TextChannel":
{
const server = channel.server_id;
users = [...client.members.keys()]
.map((x) => JSON.parse(x))
.filter((x) => x.server === server)
.map((x) => client.users.get(x.user))
.filter(
(x) => typeof x !== "undefined",
) as User[];
}
break;
default:
return;
}
}
}
users = users.filter((x) => x._id !== SYSTEM_USER_ID);
const matches = (
search.length > 0
? users.filter((user) =>
user.username.toLowerCase().match(regex),
)
: users
)
.splice(0, 5)
.filter((x) => typeof x !== "undefined");
if (matches.length > 0) {
const currentPosition =
state.type !== "none" ? state.selected : 0;
setState({
type: "user",
matches,
selected: Math.min(currentPosition, matches.length - 1),
within: false,
});
return;
}
}
if (type === "channel" && searchClues?.channels) {
const channels = client.servers
.get(searchClues.channels.server)
?.channels.filter(
(x) => typeof x !== "undefined",
) as Channel[];
const matches = (
search.length > 0
? channels.filter((channel) =>
channel.name!.toLowerCase().match(regex),
)
: channels
)
.splice(0, 5)
.filter((x) => typeof x !== "undefined");
if (matches.length > 0) {
const currentPosition =
state.type !== "none" ? state.selected : 0;
setState({
type: "channel",
matches,
selected: Math.min(currentPosition, matches.length - 1),
within: false,
});
return;
}
}
}
if (state.type !== "none") {
setState({ type: "none" });
}
}
function selectCurrent(el: HTMLTextAreaElement) {
if (state.type !== "none") {
const result = findSearchString(el);
if (result) {
const [_type, search, index] = result;
const content = el.value.split("");
if (state.type === "emoji") {
content.splice(
index,
search.length,
state.matches[state.selected],
": ",
);
} else if (state.type === "user") {
content.splice(
index - 1,
search.length + 1,
"<@",
state.matches[state.selected]._id,
"> ",
);
} else {
content.splice(
index - 1,
search.length + 1,
"<#",
state.matches[state.selected]._id,
"> ",
);
}
setValue(content.join(""));
}
}
}
function onClick(ev: JSX.TargetedMouseEvent<HTMLButtonElement>) {
ev.preventDefault();
selectCurrent(document.querySelector("#message")!);
}
function onKeyDown(e: KeyboardEvent) {
if (focused && state.type !== "none") {
if (e.key === "ArrowUp") {
e.preventDefault();
if (state.selected > 0) {
setState({
...state,
selected: state.selected - 1,
});
}
return true;
}
if (e.key === "ArrowDown") {
e.preventDefault();
if (state.selected < state.matches.length - 1) {
setState({
...state,
selected: state.selected + 1,
});
}
return true;
}
if (e.key === "Enter" || e.key === "Tab") {
e.preventDefault();
selectCurrent(e.currentTarget as HTMLTextAreaElement);
return true;
}
}
return false;
}
function onKeyUp(e: KeyboardEvent) {
if (e.currentTarget !== null) {
// @ts-expect-error Type mis-match.
onChange(e);
}
}
function onFocus(ev: JSX.TargetedFocusEvent<HTMLTextAreaElement>) {
setFocused(true);
onChange(ev);
}
function onBlur() {
if (state.type !== "none" && state.within) return;
setFocused(false);
}
return {
state: focused ? state : { type: "none" },
setState,
onClick,
onChange,
onKeyUp,
onKeyDown,
onFocus,
onBlur,
};
}
const Base = styled.div<{ detached?: boolean }>`
position: relative;
> div {
bottom: 0;
width: 100%;
position: absolute;
background: var(--primary-header);
}
button {
gap: 8px;
margin: 4px;
padding: 6px;
border: none;
display: flex;
font-size: 1em;
cursor: pointer;
align-items: center;
flex-direction: row;
font-family: inherit;
background: transparent;
color: var(--foreground);
width: calc(100% - 12px);
border-radius: var(--border-radius);
span {
display: grid;
place-items: center;
}
&.active {
background: var(--primary-background);
}
}
${(props) =>
props.detached &&
css`
bottom: 8px;
> div {
border-radius: var(--border-radius);
}
`}
`;
export default function AutoComplete({
detached,
state,
setState,
onClick,
}: Pick<AutoCompleteProps, "detached" | "state" | "setState" | "onClick">) {
return (
<Base detached={detached}>
<div>
{state.type === "emoji" &&
state.matches.map((match, i) => (
<button
key={match}
className={i === state.selected ? "active" : ""}
onMouseEnter={() =>
(i !== state.selected || !state.within) &&
setState({
...state,
selected: i,
within: true,
})
}
onMouseLeave={() =>
state.within &&
setState({
...state,
within: false,
})
}
onClick={onClick}>
<Emoji
emoji={
(emojiDictionary as Record<string, string>)[
match
]
}
size={20}
/>
:{match}:
</button>
))}
{state.type === "user" &&
state.matches.map((match, i) => (
<button
key={match}
className={i === state.selected ? "active" : ""}
onMouseEnter={() =>
(i !== state.selected || !state.within) &&
setState({
...state,
selected: i,
within: true,
})
}
onMouseLeave={() =>
state.within &&
setState({
...state,
within: false,
})
}
onClick={onClick}>
<UserIcon size={24} target={match} status={true} />
{match.username}
</button>
))}
{state.type === "channel" &&
state.matches.map((match, i) => (
<button
key={match}
className={i === state.selected ? "active" : ""}
onMouseEnter={() =>
(i !== state.selected || !state.within) &&
setState({
...state,
selected: i,
within: true,
})
}
onMouseLeave={() =>
state.within &&
setState({
...state,
within: false,
})
}
onClick={onClick}>
<ChannelIcon size={24} target={match} />
{match.name}
</button>
))}
</div>
</Base>
);
}
src/components/common/ChannelIcon.tsx
View file @ 1ac5de17
import { Hash, VolumeFull } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite";
import { Channel } from "revolt.js/dist/maps/Channels";
import { useContext } from "preact/hooks"; import { useContext } from "preact/hooks";
import { Hash } from "@styled-icons/feather";
import { Channels } from "revolt.js/dist/api/objects";
import { ImageIconBase, IconBaseProps } from "./IconBase";
import { AppContext } from "../../context/revoltjs/RevoltClient"; import { AppContext } from "../../context/revoltjs/RevoltClient";
interface Props extends IconBaseProps<Channels.GroupChannel | Channels.TextChannel> { import { ImageIconBase, IconBaseProps } from "./IconBase";
import fallback from "./assets/group.png";
interface Props extends IconBaseProps<Channel> {
isServerChannel?: boolean; isServerChannel?: boolean;
} }
import fallback from './assets/group.png'; export default observer(
(
export default function ChannelIcon(props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>) { props: Props &
const client = useContext(AppContext); Omit<
JSX.HTMLAttributes<HTMLImageElement>,
keyof Props | "children" | "as"
>,
) => {
const client = useContext(AppContext);
const { size, target, attachment, isServerChannel: server, animate, children, as, ...imgProps } = props; const {
const iconURL = client.generateFileURL(target?.icon ?? attachment, { max_side: 256 }, animate); size,
const isServerChannel = server || target?.channel_type === 'TextChannel'; target,
attachment,
isServerChannel: server,
animate,
...imgProps
} = props;
const iconURL = client.generateFileURL(
target?.icon ?? attachment,
{ max_side: 256 },
animate,
);
const isServerChannel =
server ||
(target &&
(target.channel_type === "TextChannel" ||
target.channel_type === "VoiceChannel"));
if (typeof iconURL === 'undefined') { if (typeof iconURL === "undefined") {
if (isServerChannel) { if (isServerChannel) {
return ( if (target?.channel_type === "VoiceChannel") {
<Hash size={size} /> return <VolumeFull size={size} />;
) }
return <Hash size={size} />;
}
} }
}
return (
return ( // ! TODO: replace fallback with <picture /> + <source />
// ! fixme: replace fallback with <picture /> + <source /> <ImageIconBase
<ImageIconBase {...imgProps} {...imgProps}
width={size} width={size}
height={size} height={size}
aria-hidden="true" loading="lazy"
square={isServerChannel} aria-hidden="true"
src={iconURL ?? fallback} /> square={isServerChannel}
); src={iconURL ?? fallback}
} />
);
},
);
src/components/common/CollapsibleSection.tsx 0 → 100644
View file @ 1ac5de17
import { ChevronDown } from "@styled-icons/boxicons-regular";
import { State, store } from "../../redux";
import { Action } from "../../redux/reducers";
import Details from "../ui/Details";
import { Children } from "../../types/Preact";
interface Props {
id: string;
defaultValue: boolean;
sticky?: boolean;
large?: boolean;
summary: Children;
children: Children;
}
export default function CollapsibleSection({
id,
defaultValue,
summary,
children,
...detailsProps
}: Props) {
const state: State = store.getState();
function setState(state: boolean) {
if (state === defaultValue) {
store.dispatch({
type: "SECTION_TOGGLE_UNSET",
id,
} as Action);
} else {
store.dispatch({
type: "SECTION_TOGGLE_SET",
id,
state,
} as Action);
}
}
return (
<Details
open={state.sectionToggle[id] ?? defaultValue}
onToggle={(e) => setState(e.currentTarget.open)}
{...detailsProps}>
<summary>
<div class="padding">
<ChevronDown size={20} />
{summary}
</div>
</summary>
{children}
</Details>
);
}
src/components/common/Emoji.tsx 0 → 100644
View file @ 1ac5de17
import { EmojiPacks } from "../../redux/reducers/settings";
let EMOJI_PACK = "mutant";
const REVISION = 3;
export function setEmojiPack(pack: EmojiPacks) {
EMOJI_PACK = pack;
}
// Originally taken from Twemoji source code,
// re-written by bree to be more readable.
function codePoints(rune: string) {
const pairs = [];
let low = 0;
let i = 0;
while (i < rune.length) {
const charCode = rune.charCodeAt(i++);
if (low) {
pairs.push(0x10000 + ((low - 0xd800) << 10) + (charCode - 0xdc00));
low = 0;
} else if (0xd800 <= charCode && charCode <= 0xdbff) {
low = charCode;
} else {
pairs.push(charCode);
}
}
return pairs;
}
// Taken from Twemoji source code.
// scripts/build.js#344
// grabTheRightIcon(rawText);
const UFE0Fg = /\uFE0F/g;
const U200D = String.fromCharCode(0x200d);
function toCodePoint(rune: string) {
return codePoints(rune.indexOf(U200D) < 0 ? rune.replace(UFE0Fg, "") : rune)
.map((val) => val.toString(16))
.join("-");
}
function parseEmoji(emoji: string) {
const codepoint = toCodePoint(emoji);
return `https://static.revolt.chat/emoji/${EMOJI_PACK}/${codepoint}.svg?rev=${REVISION}`;
}
export default function Emoji({
emoji,
size,
}: {
emoji: string;
size?: number;
}) {
return (
<img
alt={emoji}
loading="lazy"
className="emoji"
draggable={false}
src={parseEmoji(emoji)}
style={
size ? { width: `${size}px`, height: `${size}px` } : undefined
}
/>
);
}
export function generateEmoji(emoji: string) {
return `<img loading="lazy" class="emoji" draggable="false" alt="${emoji}" src="${parseEmoji(
emoji,
)}" />`;
}
src/components/common/IconBase.tsx
View file @ 1ac5de17
import { Attachment } from "revolt.js/dist/api/objects"; import { Attachment } from "revolt-api/types/Autumn";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
export interface IconBaseProps<T> { export interface IconBaseProps<T> {
...@@ -6,29 +6,54 @@ export interface IconBaseProps<T> { ...@@ -6,29 +6,54 @@ export interface IconBaseProps<T> {
attachment?: Attachment; attachment?: Attachment;
size: number; size: number;
hover?: boolean;
animate?: boolean; animate?: boolean;
} }
interface IconModifiers { interface IconModifiers {
square?: boolean square?: boolean;
hover?: boolean;
} }
export default styled.svg<IconModifiers>` export default styled.svg<IconModifiers>`
flex-shrink: 0;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
${ props => !props.square && css` ${(props) =>
border-radius: 50%; !props.square &&
` } css`
border-radius: 50%;
`}
} }
${(props) =>
props.hover &&
css`
&:hover .icon {
filter: brightness(0.8);
}
`}
`; `;
export const ImageIconBase = styled.img<IconModifiers>` export const ImageIconBase = styled.img<IconModifiers>`
flex-shrink: 0;
object-fit: cover; object-fit: cover;
${ props => !props.square && css` ${(props) =>
border-radius: 50%; !props.square &&
` } css`
border-radius: 50%;
`}
${(props) =>
props.hover &&
css`
&:hover img {
filter: brightness(0.8);
}
`}
`; `;
src/components/common/LocaleSelector.tsx 0 → 100644
View file @ 1ac5de17
import { dispatch } from "../../redux";
import { connectState } from "../../redux/connector";
import { Language, Languages } from "../../context/Locale";
import ComboBox from "../ui/ComboBox";
type Props = {
locale: string;
};
export function LocaleSelector(props: Props) {
return (
<ComboBox
value={props.locale}
onChange={(e) =>
dispatch({
type: "SET_LOCALE",
locale: e.currentTarget.value as Language,
})
}>
{Object.keys(Languages).map((x) => {
const l = Languages[x as keyof typeof Languages];
return (
<option value={x} key={x}>
{l.emoji} {l.display}
</option>
);
})}
</ComboBox>
);
}
export default connectState(LocaleSelector, (state) => {
return {
locale: state.locale,
};
});
src/components/common/ServerHeader.tsx 0 → 100644
View file @ 1ac5de17
import { Cog } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Link } from "react-router-dom";
import { ServerPermission } from "revolt.js/dist/api/permissions";
import { Server } from "revolt.js/dist/maps/Servers";
import styled from "styled-components";
import Header from "../ui/Header";
import IconButton from "../ui/IconButton";
interface Props {
server: Server;
}
const ServerName = styled.div`
flex-grow: 1;
`;
export default observer(({ server }: Props) => {
const bannerURL = server.generateBannerURL({ width: 480 });
return (
<Header
borders
placement="secondary"
background={typeof bannerURL !== "undefined"}
style={{
background: bannerURL ? `url('${bannerURL}')` : undefined,
}}>
<ServerName>{server.name}</ServerName>
{(server.permission & ServerPermission.ManageServer) > 0 && (
<div className="actions">
<Link to={`/server/${server._id}/settings`}>
<IconButton>
<Cog size={24} />
</IconButton>
</Link>
</div>
)}
</Header>
);
});
src/components/common/ServerIcon.tsx
View file @ 1ac5de17
import { observer } from "mobx-react-lite";
import { Server } from "revolt.js/dist/maps/Servers";
import styled from "styled-components"; import styled from "styled-components";
import { useContext } from "preact/hooks"; import { useContext } from "preact/hooks";
import { Server } from "revolt.js/dist/api/objects";
import { IconBaseProps, ImageIconBase } from "./IconBase";
import { AppContext } from "../../context/revoltjs/RevoltClient"; import { AppContext } from "../../context/revoltjs/RevoltClient";
import { IconBaseProps, ImageIconBase } from "./IconBase";
interface Props extends IconBaseProps<Server> { interface Props extends IconBaseProps<Server> {
server_name?: string; server_name?: string;
} }
const ServerText = styled.div` const ServerText = styled.div`
display: grid; display: grid;
padding: .2em; padding: 0.2em;
overflow: hidden; overflow: hidden;
border-radius: 50%; border-radius: 50%;
place-items: center; place-items: center;
...@@ -18,30 +22,47 @@ const ServerText = styled.div` ...@@ -18,30 +22,47 @@ const ServerText = styled.div`
background: var(--primary-background); background: var(--primary-background);
`; `;
const fallback = '/assets/group.png'; // const fallback = "/assets/group.png";
export default function ServerIcon(props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>) { export default observer(
const client = useContext(AppContext); (
props: Props &
Omit<
JSX.HTMLAttributes<HTMLImageElement>,
keyof Props | "children" | "as"
>,
) => {
const client = useContext(AppContext);
const { target, attachment, size, animate, server_name, ...imgProps } =
props;
const iconURL = client.generateFileURL(
target?.icon ?? attachment,
{ max_side: 256 },
animate,
);
const { target, attachment, size, animate, server_name, children, as, ...imgProps } = props; if (typeof iconURL === "undefined") {
const iconURL = client.generateFileURL(target?.icon ?? attachment, { max_side: 256 }, animate); const name = target?.name ?? server_name ?? "";
if (typeof iconURL === 'undefined') { return (
const name = target?.name ?? server_name ?? ''; <ServerText style={{ width: size, height: size }}>
{name
.split(" ")
.map((x) => x[0])
.filter((x) => typeof x !== "undefined")}
</ServerText>
);
}
return ( return (
<ServerText style={{ width: size, height: size }}> <ImageIconBase
{ name.split(' ') {...imgProps}
.map(x => x[0]) width={size}
.filter(x => typeof x !== 'undefined') } height={size}
</ServerText> src={iconURL}
) loading="lazy"
} aria-hidden="true"
/>
return ( );
<ImageIconBase {...imgProps} },
width={size} );
height={size}
aria-hidden="true"
src={iconURL} />
);
}
src/components/common/Tooltip.tsx
View file @ 1ac5de17
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/UserIcon.tsx deleted 100644 → 0
View file @ b8fba749
import { User } from "revolt.js";
import { useContext } from "preact/hooks";
import { MicOff } from "@styled-icons/feather";
import styled, { css } from "styled-components";
import { ThemeContext } from "../../context/Theme";
import { Users } from "revolt.js/dist/api/objects";
import IconBase, { IconBaseProps } from "./IconBase";
import { AppContext } from "../../context/revoltjs/RevoltClient";
type VoiceStatus = "muted";
interface Props extends IconBaseProps<User> {
status?: boolean;
voice?: VoiceStatus;
}
export function useStatusColour(user?: User) {
const theme = useContext(ThemeContext);
return (
user?.online &&
user?.status?.presence !== Users.Presence.Invisible
? user?.status?.presence === Users.Presence.Idle
? theme["status-away"]
: user?.status?.presence ===
Users.Presence.Busy
? theme["status-busy"]
: theme["status-online"]
: theme["status-invisible"]
);
}
const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
width: 10px;
height: 10px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
svg {
stroke: white;
}
${ props => props.status === 'muted' && css`
background: var(--error);
` }
`;
import fallback from './assets/user.png';
export default function UserIcon(props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>) {
const client = useContext(AppContext);
const { target, attachment, size, voice, status, animate, children, as, ...svgProps } = props;
const iconURL = client.generateFileURL(target?.avatar ?? attachment, { max_side: 256 }, animate)
?? (target ? client.users.getDefaultAvatarURL(target._id) : fallback);
return (
<IconBase {...svgProps}
width={size}
height={size}
aria-hidden="true"
viewBox="0 0 32 32">
<foreignObject x="0" y="0" width="32" height="32">
{
<img src={iconURL}
draggable={false} />
}
</foreignObject>
{props.status && (
<circle
cx="27"
cy="27"
r="5"
fill={useStatusColour(target)}
/>
)}
{props.voice && (
<foreignObject
x="22"
y="22"
width="10"
height="10">
<VoiceIndicator status={props.voice}>
{props.voice === "muted" && <MicOff size={6} />}
</VoiceIndicator>
</foreignObject>
)}
</IconBase>
);
}
src/components/common/UserShort.tsx deleted 100644 → 0
View file @ b8fba749
import { User } from "revolt.js";
import UserIcon from "./UserIcon";
import { Text } from "preact-i18n";
export function Username({ user }: { user?: User }) {
return <b>{ user?.username ?? <Text id="app.main.channel.unknown_user" /> }</b>;
}
export default function UserShort({ user }: { user?: User }) {
return <>
<UserIcon size={24} target={user} />
<Username user={user} />
</>;
}
src/components/common/messaging/Message.tsx
View file @ 1ac5de17
import UserIcon from "../UserIcon"; import { observer } from "mobx-react-lite";
import { Username } from "../UserShort"; import { Message as MessageObject } from "revolt.js/dist/maps/Messages";
import Markdown from "../../markdown/Markdown";
import { Children } from "../../../types/Preact";
import { attachContextMenu } from "preact-context-menu"; import { attachContextMenu } from "preact-context-menu";
import { useUser } from "../../../context/revoltjs/hooks"; import { memo } from "preact/compat";
import { MessageObject } from "../../../context/revoltjs/util"; import { useState } from "preact/hooks";
import MessageBase, { MessageContent, MessageDetail, MessageInfo } from "./MessageBase";
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 { 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;
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, 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,
return ( contrast,
<MessageBase contrast={contrast} content: replacement,
onContextMenu={attachContext ? attachContextMenu('Menu', { message, contextualChannel: message.channel }) : undefined}> head: preferHead,
<MessageInfo> queued,
{ head ? }: Props) => {
<UserIcon target={user} size={36} /> : const client = useClient();
<MessageDetail message={message} /> } const user = message.author;
</MessageInfo>
<MessageContent> const { openScreen } = useIntermediate();
{ head && <Username user={user} /> }
{ content ?? <Markdown content={message.content as string} /> } const content = message.content as string;
</MessageContent> const head =
</MessageBase> preferHead || (message.reply_ids && message.reply_ids.length > 0);
)
} // ! TODO: tell fatal to make this type generic
// bree: Fatal please...
const userContext = attachContext
? (attachContextMenu("Menu", {
user: message.author_id,
contextualChannel: message.channel_id,
// eslint-disable-next-line
}) as any)
: undefined;
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 0 → 100644
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 { 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 { internalEmit, internalSubscribe } from "../../../lib/eventEmitter";
import { useTranslation } from "../../../lib/i18n";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
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 = {
channel: Channel;
};
export type UploadState =
| { type: "none" }
| { type: "attached"; files: File[] }
| {
type: "uploading";
files: File[];
percent: number;
cancel: CancelTokenSource;
}
| { type: "sending"; files: File[] }
| { type: "failed"; files: File[]; error: string };
const Base = styled.div`
display: flex;
align-items: flex-start;
background: var(--message-box);
textarea {
font-size: var(--text-size);
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`
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() {
if (uploadState.type === "uploading" || uploadState.type === "sending")
return;
const content = draft?.trim() ?? "";
if (uploadState.type === "attached") return sendFile(content);
if (content.length === 0) return;
stopTyping();
setMessage();
setReplies([]);
playSound("outbound");
const nonce = ulid();
dispatch({
type: "QUEUE_ADD",
nonce,
channel: channel._id,
message: {
_id: nonce,
channel: channel._id,
author: client.user!._id,
content,
replies,
},
});
defer(() =>
SingletonMessageRenderer.jumpToBottom(
channel._id,
SMOOTH_SCROLL_ON_RECEIVE,
),
);
try {
await channel.sendMessage({
content,
nonce,
replies,
});
} catch (error) {
dispatch({
type: "QUEUE_FAIL",
error: takeError(error),
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 (
<>
<AutoComplete {...autoCompleteProps} />
<FilePreview
state={uploadState}
addFile={() =>
uploadState.type === "attached" &&
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,
),
});
}
}}
/>
<ReplyBar
channel={channel._id}
replies={replies}
setReplies={setReplies}
/>
<Base>
{channel.permission & ChannelPermission.UploadFiles ? (
<Action>
<FileUploader
size={24}
behaviour="multi"
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 "../UserIcon";
import Username from "../UserShort"; import { useClient } from "../../../context/revoltjs/RevoltClient";
import UserShort from "../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/Attachment.module.scss 0 → 100644
View file @ 1ac5de17
.attachment {
display: grid;
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"] {
filter: blur(30px);
pointer-events: none;
}
&.audio {
gap: 4px;
padding: 6px;
display: flex;
max-width: 100%;
flex-direction: column;
width: var(--attachment-default-width);
background: var(--secondary-background);
> audio {
width: 100%;
}
}
&.file {
> div {
padding: 12px;
max-width: 100%;
user-select: none;
width: fit-content;
border-radius: var(--border-radius);
width: var(--attachment-default-width);
}
}
&.text {
width: 100%;
overflow: hidden;
grid-auto-columns: unset;
max-width: var(--attachment-max-text-width);
.textContent {
height: 140px;
padding: 12px;
overflow-x: auto;
overflow-y: auto;
border-radius: 0 !important;
background: var(--secondary-header);
pre {
margin: 0;
}
pre code {
font-family: var(--monospace-font), sans-serif;
}
&[data-loading="true"] {
display: flex;
> * {
flex-grow: 1;
}
}
}
}
}
.margin {
margin-top: 4px;
}
.container {
max-width: 100%;
overflow: hidden;
width: fit-content;
> :first-child {
width: min(var(--attachment-max-width), 100%, var(--width));
}
}
.container,
.attachment,
.image {
border-radius: var(--border-radius);
}
src/components/common/messaging/attachments/Attachment.tsx 0 → 100644
View file @ 1ac5de17
This diff is collapsed.