From a32f2c593799f2e39ba0fdd3efb24bbc30ed2f7c Mon Sep 17 00:00:00 2001 From: Jon Date: Thu, 17 Jun 2021 15:09:49 +0100 Subject: [PATCH] added join sound --- dailyjs/basic-call/components/Room/Room.js | 3 ++ dailyjs/basic-call/package.json | 1 - dailyjs/basic-call/pages/not-found.js | 2 +- dailyjs/basic-call/public/join.mp3 | Bin 0 -> 15472 bytes dailyjs/shared/hooks/useJoinSound.js | 39 +++++++++++++++++++++ dailyjs/shared/hooks/useSound.js | 38 ++++++++++++++++++++ dailyjs/shared/package.json | 1 + 7 files changed, 82 insertions(+), 2 deletions(-) create mode 100644 dailyjs/basic-call/public/join.mp3 create mode 100644 dailyjs/shared/hooks/useJoinSound.js create mode 100644 dailyjs/shared/hooks/useSound.js diff --git a/dailyjs/basic-call/components/Room/Room.js b/dailyjs/basic-call/components/Room/Room.js index 2402bbf..a09ef4d 100644 --- a/dailyjs/basic-call/components/Room/Room.js +++ b/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); diff --git a/dailyjs/basic-call/package.json b/dailyjs/basic-call/package.json index 01031e1..81ab5b1 100644 --- a/dailyjs/basic-call/package.json +++ b/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", diff --git a/dailyjs/basic-call/pages/not-found.js b/dailyjs/basic-call/pages/not-found.js index 239a97c..6a7b1f6 100644 --- a/dailyjs/basic-call/pages/not-found.js +++ b/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 ( diff --git a/dailyjs/basic-call/public/join.mp3 b/dailyjs/basic-call/public/join.mp3 new file mode 100644 index 0000000000000000000000000000000000000000..765791511d4299070bd307e20ee2b62f74ac4c9e GIT binary patch literal 15472 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 literal 0 HcmV?d00001 diff --git a/dailyjs/shared/hooks/useJoinSound.js b/dailyjs/shared/hooks/useJoinSound.js new file mode 100644 index 0000000..f0dc4ee --- /dev/null +++ b/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; diff --git a/dailyjs/shared/hooks/useSound.js b/dailyjs/shared/hooks/useSound.js new file mode 100644 index 0000000..d8d2195 --- /dev/null +++ b/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; diff --git a/dailyjs/shared/package.json b/dailyjs/shared/package.json index e9ab938..a075da3 100644 --- a/dailyjs/shared/package.json +++ b/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",