Support sounds

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

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
             </Typography>
             <PrefGroup>
+                <Sound/>
                 <MinPriority/>
                 <DeleteAfter/>
             </PrefGroup>
@@ -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 (
+        <Pref title="Notification sound">
+            <div style={{ display: 'flex', width: '100%' }}>
+                <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={"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={"beep"}>Beep</MenuItem>
+                    </Select>
+                </FormControl>
+                <IconButton onClick={() => playSound(sound)} disabled={sound === "none"}>
+                    <PlayArrowIcon />
+                </IconButton>
+            </div>
+        </Pref>
+    )
+};
+
 const MinPriority = () => {
-    const minPriority = useLiveQuery(() => prefs.minPriority());
+    const minPriority = useLiveQuery(async () => prefs.minPriority());
     const handleChange = async (ev) => {
         await prefs.setMinPriority(ev.target.value);
     }