CodeMirror/ntfy
1
0
Fork 0
mirror of https://github.com/binwiederhier/ntfy.git synced 2024-05-19 20:03:44 +12:00
Code Issues Projects Releases Wiki Activity

PoC: Load external images

Browse source
This commit is contained in:
binwiederhier 2023-06-01 22:13:31 -04:00
parent f58c1e4c84
commit f3c955b0f8
2 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/public/config.js
View file

@ -7,7 +7,7 @@
var config = { var config = {
base_url: window.location.origin, // Change to test against a different server base_url: window.location.origin, // Change to test against a different server
app_root: "/app", app_root: "/",
enable_login: true, enable_login: true,
enable_signup: true, enable_signup: true,
enable_payments: false, enable_payments: false,

14
web/src/components/Notifications.jsx
View file

@ -287,14 +287,15 @@ const NotificationItem = (props) => {
const Attachment = (props) => { const Attachment = (props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const [ imageError, setImageError ] = useState(false);
const { attachment } = props; const { attachment } = props;
const expired = attachment.expires && attachment.expires < Date.now() / 1000; const expired = attachment.expires && attachment.expires < Date.now() / 1000;
const expires = 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/"); const displayableImage = !expired && attachment.type && attachment.type.startsWith("image/");
// Unexpired image // Unexpired image
if (displayableImage) { if (!imageError) {
return <Image attachment={attachment} />; return <Image attachment={attachment} onError={() => setImageError(true)} />;
} }
// Anything else: Show box // Anything else: Show box
@ -376,14 +377,19 @@ const Attachment = (props) => {
const Image = (props) => { const Image = (props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [loaded, setLoaded] = useState(false);
return ( return (
<> <div style={{
display: loaded ? "block" : "none",
}}>
<Box <Box
component="img" component="img"
src={props.attachment.url} src={props.attachment.url}
loading="lazy" loading="lazy"
alt={t("notifications_attachment_image")} alt={t("notifications_attachment_image")}
onClick={() => setOpen(true)} onClick={() => setOpen(true)}
onLoad={() => setLoaded(true)}
onError={props.onError}
sx={{ sx={{
marginTop: 2, marginTop: 2,
borderRadius: "4px", borderRadius: "4px",
@ -413,7 +419,7 @@ const Image = (props) => {
/> />
</Fade> </Fade>
</Modal> </Modal>
</> </div>
); );
}; };