Shiloh/remnantchat
Shiloh/remnantchat
1
0
Fork 1
Code Issues Pull Requests Packages Projects 4 Releases Wiki Activity

feat: don't automatically close sidebars

Browse Source
This commit is contained in:
Jeremy Kahn 2023-03-15 09:48:35 -05:00 committed by Jeremy Kahn
parent 446ca466c7
commit d6f9b10ce2
5 changed files with 61 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -54,14 +54,12 @@ export function useRoom(
const { const {
numberOfPeers, numberOfPeers,
setNumberOfPeers, setNumberOfPeers,
setDoShowPeers,
peerList, peerList,
setPeerList, setPeerList,
tabHasFocus, tabHasFocus,
showAlert, showAlert,
setRoomId, setRoomId,
setPassword, setPassword,
setIsPeerListOpen,
customUsername, customUsername,
} = useContext(ShellContext) } = useContext(ShellContext)
@ -157,9 +155,9 @@ export function useRoom(
useEffect(() => { useEffect(() => {
return () => { return () => {
peerRoom.leaveRoom() peerRoom.leaveRoom()
setIsPeerListOpen(false) setPeerList([])
} }
}, [peerRoom, setIsPeerListOpen]) }, [peerRoom, setPeerList])
useEffect(() => { useEffect(() => {
setPassword(password) setPassword(password)
@ -177,14 +175,6 @@ export function useRoom(
} }
}, [roomId, setRoomId]) }, [roomId, setRoomId])
useEffect(() => {
setDoShowPeers(true)
return () => {
setDoShowPeers(false)
}
}, [setDoShowPeers])
useEffect(() => { useEffect(() => {
if (isShowingMessages) setUnreadMessages(0) if (isShowingMessages) setUnreadMessages(0)
}, [isShowingMessages, setUnreadMessages]) }, [isShowingMessages, setUnreadMessages])

22
src/components/Shell/Drawer.tsx
View File

@ -32,23 +32,11 @@ export const drawerWidth = 240
export interface DrawerProps extends PropsWithChildren { export interface DrawerProps extends PropsWithChildren {
isDrawerOpen: boolean isDrawerOpen: boolean
onAboutLinkClick: () => void
onDisclaimerClick: () => void
onDrawerClose: () => void onDrawerClose: () => void
onHomeLinkClick: () => void
onSettingsLinkClick: () => void
theme: Theme theme: Theme
} }
export const Drawer = ({ export const Drawer = ({ isDrawerOpen, onDrawerClose, theme }: DrawerProps) => {
isDrawerOpen,
onAboutLinkClick,
onDisclaimerClick,
onDrawerClose,
onHomeLinkClick,
onSettingsLinkClick,
theme,
}: DrawerProps) => {
const settingsContext = useContext(SettingsContext) const settingsContext = useContext(SettingsContext)
const colorMode = settingsContext.getUserSettings().colorMode const colorMode = settingsContext.getUserSettings().colorMode
@ -82,7 +70,7 @@ export const Drawer = ({
</DrawerHeader> </DrawerHeader>
<Divider /> <Divider />
<List role="navigation"> <List role="navigation">
<Link to={routes.ROOT} onClick={onHomeLinkClick}> <Link to={routes.ROOT}>
<ListItem disablePadding> <ListItem disablePadding>
<ListItemButton> <ListItemButton>
<ListItemIcon> <ListItemIcon>
@ -92,7 +80,7 @@ export const Drawer = ({
</ListItemButton> </ListItemButton>
</ListItem> </ListItem>
</Link> </Link>
<Link to={routes.SETTINGS} onClick={onSettingsLinkClick}> <Link to={routes.SETTINGS}>
<ListItem disablePadding> <ListItem disablePadding>
<ListItemButton> <ListItemButton>
<ListItemIcon> <ListItemIcon>
@ -102,7 +90,7 @@ export const Drawer = ({
</ListItemButton> </ListItemButton>
</ListItem> </ListItem>
</Link> </Link>
<Link to={routes.ABOUT} onClick={onAboutLinkClick}> <Link to={routes.ABOUT}>
<ListItem disablePadding> <ListItem disablePadding>
<ListItemButton> <ListItemButton>
<ListItemIcon> <ListItemIcon>
@ -112,7 +100,7 @@ export const Drawer = ({
</ListItemButton> </ListItemButton>
</ListItem> </ListItem>
</Link> </Link>
<Link to={routes.DISCLAIMER} onClick={onDisclaimerClick}> <Link to={routes.DISCLAIMER}>
<ListItem disablePadding> <ListItem disablePadding>
<ListItemButton> <ListItemButton>
<ListItemIcon> <ListItemIcon>

35
src/components/Shell/Shell.tsx
View File

@ -55,7 +55,6 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
const [isDrawerOpen, setIsDrawerOpen] = useState(defaultSidebarsOpen) const [isDrawerOpen, setIsDrawerOpen] = useState(defaultSidebarsOpen)
const [isQRCodeDialogOpen, setIsQRCodeDialogOpen] = useState(false) const [isQRCodeDialogOpen, setIsQRCodeDialogOpen] = useState(false)
const [isRoomShareDialogOpen, setIsRoomShareDialogOpen] = useState(false) const [isRoomShareDialogOpen, setIsRoomShareDialogOpen] = useState(false)
const [doShowPeers, setDoShowPeers] = useState(false)
const [alertSeverity, setAlertSeverity] = useState<AlertColor>('info') const [alertSeverity, setAlertSeverity] = useState<AlertColor>('info')
const [showAppBar, setShowAppBar] = useState(true) const [showAppBar, setShowAppBar] = useState(true)
const [showRoomControls, setShowRoomControls] = useState(true) const [showRoomControls, setShowRoomControls] = useState(true)
@ -66,7 +65,7 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
const [roomId, setRoomId] = useState<string | undefined>(undefined) const [roomId, setRoomId] = useState<string | undefined>(undefined)
const [password, setPassword] = useState<string | undefined>(undefined) const [password, setPassword] = useState<string | undefined>(undefined)
const [isPeerListOpen, setIsPeerListOpen] = useState(defaultSidebarsOpen) const [isPeerListOpen, setIsPeerListOpen] = useState(defaultSidebarsOpen)
const [peerList, setPeerList] = useState<Peer[]>([]) // except you const [peerList, setPeerList] = useState<Peer[]>([]) // except self
const [tabHasFocus, setTabHasFocus] = useState(true) const [tabHasFocus, setTabHasFocus] = useState(true)
const [audioState, setAudioState] = useState<AudioState>(AudioState.STOPPED) const [audioState, setAudioState] = useState<AudioState>(AudioState.STOPPED)
const [videoState, setVideoState] = useState<VideoState>(VideoState.STOPPED) const [videoState, setVideoState] = useState<VideoState>(VideoState.STOPPED)
@ -91,7 +90,6 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
() => ({ () => ({
numberOfPeers, numberOfPeers,
tabHasFocus, tabHasFocus,
setDoShowPeers,
setNumberOfPeers, setNumberOfPeers,
showRoomControls, showRoomControls,
setShowRoomControls, setShowRoomControls,
@ -127,7 +125,6 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
numberOfPeers, numberOfPeers,
peerList, peerList,
tabHasFocus, tabHasFocus,
setDoShowPeers,
setNumberOfPeers, setNumberOfPeers,
showRoomControls, showRoomControls,
setShowRoomControls, setShowRoomControls,
@ -242,6 +239,10 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
setIsDrawerOpen(true) setIsDrawerOpen(true)
} }
const handleDrawerClose = () => {
setIsDrawerOpen(false)
}
const handlePeerListClick = () => { const handlePeerListClick = () => {
setIsPeerListOpen(!isPeerListOpen) setIsPeerListOpen(!isPeerListOpen)
} }
@ -263,26 +264,6 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
} }
} }
const handleDrawerClose = () => {
setIsDrawerOpen(false)
}
const handleHomeLinkClick = () => {
setIsDrawerOpen(false)
}
const handleAboutLinkClick = () => {
setIsDrawerOpen(false)
}
const handleDisclaimerLinkClick = () => {
setIsDrawerOpen(false)
}
const handleSettingsLinkClick = () => {
setIsDrawerOpen(false)
}
const handleQRCodeDialogClose = () => { const handleQRCodeDialogClose = () => {
setIsQRCodeDialogOpen(false) setIsQRCodeDialogOpen(false)
} }
@ -310,12 +291,10 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
onAlertClose={handleAlertClose} onAlertClose={handleAlertClose}
/> />
<ShellAppBar <ShellAppBar
doShowPeers={doShowPeers}
onDrawerOpen={handleDrawerOpen} onDrawerOpen={handleDrawerOpen}
onLinkButtonClick={handleLinkButtonClick} onLinkButtonClick={handleLinkButtonClick}
isDrawerOpen={isDrawerOpen} isDrawerOpen={isDrawerOpen}
isPeerListOpen={isPeerListOpen} isPeerListOpen={isPeerListOpen}
numberOfPeers={numberOfPeers}
title={title} title={title}
onPeerListClick={handlePeerListClick} onPeerListClick={handlePeerListClick}
onRoomControlsClick={() => setShowRoomControls(!showRoomControls)} onRoomControlsClick={() => setShowRoomControls(!showRoomControls)}
@ -326,11 +305,7 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
/> />
<Drawer <Drawer
isDrawerOpen={isDrawerOpen} isDrawerOpen={isDrawerOpen}
onAboutLinkClick={handleAboutLinkClick}
onDisclaimerClick={handleDisclaimerLinkClick}
onDrawerClose={handleDrawerClose} onDrawerClose={handleDrawerClose}
onHomeLinkClick={handleHomeLinkClick}
onSettingsLinkClick={handleSettingsLinkClick}
theme={theme} theme={theme}
/> />
<RouteContent <RouteContent

101
src/components/Shell/ShellAppBar.tsx
View File

@ -18,6 +18,10 @@ import Menu from '@mui/icons-material/Menu'
import QrCode2 from '@mui/icons-material/QrCode2' import QrCode2 from '@mui/icons-material/QrCode2'
import RoomPreferences from '@mui/icons-material/RoomPreferences' import RoomPreferences from '@mui/icons-material/RoomPreferences'
import { useContext } from 'react'
import { ShellContext } from 'contexts/ShellContext'
import { drawerWidth } from './Drawer' import { drawerWidth } from './Drawer'
import { peerListWidth } from './PeerList' import { peerListWidth } from './PeerList'
@ -55,12 +59,10 @@ export const AppBar = styled(MuiAppBar, {
})) }))
interface ShellAppBarProps { interface ShellAppBarProps {
doShowPeers: boolean
onDrawerOpen: () => void onDrawerOpen: () => void
onLinkButtonClick: () => Promise<void> onLinkButtonClick: () => Promise<void>
isDrawerOpen: boolean isDrawerOpen: boolean
isPeerListOpen: boolean isPeerListOpen: boolean
numberOfPeers: number
title: string title: string
onPeerListClick: () => void onPeerListClick: () => void
onRoomControlsClick: () => void onRoomControlsClick: () => void
@ -71,13 +73,11 @@ interface ShellAppBarProps {
} }
export const ShellAppBar = ({ export const ShellAppBar = ({
doShowPeers,
onDrawerOpen, onDrawerOpen,
onLinkButtonClick, onLinkButtonClick,
isDrawerOpen, isDrawerOpen,
isPeerListOpen, isPeerListOpen,
setIsQRCodeDialogOpen, setIsQRCodeDialogOpen,
numberOfPeers,
title, title,
onPeerListClick, onPeerListClick,
onRoomControlsClick, onRoomControlsClick,
@ -85,6 +85,7 @@ export const ShellAppBar = ({
isFullscreen, isFullscreen,
setIsFullscreen, setIsFullscreen,
}: ShellAppBarProps) => { }: ShellAppBarProps) => {
const { peerList } = useContext(ShellContext)
const handleQRCodeClick = () => setIsQRCodeDialogOpen(true) const handleQRCodeClick = () => setIsQRCodeDialogOpen(true)
const onClickFullscreen = () => setIsFullscreen(!isFullscreen) const onClickFullscreen = () => setIsFullscreen(!isFullscreen)
return ( return (
@ -131,54 +132,50 @@ export const ShellAppBar = ({
<Link /> <Link />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
{doShowPeers ? ( <Tooltip title="Show QR Code">
<> <IconButton
<Tooltip title="Show QR Code"> size="large"
<IconButton color="inherit"
size="large" aria-label="Show QR Code"
color="inherit" onClick={handleQRCodeClick}
aria-label="Show QR Code" >
onClick={handleQRCodeClick} <QrCode2 />
> </IconButton>
<QrCode2 /> </Tooltip>
</IconButton> <Tooltip title="Show Room Controls">
</Tooltip> <IconButton
<Tooltip title="Show Room Controls"> size="large"
<IconButton color="inherit"
size="large" aria-label="show room controls"
color="inherit" onClick={onRoomControlsClick}
aria-label="show room controls" >
onClick={onRoomControlsClick} <RoomPreferences />
> </IconButton>
<RoomPreferences /> </Tooltip>
</IconButton> <Tooltip
</Tooltip> title={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
<Tooltip >
title={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'} <IconButton
> size="large"
<IconButton edge="end"
size="large" color="inherit"
edge="end" aria-label="fullscreen"
color="inherit" onClick={onClickFullscreen}
aria-label="fullscreen" >
onClick={onClickFullscreen} {isFullscreen ? <FullscreenExit /> : <Fullscreen />}
> </IconButton>
{isFullscreen ? <FullscreenExit /> : <Fullscreen />} </Tooltip>
</IconButton> <Tooltip title="Click to show peer list">
</Tooltip> <IconButton
<Tooltip title="Click to show peer list"> size="large"
<IconButton edge="end"
size="large" color="inherit"
edge="end" aria-label="Peer list"
color="inherit" onClick={onPeerListClick}
aria-label="Peer list" >
onClick={onPeerListClick} <StepIcon icon={peerList.length + 1} />
> </IconButton>
<StepIcon icon={numberOfPeers} /> </Tooltip>
</IconButton>
</Tooltip>
</>
) : null}
</Toolbar> </Toolbar>
</AppBar> </AppBar>
</Slide> </Slide>

2
src/contexts/ShellContext.ts
View File

@ -6,7 +6,6 @@ import { AudioState, ScreenShareState, VideoState, Peer } from 'models/chat'
interface ShellContextProps { interface ShellContextProps {
numberOfPeers: number numberOfPeers: number
tabHasFocus: boolean tabHasFocus: boolean
setDoShowPeers: Dispatch<SetStateAction<boolean>>
setNumberOfPeers: Dispatch<SetStateAction<number>> setNumberOfPeers: Dispatch<SetStateAction<number>>
showRoomControls: boolean showRoomControls: boolean
setShowRoomControls: Dispatch<SetStateAction<boolean>> setShowRoomControls: Dispatch<SetStateAction<boolean>>
@ -35,7 +34,6 @@ interface ShellContextProps {
export const ShellContext = createContext<ShellContextProps>({ export const ShellContext = createContext<ShellContextProps>({
numberOfPeers: 1, numberOfPeers: 1,
tabHasFocus: true, tabHasFocus: true,
setDoShowPeers: () => {},
setNumberOfPeers: () => {}, setNumberOfPeers: () => {},
showRoomControls: false, showRoomControls: false,
setShowRoomControls: () => {}, setShowRoomControls: () => {},