Move statusbar back to under the player

web/components/common/StreamInfo/StreamInfo.tsx

@@ -9,7 +9,6 @@ import {
   serverStatusState,
 } from '../../stores/ClientConfigStore';
 import { ServerLogo } from '../../ui';
-import StatusBar from '../../ui/Statusbar';
 import CategoryIcon from '../../ui/CategoryIcon/CategoryIcon';
 import SocialLinks from '../../ui/SocialLinks/SocialLinks';
 import s from './StreamInfo.module.scss';
@@ -20,8 +19,7 @@ interface Props {
 }
 export default function StreamInfo({ isMobile }: Props) {
   const { socialHandles, name, title, tags } = useRecoilValue<ClientConfig>(clientConfigStateAtom);
-  const { viewerCount, lastConnectTime, lastDisconnectTime } =
-    useRecoilValue<ServerStatus>(serverStatusState);
+  const { viewerCount } = useRecoilValue<ServerStatus>(serverStatusState);
   const online = useRecoilValue<boolean>(isOnlineSelector);
 
   useEffect(() => {
@@ -65,12 +63,6 @@ export default function StreamInfo({ isMobile }: Props) {
           <SocialLinks links={socialHandles} />
         </div>
       </div>
-      <StatusBar
-        online={online}
-        lastConnectTime={lastConnectTime}
-        lastDisconnectTime={lastDisconnectTime}
-        viewerCount={viewerCount}
-      />
     </div>
   );
 }

web/components/ui/Content/Content.tsx

@@ -14,6 +14,7 @@ import {
   appStateAtom,
   isOnlineSelector,
   isMobileAtom,
+  serverStatusState,
 } from '../../stores/ClientConfigStore';
 import { ClientConfig } from '../../../interfaces/client-config.model';
 import CustomPageContent from '../CustomPageContent/CustomPageContent';
@@ -35,6 +36,8 @@ import NotifyButton from '../../action-buttons/NotifyButton';
 import Modal from '../Modal/Modal';
 import BrowserNotifyModal from '../../modals/BrowserNotify/BrowserNotifyModal';
 import StreamInfo from '../../common/StreamInfo';
+import { ServerStatus } from '../../../interfaces/server-status.model';
+import { StatusBar } from '..';
 
 const { TabPane } = Tabs;
 const { Content } = Layout;
@@ -48,7 +51,8 @@ export default function ContentComponent() {
   const online = useRecoilValue<boolean>(isOnlineSelector);
   const chatDisplayName = useRecoilValue<string>(chatDisplayNameAtom);
   const chatUserId = useRecoilValue<string>(chatUserIdAtom);
-
+  const { viewerCount, lastConnectTime, lastDisconnectTime } =
+    useRecoilValue<ServerStatus>(serverStatusState);
   const { extraPageContent, version, name, summary } = clientConfig;
   const [showNotifyReminder, setShowNotifyReminder] = useState(false);
   const [showNotifyPopup, setShowNotifyPopup] = useState(false);
@@ -120,6 +124,12 @@ export default function ContentComponent() {
               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}

web/styles/theme.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 12 Jul 2022 20:15:16 GMT
+// Generated on Tue, 12 Jul 2022 21:03:36 GMT
 // 
 // How to edit these values:
 // Edit the corresponding token file under the style-definitions directory

web/styles/variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 12 Jul 2022 20:15:16 GMT
+ * Generated on Tue, 12 Jul 2022 21:03:36 GMT
  * 
  * How to edit these values:
  * Edit the corresponding token file under the style-definitions directory