8493ddade5
* Move room tools to top of page to use full width Allow messages to be hidden while video is displaying Allow video display to utilise all available width Track unread messages while they are hidden * Better portrait behaviour * Show room controls by default * Show room controls at same time as app bar Improve video height calc. Co-authored-by: Jeremy Kahn <jeremyckahn@gmail.com>
38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import { useContext } from 'react'
|
|
|
|
import Fab from '@mui/material/Fab'
|
|
import Tooltip from '@mui/material/Tooltip'
|
|
import { Comment, CommentsDisabled } from '@mui/icons-material'
|
|
import { Badge, Box } from '@mui/material'
|
|
|
|
import { RoomContext } from 'contexts/RoomContext'
|
|
|
|
export function RoomShowMessagesControls() {
|
|
const { isShowingMessages, setIsShowingMessages, unreadMessages } =
|
|
useContext(RoomContext)
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
alignItems: 'center',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
px: 1,
|
|
}}
|
|
>
|
|
<Tooltip title={isShowingMessages ? 'Hide messages' : 'Show messages'}>
|
|
<Fab
|
|
color={isShowingMessages ? 'error' : 'success'}
|
|
aria-label="show messages"
|
|
onClick={() => setIsShowingMessages(!isShowingMessages)}
|
|
>
|
|
<Badge color="error" badgeContent={unreadMessages}>
|
|
{isShowingMessages ? <CommentsDisabled /> : <Comment />}
|
|
</Badge>
|
|
</Fab>
|
|
</Tooltip>
|
|
</Box>
|
|
)
|
|
}
|