change chat from a sidebar to a column (#3113)

* change chat from a sidebar to a column

Using a 2-column layout prevents the chat scrollbar from overlapping the page
scrollbar. Also, it no longer needs to calculate extra padding for elements.

* remove unused Sidebar.tsx

* fix css for chat column

* re-center "Go to last message" button

* main content column always uses maximum height

* lint

* re-hide scrollbars in mainContent on chromium

* fix chat column width when input is over-full

* chat is only fixed-width in desktop

---------

Co-authored-by: janWilejan <>

web/components/chat/ChatContainer/ChatContainer.module.scss

@@ -2,8 +2,8 @@
 
 // The button that is displayed to scroll to the bottom of the chat.
 .toBottomWrap {
+  align-self: center;
   display: flex;
-  width: 100%;
   justify-content: center;
   position: absolute;
   bottom: 75px;
@@ -23,6 +23,7 @@
 }
 
 .chatContainer {
+  flex: 0 0 auto;
   display: flex;
   flex-direction: column;
   background-color: var(--theme-color-components-chat-background);

web/components/layouts/Main/Main.module.scss

@@ -4,7 +4,8 @@
   // this margin is for fixed header
   padding-top: var(--header-height);
   background-color: var(--theme-color-main-background);
-  min-height: 100vh;
+  height: 100vh;
+  display: flex;
   position: relative;
 
   // add some spacing between the last row of content and the footer

web/components/layouts/Main/Main.tsx

@@ -8,7 +8,6 @@ import { Layout } from 'antd';
 import dynamic from 'next/dynamic';
 import Script from 'next/script';
 import { ErrorBoundary } from 'react-error-boundary';
-import { Footer } from '../../ui/Footer/Footer';
 import {
   ClientConfigStore,
   isChatAvailableSelector,
@@ -16,9 +15,6 @@ import {
   fatalErrorStateAtom,
   appStateAtom,
   serverStatusState,
-  isMobileAtom,
-  ChatState,
-  chatStateAtom,
 } from '../../stores/ClientConfigStore';
 import { Content } from '../../ui/Content/Content';
 import { Header } from '../../ui/Header/Header';
@@ -33,7 +29,6 @@ import { PushNotificationServiceWorker } from '../../workers/PushNotificationSer
 import { AppStateOptions } from '../../stores/application-state';
 import { Noscript } from '../../ui/Noscript/Noscript';
 import { ServerStatus } from '../../../interfaces/server-status.model';
-import { DYNAMIC_PADDING_VALUE } from '../../../utils/constants';
 
 // Lazy loaded components
 
@@ -54,17 +49,11 @@ export const Main: FC = () => {
   const isChatAvailable = useRecoilValue<boolean>(isChatAvailableSelector);
   const fatalError = useRecoilValue<DisplayableError>(fatalErrorStateAtom);
   const appState = useRecoilValue<AppStateOptions>(appStateAtom);
-  const isMobile = useRecoilValue<boolean | undefined>(isMobileAtom);
-  const chatState = useRecoilValue<ChatState>(chatStateAtom);
   const layoutRef = useRef<HTMLDivElement>(null);
   const { chatDisabled } = clientConfig;
   const { videoAvailable } = appState;
   const { online, streamTitle } = clientStatus;
 
-  // accounts for sidebar width when online in desktop
-  const showChat = online && !chatDisabled && chatState === ChatState.VISIBLE;
-  const dynamicFooterPadding = showChat && !isMobile ? DYNAMIC_PADDING_VALUE : '';
-
   useEffect(() => {
     setupNoLinkReferrer(layoutRef.current);
   }, []);
@@ -171,10 +160,6 @@ export const Main: FC = () => {
         {fatalError && (
           <FatalErrorStateModal title={fatalError.title} message={fatalError.message} />
         )}
-
-        <div className={styles.footerContainer}>
-          <Footer dynamicPaddingValue={dynamicFooterPadding} />
-        </div>
       </Layout>
       <Noscript />
     </>

web/components/ui/Content/Content.module.scss

@@ -1,5 +1,28 @@
 @import '../../../styles/mixins';
 
+.main {
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  height: 100%;
+
+  // I'm not quite sure why, but sass ignores `#chat-container` here
+  [id="chat-container"] {
+    width: var(--chat-col-width);
+  }
+}
+
+.mainColumn {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  overflow: auto;
+}
+
+.mainColumn::-webkit-scrollbar, .mainColumn::-webkit-scrollbar-thumb {
+  display: none;
+}
+
 .lowerSection {
   padding: var(--content-padding);
 }
@@ -59,6 +82,7 @@
 
 .desktopActionButtons {
   display: block;
+  width: 100%;
 
   @include screen(tablet) {
     display: none;

web/components/ui/Content/Content.tsx

@@ -1,5 +1,5 @@
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { Skeleton, Col, Row, Button, Spin } from 'antd';
+import { Skeleton, Row, Button, Spin } from 'antd';
 import MessageFilled from '@ant-design/icons/MessageFilled';
 import { FC, useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
@@ -24,7 +24,6 @@ import { ClientConfig } from '../../../interfaces/client-config.model';
 
 import styles from './Content.module.scss';
 import desktopStyles from './DesktopContent.module.scss';
-import { Sidebar } from '../Sidebar/Sidebar';
 import { OfflineBanner } from '../OfflineBanner/OfflineBanner';
 import { AppStateOptions } from '../../stores/application-state';
 import { ServerStatus } from '../../../interfaces/server-status.model';
@@ -35,8 +34,15 @@ import { Modal } from '../Modal/Modal';
 import { DesktopContent } from './DesktopContent';
 import { MobileContent } from './MobileContent';
 import { ChatModal } from '../../modals/ChatModal/ChatModal';
+import { Footer } from '../Footer/Footer';
 
 // Lazy loaded components
+const ChatContainer = dynamic(
+  () => import('../../chat/ChatContainer/ChatContainer').then(mod => mod.ChatContainer),
+  {
+    ssr: false,
+  },
+);
 
 const FollowModal = dynamic(
   () => import('../../modals/FollowModal/FollowModal').then(mod => mod.FollowModal),
@@ -208,12 +214,9 @@ export const Content: FC = () => {
 
   const showChat = isChatAvailable && !chatDisabled && chatState === ChatState.VISIBLE;
 
-  // accounts for sidebar width when online in desktop
-  const dynamicPadding = showChat && !isMobile ? '320px' : '0px';
-
   return (
-    <>
+    <div className={styles.main}>
-      <>
+      <div className={styles.mainColumn}>
         {appState.appLoading && (
           <div
             className={classnames([styles.topSectionElement, styles.centerSpinner])}
@@ -222,61 +225,54 @@ export const Content: FC = () => {
             <Spin delay={2} size="large" tip="One moment..." />
           </div>
         )}
-        {showChat && !isMobile && <Sidebar />}
         <Row>
-          <Col span={24} style={{ paddingRight: dynamicPadding }}>
+          {online && (
-            {online && (
+            <OwncastPlayer
-              <OwncastPlayer
+              source="/hls/stream.m3u8"
-                source="/hls/stream.m3u8"
+              online={online}
-                online={online}
+              title={streamTitle || name}
-                title={streamTitle || name}
+              className={styles.topSectionElement}
-                className={styles.topSectionElement}
-              />
-            )}
-            {!online && !appState.appLoading && (
-              <div id="offline-message">
-                <OfflineBanner
-                  showsHeader={false}
-                  streamName={name}
-                  customText={offlineMessage}
-                  notificationsEnabled={supportsBrowserNotifications}
-                  fediverseAccount={fediverseAccount}
-                  lastLive={lastDisconnectTime}
-                  onNotifyClick={() => setShowNotifyModal(true)}
-                  onFollowClick={() => setShowFollowModal(true)}
-                  className={classnames([styles.topSectionElement, styles.offlineBanner])}
-                />
-              </div>
-            )}
-          </Col>
-        </Row>
-        <Row>
-          <Col span={24} style={{ paddingRight: dynamicPadding }}>
-            {isStreamLive && (
-              <Statusbar
-                online={online}
-                lastConnectTime={lastConnectTime}
-                lastDisconnectTime={lastDisconnectTime}
-                viewerCount={viewerCount}
-                className={classnames(styles.topSectionElement, styles.statusBar)}
-              />
-            )}
-          </Col>
-        </Row>
-        <Row>
-          <Col span={24} style={{ paddingRight: dynamicPadding }}>
-            <ActionButtons
-              supportFediverseFeatures={supportFediverseFeatures}
-              supportsBrowserNotifications={supportsBrowserNotifications}
-              showNotifyReminder={showNotifyReminder}
-              setShowNotifyModal={setShowNotifyModal}
-              disableNotifyReminderPopup={disableNotifyReminderPopup}
-              externalActions={externalActions || []}
-              setExternalActionToDisplay={setExternalActionToDisplay}
-              setShowFollowModal={setShowFollowModal}
-              externalActionSelected={externalActionSelected}
             />
-          </Col>
+          )}
+          {!online && !appState.appLoading && (
+            <div id="offline-message" style={{ width: '100%' }}>
+              <OfflineBanner
+                showsHeader={false}
+                streamName={name}
+                customText={offlineMessage}
+                notificationsEnabled={supportsBrowserNotifications}
+                fediverseAccount={fediverseAccount}
+                lastLive={lastDisconnectTime}
+                onNotifyClick={() => setShowNotifyModal(true)}
+                onFollowClick={() => setShowFollowModal(true)}
+                className={classnames([styles.topSectionElement, styles.offlineBanner])}
+              />
+            </div>
+          )}
+        </Row>
+        <Row>
+          {isStreamLive && (
+            <Statusbar
+              online={online}
+              lastConnectTime={lastConnectTime}
+              lastDisconnectTime={lastDisconnectTime}
+              viewerCount={viewerCount}
+              className={classnames(styles.topSectionElement, styles.statusBar)}
+            />
+          )}
+        </Row>
+        <Row>
+          <ActionButtons
+            supportFediverseFeatures={supportFediverseFeatures}
+            supportsBrowserNotifications={supportsBrowserNotifications}
+            showNotifyReminder={showNotifyReminder}
+            setShowNotifyModal={setShowNotifyModal}
+            disableNotifyReminderPopup={disableNotifyReminderPopup}
+            externalActions={externalActions || []}
+            setExternalActionToDisplay={setExternalActionToDisplay}
+            setShowFollowModal={setShowFollowModal}
+            externalActionSelected={externalActionSelected}
+          />
         </Row>
 
         <Modal
@@ -290,8 +286,19 @@ export const Content: FC = () => {
         <Row>
           {!name && <Skeleton active loading style={{ marginLeft: '10vw', marginRight: '10vw' }} />}
           {isMobile ? (
-            <Col span={24}>
+            <MobileContent
-              <MobileContent
+              name={name}
+              summary={summary}
+              tags={tags}
+              socialHandles={socialHandles}
+              extraPageContent={extraPageContent}
+              setShowFollowModal={setShowFollowModal}
+              supportFediverseFeatures={supportFediverseFeatures}
+              online={online}
+            />
+          ) : (
+            <div className={desktopStyles.bottomSectionContent}>
+              <DesktopContent
                 name={name}
                 summary={summary}
                 tags={tags}
@@ -299,26 +306,23 @@ export const Content: FC = () => {
                 extraPageContent={extraPageContent}
                 setShowFollowModal={setShowFollowModal}
                 supportFediverseFeatures={supportFediverseFeatures}
-                online={online}
               />
-            </Col>
+            </div>
-          ) : (
-            <Col span={24} style={{ paddingRight: dynamicPadding }}>
-              <div className={desktopStyles.bottomSectionContent}>
-                <DesktopContent
-                  name={name}
-                  summary={summary}
-                  tags={tags}
-                  socialHandles={socialHandles}
-                  extraPageContent={extraPageContent}
-                  setShowFollowModal={setShowFollowModal}
-                  supportFediverseFeatures={supportFediverseFeatures}
-                />
-              </div>
-            </Col>
           )}
         </Row>
-      </>
+        <div style={{ flex: '1 1' }} />
+        <Footer />
+      </div>
+      {showChat && !isMobile && currentUser && (
+        <ChatContainer
+          messages={messages}
+          usernameToHighlight={currentUser.displayName}
+          chatUserId={currentUser.id}
+          isModerator={currentUser.isModerator}
+          chatAvailable={isChatAvailable}
+          showInput={!!currentUser}
+        />
+      )}
       {externalActionToDisplay && (
         <ExternalModal
           externalActionToDisplay={externalActionToDisplay}
@@ -354,6 +358,6 @@ export const Content: FC = () => {
           Chat <MessageFilled />
         </Button>
       )}
-    </>
+    </div>
   );
 };

web/components/ui/Footer/Footer.module.scss

@@ -1,8 +1,6 @@
 @import '../../../styles/mixins';
 
 .footer {
-	position: absolute;
-	bottom: 0;
   display: flex;
   align-items: center;
   flex-flow: row wrap;

web/components/ui/Footer/Footer.tsx

@@ -4,18 +4,11 @@ import styles from './Footer.module.scss';
 import { ServerStatus } from '../../../interfaces/server-status.model';
 import { serverStatusState } from '../../stores/ClientConfigStore';
 
-export type FooterProps = {
+export const Footer: FC = () => {
-  dynamicPaddingValue?: string;
-};
-
-export const Footer: FC<FooterProps> = ({ dynamicPaddingValue }) => {
   const clientStatus = useRecoilValue<ServerStatus>(serverStatusState);
   const { versionNumber } = clientStatus;
-  const dynamicPaddingStyle = dynamicPaddingValue
-    ? { paddingRight: `calc(${dynamicPaddingValue} + var(--footer-padding-x)` }
-    : null;
   return (
-    <footer className={styles.footer} id="footer" style={dynamicPaddingStyle}>
+    <footer className={styles.footer} id="footer">
       <span>
         Powered by <a href="https://owncast.online">Owncast v{versionNumber}</a>
       </span>

web/components/ui/Sidebar/Sidebar.module.scss

@@ -1,30 +0,0 @@
-@import '../../../styles/mixins';
-
-.root {
-  background-color: var(--theme-color-components-chat-background);
-
-  @include screen(desktop) {
-    position: fixed;
-    right: 0;
-    bottom: 0;
-    top: 69px;
-    z-index:100;
-  }
-
-  @media screen and (width <= 1120px) and (width >= 768px) {
-    top: 65px;
-  }
-}
-
-/*
-First div is .ant-layout-sider-children
-Only way to target it apparently
-*/
-.root > div {
-  display: flex;
-  flex-flow: column nowrap;
-  -moz-box-flex: 1 !important;
-  flex-grow: 1 !important;
-  height: 100% !important;
-  width: 100%!important;
-}

web/components/ui/Sidebar/Sidebar.tsx

@@ -1,49 +0,0 @@
-import Sider from 'antd/lib/layout/Sider';
-import { useRecoilValue } from 'recoil';
-import { FC } from 'react';
-import dynamic from 'next/dynamic';
-import { Spin } from 'antd';
-import { ChatMessage } from '../../../interfaces/chat-message.model';
-import styles from './Sidebar.module.scss';
-
-import {
-  currentUserAtom,
-  visibleChatMessagesSelector,
-  isChatAvailableSelector,
-} from '../../stores/ClientConfigStore';
-
-// Lazy loaded components
-const ChatContainer = dynamic(
-  () => import('../../chat/ChatContainer/ChatContainer').then(mod => mod.ChatContainer),
-  {
-    ssr: false,
-  },
-);
-
-export const Sidebar: FC = () => {
-  const currentUser = useRecoilValue(currentUserAtom);
-  const messages = useRecoilValue<ChatMessage[]>(visibleChatMessagesSelector);
-  const isChatAvailable = useRecoilValue(isChatAvailableSelector);
-
-  if (!currentUser) {
-    return (
-      <Sider className={styles.root} collapsedWidth={0} width={320}>
-        <Spin spinning size="large" style={{ position: 'relative', top: '40vh' }} />
-      </Sider>
-    );
-  }
-
-  const { id, isModerator, displayName } = currentUser;
-  return (
-    <Sider className={styles.root} collapsedWidth={0} width={320}>
-      <ChatContainer
-        messages={messages}
-        usernameToHighlight={displayName}
-        chatUserId={id}
-        isModerator={isModerator}
-        chatAvailable={isChatAvailable}
-        showInput={!!currentUser}
-      />
-    </Sider>
-  );
-};

web/styles/globals.scss

@@ -133,11 +133,3 @@ body {
   margin-right: 5px;
   vertical-align: middle;
 }
-
-body::-webkit-scrollbar {
-  display: none;
-}
-
-body::-webkit-scrollbar-thumb {
-  display: none;
-}

web/utils/constants.js

@@ -1 +0,0 @@
-export const DYNAMIC_PADDING_VALUE = '320px';