agora-appbuilder-core 4.0.0-api.5 → 4.0.0-api.6

package/template/src/components/NavbarMobile.tsx

@@ -7,54 +7,62 @@ import {
   ParticipantCountToolbarItem,
   RecordingStatusToolbarItem,
 } from './Navbar';
+import {useRecording} from '../subComponents/recording/useRecording';
+import {CustomToolbarSort} from '../utils/common';
 
 export interface NavbarProps {
   customItems?: ToolbarCustomItem[];
   includeDefaultItems?: boolean;
 }
 
-const defaultStartItems: ToolbarCustomItem[] = [
-  {
-    align: 'start',
-    component: MeetingTitleToolbarItem,
-    order: 0,
-    hide: 'no',
-  },
-  {
-    align: 'start',
-    component: ParticipantCountToolbarItem,
-    order: 1,
-    hide: 'no',
-  },
-  {
-    align: 'start',
-    component: RecordingStatusToolbarItem,
-    order: 2,
-    hide: 'no',
-  },
-];
-const defaultCenterItems: ToolbarCustomItem[] = [];
-const defaultEndItems: ToolbarCustomItem[] = [];
 const NavbarMobile = (props: NavbarProps) => {
+  const {isRecordingActive} = useRecording();
+  const defaultStartItems: ToolbarCustomItem[] = [
+    {
+      align: 'start',
+      component: MeetingTitleToolbarItem,
+      order: 0,
+      hide: 'no',
+    },
+    {
+      align: 'start',
+      component: ParticipantCountToolbarItem,
+      order: 1,
+      hide: 'no',
+    },
+    {
+      align: 'start',
+      component: isRecordingActive ? RecordingStatusToolbarItem : null,
+      order: 2,
+      hide: 'no',
+    },
+  ];
+  const defaultCenterItems: ToolbarCustomItem[] = [];
+  const defaultEndItems: ToolbarCustomItem[] = [];
   const {customItems = [], includeDefaultItems = true} = props;
   const isHidden = (i) => {
     return i?.hide === 'yes';
   };
 
-  const customStartItems = customItems
-    ?.filter((i) => i.align === 'start' && !isHidden(i))
-    ?.concat(includeDefaultItems ? defaultStartItems : [])
-    ?.sort((a, b) => a?.order - b?.order);
+  // const customStartItems = customItems
+  //   ?.filter((i) => i.align === 'start' && !isHidden(i))
+  //   ?.concat(includeDefaultItems ? defaultStartItems : [])
+  //   ?.sort((a, b) => a?.order - b?.order);
 
-  const customCenterItems = customItems
-    ?.filter((i) => i.align === 'center' && !isHidden(i))
-    ?.concat(includeDefaultItems ? defaultCenterItems : [])
-    ?.sort((a, b) => a?.order - b?.order);
+  // const customCenterItems = customItems
+  //   ?.filter((i) => i.align === 'center' && !isHidden(i))
+  //   ?.concat(includeDefaultItems ? defaultCenterItems : [])
+  //   ?.sort((a, b) => a?.order - b?.order);
 
-  const customEndItems = customItems
-    ?.filter((i) => i.align === 'end' && !isHidden(i))
-    ?.concat(includeDefaultItems ? defaultEndItems : [])
-    ?.sort((a, b) => a?.order - b?.order);
+  // const customEndItems = customItems
+  //   ?.filter((i) => i.align === 'end' && !isHidden(i))
+  //   ?.concat(includeDefaultItems ? defaultEndItems : [])
+  //   ?.sort((a, b) => a?.order - b?.order);
+
+  const customTopBarItems = customItems
+    ?.concat(includeDefaultItems ? defaultStartItems : [])
+    ?.filter((i) => !isHidden(i) && i?.component)
+    ?.sort(CustomToolbarSort);
 
   const renderContent = (
     items: ToolbarCustomItem[],
@@ -72,14 +80,17 @@ const NavbarMobile = (props: NavbarProps) => {
   return (
     <Toolbar>
       <View style={style.startContent}>
+        {renderContent(customTopBarItems, 'start')}
+      </View>
+      {/*<View style={style.startContent}>
         {renderContent(customStartItems, 'start')}
       </View>
-      <View style={style.centerContent}>
+       <View style={style.centerContent}>
         {renderContent(customCenterItems, 'center')}
       </View>
       <View style={style.endContent}>
         {renderContent(customEndItems, 'end')}
-      </View>
+      </View> */}
     </Toolbar>
   );
 };

package/template/src/components/Navigation.native.tsx

@@ -21,21 +21,7 @@ const processUrl = (url: string): string => {
 };
 
 const Navigation = () => {
-  const history = useHistory();
-  useEffect(() => {
-    const deepLinkUrl = (link: string | null) => {
-      console.log('Deep-linking url: ', link);
-      if (link !== null) {
-        history.push(processUrl(link));
-      }
-    };
-    const deepLink = async () => {
-      const initialUrl = await Linking.getInitialURL();
-      Linking.addEventListener('url', (e) => deepLinkUrl(e.url));
-      deepLinkUrl(initialUrl);
-    };
-    deepLink();
-  }, [history]);
+  //moved deeplink handling into AuthProvider
   return (
     <>
       <BackButton />

package/template/src/{subComponents/screenshare/ScreenshareButton.native.tsx → components/Navigation.sdk.tsx}

@@ -9,10 +9,24 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React from 'react';
+import React, {useEffect, useContext} from 'react';
+import {SdkApiContext} from './SdkApiContext';
+import {useHistory} from './Router';
+import isSDK from '../utils/isSDK';
 
-const ScreenshareButton = () => {
+const Navigation = () => {
+  const {join: SdkJoinState} = useContext(SdkApiContext);
+
+  const history = useHistory();
+
+  useEffect(() => {
+    if (isSDK() && SdkJoinState.initialized) {
+      if (SdkJoinState.phrase) {
+        history.push(`/${SdkJoinState.phrase}`);
+      }
+    }
+  }, [SdkJoinState]);
   return <></>;
 };
 
-export default ScreenshareButton;
+export default Navigation;

package/template/src/components/Navigation.tsx

@@ -9,23 +9,9 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useEffect, useContext} from 'react';
-import {SdkApiContext} from './SdkApiContext';
-import {useHistory} from './Router';
-import isSDK from '../utils/isSDK';
+import React from 'react';
 
 const Navigation = () => {
-  const {join: SdkJoinState} = useContext(SdkApiContext);
-
-  const history = useHistory();
-
-  useEffect(() => {
-    if (isSDK() && SdkJoinState.initialized) {
-      if (SdkJoinState.phrase) {
-        history.push(`/${SdkJoinState.phrase}`);
-      }
-    }
-  }, [SdkJoinState]);
   return <></>;
 };
 

package/template/src/components/ParticipantsView.tsx

@@ -39,9 +39,19 @@ import {useVideoMeetingData} from './contexts/VideoMeetingDataContext';
 import {useLayout, useContent} from 'customization-api';
 import {getGridLayoutName} from '../pages/video-call/DefaultLayouts';
 import {PeopleHeader} from '../pages/video-call/SidePanelHeader';
+import useCaptionWidth from '../../src/subComponents/caption/useCaptionWidth';
+import WaitingRoomParticipants from './participants/WaitingRoomParticipants';
+import {
+  peoplePanelAudienceSectionHeaderText,
+  peoplePanelHostSectionHeaderText,
+  peoplePanelInThisMeetingLabel,
+  peoplePanelNoAudienceJoinedContent,
+  peoplePanelNoHostJoinedContent,
+  peoplePanelNoUsersJoinedContent,
+} from '../../src/language/default-labels/videoCallScreenLabels';
 
-const ParticipantView = (props) => {
-  const {activeUids} = useContent();
+const ParticipantView = props => {
+  const {activeUids, customContent, defaultContent} = useContent();
   const {liveStreamData, audienceUids, hostUids} = useLiveStreamDataContext();
   const {
     attendeeUids: attendeeUidsVideoMeeting,
@@ -51,25 +61,27 @@ const ParticipantView = (props) => {
   const {sidePanel, setSidePanel} = useSidePanel();
   const {rtcProps} = useContext(PropsContext);
   const {showHeader = true} = props;
-  //commented for v1 release
-  // const hostLabel = useString('hostLabel')();
-  // const audienceLabel = useString('audienceLabel')();
-  // const participantsLabel = useString('participantsLabel')();
-  const hostLabel = 'Host';
-  const audienceLabel = 'Audience';
-  const attendeeLabel = 'Attendee';
-  const participantsLabel = `People (${numFormatter(onlineUsersCount)})`;
+  const hostLabel = useString(peoplePanelHostSectionHeaderText)();
+  const audienceLabel = useString(peoplePanelAudienceSectionHeaderText)();
+  const meetingParticpantsLabel = useString(peoplePanelInThisMeetingLabel)();
+  const noHostJoinedYet = useString(peoplePanelNoHostJoinedContent)();
+  const noAudienceJoinedYet = useString(peoplePanelNoAudienceJoinedContent)();
+  const noUsersJoinedYet = useString(peoplePanelNoUsersJoinedContent)();
   const {
     data: {isHost},
   } = useRoomInfo();
   const isSmall = useIsSmall();
+  const [showWaitingRoomSection, setShowWaitingRoomSection] = useState(true);
   //video meeting
   const [showHostSection, setShowHostSection] = useState(true);
   const [showParticipantSection, setShowParticipantSection] = useState(true);
+  const [showMeetingParticipants, setShowMeetingParticipants] = useState(true);
   //live streaming
   const [showTempHostSection, setShowTempHostSection] = useState(true);
   const [showAudienceSection, setShowAudienceSection] = useState(true);
   const {currentLayout} = useLayout();
+  const {transcriptHeight} = useCaptionWidth();
+
   return (
     <View
       testID="videocall-participants"
@@ -85,8 +97,12 @@ const ParticipantView = (props) => {
         isWebInternal() && !isSmall() && currentLayout === getGridLayoutName()
           ? {marginVertical: 4}
           : {},
+        //@ts-ignore
+        transcriptHeight && !isMobileUA() && {height: transcriptHeight},
       ]}>
       {showHeader && <PeopleHeader />}
+      {/* Waiting Room Participants */}
+
       <ScrollView style={[style.bodyContainer]}>
         {$config.EVENT_MODE ? (
           <>
@@ -99,9 +115,17 @@ const ParticipantView = (props) => {
                    * Original Host
                    * a) Can view streaming requests
                    * b) Can view all hosts with remote controls
+                   * c) Can admit from waiting room
                    */
                   <>
+                    {/* c) Waiting Room View */}
+                    {$config.ENABLE_WAITING_ROOM ? (
+                      <WaitingRoomParticipants />
+                    ) : (
+                      <></>
+                    )}
                     {/* a) Live streaming view */}
+
                     <CurrentLiveStreamRequestsView userList={liveStreamData} />
                     {/* b) Host view with remote controls*/}
                     <ParticipantSectionTitle
@@ -112,7 +136,7 @@ const ParticipantView = (props) => {
                     />
                     {showHostSection ? (
                       <AllHostParticipants
-                        emptyMessage={'No Host has joined yet.'}
+                        emptyMessage={noHostJoinedYet}
                         uids={hostUids}
                         isMobile={isSmall()}
                         updateActionSheet={props.updateActionSheet}
@@ -137,7 +161,7 @@ const ParticipantView = (props) => {
                     />
                     {showTempHostSection ? (
                       <AllAudienceParticipants
-                        emptyMessage={'No Host has joined yet.'}
+                        emptyMessage={noHostJoinedYet}
                         uids={hostUids}
                         isMobile={isSmall()}
                         updateActionSheet={props.updateActionSheet}
@@ -163,7 +187,7 @@ const ParticipantView = (props) => {
                   />
                   {showHostSection ? (
                     <AllHostParticipants
-                      emptyMessage={'No Host has joined yet.'}
+                      emptyMessage={noHostJoinedYet}
                       uids={hostUids}
                       isMobile={isSmall()}
                       updateActionSheet={props.updateActionSheet}
@@ -186,7 +210,7 @@ const ParticipantView = (props) => {
                 />
                 {showAudienceSection ? (
                   <AllAudienceParticipants
-                    emptyMessage={'No Audience has joined yet.'}
+                    emptyMessage={noAudienceJoinedYet}
                     uids={audienceUids}
                     isMobile={isSmall()}
                     updateActionSheet={props.updateActionSheet}
@@ -200,54 +224,38 @@ const ParticipantView = (props) => {
           </>
         ) : (
           <>
-            <AllHostParticipants
-              emptyMessage={'No Users has joined yet'}
-              uids={activeUids}
-              isMobile={isSmall()}
-              updateActionSheet={props.updateActionSheet}
-              handleClose={props.handleClose}
-            />
-            {/* <ParticipantSectionTitle
-              title={hostLabel}
-              count={hostUidsVideoMeeting.length}
-              isOpen={showHostSection}
-              onPress={() => setShowHostSection(!showHostSection)}
-            /> */}
-            {/* {showHostSection ? (
-              <AllHostParticipants
-                emptyMessage={'No Host has joined yet'}
-                uids={hostUidsVideoMeeting}
-                isMobile={isSmall()}
-                updateActionSheet={props.updateActionSheet}
-                handleClose={props.handleClose}
-              />
+            {$config.ENABLE_WAITING_ROOM && isHost ? (
+              <WaitingRoomParticipants />
             ) : (
-              <Spacer size={1} />
-            )} */}
-            {/* <ParticipantSectionTitle
-              title={attendeeLabel}
-              count={attendeeUidsVideoMeeting.length}
-              isOpen={showParticipantSection}
-              onPress={() => setShowParticipantSection(!showParticipantSection)}
-            /> */}
-            {/* {showParticipantSection ? (
+              <></>
+            )}
+
+            <ParticipantSectionTitle
+              title={meetingParticpantsLabel}
+              count={onlineUsersCount}
+              isOpen={showMeetingParticipants}
+              onPress={() =>
+                setShowMeetingParticipants(!showMeetingParticipants)
+              }
+            />
+            {showMeetingParticipants ? (
               <AllHostParticipants
-                emptyMessage={'No Attendee has joined yet'}
-                uids={attendeeUidsVideoMeeting}
+                emptyMessage={noUsersJoinedYet}
+                //custom content shouldn't be shown in the participant list. so filtering the activeuids
+                uids={activeUids.filter(i => !customContent[i])}
                 isMobile={isSmall()}
                 updateActionSheet={props.updateActionSheet}
                 handleClose={props.handleClose}
               />
             ) : (
               <></>
-            )} */}
+            )}
           </>
         )}
       </ScrollView>
 
       {isHost && (
         <View style={style.footer}>
-          {/*  <CopyJoinInfo showTeritaryButton /> */}
           <HostControlView />
         </View>
       )}