Revert "refactor: move room audio controls to their own component"

This reverts commit bbabb1d389.

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 | HTMLElement>(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<HTMLElement>
+  ) => {
+    setAudioAnchorEl(event.currentTarget)
+  }
+
+  const handleAudioDeviceMenuItemClick = (
+    _event: React.MouseEvent<HTMLElement>,
+    idx: number
+  ) => {
+    setSelectedAudioDeviceIdx(idx)
+    handleAudioDeviceSelect(audioDevices[idx])
+    setAudioAnchorEl(null)
+  }
+
+  const handleAudioInputSelectMenuClose = () => {
+    setAudioAnchorEl(null)
+  }
+
   return (
     <Box
       className="Room"
@@ -71,7 +114,70 @@ export function Room({
               justifyContent: 'center',
             }}
           >
-            <RoomAudioControls peerRoom={peerRoom} />
+            <Fab
+              variant="extended"
+              color={isSpeakingToRoom ? 'error' : 'success'}
+              aria-label="call"
+              onClick={handleVoiceCallClick}
+            >
+              {isSpeakingToRoom ? (
+                <>
+                  <VoiceOverOff sx={{ mr: 1 }} />
+                  Stop speaking to room
+                </>
+              ) : (
+                <>
+                  <RecordVoiceOver sx={{ mr: 1 }} />
+                  Start speaking to room
+                </>
+              )}
+            </Fab>
+            {audioDevices.length > 0 && (
+              <Box sx={{ mt: 1 }}>
+                <List
+                  component="nav"
+                  aria-label="Audio device selection"
+                  sx={{ bgcolor: 'background.paper' }}
+                >
+                  <ListItem
+                    button
+                    id="audio-input-select-button"
+                    aria-haspopup="listbox"
+                    aria-controls="audio-input-select-menu"
+                    aria-label="Audio input device to use"
+                    aria-expanded={isAudioDeviceSelectOpen ? 'true' : undefined}
+                    onClick={handleAudioDeviceListItemClick}
+                  >
+                    <ListItemText
+                      primary="Selected audio input device"
+                      secondary={audioDevices[selectedAudioDeviceIdx]?.label}
+                    />
+                  </ListItem>
+                </List>
+                <Menu
+                  id="audio-input-select-menu"
+                  anchorEl={audioAnchorEl}
+                  open={isAudioDeviceSelectOpen}
+                  onClose={handleAudioInputSelectMenuClose}
+                  MenuListProps={{
+                    'aria-labelledby': 'audio-input-select-button',
+                    role: 'listbox',
+                  }}
+                >
+                  {audioDevices.map((audioDevice, idx) => (
+                    <MenuItem
+                      key={audioDevice.deviceId}
+                      selected={idx === selectedAudioDeviceIdx}
+                      onClick={event =>
+                        handleAudioDeviceMenuItemClick(event, idx)
+                      }
+                    >
+                      {audioDevice.label}
+                    </MenuItem>
+                  ))}
+                </Menu>
+              </Box>
+            )}
           </Box>
         </AccordionDetails>
       </Accordion>

src/components/Room/RoomAudioControls.tsx

@@ -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 | HTMLElement>(null)
-  const isAudioDeviceSelectOpen = Boolean(audioAnchorEl)
-  const [selectedAudioDeviceIdx, setSelectedAudioDeviceIdx] = useState(0)
-
-  const handleVoiceCallClick = () => {
-    setIsSpeakingToRoom(!isSpeakingToRoom)
-  }
-
-  const handleAudioDeviceListItemClick = (
-    event: React.MouseEvent<HTMLElement>
-  ) => {
-    setAudioAnchorEl(event.currentTarget)
-  }
-
-  const handleAudioDeviceMenuItemClick = (
-    _event: React.MouseEvent<HTMLElement>,
-    idx: number
-  ) => {
-    setSelectedAudioDeviceIdx(idx)
-    handleAudioDeviceSelect(audioDevices[idx])
-    setAudioAnchorEl(null)
-  }
-
-  const handleAudioInputSelectMenuClose = () => {
-    setAudioAnchorEl(null)
-  }
-
-  return (
-    <>
-      <Fab
-        variant="extended"
-        color={isSpeakingToRoom ? 'error' : 'success'}
-        aria-label="call"
-        onClick={handleVoiceCallClick}
-      >
-        {isSpeakingToRoom ? (
-          <>
-            <VoiceOverOff sx={{ mr: 1 }} />
-            Stop speaking to room
-          </>
-        ) : (
-          <>
-            <RecordVoiceOver sx={{ mr: 1 }} />
-            Start speaking to room
-          </>
-        )}
-      </Fab>
-      {audioDevices.length > 0 && (
-        <Box sx={{ mt: 1 }}>
-          <List
-            component="nav"
-            aria-label="Audio device selection"
-            sx={{ bgcolor: 'background.paper' }}
-          >
-            <ListItem
-              button
-              id="audio-input-select-button"
-              aria-haspopup="listbox"
-              aria-controls="audio-input-select-menu"
-              aria-label="Audio input device to use"
-              aria-expanded={isAudioDeviceSelectOpen ? 'true' : undefined}
-              onClick={handleAudioDeviceListItemClick}
-            >
-              <ListItemText
-                primary="Selected audio input device"
-                secondary={audioDevices[selectedAudioDeviceIdx]?.label}
-              />
-            </ListItem>
-          </List>
-          <Menu
-            id="audio-input-select-menu"
-            anchorEl={audioAnchorEl}
-            open={isAudioDeviceSelectOpen}
-            onClose={handleAudioInputSelectMenuClose}
-            MenuListProps={{
-              'aria-labelledby': 'audio-input-select-button',
-              role: 'listbox',
-            }}
-          >
-            {audioDevices.map((audioDevice, idx) => (
-              <MenuItem
-                key={audioDevice.deviceId}
-                selected={idx === selectedAudioDeviceIdx}
-                onClick={event => handleAudioDeviceMenuItemClick(event, idx)}
-              >
-                {audioDevice.label}
-              </MenuItem>
-            ))}
-          </Menu>
-        </Box>
-      )}
-    </>
-  )
-}

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,
   }
 }

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,
   }
 }