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 2065 additions and 3 deletions
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>
);
}
src/components/common/messaging/bars/ReplyBar.tsx 0 → 100644
View file @ 1ac5de17
import { At, Reply as ReplyIcon } from "@styled-icons/boxicons-regular";
import { File, XCircle } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { SYSTEM_USER_ID } from "revolt.js";
import styled from "styled-components";
import { Text } from "preact-i18n";
import { StateUpdater, useEffect } from "preact/hooks";
import { internalSubscribe } from "../../../../lib/eventEmitter";
import { useRenderState } from "../../../../lib/renderer/Singleton";
import { Reply } from "../../../../redux/reducers/queue";
import IconButton from "../../../ui/IconButton";
import Markdown from "../../../markdown/Markdown";
import UserShort from "../../user/UserShort";
import { SystemMessage } from "../SystemMessage";
import { ReplyBase } from "../attachments/MessageReply";
interface Props {
channel: string;
replies: Reply[];
setReplies: StateUpdater<Reply[]>;
}
const Base = styled.div`
display: flex;
height: 30px;
padding: 0 12px;
user-select: none;
align-items: center;
background: var(--message-box);
> div {
flex-grow: 1;
margin-bottom: 0;
&::before {
display: none;
}
}
.toggle {
gap: 4px;
display: flex;
font-size: 12px;
align-items: center;
font-weight: 600;
}
.username {
display: flex;
align-items: center;
gap: 6px;
font-weight: 600;
}
.message {
display: flex;
}
.actions {
gap: 12px;
display: flex;
}
/*@media (pointer: coarse) { //FIXME: Make action buttons bigger on pointer coarse
.actions > svg {
height: 25px;
}
}*/
`;
// ! FIXME: Move to global config
const MAX_REPLIES = 5;
export default observer(({ channel, replies, setReplies }: Props) => {
useEffect(() => {
return internalSubscribe(
"ReplyBar",
"add",
(id) =>
replies.length < MAX_REPLIES &&
!replies.find((x) => x.id === id) &&
setReplies([...replies, { id: id as string, mention: false }]),
);
}, [replies, setReplies]);
const view = useRenderState(channel);
if (view?.type !== "RENDER") return null;
const ids = replies.map((x) => x.id);
const messages = view.messages.filter((x) => ids.includes(x._id));
return (
<div>
{replies.map((reply, index) => {
const message = messages.find((x) => reply.id === x._id);
// ! FIXME: better solution would be to
// ! have a hook for resolving messages from
// ! render state along with relevant users
// -> which then fetches any unknown messages
if (!message)
return (
<span>
<Text id="app.main.channel.misc.failed_load" />
</span>
);
return (
<Base key={reply.id}>
<ReplyBase preview>
<ReplyIcon size={22} />
<div class="username">
<UserShort user={message.author} size={16} />
</div>
<div class="message">
{message.attachments && (
<>
<File size={16} />
<em>
{message.attachments.length > 1 ? (
<Text id="app.main.channel.misc.sent_multiple_files" />
) : (
<Text id="app.main.channel.misc.sent_file" />
)}
</em>
</>
)}
{message.author_id === SYSTEM_USER_ID ? (
<SystemMessage message={message} />
) : (
<Markdown
disallowBigEmoji
content={(
message.content as string
).replace(/\n/g, " ")}
/>
)}
</div>
</ReplyBase>
<span class="actions">
<IconButton
onClick={() =>
setReplies(
replies.map((_, i) =>
i === index
? { ..._, mention: !_.mention }
: _,
),
)
}>
<span class="toggle">
<At size={16} />{" "}
{reply.mention ? "ON" : "OFF"}
</span>
</IconButton>
<IconButton
onClick={() =>
setReplies(
replies.filter((_, i) => i !== index),
)
}>
<XCircle size={16} />
</IconButton>
</span>
</Base>
);
})}
</div>
);
});
src/components/common/messaging/bars/TypingIndicator.tsx 0 → 100644
View file @ 1ac5de17
import { observer } from "mobx-react-lite";
import { RelationshipStatus } from "revolt-api/types/Users";
import { Channel } from "revolt.js/dist/maps/Channels";
import styled from "styled-components";
import { Text } from "preact-i18n";
interface Props {
channel: Channel;
}
const Base = styled.div`
position: relative;
> div {
height: 24px;
margin-top: -24px;
position: absolute;
gap: 8px;
display: flex;
padding: 0 10px;
user-select: none;
align-items: center;
flex-direction: row;
width: calc(100% - 3px);
color: var(--secondary-foreground);
background: var(--secondary-background);
}
.avatars {
display: flex;
img {
width: 16px;
height: 16px;
object-fit: cover;
border-radius: 50%;
&:not(:first-child) {
margin-left: -4px;
}
}
}
.usernames {
min-width: 0;
font-size: 13px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
`;
export default observer(({ channel }: Props) => {
const users = channel.typing.filter(
(x) =>
typeof x !== "undefined" &&
x._id !== x.client.user!._id &&
x.relationship !== RelationshipStatus.Blocked,
);
if (users.length > 0) {
users.sort((a, b) =>
a!._id.toUpperCase().localeCompare(b!._id.toUpperCase()),
);
let text;
if (users.length >= 5) {
text = <Text id="app.main.channel.typing.several" />;
} else if (users.length > 1) {
const userlist = [...users].map((x) => x!.username);
const user = userlist.pop();
/*for (let i = 0; i < userlist.length - 1; i++) {
userlist.splice(i * 2 + 1, 0, ", ");
}*/
text = (
<Text
id="app.main.channel.typing.multiple"
fields={{
user,
userlist: userlist.join(", "),
}}
/>
);
} else {
text = (
<Text
id="app.main.channel.typing.single"
fields={{ user: users[0]!.username }}
/>
);
}
return (
<Base>
<div>
<div className="avatars">
{users.map((user) => (
<img
key={user!._id}
loading="eager"
src={user!.generateAvatarURL({ max_side: 256 })}
/>
))}
</div>
<div className="usernames">{text}</div>
</div>
</Base>
);
}
return null;
});
src/components/common/messaging/embed/Embed.module.scss 0 → 100644
View file @ 1ac5de17
.embed {
margin: .2em 0;
iframe {
border: none;
border-radius: var(--border-radius);
}
&.image {
cursor: pointer;
}
&.website {
gap: 6px;
display: flex;
flex-direction: row;
> div:nth-child(1) {
gap: 6px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
border-inline-start-width: 4px;
border-inline-start-style: solid;
padding: 12px;
width: fit-content;
background: var(--primary-header);
border-radius: var(--border-radius);
.siteinfo {
display: flex;
align-items: center;
gap: 6px;
user-select: none;
.favicon {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.site {
font-size: 11px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--secondary-foreground);
}
}
.author {
font-size: 1em;
color: var(--primary-text);
display: inline-block;
&:hover {
text-decoration: underline;
}
}
.title {
display: inline-block;
font-size: 1.1em;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
&:hover {
text-decoration: underline;
}
}
.description {
margin: 0;
font-size: 12px;
overflow: hidden;
display: -webkit-box;
white-space: pre-wrap;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}
.footer {
font-size: 12px;
}
img.image {
cursor: pointer;
object-fit: contain;
border-radius: var(--border-radius);
}
}
}
// TODO: unified actions css (see attachment.module.scss for other actions css)
.actions {
display: grid;
grid-template:
"name open" auto
"size open" auto
/ minmax(20px, 1fr) min-content;
align-items: center;
column-gap: 12px;
width: 100%;
padding: 8px;
overflow: none;
color: var(--foreground);
background: var(--secondary-background);
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.filesize {
grid-area: size;
font-size: 10px;
color: var(--secondary-foreground);
}
.openIcon {
grid-area: open;
}
}
src/components/common/messaging/embed/Embed.tsx 0 → 100644
View file @ 1ac5de17
import { Embed as EmbedI } from "revolt-api/types/January";
import styles from "./Embed.module.scss";
import classNames from "classnames";
import { useContext } from "preact/hooks";
import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { useClient } from "../../../../context/revoltjs/RevoltClient";
import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
import EmbedMedia from "./EmbedMedia";
interface Props {
embed: EmbedI;
}
const MAX_EMBED_WIDTH = 480;
const MAX_EMBED_HEIGHT = 640;
const CONTAINER_PADDING = 24;
const MAX_PREVIEW_SIZE = 150;
export default function Embed({ embed }: Props) {
const client = useClient();
const { openScreen } = useIntermediate();
const maxWidth = Math.min(
useContext(MessageAreaWidthContext) - CONTAINER_PADDING,
MAX_EMBED_WIDTH,
);
function calculateSize(
w: number,
h: number,
): { width: number; height: number } {
const limitingWidth = Math.min(maxWidth, w);
const limitingHeight = Math.min(MAX_EMBED_HEIGHT, h);
// Calculate smallest possible WxH.
const width = Math.min(limitingWidth, limitingHeight * (w / h));
const height = Math.min(limitingHeight, limitingWidth * (h / w));
return { width, height };
}
switch (embed.type) {
case "Website": {
// Determine special embed size.
let mw, mh;
const largeMedia =
(embed.special && embed.special.type !== "None") ||
embed.image?.size === "Large";
switch (embed.special?.type) {
case "YouTube":
case "Bandcamp": {
mw = embed.video?.width ?? 1280;
mh = embed.video?.height ?? 720;
break;
}
case "Twitch": {
mw = 1280;
mh = 720;
break;
}
default: {
if (embed.image?.size === "Preview") {
mw = MAX_EMBED_WIDTH;
mh = Math.min(
embed.image.height ?? 0,
MAX_PREVIEW_SIZE,
);
} else {
mw = embed.image?.width ?? MAX_EMBED_WIDTH;
mh = embed.image?.height ?? 0;
}
}
}
const { width, height } = calculateSize(mw, mh);
return (
<div
className={classNames(styles.embed, styles.website)}
style={{
borderInlineStartColor:
embed.color ?? "var(--tertiary-background)",
width: width + CONTAINER_PADDING,
}}>
<div>
{embed.site_name && (
<div className={styles.siteinfo}>
{embed.icon_url && (
<img
loading="lazy"
className={styles.favicon}
src={client.proxyFile(embed.icon_url)}
draggable={false}
onError={(e) =>
(e.currentTarget.style.display =
"none")
}
/>
)}
<div className={styles.site}>
{embed.site_name}{" "}
</div>
</div>
)}
{/*<span><a href={embed.url} target={"_blank"} className={styles.author}>Author</a></span>*/}
{embed.title && (
<span>
<a
href={embed.url}
target={"_blank"}
className={styles.title}
rel="noreferrer">
{embed.title}
</a>
</span>
)}
{embed.description && (
<div className={styles.description}>
{embed.description}
</div>
)}
{largeMedia && (
<EmbedMedia embed={embed} height={height} />
)}
</div>
{!largeMedia && (
<div>
<EmbedMedia
embed={embed}
width={
height *
((embed.image?.width ?? 0) /
(embed.image?.height ?? 0))
}
height={height}
/>
</div>
)}
</div>
);
}
case "Image": {
return (
<img
className={classNames(styles.embed, styles.image)}
style={calculateSize(embed.width, embed.height)}
src={client.proxyFile(embed.url)}
type="text/html"
frameBorder="0"
loading="lazy"
onClick={() => openScreen({ id: "image_viewer", embed })}
onMouseDown={(ev) =>
ev.button === 1 && window.open(embed.url, "_blank")
}
/>
);
}
default:
return null;
}
}
src/components/common/messaging/embed/EmbedMedia.tsx 0 → 100644
View file @ 1ac5de17
/* eslint-disable react-hooks/rules-of-hooks */
import { Embed } from "revolt-api/types/January";
import styles from "./Embed.module.scss";
import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { useClient } from "../../../../context/revoltjs/RevoltClient";
interface Props {
embed: Embed;
width?: number;
height: number;
}
export default function EmbedMedia({ embed, width, height }: Props) {
if (embed.type !== "Website") return null;
const { openScreen } = useIntermediate();
const client = useClient();
switch (embed.special?.type) {
case "YouTube":
return (
<iframe
loading="lazy"
src={`https://www.youtube-nocookie.com/embed/${embed.special.id}?modestbranding=1`}
allowFullScreen
style={{ height }}
/>
);
case "Twitch":
return (
<iframe
src={`https://player.twitch.tv/?${embed.special.content_type.toLowerCase()}=${
embed.special.id
}&parent=${window.location.hostname}&autoplay=false`}
frameBorder="0"
allowFullScreen
scrolling="no"
loading="lazy"
style={{ height }}
/>
);
case "Spotify":
return (
<iframe
src={`https://open.spotify.com/embed/${embed.special.content_type}/${embed.special.id}`}
loading="lazy"
frameBorder="0"
allowFullScreen
allowTransparency
style={{ height }}
/>
);
case "Soundcloud":
return (
<iframe
src={`https://w.soundcloud.com/player/?url=${encodeURIComponent(
embed.url!,
)}&color=%23FF7F50&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`}
frameBorder="0"
scrolling="no"
loading="lazy"
style={{ height }}
/>
);
case "Bandcamp": {
return (
<iframe
src={`https://bandcamp.com/EmbeddedPlayer/${embed.special.content_type.toLowerCase()}=${
embed.special.id
}/size=large/bgcol=181a1b/linkcol=056cc4/tracklist=false/transparent=true/`}
seamless
loading="lazy"
style={{ height }}
/>
);
}
default: {
if (embed.image) {
const url = embed.image.url;
return (
<img
className={styles.image}
src={client.proxyFile(url)}
loading="lazy"
style={{ width, height }}
onClick={() =>
openScreen({
id: "image_viewer",
embed: embed.image,
})
}
onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank")
}
/>
);
}
}
}
return null;
}
src/components/common/messaging/embed/EmbedMediaActions.tsx 0 → 100644
View file @ 1ac5de17
import { LinkExternal } from "@styled-icons/boxicons-regular";
import { EmbedImage } from "revolt-api/types/January";
import styles from "./Embed.module.scss";
import IconButton from "../../../ui/IconButton";
interface Props {
embed: EmbedImage;
}
export default function EmbedMediaActions({ embed }: Props) {
const filename = embed.url.split("/").pop();
return (
<div className={styles.actions}>
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>
{`${embed.width}x${embed.height}`}
</span>
<a
href={embed.url}
class={styles.openIcon}
target="_blank"
rel="noreferrer">
<IconButton>
<LinkExternal size={24} />
</IconButton>
</a>
</div>
);
}
src/components/common/UserCheckbox.tsx → src/components/common/user/UserCheckbox.tsx
View file @ 1ac5de17
import { User } from "revolt.js"; import { User } from "revolt.js/dist/maps/Users";
import Checkbox, { CheckboxProps } from "../../ui/Checkbox";
import UserIcon from "./UserIcon"; import UserIcon from "./UserIcon";
import Checkbox, { CheckboxProps } from "../ui/Checkbox"; import { Username } from "./UserShort";
type UserProps = Omit<CheckboxProps, "children"> & { user: User }; type UserProps = Omit<CheckboxProps, "children"> & { user: User };
...@@ -8,7 +11,7 @@ export default function UserCheckbox({ user, ...props }: UserProps) { ...@@ -8,7 +11,7 @@ export default function UserCheckbox({ user, ...props }: UserProps) {
return ( return (
<Checkbox {...props}> <Checkbox {...props}>
<UserIcon target={user} size={32} /> <UserIcon target={user} size={32} />
{user.username} <Username user={user} />
</Checkbox> </Checkbox>
); );
} }
src/components/common/UserHeader.tsx → src/components/common/user/UserHeader.tsx
View file @ 1ac5de17
import Tooltip from "./Tooltip"; import { Cog } from "@styled-icons/boxicons-solid";
import { User } from "revolt.js"; import { observer } from "mobx-react-lite";
import Header from "../ui/Header";
import UserIcon from "./UserIcon";
import { Text } from "preact-i18n";
import UserStatus from './UserStatus';
import styled from "styled-components";
import { Localizer } from 'preact-i18n';
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import IconButton from "../ui/IconButton"; import { User } from "revolt.js/dist/maps/Users";
import { Settings } from "@styled-icons/feather"; import styled from "styled-components";
import { openContextMenu } from "preact-context-menu"; import { openContextMenu } from "preact-context-menu";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; import { Text, Localizer } from "preact-i18n";
import { useIntermediate } from "../../context/intermediate/Intermediate";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import Header from "../../ui/Header";
import IconButton from "../../ui/IconButton";
import Tooltip from "../Tooltip";
import UserStatus from "./UserStatus";
const HeaderBase = styled.div` const HeaderBase = styled.div`
gap: 0; gap: 0;
...@@ -19,7 +23,7 @@ const HeaderBase = styled.div` ...@@ -19,7 +23,7 @@ const HeaderBase = styled.div`
min-width: 0; min-width: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
* { * {
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
...@@ -41,45 +45,39 @@ const HeaderBase = styled.div` ...@@ -41,45 +45,39 @@ const HeaderBase = styled.div`
`; `;
interface Props { interface Props {
user: User user: User;
} }
export default function UserHeader({ user }: Props) { export default observer(({ user }: Props) => {
const { writeClipboard } = useIntermediate(); const { writeClipboard } = useIntermediate();
function openPresenceSelector() {
openContextMenu("Status");
}
return ( return (
<Header placement="secondary"> <Header borders placement="secondary">
<UserIcon
target={user}
size={32}
status
onClick={openPresenceSelector}
/>
<HeaderBase> <HeaderBase>
<Localizer> <Localizer>
<Tooltip content={<Text id="app.special.copy_username" />}> <Tooltip content={<Text id="app.special.copy_username" />}>
<span className="username" <span
className="username"
onClick={() => writeClipboard(user.username)}> onClick={() => writeClipboard(user.username)}>
@{user.username} @{user.username}
</span> </span>
</Tooltip> </Tooltip>
</Localizer> </Localizer>
<span className="status" <span
onClick={openPresenceSelector}> className="status"
onClick={() => openContextMenu("Status")}>
<UserStatus user={user} /> <UserStatus user={user} />
</span> </span>
</HeaderBase> </HeaderBase>
{ !isTouchscreenDevice && <div className="actions"> {!isTouchscreenDevice && (
<Link to="/settings"> <div className="actions">
<IconButton> <Link to="/settings">
<Settings size={24} /> <IconButton>
</IconButton> <Cog size={24} />
</Link> </IconButton>
</div> } </Link>
</div>
)}
</Header> </Header>
) );
} });
src/components/common/user/UserHover.tsx 0 → 100644
View file @ 1ac5de17
import { User } from "revolt.js/dist/maps/Users";
import styled from "styled-components";
import { Children } from "../../../types/Preact";
import Tooltip from "../Tooltip";
import { Username } from "./UserShort";
import UserStatus from "./UserStatus";
interface Props {
user?: User;
children: Children;
}
const Base = styled.div`
display: flex;
flex-direction: column;
.username {
font-size: 13px;
font-weight: 600;
}
.status {
font-size: 11px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tip {
display: flex;
align-items: center;
gap: 4px;
margin-top: 2px;
color: var(--secondary-foreground);
}
`;
export default function UserHover({ user, children }: Props) {
return (
<Tooltip
placement="right-end"
content={
<Base>
<Username className="username" user={user} />
<span className="status">
<UserStatus user={user} />
</span>
{/*<div className="tip"><InfoCircle size={13}/>Right-click on the avatar to access the quick menu</div>*/}
</Base>
}>
{children}
</Tooltip>
);
}
src/components/common/user/UserIcon.tsx 0 → 100644
View file @ 1ac5de17
import { MicrophoneOff } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite";
import { Presence } from "revolt-api/types/Users";
import { User } from "revolt.js/dist/maps/Users";
import styled, { css } from "styled-components";
import { useContext } from "preact/hooks";
import { ThemeContext } from "../../../context/Theme";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import IconBase, { IconBaseProps } from "../IconBase";
import fallback from "../assets/user.png";
type VoiceStatus = "muted";
interface Props extends IconBaseProps<User> {
mask?: string;
status?: boolean;
voice?: VoiceStatus;
}
export function useStatusColour(user?: User) {
const theme = useContext(ThemeContext);
return user?.online && user?.status?.presence !== Presence.Invisible
? user?.status?.presence === Presence.Idle
? theme["status-away"]
: user?.status?.presence === 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);
`}
`;
export default observer(
(
props: Props &
Omit<
JSX.SVGAttributes<SVGSVGElement>,
keyof Props | "children" | "as"
>,
) => {
const client = useContext(AppContext);
const {
target,
attachment,
size,
status,
animate,
mask,
hover,
...svgProps
} = props;
const iconURL =
client.generateFileURL(
target?.avatar ?? attachment,
{ max_side: 256 },
animate,
) ?? (target ? target.defaultAvatarURL : fallback);
return (
<IconBase
{...svgProps}
width={size}
height={size}
hover={hover}
aria-hidden="true"
viewBox="0 0 32 32">
<foreignObject
x="0"
y="0"
width="32"
height="32"
class="icon"
mask={mask ?? (status ? "url(#user)" : undefined)}>
{<img src={iconURL} draggable={false} loading="lazy" />}
</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" && (
<MicrophoneOff size={6} />
)}
</VoiceIndicator>
</foreignObject>
)}
</IconBase>
);
},
);
src/components/common/user/UserShort.tsx 0 → 100644
View file @ 1ac5de17
import { observer } from "mobx-react-lite";
import { useParams } from "react-router-dom";
import { User } from "revolt.js/dist/maps/Users";
import { Text } from "preact-i18n";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import UserIcon from "./UserIcon";
export const Username = observer(
({
user,
...otherProps
}: { user?: User } & JSX.HTMLAttributes<HTMLElement>) => {
let username = user?.username;
let color;
if (user) {
const { server } = useParams<{ server?: string }>();
if (server) {
const client = useClient();
const member = client.members.getKey({
server,
user: user._id,
});
if (member) {
if (member.nickname) {
username = member.nickname;
}
if (member.roles && member.roles.length > 0) {
const srv = client.servers.get(member._id.server);
if (srv?.roles) {
for (const role of member.roles) {
const c = srv.roles[role].colour;
if (c) {
color = c;
continue;
}
}
}
}
}
}
}
return (
<span {...otherProps} style={{ color }}>
{username ?? <Text id="app.main.channel.unknown_user" />}
</span>
);
},
);
export default function UserShort({
user,
size,
}: {
user?: User;
size?: number;
}) {
return (
<>
<UserIcon size={size ?? 24} target={user} />
<Username user={user} />
</>
);
}