Merge pull request #20 from SujithThirumalaisamy/fix/recording

Fixed ProfileImage and ParticipantCount

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>

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={{

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 />}

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>

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"
       />

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>

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}