feat: added notification system

client/src/components/Anonymous.jsx

@@ -97,7 +97,7 @@ const Anonymous = ({ onChatClosed }) => {
 
                     {/* TODO: Use a checkbox in modal dialog instead */}
                     <Dropdown.Item onClick={() => handleClose(true)}>
-                        find new buddy
+                        Find a new buddy
                     </Dropdown.Item>
                 </Dropdown>
             </div>

client/src/components/BuddyMatcher.jsx

@@ -6,8 +6,10 @@ import Anonymous from 'components/Anonymous';
 import { useAuth } from 'src/context/AuthContext';
 import { useChat } from 'src/context/ChatContext';
 import { useNavigate } from 'react-router-dom';
+import { useNotification } from 'src/lib/notification';
 
 const BuddyMatcher = () => {
+    const { playNotification } = useNotification();
     const navigate = useNavigate();
     const { auth } = useAuth();
     const { createChat, closeChat, closeAllChats } = useChat();
@@ -64,6 +66,7 @@ const BuddyMatcher = () => {
         socket.on('close', (chatId) => {
             setIsFound(false);
             closeChat(chatId);
+            playNotification('chatClosed');
 
             if (
                 !confirm(
@@ -89,6 +92,7 @@ const BuddyMatcher = () => {
 
         socket.on('joined', ({ roomId, userIds }) => {
             localStorage.setItem('currentChatId', roomId);
+            playNotification('buddyPaired');
 
             createChat(roomId, userIds);
             setIsFound(true);

client/src/components/Chat.jsx

@@ -19,9 +19,11 @@ import { useAuth } from 'src/context/AuthContext';
 
 import useChatUtils from 'src/lib/chat';
 import MessageStatus from './MessageStatus';
+import { useNotification } from 'src/lib/notification';
 
 let senderId;
 const Chat = () => {
+    const { playNotification } = useNotification();
     const [currentChatId, setCurrentChatId] = useState(null);
     const [editing, setEditing] = useState({
         isediting: false,
@@ -57,6 +59,7 @@ const Chat = () => {
         const newMessageHandler = (message) => {
             try {
                 addMessage(message);
+                playNotification('newMessage');
             } catch {
                 logout();
             }
@@ -258,16 +261,15 @@ const Chat = () => {
             .timeout(10000)
             .emit('typing', { chatId: currentChatId, isTyping: false });
     };
-    
+
     // Clear chat when escape is pressed
     useEffect(() => {
-        const keyDownHandler = event => {
-
+        const keyDownHandler = (event) => {
             if (event.key === 'Escape' && editing.isediting) {
                 event.preventDefault();
                 cancelEdit();
-            };
-        }
+            }
+        };
 
         document.addEventListener('keydown', keyDownHandler);
 

client/src/lib/notification.js

@@ -0,0 +1,58 @@
+import ChatClosedSound from '/notifications/closed.mp3';
+import NewMessageSound from '/notifications/new_message.mp3';
+import PairedSound from '/notifications/paired.mp3';
+
+/**
+ * @typedef {'chatClosed'|'newMessage'|'buddyPaired'} NotificationEvent
+ * @typedef {{play: () => Promise<void>}} Sound
+ * @typedef {{ volume: number}} NotificationSettings
+ */
+
+/**
+ * @param {string} soundSrc
+ * @param {NotificationSettings} settings
+ * @return {Sound}
+ */
+export function useSound(soundSrc, settings) {
+    const _settings = {
+        volume: 10,
+        ...settings,
+    };
+
+    const audio = new Audio(soundSrc);
+    audio.preload = 'auto';
+    audio.volume = _settings.volume / 100;
+
+    return {
+        async play() {
+            await audio.play();
+        },
+    };
+}
+
+/**
+ *
+ * @param {NotificationSettings} settings
+ */
+export function useNotification(settings = {}) {
+    /** @type {{[event in NotificationEvent]: Sound}} */
+    const notifications = {
+        chatClosed: useSound(ChatClosedSound, settings),
+        newMessage: useSound(NewMessageSound, settings),
+        buddyPaired: useSound(PairedSound, settings),
+    };
+
+    return {
+        /**
+         *
+         * @param {NotificationEvent} event
+         */
+        async playNotification(event) {
+            if (!notifications[event]) {
+                return;
+            }
+
+            await notifications[event].play();
+        },
+    };
+}