Embed resources

web/src/components/ActionBar.js

@@ -20,6 +20,7 @@ import NotificationsIcon from '@mui/icons-material/Notifications';
 import NotificationsOffIcon from '@mui/icons-material/NotificationsOff';
 import api from "../app/Api";
 import subscriptionManager from "../app/SubscriptionManager";
+import logo from "../img/ntfy.svg"
 
 const ActionBar = (props) => {
     const location = useLocation();
@@ -44,7 +45,7 @@ const ActionBar = (props) => {
                 >
                     <MenuIcon />
                 </IconButton>
-                <Box component="img" src="/static/img/ntfy.svg" sx={{
+                <Box component="img" src={logo} sx={{
                     display: { xs: 'none', sm: 'block' },
                     marginRight: '10px',
                     height: '28px'
@@ -152,11 +153,7 @@ const SettingsIcons = (props) => {
                     >
                         <Paper>
                             <ClickAwayListener onClickAway={handleClose}>
-                                <MenuList
-                                    autoFocusItem={open}
-                                    id="composition-menu"
-                                    onKeyDown={handleListKeyDown}
-                                >
+                                <MenuList autoFocusItem={open} onKeyDown={handleListKeyDown}>
                                     <MenuItem onClick={handleSendTestMessage}>Send test notification</MenuItem>
                                     <MenuItem onClick={handleClearAll}>Clear all notifications</MenuItem>
                                     <MenuItem onClick={handleUnsubscribe}>Unsubscribe</MenuItem>

web/src/components/Notifications.js

@@ -21,6 +21,16 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import subscriptionManager from "../app/SubscriptionManager";
 import InfiniteScroll from "react-infinite-scroll-component";
+import fileApp from "../img/file-app.svg";
+import fileAudio from "../img/file-audio.svg";
+import fileDocument from "../img/file-document.svg";
+import fileImage from "../img/file-image.svg";
+import fileVideo from "../img/file-video.svg";
+import priority1 from "../img/priority-1.svg";
+import priority2 from "../img/priority-2.svg";
+import priority4 from "../img/priority-4.svg";
+import priority5 from "../img/priority-5.svg";
+import logoOutline from "../img/ntfy-outline.svg";
 
 const Notifications = (props) => {
     if (props.mode === "all") {
@@ -113,7 +123,7 @@ const NotificationItem = (props) => {
                     {date}
                     {[1,2,4,5].includes(notification.priority) &&
                         <img
-                            src={`/static/img/priority-${notification.priority}.svg`}
+                            src={priorityFiles[notification.priority]}
                             alt={`Priority ${notification.priority}`}
                             style={{ verticalAlign: 'bottom' }}
                         />}
@@ -139,6 +149,13 @@ const NotificationItem = (props) => {
     );
 }
 
+const priorityFiles = {
+    1: priority1,
+    2: priority2,
+    4: priority4,
+    5: priority5
+};
+
 const Attachment = (props) => {
     const attachment = props.attachment;
     const expired = attachment.expires && attachment.expires < Date.now()/1000;
@@ -218,7 +235,7 @@ const Image = (props) => {
         <>
             <Box
                 component="img"
-                src={`${props.attachment.url}`}
+                src={props.attachment.url}
                 loading="lazy"
                 onClick={() => setOpen(true)}
                 sx={{
@@ -239,7 +256,7 @@ const Image = (props) => {
                 <Fade in={open}>
                     <Box
                         component="img"
-                        src={`${props.attachment.url}`}
+                        src={props.attachment.url}
                         loading="lazy"
                         sx={{
                             maxWidth: 1,
@@ -261,22 +278,22 @@ const Icon = (props) => {
     const type = props.type;
     let imageFile;
     if (!type) {
-        imageFile = 'file-document.svg';
+        imageFile = fileDocument;
     } else if (type.startsWith('image/')) {
-        imageFile = 'file-image.svg';
+        imageFile = fileImage;
     } else if (type.startsWith('video/')) {
-        imageFile = 'file-video.svg';
+        imageFile = fileVideo;
     } else if (type.startsWith('audio/')) {
-        imageFile = 'file-audio.svg';
+        imageFile = fileAudio;
     } else if (type === "application/vnd.android.package-archive") {
-        imageFile = 'file-app.svg';
+        imageFile = fileApp;
     } else {
-        imageFile = 'file-document.svg';
+        imageFile = fileDocument;
     }
     return (
         <Box
             component="img"
-            src={`/static/img/${imageFile}`}
+            src={imageFile}
             loading="lazy"
             sx={{
                 width: '28px',
@@ -291,7 +308,7 @@ const NoNotifications = (props) => {
     return (
         <VerticallyCenteredContainer maxWidth="xs">
             <Typography variant="h5" align="center" sx={{ paddingBottom: 1 }}>
-                <img src="/static/img/ntfy-outline.svg" height="64" width="64" alt="No notifications"/><br />
+                <img src={logoOutline} height="64" width="64" alt="No notifications"/><br />
                 You haven't received any notifications for this topic yet.
             </Typography>
             <Paragraph>
@@ -317,7 +334,7 @@ const NoNotificationsWithoutSubscription = (props) => {
     return (
         <VerticallyCenteredContainer maxWidth="xs">
             <Typography variant="h5" align="center" sx={{ paddingBottom: 1 }}>
-                <img src="/static/img/ntfy-outline.svg" height="64" width="64" alt="No notifications"/><br />
+                <img src={logoOutline} height="64" width="64" alt="No notifications"/><br />
                 You haven't received any notifications.
             </Typography>
             <Paragraph>
@@ -342,7 +359,7 @@ const NoSubscriptions = () => {
     return (
         <VerticallyCenteredContainer maxWidth="xs">
             <Typography variant="h5" align="center" sx={{ paddingBottom: 1 }}>
-                <img src="/static/img/ntfy-outline.svg" height="64" width="64" alt="No topics"/><br />
+                <img src={logoOutline} height="64" width="64" alt="No topics"/><br />
                 It looks like you don't have any subscriptions yet.
             </Typography>
             <Paragraph>

web/src/components/Preferences.js

@@ -75,12 +75,12 @@ const Sound = () => {
                 <FormControl fullWidth variant="standard" sx={{ margin: 1 }}>
                     <Select value={sound} onChange={handleChange}>
                         <MenuItem value={"none"}>No sound</MenuItem>
-                        <MenuItem value={"mixkit-correct-answer-tone"}>Ding</MenuItem>
+                        <MenuItem value={"ding"}>Ding</MenuItem>
                         <MenuItem value={"juntos"}>Juntos</MenuItem>
                         <MenuItem value={"pristine"}>Pristine</MenuItem>
-                        <MenuItem value={"mixkit-software-interface-start"}>Dadum</MenuItem>
-                        <MenuItem value={"mixkit-message-pop-alert"}>Pop</MenuItem>
-                        <MenuItem value={"mixkit-long-pop"}>Pop swoosh</MenuItem>
+                        <MenuItem value={"dadum"}>Dadum</MenuItem>
+                        <MenuItem value={"pop"}>Pop</MenuItem>
+                        <MenuItem value={"pop-swoosh"}>Pop swoosh</MenuItem>
                         <MenuItem value={"beep"}>Beep</MenuItem>
                     </Select>
                 </FormControl>