added join sound

dailyjs/basic-call/components/Room/Room.js

@@ -9,6 +9,7 @@ import { useMediaDevices } from '@dailyjs/shared/contexts/MediaDeviceProvider';
 import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
 import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
 import { useWaitingRoom } from '@dailyjs/shared/contexts/WaitingRoomProvider';
+import useJoinSound from '@dailyjs/shared/hooks/useJoinSound';
 import { ReactComponent as IconCameraOff } from '@dailyjs/shared/icons/camera-off-md.svg';
 import { ReactComponent as IconCameraOn } from '@dailyjs/shared/icons/camera-on-md.svg';
 import { ReactComponent as IconLeave } from '@dailyjs/shared/icons/leave-md.svg';
@@ -28,6 +29,8 @@ export const Room = ({ onLeave }) => {
   const { setShowModal, showModal } = useWaitingRoom();
   const { localParticipant } = useParticipants();
 
+  useJoinSound();
+
   const toggleCamera = (newState) => {
     if (!callObject) return false;
     return callObject.setLocalVideo(newState);

dailyjs/basic-call/package.json

@@ -9,7 +9,6 @@
   },
   "dependencies": {
     "@dailyjs/shared": "*",
-    "debounce": "^1.2.1",
     "next": "^10.2.0",
     "pluralize": "^8.0.0",
     "react": "^17.0.2",

dailyjs/basic-call/pages/not-found.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import MessageCard from '../components/MessageCard';
+import MessageCard from '@dailyjs/shared/components/MessageCard';
 
 export default function RoomNotFound() {
   return (

dailyjs/shared/hooks/useJoinSound.js

@@ -0,0 +1,39 @@
+import { useEffect, useCallback, useMemo } from 'react';
+
+import { debounce } from 'debounce';
+import { useCallState } from '../contexts/CallProvider';
+import { useSound } from './useSound';
+
+/**
+ * Convenience hook to play `join.mp3` when first other participants joins.
+ */
+export const useJoinSound = () => {
+  const { callObject } = useCallState();
+  const { load, play } = useSound('join.mp3');
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const debouncedPlay = useMemo(() => debounce(() => play(), 200), [play]);
+
+  useEffect(() => {
+    if (!callObject) return false;
+
+    const handleParticipantJoined = () => {
+      debouncedPlay();
+    };
+
+    callObject.on('participant-joined', handleParticipantJoined);
+
+    setTimeout(() => {
+      handleParticipantJoined();
+    }, 2000);
+
+    return () => {
+      callObject.off('participant-joined', handleParticipantJoined);
+    };
+  }, [callObject, debouncedPlay]);
+};
+
+export default useJoinSound;

dailyjs/shared/hooks/useSound.js

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+export const useSound = (src) => {
+  const audio = useRef(null);
+
+  useEffect(() => {
+    const tag = document.querySelector(`audio[src="${src}"]`);
+
+    if (tag) {
+      audio.current = tag;
+    } else {
+      const t = document.createElement('audio');
+      t.src = src;
+      t.setAttribute('playsinline', '');
+      document.body.appendChild(t);
+      audio.current = t;
+    }
+  }, [src]);
+
+  const load = useCallback(() => {
+    if (!audio.current) return;
+    audio.current.load();
+  }, [audio]);
+
+  const play = useCallback(() => {
+    if (!audio.current) return;
+    try {
+      audio.current.currentTime = 0;
+      audio.current.play();
+    } catch (e) {
+      console.error(e);
+    }
+  }, [audio]);
+
+  return { load, play };
+};
+
+export default useSound;

dailyjs/shared/package.json

@@ -9,6 +9,7 @@
     "next-compose-plugins": "^2.2.1",
     "next-transpile-modules": "^7.0.0",
     "no-scroll": "^2.1.1",
+    "debounce": "^1.2.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",