Added peer count and related css

adityathakurxd · Mar 7, 2024 · 411be01 · 411be01
1 parent e4393d6
commit 411be01
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/app/components/Conference.tsx b/app/components/Conference.tsx
@@ -1,4 +1,4 @@
-import { selectPeers, useHMSStore } from '@100mslive/react-sdk'
+import { selectPeerCount, selectPeers, useHMSStore } from '@100mslive/react-sdk'
 import Peer from '../components/Peer'
 import '@tldraw/tldraw/tldraw.css'
 import { TldrawLogo } from '../components/TldrawLogo'
@@ -11,11 +11,14 @@ import { Pagination } from './Pagination'
 import { LiveResults } from './LiveResults'
 import Footer from './Footer'
 import CopyButton from './CopyButton'
+import { PeopleIcon } from '@100mslive/react-icons'
+import { Text } from '@100mslive/roomkit-react'
 
 const HOST_URL = 'wss://demo-yjs-server-production.up.railway.app'
 
 function Conference() {
 	const peers = useHMSStore(selectPeers)
+	const peerCount = useHMSStore(selectPeerCount)
 	const roomCode = localStorage.getItem('roomCode') ?? ''
 
 	const store = useYjsStore({
@@ -29,6 +32,12 @@ function Conference() {
 		<div className="conference-component">
 			<div className="conference-section">
 				<div className="peers-container">
+					<div className="peer-count-container">
+						<PeopleIcon />
+						<Text variant="sm" css={{ mx: '$4', c: 'inherit' }}>
+							{peerCount}
+						</Text>
+					</div>
 					{peers?.[peerIndex]?.videoTrack ? <Peer peer={peers[peerIndex]} /> : null}
 					{peers?.[peerIndex + 1]?.videoTrack ? <Peer peer={peers[peerIndex + 1]} /> : null}
 

diff --git a/app/components/styles.css b/app/components/styles.css
@@ -52,6 +52,16 @@
 	width: 100%;
 }
 
+.peer-count-container {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	margin-bottom: 10px;
+	border: solid 1px black;
+	width: fit-content;
+	border-radius: 6px;
+}
+
 /* You can add more specific styles here */
 .tlui-navigation-zone {
 	display: none;