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 2353 additions and 143 deletions
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,36 +22,47 @@ const ServerText = styled.div` ...@@ -18,36 +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}
onError={ e => {
let el = e.currentTarget;
if (el.src !== fallback) {
el.src = fallback
}
}} />
);
}
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 @ b4bc2262
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);
` }
`;
const fallback = '/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));
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}
onError={ e => {
let el = e.currentTarget;
if (el.src !== fallback) {
el.src = fallback
}
}} />
}
</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/messaging/Message.tsx 0 → 100644
View file @ 1ac5de17
import { observer } from "mobx-react-lite";
import { Message as MessageObject } from "revolt.js/dist/maps/Messages";
import { attachContextMenu } from "preact-context-menu";
import { memo } from "preact/compat";
import { 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 { 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 {
attachContext?: boolean;
queued?: QueuedMessage;
message: MessageObject;
highlight?: boolean;
contrast?: boolean;
content?: Children;
head?: boolean;
}
const Message = observer(
({
highlight,
attachContext,
message,
contrast,
content: replacement,
head: preferHead,
queued,
}: Props) => {
const client = useClient();
const user = message.author;
const { openScreen } = useIntermediate();
const content = message.content as string;
const head =
preferHead || (message.reply_ids && message.reply_ids.length > 0);
// ! 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 0 → 100644
View file @ 1ac5de17
import { observer } from "mobx-react-lite";
import { Message } from "revolt.js/dist/maps/Messages";
import styled, { css, keyframes } from "styled-components";
import { decodeTime } from "ulid";
import { Text } from "preact-i18n";
import { useDictionary } from "../../../lib/i18n";
import { dayjs } from "../../../context/Locale";
import Tooltip from "../Tooltip";
export interface BaseMessageProps {
head?: boolean;
failed?: boolean;
mention?: boolean;
blocked?: boolean;
sending?: boolean;
contrast?: boolean;
highlight?: boolean;
}
const highlight = keyframes`
0% { background: var(--mention); }
66% { background: var(--mention); }
100% { background: transparent; }
`;
export default styled.div<BaseMessageProps>`
display: flex;
overflow: none;
padding: 0.125rem;
flex-direction: row;
padding-inline-end: 16px;
@media (pointer: coarse) {
user-select: none;
}
${(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;
&:hover {
filter: none;
}
`}
${(props) =>
props.sending &&
css`
opacity: 0.8;
color: var(--tertiary-foreground);
`}
${(props) =>
props.failed &&
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 {
text-decoration: underline;
}
}
.copy {
display: block;
overflow: hidden;
}
&:hover {
background: var(--hover);
time {
opacity: 1;
}
}
`;
export const MessageInfo = styled.div`
width: 62px;
display: flex;
flex-shrink: 0;
padding-top: 2px;
flex-direction: row;
justify-content: center;
.copyBracket {
opacity: 0;
position: absolute;
}
.copyTime {
opacity: 0;
position: absolute;
}
svg {
user-select: none;
cursor: pointer;
&:active {
transform: translateY(1px);
}
}
time {
opacity: 0;
}
time,
.edited {
margin-top: 1px;
cursor: default;
display: inline;
font-size: 10px;
color: var(--tertiary-foreground);
}
time,
.edited > div {
&::selection {
background-color: transparent;
color: var(--tertiary-foreground);
}
}
.header {
cursor: pointer;
}
`;
export const MessageContent = styled.div`
min-width: 0;
flex-grow: 1;
display: flex;
// overflow: hidden;
flex-direction: column;
justify-content: center;
font-size: var(--text-size);
`;
export const DetailBase = styled.div`
flex-shrink: 0;
gap: 4px;
font-size: 10px;
display: inline-flex;
color: var(--tertiary-foreground);
.edited {
cursor: default;
&::selection {
background-color: transparent;
color: var(--tertiary-foreground);
}
}
`;
export 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 0 → 100644
View file @ 1ac5de17
import { observer } from "mobx-react-lite";
import { Message } from "revolt.js/dist/maps/Messages";
import { User } from "revolt.js/dist/maps/Users";
import styled from "styled-components";
import { attachContextMenu } from "preact-context-menu";
import { TextReact } from "../../../lib/i18n";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import UserShort from "../user/UserShort";
import MessageBase, { MessageDetail, MessageInfo } from "./MessageBase";
const SystemContent = styled.div`
gap: 4px;
display: flex;
padding: 2px 0;
flex-wrap: wrap;
align-items: center;
flex-direction: row;
`;
type SystemMessageParsed =
| { type: "text"; content: string }
| { type: "user_added"; user: User; by: User }
| { type: "user_remove"; user: User; by: User }
| { type: "user_joined"; user: User }
| { type: "user_left"; user: User }
| { type: "user_kicked"; user: User }
| { type: "user_banned"; user: User }
| { type: "channel_renamed"; name: string; by: User }
| { type: "channel_description_changed"; by: User }
| { type: "channel_icon_changed"; by: User };
interface Props {
attachContext?: boolean;
message: Message;
highlight?: boolean;
hideInfo?: boolean;
}
export const SystemMessage = observer(
({ 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 children;
switch (data.type) {
case "text":
children = <span>{data.content}</span>;
break;
case "user_added":
case "user_remove":
children = (
<TextReact
id={`app.main.channel.system.${
data.type === "user_added"
? "added_by"
: "removed_by"
}`}
fields={{
user: <UserShort user={data.user} />,
other_user: <UserShort user={data.by} />,
}}
/>
);
break;
case "user_joined":
case "user_left":
case "user_kicked":
case "user_banned":
children = (
<TextReact
id={`app.main.channel.system.${data.type}`}
fields={{
user: <UserShort user={data.user} />,
}}
/>
);
break;
case "channel_renamed":
children = (
<TextReact
id={`app.main.channel.system.channel_renamed`}
fields={{
user: <UserShort user={data.by} />,
name: <b>{data.name}</b>,
}}
/>
);
break;
case "channel_description_changed":
case "channel_icon_changed":
children = (
<TextReact
id={`app.main.channel.system.${data.type}`}
fields={{
user: <UserShort user={data.by} />,
}}
/>
);
break;
}
return (
<MessageBase
highlight={highlight}
onContextMenu={
attachContext
? attachContextMenu("Menu", {
message,
contextualChannel: message.channel,
})
: undefined
}>
{!hideInfo && (
<MessageInfo>
<MessageDetail message={message} position="left" />
</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
import { Attachment as AttachmentI } from "revolt-api/types/Autumn";
import styles from "./Attachment.module.scss";
import classNames from "classnames";
import { useContext, useState } from "preact/hooks";
import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { AppContext } from "../../../../context/revoltjs/RevoltClient";
import AttachmentActions from "./AttachmentActions";
import { SizedGrid } from "./Grid";
import Spoiler from "./Spoiler";
import TextFile from "./TextFile";
interface Props {
attachment: AttachmentI;
hasContent: boolean;
}
const MAX_ATTACHMENT_WIDTH = 480;
export default function Attachment({ attachment, hasContent }: Props) {
const client = useContext(AppContext);
const { openScreen } = useIntermediate();
const { filename, metadata } = attachment;
const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_"));
const url = client.generateFileURL(
attachment,
{ width: MAX_ATTACHMENT_WIDTH * 1.5 },
true,
);
switch (metadata.type) {
case "Image": {
return (
<SizedGrid
width={metadata.width}
height={metadata.height}
className={classNames({
[styles.margin]: hasContent,
spoiler,
})}>
<img
src={url}
alt={filename}
className={styles.image}
loading="lazy"
onClick={() =>
openScreen({ id: "image_viewer", attachment })
}
onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank")
}
/>
{spoiler && <Spoiler set={setSpoiler} />}
</SizedGrid>
);
}
case "Video": {
return (
<div
className={classNames(styles.container, {
[styles.margin]: hasContent,
})}
style={{ "--width": `${metadata.width}px` }}>
<AttachmentActions attachment={attachment} />
<SizedGrid
width={metadata.width}
height={metadata.height}
className={classNames({ spoiler })}>
<video
src={url}
alt={filename}
controls
loading="lazy"
width={metadata.width}
height={metadata.height}
onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank")
}
/>
{spoiler && <Spoiler set={setSpoiler} />}
</SizedGrid>
</div>
);
}
case "Audio": {
return (
<div
className={classNames(styles.attachment, styles.audio)}
data-has-content={hasContent}>
<AttachmentActions attachment={attachment} />
<audio src={url} controls />
</div>
);
}
case "Text": {
return (
<div
className={classNames(styles.attachment, styles.text)}
data-has-content={hasContent}>
<TextFile attachment={attachment} />
<AttachmentActions attachment={attachment} />
</div>
);
}
default: {
return (
<div
className={classNames(styles.attachment, styles.file)}
data-has-content={hasContent}>
<AttachmentActions attachment={attachment} />
</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 0 → 100644
View file @ 1ac5de17
import {
Download,
LinkExternal,
File,
Headphone,
Video,
} 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 {
attachment: Attachment;
}
export default function AttachmentActions({ attachment }: Props) {
const client = useContext(AppContext);
const { filename, metadata, size } = attachment;
const url = client.generateFileURL(attachment)!;
const open_url = `${url}/${filename}`;
const download_url = url.replace("attachments", "attachments/download");
const filesize = determineFileSize(size);
switch (metadata.type) {
case "Image":
return (
<div className={classNames(styles.actions, styles.imageAction)}>
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>
{`${metadata.width}x${metadata.height}`} ({filesize})
</span>
<a
href={open_url}
target="_blank"
className={styles.iconType}
rel="noreferrer">
<IconButton>
<LinkExternal size={24} />
</IconButton>
</a>
<a
href={download_url}
className={styles.downloadIcon}
download
target="_blank"
rel="noreferrer">
<IconButton>
<Download size={24} />
</IconButton>
</a>
</div>
);
case "Audio":
return (
<div className={classNames(styles.actions, styles.audioAction)}>
<Headphone size={24} className={styles.iconType} />
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>{filesize}</span>
<a
href={download_url}
className={styles.downloadIcon}
download
target="_blank"
rel="noreferrer">
<IconButton>
<Download size={24} />
</IconButton>
</a>
</div>
);
case "Video":
return (
<div className={classNames(styles.actions, styles.videoAction)}>
<Video size={24} className={styles.iconType} />
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>
{`${metadata.width}x${metadata.height}`} ({filesize})
</span>
<a
href={download_url}
className={styles.downloadIcon}
download
target="_blank"
rel="noreferrer">
<IconButton>
<Download size={24} />
</IconButton>
</a>
</div>
);
default:
return (
<div className={styles.actions}>
<File size={24} className={styles.iconType} />
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>{filesize}</span>
{metadata.type === "Text" && (
<a
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>
<Download size={24} />
</IconButton>
</a>
</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 0 → 100644
View file @ 1ac5de17
import axios from "axios";
import { Attachment } from "revolt-api/types/Autumn";
import styles from "./Attachment.module.scss";
import { useContext, useEffect, useState } from "preact/hooks";
import RequiresOnline from "../../../../context/revoltjs/RequiresOnline";
import {
AppContext,
StatusContext,
} from "../../../../context/revoltjs/RevoltClient";
import Preloader from "../../../ui/Preloader";
interface Props {
attachment: Attachment;
}
const fileCache: { [key: string]: string } = {};
export default function TextFile({ attachment }: Props) {
const [content, setContent] = useState<undefined | string>(undefined);
const [loading, setLoading] = useState(false);
const status = useContext(StatusContext);
const client = useContext(AppContext);
const url = client.generateFileURL(attachment)!;
useEffect(() => {
if (typeof content !== "undefined") 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);
const cached = fileCache[attachment._id];
if (cached) {
setContent(cached);
setLoading(false);
} else {
axios
.get(url, { transformResponse: [] })
.then((res) => {
setContent(res.data);
fileCache[attachment._id] = res.data;
setLoading(false);
})
.catch(() => {
console.error(
"Failed to load text file. [",
attachment._id,
"]",
);
setLoading(false);
});
}
}, [content, loading, status, attachment._id, attachment.size, url]);
return (
<div
className={styles.textContent}
data-loading={typeof content === "undefined"}>
{content ? (
<pre>
<code>{content}</code>
</pre>
) : (
<RequiresOnline>
<Preloader type="ring" />
</RequiresOnline>
)}
</div>
);
}
src/components/common/messaging/bars/FilePreview.tsx 0 → 100644
View file @ 1ac5de17
/* eslint-disable react-hooks/rules-of-hooks */
import { XCircle, Plus, Share, X, File } from "@styled-icons/boxicons-regular";
import styled from "styled-components";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import { determineFileSize } from "../../../../lib/fileSize";
import { CAN_UPLOAD_AT_ONCE, UploadState } from "../MessageBox";
interface Props {
state: UploadState;
addFile: () => void;
removeFile: (index: number) => void;
}
const Container = styled.div`
gap: 4px;
padding: 8px;
display: flex;
user-select: none;
flex-direction: column;
background: var(--message-box);
`;
const Carousel = styled.div`
gap: 8px;
display: flex;
overflow-x: scroll;
flex-direction: row;
`;
const Entry = styled.div`
display: flex;
flex-direction: column;
&.fade {
opacity: 0.4;
}
span.fn {
margin: auto;
font-size: 0.8em;
overflow: hidden;
max-width: 180px;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--secondary-foreground);
}
span.size {
font-size: 0.6em;
color: var(--tertiary-foreground);
text-align: center;
}
`;
const Description = styled.div`
gap: 4px;
display: flex;
font-size: 0.9em;
align-items: center;
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`
width: 100px;
height: 100px;
display: grid;
flex-shrink: 0;
cursor: pointer;
place-items: center;
border-radius: var(--border-radius);
background: var(--primary-background);
transition: 0.1s ease background-color;
&:hover {
background: var(--secondary-background);
}
`;
const PreviewBox = styled.div`
display: grid;
grid-template: "main" 100px / minmax(100px, 1fr);
justify-items: center;
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(() => {
const url: string = URL.createObjectURL(file);
setURL(url);
return () => URL.revokeObjectURL(url);
}, [file]);
return (
<Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}>
<PreviewBox onClick={remove}>
<img class="icon" src={url} alt={file.name} loading="eager" />
<div class="overlay">
<XCircle size={36} />
</div>
</PreviewBox>
<span class="fn">{file.name}</span>
<span class="size">{determineFileSize(file.size)}</span>
</Entry>
);
}
export default function FilePreview({ state, addFile, removeFile }: Props) {
if (state.type === "none") return null;
return (
<Container>
<Carousel>
{state.files.map((file, index) => (
// @ts-expect-error brokey
// eslint-disable-next-line react/jsx-no-undef
<Fragment key={file.name}>
{index === CAN_UPLOAD_AT_ONCE && <Divider />}
<FileEntry
index={index}
file={file}
key={file.name}
remove={
state.type === "attached"
? () => removeFile(index)
: undefined
}
/>
</Fragment>
))}
{state.type === "attached" && (
<EmptyEntry onClick={addFile}>
<Plus size={48} />
</EmptyEntry>
)}
</Carousel>
{state.type === "uploading" && (
<Description>
<Share size={24} />
<Text id="app.main.channel.uploading_file" /> (
{state.percent}%)
</Description>
)}
{state.type === "sending" && (
<Description>
<Share size={24} />
Sending...
</Description>
)}
{state.type === "failed" && (
<Description>
<X size={24} />
<Text id={`error.${state.error}`} />
</Description>
)}
</Container>
);
}
src/components/common/messaging/bars/JumpToBottom.tsx 0 → 100644
View file @ 1ac5de17
import { DownArrowAlt } from "@styled-icons/boxicons-regular";
import styled from "styled-components";
import { Text } from "preact-i18n";
import {
SingletonMessageRenderer,
useRenderState,
} from "../../../../lib/renderer/Singleton";
const Bar = styled.div`
z-index: 10;
position: relative;
> div {
top: -26px;
height: 28px;
width: 100%;
position: absolute;
display: flex;
align-items: center;
cursor: pointer;
font-size: 13px;
padding: 0 8px;
user-select: none;
justify-content: space-between;
color: var(--secondary-foreground);
transition: color ease-in-out 0.08s;
background: var(--secondary-background);
border-radius: var(--border-radius) var(--border-radius) 0 0;
> div {
display: flex;
align-items: center;
gap: 6px;
}
&:hover {
color: var(--primary-text);
}
&:active {
transform: translateY(1px);
}
@media (pointer: coarse) {
height: 34px;
top: -32px;
padding: 0 12px;
}
}
`;
export default function JumpToBottom({ id }: { id: string }) {
const view = useRenderState(id);
if (!view || view.type !== "RENDER" || view.atBottom) return null;
return (
<Bar>
<div
onClick={() => SingletonMessageRenderer.jumpToBottom(id, true)}>
<div>
<Text id="app.main.channel.misc.viewing_old" />
</div>
<div>
<Text id="app.main.channel.misc.jump_present" />{" "}
<DownArrowAlt size={20} />
</div>
</div>
</Bar>
);
}