Reworked mobile UI for some components

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>
   );
 }