From a87b0d3367b4ea24aa39c2eae44180b85991ef62 Mon Sep 17 00:00:00 2001 From: Jeremy Kahn Date: Thu, 3 Nov 2022 09:39:27 -0500 Subject: [PATCH] Revert "refactor: move room audio controls to their own component" This reverts commit bbabb1d389985ae1dacea53e9c7bb0e7c87bf950. --- 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, 133 insertions(+), 132 deletions(-) delete mode 100644 src/components/Room/RoomAudioControls.tsx diff --git a/src/components/Room/Room.tsx b/src/components/Room/Room.tsx index 191bb0a..4cf9b50 100644 --- a/src/components/Room/Room.tsx +++ b/src/components/Room/Room.tsx @@ -1,9 +1,18 @@ +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' @@ -12,7 +21,6 @@ import { MessageForm } from 'components/MessageForm' import { ChatTranscript } from 'components/ChatTranscript' import { useRoom } from './useRoom' -import { RoomAudioControls } from './RoomAudioControls' export interface RoomProps { appId?: string @@ -29,7 +37,15 @@ export function Room({ password, userId, }: RoomProps) { - const { messageLog, peerRoom, sendMessage, isMessageSending } = useRoom( + const { + audioDevices, + messageLog, + sendMessage, + isMessageSending, + isSpeakingToRoom, + setIsSpeakingToRoom, + handleAudioDeviceSelect, + } = useRoom( { appId, trackerUrls, @@ -43,10 +59,37 @@ 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 deleted file mode 100644 index db810bb..0000000 --- a/src/components/Room/RoomAudioControls.tsx +++ /dev/null @@ -1,121 +0,0 @@ -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 e25175e..930aaea 100644 --- a/src/components/Room/useRoom.ts +++ b/src/components/Room/useRoom.ts @@ -22,6 +22,7 @@ import { PeerRoom } from 'services/PeerRoom' import { messageTranscriptSizeLimit } from 'config/messaging' import { usePeerRoomAction } from './usePeerRoomAction' +import { useRoomAudio } from './useRoomAudio' interface UseRoomConfig { roomId: string @@ -56,6 +57,15 @@ export function useRoom( _setMessageLog(messages.slice(-messageTranscriptSizeLimit)) } + const { + audioDevices, + isSpeakingToRoom, + setIsSpeakingToRoom, + handleAudioDeviceSelect, + handleAudioForNewPeer, + handleAudioForLeavingPeer, + } = useRoomAudio({ peerRoom }) + useEffect(() => { return () => { peerRoom.leaveRoom() @@ -168,6 +178,10 @@ export function useRoom( })() }) + peerRoom.onPeerJoin((peerId: string) => { + handleAudioForNewPeer(peerId) + }) + peerRoom.onPeerLeave((peerId: string) => { const peerIndex = shellContext.peerList.findIndex( peer => peer.peerId === peerId @@ -195,10 +209,18 @@ 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 8d02c34..42e1186 100644 --- a/src/components/Room/useRoomAudio.ts +++ b/src/components/Room/useRoomAudio.ts @@ -161,18 +161,12 @@ export function useRoomAudio({ peerRoom }: UseRoomAudioConfig) { } } - peerRoom.onPeerJoin((peerId: string) => { - handleAudioForNewPeer(peerId) - }) - - peerRoom.onPeerLeave((peerId: string) => { - handleAudioForLeavingPeer(peerId) - }) - return { audioDevices, isSpeakingToRoom, setIsSpeakingToRoom, handleAudioDeviceSelect, + handleAudioForNewPeer, + handleAudioForLeavingPeer, } }