From 839f52f883677ee28201d50b1e0d78fa74a9b95a Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 5 Aug 2024 12:54:37 +0530
Subject: [PATCH] Update publish-alpha (#3153)

Co-authored-by: Kaustubh Kumar <kaustubhkumar05@gmail.com>
---
 .../src/Prebuilt/components/AppData/AppData.tsx        | 10 ++++++++--
 .../src/Prebuilt/components/MoreSettings/constants.ts  |  2 ++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.tsx b/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.tsx
index 0d1d866e68..0b6e006088 100644
--- a/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useRef } from 'react';
+import { useMedia } from 'react-use';
 import {
   HMSRoomState,
   selectFullAppData,
@@ -10,6 +11,7 @@ import {
   useHMSStore,
   useRecordingStreaming,
 } from '@100mslive/react-sdk';
+import { config as cssConfig } from '../../../Theme';
 import { LayoutMode } from '../Settings/LayoutSettings';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 //@ts-ignore
@@ -26,6 +28,7 @@ import {
   UI_MODE_GRID,
   UI_SETTINGS,
 } from '../../common/constants';
+import { DEFAULT_TILES_IN_VIEW } from '../MoreSettings/constants';
 
 const initialAppData = {
   [APP_DATA.uiSettings]: {
@@ -80,6 +83,7 @@ export const AppData = React.memo(() => {
   const { isLocalVideoEnabled } = useAVToggle();
   const sidepaneOpenedRef = useRef(false);
   const [, setNoiseCancellationEnabled] = useSetNoiseCancellation();
+  const isMobile = useMedia(cssConfig.media.md);
 
   useEffect(() => {
     if (elements?.noise_cancellation?.enabled_by_default) {
@@ -117,10 +121,12 @@ export const AppData = React.memo(() => {
       ...uiSettings,
       [UI_SETTINGS.isAudioOnly]: undefined,
       [UI_SETTINGS.uiViewMode]: uiSettings.uiViewMode || UI_MODE_GRID,
-      [UI_SETTINGS.maxTileCount]: Number(elements?.video_tile_layout?.grid?.tiles_in_view) || 9,
+      [UI_SETTINGS.maxTileCount]: isMobile
+        ? DEFAULT_TILES_IN_VIEW.MWEB
+        : Number(elements?.video_tile_layout?.grid?.tiles_in_view) || DEFAULT_TILES_IN_VIEW.DESKTOP,
     };
     hmsActions.setAppData(APP_DATA.uiSettings, updatedSettings, true);
-  }, [preferences, hmsActions, elements?.video_tile_layout]);
+  }, [preferences, hmsActions, elements?.video_tile_layout, isMobile]);
 
   useEffect(() => {
     if (!preferences.subscribedNotifications) {
diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/constants.ts b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/constants.ts
index 41c17d405f..b655f264f3 100644
--- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/constants.ts
+++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/constants.ts
@@ -10,3 +10,5 @@ export const trackTypeOptions = [
   { label: 'audio', value: 'audio' },
   { label: 'video', value: 'video' },
 ];
+
+export const DEFAULT_TILES_IN_VIEW = { MWEB: 4, DESKTOP: 9 };