()
@@ -50,6 +57,17 @@ export function GridLayout({ tracks, ...props }: GridLayoutProps) {
onRightSwipe: pagination.prevPage,
})
+ // Update store when tracks change - set first tile ID for grid layout
+ React.useEffect(() => {
+ const firstTrack = pagination.tracks[0]
+ const firstTrackId = firstTrack ? getTrackId(firstTrack) : null
+ setGridLayout(firstTrackId)
+
+ return () => {
+ resetLayout()
+ }
+ }, [pagination.tracks])
+
return (
({
+ layoutType: null,
+ firstGridTileTrackId: null,
+})
+
+export const setGridLayout = (firstTrackId: string | null) => {
+ participantLayoutStore.layoutType = 'grid'
+ participantLayoutStore.firstGridTileTrackId = firstTrackId
+}
+
+export const setCarouselLayout = () => {
+ participantLayoutStore.layoutType = 'carousel'
+ participantLayoutStore.firstGridTileTrackId = null
+}
+
+export const resetLayout = () => {
+ participantLayoutStore.layoutType = null
+ participantLayoutStore.firstGridTileTrackId = null
+}
+