Support sounds

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;

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) {

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
         });

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');