diff --git a/web/public/static/sounds/beep.mp3 b/web/public/static/sounds/beep.mp3
new file mode 100644
index 00000000..d02e2106
Binary files /dev/null and b/web/public/static/sounds/beep.mp3 differ
diff --git a/web/public/static/sounds/juntos.mp3 b/web/public/static/sounds/juntos.mp3
new file mode 100644
index 00000000..aeadbb82
Binary files /dev/null and b/web/public/static/sounds/juntos.mp3 differ
diff --git a/web/public/static/sounds/mixkit-correct-answer-tone.mp3 b/web/public/static/sounds/mixkit-correct-answer-tone.mp3
new file mode 100644
index 00000000..cdfd445f
Binary files /dev/null and b/web/public/static/sounds/mixkit-correct-answer-tone.mp3 differ
diff --git a/web/public/static/sounds/mixkit-long-pop.mp3 b/web/public/static/sounds/mixkit-long-pop.mp3
new file mode 100644
index 00000000..e650bb27
Binary files /dev/null and b/web/public/static/sounds/mixkit-long-pop.mp3 differ
diff --git a/web/public/static/sounds/mixkit-message-pop-alert.mp3 b/web/public/static/sounds/mixkit-message-pop-alert.mp3
new file mode 100644
index 00000000..d8a83b70
Binary files /dev/null and b/web/public/static/sounds/mixkit-message-pop-alert.mp3 differ
diff --git a/web/public/static/sounds/mixkit-software-interface-start.mp3 b/web/public/static/sounds/mixkit-software-interface-start.mp3
new file mode 100644
index 00000000..759057b7
Binary files /dev/null and b/web/public/static/sounds/mixkit-software-interface-start.mp3 differ
diff --git a/web/public/static/sounds/pristine.mp3 b/web/public/static/sounds/pristine.mp3
new file mode 100644
index 00000000..ed3e3083
Binary files /dev/null and b/web/public/static/sounds/pristine.mp3 differ
diff --git a/web/src/app/NotificationManager.js b/web/src/app/Notifier.js
similarity index 69%
rename from web/src/app/NotificationManager.js
rename to web/src/app/Notifier.js
index 8834d2e3..5db6f487 100644
--- a/web/src/app/NotificationManager.js
+++ b/web/src/app/Notifier.js
@@ -1,8 +1,8 @@
-import {formatMessage, formatTitleWithDefault, openUrl, topicShortUrl} from "./utils";
+import {formatMessage, formatTitleWithDefault, openUrl, playSound, topicShortUrl} from "./utils";
import prefs from "./Prefs";
import subscriptionManager from "./SubscriptionManager";
-class NotificationManager {
+class Notifier {
async notify(subscriptionId, notification, onClickFallback) {
const subscription = await subscriptionManager.get(subscriptionId);
const shouldNotify = await this.shouldNotify(subscription, notification);
@@ -13,7 +13,8 @@ class NotificationManager {
const message = formatMessage(notification);
const title = formatTitleWithDefault(notification, shortUrl);
- console.log(`[NotificationManager, ${shortUrl}] Displaying notification ${notification.id}: ${message}`);
+ // Show notification
+ console.log(`[Notifier, ${shortUrl}] Displaying notification ${notification.id}: ${message}`);
const n = new Notification(title, {
body: message,
icon: '/static/img/favicon.png'
@@ -23,6 +24,17 @@ class NotificationManager {
} else {
n.onclick = onClickFallback;
}
+
+ // Play sound
+ const sound = await prefs.sound();
+ if (sound && sound !== "none") {
+ try {
+ await playSound(sound);
+ } catch (e) {
+ console.log(`[Notifier, ${shortUrl}] Error playing audio`, e);
+ // FIXME show no sound allowed popup
+ }
+ }
}
granted() {
@@ -48,5 +60,5 @@ class NotificationManager {
}
}
-const notificationManager = new NotificationManager();
-export default notificationManager;
+const notifier = new Notifier();
+export default notifier;
diff --git a/web/src/app/Prefs.js b/web/src/app/Prefs.js
index 359fbf6f..6acc8f96 100644
--- a/web/src/app/Prefs.js
+++ b/web/src/app/Prefs.js
@@ -1,13 +1,13 @@
import db from "./db";
class Prefs {
- async setSelectedSubscriptionId(selectedSubscriptionId) {
- db.prefs.put({key: 'selectedSubscriptionId', value: selectedSubscriptionId});
+ async setSound(sound) {
+ db.prefs.put({key: 'sound', value: sound.toString()});
}
- async selectedSubscriptionId() {
- const selectedSubscriptionId = await db.prefs.get('selectedSubscriptionId');
- return (selectedSubscriptionId) ? selectedSubscriptionId.value : "";
+ async sound() {
+ const sound = await db.prefs.get('sound');
+ return (sound) ? sound.value : "mixkit-correct-answer-tone";
}
async setMinPriority(minPriority) {
diff --git a/web/src/app/SubscriptionManager.js b/web/src/app/SubscriptionManager.js
index 17edce40..a64c3bdd 100644
--- a/web/src/app/SubscriptionManager.js
+++ b/web/src/app/SubscriptionManager.js
@@ -41,7 +41,7 @@ class SubscriptionManager {
if (exists) {
return false;
}
- await db.notifications.add({ ...notification, subscriptionId });
+ await db.notifications.add({ ...notification, subscriptionId }); // FIXME consider put() for double tab
await db.subscriptions.update(subscriptionId, {
last: notification.id
});
diff --git a/web/src/app/utils.js b/web/src/app/utils.js
index c047ff7e..c9b5b4c5 100644
--- a/web/src/app/utils.js
+++ b/web/src/app/utils.js
@@ -121,6 +121,11 @@ export const subscriptionRoute = (subscription) => {
return `/${subscription.topic}`;
}
+export const playSound = async (sound) => {
+ const audio = new Audio(`/static/sounds/${sound}.mp3`);
+ return audio.play();
+};
+
// From: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
export async function* fetchLinesIterator(fileURL, headers) {
const utf8Decoder = new TextDecoder('utf-8');
diff --git a/web/src/components/App.js b/web/src/components/App.js
index 182df349..6db04aa5 100644
--- a/web/src/components/App.js
+++ b/web/src/components/App.js
@@ -9,7 +9,7 @@ import theme from "./theme";
import connectionManager from "../app/ConnectionManager";
import Navigation from "./Navigation";
import ActionBar from "./ActionBar";
-import notificationManager from "../app/NotificationManager";
+import notifier from "../app/Notifier";
import NoTopics from "./NoTopics";
import Preferences from "./Preferences";
import {useLiveQuery} from "dexie-react-hooks";
@@ -26,6 +26,11 @@ import {subscriptionRoute} from "../app/utils";
// TODO sound
// TODO "copy url" toast
// TODO "copy link url" button
+// TODO races when two tabs are open
+// TODO sound mentions
+// https://notificationsounds.com/message-tones/pristine-609
+// https://notificationsounds.com/message-tones/juntos-607
+// https://notificationsounds.com/notification-sounds/beep-472
const App = () => {
return (
@@ -40,7 +45,7 @@ const App = () => {
const Root = () => {
const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
- const [notificationsGranted, setNotificationsGranted] = useState(notificationManager.granted());
+ const [notificationsGranted, setNotificationsGranted] = useState(notifier.granted());
const navigate = useNavigate();
const location = useLocation();
const users = useLiveQuery(() => userManager.all());
@@ -54,7 +59,7 @@ const Root = () => {
};
const handleRequestPermission = () => {
- notificationManager.maybeRequestPermission(granted => setNotificationsGranted(granted));
+ notifier.maybeRequestPermission(granted => setNotificationsGranted(granted));
};
useEffect(() => {
@@ -68,7 +73,7 @@ const Root = () => {
const added = await subscriptionManager.addNotification(subscriptionId, notification);
if (added) {
const defaultClickAction = (subscription) => navigate(subscriptionRoute(subscription)); // FIXME
- await notificationManager.notify(subscriptionId, notification, defaultClickAction)
+ await notifier.notify(subscriptionId, notification, defaultClickAction)
}
} catch (e) {
console.error(`[App] Error handling notification`, e);
diff --git a/web/src/components/Preferences.js b/web/src/components/Preferences.js
index 6f5ac0eb..a9b4e874 100644
--- a/web/src/components/Preferences.js
+++ b/web/src/components/Preferences.js
@@ -19,6 +19,7 @@ import {Paragraph} from "./styles";
import EditIcon from '@mui/icons-material/Edit';
import CloseIcon from "@mui/icons-material/Close";
import IconButton from "@mui/material/IconButton";
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
import Container from "@mui/material/Container";
import TextField from "@mui/material/TextField";
import MenuItem from "@mui/material/MenuItem";
@@ -31,6 +32,7 @@ import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import DialogActions from "@mui/material/DialogActions";
import userManager from "../app/UserManager";
+import {playSound} from "../app/utils";
const Preferences = () => {
return (
@@ -50,6 +52,7 @@ const Notifications = () => {
Notifications
+
@@ -57,8 +60,40 @@ const Notifications = () => {
);
};
+
+const Sound = () => {
+ const sound = useLiveQuery(async () => prefs.sound());
+ const handleChange = async (ev) => {
+ await prefs.setSound(ev.target.value);
+ }
+ if (!sound) {
+ return null; // While loading
+ }
+ return (
+
+
+
+
+
+
playSound(sound)} disabled={sound === "none"}>
+
+
+
+
+ )
+};
+
const MinPriority = () => {
- const minPriority = useLiveQuery(() => prefs.minPriority());
+ const minPriority = useLiveQuery(async () => prefs.minPriority());
const handleChange = async (ev) => {
await prefs.setMinPriority(ev.target.value);
}