added notification sound

dailyjs/basic-call/public/public

@@ -1 +0,0 @@
-../basic-call/public

dailyjs/text-chat/README.md

@@ -7,6 +7,7 @@
 - Use [sendAppMessage](https://docs.daily.co/reference#%EF%B8%8F-sendappmessage) to send messages
 - Listen for incoming messages using the call object `app-message` event
 - Extend the basic call demo with a chat provider and aside
+- Show a notification bubble on chat tray button when a new message is received
 - Demonstrate how to play a sound whenever a message is received
 
 Please note: this demo is not currently mobile optimised

dailyjs/text-chat/components/ChatAside/ChatAside.js

@@ -4,22 +4,32 @@ import { Button } from '@dailyjs/shared/components/Button';
 import { TextInput } from '@dailyjs/shared/components/Input';
 import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
 import { useChat } from '../../contexts/ChatProvider';
+import { useMessageSound } from '../../hooks/useMessageSound';
 
 export const CHAT_ASIDE = 'chat';
 
 export const ChatAside = () => {
   const { showAside, setShowAside } = useUIState();
-  const { sendMessage, chatHistory, setHasNewMessages } = useChat();
+  const { sendMessage, chatHistory, hasNewMessages, setHasNewMessages } =
+    useChat();
   const [newMessage, setNewMessage] = useState('');
+  const playMessageSound = useMessageSound();
+
   const chatWindowRef = useRef();
 
   useEffect(() => {
-    // Clear out any new message otifications if we're showing the chat screen
+    // Clear out any new message notifications if we're showing the chat screen
     if (showAside === CHAT_ASIDE) {
       setHasNewMessages(false);
     }
   }, [showAside, chatHistory.length, setHasNewMessages]);
 
+  useEffect(() => {
+    if (hasNewMessages && showAside !== CHAT_ASIDE) {
+      playMessageSound();
+    }
+  }, [playMessageSound, showAside, hasNewMessages]);
+
   useEffect(() => {
     if (chatWindowRef.current) {
       chatWindowRef.current.scrollTop = chatWindowRef.current.scrollHeight;

dailyjs/text-chat/contexts/ChatProvider.js

@@ -29,8 +29,6 @@ export const ChatProvider = ({ children }) => {
       ]);
 
       setHasNewMessages(true);
-
-      // Play notification here...
     },
     [callObject]
   );

dailyjs/text-chat/hooks/useMessageSound.js

@@ -0,0 +1,19 @@
+import { useEffect, useMemo } from 'react';
+
+import { useSound } from '@dailyjs/shared/hooks/useSound';
+import { debounce } from 'debounce';
+
+/**
+ * Convenience hook to play `join.mp3` when participants join the call
+ */
+export const useMessageSound = () => {
+  const { load, play } = useSound('message.mp3');
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  return useMemo(() => debounce(() => play(), 5000, true), [play]);
+};
+
+export default useMessageSound;