From 8f6b767cbc40b05226701a3ad1ef4883b77c9703 Mon Sep 17 00:00:00 2001
From: SujithThirumalaisamy <sujithmasi1267@gmail.com>
Date: Thu, 10 Apr 2025 01:00:55 +0530
Subject: [PATCH] Fixed ProfileImage and ParticipantCount

---
 app/custom/CustomControlBar.tsx         | 14 +++++---------
 app/custom/ParticipantList.tsx          | 10 +++++++++-
 app/custom/layout/CustomVideoLayout.tsx | 16 +++-------------
 app/rooms/[roomName]/PageClientImpl.tsx |  2 +-
 app/svg/camera.tsx                      |  4 ++--
 app/svg/screen-share.tsx                |  6 +++---
 lib/ParticipantTile.tsx                 |  6 +++---
 7 files changed, 26 insertions(+), 32 deletions(-)

diff --git a/app/custom/CustomControlBar.tsx b/app/custom/CustomControlBar.tsx
index ddca0ca..4e93c33 100644
--- a/app/custom/CustomControlBar.tsx
+++ b/app/custom/CustomControlBar.tsx
@@ -17,16 +17,12 @@ import { ScreenShareOnSVG } from '../svg/screen-share';
 import { useCustomLayoutContext } from '../contexts/layout-context';
 import { useToast } from './toast/use-toast';
 
-interface CustomControlBarProps {
-  room: Room;
-  roomName: string;
-}
-
-export function CustomControlBar({ room, roomName }: CustomControlBarProps) {
+export function CustomControlBar() {
+  const room = useRoomContext();
   const recordingEndpoint = process.env.NEXT_PUBLIC_LK_RECORD_ENDPOINT;
   const { localParticipant } = useLocalParticipant();
   const [isRecordingRequestPending, setIsRecordingRequestPending] = useState(false);
-  const [participantCount, setParticipantCount] = useState(1);
+  const [participantCount, setParticipantCount] = useState(room.numParticipants);
   const { dispatch } = useLayoutContext().widget;
   const { isParticipantsListOpen, isChatOpen } = useCustomLayoutContext();
   const { toast } = useToast();
@@ -96,7 +92,7 @@ export function CustomControlBar({ room, roomName }: CustomControlBarProps) {
     } else {
       response = await fetch(
         recordingEndpoint +
-        `/start?roomName=${room.name}&now=${now}&identity=${localParticipant.identity}`,
+          `/start?roomName=${room.name}&now=${now}&identity=${localParticipant.identity}`,
       );
     }
     if (response.ok) {
@@ -150,7 +146,7 @@ export function CustomControlBar({ room, roomName }: CustomControlBarProps) {
   return (
     <div className="custom-control-bar">
       <div className="room-name-box">
-        <span className="room-name">{roomName}</span>
+        <span className="room-name">{room.name}</span>
         <button className="copy-link-button" onClick={handleCopyLink}>
           {' '}
           <span className="material-symbols-outlined">content_copy</span>
diff --git a/app/custom/ParticipantList.tsx b/app/custom/ParticipantList.tsx
index 85577ff..972669f 100644
--- a/app/custom/ParticipantList.tsx
+++ b/app/custom/ParticipantList.tsx
@@ -79,7 +79,15 @@ const ParticipantItem: React.FC<ParticipantItemProps> = ({ participant }) => {
       <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginRight: 'auto' }}>
         <div>
           {profilePictureUrl ? (
-            <img src={profilePictureUrl} alt={participant.name} className="avatar-image" />
+            <img
+              src={profilePictureUrl}
+              alt={participant.name}
+              className="avatar-image"
+              style={{
+                maxWidth: '2rem',
+                maxHeight: '2rem',
+              }}
+            />
           ) : (
             <div
               style={{
diff --git a/app/custom/layout/CustomVideoLayout.tsx b/app/custom/layout/CustomVideoLayout.tsx
index bc0bcd1..7ddd7a0 100644
--- a/app/custom/layout/CustomVideoLayout.tsx
+++ b/app/custom/layout/CustomVideoLayout.tsx
@@ -7,7 +7,7 @@ import {
   usePinnedTracks,
   useLayoutContext,
 } from '@livekit/components-react';
-import { Track, Room } from 'livekit-client';
+import { Track } from 'livekit-client';
 import { CustomControlBar } from '@/app/custom/CustomControlBar';
 import ParticipantList from '@/app/custom/ParticipantList';
 import { ParticipantTile } from '@/lib/ParticipantTile';
@@ -16,12 +16,7 @@ import { useCustomLayoutContext } from '@/app/contexts/layout-context';
 import '@/styles/Chat.css';
 import { FocusLayout, FocusLayoutContainer } from './FocusLayout';
 
-interface CustomVideoLayoutProps {
-  room: Room;
-  roomName: string;
-}
-
-export const CustomVideoLayout: React.FC<CustomVideoLayoutProps> = ({ room, roomName }) => {
+export const CustomVideoLayout: React.FC = () => {
   const { isChatOpen, isParticipantsListOpen } = useCustomLayoutContext();
   const layoutContext = useLayoutContext();
 
@@ -34,11 +29,6 @@ export const CustomVideoLayout: React.FC<CustomVideoLayoutProps> = ({ room, room
   );
 
   const focusTrack = usePinnedTracks()[0];
-  const test = usePinnedTracks();
-
-  useEffect(() => {
-    console.log({ test });
-  }, [test]);
 
   return (
     <div
@@ -84,7 +74,7 @@ export const CustomVideoLayout: React.FC<CustomVideoLayoutProps> = ({ room, room
               {focusTrack && <FocusLayout style={{ width: '100%' }} trackRef={focusTrack} />}{' '}
             </FocusLayoutContainer>
           )}
-          <CustomControlBar room={room} roomName={roomName} />{' '}
+          <CustomControlBar />
         </div>
       </div>
       {isParticipantsListOpen.state && <ParticipantList />}
diff --git a/app/rooms/[roomName]/PageClientImpl.tsx b/app/rooms/[roomName]/PageClientImpl.tsx
index a74e2b4..0d8e536 100644
--- a/app/rooms/[roomName]/PageClientImpl.tsx
+++ b/app/rooms/[roomName]/PageClientImpl.tsx
@@ -179,7 +179,7 @@ function VideoConferenceComponent(props: {
       onDisconnected={handleOnLeave}
     >
       <CustomVideoLayoutContextProvider>
-        <CustomVideoLayout room={room} roomName={props.connectionDetails.roomName} />
+        <CustomVideoLayout />
         <RoomAudioRenderer />
       </CustomVideoLayoutContextProvider>
     </LiveKitRoom>
diff --git a/app/svg/camera.tsx b/app/svg/camera.tsx
index cc4f4e9..6d49f4f 100644
--- a/app/svg/camera.tsx
+++ b/app/svg/camera.tsx
@@ -17,8 +17,8 @@ const CameraOffSVG = () => {
   return (
     <svg width="22" height="19" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M4.10204 2.98412C3.66551 3.38015 3.41406 3.9721 3.41406 4.72778V11.9861C3.41406 13.4583 4.29297 14.3079 5.76514 14.3079H13.6313C14.201 14.3079 14.6818 14.1806 15.0573 13.9394L4.10204 2.98412ZM15.9717 12.2615C15.9788 12.1723 15.9824 12.0805 15.9824 11.9861V4.72778C15.9824 3.26294 15.1768 2.41333 13.7046 2.41333H6.1235L15.9717 12.2615ZM16.9785 6.19263V10.5212L19.6445 12.8284C19.8936 13.0481 20.1865 13.1873 20.4502 13.1873C21.0215 13.1873 21.395 12.7698 21.395 12.1692V4.552C21.395 3.95142 21.0215 3.53394 20.4502 3.53394C20.1865 3.53394 19.8936 3.6731 19.6445 3.89282L16.9785 6.19263Z"
         fill="#ED7473"
       />
diff --git a/app/svg/screen-share.tsx b/app/svg/screen-share.tsx
index c7b126f..3b691af 100644
--- a/app/svg/screen-share.tsx
+++ b/app/svg/screen-share.tsx
@@ -20,9 +20,9 @@ const ScreenShareOnSVG = () => {
         <path
           d="M7 21H17"
           stroke="white"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         />
       </g>
     </svg>
diff --git a/lib/ParticipantTile.tsx b/lib/ParticipantTile.tsx
index 0e3cb8f..392d87e 100644
--- a/lib/ParticipantTile.tsx
+++ b/lib/ParticipantTile.tsx
@@ -128,9 +128,9 @@ export const ParticipantTile: (
             {children ?? (
               <>
                 {isTrackReference(trackReference) &&
-                  (trackReference.publication?.kind === 'video' ||
-                    trackReference.source === Track.Source.Camera ||
-                    trackReference.source === Track.Source.ScreenShare) ? (
+                (trackReference.publication?.kind === 'video' ||
+                  trackReference.source === Track.Source.Camera ||
+                  trackReference.source === Track.Source.ScreenShare) ? (
                   <VideoTrack
                     trackRef={trackReference}
                     onSubscriptionStatusChanged={handleSubscribe}