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

web/components/action-buttons/ActionButtons.module.scss

@@ -1,10 +1,10 @@
 .row {
-  margin: 5px;
+  padding: .3rem;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   button {
-    margin-left: 5px;
+    margin-left: .3rem;
-    margin-right: 5px;
+    margin-right: .3rem;
   }
 }

web/components/action-buttons/FollowButton.tsx

@@ -8,7 +8,7 @@ import s from './ActionButton.module.scss';
 import { clientConfigStateAtom } from '../stores/ClientConfigStore';
 import { ClientConfig } from '../../interfaces/client-config.model';
 
-export default function FollowButton() {
+export default function FollowButton(props: any) {
   const [showModal, setShowModal] = useState(false);
   const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
   const { name } = clientConfig;
@@ -20,8 +20,9 @@ export default function FollowButton() {
   return (
     <>
       <Button
+        {...props}
         type="primary"
-        className={`${s.button}`}
+        className={s.button}
         icon={<HeartFilled />}
         onClick={buttonClicked}
       >

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -67,7 +67,7 @@ export default function ChatContainer(props: Props) {
     () => (
       <>
         <Virtuoso
-          style={{ height: isMobile ? 500 : '77vh' }}
+          style={{ height: isMobile ? 500 : '77vh', width: 'auto' }}
           ref={chatContainerRef}
           initialTopMostItemIndex={messages.length - 1} // Force alignment to bottom
           data={messages}
@@ -99,9 +99,11 @@ export default function ChatContainer(props: Props) {
 
   return (
     <div>
-      <div className={s.chatHeader}>
+      {
-        <span>stream chat</span>
+        // <div className={s.chatHeader}>
-      </div>
+        //   <span>stream chat</span>
+        // </div>
+      }
       <Spin spinning={loading} indicator={spinIcon}>
         {MessagesTable}
       </Spin>

web/components/chat/ChatTextField/ChatTextField.module.scss

@@ -20,6 +20,17 @@
 .inputWrapper {
   display: flex;
   position: relative;
+  border-radius: var(--theme-rounded-corners);
+  outline: 1px solid var(--color-owncast-gray-500);
+  &:hover {
+    box-shadow: 0 0 1px 1px var(--color-owncast-gray-300);
+  }
+  & > div {
+    transition: box-shadow .2s ease-in-out;
+    &:focus {
+      // box-shadow: 0 0 1px 1px var(--color-owncast-gray-300);
+    }
+  }
 }
 
 .emojiButton {

web/components/common/Logo/Logo.module.scss

@@ -4,8 +4,8 @@
   justify-content: center;
   width: max-content;
   svg {
-    width: 50px;
+    width: clamp(2.5rem, 8vw, 50px);
-    height: 50px;
+    height: clamp(2.5rem, 8vw, 50px);
   }
 }
 
@@ -14,15 +14,15 @@
   border-radius: 50%;
   background-color: var(--color-owncast-gray-100);
   svg {
-    width: 40px;
+    width: clamp(2rem, 7vw, 40px);
-    height: 40px;
+    height: clamp(2rem, 7vw, 40px);
   }
 }
 
 .simple {
   background-color: transparent;
   svg {
-    width: 50px;
+    width: clamp(2.5rem, 8vw, 50px);
-    height: 50px;
+    height: clamp(2.5rem, 8vw, 50px);
   }
 }

web/components/common/StreamInfo/StreamInfo.module.scss

@@ -0,0 +1,36 @@
+.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);
+  width: 100%;
+}
+
+.logoTitleSection {
+  display: flex;
+  align-items: center;
+}
+
+.titleSection {
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--theme-text-primary);
+  }
+
+  .subtitle {
+    font-size: 1.6vw;
+    font-weight: bold;
+  }
+}

web/components/common/StreamInfo/StreamInfo.tsx

@@ -0,0 +1,28 @@
+import { useRecoilValue } from 'recoil';
+import { ClientConfig } from '../../../interfaces/client-config.model';
+import { clientConfigStateAtom } from '../../stores/ClientConfigStore';
+import { ServerLogo } from '../../ui';
+import CategoryIcon from '../../ui/CategoryIcon/CategoryIcon';
+import SocialLinks from '../../ui/SocialLinks/SocialLinks';
+import s from './StreamInfo.module.scss';
+
+export default function StreamInfo() {
+  const { socialHandles, name, title, tags } = useRecoilValue<ClientConfig>(clientConfigStateAtom);
+
+  return (
+    <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>
+    </div>
+  );
+}

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

@@ -2,9 +2,19 @@
   display: grid;
   grid-template-columns: 1fr auto;
   &.mobile {
-    display: block;
+    display: flex;
-    // height: calc(100vh - 64px);
+    flex-direction: column;
-    // overflow-y: hidden;
+    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, setIsMobile] = useRecoilState<boolean | undefined>(isMobileAtom);
-  const isMobile = useRecoilValue(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}>
+          <Statusbar
-        {online && <OwncastPlayer source="/hls/stream.m3u8" online={online} />}
+            online={online}
-        {!online && (
+            lastConnectTime={lastConnectTime}
-          <OfflineBanner
+            lastDisconnectTime={lastDisconnectTime}
-            name={name}
+            viewerCount={viewerCount}
-            text="Stream is offline text goes here. Will create a new form to set it in the Admin."
           />
-        )}
+          <div className={s.buttonsLogoTitleSection}>
+            <ActionButtonRow>
+              {externalActionButtons}
+              <FollowButton size="small" />
+              <NotifyReminderPopup
+                visible={showNotifyReminder}
+                notificationClicked={() => setShowNotifyPopup(true)}
+                notificationClosed={() => disableNotifyReminderPopup()}
+              >
+                <NotifyButton onClick={() => setShowNotifyPopup(true)} />
+              </NotifyReminderPopup>
+            </ActionButtonRow>
 
-        <Statusbar
+            <Modal
-          online={online}
+              title="Notify"
-          lastConnectTime={lastConnectTime}
+              visible={showNotifyPopup}
-          lastDisconnectTime={lastDisconnectTime}
+              afterClose={() => disableNotifyReminderPopup()}
-          viewerCount={viewerCount}
+              handleCancel={() => disableNotifyReminderPopup()}
-        />
-        <div className={s.buttonsLogoTitleSection}>
-          <ActionButtonRow>
-            {externalActionButtons}
-            <FollowButton />
-            <NotifyReminderPopup
-              visible={showNotifyReminder}
-              notificationClicked={() => setShowNotifyPopup(true)}
-              notificationClosed={() => disableNotifyReminderPopup()}
             >
-              <NotifyButton onClick={() => setShowNotifyPopup(true)} />
+              <BrowserNotifyModal />
-            </NotifyReminderPopup>
+            </Modal>
-          </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>
           </div>
-
+        </div>
-          <Tabs defaultActiveKey="1">
+        <div className={s.lowerHalf}>
-            <TabPane tab="About" key="1" className={s.pageContentSection}>
+          <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);
+  width: clamp(4rem, 10vw, 120px);
-  height: clamp(5vw, 90px, 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';

web/components/video/VideoPoster.tsx

@@ -23,7 +23,6 @@ export default function VideoPoster(props: Props) {
       if (duration === '0s') {
         setDuration('3s');
       }
-
       setSrc(`${base}?${Date.now()}`);
     }, REFRESH_INTERVAL);
   }, []);
@@ -36,7 +35,7 @@ export default function VideoPoster(props: Props) {
         <CrossfadeImage
           src={src}
           duration={duration}
-          objectFit="contain"
+          objectFit="cover"
           width="100%"
           height="100%"
         />

web/components/video/player.scss

@@ -4,7 +4,7 @@
 }
 
 .vjs-owncast .vjs-big-play-button {
-  z-index: 999999;
+  z-index: 10;
   border-color: var(--primary-color) !important;
   border-radius: var(--theme-rounded-corners) !important;
 }

web/styles/ant-overrides.scss

@@ -3,6 +3,8 @@
 // ------------------------- */
 
 .ant-btn {
+  height: 2rem;
+  padding: .3rem 1rem;
   background-color: var(--owncast-purple-25);
   font-size: .85rem;
   font-weight: bold;

web/styles/globals.scss

@@ -9,8 +9,7 @@ body {
   padding: 0;
   margin: 0;
   font-family: var(--theme-font-family), var(--theme-header-font-family), sans-serif;
-  font-size: clamp(15px, 1.5vw, 16px);
+  font-size: clamp(14px, 1.5vw, 17px);
-
   background-color: var(--default-bg-color);
   color: var(--default-text-color);
 }