fix: use default tiles in view for mweb (#3152)

100mslive · Aug 5, 2024 · 22781cf · raviteja83 · Aug 5, 2024 · 22781cf
1 parent e18be94
commit 22781cf
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git 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
+        : Number(elements?.video_tile_layout?.grid?.tiles_in_view) || DEFAULT_TILES_IN_VIEW,
     };
     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
@@ -10,3 +10,4 @@ export const trackTypeOptions = [
   { label: 'audio', value: 'audio' },
   { label: 'video', value: 'video' },
 ];
+export const DEFAULT_TILES_IN_VIEW = 9;