From 89567b4e719fff29cc5a660358cd5139a2dc6708 Mon Sep 17 00:00:00 2001
From: SujithThirumalaisamy <sujithmasi1267@gmail.com>
Date: Mon, 7 Apr 2025 23:08:01 +0530
Subject: [PATCH] Moved chat icon and fixed track render

---
 app/custom/CustomControlBar.tsx         | 7 +++----
 app/custom/layout/CustomVideoLayout.tsx | 3 +--
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/app/custom/CustomControlBar.tsx b/app/custom/CustomControlBar.tsx
index 4f2f61a..1519ef2 100644
--- a/app/custom/CustomControlBar.tsx
+++ b/app/custom/CustomControlBar.tsx
@@ -162,9 +162,6 @@ export function CustomControlBar({ room, roomName }: CustomControlBarProps) {
       <div className="control-bar control-buttons">
         <TrackToggle source={Track.Source.Microphone} />
         <TrackToggle source={Track.Source.Camera} />
-        <div className={`control-btn`} onClick={toggleChat}>
-          <span className="material-symbols-outlined">chat</span>
-        </div>
         <div
           className={`control-btn ${isRecording ? '' : 'disabled'} ${isRecordingRequestPending || isRecording ? 'blinking' : ''}`}
           onClick={toggleRoomRecording}
@@ -191,7 +188,9 @@ export function CustomControlBar({ room, roomName }: CustomControlBarProps) {
           <span className="material-symbols-outlined">people</span>
           <span className="participant-count">{participantCount}</span>
         </div>
-
+        <div className={`control-btn`} onClick={toggleChat}>
+          <span className="material-symbols-outlined">chat</span>
+        </div>
         <div
           className="settings-box"
           onClick={() => {
diff --git a/app/custom/layout/CustomVideoLayout.tsx b/app/custom/layout/CustomVideoLayout.tsx
index 5ea6f16..405b58b 100644
--- a/app/custom/layout/CustomVideoLayout.tsx
+++ b/app/custom/layout/CustomVideoLayout.tsx
@@ -35,7 +35,6 @@ export const CustomVideoLayout: React.FC<CustomVideoLayoutProps> = ({ room, room
   );
 
   const focusTrack = usePinnedTracks()[0];
-  const carouselTracks = tracks.filter((track) => !isEqualTrackRef(track, focusTrack));
   const test = usePinnedTracks();
 
   useEffect(() => {
@@ -80,7 +79,7 @@ export const CustomVideoLayout: React.FC<CustomVideoLayoutProps> = ({ room, room
                 padding: '1rem 1rem 0.5rem 1rem',
               }}
             >
-              <CarouselLayout tracks={carouselTracks}>
+              <CarouselLayout tracks={tracks}>
                 <ParticipantTile />
               </CarouselLayout>
               {focusTrack && <FocusLayout style={{ width: '100%' }} trackRef={focusTrack} />}{' '}