Reworked mobile UI for some components

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

@@ -1,4 +1,4 @@
-.streamInfo {
+.root {
   position: relative;
   display: grid;
 }
@@ -34,3 +34,44 @@
     font-weight: bold;
   }
 }
+
+.mobile {
+  &.root {
+    position: relative;
+    display: flex;
+    padding: 0 .3rem;
+    align-items: center;
+    justify-content: space-between;
+    .mobileInfo {
+      display: flex;
+      align-items: center;
+      .title {
+        font-size: 1.2rem;
+        font-weight: 600;
+      }
+    }
+    .mobileStatus {
+      display: flex;
+      font-weight: 600;
+      .viewerCount {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+      .liveStatus {
+        display: flex;
+        align-items: center;
+        margin-left: .5rem;
+        font-size: .8rem;
+        gap: 4px;
+        .liveCircle {
+          border-radius: 50%;
+          background-color: red;
+          width: .5rem;
+          height: .5rem;
+        }
+      }
+    }
+  }
+}
+

web/components/common/StreamInfo/StreamInfo.tsx

@@ -1,16 +1,56 @@
 import { useRecoilValue } from 'recoil';
+import cn from 'classnames';
+import { EyeFilled } from '@ant-design/icons';
+import { useEffect } from 'react';
 import { ClientConfig } from '../../../interfaces/client-config.model';
-import { clientConfigStateAtom } from '../../stores/ClientConfigStore';
+import {
+  clientConfigStateAtom,
+  isOnlineSelector,
+  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';
+import { ServerStatus } from '../../../interfaces/server-status.model';
 
-export default function StreamInfo() {
+interface Props {
+  isMobile: boolean;
+}
+export default function StreamInfo({ isMobile }: Props) {
   const { socialHandles, name, title, tags } = useRecoilValue<ClientConfig>(clientConfigStateAtom);
+  const { viewerCount, lastConnectTime, lastDisconnectTime } =
+    useRecoilValue<ServerStatus>(serverStatusState);
+  const online = useRecoilValue<boolean>(isOnlineSelector);
 
-  return (
-    <div className={s.streamInfo}>
+  useEffect(() => {
+    console.log({ online });
+  }, [online]);
+
+  return isMobile ? (
+    <div className={cn(s.root, s.mobile)}>
+      <div className={s.mobileInfo}>
+        <ServerLogo src="/logo" />
+        <div className={s.title}>{name}</div>
+      </div>
+      <div className={s.mobileStatus}>
+        <div className={s.viewerCount}>
+          {online && (
+            <>
+              <span>{viewerCount}</span>
+              <EyeFilled />
+            </>
+          )}
+        </div>
+        <div className={s.liveStatus}>
+          {online && <div className={s.liveCircle} />}
+          <span>{online ? 'LIVE' : 'OFFLINE'}</span>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <div className={s.root}>
       <div className={s.logoTitleSection}>
         <ServerLogo src="/logo" />
         <div className={s.titleSection}>
@@ -23,6 +63,12 @@ export default function StreamInfo() {
           <SocialLinks links={socialHandles} />
         </div>
       </div>
+      <StatusBar
+        online={online}
+        lastConnectTime={lastConnectTime}
+        lastDisconnectTime={lastDisconnectTime}
+        viewerCount={viewerCount}
+      />
     </div>
   );
 }