Merge pull request #70 from MichailiK/feature/message/image-loading-background

This commit is contained in:
Paul Makles 2021-08-15 18:04:24 +01:00 committed by GitHub
commit a17487606f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 57 additions and 13 deletions

View file

@ -92,4 +92,10 @@
.image {
cursor: pointer;
width: 100%;
height: 100%;
&.loading {
background: var(--background);
}
}

View file

@ -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,7 +22,6 @@ 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_"));
@ -41,18 +41,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
[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")
}
/>
<ImageFile attachment={attachment} />
{spoiler && <Spoiler set={setSpoiler} />}
</SizedGrid>
);

View 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)
}
/>
}