@100mslive/react-native-room-kit 0.2.0 → 1.0.1

package/src/components/RoomSettingsModalContent.tsx

@@ -15,11 +15,18 @@ import {
   ScreenShareIcon,
 } from '../Icons';
 import { BottomSheet, useBottomSheetActions } from './BottomSheet';
-import { useHMSInstance, useHMSRoomStyleSheet, useIsHLSViewer } from '../hooks-util';
+import {
+  isPublishingAllowed,
+  useHMSInstance,
+  useHMSLayoutConfig,
+  useHMSRoomStyleSheet,
+  useShowChatAndParticipants,
+} from '../hooks-util';
 import { useCanPublishScreen, useHMSActions } from '../hooks-sdk';
 import { RoomSettingsModalDebugModeContent } from './RoomSettingsModalDebugModeContent';
 import { setStartingOrStoppingRecording } from '../redux/actions';
 import { ParticipantsCount } from './ParticipantsCount';
+import { selectAllowedTracksToPublish } from '../hooks-sdk-selectors';
 
 interface RoomSettingsModalContentProps {
   newAudioMixingMode: HMSAudioMixingMode;
@@ -41,18 +48,22 @@ export const RoomSettingsModalContent: React.FC<
   const dispatch = useDispatch();
   const hmsInstance = useHMSInstance();
   const debugMode = useSelector((state: RootState) => state.user.debugMode);
-  const isHLSViewer = useIsHLSViewer();
 
   const hmsActions = useHMSActions();
 
+  const isPublisher = useSelector((state: RootState) => {
+    const localPeer = state.hmsStates.localPeer;
+    return localPeer ? isPublishingAllowed(localPeer) : false;
+  });
+
   const { registerOnModalHideAction } = useBottomSheetActions();
 
-  // #region Participants realted states and functions
+  const { canShowParticipants, show } = useShowChatAndParticipants();
+
+  // #region Participants related states and functions
   const onParticipantsPress = () => {
-    // Register callback to be called when bottom sheet is hiddden
-    registerOnModalHideAction(() => {
-      setModalVisible(ModalTypes.PARTICIPANTS);
-    });
+    // Register callback to be called when bottom sheet is hidden
+    registerOnModalHideAction(() => show('participants'));
 
     // Close the current bottom sheet
     closeRoomSettingsModal();
@@ -76,29 +87,40 @@ export const RoomSettingsModalContent: React.FC<
   const localPeerMetadata = useSelector(
     (state: RootState) => state.hmsStates.localPeer?.metadata
   );
+
   const parsedMetadata = parseMetadata(localPeerMetadata);
 
   const isBRBOn = !!parsedMetadata.isBRBOn;
-  const isHandRaised = !!parsedMetadata.isHandRaised;
+  const isHandRaised = useSelector(
+    (state: RootState) => !!state.hmsStates.localPeer?.isHandRaised
+  );
 
   const toggleRaiseHand = async () => {
-    const newMetadata = {
-      ...parsedMetadata,
-      isBRBOn: false,
-      isHandRaised: !isHandRaised,
-    };
     closeRoomSettingsModal();
-    await hmsActions.changeMetadata(newMetadata);
+    if (isBRBOn) {
+      const newMetadata = {
+        ...parsedMetadata,
+        isBRBOn: false,
+      };
+      await hmsActions.changeMetadata(newMetadata);
+    }
+    if (isHandRaised) {
+      await hmsActions.lowerLocalPeerHand();
+    } else {
+      await hmsActions.raiseLocalPeerHand();
+    }
   };
 
   const toggleBRB = async () => {
     const newMetadata = {
       ...parsedMetadata,
-      isHandRaised: false,
       isBRBOn: !isBRBOn,
     };
     closeRoomSettingsModal();
     await hmsActions.changeMetadata(newMetadata);
+    if (isHandRaised) {
+      await hmsActions.lowerLocalPeerHand();
+    }
   };
   // #endregion
 
@@ -128,7 +150,6 @@ export const RoomSettingsModalContent: React.FC<
   };
   // #endregion
 
-  // #region Change Name functions
   const changeName = () => {
     // Register callback to be called when bottom sheet is hiddden
     registerOnModalHideAction(() => {
@@ -138,7 +159,23 @@ export const RoomSettingsModalContent: React.FC<
     // Close the current bottom sheet
     closeRoomSettingsModal();
   };
-  // #endregion
+
+  const canShowBRB = useHMSLayoutConfig(
+    (layoutConfig) =>
+      !!layoutConfig?.screens?.conferencing?.default?.elements?.brb
+  );
+
+  const isOnStage = useHMSLayoutConfig((layoutConfig) => {
+    return !!layoutConfig?.screens?.conferencing?.default?.elements
+      ?.on_stage_exp;
+  });
+
+  const allowedToPublish = useSelector((state: RootState) => {
+    const allowed = selectAllowedTracksToPublish(state);
+    return (allowed && allowed.length > 0) ?? false;
+  });
+
+  const showHandRaiseIcon = !isOnStage && allowedToPublish;
 
   return (
     <View>
@@ -158,7 +195,7 @@ export const RoomSettingsModalContent: React.FC<
               label: 'Participants',
               pressHandler: onParticipantsPress,
               isActive: false,
-              hide: false,
+              hide: !canShowParticipants,
               sibling: <ParticipantsCount />,
               // parent
               // children
@@ -177,22 +214,22 @@ export const RoomSettingsModalContent: React.FC<
               label: isBRBOn ? "I'm Back" : 'Be Right Back',
               pressHandler: toggleBRB,
               isActive: isBRBOn, // Show active if `isBRBOn` is set on metadata
-              hide: false, // Hide if can't publish screen
+              hide: !canShowBRB, // Hide if can't publish screen
             },
             {
               id: 'raise-hand',
               icon: <HandIcon style={{ width: 20, height: 20 }} />,
-              label: parsedMetadata.isHandRaised ? 'Hand Raised' : 'Raise Hand',
+              label: isHandRaised ? 'Hand Raised' : 'Raise Hand',
               pressHandler: toggleRaiseHand,
               isActive: isHandRaised, // Show active if `isHandRaised` is set on metadata
-              hide: isHLSViewer, // Hide if can't publish screen
+              hide: !showHandRaiseIcon, // Hide if can't publish screen
             },
             {
               id: 'start-recording',
               icon: <RecordingIcon style={{ width: 20, height: 20 }} />,
               label: isRecordingOn ? 'Stop Recording' : 'Start Recording',
               pressHandler: handleRecordingTogglePress,
-              isActive: !!isRecordingOn,
+              isActive: isRecordingOn,
               hide: !canStartRecording, // Hide if can't publish screen
             },
             {
@@ -201,7 +238,7 @@ export const RoomSettingsModalContent: React.FC<
               label: 'Change Name',
               pressHandler: changeName,
               isActive: false,
-              hide: false,
+              hide: isPublisher,
             },
           ].filter((itm) => !itm.hide),
           true

package/src/components/RoomSettingsModalDebugModeContent.tsx

@@ -13,10 +13,6 @@ import {
 } from '@100mslive/react-native-hms';
 import { useDispatch, useSelector } from 'react-redux';
 import Toast from 'react-native-simple-toast';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-import EntypoIcons from 'react-native-vector-icons/Entypo';
 import { openSettings, requestNotifications } from 'react-native-permissions';
 
 import { COLORS } from '../utils/theme';
@@ -28,6 +24,7 @@ import {
   changeShowCustomHLSPlayerControls,
 } from '../redux/actions';
 import { ModalTypes, PipModes } from '../utils/types';
+import { useIsHLSViewer } from '../hooks-util';
 
 interface RoomSettingsModalDebugModeContentProps {
   newAudioMixingMode: HMSAudioMixingMode;
@@ -78,6 +75,7 @@ export const RoomSettingsModalDebugModeContent: React.FC<
   const showCustomHLSPlayerControls = useSelector(
     (state: RootState) => state.app.joinConfig.showCustomHLSPlayerControls
   );
+  const isHLSViewer = useIsHLSViewer();
 
   // CONSTANTS
   const isPipModeUnavailable = pipModeStatus === PipModes.NOT_AVAILABLE;
@@ -92,7 +90,7 @@ export const RoomSettingsModalDebugModeContent: React.FC<
     closeRoomSettingsModal();
 
     try {
-      const isEnabled = await hmsInstance?.enablePipMode({
+      const isEnabled = await hmsInstance?.enterPipMode({
         aspectRatio: [16, 9], // for 16:9 aspect ratio
         endButton: true,
         videoButton: true,
@@ -243,21 +241,17 @@ export const RoomSettingsModalDebugModeContent: React.FC<
 
   return (
     <ScrollView style={styles.container}>
-      {localPeerRole?.name?.includes('hls-') ? (
+      {isHLSViewer ? (
         <SettingItem
           onPress={handleHLSPlayerAspectRatio}
           text={'Change Aspect Ratio'}
-          IconType={MaterialCommunityIcons}
-          iconName={'aspect-ratio'}
         />
       ) : null}
 
-      {!localPeerRole?.name?.includes('hls-') ? (
+      {!isHLSViewer ? (
         <SettingItem
           onPress={handleLocalRemoteAudiosMute}
           text={`${muteAllTracksAudio ? 'Unmute' : 'Mute'} Room`}
-          IconType={Ionicons}
-          iconName={muteAllTracksAudio ? 'mic-off-outline' : 'mic-outline'}
         />
       ) : null}
 
@@ -265,26 +259,17 @@ export const RoomSettingsModalDebugModeContent: React.FC<
         <SettingItem
           onPress={handleHLSStreaming}
           text={`${isHLSStreaming === true ? 'Stop' : 'Start'} HLS Streaming`}
-          IconType={Ionicons}
-          iconName="radio-outline"
         />
       ) : null}
 
       {debugMode && localPeerRole?.permissions?.changeRole ? (
-        <SettingItem
-          onPress={changeBulkRole}
-          text="Bulk Role Change"
-          IconType={Ionicons}
-          iconName="people-outline"
-        />
+        <SettingItem onPress={changeBulkRole} text="Bulk Role Change" />
       ) : null}
 
       {debugMode && localPeerRole?.permissions?.mute ? (
         <SettingItem
           onPress={handleRemoteAudiosMute}
           text="Remote Mute All Audio Tracks"
-          IconType={Ionicons}
-          iconName="mic-off-outline"
         />
       ) : null}
 
@@ -294,38 +279,27 @@ export const RoomSettingsModalDebugModeContent: React.FC<
         <SettingItem
           onPress={changeTrackState}
           text="Change Track State For Role"
-          IconType={MaterialIcons}
-          iconName="track-changes"
         />
       ) : null}
 
       {localPeerRole?.publishSettings?.allowed?.includes('audio') ? (
-        <SettingItem
-          onPress={switchAudioOutput}
-          text="Switch Audio Output"
-          IconType={MaterialCommunityIcons}
-          iconName="cast-audio"
-        />
+        <SettingItem onPress={switchAudioOutput} text="Switch Audio Output" />
       ) : null}
 
       {!isPipModeUnavailable ? (
         <SettingItem
           onPress={enterPipMode}
           text="Picture in Picture (PIP) Mode"
-          IconType={MaterialCommunityIcons}
-          iconName="picture-in-picture-bottom-right"
         />
       ) : null}
 
       {debugMode ? (
         <>
-          {localPeerRole?.name?.includes('hls-') ? (
+          {isHLSViewer ? (
             <>
               <SettingItem
                 onPress={toggleShowHLSStats}
                 text={showHLSStats ? 'Hide HLS Stats' : 'Show HLS Stats'}
-                IconType={MaterialCommunityIcons}
-                iconName={'clipboard-pulse-outline'}
               />
 
               <SettingItem
@@ -335,8 +309,6 @@ export const RoomSettingsModalDebugModeContent: React.FC<
                     ? 'Disable HLS Player Controls'
                     : 'Enable HLS Player Controls'
                 }
-                IconType={Ionicons}
-                iconName={'ios-settings-outline'}
               />
 
               <SettingItem
@@ -346,18 +318,11 @@ export const RoomSettingsModalDebugModeContent: React.FC<
                     ? 'Hide Custom HLS Player Controls'
                     : 'Show Custom HLS Player Controls'
                 }
-                IconType={Ionicons}
-                iconName={'ios-settings-outline'}
               />
             </>
           ) : (
             <>
-              <SettingItem
-                onPress={showRTCStats}
-                text="Show RTC Stats"
-                IconType={MaterialCommunityIcons}
-                iconName={'clipboard-pulse-outline'}
-              />
+              <SettingItem onPress={showRTCStats} text="Show RTC Stats" />
             </>
           )}
 
@@ -369,29 +334,18 @@ export const RoomSettingsModalDebugModeContent: React.FC<
                 text={`${
                   audioDeviceListenerAdded ? 'Remove' : 'Set'
                 } Audio Output Change Listener`}
-                IconType={MaterialCommunityIcons}
-                iconName="video-input-component"
               />
 
               <SettingItem
                 onPress={handleAudioShare}
                 text={`${isAudioShared ? 'Stop' : 'Start'} Audioshare`}
-                IconType={Ionicons}
-                iconName="share-social-outline"
               />
 
-              <SettingItem
-                onPress={changeAudioMode}
-                text="Set Audio Mode"
-                IconType={MaterialCommunityIcons}
-                iconName="call-split"
-              />
+              <SettingItem onPress={changeAudioMode} text="Set Audio Mode" />
 
               <SettingItem
                 onPress={setAudioMixingMode}
                 text="Set Audio Mixing Mode"
-                IconType={EntypoIcons}
-                iconName="sound-mix"
               />
             </>
           ) : null}
@@ -404,20 +358,11 @@ export const RoomSettingsModalDebugModeContent: React.FC<
 interface SettingItemProps {
   onPress(): void;
   text: string;
-  iconName: string;
-  IconType: any;
 }
 
-const SettingItem: React.FC<SettingItemProps> = ({
-  onPress,
-  text,
-  iconName,
-  IconType,
-}) => {
+const SettingItem: React.FC<SettingItemProps> = ({ onPress, text }) => {
   return (
     <TouchableOpacity style={styles.button} onPress={onPress}>
-      <IconType name={iconName} size={24} style={styles.icon} />
-
       <Text style={styles.text}>{text}</Text>
     </TouchableOpacity>
   );
@@ -432,6 +377,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     marginVertical: 12,
+    marginHorizontal: 16,
   },
   text: {
     fontFamily: 'Inter-Medium',

package/src/components/StreamingQualityModalContent.tsx

@@ -13,12 +13,12 @@ import {
   HMSLayer,
   HMSSimulcastLayerDefinition,
 } from '@100mslive/react-native-hms';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 
 import { CustomButton } from './CustomButton';
 import type { RootState } from '../redux';
 import { COLORS } from '../utils/theme';
 import { Menu, MenuItem } from './MenuModal';
+import { ChevronIcon } from '../Icons';
 
 interface PeerSettingsModalContentProps {
   track: HMSTrack;
@@ -111,10 +111,13 @@ export const StreamingQualityModalContent: React.FC<
               <Text style={styles.participantFilterText} numberOfLines={1}>
                 {selectedLayer}
               </Text>
-              <MaterialIcons
-                name={showQualityOptions ? 'arrow-drop-up' : 'arrow-drop-down'}
-                style={styles.participantFilterIcon}
-                size={24}
+              <ChevronIcon
+                direction={'down'}
+                style={{
+                  transform: [
+                    { rotateZ: showQualityOptions ? '180deg' : '0deg' },
+                  ],
+                }}
               />
             </TouchableOpacity>
           }
@@ -201,9 +204,6 @@ const styles = StyleSheet.create({
     marginRight: 12,
     textTransform: 'capitalize',
   },
-  participantFilterIcon: {
-    color: COLORS.TEXT.HIGH_EMPHASIS,
-  },
   roleChangeModalHeading: {
     color: COLORS.TEXT.HIGH_EMPHASIS,
     fontSize: 20,

package/src/components/TilesContainer.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, Dimensions } from 'react-native';
+import { useSelector } from 'react-redux';
 import type { ViewStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { HMSView } from '@100mslive/react-native-hms';
@@ -8,6 +9,7 @@ import { Tile } from './Tile';
 import type { PeerTrackNode } from '../utils/types';
 import { useIsLandscapeOrientation } from '../utils/dimension';
 import { groupIntoPairs } from '../utils/functions';
+import type { RootState } from '../redux';
 
 interface TilesContainerProps {
   peerTrackNodes: PeerTrackNode[];
@@ -23,11 +25,15 @@ const _TilesContainer: React.FC<TilesContainerProps> = ({
   const { left, right } = useSafeAreaInsets();
   const isLandscapeOrientation = useIsLandscapeOrientation();
 
-  const stylesConfig = computeTileWidthAndHeight(
-    peerTrackNodes.length,
-    isLandscapeOrientation
+  const screenshareTilesAvailable = useSelector(
+    (state: RootState) => state.app.screensharePeerTrackNodes.length > 0
   );
 
+  const stylesConfig = computeTileWidthAndHeight(peerTrackNodes.length, {
+    isLandscapeOrientation,
+    type: screenshareTilesAvailable ? 'row' : 'default',
+  });
+
   // In this layout, Tile will take as much height and width as possible
   // Width and Height of Tile are independent of each other
   const growableTileLayout = peerTrackNodes.length <= 4;
@@ -36,7 +42,15 @@ const _TilesContainer: React.FC<TilesContainerProps> = ({
     <View
       style={[
         // If tile are growable, then we want whatever remaining space to be between them
-        { justifyContent: growableTileLayout ? 'space-between' : 'center' },
+        {
+          justifyContent:
+            screenshareTilesAvailable && peerTrackNodes.length === 1
+              ? 'center'
+              : growableTileLayout
+              ? 'space-between'
+              : 'center',
+          flexDirection: screenshareTilesAvailable ? 'row' : 'column',
+        },
         { width: Dimensions.get('window').width - left - right },
       ]}
     >
@@ -78,7 +92,7 @@ const _TilesContainer: React.FC<TilesContainerProps> = ({
                       : 'space-between',
                   flexDirection: 'row',
                   flex: growableTileLayout ? 1 : 0,
-                  marginTop: isFirstPairGroup ? 0 : 8,
+                  marginTop: isFirstPairGroup ? 0 : 4,
                 }}
               >
                 {peerTrackNodesPair.map((peerTrackNode) => {
@@ -112,11 +126,11 @@ export { TilesContainer };
 // Utility Functions
 
 const oneTileStyle = { width: '100%', height: '100%' }; // 1 Column Layout
-const twoTileStyle = { width: '100%', height: '49.4444%' }; // 1 Column Layout
-const threeTileStyle = { width: '100%', height: '32.6666%' }; // 1 Column Layout
+const twoTileStyle = { width: '100%', height: '49.7222%' }; // 1 Column Layout
+const threeTileStyle = { width: '100%', height: '33%' }; // 1 Column Layout
 
-const fourTileStyle = { width: '49%', height: '100%' }; // Grid Layout when Width and Height has no-correlatiom
-const fiveAndSixTileStyle = { width: '49%', aspectRatio: 1 }; // Grid Layout when width and Height as fixed aspectRatio
+const fourTileStyle = { width: '49.5%', height: '100%' }; // Grid Layout when Width and Height has no-correlatiom
+const fiveAndSixTileStyle = { width: '49.5%', aspectRatio: 1 }; // Grid Layout when width and Height as fixed aspectRatio
 
 const oneTileStyleLandscape = { width: '100%', height: '100%' };
 const twoTileStyleLandscape = { width: '50%', height: '100%' };
@@ -125,26 +139,42 @@ const fourTileStyleLandscape = { width: '50%', height: '50%' };
 
 function computeTileWidthAndHeight(
   totalTiles: number,
-  isLandscapeOrientation: boolean
+  config: {
+    type: 'row' | 'column' | 'default';
+    isLandscapeOrientation: boolean;
+  }
 ): {
   width?: ViewStyle['width'];
   height?: ViewStyle['height'];
   aspectRatio?: ViewStyle['aspectRatio'];
 } {
+  const { type, isLandscapeOrientation } = config || {
+    type: 'default',
+    isLandscapeOrientation: false,
+  };
+
+  if (isLandscapeOrientation) {
+    return (
+      [
+        oneTileStyleLandscape,
+        twoTileStyleLandscape,
+        threeTileStyleLandscape,
+        fourTileStyleLandscape,
+      ][Math.min(totalTiles - 1, 3)] || { width: '100%', height: '100%' }
+    );
+  }
+
+  if (type === 'row') {
+    return fiveAndSixTileStyle;
+  }
+
   return (
-    (isLandscapeOrientation
-      ? [
-          oneTileStyleLandscape,
-          twoTileStyleLandscape,
-          threeTileStyleLandscape,
-          fourTileStyleLandscape,
-        ][Math.min(totalTiles - 1, 3)]
-      : [
-          oneTileStyle,
-          twoTileStyle,
-          threeTileStyle,
-          fourTileStyle,
-          fiveAndSixTileStyle,
-        ][Math.min(totalTiles - 1, 4)]) || { width: '100%', height: '100%' }
+    [
+      oneTileStyle,
+      twoTileStyle,
+      threeTileStyle,
+      fourTileStyle,
+      fiveAndSixTileStyle,
+    ][Math.min(totalTiles - 1, 4)] || { width: '100%', height: '100%' }
   );
 }

package/src/components/WebrtcView.tsx

@@ -11,6 +11,8 @@ import PIPView from './PIPView';
 import { useIsPortraitOrientation } from '../utils/dimension';
 import { LocalPeerRegularVideoView } from './LocalPeerRegularVideoView';
 import { WelcomeInMeeting } from './WelcomeInMeeting';
+import { OverlayContainer } from './OverlayContainer';
+import { OverlayedViews } from './OverlayedViews';
 
 interface WebrtcViewProps {
   peerTrackNodes: Array<PeerTrackNode>;
@@ -30,43 +32,60 @@ export const WebrtcView = React.forwardRef<GridViewRefAttrs, WebrtcViewProps>(
       (state: RootState) => state.user.spotlightTrackId
     );
 
+    const screenshareTilesAvailable = useSelector(
+      (state: RootState) => state.app.screensharePeerTrackNodes.length > 0
+    );
+
     const pairedPeers = useMemo(
       () =>
         pairData(
           peerTrackNodes,
           isPortrait
-            ? MaxTilesInOnePage.IN_PORTRAIT
+            ? screenshareTilesAvailable
+              ? MaxTilesInOnePage.IN_PORTRAIT_WITH_SCREENSHARES
+              : MaxTilesInOnePage.IN_PORTRAIT
             : MaxTilesInOnePage.IN_LANDSCAPE,
           spotlightTrackId
         ),
-      [peerTrackNodes, spotlightTrackId, isPortrait]
+      [peerTrackNodes, screenshareTilesAvailable, spotlightTrackId, isPortrait]
     );
 
-    const canShowTiles = useSelector(
+    const showWelcomeBanner = useSelector(
       (state: RootState) =>
-        !!state.app.localPeerTrackNode || pairedPeers.length > 0
+        !state.app.localPeerTrackNode && pairedPeers.length === 0
     );
 
-    if (!canShowTiles) {
-      return <WelcomeInMeeting />;
-    }
-
     if (isPipModeActive) {
-      return <PIPView pairedPeers={pairedPeers} />;
-    }
-
-    if (pairedPeers.length > 0) {
       return (
-        <GridView
-          ref={gridViewRef}
-          onPeerTileMorePress={handlePeerTileMorePress}
-          pairedPeers={pairedPeers}
+        <PIPView
+          peerTrackNodes={peerTrackNodes}
+          customView={showWelcomeBanner ? (
+            <WelcomeInMeeting />
+          ) : pairedPeers.length <= 0 ? (
+            <LocalPeerRegularVideoView />
+          ) : null}
         />
       );
     }
 
     return (
-      <LocalPeerRegularVideoView onMoreOptionsPress={handlePeerTileMorePress} />
+      <OverlayContainer>
+        {showWelcomeBanner ? (
+          <WelcomeInMeeting />
+        ) : pairedPeers.length > 0 ? (
+          <GridView
+            ref={gridViewRef}
+            onPeerTileMorePress={handlePeerTileMorePress}
+            pairedPeers={pairedPeers}
+          />
+        ) : (
+          <LocalPeerRegularVideoView
+            onMoreOptionsPress={handlePeerTileMorePress}
+          />
+        )}
+
+        <OverlayedViews />
+      </OverlayContainer>
     );
   }
 );