mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-10 01:03:36 -05:00
Create separate ImageFile component for image attachments
This commit is contained in:
parent
1b4d1e73df
commit
88c9775e23
3 changed files with 56 additions and 22 deletions
|
@ -92,8 +92,10 @@
|
|||
|
||||
.image {
|
||||
cursor: pointer;
|
||||
}
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.loading {
|
||||
background: var(--background);
|
||||
&.loading {
|
||||
background: var(--background);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -11,6 +11,7 @@ import AttachmentActions from "./AttachmentActions";
|
|||
import { SizedGrid } from "./Grid";
|
||||
import Spoiler from "./Spoiler";
|
||||
import TextFile from "./TextFile";
|
||||
import ImageFile from "./ImageFile";
|
||||
|
||||
interface Props {
|
||||
attachment: AttachmentI;
|
||||
|
@ -21,11 +22,8 @@ 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_"));
|
||||
// only used in image attachments
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const url = client.generateFileURL(
|
||||
attachment,
|
||||
|
@ -41,24 +39,9 @@ export default function Attachment({ attachment, hasContent }: Props) {
|
|||
height={metadata.height}
|
||||
className={classNames({
|
||||
[styles.margin]: hasContent,
|
||||
[styles.loading]: loading,
|
||||
spoiler,
|
||||
})}>
|
||||
<img
|
||||
src={url}
|
||||
alt={filename}
|
||||
className={styles.image}
|
||||
loading="lazy"
|
||||
onClick={() =>
|
||||
openScreen({ id: "image_viewer", attachment })
|
||||
}
|
||||
onLoad={() =>
|
||||
setLoading(false)
|
||||
}
|
||||
onMouseDown={(ev) =>
|
||||
ev.button === 1 && window.open(url, "_blank")
|
||||
}
|
||||
/>
|
||||
<ImageFile attachment={attachment} />
|
||||
{spoiler && <Spoiler set={setSpoiler} />}
|
||||
</SizedGrid>
|
||||
);
|
||||
|
|
49
src/components/common/messaging/attachments/ImageFile.tsx
Normal file
49
src/components/common/messaging/attachments/ImageFile.tsx
Normal file
|
@ -0,0 +1,49 @@
|
|||
import {Attachment} 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";
|
||||
|
||||
enum ImageLoadingState
|
||||
{
|
||||
Loading,
|
||||
Loaded,
|
||||
Error
|
||||
}
|
||||
|
||||
interface Props {
|
||||
attachment: Attachment;
|
||||
}
|
||||
|
||||
export default function ImageFile({ attachment }: Props)
|
||||
{
|
||||
const [loading, setLoading] = useState(ImageLoadingState.Loading);
|
||||
const client = useContext(AppContext);
|
||||
const { openScreen } = useIntermediate();
|
||||
const url = client.generateFileURL(attachment)!;
|
||||
|
||||
return <img
|
||||
src={url}
|
||||
alt={attachment.filename}
|
||||
loading="lazy"
|
||||
className={classNames(styles.image, {
|
||||
[styles.loading]: loading !== ImageLoadingState.Loaded
|
||||
})}
|
||||
onClick={() =>
|
||||
openScreen({id: "image_viewer", attachment})
|
||||
}
|
||||
onMouseDown={(ev) =>
|
||||
ev.button === 1 && window.open(url, "_blank")
|
||||
}
|
||||
onLoad={() =>
|
||||
setLoading(ImageLoadingState.Loaded)
|
||||
}
|
||||
onError={() =>
|
||||
setLoading(ImageLoadingState.Error)
|
||||
}
|
||||
|
||||
/>
|
||||
}
|
Loading…
Reference in a new issue