From f3c955b0f818f96912535bf31d64f46022114b23 Mon Sep 17 00:00:00 2001
From: binwiederhier <philipp.heckel@gmail.com>
Date: Thu, 1 Jun 2023 22:13:31 -0400
Subject: [PATCH] PoC: Load external images
---
web/public/config.js | 2 +-
web/src/components/Notifications.jsx | 14 ++++++++++----
2 files changed, 11 insertions(+), 5 deletions(-)
diff --git a/web/public/config.js b/web/public/config.js
index 2f46d65c..7bcad73f 100644
--- a/web/public/config.js
+++ b/web/public/config.js
@@ -7,7 +7,7 @@
var config = {
base_url: window.location.origin, // Change to test against a different server
- app_root: "/app",
+ app_root: "/",
enable_login: true,
enable_signup: true,
enable_payments: false,
diff --git a/web/src/components/Notifications.jsx b/web/src/components/Notifications.jsx
index 2faf2fd2..385b487b 100644
--- a/web/src/components/Notifications.jsx
+++ b/web/src/components/Notifications.jsx
@@ -287,14 +287,15 @@ const NotificationItem = (props) => {
const Attachment = (props) => {
const { t } = useTranslation();
+ const [ imageError, setImageError ] = useState(false);
const { attachment } = props;
const expired = attachment.expires && attachment.expires < Date.now() / 1000;
const expires = attachment.expires && attachment.expires > Date.now() / 1000;
const displayableImage = !expired && attachment.type && attachment.type.startsWith("image/");
// Unexpired image
- if (displayableImage) {
- return <Image attachment={attachment} />;
+ if (!imageError) {
+ return <Image attachment={attachment} onError={() => setImageError(true)} />;
}
// Anything else: Show box
@@ -376,14 +377,19 @@ const Attachment = (props) => {
const Image = (props) => {
const { t } = useTranslation();
const [open, setOpen] = useState(false);
+ const [loaded, setLoaded] = useState(false);
return (
- <>
+ <div style={{
+ display: loaded ? "block" : "none",
+ }}>
<Box
component="img"
src={props.attachment.url}
loading="lazy"
alt={t("notifications_attachment_image")}
onClick={() => setOpen(true)}
+ onLoad={() => setLoaded(true)}
+ onError={props.onError}
sx={{
marginTop: 2,
borderRadius: "4px",
@@ -413,7 +419,7 @@ const Image = (props) => {
/>
</Fade>
</Modal>
- </>
+ </div>
);
};