refactor: move room audio controls to their own component

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 {
+  const { messageLog, peerRoom, sendMessage, isMessageSending } = useRoom(
-    audioDevices,
-    messageLog,
-    sendMessage,
-    isMessageSending,
-    isSpeakingToRoom,
-    setIsSpeakingToRoom,
-    handleAudioDeviceSelect,
-  } = useRoom(
     {
       appId,
       trackerUrls,
@@ -59,37 +43,10 @@ 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"
@@ -114,70 +71,7 @@ export function Room({
               justifyContent: 'center',
             }}
           >
-            <Fab
+            <RoomAudioControls peerRoom={peerRoom} />
-              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

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

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