agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/pages/video-call/VideoCallScreen.tsx

@@ -1,57 +1,132 @@
-import React, {useContext, useEffect} from 'react';
-import {View, StyleSheet} from 'react-native';
+import React, {useContext, useEffect, useState} from 'react';
+import {
+  View,
+  StyleSheet,
+  useWindowDimensions,
+  Text,
+  Platform,
+} from 'react-native';
 import {useCustomization} from 'customization-implementation';
-import Navbar from '../../components/Navbar';
+import Navbar, {NavbarProps} from '../../components/Navbar';
 import ParticipantsView from '../../components/ParticipantsView';
 import SettingsView from '../../components/SettingsView';
-import Controls from '../../components/Controls';
-import Chat from '../../components/Chat';
+import Controls, {ControlsProps} from '../../components/Controls';
+import Chat, {ChatProps} from '../../components/Chat';
 import {SidePanelType} from '../../subComponents/SidePanelEnum';
-import {isValidReactComponent, isWebInternal} from '../../utils/common';
+import {
+  isMobileUA,
+  isValidReactComponent,
+  isWebInternal,
+  useIsDesktop,
+  useIsSmall,
+} from '../../utils/common';
 import {useSidePanel} from '../../utils/useSidePanel';
 import VideoComponent from './VideoComponent';
 import {videoView} from '../../../theme.json';
-import {
-  ButtonTemplateProvider,
-  ButtonTemplateName,
-} from '../../utils/useButtonTemplate';
+import {ToolbarProvider, ToolbarPosition} from '../../utils/useToolbar';
 import SDKEvents from '../../utils/SdkEvents';
-import {useMeetingInfo} from '../../components/meeting-info/useMeetingInfo';
-import {useRtc} from 'customization-api';
+import {useRoomInfo} from '../../components/room-info/useRoomInfo';
+import {
+  controlMessageEnum,
+  SidePanelItem,
+  useCaption,
+  useUserName,
+} from 'customization-api';
+import events, {PersistanceLevel} from '../../rtm-events-api';
+import VideoCallMobileView from './VideoCallMobileView';
+import CaptionContainer from '../../subComponents/caption/CaptionContainer';
+import Transcript, {
+  TranscriptProps,
+} from '../../subComponents/caption/Transcript';
+
+import Spacer from '../../atoms/Spacer';
+import Leftbar, {
+  LeftbarProps as LeftbarPropsInterface,
+} from '../../components/Leftbar';
+import Rightbar, {
+  RightbarProps as RightbarInterface,
+} from '../../components/Rightbar';
+import useFindActiveSpeaker from '../../utils/useFindActiveSpeaker';
+import VBPanel, {
+  VBPanelProps,
+} from '../../components/virtual-background/VBPanel';
+import {LogSource, logger} from '../../logger/AppBuilderLogger';
+import {useIsRecordingBot} from '../../subComponents/recording/useIsRecordingBot';
+import {ToolbarPresetProps} from '../../atoms/ToolbarPreset';
+import CustomSidePanelView from '../../components/CustomSidePanel';
 
 const VideoCallScreen = () => {
+  useFindActiveSpeaker();
   const {sidePanel} = useSidePanel();
-  const rtc = useRtc();
+  const [showCustomSidePanel, setShowCustomSidePanel] = useState(false);
+  const [customSidePanelIndex, setCustomSidePanelIndex] = useState<
+    undefined | number
+  >(undefined);
+  const [name] = useUserName();
   const {
     data: {meetingTitle, isHost},
-  } = useMeetingInfo();
+  } = useRoomInfo();
+  const {isCaptionON} = useCaption();
   const {
     ChatComponent,
     VideocallComponent,
     BottombarComponent,
     ParticipantsComponent,
+    TranscriptComponent,
+    CaptionComponent,
+    VirtualBackgroundComponent,
     SettingsComponent,
     TopbarComponent,
     VideocallBeforeView,
     VideocallAfterView,
-  } = useCustomization((data) => {
+    LeftbarComponent,
+    RightbarComponent,
+    BottombarProps,
+    TopbarProps,
+    LeftbarProps,
+    RightbarProps,
+    VideocallWrapper,
+    SidePanelArray,
+  } = useCustomization(data => {
     let components: {
+      VideocallWrapper: React.ComponentType;
       VideocallComponent?: React.ComponentType;
-      ChatComponent: React.ComponentType;
-      BottombarComponent: React.ComponentType;
+      ChatComponent: React.ComponentType<ChatProps>;
+      BottombarComponent: React.ComponentType<ControlsProps>;
       ParticipantsComponent: React.ComponentType;
+      TranscriptComponent: React.ComponentType<TranscriptProps>;
+      CaptionComponent: React.ComponentType;
+      VirtualBackgroundComponent: React.ComponentType<VBPanelProps>;
       SettingsComponent: React.ComponentType;
-      TopbarComponent: React.ComponentType;
+      TopbarComponent: React.ComponentType<NavbarProps>;
       VideocallBeforeView: React.ComponentType;
       VideocallAfterView: React.ComponentType;
+      LeftbarComponent: React.ComponentType<LeftbarPropsInterface>;
+      RightbarComponent: React.ComponentType<RightbarInterface>;
+      BottombarProps?: ToolbarPresetProps['items'];
+      TopbarProps?: ToolbarPresetProps['items'];
+      LeftbarProps?: ToolbarPresetProps['items'];
+      RightbarProps?: ToolbarPresetProps['items'];
+      SidePanelArray?: SidePanelItem[];
     } = {
       BottombarComponent: Controls,
       TopbarComponent: Navbar,
       ChatComponent: Chat,
       ParticipantsComponent: ParticipantsView,
+      TranscriptComponent: Transcript,
+      CaptionComponent: CaptionContainer,
+      VirtualBackgroundComponent: VBPanel,
       SettingsComponent: SettingsView,
       VideocallAfterView: React.Fragment,
       VideocallBeforeView: React.Fragment,
+      VideocallWrapper: React.Fragment,
+      LeftbarComponent: Leftbar,
+      RightbarComponent: Rightbar,
+      BottombarProps: {},
+      TopbarProps: {},
+      LeftbarProps: {},
+      RightbarProps: {},
+      SidePanelArray: [],
     };
     if (
       data?.components?.videoCall &&
@@ -90,19 +165,65 @@ const VideoCallScreen = () => {
       // }
 
       if (
-        data?.components?.videoCall.bottomBar &&
-        typeof data?.components?.videoCall.bottomBar !== 'object' &&
-        isValidReactComponent(data?.components?.videoCall.bottomBar)
+        data?.components?.videoCall.bottomToolBar &&
+        typeof data?.components?.videoCall.bottomToolBar !== 'object' &&
+        isValidReactComponent(data?.components?.videoCall.bottomToolBar)
+      ) {
+        components.BottombarComponent =
+          data?.components?.videoCall.bottomToolBar;
+      }
+
+      if (
+        data?.components?.videoCall.topToolBar &&
+        typeof data?.components?.videoCall.topToolBar !== 'object' &&
+        isValidReactComponent(data?.components?.videoCall.topToolBar)
+      ) {
+        components.TopbarComponent = data?.components?.videoCall.topToolBar;
+      }
+
+      if (
+        data?.components?.videoCall.leftToolBar &&
+        typeof data?.components?.videoCall.leftToolBar !== 'object' &&
+        isValidReactComponent(data?.components?.videoCall.leftToolBar)
+      ) {
+        components.LeftbarComponent = data?.components?.videoCall.leftToolBar;
+      }
+
+      if (
+        data?.components?.videoCall.rightToolBar &&
+        typeof data?.components?.videoCall.rightToolBar !== 'object' &&
+        isValidReactComponent(data?.components?.videoCall.rightToolBar)
       ) {
-        components.BottombarComponent = data?.components?.videoCall.bottomBar;
+        components.RightbarComponent = data?.components?.videoCall.rightToolBar;
       }
 
       if (
-        data?.components?.videoCall.topBar &&
-        typeof data?.components?.videoCall.topBar !== 'object' &&
-        isValidReactComponent(data?.components?.videoCall.topBar)
+        data?.components?.videoCall.bottomToolBar &&
+        typeof data?.components?.videoCall.bottomToolBar === 'object' &&
+        Object.keys(data?.components?.videoCall.bottomToolBar)?.length
+      ) {
+        components.BottombarProps = data?.components?.videoCall.bottomToolBar;
+      }
+      if (
+        data?.components?.videoCall.topToolBar &&
+        typeof data?.components?.videoCall.topToolBar === 'object' &&
+        Object.keys(data?.components?.videoCall.topToolBar)?.length
+      ) {
+        components.TopbarProps = data?.components?.videoCall.topToolBar;
+      }
+      if (
+        data?.components?.videoCall.rightToolBar &&
+        typeof data?.components?.videoCall.rightToolBar === 'object' &&
+        Object.keys(data?.components?.videoCall.rightToolBar)?.length
+      ) {
+        components.RightbarProps = data?.components?.videoCall.rightToolBar;
+      }
+      if (
+        data?.components?.videoCall.leftToolBar &&
+        typeof data?.components?.videoCall.leftToolBar === 'object' &&
+        Object.keys(data?.components?.videoCall.leftToolBar)?.length
       ) {
-        components.TopbarComponent = data?.components?.videoCall.topBar;
+        components.LeftbarProps = data?.components?.videoCall.leftToolBar;
       }
 
       if (
@@ -114,6 +235,52 @@ const VideoCallScreen = () => {
           data?.components?.videoCall.participantsPanel;
       }
 
+      if (
+        data?.components?.videoCall.transcriptPanel &&
+        typeof data?.components?.videoCall.transcriptPanel !== 'object' &&
+        isValidReactComponent(data?.components?.videoCall.transcriptPanel)
+      ) {
+        components.TranscriptComponent =
+          data?.components?.videoCall.transcriptPanel;
+      }
+
+      if (
+        data?.components?.videoCall.captionPanel &&
+        typeof data?.components?.videoCall.captionPanel !== 'object' &&
+        isValidReactComponent(data?.components?.videoCall.captionPanel)
+      ) {
+        components.CaptionComponent = data?.components?.videoCall.captionPanel;
+      }
+
+      if (
+        data?.components?.videoCall.virtualBackgroundPanel &&
+        typeof data?.components?.videoCall.virtualBackgroundPanel !==
+          'object' &&
+        isValidReactComponent(
+          data?.components?.videoCall.virtualBackgroundPanel,
+        )
+      ) {
+        components.VirtualBackgroundComponent =
+          data?.components?.videoCall.virtualBackgroundPanel;
+      }
+
+      //todo hari - need to remove wrapper
+      if (
+        data?.components?.videoCall.wrapper &&
+        typeof data?.components?.videoCall.wrapper !== 'object' &&
+        isValidReactComponent(data?.components?.videoCall.wrapper)
+      ) {
+        components.VideocallWrapper = data?.components?.videoCall.wrapper;
+      }
+
+      if (
+        data?.components?.videoCall.customSidePanel &&
+        typeof data?.components?.videoCall.customSidePanel === 'function'
+      ) {
+        components.SidePanelArray =
+          data?.components?.videoCall?.customSidePanel();
+      }
+
       // commented for v1 release
       // if (
       //   data?.components?.videoCall.settingsPanel &&
@@ -128,62 +295,182 @@ const VideoCallScreen = () => {
     return components;
   });
 
+  const isDesktop = useIsDesktop();
+
   useEffect(() => {
-    /**
-     * OLD: Commenting this code as getDevices API is web only
-     * The below code fails on native app
-     * RESPONSE: Added isWebInternal check to restrict execution only on web.
-     */
-    if (isWebInternal()) {
-      new Promise((res) =>
-        rtc.RtcEngine.getDevices(function (devices: MediaDeviceInfo[]) {
-          res(devices);
-        }),
-      ).then((devices: MediaDeviceInfo[]) => {
-        SDKEvents.emit('join', meetingTitle, devices, isHost);
-        console.log('SDKEvents: Event Called join');
-      });
-    }
+    logger.log(
+      LogSource.Internals,
+      'VIDEO_CALL_ROOM',
+      'User has landed on video call room',
+    );
   }, []);
 
+  useEffect(() => {
+    const selectedIndex = SidePanelArray?.findIndex(item => {
+      if (item?.name === sidePanel && item?.component) {
+        return true;
+      } else {
+        return false;
+      }
+    });
+    if (selectedIndex < 0) {
+      setShowCustomSidePanel(false);
+      setCustomSidePanelIndex(undefined);
+    } else {
+      setShowCustomSidePanel(true);
+      setCustomSidePanelIndex(selectedIndex);
+    }
+  }, [sidePanel, SidePanelArray]);
+
+  const {isRecordingBot, recordingBotUIConfig} = useIsRecordingBot();
+
   return VideocallComponent ? (
     <VideocallComponent />
+  ) : // ) : !isDesktop ? (
+  isMobileUA() ? (
+    // Mobile View
+    <VideoCallMobileView native={false} />
   ) : (
+    // Desktop View
     <>
-      <VideocallBeforeView />
-      <View style={style.full}>
-        <ButtonTemplateProvider
-          value={{buttonTemplateName: ButtonTemplateName.topBar}}>
-          <TopbarComponent />
-        </ButtonTemplateProvider>
-        <View style={[style.videoView, {backgroundColor: '#ffffff00'}]}>
-          <VideoComponent />
-          {sidePanel === SidePanelType.Participants ? (
-            <ParticipantsComponent />
-          ) : (
-            <></>
-          )}
-          {sidePanel === SidePanelType.Chat ? (
-            $config.CHAT ? (
-              <ChatComponent />
+      <VideocallWrapper>
+        <VideocallBeforeView />
+        <View
+          style={$config.ICON_TEXT ? style.fullRow : style.fullRowWithoutIcon}>
+          <ToolbarProvider value={{position: ToolbarPosition.left}}>
+            {Object.keys(LeftbarProps)?.length ? (
+              <LeftbarComponent
+                items={LeftbarProps}
+                includeDefaultItems={false}
+              />
             ) : (
+              <LeftbarComponent />
+            )}
+          </ToolbarProvider>
+          <View style={style.full}>
+            <View
+              style={
+                isRecordingBot &&
+                !recordingBotUIConfig.topBar &&
+                style.zeroHeight
+              }>
+              <ToolbarProvider value={{position: ToolbarPosition.top}}>
+                {Object.keys(TopbarProps)?.length ? (
+                  <TopbarComponent
+                    items={TopbarProps}
+                    includeDefaultItems={false}
+                  />
+                ) : (
+                  <TopbarComponent />
+                )}
+              </ToolbarProvider>
+            </View>
+            <View
+              style={[
+                style.videoView,
+                $config.ICON_TEXT
+                  ? {
+                      paddingHorizontal: isDesktop() ? 32 : 10,
+                      paddingVertical: 10,
+                      paddingBottom: 0,
+                    }
+                  : {marginVertical: 20},
+              ]}>
+              <VideoComponent />
+              {/**
+               * To display custom side panel
+               * it will be shown when customer inject the custom side panel content
+               * and call setSidePanel using the name they given
+               */}
+              {showCustomSidePanel && customSidePanelIndex !== undefined ? (
+                SidePanelArray &&
+                SidePanelArray?.length &&
+                SidePanelArray[customSidePanelIndex]?.component ? (
+                  <CustomSidePanelView
+                    content={SidePanelArray[customSidePanelIndex]?.component}
+                    title={SidePanelArray[customSidePanelIndex]?.title}
+                    name={SidePanelArray[customSidePanelIndex]?.name}
+                    onClose={SidePanelArray[customSidePanelIndex]?.onClose}
+                  />
+                ) : (
+                  <></>
+                )
+              ) : (
+                <></>
+              )}
+              {sidePanel === SidePanelType.Participants ? (
+                <ParticipantsComponent />
+              ) : (
+                <></>
+              )}
+              {sidePanel === SidePanelType.Chat ? (
+                $config.CHAT ? (
+                  <ChatComponent />
+                ) : (
+                  <></>
+                )
+              ) : (
+                <></>
+              )}
+              {sidePanel === SidePanelType.Settings ? (
+                <SettingsComponent />
+              ) : (
+                <></>
+              )}
+              {sidePanel === SidePanelType.Transcript ? (
+                $config.ENABLE_MEETING_TRANSCRIPT ? (
+                  <TranscriptComponent />
+                ) : (
+                  <></>
+                )
+              ) : (
+                <></>
+              )}
+              {sidePanel === SidePanelType.VirtualBackground ? (
+                <VirtualBackgroundComponent />
+              ) : (
+                <></>
+              )}
+            </View>
+            {!isWebInternal() && sidePanel === SidePanelType.Chat ? (
               <></>
-            )
-          ) : (
-            <></>
-          )}
-          {sidePanel === SidePanelType.Settings ? <SettingsComponent /> : <></>}
+            ) : (
+              <ToolbarProvider value={{position: ToolbarPosition.bottom}}>
+                {Object.keys(BottombarProps)?.length ? (
+                  <BottombarComponent
+                    items={BottombarProps}
+                    includeDefaultItems={false}
+                  />
+                ) : (
+                  <>
+                    {isCaptionON ? <CaptionComponent /> : <></>}
+                    <Spacer size={10} />
+                    <View
+                      style={
+                        isRecordingBot &&
+                        !recordingBotUIConfig.bottomBar &&
+                        style.zeroHeight
+                      }>
+                      <BottombarComponent />
+                    </View>
+                  </>
+                )}
+              </ToolbarProvider>
+            )}
+          </View>
+          <ToolbarProvider value={{position: ToolbarPosition.right}}>
+            {Object.keys(RightbarProps)?.length ? (
+              <RightbarComponent
+                items={RightbarProps}
+                includeDefaultItems={false}
+              />
+            ) : (
+              <RightbarComponent />
+            )}
+          </ToolbarProvider>
         </View>
-        {!isWebInternal() && sidePanel === SidePanelType.Chat ? (
-          <></>
-        ) : (
-          <ButtonTemplateProvider
-            value={{buttonTemplateName: ButtonTemplateName.bottomBar}}>
-            <BottombarComponent />
-          </ButtonTemplateProvider>
-        )}
-      </View>
-      <VideocallAfterView />
+        <VideocallAfterView />
+      </VideocallWrapper>
     </>
   );
 };
@@ -195,6 +482,24 @@ const style = StyleSheet.create({
     flexDirection: 'column',
     overflow: 'hidden',
   },
-  //@ts-ignore
-  videoView: videoView,
+  fullRow: {
+    flex: 1,
+    flexDirection: 'row',
+    overflow: 'hidden',
+  },
+  fullRowWithoutIcon: {
+    flex: 1,
+    flexDirection: 'row',
+    overflow: 'hidden',
+    paddingHorizontal: 32,
+    paddingVertical: 20,
+  },
+  videoView: {
+    flex: 12,
+    flexDirection: 'row',
+  },
+  zeroHeight: {
+    height: 0,
+    visibility: 'hidden',
+  },
 });

package/template/src/pages/video-call/VideoCallScreenWrapper.tsx

@@ -0,0 +1,51 @@
+import React, {useContext, useEffect} from 'react';
+import {PropsContext} from '../../../agora-rn-uikit';
+import VideoCallScreen from '../video-call/VideoCallScreen';
+import {isWebInternal} from '../../utils/common';
+import {useLocation} from '../../components/Router';
+import {getParamFromURL} from '../../utils/common';
+import {useUserPreference} from '../../components/useUserPreference';
+import WhiteboardConfigure from '../../components/whiteboard/WhiteboardConfigure';
+import ChatConfigure from '../../components/chat/chatConfigure';
+
+const VideoCallScreenWithRecordingBot: React.FC = () => {
+  const location = useLocation();
+  const {setDisplayName} = useUserPreference();
+
+  const recordingBotName = getParamFromURL(location?.search, 'user_name');
+
+  useEffect(() => {
+    setDisplayName(recordingBotName);
+  }, []);
+  return <VideoCallScreen />;
+};
+
+const VideoCallScreenWrapper: React.FC = () => {
+  const {rtcProps} = useContext(PropsContext);
+  let configComponent: React.ReactNode;
+
+  const videoComponent = rtcProps?.recordingBot ? (
+    <VideoCallScreenWithRecordingBot />
+  ) : (
+    <VideoCallScreen />
+  );
+
+  if ($config.CHAT && $config.ENABLE_WHITEBOARD) {
+    configComponent = (
+      <ChatConfigure>
+        <WhiteboardConfigure>{videoComponent}</WhiteboardConfigure>
+      </ChatConfigure>
+    );
+  } else if ($config.CHAT) {
+    configComponent = <ChatConfigure>{videoComponent}</ChatConfigure>;
+  } else if ($config.ENABLE_WHITEBOARD) {
+    configComponent = (
+      <WhiteboardConfigure>{videoComponent}</WhiteboardConfigure>
+    );
+  } else {
+    configComponent = videoComponent;
+  }
+  return <>{configComponent}</>;
+};
+
+export default VideoCallScreenWrapper;

package/template/src/pages/video-call/VideoComponent.tsx

@@ -1,29 +1,104 @@
-import React, {useEffect, useState} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
+import {View} from 'react-native';
 import useLayoutsData from './useLayoutsData';
-import {isArray, isValidReactComponent} from '../../utils/common';
+import {isArray, useIsDesktop, isValidReactComponent} from '../../utils/common';
+import {PropsContext, ClientRoleType} from '../../../agora-rn-uikit';
 import {useLayout} from '../../utils/useLayout';
-import {useRender} from 'customization-api';
+import {useContent, useRoomInfo} from 'customization-api';
+import {DefaultLayouts, getGridLayoutName} from './DefaultLayouts';
+import {DispatchContext} from '../../../agora-rn-uikit';
+import MeetingInfoGridTile from '../../components/meeting-info-invite/MeetingInfoGridTile';
+import Spacer from '../../atoms/Spacer';
+import {useLiveStreamDataContext} from '../../components/contexts/LiveStreamDataContext';
 
 const VideoComponent = () => {
+  const {dispatch} = useContext(DispatchContext);
   const [layout, setLayoutIndex] = useState(0);
   const layoutsData = useLayoutsData();
-  const {currentLayout} = useLayout();
-  const {activeUids} = useRender();
+  const {currentLayout, setLayout} = useLayout();
+  const {activeUids, pinnedUid} = useContent();
+  const {rtcProps} = useContext(PropsContext);
+  const isDesktop = useIsDesktop();
+  const {audienceUids, hostUids} = useLiveStreamDataContext();
+  const [showNoUserInfo, setShowNoUserInfo] = useState(false);
+
+  const {roomPreference} = useRoomInfo();
+
+  const disableShareTile = roomPreference?.disableShareTile;
+
+  useEffect(() => {
+    if (!disableShareTile) {
+      setTimeout(() => {
+        setShowNoUserInfo(true);
+      }, 2500);
+    }
+  }, [disableShareTile]);
+
+  const currentLayoutRef = useRef(currentLayout);
+  const gridLayoutName = getGridLayoutName();
+  useEffect(() => {
+    if (activeUids && activeUids.length === 1) {
+      if (pinnedUid) {
+        dispatch({type: 'UserPin', value: [0]});
+        dispatch({type: 'UserSecondaryPin', value: [0]});
+      }
+      if (currentLayoutRef.current != gridLayoutName) {
+        setLayout(gridLayoutName);
+      }
+    }
+  }, [activeUids]);
+
   useEffect(() => {
+    currentLayoutRef.current = currentLayout;
     if (isArray(layoutsData)) {
-      let index = layoutsData.findIndex((item) => item.name === currentLayout);
+      let index = layoutsData.findIndex(item => item.name === currentLayout);
       if (index >= 0) {
         setLayoutIndex(index);
       }
     }
   }, [currentLayout]);
 
+  const showInviteTile = () => {
+    if (
+      $config.EVENT_MODE &&
+      rtcProps.role == ClientRoleType.ClientRoleAudience
+    ) {
+      return false;
+    }
+    if (activeUids.length == 1) return true;
+    return false;
+  };
+
   if (
     layoutsData &&
     layoutsData[layout] &&
     isValidReactComponent(layoutsData[layout].component)
   ) {
     const CurrentLayout = layoutsData[layout].component;
+    if (showInviteTile() && showNoUserInfo) {
+      return (
+        <View
+          style={{
+            flex: 1,
+            flexDirection: isDesktop() ? 'row' : 'column',
+            justifyContent: 'space-between',
+          }}>
+          <CurrentLayout renderData={activeUids} />
+          {((!$config.EVENT_MODE && activeUids.length === 1) ||
+            ($config.EVENT_MODE &&
+              hostUids.concat(audienceUids)?.length === 1)) &&
+          (layoutsData[layout].name === DefaultLayouts[0].name ||
+            layoutsData[layout].name === DefaultLayouts[1].name) ? (
+            <>
+              <Spacer size={8} horizontal={isDesktop() ? true : false} />
+              <MeetingInfoGridTile />
+            </>
+          ) : (
+            <></>
+          )}
+        </View>
+      );
+    }
     return <CurrentLayout renderData={activeUids} />;
   } else {
     return <></>;