forked from mirrors/ntfy
Attachments, WIP
This commit is contained in:
parent
349872bdb3
commit
7dfb2d50c7
1 changed files with 30 additions and 1 deletions
|
@ -1,5 +1,5 @@
|
|||
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 Typography from "@mui/material/Typography";
|
||||
import * as React from "react";
|
||||
|
@ -9,6 +9,8 @@ import CloseIcon from '@mui/icons-material/Close';
|
|||
import {Paragraph, VerticallyCenteredContainer} from "./styles";
|
||||
import {useLiveQuery} from "dexie-react-hooks";
|
||||
import db from "../app/db";
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
|
||||
const Notifications = (props) => {
|
||||
const subscription = props.subscription;
|
||||
|
@ -47,6 +49,9 @@ const NotificationItem = (props) => {
|
|||
console.log(`[Notifications] Deleting notification ${notification.id} from ${subscriptionId}`);
|
||||
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 (
|
||||
<Card sx={{ minWidth: 275 }}>
|
||||
<CardContent>
|
||||
|
@ -64,12 +69,36 @@ const NotificationItem = (props) => {
|
|||
</Typography>
|
||||
{notification.title && <Typography variant="h5" component="div">{formatTitle(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>}
|
||||
</CardContent>
|
||||
{attachment &&
|
||||
<CardActions>
|
||||
<Button onClick={() => navigator.clipboard.writeText(attachment.url)}>Copy URL</Button>
|
||||
<Button onClick={() => window.open(attachment.url)}>Open</Button>
|
||||
</CardActions>
|
||||
}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const NothingHereYet = (props) => {
|
||||
const shortUrl = topicShortUrl(props.subscription.baseUrl, props.subscription.topic);
|
||||
return (
|
||||
|
|
Loading…
Reference in a new issue