From 1b4d1e73df5c9343c16352ef9d086e54bd93d7c4 Mon Sep 17 00:00:00 2001 From: Michaili K Date: Sun, 15 Aug 2021 12:59:00 +0200 Subject: [PATCH 1/2] Add (basic implementation of) background for loading images --- .../common/messaging/attachments/Attachment.module.scss | 4 ++++ src/components/common/messaging/attachments/Attachment.tsx | 6 ++++++ 2 files changed, 10 insertions(+) diff --git a/src/components/common/messaging/attachments/Attachment.module.scss b/src/components/common/messaging/attachments/Attachment.module.scss index 929a2c41..c241c71e 100644 --- a/src/components/common/messaging/attachments/Attachment.module.scss +++ b/src/components/common/messaging/attachments/Attachment.module.scss @@ -93,3 +93,7 @@ .image { cursor: pointer; } + +.loading { + background: var(--background); +} diff --git a/src/components/common/messaging/attachments/Attachment.tsx b/src/components/common/messaging/attachments/Attachment.tsx index 06335799..bd831958 100644 --- a/src/components/common/messaging/attachments/Attachment.tsx +++ b/src/components/common/messaging/attachments/Attachment.tsx @@ -24,6 +24,8 @@ export default function Attachment({ attachment, hasContent }: Props) { 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, @@ -39,6 +41,7 @@ export default function Attachment({ attachment, hasContent }: Props) { height={metadata.height} className={classNames({ [styles.margin]: hasContent, + [styles.loading]: loading, spoiler, })}> openScreen({ id: "image_viewer", attachment }) } + onLoad={() => + setLoading(false) + } onMouseDown={(ev) => ev.button === 1 && window.open(url, "_blank") } From 88c9775e230bb6ff0c8f2021f09ac2c42aed6a7a Mon Sep 17 00:00:00 2001 From: Michaili K Date: Sun, 15 Aug 2021 18:53:42 +0200 Subject: [PATCH 2/2] Create separate ImageFile component for image attachments --- .../attachments/Attachment.module.scss | 8 +-- .../messaging/attachments/Attachment.tsx | 21 +------- .../messaging/attachments/ImageFile.tsx | 49 +++++++++++++++++++ 3 files changed, 56 insertions(+), 22 deletions(-) create mode 100644 src/components/common/messaging/attachments/ImageFile.tsx diff --git a/src/components/common/messaging/attachments/Attachment.module.scss b/src/components/common/messaging/attachments/Attachment.module.scss index c241c71e..34b48195 100644 --- a/src/components/common/messaging/attachments/Attachment.module.scss +++ b/src/components/common/messaging/attachments/Attachment.module.scss @@ -92,8 +92,10 @@ .image { cursor: pointer; -} + width: 100%; + height: 100%; -.loading { - background: var(--background); + &.loading { + background: var(--background); + } } diff --git a/src/components/common/messaging/attachments/Attachment.tsx b/src/components/common/messaging/attachments/Attachment.tsx index bd831958..5f0e062c 100644 --- a/src/components/common/messaging/attachments/Attachment.tsx +++ b/src/components/common/messaging/attachments/Attachment.tsx @@ -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, })}> - {filename} - openScreen({ id: "image_viewer", attachment }) - } - onLoad={() => - setLoading(false) - } - onMouseDown={(ev) => - ev.button === 1 && window.open(url, "_blank") - } - /> + {spoiler && } ); diff --git a/src/components/common/messaging/attachments/ImageFile.tsx b/src/components/common/messaging/attachments/ImageFile.tsx new file mode 100644 index 00000000..8dae6a0c --- /dev/null +++ b/src/components/common/messaging/attachments/ImageFile.tsx @@ -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 {attachment.filename} + openScreen({id: "image_viewer", attachment}) + } + onMouseDown={(ev) => + ev.button === 1 && window.open(url, "_blank") + } + onLoad={() => + setLoading(ImageLoadingState.Loaded) + } + onError={() => + setLoading(ImageLoadingState.Error) + } + + /> +}