Added chat tab on mobile layouts and other changes to mobile UI

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

@@ -2,9 +2,19 @@
   display: grid;
   grid-template-columns: 1fr auto;
   &.mobile {
-    display: block;
-    // height: calc(100vh - 64px);
-    // overflow-y: hidden;
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 64px);
+    overflow-y: hidden;
+    .topHalf {
+      border: 1px dashed white;
+      height: calc(40vh - 64px);
+      overflow: hidden;
+    }
+    .lowerHalf {
+      border: 1px dashed red;
+      height: 60vh;
+    }
   }
 }
 
@@ -22,46 +32,6 @@
   display: flex;
   flex-direction: column;
 }
-.streamInfo {
-  position: relative;
-  display: grid;
-}
-
-.buttonsLogoTitleSection {
-  margin-left: 1.5vw;
-  margin-right: 1.5vw;
-}
-
-.pageContentSection {
-  background-color: var(--theme-background-secondary);
-  border-radius: var(--theme-rounded-corners);
-  margin: 1vw;
-  padding: 1vw;
-  width: 100%;
-}
-
-.logoTitleSection {
-  display: flex;
-  flex-direction: row;
-}
-
-.titleSection {
-  display: flex;
-  flex-direction: column;
-  margin-top: 20px;
-  margin-left: 10px;
-
-  .title {
-    font-size: 1.5rem;
-    font-weight: bold;
-    color: var(--theme-text-primary);
-  }
-
-  .subtitle {
-    font-size: 1.6vw;
-    font-weight: bold;
-  }
-}
 
 .loadingSpinner {
   position: fixed;

web/components/ui/Content/Content.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-danger */
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { Layout, Tabs, Spin } from 'antd';
 import { useEffect, useState } from 'react';
 import cn from 'classnames';
@@ -31,10 +31,7 @@ import ActionButton from '../../action-buttons/ActionButton';
 import Statusbar from '../Statusbar/Statusbar';
 import { ServerStatus } from '../../../interfaces/server-status.model';
 import { Follower } from '../../../interfaces/follower';
-import SocialLinks from '../SocialLinks/SocialLinks';
 import NotifyReminderPopup from '../NotifyReminderPopup/NotifyReminderPopup';
-import ServerLogo from '../Logo/Logo';
-import CategoryIcon from '../CategoryIcon/CategoryIcon';
 import OfflineBanner from '../OfflineBanner/OfflineBanner';
 import { AppStateOptions } from '../../stores/application-state';
 import FollowButton from '../../action-buttons/FollowButton';
@@ -50,14 +47,13 @@ export default function ContentComponent() {
   const status = useRecoilValue<ServerStatus>(serverStatusState);
   const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
   const isChatVisible = useRecoilValue<boolean>(isChatVisibleSelector);
-  const setIsMobile = useSetRecoilState<boolean>(isMobileAtom);
-  const isMobile = useRecoilValue(isMobileAtom);
+  const [isMobile, setIsMobile] = useRecoilState<boolean | undefined>(isMobileAtom);
   const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom);
   const online = useRecoilValue<boolean>(isOnlineSelector);
   const chatDisplayName = useRecoilValue<string>(chatDisplayNameAtom);
   const chatUserId = useRecoilValue<string>(chatUserIdAtom);
 
-  const { extraPageContent, version, socialHandles, name, title, tags, summary } = clientConfig;
+  const { extraPageContent, version, name, summary } = clientConfig;
   const { viewerCount, lastConnectTime, lastDisconnectTime } = status;
   const [showNotifyReminder, setShowNotifyReminder] = useState(false);
   const [showNotifyPopup, setShowNotifyPopup] = useState(false);
@@ -123,84 +119,73 @@ export default function ContentComponent() {
 
   return (
     <Content className={rootClassName}>
-      <Spin className={s.loadingSpinner} size="large" spinning={appState.appLoading} />
+      <div className={s.leftContent}>
+        <Spin className={s.loadingSpinner} size="large" spinning={appState.appLoading} />
+        <div className={s.topHalf}>
+          {online && <OwncastPlayer source="/hls/stream.m3u8" online={online} />}
+          {!online && (
+            <OfflineBanner
+              name={name}
+              text="Stream is offline text goes here. Will create a new form to set it in the Admin."
+            />
+          )}
 
-      <div className={s.leftCol}>
-        {online && <OwncastPlayer source="/hls/stream.m3u8" online={online} />}
-        {!online && (
-          <OfflineBanner
-            name={name}
-            text="Stream is offline text goes here. Will create a new form to set it in the Admin."
+          <Statusbar
+            online={online}
+            lastConnectTime={lastConnectTime}
+            lastDisconnectTime={lastDisconnectTime}
+            viewerCount={viewerCount}
           />
-        )}
+          <div className={s.buttonsLogoTitleSection}>
+            <ActionButtonRow>
+              {externalActionButtons}
+              <FollowButton size="small" />
+              <NotifyReminderPopup
+                visible={showNotifyReminder}
+                notificationClicked={() => setShowNotifyPopup(true)}
+                notificationClosed={() => disableNotifyReminderPopup()}
+              >
+                <NotifyButton onClick={() => setShowNotifyPopup(true)} />
+              </NotifyReminderPopup>
+            </ActionButtonRow>
 
-        <Statusbar
-          online={online}
-          lastConnectTime={lastConnectTime}
-          lastDisconnectTime={lastDisconnectTime}
-          viewerCount={viewerCount}
-        />
-        <div className={s.buttonsLogoTitleSection}>
-          <ActionButtonRow>
-            {externalActionButtons}
-            <FollowButton />
-            <NotifyReminderPopup
-              visible={showNotifyReminder}
-              notificationClicked={() => setShowNotifyPopup(true)}
-              notificationClosed={() => disableNotifyReminderPopup()}
+            <Modal
+              title="Notify"
+              visible={showNotifyPopup}
+              afterClose={() => disableNotifyReminderPopup()}
+              handleCancel={() => disableNotifyReminderPopup()}
             >
-              <NotifyButton onClick={() => setShowNotifyPopup(true)} />
-            </NotifyReminderPopup>
-          </ActionButtonRow>
-
-          <Modal
-            title="Notify"
-            visible={showNotifyPopup}
-            afterClose={() => disableNotifyReminderPopup()}
-            handleCancel={() => disableNotifyReminderPopup()}
-          >
-            <BrowserNotifyModal />
-          </Modal>
-
-          <div className={s.streamInfo}>
-            <div className={s.logoTitleSection}>
-              <ServerLogo src="/logo" />
-              <div className={s.titleSection}>
-                <div className={s.title}>{name}</div>
-                <div className={s.subtitle}>
-                  {title}
-                  <CategoryIcon tags={tags} />
-                </div>
-                <div>{tags.length > 0 && tags.map(tag => <span key={tag}>#{tag}&nbsp;</span>)}</div>
-                <SocialLinks links={socialHandles} />
-              </div>
-            </div>
+              <BrowserNotifyModal />
+            </Modal>
           </div>
-
-          <Tabs defaultActiveKey="1">
-            <TabPane tab="About" key="1" className={s.pageContentSection}>
+        </div>
+        <div className={s.lowerHalf}>
+          <Tabs defaultActiveKey="0">
+            {isChatVisible && isMobile && (
+              <TabPane tab="Chat" key="0" className={s.pageContentSection}>
+                <div style={{ position: 'relative' }}>
+                  <div className={s.mobileChat}>
+                    <ChatContainer
+                      messages={messages}
+                      loading={appState.chatLoading}
+                      usernameToHighlight={chatDisplayName}
+                      chatUserId={chatUserId}
+                      isModerator={false}
+                      isMobile={isMobile}
+                    />
+                  </div>
+                  <ChatTextField />
+                </div>
+              </TabPane>
+            )}
+            <TabPane tab="About" key="2" className={s.pageContentSection}>
               <div dangerouslySetInnerHTML={{ __html: summary }} />
               <CustomPageContent content={extraPageContent} />
             </TabPane>
-            <TabPane tab="Followers" key="2" className={s.pageContentSection}>
+            <TabPane tab="Followers" key="3" className={s.pageContentSection}>
               <FollowerCollection total={total} followers={followers} />
             </TabPane>
           </Tabs>
-          {isChatVisible && isMobile && (
-            <div style={{ position: 'relative' }}>
-              <div className={s.mobileChat}>
-                <ChatContainer
-                  messages={messages}
-                  loading={appState.chatLoading}
-                  usernameToHighlight={chatDisplayName}
-                  chatUserId={chatUserId}
-                  isModerator={false}
-                  isMobile={isMobile}
-                />
-              </div>
-              <ChatTextField />
-            </div>
-          )}
           <Footer version={version} />
         </div>
       </div>

web/components/ui/Header/Header.module.scss

@@ -4,7 +4,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  z-index: 1;
+  z-index: 20;
   padding: 0.5rem 1rem;
   background-color: var(--default-bg-color);
   .logo {

web/components/ui/Logo/Logo.module.scss

@@ -4,8 +4,8 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  width: clamp(5vw, 90px, 120px);
-  height: clamp(5vw, 90px, 120px);
+  width: clamp(4rem, 10vw, 120px);
+  height: clamp(4rem, 10vw, 120px);
   border-radius: 50%;
   border-width: 3px;
   border-style: solid;

web/components/ui/Logo/index.ts

@@ -0,0 +1 @@
+export { default } from './Logo';

web/components/ui/OfflineBanner/OfflineBanner.module.scss

@@ -1,17 +1,17 @@
 .outerContainer {
-  width: 100%;
   display: flex;
   justify-content: center;
 }
 
 .innerContainer {
+  width: clamp(200px, 100%, 300px);
   display: flex;
   flex-direction: column;
-  width: 50%;
+  ;
   background-color: var(--theme-background-secondary);
-  margin: 2vw;
+  margin: auto;
   border-radius: var(--theme-rounded-corners);
-  padding: 25px;
+  padding: 1rem;
 }
 
 .header {

web/components/ui/Statusbar/Statusbar.module.scss

@@ -1,10 +1,12 @@
 .statusbar {
   display: flex;
   align-items: center;
+  font-size: .8rem;
   padding-left: 10px;
   padding-right: 10px;
   justify-content: space-between;
-  height: 30px;
+  height: 2rem;
   width: 100%;
+  color: var(--color-owncast-gray-300);
   background-color: var(--theme-background-secondary);
 }

web/components/ui/index.tsx

@@ -3,3 +3,4 @@ export { default as Sidebar } from './Sidebar/index';
 export { default as Footer } from './Footer/index';
 export { default as Content } from './Content/index';
 export { default as ModIcon } from './ModIcon';
+export { default as ServerLogo } from './Logo';