abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-06 17:11:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Format and automatically fix linted code.

Browse Source
This commit is contained in:
Paul
2021-07-10 15:57:29 +01:00
parent 1a59bb1abd
commit b3386ade33
87 changed files with 789 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/common/messaging/attachments/Attachment.tsx
View File

@@ -8,9 +8,9 @@ import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { AppContext } from "../../../../context/revoltjs/RevoltClient";
import AttachmentActions from "./AttachmentActions";
import TextFile from "./TextFile";
import { SizedGrid } from "./Grid";
import Spoiler from "./Spoiler";
import TextFile from "./TextFile";
interface Props {
attachment: AttachmentRJS;
@@ -34,9 +34,16 @@ export default function Attachment({ attachment, hasContent }: Props) {
switch (metadata.type) {
case "Image": {
return (
<SizedGrid width={metadata.width} height={metadata.height}
className={classNames({ [styles.margin]: hasContent, spoiler })}>
<img src={url} alt={filename}
<SizedGrid
width={metadata.width}
height={metadata.height}
className={classNames({
[styles.margin]: hasContent,
spoiler,
})}>
<img
src={url}
alt={filename}
className={styles.image}
loading="lazy"
onClick={() =>
@@ -44,20 +51,28 @@ export default function Attachment({ attachment, hasContent }: Props) {
}
onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank")
} />
{ spoiler && <Spoiler set={setSpoiler} /> }
}
/>
{spoiler && <Spoiler set={setSpoiler} />}
</SizedGrid>
)
);
}
case "Video": {
return (
<div className={classNames(styles.container, { [styles.margin]: hasContent })}
style={{ '--width': metadata.width + 'px' }}>
<div
className={classNames(styles.container, {
[styles.margin]: hasContent,
})}
style={{ "--width": `${metadata.width}px` }}>
<AttachmentActions attachment={attachment} />
<SizedGrid width={metadata.width} height={metadata.height}
<SizedGrid
width={metadata.width}
height={metadata.height}
className={classNames({ spoiler })}>
<video src={url} alt={filename}
<video
src={url}
alt={filename}
controls
loading="lazy"
width={metadata.width}
@@ -66,10 +81,10 @@ export default function Attachment({ attachment, hasContent }: Props) {
ev.button === 1 && window.open(url, "_blank")
}
/>
{ spoiler && <Spoiler set={setSpoiler} /> }
{spoiler && <Spoiler set={setSpoiler} />}
</SizedGrid>
</div>
)
);
}
case "Audio": {
@@ -82,7 +97,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
</div>
);
}
case "Text": {
return (
<div

22
src/components/common/messaging/attachments/AttachmentActions.tsx
View File

@@ -37,12 +37,13 @@ export default function AttachmentActions({ attachment }: Props) {
<div className={classNames(styles.actions, styles.imageAction)}>
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>
{metadata.width + "x" + metadata.height} ({filesize})
{`${metadata.width}x${metadata.height}`} ({filesize})
</span>
<a
href={open_url}
target="_blank"
className={styles.iconType}>
className={styles.iconType}
rel="noreferrer">
<IconButton>
<LinkExternal size={24} />
</IconButton>
@@ -51,7 +52,8 @@ export default function AttachmentActions({ attachment }: Props) {
href={download_url}
className={styles.downloadIcon}
download
target="_blank">
target="_blank"
rel="noreferrer">
<IconButton>
<Download size={24} />
</IconButton>
@@ -68,7 +70,8 @@ export default function AttachmentActions({ attachment }: Props) {
href={download_url}
className={styles.downloadIcon}
download
target="_blank">
target="_blank"
rel="noreferrer">
<IconButton>
<Download size={24} />
</IconButton>
@@ -81,13 +84,14 @@ export default function AttachmentActions({ attachment }: Props) {
<Video size={24} className={styles.iconType} />
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>
{metadata.width + "x" + metadata.height} ({filesize})
{`${metadata.width}x${metadata.height}`} ({filesize})
</span>
<a
href={download_url}
className={styles.downloadIcon}
download
target="_blank">
target="_blank"
rel="noreferrer">
<IconButton>
<Download size={24} />
</IconButton>
@@ -104,7 +108,8 @@ export default function AttachmentActions({ attachment }: Props) {
<a
href={open_url}
target="_blank"
className={styles.externalType}>
className={styles.externalType}
rel="noreferrer">
<IconButton>
<LinkExternal size={24} />
</IconButton>
@@ -114,7 +119,8 @@ export default function AttachmentActions({ attachment }: Props) {
href={download_url}
className={styles.downloadIcon}
download
target="_blank">
target="_blank"
rel="noreferrer">
<IconButton>
<Download size={24} />
</IconButton>

33
src/components/common/messaging/attachments/Grid.tsx
View File

@@ -1,4 +1,5 @@
import styled from "styled-components";
import { Children } from "../../../../types/Preact";
const Grid = styled.div`
@@ -9,7 +10,8 @@ const Grid = styled.div`
max-height: min(var(--attachment-max-height), var(--height));
aspect-ratio: var(--aspect-ratio);
img, video {
img,
video {
min-width: 100%;
min-height: 100%;
@@ -23,35 +25,40 @@ const Grid = styled.div`
}
&.spoiler {
img, video {
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,
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}
<Grid
{...divProps}
style={{
...style,
"--width": width + 'px',
"--height": height + 'px',
"--width": `${width}px`,
"--height": `${height}px`,
"--aspect-ratio": width / height,
}}>
{ children }
{children}
</Grid>
)
);
}

80
src/components/common/messaging/attachments/MessageReply.tsx
View File

@@ -1,21 +1,21 @@
import { Reply } from "@styled-icons/boxicons-regular";
import { File } from "@styled-icons/boxicons-solid";
import { useHistory } from "react-router-dom";
import { SYSTEM_USER_ID } from "revolt.js";
import { Users } from "revolt.js/dist/api/objects";
import styled, { css } from "styled-components";
import { Text } from "preact-i18n";
import { useEffect, useLayoutEffect, useState } from "preact/hooks";
import { useRenderState } from "../../../../lib/renderer/Singleton";
import { useForceUpdate, useUser } from "../../../../context/revoltjs/hooks";
import { mapMessage, MessageObject } from "../../../../context/revoltjs/util";
import Markdown from "../../../markdown/Markdown";
import UserShort from "../../user/UserShort";
import { SystemMessage } from "../SystemMessage";
import { Users } from "revolt.js/dist/api/objects";
import { useHistory } from "react-router-dom";
import { useEffect, useLayoutEffect, useState } from "preact/hooks";
import { mapMessage, MessageObject } from "../../../../context/revoltjs/util";
interface Props {
channel: string;
@@ -73,7 +73,7 @@ export const ReplyBase = styled.div<{
align-items: center;
flex-direction: row;
transition: filter 1s ease-in-out;
transition: transform ease-in-out .1s;
transition: transform ease-in-out 0.1s;
filter: brightness(1);
&:hover {
@@ -123,7 +123,9 @@ export function MessageReply({ index, channel, id }: Props) {
const view = useRenderState(channel);
if (view?.type !== "RENDER") return null;
const [ message, setMessage ] = useState<MessageObject | undefined>(undefined);
const [message, setMessage] = useState<MessageObject | 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);
@@ -131,10 +133,11 @@ export function MessageReply({ index, channel, id }: Props) {
if (m) {
setMessage(m);
} else {
ctx.client.channels.fetchMessage(channel, id)
.then(m => setMessage(mapMessage(m)));
ctx.client.channels
.fetchMessage(channel, id)
.then((m) => setMessage(mapMessage(m)));
}
}, [ view.messages ]);
}, [view.messages]);
if (!message) {
return (
@@ -153,32 +156,47 @@ export function MessageReply({ index, channel, id }: Props) {
return (
<ReplyBase head={index === 0}>
<Reply size={16} />
{ user?.relationship === Users.Relationship.Blocked ?
<>Blocked User</> :
{user?.relationship === Users.Relationship.Blocked ? (
<>Blocked User</>
) : (
<>
{message.author === SYSTEM_USER_ID ? (
<SystemMessage message={message} hideInfo />
) : <>
<div className="user"><UserShort user={user} size={16} /></div>
<div className="content" onClick={() => {
let obj = ctx.client.channels.get(channel);
if (obj?.channel_type === 'TextChannel') {
history.push(`/server/${obj.server}/channel/${obj._id}/${message._id}`);
} else {
history.push(`/channel/${channel}/${message._id}`);
}
}}>
{message.attachments && message.attachments.length > 0 && (
<File size={16} />
)}
<Markdown
disallowBigEmoji
content={(message.content as string).replace(/\n/g, " ")}
/>
</div>
</>}
) : (
<>
<div className="user">
<UserShort user={user} size={16} />
</div>
<div
className="content"
onClick={() => {
const obj =
ctx.client.channels.get(channel);
if (obj?.channel_type === "TextChannel") {
history.push(
`/server/${obj.server}/channel/${obj._id}/${message._id}`,
);
} else {
history.push(
`/channel/${channel}/${message._id}`,
);
}
}}>
{message.attachments &&
message.attachments.length > 0 && (
<File size={16} />
)}
<Markdown
disallowBigEmoji
content={(
message.content as string
).replace(/\n/g, " ")}
/>
</div>
</>
)}
</>
}
)}
</ReplyBase>
);
}

13
src/components/common/messaging/attachments/Spoiler.tsx
View File

@@ -1,5 +1,6 @@
import styled from "styled-components";
import { Text } from "preact-i18n";
import styled from "styled-components"
const Base = styled.div`
display: grid;
@@ -21,13 +22,15 @@ const Base = styled.div`
`;
interface Props {
set: (v: boolean) => void
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>
<span>
<Text id="app.main.channel.misc.spoiler_attachment" />
</span>
</Base>
)
}
);
}

2
src/components/common/messaging/attachments/TextFile.tsx
View File

@@ -39,7 +39,7 @@ export default function TextFile({ attachment }: Props) {
setLoading(true);
let cached = fileCache[attachment._id];
const cached = fileCache[attachment._id];
if (cached) {
setContent(cached);
setLoading(false);