More accurately hide/show and track chat state

web/components/ui/Content/Content.tsx

@@ -5,8 +5,8 @@ import {
   clientConfigStateAtom,
   chatMessagesAtom,
   chatStateAtom,
+  serverStatusState,
 } from '../../stores/ClientConfigStore';
-import { serverStatusState } from '../../stores/ServerStatusStore';
 import { ClientConfig } from '../../../interfaces/client-config.model';
 import CustomPageContent from '../../CustomPageContent';
 import OwncastPlayer from '../../video/OwncastPlayer';
@@ -30,7 +30,7 @@ const { Content } = Layout;
 export default function ContentComponent() {
   const status = useRecoilValue<ServerStatus>(serverStatusState);
   const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
-  const chatOpen = useRecoilValue<ChatVisibilityState>(chatVisibilityAtom);
+  const chatVisibility = useRecoilValue<ChatVisibilityState>(chatVisibilityAtom);
   const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom);
   const chatState = useRecoilValue<ChatState>(chatStateAtom);
 
@@ -41,6 +41,9 @@ export default function ContentComponent() {
 
   const total = 0;
 
+  const isShowingChatColumn =
+    chatState === ChatState.Available && chatVisibility === ChatVisibilityState.Visible;
+
   // This is example content. It should be removed.
   const externalActions = [
     {
@@ -58,7 +61,7 @@ export default function ContentComponent() {
   ));
 
   return (
-    <Content className={`${s.root}`} data-columns={chatOpen ? 2 : 1}>
+    <Content className={`${s.root}`} data-columns={isShowingChatColumn ? 2 : 1}>
       <div className={`${s.leftCol}`}>
         <OwncastPlayer source="/hls/stream.m3u8" online={online} />
         <Statusbar
@@ -72,6 +75,7 @@ export default function ContentComponent() {
           <Button>Follow</Button>
           <Button>Notify</Button>
         </ActionButtonRow>
+
         <div className={`${s.lowerRow}`}>
           <Tabs defaultActiveKey="1" type="card">
             <TabPane tab="About" key="1" className={`${s.pageContentSection}`}>
@@ -82,16 +86,17 @@ export default function ContentComponent() {
             </TabPane>
           </Tabs>
 
-          {chatOpen && (
+          {chatVisibility && (
             <div className={`${s.mobileChat}`}>
               <ChatContainer messages={messages} state={chatState} />
               <ChatTextField />
             </div>
           )}
+
           <Footer version={version} />
         </div>
       </div>
-      {chatOpen && <Sidebar />}
+      {isShowingChatColumn && <Sidebar />}
     </Content>
   );
 }

web/components/ui/Footer/Footer.tsx

@@ -9,5 +9,5 @@ interface Props {
 export default function FooterComponent(props: Props) {
   const { version } = props;
 
-  return <Footer style={{ textAlign: 'center', height: '64px' }}>Footer: Owncast {version}</Footer>;
+  return <Footer style={{ textAlign: 'center', height: '64px' }}>Owncast {version}</Footer>;
 }

web/components/ui/Header/Header.tsx

@@ -1,6 +1,8 @@
 import { Layout } from 'antd';
+import { useRecoilValue } from 'recoil';
 import { ChatState } from '../../../interfaces/application-state';
 import { OwncastLogo, UserDropdown } from '../../common';
+import { chatStateAtom } from '../../stores/ClientConfigStore';
 import s from './Header.module.scss';
 
 const { Header } = Layout;
@@ -10,13 +12,15 @@ interface Props {
 }
 
 export default function HeaderComponent({ name = 'Your stream title' }: Props) {
+  const chatState = useRecoilValue<ChatState>(chatStateAtom);
+
   return (
     <Header className={`${s.header}`}>
       <div className={`${s.logo}`}>
         <OwncastLogo variant="contrast" />
         <span>{name}</span>
       </div>
-      <UserDropdown username="fillmein" chatState={ChatState.Available} />
+      <UserDropdown chatState={chatState} />
     </Header>
   );
 }

web/components/ui/Modal/Modal.tsx

@@ -21,7 +21,6 @@ export default function Modal(props: Props) {
     height: '80vh',
   };
 
-  console.log(url);
   const iframe = url && (
     <iframe
       title={title}