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

package/template/src/components/GraphQLProvider.tsx

@@ -15,62 +15,88 @@ import {
   InMemoryCache,
   ApolloProvider,
   NormalizedCacheObject,
+  // from,
 } from '@apollo/client';
 import {setContext} from '@apollo/client/link/context';
 // import useMount from './useMount';
-import React, {createContext, useContext, useRef} from 'react';
+import React, {createContext, useContext, useEffect, useState} from 'react';
 import StorageContext from './StorageContext';
-import AsyncStorage from '@react-native-async-storage/async-storage'; //'@react-native-community/async-storage';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 export const GraphQLContext = createContext<{
   client: ApolloClient<NormalizedCacheObject>;
-}>({client: {}});
+}>({
+  //@ts-ignore
+  client: {},
+});
 
-const GraphQLProvider = (props: {children: React.ReactNode}) => {
-  const httpLink = createHttpLink({
-    uri: `${$config.BACKEND_ENDPOINT}/query`,
-  });
-  const {store} = useContext(StorageContext);
-  const authLink = setContext(async (_, {headers}) => {
+const httpLink = createHttpLink({
+  uri: `${$config.BACKEND_ENDPOINT}/v1/query`,
+  credentials: 'include',
+});
+
+const authLink = (token: string) =>
+  setContext(async (_, {headers}) => {
     // get the authentication token from local storage if it exists
     // return the headers to the context so httpLink can read them
-    const storeString = await AsyncStorage.getItem('store');
-    let token;
-    if (storeString) {
-      token = JSON.parse(storeString).token;
-    }
-    console.log('link module token', storeString);
-    if (token) {
-      return {
-        headers: {
-          ...headers,
+    return {
+      headers: {
+        ...headers,
+        'X-Project-ID': $config.PROJECT_ID,
+        'X-Platform-ID': 'turnkey_web',
+        ...(token && {
           authorization: token ? `Bearer ${token}` : '',
-        },
-      };
-    } else {
-      return headers;
-    }
+        }),
+      },
+    };
   });
 
-  const client = useRef(
+const GraphQLProvider = (props: {children: React.ReactNode}) => {
+  const {store} = useContext(StorageContext);
+  const [client, setClient] = useState(
     new ApolloClient({
-      link: authLink.concat(httpLink),
+      link: authLink(store?.token).concat(httpLink),
       cache: new InMemoryCache(),
     }),
   );
 
-  // useEffect(() => {
-  //   console.log("store changed", store)
-  //   client.current = new ApolloClient({
-  //     link: authLink.concat(httpLink),
-  //     cache: new InMemoryCache(),
-  //   });
-  // }, [authLink, httpLink, store]);
-  console.log('GraphQL render triggered', store);
+  useEffect(() => {
+    setClient(
+      new ApolloClient({
+        link: authLink(store?.token).concat(httpLink),
+        cache: new InMemoryCache(),
+      }),
+    );
+  }, [store?.token]);
+
+  // const errorLink = onError(
+  //   ({graphQLErrors, networkError, operation, forward}) => {
+  //     // To retry on network errors, we recommend the RetryLink
+  //     // instead of the onError link. This just logs the error.
+  //     if (networkError) {
+  
+  //       // switch (err.extensions.code) {
+  //       //   // Apollo Server sets code to UNAUTHENTICATED
+  //       //   // when an AuthenticationError is thrown in a resolver
+  //       //   case 'UNAUTHENTICATED':
+  //       //     // Modify the operation context with a new token
+  //       //     const oldHeaders = operation.getContext().headers;
+  //       //     operation.setContext({
+  //       //       headers: {
+  //       //         ...oldHeaders,
+  //       //         authorization: getNewToken(),
+  //       //       },
+  //       //     });
+  //       //     // Retry the request, returning the new observable
+  //       //     return forward(operation);
+  //       // }
+  //     }
+  //   },
+  // );
 
   return (
-    <GraphQLContext.Provider value={{client: client.current}}>
-      <ApolloProvider client={client.current}>{props.children}</ApolloProvider>
+    <GraphQLContext.Provider value={{client: client}}>
+      <ApolloProvider client={client}>{props.children}</ApolloProvider>
     </GraphQLContext.Provider>
   );
 };

package/template/src/components/GridVideo.tsx

@@ -9,13 +9,15 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {layoutComponent, useContent} from 'customization-api';
+import {LayoutComponent, useContent} from 'customization-api';
 import React, {useContext, useMemo, useState} from 'react';
 import {View, StyleSheet, Pressable, Text} from 'react-native';
 import {isWebInternal, useIsDesktop} from '../utils/common';
 import {useSetPinnedLayout} from '../pages/video-call/DefaultLayouts';
 import RenderComponent from '../pages/video-call/RenderComponent';
 import {ClientRole, DispatchContext, PropsContext} from '../../agora-rn-uikit';
+import LiveStreamAttendeeLandingTile from './livestream/views/LiveStreamAttendeeLandingTile';
+
 const layout = (len: number, isDesktop: boolean = true) => {
   const rows = Math.round(Math.sqrt(len));
   const cols = Math.ceil(len / rows);
@@ -34,10 +36,11 @@ const layout = (len: number, isDesktop: boolean = true) => {
   };
 };
 
-const GridVideo: layoutComponent = ({renderData}) => {
+const GridVideo: LayoutComponent = ({renderData}) => {
   const {dispatch} = useContext(DispatchContext);
   const {rtcProps} = useContext(PropsContext);
-  const {activeUids} = useContent();
+  const {activeUids, customContent, pinnedUid, secondaryPinnedUid} =
+    useContent();
   const isDesktop = useIsDesktop();
 
   let {matrix, dims} = useMemo(
@@ -51,29 +54,36 @@ const GridVideo: layoutComponent = ({renderData}) => {
   if (
     $config.EVENT_MODE &&
     rtcProps?.role === ClientRole.Audience &&
-    activeUids.length === 0
+    activeUids.filter(i => !customContent[i]).length === 0
   ) {
-    return (
-      <View style={style.infoTextContainer}>
-        <Text style={style.infoTextStyle}>Waiting for the host to join...</Text>
-      </View>
-    );
+    return <LiveStreamAttendeeLandingTile />;
   }
 
   return (
     <View style={[style.full]}>
       {matrix.map((r, ridx) => (
-        <View style={style.gridRow} key={ridx}>
+        <View
+          style={[
+            style.gridRow,
+            {paddingBottom: ridx === matrix.length - 1 ? 0 : 4},
+          ]}
+          key={ridx}>
           {r.map((c, cidx) => (
             <Pressable
               disabled={renderData.length === 1}
               onPress={() => {
-                if (!(ridx === 0 && cidx === 0)) {
+                //if (!(ridx === 0 && cidx === 0)) {
+                const currentUid = renderData[ridx * dims.c + cidx];
+                if (
+                  currentUid !== pinnedUid &&
+                  currentUid !== secondaryPinnedUid
+                ) {
                   dispatch({
-                    type: 'SwapVideo',
+                    type: 'ActiveSpeaker',
                     value: [renderData[ridx * dims.c + cidx]],
                   });
                 }
+                //}
                 setPinnedLayout();
               }}
               style={{
@@ -118,7 +128,7 @@ const style = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
     width: '100%',
-    paddingVertical: 4,
+    paddingTop: 4,
   },
   gridVideoContainerInner: {
     //borderRadius: 12,

package/template/src/components/HostControlView.tsx

@@ -11,13 +11,17 @@
 */
 import React, {useRef, useState} from 'react';
 import {View, StyleSheet, useWindowDimensions} from 'react-native';
-import SecondaryButton from '../atoms/SecondaryButton';
 import {useString} from '../utils/useString';
 import useRemoteMute, {MUTE_REMOTE_TYPE} from '../utils/useRemoteMute';
 import TertiaryButton from '../atoms/TertiaryButton';
 import Spacer from '../atoms/Spacer';
 import RemoteMutePopup from '../subComponents/RemoteMutePopup';
 import {calculatePosition} from '../utils/common';
+import {
+  I18nMuteType,
+  peoplePanelMuteAllMicBtnText,
+  peoplePanelTurnoffAllCameraBtnText,
+} from '../language/default-labels/videoCallScreenLabels';
 
 export interface MuteAllAudioButtonProps {
   render?: (onPress: () => void) => JSX.Element;
@@ -28,9 +32,7 @@ export const MuteAllAudioButton = (props: MuteAllAudioButtonProps) => {
   const audioBtnRef = useRef(null);
   const [modalPosition, setModalPosition] = useState({});
   const muteRemoteAudio = useRemoteMute();
-  //commented for v1 release
-  //const muteAllAudioButton = useString('muteAllAudioButton')();
-  const muteAllAudioButton = 'Mute all';
+  const muteAllAudioButton = useString(peoplePanelMuteAllMicBtnText)();
   const onPressAction = () => muteRemoteAudio(MUTE_REMOTE_TYPE.audio);
   const {width: globalWidth, height: globalHeight} = useWindowDimensions();
   const showAudioModal = () => {
@@ -63,7 +65,7 @@ export const MuteAllAudioButton = (props: MuteAllAudioButtonProps) => {
   ) : (
     <>
       <RemoteMutePopup
-        type="audio"
+        type={I18nMuteType.audio}
         actionMenuVisible={showAudioMuteModal}
         setActionMenuVisible={setShowAudioMuteModal}
         name={null}
@@ -74,7 +76,7 @@ export const MuteAllAudioButton = (props: MuteAllAudioButtonProps) => {
         }}
       />
       <TertiaryButton
-        setRef={(ref) => (audioBtnRef.current = ref)}
+        setRef={ref => (audioBtnRef.current = ref)}
         onPress={onPress}
         text={muteAllAudioButton}
       />
@@ -91,9 +93,7 @@ export const MuteAllVideoButton = (props: MuteAllVideoButtonProps) => {
   const [modalPosition, setModalPosition] = useState({});
   const muteRemoteVideo = useRemoteMute();
   const {width: globalWidth, height: globalHeight} = useWindowDimensions();
-  //commented for v1 release
-  //const muteAllVideoButton = useString('muteAllVideoButton')();
-  const muteAllVideoButton = 'Turn off all cameras';
+  const muteAllVideoButton = useString(peoplePanelTurnoffAllCameraBtnText)();
   const onPressAction = () => muteRemoteVideo(MUTE_REMOTE_TYPE.video);
   const showVideoModal = () => {
     videoBtnRef?.current?.measure(
@@ -125,7 +125,7 @@ export const MuteAllVideoButton = (props: MuteAllVideoButtonProps) => {
   ) : (
     <>
       <RemoteMutePopup
-        type="video"
+        type={I18nMuteType.video}
         actionMenuVisible={showVideoMuteModal}
         setActionMenuVisible={setShowVideoMuteModal}
         name={null}
@@ -136,7 +136,7 @@ export const MuteAllVideoButton = (props: MuteAllVideoButtonProps) => {
         }}
       />
       <TertiaryButton
-        setRef={(ref) => (videoBtnRef.current = ref)}
+        setRef={ref => (videoBtnRef.current = ref)}
         onPress={onPress}
         text={muteAllVideoButton}
       />
@@ -145,9 +145,6 @@ export const MuteAllVideoButton = (props: MuteAllVideoButtonProps) => {
 };
 
 const HostControlView = () => {
-  //commented for v1 release
-  //const hostControlsLabel = useString('hostControlsLabel')();
-
   return (
     <View style={style.container}>
       {!$config.AUDIO_ROOM && <MuteAllVideoButton />}

package/template/src/components/JoinPhrase.tsx

@@ -16,7 +16,6 @@ import SessionContext from './SessionContext';
 const JoinPhrase = () => {
   const {phrase} = useParams();
   const {joinSession} = useContext(SessionContext);
-  console.log({phrase});
   joinSession({phrase});
   return <></>;
 };

package/template/src/components/Leftbar.tsx

@@ -13,6 +13,7 @@ import React from 'react';
 import {View, StyleSheet} from 'react-native';
 import Toolbar from '../atoms/Toolbar';
 import {ToolbarCustomItem} from '../atoms/ToolbarPreset';
+import {CustomToolbarSort} from '../utils/common';
 
 const defaultStartItems: ToolbarCustomItem[] = [];
 const defaultCenterItems: ToolbarCustomItem[] = [];
@@ -30,17 +31,17 @@ const Leftbar = (props: LeftbarProps) => {
   const customStartItems = customItems
     ?.filter((i) => i?.align === 'start' && !isHidden(i))
     ?.concat(includeDefaultItems ? defaultStartItems : [])
-    ?.sort((a, b) => a?.order - b?.order);
+    ?.sort(CustomToolbarSort);
 
   const customCenterItems = customItems
     ?.filter((i) => i?.align === 'center' && !isHidden(i))
     ?.concat(includeDefaultItems ? defaultCenterItems : [])
-    ?.sort((a, b) => a?.order - b?.order);
+    ?.sort(CustomToolbarSort);
 
   const customEndItems = customItems
     ?.filter((i) => i?.align === 'end' && !isHidden(i))
     ?.concat(includeDefaultItems ? defaultEndItems : [])
-    ?.sort((a, b) => a?.order - b?.order);
+    ?.sort(CustomToolbarSort);
 
   const renderContent = (
     items: ToolbarCustomItem[],

package/template/src/components/Navbar.tsx

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useContext, useState} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import {
   View,
   Text,
@@ -32,6 +32,7 @@ import {useChatNotification} from '../components/chat-notification/useChatNotifi
 import useLayoutsData from '../pages/video-call/useLayoutsData';
 import {
   BREAKPOINTS,
+  CustomToolbarSort,
   isAndroid,
   isIOS,
   isMobileUA,
@@ -63,6 +64,13 @@ import ToolbarItem from '../atoms/ToolbarItem';
 import {ToolbarCustomItem} from '../atoms/ToolbarPreset';
 import {useToolbarMenu} from '../utils/useMenu';
 import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
+import {useActionSheet} from '../utils/useActionSheet';
+import {useWaitingRoomContext} from './contexts/WaitingRoomContext';
+import {
+  toolbarItemChatText,
+  toolbarItemPeopleText,
+  videoRoomRecordingText,
+} from '../language/default-labels/videoCallScreenLabels';
 
 export const ParticipantsCountView = ({
   isMobileView = false,
@@ -70,9 +78,10 @@ export const ParticipantsCountView = ({
   isMobileView?: boolean;
 }) => {
   const {onlineUsersCount} = useContext(ChatContext);
+  const peopleLabel = useString(toolbarItemPeopleText)();
   return isMobileView ? (
     <Text>
-      People {'\n'} ({numFormatter(onlineUsersCount)})
+      {peopleLabel} {'\n'} ({numFormatter(onlineUsersCount)})
     </Text>
   ) : (
     <>
@@ -98,7 +107,6 @@ export interface ParticipantsIconButtonProps {
     left?: number;
     bottom?: number;
   };
-  isOnActionSheet?: boolean;
   render?: (onPress: () => void, isPanelActive: boolean) => JSX.Element;
 }
 export const ParticipantsIconButton = (props: ParticipantsIconButtonProps) => {
@@ -110,17 +118,20 @@ export const ParticipantsIconButton = (props: ParticipantsIconButtonProps) => {
       left: undefined,
       bottom: undefined,
     },
-    isOnActionSheet = false,
   } = props;
+  const {isOnActionSheet, showLabel} = useActionSheet();
   const {sidePanel, setSidePanel} = useSidePanel();
   const {isPendingRequestToReview, setLastCheckedRequestTimestamp} =
     useContext(LiveStreamContext);
-  //commented for v1 release
-  //const participantsLabel = useString('participantsLabel')();
-  const {onlineUsersCount} = useContext(ChatContext);
-  //const participantsLabel = `Participants (${numFormatter(onlineUsersCount)})`;
-  const participantsLabel = `People`;
+
+  const {waitingRoomUids} = useWaitingRoomContext();
+  const participantsLabel = useString(toolbarItemPeopleText)();
   const isPanelActive = sidePanel === SidePanelType.Participants;
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+
+  const isPendingWaitingRoomApproval = isHost && waitingRoomUids.length > 0;
 
   const onPress = () => {
     isPanelActive
@@ -141,10 +152,28 @@ export const ParticipantsIconButton = (props: ParticipantsIconButtonProps) => {
         : '',
     },
     btnTextProps: {
-      text: isOnActionSheet || !$config.ICON_TEXT ? '' : participantsLabel,
+      text: showLabel ? participantsLabel : '',
       textColor: $config.FONT_COLOR,
     },
   };
+  if (isOnActionSheet) {
+    // iconButtonProps.containerStyle = {
+    //   backgroundColor: $config.CARD_LAYER_2_COLOR,
+    //   width: 52,
+    //   height: 52,
+    //   borderRadius: 26,
+    //   justifyContent: 'center',
+    //   alignItems: 'center',
+    // };
+    iconButtonProps.btnTextProps.textStyle = {
+      color: $config.FONT_COLOR,
+      marginTop: 8,
+      fontSize: 12,
+      fontWeight: '400',
+      fontFamily: 'Source Sans Pro',
+      textAlign: 'center',
+    };
+  }
   iconButtonProps.isOnActionSheet = isOnActionSheet;
 
   return props?.render ? (
@@ -158,22 +187,25 @@ export const ParticipantsIconButton = (props: ParticipantsIconButtonProps) => {
           <View>
             <IconButton {...iconButtonProps} />
           </View>
-          {$config.EVENT_MODE &&
+          {isPendingWaitingRoomApproval ||
+          ($config.EVENT_MODE &&
             $config.RAISE_HAND &&
-            isPendingRequestToReview && (
-              <View
-                style={{
-                  position: 'absolute',
-                  top: liveStreamingRequestAlertIconPosition.top,
-                  bottom: liveStreamingRequestAlertIconPosition.bottom,
-                  right: liveStreamingRequestAlertIconPosition.right,
-                  left: liveStreamingRequestAlertIconPosition.left,
-                  backgroundColor: $config.SEMANTIC_ERROR,
-                  width: 12,
-                  height: 12,
-                  borderRadius: 10,
-                }}></View>
-            )}
+            isPendingRequestToReview) ? (
+            <View
+              style={{
+                position: 'absolute',
+                top: liveStreamingRequestAlertIconPosition.top,
+                bottom: liveStreamingRequestAlertIconPosition.bottom,
+                right: liveStreamingRequestAlertIconPosition.right,
+                left: liveStreamingRequestAlertIconPosition.left,
+                backgroundColor: $config.SEMANTIC_ERROR,
+                width: 12,
+                height: 12,
+                borderRadius: 10,
+              }}></View>
+          ) : (
+            <></>
+          )}
         </>
       )}
     </>
@@ -194,7 +226,6 @@ export interface ChatIconButtonProps {
     totalUnreadCount: number,
   ) => JSX.Element;
   isMobileView?: boolean;
-  isOnActionSheet?: boolean;
 }
 
 export const ChatIconButton = (props: ChatIconButtonProps) => {
@@ -213,15 +244,23 @@ export const ChatIconButton = (props: ChatIconButtonProps) => {
       fontSize: 12,
       textAlign: 'center',
     },
-    isOnActionSheet = false,
   } = props;
   const {setUnreadGroupMessageCount, totalUnreadCount} = useChatNotification();
   const {setChatType, setPrivateChatUser} = useChatUIControls();
 
-  //commented for v1 release
-  //const chatLabel = useString('chatLabel')();
-  const chatLabel = 'Chat';
+  const chatLabel = useString(toolbarItemChatText)();
+
   const isPanelActive = sidePanel === SidePanelType.Chat;
+
+  //when chat panel is close then we need to show the toast notification. for that
+  //we are resetting flag which used when chat panel is active
+  useEffect(() => {
+    if (sidePanel !== SidePanelType.Chat) {
+      setChatType(ChatType.Group);
+      setPrivateChatUser(0);
+    }
+  }, [sidePanel]);
+
   const onPress = () => {
     {
       if (isPanelActive) {
@@ -236,6 +275,7 @@ export const ChatIconButton = (props: ChatIconButtonProps) => {
       }
     }
   };
+  const {isOnActionSheet, showLabel} = useActionSheet();
   let iconButtonProps: IconButtonProps = {
     onPress: onPress,
     iconProps: {
@@ -248,11 +288,29 @@ export const ChatIconButton = (props: ChatIconButtonProps) => {
         : '',
     },
     btnTextProps: {
-      text: isOnActionSheet || !$config.ICON_TEXT ? '' : chatLabel,
+      text: showLabel ? chatLabel : '',
       textColor: $config.FONT_COLOR,
     },
   };
 
+  if (isOnActionSheet) {
+    // iconButtonProps.containerStyle = {
+    //   backgroundColor: $config.CARD_LAYER_2_COLOR,
+    //   width: 52,
+    //   height: 52,
+    //   borderRadius: 26,
+    //   justifyContent: 'center',
+    //   alignItems: 'center',
+    // };
+    iconButtonProps.btnTextProps.textStyle = {
+      color: $config.FONT_COLOR,
+      marginTop: 8,
+      fontSize: 12,
+      fontWeight: '400',
+      fontFamily: 'Source Sans Pro',
+      textAlign: 'center',
+    };
+  }
   iconButtonProps.isOnActionSheet = isOnActionSheet;
 
   // const renderBadgeOld = (badgeCount: any) => {
@@ -350,12 +408,24 @@ export const MeetingTitleToolbarItem = () => {
 export const ParticipantCountToolbarItem = () => {
   return (
     <ToolbarItem>
-      <ParticipantsCount />
+      <View>
+        <View
+          style={{
+            width: 45,
+            height: 35,
+            justifyContent: 'center',
+            alignItems: 'center',
+            alignSelf: 'center',
+            zIndex: isWebInternal() ? 3 : 0,
+          }}>
+          <ParticipantsCount />
+        </View>
+      </View>
     </ToolbarItem>
   );
 };
 export const RecordingStatusToolbarItem = () => {
-  const recordingLabel = 'Recording';
+  const recordingLabel = useString(videoRoomRecordingText)();
   const {isRecordingActive} = useRecording();
   return isRecordingActive ? (
     <ToolbarItem>
@@ -440,29 +510,27 @@ export interface NavbarProps {
   includeDefaultItems?: boolean;
 }
 const Navbar = (props: NavbarProps) => {
-  //commented for v1 release
-  //const recordingLabel = useString('recordingLabel')();
   const {customItems = [], includeDefaultItems = true} = props;
   const {width} = useWindowDimensions();
 
-  const isHidden = (i) => {
+  const isHidden = i => {
     return i?.hide === 'yes';
   };
 
   const customStartItems = customItems
-    ?.filter((i) => i.align === 'start' && !isHidden(i))
+    ?.filter(i => i.align === 'start' && !isHidden(i))
     ?.concat(includeDefaultItems ? defaultStartItems : [])
-    ?.sort((a, b) => a?.order - b?.order);
+    ?.sort(CustomToolbarSort);
 
   const customCenterItems = customItems
-    ?.filter((i) => i.align === 'center' && !isHidden(i))
+    ?.filter(i => i.align === 'center' && !isHidden(i))
     ?.concat(includeDefaultItems ? defaultCenterItems : [])
-    ?.sort((a, b) => a?.order - b?.order);
+    ?.sort(CustomToolbarSort);
 
   const customEndItems = customItems
-    ?.filter((i) => i.align === 'end' && !isHidden(i))
+    ?.filter(i => i.align === 'end' && !isHidden(i))
     ?.concat(includeDefaultItems ? defaultEndItems : [])
-    ?.sort((a, b) => a?.order - b?.order);
+    ?.sort(CustomToolbarSort);
 
   const renderContent = (
     items: ToolbarCustomItem[],