feat(breakout-rooms): fixed and removed unused styles for screen

jitsi · Oct 11, 2023 · a09ec19 · a09ec19
1 parent bf027e1
commit a09ec19
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 21 deletions.
diff --git a/react/features/breakout-rooms/components/native/BreakoutRooms.tsx b/react/features/breakout-rooms/components/native/BreakoutRooms.tsx
@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
 
 import { IReduxState } from '../../../app/types';
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
+import { isLocalParticipantModerator } from '../../../base/participants/functions';
 import { equals } from '../../../base/redux/functions';
 import {
     getBreakoutRooms,
@@ -25,6 +26,7 @@ const BreakoutRooms = () => {
     const inBreakoutRoom = useSelector(isInBreakoutRoom);
     const isBreakoutRoomsSupported = useSelector((state: IReduxState) =>
         state['features/base/conference'].conference?.getBreakoutRooms()?.isSupported());
+    const isLocalModerator = useSelector(isLocalParticipantModerator);
     const keyExtractor = useCallback((e: undefined, i: number) => i.toString(), []);
     const rooms = Object.values(useSelector(getBreakoutRooms, equals))
         .filter(room => room.id !== currentRoomId)
@@ -34,7 +36,8 @@ const BreakoutRooms = () => {
 
     return (
         <JitsiScreen
-            safeAreaInsets = { [ 'bottom' ] }
+            footerComponent = { isLocalModerator && showAddBreakoutRoom
+                ? AddBreakoutRoomButton : null }
             style = { styles.breakoutRoomsContainer }>
 
             { /* Fixes warning regarding nested lists */ }
@@ -52,12 +55,12 @@ const BreakoutRooms = () => {
                                 room = { room }
                                 roomId = { room.id } />))
                         }
-                        { showAddBreakoutRoom && <AddBreakoutRoomButton /> }
                     </>
                 ) }
                 data = { [] as ReadonlyArray<undefined> }
                 keyExtractor = { keyExtractor }
-                renderItem = { null } />
+                renderItem = { null }
+                windowSize = { 2 } />
         </JitsiScreen>
     );
 };

diff --git a/react/features/breakout-rooms/components/native/styles.ts b/react/features/breakout-rooms/components/native/styles.ts
@@ -1,29 +1,14 @@
 import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
-const baseButton = {
-    borderRadius: BaseTheme.shape.borderRadius,
-    height: BaseTheme.spacing[7],
-    marginTop: BaseTheme.spacing[3],
-    marginLeft: BaseTheme.spacing[3],
-    marginRight: BaseTheme.spacing[3]
-};
 
 /**
  * The styles of the native components of the feature {@code breakout rooms}.
  */
 export default {
 
     button: {
-        marginTop: BaseTheme.spacing[3],
-        marginLeft: BaseTheme.spacing[2],
-        marginRight: BaseTheme.spacing[2]
-    },
-
-    collapsibleRoom: {
-        ...baseButton,
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center'
+        marginBottom: BaseTheme.spacing[4],
+        marginHorizontal: BaseTheme.spacing[3]
     },
 
     collapsibleList: {
@@ -72,8 +57,8 @@ export default {
 
     breakoutRoomsContainer: {
         backgroundColor: BaseTheme.palette.ui01,
-        flexDirection: 'column',
         flex: 1,
+        flexDirection: 'column',
         height: 'auto',
         paddingHorizontal: BaseTheme.spacing[3]
     },