Support disabled chat. Closes #1979

web/components/layouts/Main.tsx

@@ -24,6 +24,7 @@ export const Main: FC = () => {
   const fatalError = useRecoilValue<DisplayableError>(fatalErrorStateAtom);
 
   const layoutRef = useRef<HTMLDivElement>(null);
+  const { chatDisabled } = clientConfig;
 
   useEffect(() => {
     setupNoLinkReferrer(layoutRef.current);
@@ -98,7 +99,7 @@ export const Main: FC = () => {
 
       <ClientConfigStore />
       <Layout ref={layoutRef}>
-        <Header name={title || name} chatAvailable={isChatAvailable} />
+        <Header name={title || name} chatAvailable={isChatAvailable} chatDisabled={chatDisabled} />
         <Content />
         {fatalError && (
           <FatalErrorStateModal title={fatalError.title} message={fatalError.message} />

web/components/stores/ClientConfigStore.tsx

@@ -180,7 +180,7 @@ export const ClientConfigStore: FC = () => {
   const setChatUserId = useSetRecoilState<string>(chatUserIdAtom);
   const setChatAuthenticated = useSetRecoilState<boolean>(chatAuthenticatedAtom);
   const setIsChatModerator = useSetRecoilState<boolean>(isChatModeratorAtom);
-  const setClientConfig = useSetRecoilState<ClientConfig>(clientConfigStateAtom);
+  const [clientConfig, setClientConfig] = useRecoilState<ClientConfig>(clientConfigStateAtom);
   const setServerStatus = useSetRecoilState<ServerStatus>(serverStatusState);
   const setClockSkew = useSetRecoilState<Number>(clockSkewAtom);
   const [chatMessages, setChatMessages] = useRecoilState<ChatMessage[]>(chatMessagesAtom);
@@ -375,6 +375,12 @@ export const ClientConfigStore: FC = () => {
     }
   }, [hasLoadedStatus, hasLoadedConfig]);
 
+  useEffect(() => {
+    if (!clientConfig.chatDisabled && accessToken && hasLoadedConfig) {
+      startChat();
+    }
+  }, [hasLoadedConfig, accessToken]);
+
   useEffect(() => {
     updateClientConfig();
     handleUserRegistration();
@@ -392,7 +398,6 @@ export const ClientConfigStore: FC = () => {
     }
 
     getChatHistory();
-    startChat();
   }, [accessToken]);
 
   useEffect(() => {

web/components/ui/Content/Content.tsx

@@ -9,6 +9,7 @@ import {
   chatMessagesAtom,
   chatDisplayNameAtom,
   chatUserIdAtom,
+  isChatAvailableSelector,
   isChatVisibleSelector,
   appStateAtom,
   isOnlineSelector,
@@ -77,18 +78,21 @@ const MobileContent = ({
   messages,
   chatDisplayName,
   chatUserId,
+  showChat,
 }) => (
   <div className={classNames(styles.lowerSectionMobile)}>
     <Tabs defaultActiveKey="0">
-      <TabPane tab="Chat" key="1">
-        <ChatContainer
-          messages={messages}
-          usernameToHighlight={chatDisplayName}
-          chatUserId={chatUserId}
-          isModerator={false}
-          height="40vh"
-        />{' '}
-      </TabPane>
+      {showChat && (
+        <TabPane tab="Chat" key="1">
+          <ChatContainer
+            messages={messages}
+            usernameToHighlight={chatDisplayName}
+            chatUserId={chatUserId}
+            isModerator={false}
+            height="40vh"
+          />
+        </TabPane>
+      )}
       <TabPane tab="About" key="2">
         <ContentHeader
           name={name}
@@ -111,6 +115,8 @@ export const Content: FC = () => {
   const appState = useRecoilValue<AppStateOptions>(appStateAtom);
   const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
   const isChatVisible = useRecoilValue<boolean>(isChatVisibleSelector);
+  const isChatAvailable = useRecoilValue<boolean>(isChatAvailableSelector);
+
   const [isMobile, setIsMobile] = useRecoilState<boolean | undefined>(isMobileAtom);
   const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom);
   const online = useRecoilValue<boolean>(isOnlineSelector);
@@ -127,6 +133,7 @@ export const Content: FC = () => {
     tags,
     externalActions,
     offlineMessage,
+    chatDisabled,
   } = clientConfig;
   const [showNotifyReminder, setShowNotifyReminder] = useState(false);
   const [showNotifyPopup, setShowNotifyPopup] = useState(false);
@@ -177,6 +184,7 @@ export const Content: FC = () => {
   }
 
   const offlineTitle = !appState.appLoading && `${name} is currently offline`;
+  const showChat = !chatDisabled && isChatAvailable && isChatVisible;
 
   return (
     <div>
@@ -230,6 +238,7 @@ export const Content: FC = () => {
                 messages={messages}
                 chatDisplayName={chatDisplayName}
                 chatUserId={chatUserId}
+                showChat={showChat}
               />
             ) : (
               <DesktopContent
@@ -242,9 +251,9 @@ export const Content: FC = () => {
               />
             )}
           </div>
-          {isChatVisible && !isMobile && <Sidebar />}
+          {showChat && !isMobile && <Sidebar />}
         </AntContent>
-        {(!isMobile || !isChatVisible) && <Footer version={version} />}
+        {(!isMobile || !showChat) && <Footer version={version} />}
       </Spin>
     </div>
   );

web/components/ui/Header/Header.tsx

@@ -9,16 +9,21 @@ const { Header: AntHeader } = Layout;
 export type HeaderComponentProps = {
   name: string;
   chatAvailable: boolean;
+  chatDisabled: boolean;
 };
 
-export const Header: FC<HeaderComponentProps> = ({ name = 'Your stream title', chatAvailable }) => (
+export const Header: FC<HeaderComponentProps> = ({
+  name = 'Your stream title',
+  chatAvailable,
+  chatDisabled,
+}) => (
   <AntHeader className={`${styles.header}`}>
     <div className={`${styles.logo}`}>
       <OwncastLogo variant="contrast" />
       <span>{name}</span>
     </div>
-    {chatAvailable && <UserDropdown />}
-    {!chatAvailable && (
+    {chatAvailable && !chatDisabled && <UserDropdown />}
+    {!chatAvailable && !chatDisabled && (
       <Tooltip title="Chat is available when the stream is live." placement="left">
         <Tag style={{ cursor: 'pointer' }}>Chat offline</Tag>
       </Tooltip>