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 1714 additions and 870 deletions
src/components/common/messaging/MessageBase.tsx
View file @ 1ac5de17
import dayjs from "dayjs";
import Tooltip from "../Tooltip";
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 styled, { css } from "styled-components";
import { MessageObject } from "../../../context/revoltjs/util";
import { useDictionary } from "../../../lib/i18n";
import { dayjs } from "../../../context/Locale";
import Tooltip from "../Tooltip";
export interface BaseMessageProps {
head?: boolean,
failed?: boolean,
mention?: boolean,
blocked?: boolean,
sending?: boolean,
contrast?: boolean
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-x: none;
padding: .125rem;
overflow: none;
padding: 0.125rem;
flex-direction: row;
padding-right: 16px;
padding-inline-end: 16px;
${ props => props.contrast && css`
padding: .3rem;
border-radius: 4px;
background: var(--hover);
` }
@media (pointer: coarse) {
user-select: none;
}
${ props => props.head && css`
margin-top: 12px;
` }
${(props) =>
props.contrast &&
css`
padding: 0.3rem;
background: var(--hover);
border-radius: var(--border-radius);
`}
${ props => props.mention && css`
background: var(--mention);
` }
${(props) =>
props.head &&
css`
margin-top: 12px;
`}
${ props => props.blocked && css`
filter: blur(4px);
transition: 0.2s ease filter;
${(props) =>
props.mention &&
css`
background: var(--mention);
`}
&:hover {
filter: none;
}
` }
${(props) =>
props.blocked &&
css`
filter: blur(4px);
transition: 0.2s ease filter;
${ props => props.sending && css`
opacity: 0.8;
color: var(--tertiary-foreground);
` }
&:hover {
filter: none;
}
`}
${(props) =>
props.sending &&
css`
opacity: 0.8;
color: var(--tertiary-foreground);
`}
${(props) =>
props.failed &&
css`
color: var(--error);
`}
${ 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 {
width: 0;
height: 0;
opacity: 0;
display: block;
overflow: hidden;
}
......@@ -92,80 +135,125 @@ export const MessageInfo = styled.div`
flex-direction: row;
justify-content: center;
::selection {
background-color: transparent;
color: var(--tertiary-foreground);
.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 {
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;
font-size: 0.875rem;
// 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 function MessageDetail({ message, position }: { message: MessageObject, position: 'left' | 'top' }) {
if (position === 'left') {
if (message.edited) {
return (
<>
<span className="copy">
[<time>{dayjs(decodeTime(message._id)).format("H:mm")}</time>]
</span>
<span className="edited">
<Tooltip content={dayjs(message.edited).format("LLLL")}>
<Text id="app.main.channel.edited" />
</Tooltip>
</span>
</>
)
} else {
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="copy">[</i>
{ dayjs(decodeTime(message._id)).format("H:mm") }
<i className="copy">]</i>
<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")}>
<Text id="app.main.channel.edited" />
</Tooltip> }
</DetailBase>
)
}
return (
<DetailBase>
<time>{dayjs(decodeTime(message._id)).calendar()}</time>
{message.edited && (
<Tooltip content={dayjs(message.edited).format("LLLL")}>
<span className="edited">
<Text id="app.main.channel.edited" />
</span>
</Tooltip>
)}
</DetailBase>
);
},
);
src/components/common/messaging/MessageBox.tsx
View file @ 1ac5de17
import { ulid } from "ulid";
import { Channel } from "revolt.js";
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 { defer } from "../../../lib/defer";
import IconButton from "../../ui/IconButton";
import { Send } from '@styled-icons/feather';
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 Axios, { CancelTokenSource } from "axios";
import { defer } from "../../../lib/defer";
import { internalEmit, internalSubscribe } from "../../../lib/eventEmitter";
import { useTranslation } from "../../../lib/i18n";
import { Reply } from "../../../redux/reducers/queue";
import { connectState } from "../../../redux/connector";
import { WithDispatcher } from "../../../redux/reducers";
import { takeError } from "../../../context/revoltjs/util";
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { internalEmit, internalSubscribe } from "../../../lib/eventEmitter";
import { useCallback, useContext, useEffect, useState } from "preact/hooks";
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 { SingletonMessageRenderer, SMOOTH_SCROLL_ON_RECEIVE } from "../../../lib/renderer/Singleton";
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 ReplyBar from "./bars/ReplyBar";
import FilePreview from './bars/FilePreview';
import AutoComplete, { useAutoComplete } from "../AutoComplete";
import { SoundContext } from "../../../context/Settings";
import { PermissionTooltip } from "../Tooltip";
import FilePreview from "./bars/FilePreview";
import ReplyBar from "./bars/ReplyBar";
type Props = WithDispatcher & {
type Props = {
channel: Channel;
draft?: string;
};
export type UploadState =
| { type: "none" }
| { type: "attached"; files: File[] }
| { type: "uploading"; files: File[]; percent: number; cancel: CancelTokenSource }
| {
type: "uploading";
files: File[];
percent: number;
cancel: CancelTokenSource;
}
| { type: "sending"; files: File[] }
| { type: "failed"; files: File[]; error: string };
const Base = styled.div`
display: flex;
padding: 0 12px;
align-items: flex-start;
background: var(--message-box);
textarea {
font-size: .875rem;
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: grid;
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 = 5;
export const CAN_UPLOAD_AT_ONCE = 4;
export default observer(({ channel }: Props) => {
const [draft, setDraft] = useState(getState().drafts[channel._id] ?? "");
function MessageBox({ channel, draft, dispatcher }: Props) {
const [ uploadState, setUploadState ] = useState<UploadState>({ type: 'none' });
const [ typing, setTyping ] = useState<boolean | number>(false);
const [ replies, setReplies ] = useState<Reply[]>([]);
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();
function setMessage(content?: string) {
if (content) {
dispatcher({
type: "SET_DRAFT",
channel: channel._id,
content
});
} else {
dispatcher({
type: "CLEAR_DRAFT",
channel: channel._id
});
}
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') {
function append(content: string, action: "quote" | "mention") {
const text =
action === "quote"
? `${content
.split("\n")
.map(x => `> ${x}`)
.map((x) => `> ${x}`)
.join("\n")}\n\n`
: `${content} `;
......@@ -97,23 +178,28 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
}
}
return internalSubscribe("MessageBox", "append", append);
}, [ draft ]);
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 (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');
playSound("outbound");
const nonce = ulid();
dispatcher({
dispatch({
type: "QUEUE_ADD",
nonce,
channel: channel._id,
......@@ -121,32 +207,37 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
_id: nonce,
channel: channel._id,
author: client.user!._id,
content,
replies
}
replies,
},
});
defer(() => SingletonMessageRenderer.jumpToBottom(channel._id, SMOOTH_SCROLL_ON_RECEIVE));
defer(() =>
SingletonMessageRenderer.jumpToBottom(
channel._id,
SMOOTH_SCROLL_ON_RECEIVE,
),
);
try {
await client.channels.sendMessage(channel._id, {
await channel.sendMessage({
content,
nonce,
replies
replies,
});
} catch (error) {
dispatcher({
dispatch({
type: "QUEUE_FAIL",
error: takeError(error),
nonce
nonce,
});
}
}
async function sendFile(content: string) {
if (uploadState.type !== 'attached') return;
let attachments: string[] = [];
if (uploadState.type !== "attached") return;
const attachments: string[] = [];
const cancel = Axios.CancelToken.source();
const files = uploadState.files;
......@@ -154,32 +245,43 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
setUploadState({ type: "uploading", files, percent: 0, cancel });
try {
for (let i=0;i<files.length&&i<CAN_UPLOAD_AT_ONCE;i++) {
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
})
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
files,
});
} else {
setUploadState({
type: "failed",
files,
error: takeError(err)
error: takeError(err),
});
}
......@@ -188,22 +290,22 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
setUploadState({
type: "sending",
files
files,
});
const nonce = ulid();
try {
await client.channels.sendMessage(channel._id, {
await channel.sendMessage({
content,
nonce,
replies,
attachments
attachments,
});
} catch (err) {
setUploadState({
type: "failed",
files,
error: takeError(err)
error: takeError(err),
});
return;
......@@ -211,27 +313,27 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
setMessage();
setReplies([]);
playSound('outbound');
playSound("outbound");
if (files.length > CAN_UPLOAD_AT_ONCE) {
setUploadState({
type: "attached",
files: files.slice(CAN_UPLOAD_AT_ONCE)
files: files.slice(CAN_UPLOAD_AT_ONCE),
});
} else {
setUploadState({ type: "none" });
}
}
function startTyping() {
if (typeof typing === 'number' && + new Date() < typing) return;
if (typeof typing === "number" && +new Date() < typing) return;
const ws = client.websocket;
if (ws.connected) {
setTyping(+ new Date() + 4000);
setTyping(+new Date() + 2500);
ws.send({
type: "BeginTyping",
channel: channel._id
channel: channel._id,
});
}
}
......@@ -243,69 +345,118 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
setTyping(false);
ws.send({
type: "EndTyping",
channel: channel._id
channel: channel._id,
});
}
}
}
const debouncedStopTyping = useCallback(debounce(stopTyping, 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 } : undefined
});
// 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;
<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' });
setUploadState({ type: "none" });
} else {
setUploadState({ type: 'attached', files: uploadState.files.filter((_, i) => index !== i) });
setUploadState({
type: "attached",
files: uploadState.files.filter(
(_, i) => index !== i,
),
});
}
}} />
<ReplyBar channel={channel._id} replies={replies} setReplies={setReplies} />
}}
/>
<ReplyBar
channel={channel._id}
replies={replies}
setReplies={setReplies}
/>
<Base>
<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 ] });
{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"
}
}}
/>
</Action>
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={5}
padding={14}
maxRows={20}
id="message"
value={draft ?? ''}
onKeyUp={onKeyUp}
onKeyDown={e => {
value={draft ?? ""}
padding="var(--message-box-padding)"
onKeyDown={(e) => {
if (onKeyDown(e)) return;
if (
......@@ -317,39 +468,52 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
return;
}
if (!e.shiftKey && e.key === "Enter" && !isTouchscreenDevice) {
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: client.users.get(client.channels.getRecipient(channel._id))?.username })
: channel.channel_type === "SavedMessages" ? translate("app.main.channel.message_saved")
: translate("app.main.channel.message_where", { channel_name: channel.name })
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"
}
disabled={uploadState.type === 'uploading' || uploadState.type === 'sending'}
onChange={e => {
onChange={(e) => {
setMessage(e.currentTarget.value);
startTyping();
onChange(e);
}}
onFocus={onFocus}
onBlur={onBlur} />
onBlur={onBlur}
/>
<Action>
<IconButton onClick={send}>
{/*<IconButton onClick={emojiPicker}>
<HappyAlt size={20} />
</IconButton>*/}
<IconButton
className="mobile"
onClick={send}
onMouseDown={(e) => e.preventDefault()}>
<Send size={20} />
</IconButton>
</Action>
</Base>
</>
)
}
export default connectState<Omit<Props, "dispatcher" | "draft">>(MessageBox, (state, { channel }) => {
return {
draft: state.drafts[channel._id]
}
}, true)
);
});
src/components/common/messaging/SystemMessage.tsx
View file @ 1ac5de17
import { User } from "revolt.js";
import { observer } from "mobx-react-lite";
import { Message } from "revolt.js/dist/maps/Messages";
import { User } from "revolt.js/dist/maps/Users";
import styled from "styled-components";
import UserShort from "../user/UserShort";
import { TextReact } from "../../../lib/i18n";
import { attachContextMenu } from "preact-context-menu";
import { MessageObject } from "../../../context/revoltjs/util";
import { TextReact } from "../../../lib/i18n";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import UserShort from "../user/UserShort";
import MessageBase, { MessageDetail, MessageInfo } from "./MessageBase";
import { useForceUpdate, useUser } from "../../../context/revoltjs/hooks";
const SystemContent = styled.div`
gap: 4px;
......@@ -30,120 +35,136 @@ type SystemMessageParsed =
interface Props {
attachContext?: boolean;
message: MessageObject;
message: Message;
highlight?: boolean;
hideInfo?: boolean;
}
export function SystemMessage({ attachContext, message }: Props) {
const ctx = useForceUpdate();
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 data: SystemMessageParsed;
let content = message.content;
if (typeof content === "object") {
switch (content.type) {
let children;
switch (data.type) {
case "text":
data = content;
children = <span>{data.content}</span>;
break;
case "user_added":
case "user_remove":
data = {
type: content.type,
user: useUser(content.id, ctx) as User,
by: useUser(content.by, ctx) as User
};
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":
data = {
type: content.type,
user: useUser(content.id, ctx) as User
};
children = (
<TextReact
id={`app.main.channel.system.${data.type}`}
fields={{
user: <UserShort user={data.user} />,
}}
/>
);
break;
case "channel_renamed":
data = {
type: "channel_renamed",
name: content.name,
by: useUser(content.by, ctx) as User
};
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":
data = {
type: content.type,
by: useUser(content.by, ctx) as User
};
children = (
<TextReact
id={`app.main.channel.system.${data.type}`}
fields={{
user: <UserShort user={data.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
onContextMenu={attachContext ? attachContextMenu('Menu',
{ message, contextualChannel: message.channel }
) : undefined}>
<MessageInfo>
<MessageDetail message={message} position="left" />
</MessageInfo>
<SystemContent>{children}</SystemContent>
</MessageBase>
);
}
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
View file @ 1ac5de17
.attachment {
border-radius: 6px;
margin: .125rem 0 .125rem;
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;
}
&[data-has-content="true"] {
margin-top: 4px;
}
&.image {
cursor: pointer;
}
&.video {
.actions {
padding: 10px 12px;
border-radius: 6px 6px 0 0;
}
video {
width: 100%;
border-radius: 0 0 6px 6px;
}
}
&.audio {
gap: 4px;
padding: 6px;
display: flex;
border-radius: 6px;
max-width: 100%;
flex-direction: column;
width: var(--attachment-default-width);
background: var(--secondary-background);
max-width: 400px;
> audio {
width: 100%;
......@@ -43,20 +28,20 @@
&.file {
> div {
width: 400px;
padding: 12px;
max-width: 100%;
user-select: none;
width: fit-content;
border-radius: 6px;
border-radius: var(--border-radius);
width: var(--attachment-default-width);
}
}
&.text {
display: flex;
width: 100%;
overflow: hidden;
max-width: 800px;
border-radius: 6px;
flex-direction: column;
grid-auto-columns: unset;
max-width: var(--attachment-max-text-width);
.textContent {
height: 140px;
......@@ -65,18 +50,18 @@
overflow-y: auto;
border-radius: 0 !important;
background: var(--secondary-header);
pre {
margin: 0;
}
pre code {
font-family: "Fira Mono", sans-serif;
font-family: var(--monospace-font), sans-serif;
}
&[data-loading="true"] {
display: flex;
> * {
flex-grow: 1;
}
......@@ -85,35 +70,22 @@
}
}
.actions {
gap: 8px;
padding: 8px;
display: flex;
overflow: none;
.margin {
margin-top: 4px;
}
.container {
max-width: 100%;
align-items: center;
flex-direction: row;
color: var(--foreground);
background: var(--secondary-background);
overflow: hidden;
width: fit-content;
> svg {
flex-shrink: 0;
> :first-child {
width: min(var(--attachment-max-width), 100%, var(--width));
}
.info {
display: flex;
flex-direction: column;
flex-grow: 1;
> span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
.filesize {
font-size: 10px;
color: var(--secondary-foreground);
}
}
.container,
.attachment,
.image {
border-radius: var(--border-radius);
}
src/components/common/messaging/attachments/Attachment.tsx
View file @ 1ac5de17
import TextFile from "./TextFile";
import { Text } from "preact-i18n";
import classNames from "classnames";
import { Attachment as AttachmentI } from "revolt-api/types/Autumn";
import styles from "./Attachment.module.scss";
import AttachmentActions from "./AttachmentActions";
import classNames from "classnames";
import { useContext, useState } from "preact/hooks";
import { AppContext } from "../../../../context/revoltjs/RevoltClient";
import { Attachment as AttachmentRJS } from "revolt.js/dist/api/objects";
import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
import { AppContext } from "../../../../context/revoltjs/RevoltClient";
import AttachmentActions from "./AttachmentActions";
import { SizedGrid } from "./Grid";
import Spoiler from "./Spoiler";
import TextFile from "./TextFile";
interface Props {
attachment: AttachmentRJS;
attachment: AttachmentI;
hasContent: boolean;
}
const MAX_ATTACHMENT_WIDTH = 480;
const MAX_ATTACHMENT_HEIGHT = 640;
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 maxWidth = Math.min(useContext(MessageAreaWidthContext), MAX_ATTACHMENT_WIDTH);
const url = client.generateFileURL(attachment, { width: MAX_ATTACHMENT_WIDTH * 1.5 }, true);
let width = 0,
height = 0;
if (metadata.type === 'Image' || metadata.type === 'Video') {
let limitingWidth = Math.min(
maxWidth,
metadata.width
);
let limitingHeight = Math.min(
MAX_ATTACHMENT_HEIGHT,
metadata.height
);
const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_"));
// Calculate smallest possible WxH.
width = Math.min(
limitingWidth,
limitingHeight * (metadata.width / metadata.height)
);
height = Math.min(
limitingHeight,
limitingWidth * (metadata.height / metadata.width)
);
}
const url = client.generateFileURL(
attachment,
{ width: MAX_ATTACHMENT_WIDTH * 1.5 },
true,
);
switch (metadata.type) {
case "Image": {
return (
<div
style={{ width }}
className={styles.container}
onClick={() => spoiler && setSpoiler(false)}
>
{spoiler && (
<div className={styles.overflow}>
<div style={{ width, height }}>
<span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
</div>
</div>
)}
<SizedGrid
width={metadata.width}
height={metadata.height}
className={classNames({
[styles.margin]: hasContent,
spoiler,
})}>
<img
src={url}
alt={filename}
data-spoiler={spoiler}
data-has-content={hasContent}
className={classNames(styles.attachment, styles.image)}
className={styles.image}
loading="lazy"
onClick={() =>
openScreen({ id: "image_viewer", attachment })
}
onMouseDown={ev =>
ev.button === 1 &&
window.open(url, "_blank")
onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank")
}
style={{ width, height }}
/>
</div>
);
}
case "Audio": {
return (
<div
className={classNames(styles.attachment, styles.audio)}
data-has-content={hasContent}
>
<AttachmentActions attachment={attachment} />
<audio src={url} controls />
</div>
{spoiler && <Spoiler set={setSpoiler} />}
</SizedGrid>
);
}
case "Video": {
return (
<div
className={styles.container}
onClick={() => spoiler && setSpoiler(false)}>
{spoiler && (
<div className={styles.overflow}>
<div style={{ width, height }}>
<span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
</div>
</div>
)}
<div
style={{ width }}
data-spoiler={spoiler}
data-has-content={hasContent}
className={classNames(styles.attachment, styles.video)}
>
<AttachmentActions attachment={attachment} />
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
style={{ width, height }}
onMouseDown={ev =>
ev.button === 1 &&
window.open(url, "_blank")
loading="lazy"
width={metadata.width}
height={metadata.height}
onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank")
}
/>
</div>
{spoiler && <Spoiler set={setSpoiler} />}
</SizedGrid>
</div>
);
}
case "Audio": {
return (
<div
className={classNames(styles.attachment, styles.audio)}
data-has-content={hasContent}>
<AttachmentActions attachment={attachment} />
<audio src={url} controls />
</div>
);
}
case 'Text': {
case "Text": {
return (
<div
className={classNames(styles.attachment, styles.text)}
data-has-content={hasContent}
>
data-has-content={hasContent}>
<TextFile attachment={attachment} />
<AttachmentActions attachment={attachment} />
</div>
);
}
default: {
return (
<div
className={classNames(styles.attachment, styles.file)}
data-has-content={hasContent}
>
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
View file @ 1ac5de17
import { useContext } from 'preact/hooks';
import styles from './Attachment.module.scss';
import IconButton from '../../../ui/IconButton';
import { Attachment } from "revolt.js/dist/api/objects";
import { determineFileSize } from '../../../../lib/fileSize';
import { AppContext } from '../../../../context/revoltjs/RevoltClient';
import { Download, ExternalLink, File, Headphones, Video } from '@styled-icons/feather';
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;
......@@ -16,74 +27,105 @@ export default function AttachmentActions({ attachment }: Props) {
const url = client.generateFileURL(attachment)!;
const open_url = `${url}/${filename}`;
const download_url = url.replace('attachments', 'attachments/download')
const download_url = url.replace("attachments", "attachments/download");
const filesize = determineFileSize(size as any);
const filesize = determineFileSize(size);
switch (metadata.type) {
case 'Image':
case "Image":
return (
<div className={styles.actions}>
<div className={styles.info}>
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>{metadata.width + 'x' + metadata.height} ({filesize})</span>
</div>
<a href={open_url} target="_blank">
<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>
<ExternalLink size={24} />
<LinkExternal size={24} />
</IconButton>
</a>
<a href={download_url} download target="_blank">
<a
href={download_url}
className={styles.downloadIcon}
download
target="_blank"
rel="noreferrer">
<IconButton>
<Download size={24} />
</IconButton>
</a>
</div>
)
case 'Audio':
);
case "Audio":
return (
<div className={styles.actions}>
<Headphones size={24} strokeWidth={1.5} />
<div className={styles.info}>
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>{filesize}</span>
</div>
<a href={download_url} download target="_blank">
<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} strokeWidth={1.5} />
<Download size={24} />
</IconButton>
</a>
</div>
)
case 'Video':
);
case "Video":
return (
<div className={styles.actions}>
<Video size={24} strokeWidth={1.5} />
<div className={styles.info}>
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>{metadata.width + 'x' + metadata.height} ({filesize})</span>
</div>
<a href={download_url} download target="_blank">
<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} strokeWidth={1.5}/>
<Download size={24} />
</IconButton>
</a>
</div>
)
);
default:
return (
<div className={styles.actions}>
<File size={24} strokeWidth={1.5} />
<div className={styles.info}>
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>{filesize}</span>
</div>
<a href={download_url} download target="_blank">
<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} strokeWidth={1.5} />
<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
View file @ 1ac5de17
import { Text } from "preact-i18n";
import UserShort from "../../user/UserShort";
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 Markdown from "../../../markdown/Markdown";
import { CornerUpRight } from "@styled-icons/feather";
import { useUser } from "../../../../context/revoltjs/hooks";
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: string
index: number
id: string
channel: Channel;
index: number;
id: string;
}
export const ReplyBase = styled.div<{ head?: boolean, fail?: boolean, preview?: boolean }>`
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;
margin-left: 30px;
user-select: none;
margin-bottom: 4px;
align-items: center;
color: var(--secondary-foreground);
svg {
color: var(--tertiary-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;
}*/
}
${ props => props.fail && css`
> svg:first-child {
flex-shrink: 0;
transform: scaleX(-1);
color: var(--tertiary-foreground);
` }
}
${ props => props.head && css`
margin-top: 12px;
` }
${(props) =>
props.fail &&
css`
color: var(--tertiary-foreground);
`}
${ props => props.preview && css`
margin-left: 0;
` }
${(props) =>
props.head &&
css`
margin-top: 12px;
`}
${(props) =>
props.preview &&
css`
margin-left: 0;
`}
`;
export function MessageReply({ index, channel, id }: Props) {
const view = useRenderState(channel);
if (view?.type !== 'RENDER') return null;
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]);
const message = view.messages.find(x => x._id === id);
if (!message) {
return (
<ReplyBase head={index === 0} fail>
<CornerUpRight size={16} />
<span><Text id="app.main.channel.misc.failed_load" /></span>
<span>
<Text id="app.main.channel.misc.failed_load" />
</span>
</ReplyBase>
)
);
}
const user = useUser(message.author);
const history = useHistory();
return (
<ReplyBase head={index === 0}>
<CornerUpRight size={16} />
<UserShort user={user} size={16} />
<Markdown disallowBigEmoji content={(message.content as string).split('\n').shift()} />
{message.author?.relationship === RelationshipStatus.Blocked ? (
<Text id="app.main.channel.misc.blocked_user" />
) : (
<>
{message.author_id === SYSTEM_USER_ID ? (
<SystemMessage message={message} hideInfo />
) : (
<>
<div className="user">
<UserShort user={message.author} size={16} />
</div>
<div
className="content"
onClick={() => {
const channel = message.channel!;
if (
channel.channel_type === "TextChannel"
) {
console.log(
`/server/${channel.server_id}/channel/${channel._id}/${message._id}`,
);
history.push(
`/server/${channel.server_id}/channel/${channel._id}/${message._id}`,
);
} else {
history.push(
`/channel/${channel._id}/${message._id}`,
);
}
}}>
{message.attachments && (
<>
<File size={16} />
<em>
{message.attachments.length > 1 ? (
<Text id="app.main.channel.misc.sent_multiple_files" />
) : (
<Text id="app.main.channel.misc.sent_file" />
)}
</em>
</>
)}
<Markdown
disallowBigEmoji
content={(
message.content as string
).replace(/\n/g, " ")}
/>
</div>
</>
)}
</>
)}
</ReplyBase>
)
}
);
});
src/components/common/messaging/attachments/Spoiler.tsx 0 → 100644
View file @ 1ac5de17
import styled from "styled-components";
import { Text } from "preact-i18n";
const Base = styled.div`
display: grid;
place-items: center;
z-index: 1;
grid-area: 1 / 1;
cursor: pointer;
user-select: none;
text-transform: uppercase;
span {
padding: 8px;
color: var(--foreground);
background: var(--primary-background);
border-radius: calc(var(--border-radius) * 4);
}
`;
interface Props {
set: (v: boolean) => void;
}
export default function Spoiler({ set }: Props) {
return (
<Base onClick={() => set(false)}>
<span>
<Text id="app.main.channel.misc.spoiler_attachment" />
</span>
</Base>
);
}
src/components/common/messaging/attachments/TextFile.tsx
View file @ 1ac5de17
import axios from 'axios';
import Preloader from '../../../ui/Preloader';
import styles from './Attachment.module.scss';
import { Attachment } from 'revolt.js/dist/api/objects';
import { useContext, useEffect, useState } from 'preact/hooks';
import RequiresOnline from '../../../../context/revoltjs/RequiresOnline';
import { AppContext, StatusContext } from '../../../../context/revoltjs/RevoltClient';
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;
......@@ -13,45 +19,62 @@ interface Props {
const fileCache: { [key: string]: string } = {};
export default function TextFile({ attachment }: Props) {
const [ content, setContent ] = useState<undefined | string>(undefined);
const [ loading, setLoading ] = useState(false);
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 (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);
let cached = fileCache[attachment._id];
const cached = fileCache[attachment._id];
if (cached) {
setContent(cached);
setLoading(false);
} else {
axios.get(url)
.then(res => {
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)
})
console.error(
"Failed to load text file. [",
attachment._id,
"]",
);
setLoading(false);
});
}
}, [ content, loading, status ]);
}, [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
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
View file @ 1ac5de17
import { Text } from "preact-i18n";
/* eslint-disable react-hooks/rules-of-hooks */
import { XCircle, Plus, Share, X, File } from "@styled-icons/boxicons-regular";
import styled from "styled-components";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import { determineFileSize } from "../../../../lib/fileSize";
import { CAN_UPLOAD_AT_ONCE, UploadState } from "../MessageBox";
import { useEffect, useState } from 'preact/hooks';
import { determineFileSize } from '../../../../lib/fileSize';
import { XCircle, Plus, Share, X, FileText } from "@styled-icons/feather";
interface Props {
state: UploadState,
addFile: () => void,
removeFile: (index: number) => void
state: UploadState;
addFile: () => void;
removeFile: (index: number) => void;
}
const Container = styled.div`
......@@ -37,7 +41,7 @@ const Entry = styled.div`
span.fn {
margin: auto;
font-size: .8em;
font-size: 0.8em;
overflow: hidden;
max-width: 180px;
text-align: center;
......@@ -47,7 +51,7 @@ const Entry = styled.div`
}
span.size {
font-size: .6em;
font-size: 0.6em;
color: var(--tertiary-foreground);
text-align: center;
}
......@@ -65,7 +69,7 @@ const Divider = styled.div`
width: 4px;
height: 130px;
flex-shrink: 0;
border-radius: 4px;
border-radius: var(--border-radius);
background: var(--tertiary-background);
`;
......@@ -75,8 +79,8 @@ const EmptyEntry = styled.div`
display: grid;
flex-shrink: 0;
cursor: pointer;
border-radius: 4px;
place-items: center;
border-radius: var(--border-radius);
background: var(--primary-background);
transition: 0.1s ease background-color;
......@@ -89,15 +93,16 @@ const PreviewBox = styled.div`
display: grid;
grid-template: "main" 100px / minmax(100px, 1fr);
justify-items: center;
background: var(--primary-background);
overflow: hidden;
cursor: pointer;
border-radius: 4px;
.icon, .overlay { grid-area: main }
overflow: hidden;
border-radius: var(--border-radius);
background: var(--primary-background);
.icon,
.overlay {
grid-area: main;
}
.icon {
height: 100px;
......@@ -112,7 +117,7 @@ const PreviewBox = styled.div`
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
......@@ -126,68 +131,103 @@ const PreviewBox = styled.div`
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">
<FileText 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('');
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(() => {
let url: string = URL.createObjectURL(file);
const url: string = URL.createObjectURL(file);
setURL(url);
return () => URL.revokeObjectURL(url);
}, [ file ]);
}, [file]);
return (
<Entry className={index >= CAN_UPLOAD_AT_ONCE ? 'fade' : ''}>
<Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}>
<PreviewBox onClick={remove}>
<img class="icon" src={url} alt={file.name} />
<div class="overlay"><XCircle size={36} /></div>
<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;
if (state.type === "none") return null;
return (
<Container>
<Carousel>
{ state.files.map((file, index) =>
<>
{ index === CAN_UPLOAD_AT_ONCE && <Divider /> }
<FileEntry index={index} file={file} key={file.name} remove={state.type === 'attached' ? () => removeFile(index) : undefined} />
</>
) }
{ state.type === 'attached' && <EmptyEntry onClick={addFile}><Plus size={48} /></EmptyEntry> }
{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> }
{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
View file @ 1ac5de17
import { Text } from "preact-i18n";
import { DownArrowAlt } from "@styled-icons/boxicons-regular";
import styled from "styled-components";
import { ArrowDown } from "@styled-icons/feather";
import { SingletonMessageRenderer, useRenderState } from "../../../../lib/renderer/Singleton";
import { Text } from "preact-i18n";
import {
SingletonMessageRenderer,
useRenderState,
} from "../../../../lib/renderer/Singleton";
const Bar = styled.div`
z-index: 10;
......@@ -9,18 +14,20 @@ const Bar = styled.div`
> div {
top: -26px;
height: 28px;
width: 100%;
position: absolute;
border-radius: 4px 4px 0 0;
display: flex;
align-items: center;
cursor: pointer;
font-size: 13px;
padding: 4px 8px;
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);
justify-content: space-between;
transition: color ease-in-out .08s;
border-radius: var(--border-radius) var(--border-radius) 0 0;
> div {
display: flex;
......@@ -35,19 +42,31 @@ const Bar = styled.div`
&: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;
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" /> <ArrowDown size={18} strokeWidth={2}/></div>
<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
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 UserShort from "../../user/UserShort";
import Markdown from "../../../markdown/Markdown";
import { AtSign, CornerUpRight, XCircle } from "@styled-icons/feather";
import { Text } from "preact-i18n";
import { StateUpdater, useEffect } from "preact/hooks";
import { ReplyBase } from "../attachments/MessageReply";
import { Reply } from "../../../../redux/reducers/queue";
import { useUsers } from "../../../../context/revoltjs/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[]>
channel: string;
replies: Reply[];
setReplies: StateUpdater<Reply[]>;
}
const Base = styled.div`
display: flex;
padding: 0 22px;
height: 30px;
padding: 0 12px;
user-select: none;
align-items: center;
background: var(--message-box);
div {
> div {
flex-grow: 1;
}
margin-bottom: 0;
.actions {
gap: 12px;
display: flex;
&::before {
display: none;
}
}
.toggle {
gap: 4px;
display: flex;
font-size: 0.7em;
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 function ReplyBar({ channel, replies, setReplies }: Props) {
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, mention: false } ]));
}, [ replies ]);
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;
if (view?.type !== "RENDER") return null;
const ids = replies.map((x) => x.id);
const messages = view.messages.filter((x) => ids.includes(x._id));
const ids = replies.map(x => x.id);
const messages = view.messages.filter(x => ids.includes(x._id));
const users = useUsers(messages.map(x => x.author));
return (
<div>
{ replies.map((reply, index) => {
let message = messages.find(x => reply.id === x._id);
if (!message) return;
let user = users.find(x => message!.author === x?._id);
if (!user) return;
{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>
<CornerUpRight size={22} />
<UserShort user={user} size={16} />
<Markdown disallowBigEmoji content={(message.content as string).split('\n').shift()} />
<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 } : _))}>
<IconButton
onClick={() =>
setReplies(
replies.map((_, i) =>
i === index
? { ..._, mention: !_.mention }
: _,
),
)
}>
<span class="toggle">
<AtSign size={16} /> { reply.mention ? 'ON' : 'OFF' }
<At size={16} />{" "}
{reply.mention ? "ON" : "OFF"}
</span>
</IconButton>
<IconButton onClick={() => setReplies(replies.filter((_, i) => i !== index))}>
<IconButton
onClick={() =>
setReplies(
replies.filter((_, i) => i !== index),
)
}>
<XCircle size={16} />
</IconButton>
</span>
</Base>
)
}) }
);
})}
</div>
)
}
);
});
src/components/common/messaging/bars/TypingIndicator.tsx
View file @ 1ac5de17
import { User } from 'revolt.js';
import { observer } from "mobx-react-lite";
import { RelationshipStatus } from "revolt-api/types/Users";
import { Channel } from "revolt.js/dist/maps/Channels";
import styled from "styled-components";
import { Text } from "preact-i18n";
import styled from 'styled-components';
import { useContext } from 'preact/hooks';
import { connectState } from '../../../../redux/connector';
import { useUsers } from '../../../../context/revoltjs/hooks';
import { TypingUser } from '../../../../redux/reducers/typing';
import { AppContext } from '../../../../context/revoltjs/RevoltClient';
interface Props {
typing?: TypingUser[]
channel: Channel;
}
const Base = styled.div`
......@@ -32,7 +30,7 @@ const Base = styled.div`
.avatars {
display: flex;
img {
width: 16px;
height: 16px;
......@@ -54,25 +52,36 @@ const Base = styled.div`
}
`;
export function TypingIndicator({ typing }: Props) {
if (typing && typing.length > 0) {
const client = useContext(AppContext);
const users = useUsers(typing.map(x => x.id))
.filter(x => typeof x !== 'undefined') as User[];
export default observer(({ channel }: Props) => {
const users = channel.typing.filter(
(x) =>
typeof x !== "undefined" &&
x._id !== x.client.user!._id &&
x.relationship !== RelationshipStatus.Blocked,
);
users.sort((a, b) => a._id.toUpperCase().localeCompare(b._id.toUpperCase()));
if (users.length > 0) {
users.sort((a, b) =>
a!._id.toUpperCase().localeCompare(b!._id.toUpperCase()),
);
let text;
if (users.length >= 5) {
text = <Text id="app.main.channel.typing.several" />;
} else if (users.length > 1) {
const usersCopy = [...users];
const userlist = [...users].map((x) => x!.username);
const user = userlist.pop();
/*for (let i = 0; i < userlist.length - 1; i++) {
userlist.splice(i * 2 + 1, 0, ", ");
}*/
text = (
<Text
id="app.main.channel.typing.multiple"
fields={{
user: usersCopy.pop()?.username,
userlist: usersCopy.map(x => x.username).join(", ")
user,
userlist: userlist.join(", "),
}}
/>
);
......@@ -80,7 +89,7 @@ export function TypingIndicator({ typing }: Props) {
text = (
<Text
id="app.main.channel.typing.single"
fields={{ user: users[0].username }}
fields={{ user: users[0]!.username }}
/>
);
}
......@@ -89,9 +98,11 @@ export function TypingIndicator({ typing }: Props) {
<Base>
<div>
<div className="avatars">
{users.map(user => (
{users.map((user) => (
<img
src={client.users.getAvatarURL(user._id, { max_side: 256 }, true)}
key={user!._id}
loading="eager"
src={user!.generateAvatarURL({ max_side: 256 })}
/>
))}
</div>
......@@ -102,10 +113,4 @@ export function TypingIndicator({ typing }: Props) {
}
return null;
}
export default connectState<{ id: string }>(TypingIndicator, (state, props) => {
return {
typing: state.typing && state.typing[props.id]
};
});
src/components/common/messaging/embed/Embed.module.scss
View file @ 1ac5de17
......@@ -3,7 +3,7 @@
iframe {
border: none;
border-radius: 4px;
border-radius: var(--border-radius);
}
&.image {
......@@ -27,8 +27,8 @@
padding: 12px;
width: fit-content;
border-radius: 4px;
background: var(--primary-header);
border-radius: var(--border-radius);
.siteinfo {
display: flex;
......@@ -80,8 +80,8 @@
overflow: hidden;
display: -webkit-box;
white-space: pre-wrap;
// -webkit-line-clamp: 6;
// -webkit-box-orient: vertical;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}
.footer {
......@@ -91,7 +91,43 @@
img.image {
cursor: pointer;
object-fit: contain;
border-radius: 3px;
border-radius: var(--border-radius);
}
}
}
// TODO: unified actions css (see attachment.module.scss for other actions css)
.actions {
display: grid;
grid-template:
"name open" auto
"size open" auto
/ minmax(20px, 1fr) min-content;
align-items: center;
column-gap: 12px;
width: 100%;
padding: 8px;
overflow: none;
color: var(--foreground);
background: var(--secondary-background);
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.filesize {
grid-area: size;
font-size: 10px;
color: var(--secondary-foreground);
}
.openIcon {
grid-area: open;
}
}
src/components/common/messaging/embed/Embed.tsx
View file @ 1ac5de17
import classNames from 'classnames';
import EmbedMedia from './EmbedMedia';
import { Embed as EmbedI } from "revolt-api/types/January";
import styles from "./Embed.module.scss";
import { useContext } from 'preact/hooks';
import { Embed as EmbedRJS } from "revolt.js/dist/api/objects";
import { useIntermediate } from '../../../../context/intermediate/Intermediate';
import { MessageAreaWidthContext } from '../../../../pages/channels/messaging/MessageArea';
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: EmbedRJS;
embed: EmbedI;
}
const MAX_EMBED_WIDTH = 480;
......@@ -16,61 +20,56 @@ const CONTAINER_PADDING = 24;
const MAX_PREVIEW_SIZE = 150;
export default function Embed({ embed }: Props) {
// ! FIXME: temp code
// ! add proxy function to client
function proxyImage(url: string) {
return 'https://jan.revolt.chat/proxy?url=' + encodeURIComponent(url);
}
const client = useClient();
const { openScreen } = useIntermediate();
const maxWidth = Math.min(useContext(MessageAreaWidthContext) - CONTAINER_PADDING, MAX_EMBED_WIDTH);
const maxWidth = Math.min(
useContext(MessageAreaWidthContext) - CONTAINER_PADDING,
MAX_EMBED_WIDTH,
);
function calculateSize(w: number, h: number): { width: number, height: number } {
let limitingWidth = Math.min(
maxWidth,
w
);
function calculateSize(
w: number,
h: number,
): { width: number; height: number } {
const limitingWidth = Math.min(maxWidth, w);
let limitingHeight = Math.min(
MAX_EMBED_HEIGHT,
h
);
const limitingHeight = Math.min(MAX_EMBED_HEIGHT, h);
// Calculate smallest possible WxH.
let width = Math.min(
limitingWidth,
limitingHeight * (w / h)
);
const width = Math.min(limitingWidth, limitingHeight * (w / h));
let height = Math.min(
limitingHeight,
limitingWidth * (h / w)
);
const height = Math.min(limitingHeight, limitingWidth * (h / w));
return { width, height };
}
switch (embed.type) {
case 'Website': {
case "Website": {
// Determine special embed size.
let mw, mh;
let largeMedia = (embed.special && embed.special.type !== 'None') || embed.image?.size === 'Large';
const largeMedia =
(embed.special && embed.special.type !== "None") ||
embed.image?.size === "Large";
switch (embed.special?.type) {
case 'YouTube':
case 'Bandcamp': {
case "YouTube":
case "Bandcamp": {
mw = embed.video?.width ?? 1280;
mh = embed.video?.height ?? 720;
break;
}
case 'Twitch': {
case "Twitch": {
mw = 1280;
mh = 720;
break;
}
default: {
if (embed.image?.size === 'Preview') {
if (embed.image?.size === "Preview") {
mw = MAX_EMBED_WIDTH;
mh = Math.min(embed.image.height ?? 0, MAX_PREVIEW_SIZE);
mh = Math.min(
embed.image.height ?? 0,
MAX_PREVIEW_SIZE,
);
} else {
mw = embed.image?.width ?? MAX_EMBED_WIDTH;
mh = embed.image?.height ?? 0;
......@@ -78,51 +77,91 @@ export default function Embed({ embed }: Props) {
}
}
let { width, height } = calculateSize(mw, mh);
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
borderInlineStartColor:
embed.color ?? "var(--tertiary-background)",
width: width + CONTAINER_PADDING,
}}>
<div>
{ embed.site_name && <div className={styles.siteinfo}>
{ embed.icon_url && <img className={styles.favicon} src={proxyImage(embed.icon_url)} draggable={false} onError={e => e.currentTarget.style.display = 'none'} /> }
<div className={styles.site}>{ embed.site_name } </div>
</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}>{ embed.title }</a></span> }
{ embed.description && <div className={styles.description}>{ embed.description }</div> }
{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} /> }
{largeMedia && (
<EmbedMedia embed={embed} height={height} />
)}
</div>
{
!largeMedia && <div>
<EmbedMedia embed={embed} width={height * ((embed.image?.width ?? 0) / (embed.image?.height ?? 0))} height={height} />
{!largeMedia && (
<div>
<EmbedMedia
embed={embed}
width={
height *
((embed.image?.width ?? 0) /
(embed.image?.height ?? 0))
}
height={height}
/>
</div>
}
)}
</div>
)
);
}
case 'Image': {
case "Image": {
return (
<img className={classNames(styles.embed, styles.image)}
<img
className={classNames(styles.embed, styles.image)}
style={calculateSize(embed.width, embed.height)}
src={proxyImage(embed.url)}
src={client.proxyFile(embed.url)}
type="text/html"
frameBorder="0"
onClick={() =>
openScreen({ id: "image_viewer", embed })
}
onMouseDown={ev =>
ev.button === 1 &&
window.open(embed.url, "_blank")
loading="lazy"
onClick={() => openScreen({ id: "image_viewer", embed })}
onMouseDown={(ev) =>
ev.button === 1 && window.open(embed.url, "_blank")
}
/>
)
);
}
default: return null;
default:
return null;
}
}
src/components/common/messaging/embed/EmbedMedia.tsx
View file @ 1ac5de17
import styles from './Embed.module.scss';
import { Embed } from "revolt.js/dist/api/objects";
import { useIntermediate } from '../../../../context/intermediate/Intermediate';
/* 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;
......@@ -9,66 +13,87 @@ interface Props {
}
export default function EmbedMedia({ embed, width, height }: Props) {
// ! FIXME: temp code
// ! add proxy function to client
function proxyImage(url: string) {
return 'https://jan.revolt.chat/proxy?url=' + encodeURIComponent(url);
}
if (embed.type !== 'Website') return null;
if (embed.type !== "Website") return null;
const { openScreen } = useIntermediate();
const client = useClient();
switch (embed.special?.type) {
case 'YouTube': return (
<iframe
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"
style={{ height, }} />
)
case 'Spotify': return (
<iframe
src={`https://open.spotify.com/embed/${embed.special.content_type}/${embed.special.id}`}
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"
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
style={{ height }} />;
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) {
let url = embed.image.url;
const url = embed.image.url;
return (
<img
className={styles.image}
src={proxyImage(url)}
src={client.proxyFile(url)}
loading="lazy"
style={{ width, height }}
onClick={() =>
openScreen({ id: "image_viewer", embed: embed.image })
openScreen({
id: "image_viewer",
embed: embed.image,
})
}
onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank")
}
onMouseDown={ev =>
ev.button === 1 &&
window.open(url, "_blank")
} />
/>
);
}
}
......
src/components/common/messaging/embed/EmbedMediaActions.tsx
View file @ 1ac5de17
import styles from './Embed.module.scss';
import IconButton from '../../../ui/IconButton';
import { ExternalLink } from '@styled-icons/feather';
import { EmbedImage } from "revolt.js/dist/api/objects";
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();
const filename = embed.url.split("/").pop();
return (
<div className={styles.actions}>
<div className={styles.info}>
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>{embed.width + 'x' + embed.height}</span>
</div>
<a href={embed.url} target="_blank">
<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>
<ExternalLink size={24} />
<LinkExternal size={24} />
</IconButton>
</a>
</div>
)
);
}
src/components/common/user/UserCheckbox.tsx
View file @ 1ac5de17
import { User } from "revolt.js";
import UserIcon from "./UserIcon";
import { User } from "revolt.js/dist/maps/Users";
import Checkbox, { CheckboxProps } from "../../ui/Checkbox";
import UserIcon from "./UserIcon";
import { Username } from "./UserShort";
type UserProps = Omit<CheckboxProps, "children"> & { user: User };
export default function UserCheckbox({ user, ...props }: UserProps) {
return (
<Checkbox {...props}>
<UserIcon target={user} size={32} />
{user.username}
<Username user={user} />
</Checkbox>
);
}