LogalDeveloper/owncast
0
Fork 0
Code Activity

Chat popup (#3098)

Browse Source 
* add pop out chat button

* add button to close chat popup

* chat is hidden on main interface when a popup chat is open

* NameChangeEvent renames clients with the given id

if you have two or more owncast windows (or pop-out chats) open, changing your
name in 1 client is reflected in all clients.

* replace isChatVisible booleans with chatState enum

* update stories to use ChatState

* fix build tests

---------

Co-authored-by: janWilejan <>
This commit is contained in:
janWilejan
2023-06-26 16:00:27 +00:00
committed by GitHub
parent fca85a4a42
commit c563742856
6 changed files with 101 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/components/ui/Content/Content.tsx
View File

@@ -12,7 +12,8 @@ import {
clientConfigStateAtom,
chatMessagesAtom,
currentUserAtom,
isChatVisibleSelector,
ChatState,
chatStateAtom,
appStateAtom,
isOnlineSelector,
isMobileAtom,
@@ -92,7 +93,7 @@ const ExternalModal = ({ externalActionToDisplay, setExternalActionToDisplay })
export const Content: FC = () => {
const appState = useRecoilValue<AppStateOptions>(appStateAtom);
const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
const isChatVisible = useRecoilValue<boolean>(isChatVisibleSelector);
const chatState = useRecoilValue<ChatState>(chatStateAtom);
const currentUser = useRecoilValue(currentUserAtom);
const serverStatus = useRecoilValue<ServerStatus>(serverStatusState);
const [isMobile, setIsMobile] = useRecoilState<boolean | undefined>(isMobileAtom);
@@ -184,7 +185,7 @@ export const Content: FC = () => {
);
}, [browserNotificationsEnabled]);
const showChat = isChatAvailable && !chatDisabled && isChatVisible;
const showChat = isChatAvailable && !chatDisabled && chatState === ChatState.VISIBLE;
// accounts for sidebar width when online in desktop
const dynamicPadding = showChat && !isMobile ? '320px' : '0px';
@@ -309,7 +310,7 @@ export const Content: FC = () => {
handleClose={() => setShowFollowModal(false)}
/>
</Modal>
{isMobile && showChatModal && isChatVisible && (
{isMobile && showChatModal && chatState === ChatState.VISIBLE && (
<ChatModal
messages={messages}
currentUser={currentUser}