agora-appbuilder-core 4.0.0-api.1 → 4.0.0-api.3

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 {
@@ -25,9 +25,15 @@ import {videoView} from '../../../theme.json';
 import {ToolbarProvider, ToolbarPosition} from '../../utils/useToolbar';
 import SDKEvents from '../../utils/SdkEvents';
 import {useRoomInfo} from '../../components/room-info/useRoomInfo';
-import {controlMessageEnum, useUserName} from 'customization-api';
+import {
+  ToolbarCustomItem,
+  controlMessageEnum,
+  useUserName,
+} from 'customization-api';
 import events, {PersistanceLevel} from '../../rtm-events-api';
 import VideoCallMobileView from './VideoCallMobileView';
+import Leftbar, {LeftbarProps} from '../../components/Leftbar';
+import Rightbar, {RightbarProps} from '../../components/Rightbar';
 
 const VideoCallScreen = () => {
   const {sidePanel} = useSidePanel();
@@ -46,18 +52,26 @@ const VideoCallScreen = () => {
     VideocallAfterView,
     LeftbarComponent,
     RightbarComponent,
+    BottombarProps,
+    TopbarProps,
+    LeftbarProps,
+    RightbarProps,
   } = useCustomization((data) => {
     let components: {
       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;
-      RightbarComponent: React.ComponentType;
+      LeftbarComponent: React.ComponentType<LeftbarProps>;
+      RightbarComponent: React.ComponentType<RightbarProps>;
+      BottombarProps?: ToolbarCustomItem[];
+      TopbarProps?: ToolbarCustomItem[];
+      LeftbarProps?: ToolbarCustomItem[];
+      RightbarProps?: ToolbarCustomItem[];
     } = {
       BottombarComponent: Controls,
       TopbarComponent: Navbar,
@@ -66,8 +80,12 @@ const VideoCallScreen = () => {
       SettingsComponent: SettingsView,
       VideocallAfterView: React.Fragment,
       VideocallBeforeView: React.Fragment,
-      LeftbarComponent: React.Fragment,
-      RightbarComponent: React.Fragment,
+      LeftbarComponent: Leftbar,
+      RightbarComponent: Rightbar,
+      BottombarProps: [],
+      TopbarProps: [],
+      LeftbarProps: [],
+      RightbarProps: [],
     };
     if (
       data?.components?.videoCall &&
@@ -138,6 +156,35 @@ const VideoCallScreen = () => {
         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 (
         data?.components?.videoCall.participantsPanel &&
         typeof data?.components?.videoCall.participantsPanel !== 'object' &&
@@ -175,11 +222,11 @@ const VideoCallScreen = () => {
       <VideocallBeforeView />
       <View style={style.fullRow}>
         <ToolbarProvider value={{position: ToolbarPosition.left}}>
-          <LeftbarComponent />
+          <LeftbarComponent customItems={LeftbarProps} />
         </ToolbarProvider>
         <View style={style.full}>
           <ToolbarProvider value={{position: ToolbarPosition.top}}>
-            <TopbarComponent />
+            <TopbarComponent customItems={TopbarProps} />
           </ToolbarProvider>
           <View
             style={[
@@ -211,12 +258,12 @@ const VideoCallScreen = () => {
             <></>
           ) : (
             <ToolbarProvider value={{position: ToolbarPosition.bottom}}>
-              <BottombarComponent />
+              <BottombarComponent customItems={BottombarProps} />
             </ToolbarProvider>
           )}
         </View>
         <ToolbarProvider value={{position: ToolbarPosition.right}}>
-          <RightbarComponent />
+          <RightbarComponent customItems={RightbarProps} />
         </ToolbarProvider>
       </View>
       <VideocallAfterView />

package/template/src/pages/video-call/index.ts

@@ -1,40 +1,44 @@
 import ParticipantsView from '../../components/ParticipantsView';
 import Chat from '../../components/Chat';
 import Navbar, {
-  ParticipantsCountView,
-  ParticipantsIconButton,
-  ChatIconButton,
-  SettingsIconButton,
+  MeetingTitleToolbarItem,
+  ParticipantCountToolbarItem,
+  RecordingStatusToolbarItem,
+  ChatToolbarItem,
+  ParticipantToolbarItem,
+  SettingsToobarItem,
 } from '../../components/Navbar';
-import CopyJoinInfo from '../../subComponents/CopyJoinInfo';
-import LayoutIconButton from '../../subComponents/LayoutIconButton';
-import SettingsView from '../../components/SettingsView';
-import Controls from '../../components/Controls';
-import LiveStreamControls from '../../components/livestream/views/LiveStreamControls';
-import LocalEndcall from '../../subComponents/LocalEndCall';
-import LocalAudioMute from '../../subComponents/LocalAudioMute';
-import LocalVideoMute from '../../subComponents/LocalVideoMute';
-import Recording from '../../subComponents/Recording';
-import LocalSwitchCamera from '../../subComponents/LocalSwitchCamera';
-import ScreenshareButton from '../../subComponents/screenshare/ScreenshareButton';
-
+import Controls, {
+  LayoutToolbarItem,
+  InviteToolbarItem,
+  RaiseHandToolbarItem,
+  LocalAudioToolbarItem,
+  LocalVideoToolbarItem,
+  SwitchCameraToolbarItem,
+  ScreenShareToolbarItem,
+  RecordingToolbarItem,
+  LocalEndcallToolbarItem,
+} from '../../components/Controls';
 import ChatBubble from '../../subComponents/ChatBubble';
 import {ChatInput} from '../../subComponents/ChatInput';
+import SettingsView from '../../components/SettingsView';
 
 const ToolbarComponents = {
-  CopyJoinInfo,
-  ParticipantsCountView,
-  ParticipantsIconButton,
-  ChatIconButton,
-  LayoutIconButton,
-  SettingsIconButton,
-  LocalAudioMute,
-  LocalVideoMute,
-  LocalSwitchCamera,
-  ScreenshareButton,
-  Recording,
-  LocalEndcall,
-  LiveStreamControls,
+  MeetingTitleToolbarItem,
+  ParticipantCountToolbarItem,
+  RecordingStatusToolbarItem,
+  ChatToolbarItem,
+  ParticipantToolbarItem,
+  SettingsToobarItem,
+  LayoutToolbarItem,
+  InviteToolbarItem,
+  RaiseHandToolbarItem,
+  LocalAudioToolbarItem,
+  LocalVideoToolbarItem,
+  SwitchCameraToolbarItem,
+  ScreenShareToolbarItem,
+  RecordingToolbarItem,
+  LocalEndcallToolbarItem,
 };
 export {
   ParticipantsView,

package/template/src/subComponents/CopyJoinInfo.tsx

@@ -15,6 +15,8 @@ import useGetMeetingPhrase from '../utils/useGetMeetingPhrase';
 import TertiaryButton from '../atoms/TertiaryButton';
 import IconButton, {IconButtonProps} from '../atoms/IconButton';
 import {useVideoCall} from '../components/useVideoCall';
+import {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
 
 export interface CopyJoinInfoProps {
   showLabel?: boolean;
@@ -24,6 +26,7 @@ export interface CopyJoinInfoProps {
 }
 
 const CopyJoinInfo = (props: CopyJoinInfoProps) => {
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {
     showLabel = $config.ICON_TEXT || false,
     showTeritaryButton = false,
@@ -57,6 +60,8 @@ const CopyJoinInfo = (props: CopyJoinInfoProps) => {
     <>
       {showTeritaryButton ? (
         <TertiaryButton text="Invite" onPress={onPress} />
+      ) : isToolbarMenuItem ? (
+        <ToolbarMenuItem {...iconButtonProps} />
       ) : (
         <IconButton {...iconButtonProps} />
       )}

package/template/src/subComponents/LocalAudioMute.tsx

@@ -26,6 +26,9 @@ import IconButton, {IconButtonProps} from '../atoms/IconButton';
 import ThemeConfig from '../theme';
 import {ImageIconProps} from '../atoms/ImageIcon';
 import useIsHandRaised from '../utils/useIsHandRaised';
+import {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
+
 /**
  * A component to mute / unmute the local audio
  */
@@ -45,6 +48,7 @@ export interface LocalAudioMuteProps {
 }
 
 function LocalAudioMute(props: LocalAudioMuteProps) {
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {rtcProps} = useContext(PropsContext);
   const {
     data: {isHost},
@@ -156,6 +160,8 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
 
   return props?.render ? (
     props.render(onPress, isAudioEnabled)
+  ) : isToolbarMenuItem ? (
+    <ToolbarMenuItem {...iconButtonProps} />
   ) : (
     <IconButton {...iconButtonProps} />
   );

package/template/src/subComponents/LocalEndCall.tsx

@@ -6,6 +6,9 @@ import IconButton, {IconButtonProps} from '../atoms/IconButton';
 import ReactNativeForegroundService from '@supersami/rn-foreground-service';
 import {Platform} from 'react-native';
 import {DispatchContext} from '../../agora-rn-uikit';
+import {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
+
 export interface LocalEndcallProps {
   showLabel?: boolean;
   isOnActionSheet?: boolean;
@@ -21,6 +24,7 @@ const stopForegroundService = () => {
 };
 
 const LocalEndcall = (props: LocalEndcallProps) => {
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {dispatch} = useContext(DispatchContext);
   const {showLabel = $config.ICON_TEXT, isOnActionSheet = false} = props;
   //commented for v1 release
@@ -80,7 +84,11 @@ const LocalEndcall = (props: LocalEndcallProps) => {
         setModalVisible={setEndcallVisible}
         modalVisible={endcallVisible}
       />
-      <IconButton {...iconButtonProps} />
+      {isToolbarMenuItem ? (
+        <ToolbarMenuItem {...iconButtonProps} />
+      ) : (
+        <IconButton {...iconButtonProps} />
+      )}
     </>
   );
 };

package/template/src/subComponents/LocalSwitchCamera.tsx

@@ -4,6 +4,8 @@ import {PropsContext, ToggleState} from '../../agora-rn-uikit';
 import Styles from '../components/styles';
 import {useLocalUserInfo, useRtc} from 'customization-api';
 import IconButton, {IconButtonProps} from '../atoms/IconButton';
+import {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
 
 export interface LocalSwitchCameraProps {
   showLabel?: boolean;
@@ -12,6 +14,7 @@ export interface LocalSwitchCameraProps {
 }
 
 function LocalSwitchCamera(props: LocalSwitchCameraProps) {
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {callbacks} = useContext(PropsContext);
   const {RtcEngineUnsafe} = useRtc();
   const local = useLocalUserInfo();
@@ -39,6 +42,8 @@ function LocalSwitchCamera(props: LocalSwitchCameraProps) {
 
   return props?.render ? (
     props.render(onPress, isVideoEnabled)
+  ) : isToolbarMenuItem ? (
+    <ToolbarMenuItem {...iconButtonProps} />
   ) : (
     <IconButton {...iconButtonProps} />
   );

package/template/src/subComponents/LocalVideoMute.tsx

@@ -25,6 +25,9 @@ import IconButton, {IconButtonProps} from '../atoms/IconButton';
 import ThemeConfig from '../theme';
 import {ImageIconProps} from '../atoms/ImageIcon';
 import useIsHandRaised from '../utils/useIsHandRaised';
+import {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
+
 /**
  * A component to mute / unmute the local video
  */
@@ -45,6 +48,7 @@ export interface LocalVideoMuteProps {
 
 function LocalVideoMute(props: LocalVideoMuteProps) {
   const {rtcProps} = useContext(PropsContext);
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {
     data: {isHost},
   } = useRoomInfo();
@@ -152,6 +156,8 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
   }
   return props?.render ? (
     props.render(onPress, isVideoEnabled)
+  ) : isToolbarMenuItem ? (
+    <ToolbarMenuItem {...iconButtonProps} />
   ) : (
     <IconButton {...iconButtonProps} />
   );

package/template/src/subComponents/Recording.tsx

@@ -13,6 +13,8 @@ import React from 'react';
 import {useRecording} from './recording/useRecording';
 import IconButton, {IconButtonProps} from '../atoms/IconButton';
 import {useVideoCall} from '../components/useVideoCall';
+import {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
 
 export interface RecordingButtonProps {
   showLabel?: boolean;
@@ -21,6 +23,7 @@ export interface RecordingButtonProps {
 }
 
 const Recording = (props: RecordingButtonProps) => {
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {startRecording, inProgress, isRecordingActive} = useRecording();
   //commented for v1 release
   //const recordingButton = useString<boolean>('recordingButton');
@@ -55,10 +58,10 @@ const Recording = (props: RecordingButtonProps) => {
 
   return props?.render ? (
     props.render(onPress, isRecordingActive)
+  ) : isToolbarMenuItem ? (
+    <ToolbarMenuItem {...iconButtonProps} />
   ) : (
-    <>
-      <IconButton {...iconButtonProps} />
-    </>
+    <IconButton {...iconButtonProps} />
   );
 };
 

package/template/src/subComponents/livestream/controls/LocalRaiseHand.tsx

@@ -21,11 +21,15 @@ import ThemeConfig from '../../../theme';
 import {ClientRole, PropsContext} from '../../../../agora-rn-uikit';
 import {useContent} from 'customization-api';
 import {isMobileUA} from '../../../utils/common';
+import {IconButtonProps} from '../../../atoms/IconButton';
+import {useToolbarMenu} from '../../../utils/useMenu';
+import ToolbarMenuItem from '../../../atoms/ToolbarMenuItem';
 
 interface LocalRaiseHandProps {
   showLabel?: boolean;
 }
 const LocalRaiseHand = (props: LocalRaiseHandProps) => {
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {audienceSendsRequest, audienceRecallsRequest, raiseHandList} =
     useContext(LiveStreamContext);
   const {rtcProps} = useContext(PropsContext);
@@ -37,30 +41,33 @@ const LocalRaiseHand = (props: LocalRaiseHandProps) => {
   const handStatusText = (toggle: boolean) =>
     toggle ? 'Lower hand' : 'Raise Hand';
   const isHandRasied = raiseHandList[localUid]?.raised === RaiseHandValue.TRUE;
-  return (
-    <IconButton
-      iconProps={{
-        name: isHandRasied ? 'lower-hand' : 'raise-hand',
-        tintColor: isHandRasied
-          ? $config.PRIMARY_ACTION_TEXT_COLOR
-          : $config.SECONDARY_ACTION_COLOR,
-        iconBackgroundColor: isHandRasied
-          ? $config.PRIMARY_ACTION_BRAND_COLOR
-          : '',
-        base64: isMobileUA() ? true : false,
-      }}
-      btnTextProps={{
-        text: showLabel ? handStatusText(isHandRasied) : '',
-        textColor: $config.FONT_COLOR,
-      }}
-      onPress={() => {
-        if (isHandRasied) {
-          audienceRecallsRequest();
-        } else {
-          audienceSendsRequest();
-        }
-      }}
-    />
+  const iconButtonProps: IconButtonProps = {
+    iconProps: {
+      name: isHandRasied ? 'lower-hand' : 'raise-hand',
+      tintColor: isHandRasied
+        ? $config.PRIMARY_ACTION_TEXT_COLOR
+        : $config.SECONDARY_ACTION_COLOR,
+      iconBackgroundColor: isHandRasied
+        ? $config.PRIMARY_ACTION_BRAND_COLOR
+        : '',
+      base64: isMobileUA() ? true : false,
+    },
+    btnTextProps: {
+      text: showLabel ? handStatusText(isHandRasied) : '',
+      textColor: $config.FONT_COLOR,
+    },
+    onPress: () => {
+      if (isHandRasied) {
+        audienceRecallsRequest();
+      } else {
+        audienceSendsRequest();
+      }
+    },
+  };
+  return isToolbarMenuItem ? (
+    <ToolbarMenuItem {...iconButtonProps} />
+  ) : (
+    <IconButton {...iconButtonProps} />
   );
 };
 

package/template/src/subComponents/screenshare/ScreenshareButton.tsx

@@ -19,6 +19,8 @@ import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
 import {PropsContext, ClientRole} from '../../../agora-rn-uikit';
 import {useLocalUserInfo, useRoomInfo} from 'customization-api';
 import useIsHandRaised from '../../utils/useIsHandRaised';
+import {useToolbarMenu} from '../../utils/useMenu';
+import ToolbarMenuItem from '../../atoms/ToolbarMenuItem';
 /**
  * A component to start and stop screen sharing on web clients.
  * Screen sharing is not yet implemented on mobile platforms.
@@ -30,6 +32,7 @@ export interface ScreenshareButtonProps {
 }
 
 const ScreenshareButton = (props: ScreenshareButtonProps) => {
+  const {isToolbarMenuItem} = useToolbarMenu();
   const {rtcProps} = useContext(PropsContext);
   const {
     data: {isHost},
@@ -84,6 +87,8 @@ const ScreenshareButton = (props: ScreenshareButtonProps) => {
 
   return props?.render ? (
     props.render(onPress, isScreenshareActive)
+  ) : isToolbarMenuItem ? (
+    <ToolbarMenuItem {...iconButtonProps} />
   ) : (
     <IconButton {...iconButtonProps} />
   );

package/template/src/utils/useMenu.tsx

@@ -0,0 +1,31 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+
+import React from 'react';
+import {createHook} from 'customization-implementation';
+
+const ToolbarMenuContext = React.createContext({isToolbarMenuItem: false});
+
+export interface ToolbarMenuProviderProps {
+  children: React.ReactNode;
+}
+const ToolbarMenuProvider = (props: ToolbarMenuProviderProps) => {
+  return (
+    <ToolbarMenuContext.Provider value={{isToolbarMenuItem: true}}>
+      {props.children}
+    </ToolbarMenuContext.Provider>
+  );
+};
+
+const useToolbarMenu = createHook(ToolbarMenuContext);
+
+export {ToolbarMenuProvider, useToolbarMenu};