agora-appbuilder-core 2.2.0 → 2.3.0-beta.0

package/template/src/components/Controls.tsx

@@ -10,23 +10,32 @@
 *********************************************
 */
 import React, {useState, useContext} from 'react';
-import {View, Dimensions, Platform, StyleSheet} from 'react-native';
-import {LocalUserContext} from '../../agora-rn-uikit';
-import {
-  LocalAudioMute,
-  LocalVideoMute,
-  Endcall,
-  PropsContext,
-} from '../../agora-rn-uikit';
-import Recording from '../subComponents/Recording';
-import SwitchCamera from '../subComponents/SwitchCamera';
-import ScreenshareButton from '../subComponents/screenshare/ScreenshareButton';
+import {View, Dimensions, StyleSheet} from 'react-native';
+import {PropsContext} from '../../agora-rn-uikit';
+import LocalAudioMute, {
+  LocalAudioMuteProps,
+} from '../subComponents/LocalAudioMute';
+import LocalVideoMute, {
+  LocalVideoMuteProps,
+} from '../subComponents/LocalVideoMute';
+import Recording, {RecordingButtonProps} from '../subComponents/Recording';
+import LocalSwitchCamera, {
+  LocalSwitchCameraProps,
+} from '../subComponents/LocalSwitchCamera';
+import ScreenshareButton, {
+  ScreenshareButtonProps,
+} from '../subComponents/screenshare/ScreenshareButton';
 import {controlsHolder} from '../../theme.json';
-import mobileAndTabletCheck from '../utils/mobileWebTest';
+import isMobileOrTablet from '../utils/isMobileOrTablet';
 import {ClientRole} from '../../agora-rn-uikit';
-import LiveStreamControls from './livestream/views/LiveStreamControls';
+import LiveStreamControls, {
+  LiveStreamControlsProps,
+} from './livestream/views/LiveStreamControls';
+import {isIOS, isWeb} from '../utils/common';
+import {useMeetingInfo} from './meeting-info/useMeetingInfo';
+import LocalEndcall, {LocalEndcallProps} from '../subComponents/LocalEndCall';
 
-const Controls = (props: any) => {
+const Controls = () => {
   const {rtcProps} = useContext(PropsContext);
 
   let onLayout = (e: any) => {
@@ -38,72 +47,84 @@ const Controls = (props: any) => {
     Dimensions.get('window').width > Dimensions.get('window').height,
   ]);
   const isDesktop = dim[0] > 1224;
-  const {setRecordingActive, recordingActive, isHost} = props;
+  const {isHost} = useMeetingInfo();
 
   return (
-    <LocalUserContext>
-      <View
-        style={[
-          style.controlsHolder,
-          {
-            paddingHorizontal: isDesktop ? '25%' : '1%',
-            backgroundColor: $config.SECONDARY_FONT_COLOR + 80,
-          },
-        ]}
-        onLayout={onLayout}>
-        {$config.EVENT_MODE && rtcProps.role == ClientRole.Audience ? (
-          <LiveStreamControls showControls={true} />
-        ) : (
-          <>
-            {/**
-             * In event mode when raise hand feature is active
-             * and audience is promoted to host, the audience can also
-             * demote himself
-             */}
-            {$config.EVENT_MODE && (
-              <LiveStreamControls
-                showControls={
-                  rtcProps?.role == ClientRole.Broadcaster && !isHost
-                }
-              />
-            )}
+    <View
+      style={[
+        style.controlsHolder,
+        {
+          paddingHorizontal: isDesktop ? '25%' : '1%',
+          backgroundColor: $config.SECONDARY_FONT_COLOR + 80,
+        },
+      ]}
+      onLayout={onLayout}>
+      {$config.EVENT_MODE && rtcProps.role == ClientRole.Audience ? (
+        <LiveStreamControls showControls={true} />
+      ) : (
+        <>
+          {/**
+           * In event mode when raise hand feature is active
+           * and audience is promoted to host, the audience can also
+           * demote himself
+           */}
+          {$config.EVENT_MODE && (
+            <LiveStreamControls
+              showControls={rtcProps?.role == ClientRole.Broadcaster && !isHost}
+            />
+          )}
+          <View style={{alignSelf: 'center'}}>
+            <LocalAudioMute />
+          </View>
+          <View style={{alignSelf: 'center'}}>
+            <LocalVideoMute />
+          </View>
+          {isMobileOrTablet() && (
+            <View style={{alignSelf: 'center'}}>
+              <LocalSwitchCamera />
+            </View>
+          )}
+          {$config.SCREEN_SHARING && !isMobileOrTablet() && (
             <View style={{alignSelf: 'center'}}>
-              <LocalAudioMute />
+              <ScreenshareButton />
             </View>
+          )}
+          {isHost && $config.CLOUD_RECORDING && (
             <View style={{alignSelf: 'center'}}>
-              <LocalVideoMute />
+              <Recording />
             </View>
-            {mobileAndTabletCheck() && (
-              <View style={{alignSelf: 'center'}}>
-                <SwitchCamera />
-              </View>
-            )}
-            {$config.SCREEN_SHARING && !mobileAndTabletCheck() && (
-              <View style={{alignSelf: 'center'}}>
-                <ScreenshareButton />
-              </View>
-            )}
-            {isHost && $config.CLOUD_RECORDING && (
-              <View style={{alignSelf: 'center'}}>
-                <Recording
-                  recordingActive={recordingActive}
-                  setRecordingActive={setRecordingActive}
-                />
-              </View>
-            )}
-          </>
-        )}
-        <View style={{alignSelf: 'center'}}>
-          <Endcall />
-        </View>
+          )}
+        </>
+      )}
+      <View style={{alignSelf: 'center'}}>
+        <LocalEndcall />
       </View>
-    </LocalUserContext>
+    </View>
   );
 };
 
+export const ControlsComponentsArray: [
+  (props: LocalAudioMuteProps) => JSX.Element,
+  (props: LocalVideoMuteProps) => JSX.Element,
+  (props: LocalSwitchCameraProps) => JSX.Element,
+  (props: ScreenshareButtonProps) => JSX.Element,
+  (props: RecordingButtonProps) => JSX.Element,
+  (props: LocalEndcallProps) => JSX.Element,
+  (props: LiveStreamControlsProps) => JSX.Element,
+] = [
+  LocalAudioMute,
+  LocalVideoMute,
+  LocalSwitchCamera,
+  ScreenshareButton,
+  Recording,
+  LocalEndcall,
+  LiveStreamControls,
+];
+
 const style = StyleSheet.create({
+  // @ts-ignore
   controlsHolder: {
-    flex: Platform.OS === 'web' ? 1.3 : 1.6,
+    flex: isWeb ? 1.3 : 1.6,
     ...controlsHolder,
   },
   chatNotification: {
@@ -114,7 +135,7 @@ const style = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: $config.PRIMARY_COLOR,
     color: $config.SECONDARY_FONT_COLOR,
-    fontFamily: Platform.OS === 'ios' ? 'Helvetica' : 'sans-serif',
+    fontFamily: isIOS ? 'Helvetica' : 'sans-serif',
     borderRadius: 10,
     position: 'absolute',
     left: 25,

package/template/src/components/DeviceConfigure.tsx

@@ -161,7 +161,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
         deviceList,
         setDeviceList,
       }}>
-      {true ? props.children : <></>}
+      {props.children}
     </DeviceContext.Provider>
   );
 };

package/template/src/components/DeviceContext.tsx

@@ -12,13 +12,20 @@
 import {createContext} from 'react';
 
 interface DeviceContext {
-  selectedCam: any;
-  setSelectedCam: (cam: any) => void;
-  selectedMic: any;
-  setSelectedMic: (mic: any) => void;
-  deviceList: Array<any>;
-  setDeviceList: (devices: any) => void;
+  selectedCam: string;
+  setSelectedCam: (cam: string) => void;
+  selectedMic: string;
+  setSelectedMic: (mic: string) => void;
+  deviceList: MediaDeviceInfo[];
+  setDeviceList: (devices: MediaDeviceInfo[]) => void;
 }
 
-const DeviceContext = createContext((null as unknown) as DeviceContext);
+const DeviceContext = createContext<DeviceContext>({
+  selectedCam: '',
+  selectedMic: '',
+  deviceList: [],
+  setSelectedCam: () => {},
+  setSelectedMic: () => {},
+  setDeviceList: () => {},
+});
 export default DeviceContext;

package/template/src/components/GraphQLProvider.tsx

@@ -14,13 +14,18 @@ import {
   createHttpLink,
   InMemoryCache,
   ApolloProvider,
+  NormalizedCacheObject,
 } from '@apollo/client';
 import {setContext} from '@apollo/client/link/context';
 // import useMount from './useMount';
-import React, {useContext, useRef} from 'react';
+import React, {createContext, useContext, useRef} from 'react';
 import StorageContext from './StorageContext';
 import AsyncStorage from '@react-native-community/async-storage';
 
+export const GraphQLContext = createContext<{
+  client: ApolloClient<NormalizedCacheObject>;
+}>({client: {}});
+
 const GraphQLProvider = (props: {children: React.ReactNode}) => {
   const httpLink = createHttpLink({
     uri: `${$config.BACKEND_ENDPOINT}/query`,
@@ -64,7 +69,9 @@ const GraphQLProvider = (props: {children: React.ReactNode}) => {
   console.log('GraphQL render triggered', store);
 
   return (
-    <ApolloProvider client={client.current}>{props.children}</ApolloProvider>
+    <GraphQLContext.Provider value={{client: client.current}}>
+      <ApolloProvider client={client.current}>{props.children}</ApolloProvider>
+    </GraphQLContext.Provider>
   );
 };
 

package/template/src/components/GridVideo.tsx

@@ -9,33 +9,13 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
+import {layoutComponent} from 'fpe-api';
 import React, {useMemo, useContext, useState} from 'react';
-import {
-  View,
-  Platform,
-  StyleSheet,
-  Text,
-  Dimensions,
-  Image,
-  Pressable,
-  useWindowDimensions,
-} from 'react-native';
-import {MinUidContext} from '../../agora-rn-uikit';
-import {MaxUidContext} from '../../agora-rn-uikit';
-import {MaxVideoView} from '../../agora-rn-uikit';
+import {View, StyleSheet, Dimensions, Pressable} from 'react-native';
+import {isWeb} from '../utils/common';
 import {RtcContext} from '../../agora-rn-uikit';
-import chatContext from './ChatContext';
-import icons from '../assets/icons';
-import ColorContext from './ColorContext';
-import FallbackLogo from '../subComponents/FallbackLogo';
-import Layout from '../subComponents/LayoutEnum';
-import ScreenShareNotice from '../subComponents/ScreenShareNotice';
-import {RFValue} from 'react-native-responsive-fontsize';
-import networkQualityContext from './NetworkQualityContext';
-import {NetworkQualityPill} from '../subComponents/NetworkQualityPill';
-import {ImageIcon} from '../../agora-rn-uikit';
-import TextWithTooltip from '../subComponents/TextWithTooltip';
-
+import {useSetPinnedLayout} from '../pages/video-call/DefaultLayouts';
+import RenderComponent from '../pages/video-call/RenderComponent';
 const layout = (len: number, isDesktop: boolean = true) => {
   const rows = Math.round(Math.sqrt(len));
   const cols = Math.ceil(len / rows);
@@ -54,25 +34,16 @@ const layout = (len: number, isDesktop: boolean = true) => {
   };
 };
 
-// const isDesktop = Platform.OS === 'web';
-
-interface GridVideoProps {
-  setLayout: React.Dispatch<React.SetStateAction<Layout>>;
-}
-
-const GridVideo = (props: GridVideoProps) => {
-  const {height, width} = useWindowDimensions();
+const GridVideo: layoutComponent = ({renderData}) => {
   const {dispatch} = useContext(RtcContext);
-  const max = useContext(MaxUidContext);
-  const min = useContext(MinUidContext);
-  const {primaryColor} = useContext(ColorContext);
-  const networkQualityStat = useContext(networkQualityContext);
-  const {userList, localUid} = useContext(chatContext);
-  const users = [...max, ...min];
   let onLayout = (e: any) => {
-    setDim([e.nativeEvent.layout.width, e.nativeEvent.layout.height]);
+    setDim([
+      e.nativeEvent.layout.width,
+      e.nativeEvent.layout.height,
+      e.nativeEvent.layout.width > e.nativeEvent.layout.height,
+    ]);
   };
-  const [dim, setDim] = useState([
+  const [dim, setDim] = useState<[number, number, boolean]>([
     Dimensions.get('window').width,
     Dimensions.get('window').height,
     Dimensions.get('window').width > Dimensions.get('window').height,
@@ -80,9 +51,11 @@ const GridVideo = (props: GridVideoProps) => {
   const isDesktop = dim[0] > dim[1] + 100;
 
   let {matrix, dims} = useMemo(
-    () => layout(users.length, isDesktop),
-    [users.length, isDesktop],
+    () => layout(renderData.length, isDesktop),
+    [renderData.length, isDesktop],
   );
+
+  const setPinnedLayout = useSetPinnedLayout();
   return (
     <View
       style={[style.full, {paddingHorizontal: isDesktop ? 50 : 0}]}
@@ -95,130 +68,18 @@ const GridVideo = (props: GridVideoProps) => {
                 if (!(ridx === 0 && cidx === 0)) {
                   dispatch({
                     type: 'SwapVideo',
-                    value: [users[ridx * dims.c + cidx]],
+                    value: [renderData[ridx * dims.c + cidx]],
                   });
                 }
-                props.setLayout(Layout.Pinned);
+                setPinnedLayout();
               }}
               style={{
-                flex: Platform.OS === 'web' ? 1 / dims.c : 1,
+                flex: isWeb ? 1 / dims.c : 1,
                 marginHorizontal: 'auto',
               }}
               key={cidx}>
               <View style={style.gridVideoContainerInner}>
-                <NetworkQualityPill
-                  networkStat={
-                    // When no network quality reported and if user has no stream
-                    // published show "unsupported" else show "loading"
-                    networkQualityStat[users[ridx * dims.c + cidx].uid]
-                      ? networkQualityStat[users[ridx * dims.c + cidx].uid]
-                      : users[ridx * dims.c + cidx].audio ||
-                        users[ridx * dims.c + cidx].video
-                      ? 8
-                      : 7
-                  }
-                  primaryColor={primaryColor}
-                  rootStyle={{top: 5, left: 5}}
-                />
-                <ScreenShareNotice uid={users[ridx * dims.c + cidx].uid} />
-                <MaxVideoView
-                  fallback={() => {
-                    if (users[ridx * dims.c + cidx].uid === 'local') {
-                      return FallbackLogo(userList[localUid]?.name);
-                    } else if (
-                      String(users[ridx * dims.c + cidx].uid)[0] === '1'
-                    ) {
-                      return FallbackLogo('PSTN User');
-                    } else {
-                      return FallbackLogo(
-                        userList[users[ridx * dims.c + cidx]?.uid]?.name,
-                      );
-                    }
-                  }}
-                  user={users[ridx * dims.c + cidx]}
-                  key={users[ridx * dims.c + cidx].uid}
-                />
-                <View
-                  style={{
-                    zIndex: 5,
-                    marginTop: -30,
-                    backgroundColor: $config.SECONDARY_FONT_COLOR + 'bb',
-                    alignSelf: 'flex-end',
-                    paddingHorizontal: 8,
-                    height: 30,
-                    borderTopLeftRadius: 15,
-                    borderBottomRightRadius: 15,
-                    // marginHorizontal: 'auto',
-                    maxWidth: '100%',
-                    flexDirection: 'row',
-                    // alignContent: 'flex-end',
-                    // width: '100%',
-                    // alignItems: 'flex-start',
-                  }}>
-                  {/* <View style={{alignSelf: 'flex-end', flexDirection: 'row'}}> */}
-                  <View style={[style.MicBackdrop]}>
-                    <ImageIcon
-                      name={
-                        users[ridx * dims.c + cidx].audio ? 'mic' : 'micOff'
-                      }
-                      color={
-                        users[ridx * dims.c + cidx].audio ? primaryColor : 'red'
-                      }
-                      style={style.MicIcon}
-                    />
-                    {/* <Image
-                      source={{
-                        uri: users[ridx * dims.c + cidx].audio
-                          ? icons.mic
-                          : icons.micOff,
-                      }}
-                      style={[
-                        style.MicIcon,
-                        {
-                          tintColor: users[ridx * dims.c + cidx].audio
-                            ? primaryColor
-                            : 'red',
-                        },
-                      ]}
-                      resizeMode={'contain'}
-                    /> */}
-                  </View>
-                  <View style={{flex:1}}>
-                    <TextWithTooltip 
-                      value={users[ridx * dims.c + cidx].uid === 'local'
-                      ? userList[localUid]
-                        ? userList[localUid].name + ' '
-                        : 'You '
-                      : userList[users[ridx * dims.c + cidx].uid]
-                      ? userList[users[ridx * dims.c + cidx].uid].name + ' '
-                      : users[ridx * dims.c + cidx].uid === 1
-                      ? (userList[localUid]?.name + "'s screen ")
-                      : String(users[ridx * dims.c + cidx].uid)[0] === '1'
-                      ? 'PSTN User '
-                      : 'User '}
-                      style={
-                        {
-                          color: $config.PRIMARY_FONT_COLOR,
-                          lineHeight: 30,
-                          fontSize: RFValue(14, height > width ? height : width),
-                          fontWeight: '700',
-                          flexShrink: 1,
-                          // width: '100%',
-                          // alignSelf: 'stretch',
-                          // textAlign: 'center',
-                        }
-                      }
-                    />
-                  </View>
-                  {/* </View> */}
-                  {/* {console.log(
-                    '!nax',
-                    userList,
-                    userList[users[ridx * dims.c + cidx].uid],
-                    userList[localUid],
-                    users[ridx * dims.c + cidx].uid,
-                  )} */}
-                </View>
+                <RenderComponent uid={renderData[ridx * dims.c + cidx]} />
               </View>
             </Pressable>
           ))}

package/template/src/components/HostControlView.tsx

@@ -9,30 +9,69 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useContext} from 'react';
-import {View, Text, TouchableOpacity, StyleSheet} from 'react-native';
-import chatContext, {controlMessageEnum} from './ChatContext';
-import ColorContext from './ColorContext';
+import React from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+import {controlMessageEnum} from './ChatContext';
 import SecondaryButton from '../atoms/SecondaryButton';
+import {useString} from '../utils/useString';
+import useSendControlMessage, {
+  CONTROL_MESSAGE_TYPE,
+} from '../utils/useSendControlMessage';
+
+export interface MuteAllAudioButtonProps {
+  render?: (onPress: () => void) => JSX.Element;
+}
+
+export const MuteAllAudioButton = (props: MuteAllAudioButtonProps) => {
+  const sendCtrlMsg = useSendControlMessage();
+  //commented for v1 release
+  //const muteAllAudioButton = useString('muteAllAudioButton')();
+  const muteAllAudioButton = 'Mute all audios';
+  const onPress = () =>
+    sendCtrlMsg(
+      CONTROL_MESSAGE_TYPE.controlMessageToEveryOne,
+      controlMessageEnum.muteAudio,
+    );
+  return props?.render ? (
+    props.render(onPress)
+  ) : (
+    <SecondaryButton onPress={onPress} text={muteAllAudioButton} />
+  );
+};
+
+export interface MuteAllVideoButtonProps {
+  render?: (onPress: () => void) => JSX.Element;
+}
+export const MuteAllVideoButton = (props: MuteAllVideoButtonProps) => {
+  const sendCtrlMsg = useSendControlMessage();
+  //commented for v1 release
+  //const muteAllVideoButton = useString('muteAllVideoButton')();
+  const muteAllVideoButton = 'Mute all videos';
+  const onPress = () =>
+    sendCtrlMsg(
+      CONTROL_MESSAGE_TYPE.controlMessageToEveryOne,
+      controlMessageEnum.muteVideo,
+    );
+  return props?.render ? (
+    props.render(onPress)
+  ) : (
+    <SecondaryButton onPress={onPress} text={muteAllVideoButton} />
+  );
+};
 
 const HostControlView = () => {
-  const {sendControlMessage} = useContext(chatContext);
-  const {primaryColor} = useContext(ColorContext);
+  //commented for v1 release
+  //const hostControlsLabel = useString('hostControlsLabel')();
+  const hostControlsLabel = 'Host Controls';
   return (
     <>
-      <Text style={style.heading}>Host Controls</Text>
+      <Text style={style.heading}>{hostControlsLabel}</Text>
       <View>
         <View style={style.btnContainer}>
-          <SecondaryButton
-            onPress={() => sendControlMessage(controlMessageEnum.muteAudio)}
-            text={'Mute all audios'}
-          />
+          <MuteAllAudioButton />
         </View>
         <View style={style.btnContainer}>
-          <SecondaryButton
-            onPress={() => sendControlMessage(controlMessageEnum.muteVideo)}
-            text={'Mute all videos'}
-          />
+          <MuteAllVideoButton />
         </View>
       </View>
     </>