agora-appbuilder-core 4.0.0-test.2 → 4.0.1

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

@@ -7,10 +7,10 @@ import {
   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 Controls, {ControlsProps} from '../../components/Controls';
 import Chat, {ChatProps} from '../../components/Chat';
 import {SidePanelType} from '../../subComponents/SidePanelEnum';
 import {
@@ -18,27 +18,37 @@ import {
   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 {controlMessageEnum, useRtc, useUserName} from 'customization-api';
-import events, {EventPersistLevel} from '../../rtm-events-api';
+import {useRoomInfo} from '../../components/room-info/useRoomInfo';
+import {
+  ToolbarCustomItem,
+  controlMessageEnum,
+  useUserName,
+} from 'customization-api';
+import events, {PersistanceLevel} from '../../rtm-events-api';
 import VideoCallMobileView from './VideoCallMobileView';
+import CaptionContainer from '../../subComponents/caption/CaptionContainer';
+import Transcript from '../../subComponents/caption/Transcript';
+import Spacer from '../../atoms/Spacer';
+import Leftbar, {LeftbarProps} from '../../components/Leftbar';
+import Rightbar, {RightbarProps} from '../../components/Rightbar';
+import useFindActiveSpeaker from '../../utils/useFindActiveSpeaker';
+import VBPanel from '../../components/virtual-background/VBPanel';
+import {useIsRecordingBot} from '../../subComponents/recording/useIsRecordingBot';
 
 const VideoCallScreen = () => {
+  useFindActiveSpeaker();
   const {sidePanel} = useSidePanel();
   const [name] = useUserName();
-  const rtc = useRtc();
   const {
     data: {meetingTitle, isHost},
-  } = useMeetingInfo();
+  } = useRoomInfo();
   const {
     ChatComponent,
     VideocallComponent,
@@ -48,16 +58,30 @@ const VideoCallScreen = () => {
     TopbarComponent,
     VideocallBeforeView,
     VideocallAfterView,
-  } = useCustomization((data) => {
+    LeftbarComponent,
+    RightbarComponent,
+    BottombarProps,
+    TopbarProps,
+    LeftbarProps,
+    RightbarProps,
+    VideocallWrapper,
+  } = useCustomization(data => {
     let components: {
+      VideocallWrapper: React.ComponentType;
       VideocallComponent?: React.ComponentType;
       ChatComponent: React.ComponentType<ChatProps>;
-      BottombarComponent: React.ComponentType;
+      BottombarComponent: React.ComponentType<ControlsProps>;
       ParticipantsComponent: React.ComponentType;
       SettingsComponent: React.ComponentType;
-      TopbarComponent: React.ComponentType;
+      TopbarComponent: React.ComponentType<NavbarProps>;
       VideocallBeforeView: React.ComponentType;
       VideocallAfterView: React.ComponentType;
+      LeftbarComponent: React.ComponentType<LeftbarProps>;
+      RightbarComponent: React.ComponentType<RightbarProps>;
+      BottombarProps?: ToolbarCustomItem[];
+      TopbarProps?: ToolbarCustomItem[];
+      LeftbarProps?: ToolbarCustomItem[];
+      RightbarProps?: ToolbarCustomItem[];
     } = {
       BottombarComponent: Controls,
       TopbarComponent: Navbar,
@@ -66,6 +90,13 @@ const VideoCallScreen = () => {
       SettingsComponent: SettingsView,
       VideocallAfterView: React.Fragment,
       VideocallBeforeView: React.Fragment,
+      VideocallWrapper: React.Fragment,
+      LeftbarComponent: Leftbar,
+      RightbarComponent: Rightbar,
+      BottombarProps: [],
+      TopbarProps: [],
+      LeftbarProps: [],
+      RightbarProps: [],
     };
     if (
       data?.components?.videoCall &&
@@ -104,19 +135,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.BottombarComponent = data?.components?.videoCall.bottomBar;
+        components.LeftbarComponent = data?.components?.videoCall.leftToolBar;
       }
 
       if (
-        data?.components?.videoCall.topBar &&
-        typeof data?.components?.videoCall.topBar !== 'object' &&
-        isValidReactComponent(data?.components?.videoCall.topBar)
+        data?.components?.videoCall.rightToolBar &&
+        typeof data?.components?.videoCall.rightToolBar !== 'object' &&
+        isValidReactComponent(data?.components?.videoCall.rightToolBar)
       ) {
-        components.TopbarComponent = data?.components?.videoCall.topBar;
+        components.RightbarComponent = data?.components?.videoCall.rightToolBar;
+      }
+
+      if (
+        data?.components?.videoCall.bottomToolBar &&
+        typeof data?.components?.videoCall.bottomToolBar === 'object' &&
+        data?.components?.videoCall.bottomToolBar.length
+      ) {
+        components.BottombarProps = data?.components?.videoCall.bottomToolBar;
+      }
+      if (
+        data?.components?.videoCall.topToolBar &&
+        typeof data?.components?.videoCall.topToolBar === 'object' &&
+        data?.components?.videoCall.topToolBar.length
+      ) {
+        components.TopbarProps = data?.components?.videoCall.topToolBar;
+      }
+      if (
+        data?.components?.videoCall.rightToolBar &&
+        typeof data?.components?.videoCall.rightToolBar === 'object' &&
+        data?.components?.videoCall.rightToolBar.length
+      ) {
+        components.RightbarProps = data?.components?.videoCall.rightToolBar;
+      }
+      if (
+        data?.components?.videoCall.leftToolBar &&
+        typeof data?.components?.videoCall.leftToolBar === 'object' &&
+        data?.components?.videoCall.leftToolBar.length
+      ) {
+        components.LeftbarProps = data?.components?.videoCall.leftToolBar;
       }
 
       if (
@@ -128,6 +205,15 @@ const VideoCallScreen = () => {
           data?.components?.videoCall.participantsPanel;
       }
 
+      //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;
+      }
+
       // commented for v1 release
       // if (
       //   data?.components?.videoCall.settingsPanel &&
@@ -143,54 +229,128 @@ const VideoCallScreen = () => {
   });
 
   const isDesktop = useIsDesktop();
+  const isSmall = useIsSmall();
+
+  const {isRecordingBot, recordingBotUIConfig} = useIsRecordingBot();
 
   return VideocallComponent ? (
     <VideocallComponent />
   ) : // ) : !isDesktop ? (
   isMobileUA() ? (
     // Mobile View
-    <VideoCallMobileView />
+    <VideoCallMobileView native={false} />
   ) : (
     // Desktop View
     <>
-      <VideocallBeforeView />
-      <View style={style.full}>
-        <ButtonTemplateProvider
-          value={{buttonTemplateName: ButtonTemplateName.topBar}}>
-          <TopbarComponent />
-        </ButtonTemplateProvider>
+      <VideocallWrapper>
+        <VideocallBeforeView />
         <View
-          style={[
-            style.videoView,
-            {paddingHorizontal: isDesktop() ? 32 : 10, paddingVertical: 10},
-          ]}>
-          <VideoComponent />
-          {sidePanel === SidePanelType.Participants ? (
-            <ParticipantsComponent />
-          ) : (
-            <></>
-          )}
-          {sidePanel === SidePanelType.Chat ? (
-            $config.CHAT ? (
-              <ChatComponent />
+          style={$config.ICON_TEXT ? style.fullRow : style.fullRowWithoutIcon}>
+          <ToolbarProvider value={{position: ToolbarPosition.left}}>
+            {LeftbarProps?.length ? (
+              <LeftbarComponent
+                customItems={LeftbarProps}
+                includeDefaultItems={false}
+              />
             ) : (
+              <LeftbarComponent />
+            )}
+          </ToolbarProvider>
+          <View style={style.full}>
+            <View
+              style={
+                isRecordingBot &&
+                !recordingBotUIConfig.topBar &&
+                style.zeroHeight
+              }>
+              <ToolbarProvider value={{position: ToolbarPosition.top}}>
+                {TopbarProps?.length ? (
+                  <TopbarComponent
+                    customItems={TopbarProps}
+                    includeDefaultItems={false}
+                  />
+                ) : (
+                  <TopbarComponent />
+                )}
+              </ToolbarProvider>
+            </View>
+            <View
+              style={[
+                style.videoView,
+                $config.ICON_TEXT
+                  ? {
+                      paddingHorizontal: isDesktop() ? 32 : 10,
+                      paddingVertical: 10,
+                      paddingBottom: 0,
+                    }
+                  : {marginVertical: 20},
+              ]}>
+              <VideoComponent />
+              {sidePanel === SidePanelType.Participants ? (
+                <ParticipantsComponent />
+              ) : (
+                <></>
+              )}
+              {sidePanel === SidePanelType.Chat ? (
+                $config.CHAT ? (
+                  <ChatComponent />
+                ) : (
+                  <></>
+                )
+              ) : (
+                <></>
+              )}
+              {sidePanel === SidePanelType.Settings ? (
+                <SettingsComponent />
+              ) : (
+                <></>
+              )}
+              {sidePanel === SidePanelType.Transcript ? <Transcript /> : <></>}
+              {sidePanel === SidePanelType.VirtualBackground ? (
+                <VBPanel />
+              ) : (
+                <></>
+              )}
+            </View>
+            {!isWebInternal() && sidePanel === SidePanelType.Chat ? (
               <></>
-            )
-          ) : (
-            <></>
-          )}
-          {sidePanel === SidePanelType.Settings ? <SettingsComponent /> : <></>}
+            ) : (
+              <ToolbarProvider value={{position: ToolbarPosition.bottom}}>
+                {BottombarProps?.length ? (
+                  <BottombarComponent
+                    customItems={BottombarProps}
+                    includeDefaultItems={false}
+                  />
+                ) : (
+                  <>
+                    <CaptionContainer />
+                    <Spacer size={10} />
+                    <View
+                      style={
+                        isRecordingBot &&
+                        !recordingBotUIConfig.bottomBar &&
+                        style.zeroHeight
+                      }>
+                      <BottombarComponent />
+                    </View>
+                  </>
+                )}
+              </ToolbarProvider>
+            )}
+          </View>
+          <ToolbarProvider value={{position: ToolbarPosition.right}}>
+            {RightbarProps?.length ? (
+              <RightbarComponent
+                customItems={RightbarProps}
+                includeDefaultItems={false}
+              />
+            ) : (
+              <RightbarComponent />
+            )}
+          </ToolbarProvider>
         </View>
-        {!isWebInternal() && sidePanel === SidePanelType.Chat ? (
-          <></>
-        ) : (
-          <ButtonTemplateProvider
-            value={{buttonTemplateName: ButtonTemplateName.bottomBar}}>
-            <BottombarComponent />
-          </ButtonTemplateProvider>
-        )}
-      </View>
-      <VideocallAfterView />
+        <VideocallAfterView />
+      </VideocallWrapper>
     </>
   );
 };
@@ -202,8 +362,24 @@ const style = StyleSheet.create({
     flexDirection: 'column',
     overflow: 'hidden',
   },
+  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,41 @@
+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';
+
+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);
+
+  if ($config.ENABLE_WHITEBOARD) {
+    return (
+      <WhiteboardConfigure>
+        {rtcProps?.recordingBot ? (
+          <VideoCallScreenWithRecordingBot />
+        ) : (
+          <VideoCallScreen />
+        )}
+      </WhiteboardConfigure>
+    );
+  } else if (rtcProps?.recordingBot) {
+    return <VideoCallScreenWithRecordingBot />;
+  }
+  return <VideoCallScreen />;
+};
+
+export default VideoCallScreenWrapper;

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

@@ -1,44 +1,96 @@
-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, useRtc} from 'customization-api';
+import {useContent} from 'customization-api';
 import {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} = useRtc();
+  const {dispatch} = useContext(DispatchContext);
   const [layout, setLayoutIndex] = useState(0);
   const layoutsData = useLayoutsData();
   const {currentLayout, setLayout} = useLayout();
-  const {activeUids, pinnedUid} = useRender();
+  const {activeUids, pinnedUid} = useContent();
+  const {rtcProps} = useContext(PropsContext);
+  const isDesktop = useIsDesktop();
+  const {audienceUids, hostUids} = useLiveStreamDataContext();
+  const [showNoUserInfo, setShowNoUserInfo] = useState(false);
 
+  useEffect(() => {
+    setTimeout(() => {
+      setShowNoUserInfo(true);
+    }, 2500);
+  }, []);
+
+  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]});
       }
-      const gridLayoutName = getGridLayoutName();
-      if (currentLayout !== gridLayoutName) {
+      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) ? (
+            <>
+              <Spacer size={8} horizontal={isDesktop() ? true : false} />
+              <MeetingInfoGridTile />
+            </>
+          ) : (
+            <></>
+          )}
+        </View>
+      );
+    }
     return <CurrentLayout renderData={activeUids} />;
   } else {
     return <></>;