From bbabb1d389985ae1dacea53e9c7bb0e7c87bf950 Mon Sep 17 00:00:00 2001 From: Jeremy Kahn Date: Thu, 3 Nov 2022 09:33:17 -0500 Subject: [PATCH] refactor: move room audio controls to their own component --- src/components/Room/Room.tsx | 112 +------------------- src/components/Room/RoomAudioControls.tsx | 121 ++++++++++++++++++++++ src/components/Room/useRoom.ts | 22 ---- src/components/Room/useRoomAudio.ts | 10 +- 4 files changed, 132 insertions(+), 133 deletions(-) create mode 100644 src/components/Room/RoomAudioControls.tsx diff --git a/src/components/Room/Room.tsx b/src/components/Room/Room.tsx index 4cf9b50..191bb0a 100644 --- a/src/components/Room/Room.tsx +++ b/src/components/Room/Room.tsx @@ -1,18 +1,9 @@ -import { useState } from 'react' import Accordion from '@mui/material/Accordion' import AccordionSummary from '@mui/material/AccordionSummary' import AccordionDetails from '@mui/material/AccordionDetails' import Box from '@mui/material/Box' import Divider from '@mui/material/Divider' import ExpandMoreIcon from '@mui/icons-material/ExpandMore' -import RecordVoiceOver from '@mui/icons-material/RecordVoiceOver' -import VoiceOverOff from '@mui/icons-material/VoiceOverOff' -import List from '@mui/material/List' -import ListItem from '@mui/material/ListItem' -import ListItemText from '@mui/material/ListItemText' -import Menu from '@mui/material/Menu' -import MenuItem from '@mui/material/MenuItem' -import Fab from '@mui/material/Fab' import { v4 as uuid } from 'uuid' import { rtcConfig } from 'config/rtcConfig' @@ -21,6 +12,7 @@ import { MessageForm } from 'components/MessageForm' import { ChatTranscript } from 'components/ChatTranscript' import { useRoom } from './useRoom' +import { RoomAudioControls } from './RoomAudioControls' export interface RoomProps { appId?: string @@ -37,15 +29,7 @@ export function Room({ password, userId, }: RoomProps) { - const { - audioDevices, - messageLog, - sendMessage, - isMessageSending, - isSpeakingToRoom, - setIsSpeakingToRoom, - handleAudioDeviceSelect, - } = useRoom( + const { messageLog, peerRoom, sendMessage, isMessageSending } = useRoom( { appId, trackerUrls, @@ -59,37 +43,10 @@ export function Room({ } ) - const [audioAnchorEl, setAudioAnchorEl] = useState(null) - const isAudioDeviceSelectOpen = Boolean(audioAnchorEl) - const [selectedAudioDeviceIdx, setSelectedAudioDeviceIdx] = useState(0) - const handleMessageSubmit = async (message: string) => { await sendMessage(message) } - const handleVoiceCallClick = () => { - setIsSpeakingToRoom(!isSpeakingToRoom) - } - - const handleAudioDeviceListItemClick = ( - event: React.MouseEvent - ) => { - setAudioAnchorEl(event.currentTarget) - } - - const handleAudioDeviceMenuItemClick = ( - _event: React.MouseEvent, - idx: number - ) => { - setSelectedAudioDeviceIdx(idx) - handleAudioDeviceSelect(audioDevices[idx]) - setAudioAnchorEl(null) - } - - const handleAudioInputSelectMenuClose = () => { - setAudioAnchorEl(null) - } - return ( - - {isSpeakingToRoom ? ( - <> - - Stop speaking to room - - ) : ( - <> - - Start speaking to room - - )} - - {audioDevices.length > 0 && ( - - - - - - - - {audioDevices.map((audioDevice, idx) => ( - - handleAudioDeviceMenuItemClick(event, idx) - } - > - {audioDevice.label} - - ))} - - - )} + diff --git a/src/components/Room/RoomAudioControls.tsx b/src/components/Room/RoomAudioControls.tsx new file mode 100644 index 0000000..db810bb --- /dev/null +++ b/src/components/Room/RoomAudioControls.tsx @@ -0,0 +1,121 @@ +import { useState } from 'react' +import Box from '@mui/material/Box' +import RecordVoiceOver from '@mui/icons-material/RecordVoiceOver' +import VoiceOverOff from '@mui/icons-material/VoiceOverOff' +import List from '@mui/material/List' +import ListItem from '@mui/material/ListItem' +import ListItemText from '@mui/material/ListItemText' +import Menu from '@mui/material/Menu' +import MenuItem from '@mui/material/MenuItem' +import Fab from '@mui/material/Fab' + +import { PeerRoom } from 'services/PeerRoom/PeerRoom' + +import { useRoomAudio } from './useRoomAudio' + +export interface RoomAudioControlsProps { + peerRoom: PeerRoom +} + +export function RoomAudioControls({ peerRoom }: RoomAudioControlsProps) { + const { + audioDevices, + isSpeakingToRoom, + setIsSpeakingToRoom, + handleAudioDeviceSelect, + } = useRoomAudio({ peerRoom }) + + const [audioAnchorEl, setAudioAnchorEl] = useState(null) + const isAudioDeviceSelectOpen = Boolean(audioAnchorEl) + const [selectedAudioDeviceIdx, setSelectedAudioDeviceIdx] = useState(0) + + const handleVoiceCallClick = () => { + setIsSpeakingToRoom(!isSpeakingToRoom) + } + + const handleAudioDeviceListItemClick = ( + event: React.MouseEvent + ) => { + setAudioAnchorEl(event.currentTarget) + } + + const handleAudioDeviceMenuItemClick = ( + _event: React.MouseEvent, + idx: number + ) => { + setSelectedAudioDeviceIdx(idx) + handleAudioDeviceSelect(audioDevices[idx]) + setAudioAnchorEl(null) + } + + const handleAudioInputSelectMenuClose = () => { + setAudioAnchorEl(null) + } + + return ( + <> + + {isSpeakingToRoom ? ( + <> + + Stop speaking to room + + ) : ( + <> + + Start speaking to room + + )} + + {audioDevices.length > 0 && ( + + + + + + + + {audioDevices.map((audioDevice, idx) => ( + handleAudioDeviceMenuItemClick(event, idx)} + > + {audioDevice.label} + + ))} + + + )} + + ) +} diff --git a/src/components/Room/useRoom.ts b/src/components/Room/useRoom.ts index 930aaea..e25175e 100644 --- a/src/components/Room/useRoom.ts +++ b/src/components/Room/useRoom.ts @@ -22,7 +22,6 @@ import { PeerRoom } from 'services/PeerRoom' import { messageTranscriptSizeLimit } from 'config/messaging' import { usePeerRoomAction } from './usePeerRoomAction' -import { useRoomAudio } from './useRoomAudio' interface UseRoomConfig { roomId: string @@ -57,15 +56,6 @@ export function useRoom( _setMessageLog(messages.slice(-messageTranscriptSizeLimit)) } - const { - audioDevices, - isSpeakingToRoom, - setIsSpeakingToRoom, - handleAudioDeviceSelect, - handleAudioForNewPeer, - handleAudioForLeavingPeer, - } = useRoomAudio({ peerRoom }) - useEffect(() => { return () => { peerRoom.leaveRoom() @@ -178,10 +168,6 @@ export function useRoom( })() }) - peerRoom.onPeerJoin((peerId: string) => { - handleAudioForNewPeer(peerId) - }) - peerRoom.onPeerLeave((peerId: string) => { const peerIndex = shellContext.peerList.findIndex( peer => peer.peerId === peerId @@ -209,18 +195,10 @@ export function useRoom( } }) - peerRoom.onPeerLeave((peerId: string) => { - handleAudioForLeavingPeer(peerId) - }) - return { - audioDevices, peerRoom, messageLog, sendMessage, isMessageSending, - isSpeakingToRoom, - setIsSpeakingToRoom, - handleAudioDeviceSelect, } } diff --git a/src/components/Room/useRoomAudio.ts b/src/components/Room/useRoomAudio.ts index 42e1186..8d02c34 100644 --- a/src/components/Room/useRoomAudio.ts +++ b/src/components/Room/useRoomAudio.ts @@ -161,12 +161,18 @@ export function useRoomAudio({ peerRoom }: UseRoomAudioConfig) { } } + peerRoom.onPeerJoin((peerId: string) => { + handleAudioForNewPeer(peerId) + }) + + peerRoom.onPeerLeave((peerId: string) => { + handleAudioForLeavingPeer(peerId) + }) + return { audioDevices, isSpeakingToRoom, setIsSpeakingToRoom, handleAudioDeviceSelect, - handleAudioForNewPeer, - handleAudioForLeavingPeer, } }