reuterShawn/remnantchat
1
0
Fork 0
forked from Shiloh/remnantchat
Code Pull Requests Activity

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

Browse Source 
This reverts commit bbabb1d389.
This commit is contained in:
Jeremy Kahn 2022-11-03 09:39:27 -05:00
parent bbabb1d389
commit a87b0d3367
4 changed files with 133 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
src/components/Room/Room.tsx
View File

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

121
src/components/Room/RoomAudioControls.tsx
View File

@ -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>
)}
</>
)
}

22
src/components/Room/useRoom.ts
View File

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

10
src/components/Room/useRoomAudio.ts
View File

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