vbatts/ntfy
1
0
Fork 0
Code Pull requests Activity

Attachments, WIP

Browse source
This commit is contained in:
Philipp Heckel 2022-03-02 20:22:53 -05:00
parent 349872bdb3
commit 7dfb2d50c7
1 changed files with 30 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
web/src/components/Notifications.js
View file

@ -1,5 +1,5 @@
import Container from "@mui/material/Container"; import Container from "@mui/material/Container";
import {CardContent, Link, Stack} from "@mui/material"; import {CardActions, CardContent, Link, Stack} from "@mui/material";
import Card from "@mui/material/Card"; import Card from "@mui/material/Card";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import * as React from "react"; import * as React from "react";
@ -9,6 +9,8 @@ import CloseIcon from '@mui/icons-material/Close';
import {Paragraph, VerticallyCenteredContainer} from "./styles"; import {Paragraph, VerticallyCenteredContainer} from "./styles";
import {useLiveQuery} from "dexie-react-hooks"; import {useLiveQuery} from "dexie-react-hooks";
import db from "../app/db"; import db from "../app/db";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
const Notifications = (props) => { const Notifications = (props) => {
const subscription = props.subscription; const subscription = props.subscription;
@ -47,6 +49,9 @@ const NotificationItem = (props) => {
console.log(`[Notifications] Deleting notification ${notification.id} from ${subscriptionId}`); console.log(`[Notifications] Deleting notification ${notification.id} from ${subscriptionId}`);
await db.notifications.delete(notification.id); // FIXME await db.notifications.delete(notification.id); // FIXME
} }
const attachment = notification.attachment;
const expired = attachment?.expires <= Date.now()/1000;
const image = attachment?.type.startsWith("image/") && !expired;
return ( return (
<Card sx={{ minWidth: 275 }}> <Card sx={{ minWidth: 275 }}>
<CardContent> <CardContent>
@ -64,12 +69,36 @@ const NotificationItem = (props) => {
</Typography> </Typography>
{notification.title && <Typography variant="h5" component="div">{formatTitle(notification)}</Typography>} {notification.title && <Typography variant="h5" component="div">{formatTitle(notification)}</Typography>}
<Typography variant="body1" sx={{ whiteSpace: 'pre-line' }}>{formatMessage(notification)}</Typography> <Typography variant="body1" sx={{ whiteSpace: 'pre-line' }}>{formatMessage(notification)}</Typography>
{image && <Box
component="img"
src={`${attachment.url}`}
loading="lazy"
sx={{
marginTop: 2,
borderRadius: '4px',
boxShadow: 2,
maxWidth: 1,
maxHeight: '400px'
}}
/>}
{attachment && !image &&
<Typography>
<b>{attachment.name}</b><br/>
{attachment.size}, {attachment.expires}
</Typography>}
{tags && <Typography sx={{ fontSize: 14 }} color="text.secondary">Tags: {tags}</Typography>} {tags && <Typography sx={{ fontSize: 14 }} color="text.secondary">Tags: {tags}</Typography>}
</CardContent> </CardContent>
{attachment &&
<CardActions>
<Button onClick={() => navigator.clipboard.writeText(attachment.url)}>Copy URL</Button>
<Button onClick={() => window.open(attachment.url)}>Open</Button>
</CardActions>
}
</Card> </Card>
); );
} }
const NothingHereYet = (props) => { const NothingHereYet = (props) => {
const shortUrl = topicShortUrl(props.subscription.baseUrl, props.subscription.topic); const shortUrl = topicShortUrl(props.subscription.baseUrl, props.subscription.topic);
return ( return (