This message was deleted.

Hi @millions-state-34662, you could take the

VideoConference

component as an example. Normally it uses the

GridLayout

, but when you focus a participant track it goes into the layout you want. https://github.com/livekit/components-js/blob/332ab15a91a01627740f6b675df14a2ae5b2b008/packages/react/src/prefabs/VideoConference.tsx#L123-L130

I'm trying follow the VideoConference as a sample but it comes two of videos are smaller and looks like must to set up focusTrack as main track but i set it up as below and still not work. const tracks = useTracks( [ { source: Track.Source.Camera, withPlaceholder: true }, { source: Track.Source.ScreenShare, withPlaceholder: false }, ], { onlySubscribed: false } ) const layoutContext = useCreateLayoutContext() const focusTrack = usePinnedTracks(layoutContext)?.[0] const carouselTracks = tracks.filter( (track) => !isEqualTrackRef(track, focusTrack) ) return ( <FocusLayoutContainer> <CarouselView tracks={carouselTracks}> <ParticipantTile /> </CarouselView> {focusTrack && <FocusLayout track={focusTrack} />} </FocusLayoutContainer> )

I’m not sure I can follow. What exactly is the problem? Maybe you can share some screenshots? From looking at your code, everything looks fine. You might want to copy the VideoConference example and then work your way from a working application to the layout you want to achieve.

When i make VideoConference as a reference. Both of them are smaller and same size of blocks. But i want 1 main speaker as a bigger block size. Like the second screenshot from livekit website.