diff --git a/packages/desktop/src/providers/RealTimeRoomProvider.tsx b/packages/desktop/src/providers/RealTimeRoomProvider.tsx index 867c817..d546c47 100644 --- a/packages/desktop/src/providers/RealTimeRoomProvider.tsx +++ b/packages/desktop/src/providers/RealTimeRoomProvider.tsx @@ -20,7 +20,7 @@ import { import toast from 'react-hot-toast'; import { useImmer } from 'use-immer'; import { LineMemberState } from '@nirvana/core/models/line.model'; -import { useAsyncFn } from 'react-use'; +import { useAsyncFn, useKeyPressEvent } from 'react-use'; import { updateLineMemberState } from '../api/NirvanaApi'; import UpdateLineMemberState from '@nirvana/core/requests/updateLineMemberState.request'; @@ -293,28 +293,24 @@ export function RealTimeRoomProvider({ children }: { children: React.ReactChild * tune into socket room and tell everyone else */ const handleSelectLine = useCallback( - (newLineIdToSelect: string | undefined) => { - if (!newLineIdToSelect) { - setSelectedLineId(undefined); - } else { - setSelectedLineId((prevLineId) => { - if (newLineIdToSelect === prevLineId) { - return prevLineId; - } + (newLineIdToSelect: string) => { + setSelectedLineId((prevLineId) => { + if (newLineIdToSelect === prevLineId) { + return prevLineId; + } - // untune from the last line if it was just a temporary tuned one - if (roomMap[prevLineId]?.currentUserMember.state === LineMemberState.INBOX) { - handleUntuneFromLine(prevLineId); - } + // untune from the last line if it was just a temporary tuned one + if (roomMap[prevLineId]?.currentUserMember.state === LineMemberState.INBOX) { + handleUntuneFromLine(prevLineId); + } - // tune in if not already tuned into this line - if (!roomMap[newLineIdToSelect].tunedInMemberIds?.includes(user._id.toString())) { - handleTuneIntoLine(newLineIdToSelect); - } + // tune in if not already tuned into this line + if (!roomMap[newLineIdToSelect].tunedInMemberIds?.includes(user._id.toString())) { + handleTuneIntoLine(newLineIdToSelect); + } - return newLineIdToSelect; - }); - } + return newLineIdToSelect; + }); setShowNewChannelForm(false); }, @@ -336,6 +332,13 @@ export function RealTimeRoomProvider({ children }: { children: React.ReactChild [setShowNewChannelForm, setSelectedLineId], ); + const clearMind = useCallback(() => { + setSelectedLineId(undefined); + setShowNewChannelForm(false); + }, [setSelectedLineId, setShowNewChannelForm]); + + useKeyPressEvent('Escape', clearMind); + return ( { + if (isSelected) { + return ( + + + + + + ); + } // TODO: get the profile pictures of the broadcasters if (line.currentBroadcastersUserIds?.length > 0) return ( @@ -205,7 +214,7 @@ function LineRowTest({ {moment(line.currentUserMember.lastVisitDate).fromNow(true)} ); - }, [line]); + }, [line, isSelected]); const profilePictures = useMemo(() => { const pictureSources: string[] = [];