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

package/template/src/subComponents/LayoutIconDropdown.tsx

@@ -0,0 +1,198 @@
+import React, {SetStateAction, useContext} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  Modal,
+} from 'react-native';
+import {isWeb} from '../utils/common';
+import {ImageIcon} from '../../agora-rn-uikit';
+import useCustomLayout from '../pages/video-call/CustomLayout';
+import {useLayout} from '../utils/useLayout';
+import DimensionContext from '../components/dimension/DimensionContext';
+
+interface LayoutIconDropdownProps {
+  modalPosition?: {
+    top?: number;
+    right?: number;
+    left?: number;
+    bottom?: number;
+  };
+  showDropdown: boolean;
+  setShowDropdown: React.Dispatch<SetStateAction<boolean>>;
+}
+
+const LayoutIconDropdown = (props: LayoutIconDropdownProps) => {
+  const {
+    showDropdown,
+    setShowDropdown,
+    modalPosition = {top: 45, right: 15, bottom: undefined, left: undefined},
+  } = props;
+  const {getDimensionData} = useContext(DimensionContext);
+  const {isDesktop, dim} = getDimensionData();
+
+  const layouts = useCustomLayout();
+  const {activeLayoutName, setActiveLayoutName} = useLayout();
+  const renderSeparatorHorizontal = () => {
+    return isWeb && isDesktop ? (
+      <View style={style.navItem}>
+        <View style={style.navItemSeparatorHorizontal}></View>
+      </View>
+    ) : (
+      <View style={{marginHorizontal: 2}}></View>
+    );
+  };
+  const selectedItemHighlighter = (isSelected: boolean) => {
+    return <View style={isSelected ? style.highlighter : {}} />;
+  };
+  const renderDropdown = () => {
+    const data = layouts.map((item, index) => {
+      let onPress = () => {
+        setActiveLayoutName(item.name);
+        setShowDropdown(false);
+      };
+      let content = [];
+      let BtnTemplateLocal = [
+        item?.iconName ? (
+          <ImageIcon
+            key={'btnTemplateNameDropdown' + index}
+            style={style.btnHolderCustom}
+            name={item?.iconName}
+          />
+        ) : (
+          <ImageIcon
+            key={'btnTemplateIconDropdown' + index}
+            style={style.btnHolderCustom}
+            icon={item.icon}
+          />
+        ),
+      ];
+      content.push(
+        <TouchableOpacity
+          key={'dropdownLayoutIcon' + index}
+          style={style.dropdownInnerIconContainer}
+          onPress={onPress}>
+          <>
+            <View style={style.highlighterContainer}>
+              {selectedItemHighlighter(item.name === activeLayoutName)}
+            </View>
+            <View style={{flex: 1}}>{BtnTemplateLocal}</View>
+            <View style={style.layoutNameContainer}>
+              <Text numberOfLines={2} style={style.layoutNameText}>
+                {item.label}
+              </Text>
+            </View>
+          </>
+        </TouchableOpacity>,
+      );
+      if (layouts.length - 1 !== index) {
+        content.push(
+          <View
+            style={style.separaterContainer}
+            key={'navLayoutIconSeparater' + index}>
+            {renderSeparatorHorizontal()}
+          </View>,
+        );
+      }
+      return content;
+    });
+    return (
+      <Modal
+        animationType="fade"
+        transparent={true}
+        visible={showDropdown}
+        onRequestClose={() => {
+          setShowDropdown(false);
+        }}>
+        <TouchableWithoutFeedback
+          onPress={() => {
+            setShowDropdown(false);
+          }}>
+          <View style={style.backDrop} />
+        </TouchableWithoutFeedback>
+        <View
+          style={[
+            style.dropdownContainer,
+            {
+              top: modalPosition?.top,
+              right: modalPosition?.right,
+              left: modalPosition?.left,
+              bottom: modalPosition?.bottom,
+            },
+          ]}>
+          {data}
+        </View>
+      </Modal>
+    );
+  };
+  return <>{renderDropdown()}</>;
+};
+
+const style = StyleSheet.create({
+  layoutNameContainer: {
+    flex: 2,
+    justifyContent: 'center',
+    paddingHorizontal: 5,
+  },
+  layoutNameText: {
+    textAlign: 'left',
+  },
+  highlighter: {
+    justifyContent: 'center',
+    alignSelf: 'center',
+    height: 1,
+    width: 1,
+    borderRadius: 10,
+    borderWidth: 4,
+    borderColor: $config.PRIMARY_COLOR,
+  },
+  highlighterContainer: {flex: 0.5, justifyContent: 'center'},
+  dropdownInnerIconContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    paddingHorizontal: 5,
+    paddingVertical: 5,
+    minHeight: 40,
+  },
+  navItem: {
+    height: '100%',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  navItemSeparatorHorizontal: {
+    backgroundColor: $config.PRIMARY_FONT_COLOR + '80',
+    width: '100%',
+    height: 1,
+    marginVertical: 10,
+    alignSelf: 'center',
+    opacity: 0.8,
+  },
+  separaterContainer: {
+    flex: 0.5,
+    paddingHorizontal: 5,
+  },
+  dropdownContainer: {
+    position: 'absolute',
+    marginTop: 5,
+    width: 160,
+    backgroundColor: 'white',
+    borderRadius: 10,
+    paddingVertical: 10,
+  },
+  btnHolderCustom: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'contain',
+  },
+  backDrop: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+});
+
+export default LayoutIconDropdown;

package/template/src/subComponents/LocalAudioMute.tsx

@@ -10,42 +10,64 @@
 *********************************************
 */
 import React, {useContext} from 'react';
-import {RtcContext} from '../../agora-rn-uikit';
-import {LocalContext} from '../../agora-rn-uikit';
-import {Image, StyleSheet, TouchableOpacity} from 'react-native';
-import icons from '../assets/icons';
-import ColorContext from '../components/ColorContext';
+import {
+  BtnTemplate,
+  ToggleState,
+  LocalContext,
+  BtnTemplateInterface,
+} from '../../agora-rn-uikit';
+import useMuteToggleLocal, {MUTE_LOCAL_TYPE} from '../utils/useMuteToggleLocal';
+import Styles from '../components/styles';
+import {
+  ButtonTemplateName,
+  useButtonTemplate,
+} from '../utils/useButtonTemplate';
+import {useString} from '../utils/useString';
 
 /**
- * A component to mute / unmute the local mute
+ * A component to mute / unmute the local audio
  */
-function LocalAudioMute() {
-  const {primaryColor} = useContext(ColorContext);
-  const {dispatch} = useContext(RtcContext);
+export interface LocalAudioMuteProps {
+  buttonTemplateName?: ButtonTemplateName;
+  render?: (
+    onPress: () => void,
+    isAudioEnabled: boolean,
+    buttonTemplateName?: ButtonTemplateName,
+  ) => JSX.Element;
+}
+
+function LocalAudioMute(props: LocalAudioMuteProps) {
   const local = useContext(LocalContext);
+  const localMute = useMuteToggleLocal();
+  //commented for v1 release
+  //const audioLabel = useString('toggleAudioButton')();
+  const audioLabel = 'Audio';
+
+  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
+  const {buttonTemplateName = defaultTemplateValue} = props;
+
+  const onPress = () => {
+    localMute(MUTE_LOCAL_TYPE.audio);
+  };
+  const isAudioEnabled = local.audio === ToggleState.enabled;
 
-  return (
-    <TouchableOpacity
-      onPress={() => {
-        dispatch({
-          type: 'LocalMuteAudio',
-          value: [local.audio],
-        });
-      }}>
-      <Image
-        style={[styles.icon, {tintColor: primaryColor}]}
-        source={{uri: local.audio ? icons.mic : icons.micOff}}
-      />
-    </TouchableOpacity>
+  let btnTemplateProps: BtnTemplateInterface = {
+    onPress: onPress,
+    name: isAudioEnabled ? 'mic' : 'micOff',
+  };
+
+  if (buttonTemplateName === ButtonTemplateName.topBar) {
+    btnTemplateProps.style = Styles.fullWidthButton as Object;
+  } else {
+    btnTemplateProps.style = Styles.localButton as Object;
+    btnTemplateProps.btnText = audioLabel;
+  }
+
+  return props?.render ? (
+    props.render(onPress, isAudioEnabled, buttonTemplateName)
+  ) : (
+    <BtnTemplate {...btnTemplateProps} />
   );
 }
 
-const styles = StyleSheet.create({
-  icon: {
-    width: 24,
-    height: 24,
-    tintColor: $config.PRIMARY_COLOR,
-  },
-});
-
 export default LocalAudioMute;

package/template/src/subComponents/LocalEndCall.tsx

@@ -0,0 +1,52 @@
+import React, {useContext} from 'react';
+import {
+  ButtonTemplateName,
+  useButtonTemplate,
+} from '../utils/useButtonTemplate';
+import {
+  BtnTemplate,
+  BtnTemplateInterface,
+  RtcContext,
+} from '../../agora-rn-uikit';
+import Styles from '../components/styles';
+import {useString} from '../utils/useString';
+
+export interface LocalEndcallProps {
+  buttonTemplateName?: ButtonTemplateName;
+  render?: (
+    onPress: () => void,
+    buttonTemplateName?: ButtonTemplateName,
+  ) => JSX.Element;
+}
+
+const LocalEndcall = (props: LocalEndcallProps) => {
+  const {dispatch} = useContext(RtcContext);
+  //commented for v1 release
+  //const endCallLabel = useString('endCallButton')();
+  const endCallLabel = 'Hang Up';
+  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
+  const {buttonTemplateName = defaultTemplateValue} = props;
+  const onPress = () =>
+    dispatch({
+      type: 'EndCall',
+      value: [],
+    });
+  let btnTemplateProps: BtnTemplateInterface = {
+    name: 'callEnd',
+    color: '#FD0845',
+    onPress: onPress,
+  };
+
+  if (buttonTemplateName === ButtonTemplateName.topBar) {
+    btnTemplateProps.style = Styles.fullWidthButton as Object;
+  } else {
+    btnTemplateProps.btnText = endCallLabel;
+    btnTemplateProps.style = Styles.endCall as Object;
+  }
+  return props?.render ? (
+    props.render(onPress, buttonTemplateName)
+  ) : (
+    <BtnTemplate {...btnTemplateProps} />
+  );
+};
+export default LocalEndcall;

package/template/src/subComponents/LocalSwitchCamera.tsx

@@ -0,0 +1,61 @@
+import React, {useContext} from 'react';
+import {
+  ButtonTemplateName,
+  useButtonTemplate,
+} from '../utils/useButtonTemplate';
+import {useString} from '../utils/useString';
+import {
+  BtnTemplate,
+  RtcContext,
+  PropsContext,
+  LocalContext,
+  ToggleState,
+  BtnTemplateInterface,
+} from '../../agora-rn-uikit';
+import Styles from '../components/styles';
+
+export interface LocalSwitchCameraProps {
+  buttonTemplateName?: ButtonTemplateName;
+  render?: (
+    onPress: () => void,
+    isVideoEnabled: boolean,
+    buttonTemplateName?: ButtonTemplateName,
+  ) => JSX.Element;
+}
+
+function LocalSwitchCamera(props: LocalSwitchCameraProps) {
+  const {callbacks} = useContext(PropsContext);
+  const {RtcEngine} = useContext(RtcContext);
+  const local = useContext(LocalContext);
+  //commented for v1 release
+  //const switchCameraButtonText = useString('switchCameraButton')();
+  const switchCameraButtonText = 'Switch';
+
+  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
+  const {buttonTemplateName = defaultTemplateValue} = props;
+  const onPress = () => {
+    RtcEngine.switchCamera();
+    callbacks?.SwitchCamera && callbacks.SwitchCamera();
+  };
+  const isVideoEnabled = local.video === ToggleState.enabled;
+  let btnTemplateProps: BtnTemplateInterface = {
+    name: 'switchCamera',
+    disabled: isVideoEnabled ? false : true,
+    onPress: onPress,
+  };
+
+  if (buttonTemplateName === ButtonTemplateName.topBar) {
+    btnTemplateProps.style = Styles.fullWidthButton as Object;
+  } else {
+    btnTemplateProps.style = Styles.localButton as Object;
+    btnTemplateProps.btnText = switchCameraButtonText;
+  }
+
+  return props?.render ? (
+    props.render(onPress, isVideoEnabled, buttonTemplateName)
+  ) : (
+    <BtnTemplate {...btnTemplateProps} />
+  );
+}
+
+export default LocalSwitchCamera;

package/template/src/subComponents/LocalVideoMute.tsx

@@ -10,43 +10,61 @@
 *********************************************
 */
 import React, {useContext} from 'react';
-import {RtcContext} from '../../agora-rn-uikit';
-import {LocalContext} from '../../agora-rn-uikit';
-import {Image, StyleSheet, TouchableOpacity} from 'react-native';
-import icons from '../assets/icons';
-import ColorContext from '../components/ColorContext';
+import {
+  BtnTemplate,
+  ToggleState,
+  LocalContext,
+  BtnTemplateInterface,
+} from '../../agora-rn-uikit';
+import useMuteToggleLocal, {MUTE_LOCAL_TYPE} from '../utils/useMuteToggleLocal';
+import Styles from '../components/styles';
+import {
+  ButtonTemplateName,
+  useButtonTemplate,
+} from '../utils/useButtonTemplate';
+import {useString} from '../utils/useString';
 
 /**
  * A component to mute / unmute the local video
  */
-function LocalVideoMute() {
-  const {primaryColor} = useContext(ColorContext);
-  const {dispatch} = useContext(RtcContext);
+export interface LocalVideoMuteProps {
+  buttonTemplateName?: ButtonTemplateName;
+  render?: (
+    onPress: () => void,
+    isVideoEnabled: boolean,
+    buttonTemplateName?: ButtonTemplateName,
+  ) => JSX.Element;
+}
+
+function LocalVideoMute(props: LocalVideoMuteProps) {
   const local = useContext(LocalContext);
+  const localMute = useMuteToggleLocal();
+  //commented for v1 release
+  //const videoLabel = useString('toggleVideoButton')();
+  const videoLabel = 'Video';
+  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
+  const {buttonTemplateName = defaultTemplateValue} = props;
+  const onPress = () => {
+    localMute(MUTE_LOCAL_TYPE.video);
+  };
+  const isVideoEnabled = local.video === ToggleState.enabled;
+  let btnTemplateProps: BtnTemplateInterface = {
+    onPress: onPress,
+    name: isVideoEnabled ? 'videocam' : 'videocamOff',
+  };
 
-  return (
-    <TouchableOpacity
-      onPress={() => {
-        dispatch({
-          type: 'LocalMuteVideo',
-          value: [local.video],
-        });
-      }}>
-      <Image
-        style={[styles.icon, {tintColor: primaryColor}]}
-        source={{uri: local.video ? icons.videocam : icons.videocamOff}}
-      />
-    </TouchableOpacity>
+  if (buttonTemplateName === ButtonTemplateName.topBar) {
+    btnTemplateProps.style = Styles.fullWidthButton as Object;
+  } else {
+    btnTemplateProps.style = Styles.localButton as Object;
+    btnTemplateProps.btnText = videoLabel;
+  }
+
+  return props?.render ? (
+    props.render(onPress, isVideoEnabled, buttonTemplateName)
+  ) : (
+    <BtnTemplate {...btnTemplateProps} />
   );
 }
 
-const styles = StyleSheet.create({
-  icon: {
-    width: 25,
-    height: 22,
-    marginHorizontal: 3,
-    tintColor: $config.PRIMARY_COLOR,
-  },
-});
-
 export default LocalVideoMute;

package/template/src/subComponents/LogoutButton.tsx

@@ -11,9 +11,10 @@
 */
 import React, {useContext} from 'react';
 import {TouchableOpacity, Text, StyleSheet} from 'react-native';
-import StorageContext from '../components/StorageContext';
+import StorageContext, {initStoreValue} from '../components/StorageContext';
 import {useHistory} from '../components/Router';
 import {gql, useMutation} from '@apollo/client';
+import {useString} from '../utils/useString';
 
 const LOGOUT = gql`
   mutation logoutSession($token: String!) {
@@ -28,10 +29,24 @@ const LogoutButton = () => {
   const {token} = store;
   const history = useHistory();
   const [logoutQuery] = useMutation(LOGOUT);
-
+  //commented for v1 release
+  // const oauthLoginLabel = useString('oauthLoginLabel')();
+  // const logoutButton = useString('logoutButton')();
+  const oauthLoginLabel = 'Login using OAuth';
+  const logoutButton = 'Logout';
   const logout = () => {
     if (setStore) {
-      setStore({token: null, displayName: ''});
+      /**
+       * In case of usage from FPE
+       * User stored some data in localstorage we don't want to remove their on logout.
+       * so setting prevstate with store default value
+       */
+      setStore((prevState) => {
+        return {
+          ...prevState,
+          ...initStoreValue,
+        };
+      });
     }
     logoutQuery({variables: {token}}).catch((e) => {
       console.log(e);
@@ -46,11 +61,11 @@ const LogoutButton = () => {
     <>
       {token === null ? (
         <TouchableOpacity style={style.btn} onPress={() => login()}>
-          <Text style={style.btnText}>Login using OAuth</Text>
+          <Text style={style.btnText}>{oauthLoginLabel}</Text>
         </TouchableOpacity>
       ) : (
         <TouchableOpacity style={style.btn} onPress={() => logout()}>
-          <Text style={style.btnText}>Logout</Text>
+          <Text style={style.btnText}>{logoutButton}</Text>
         </TouchableOpacity>
       )}
     </>

package/template/src/subComponents/NetworkQualityPill.tsx

@@ -1,4 +1,5 @@
-import React, {useState} from 'react';
+// @ts-nocheck
+import React, {useContext, useState} from 'react';
 import {
   View,
   Image,
@@ -9,7 +10,12 @@ import {
   ViewStyle,
   StyleProp,
 } from 'react-native';
+import {useString} from '../utils/useString';
 import {networkIconsObject} from '../components/NetworkQualityContext';
+import {NetworkQualities} from 'src/language/default-labels/videoCallScreenLabels';
+import {isWeb} from '../utils/common';
+import NetworkQualityContext from '../components/NetworkQualityContext';
+import {RenderInterface, UidType} from '../../agora-rn-uikit';
 
 /**
  *
@@ -22,17 +28,45 @@ import {networkIconsObject} from '../components/NetworkQualityContext';
  *
  */
 export const NetworkQualityPill = ({
-  networkStat,
+  user,
   primaryColor,
   small,
   rootStyle,
 }: {
-  networkStat: number;
+  user: RenderInterface;
   primaryColor: any;
   small?: boolean;
   rootStyle?: StyleProp<ViewStyle>;
 }) => {
   const [networkTextVisible, setNetworkTextVisible] = useState(false);
+  //commented for v1 release
+  //const getLabel = useString<NetworkQualities>('networkQualityLabel');
+  const getLabel = (quality: string) => {
+    switch (quality) {
+      case 'unknown':
+        return 'Unknown';
+      case 'excellent':
+        return 'Excellent';
+      case 'good':
+        return 'Good';
+      case 'bad':
+        return 'Bad';
+      case 'veryBad':
+        return 'Very Bad';
+      case 'unpublished':
+        return 'Unpublished';
+      case 'loading':
+        return 'Loading';
+      default:
+        return 'Loading';
+    }
+  };
+  const networkQualityStat = useContext(NetworkQualityContext);
+  const networkStat = networkQualityStat[user.uid]
+    ? networkQualityStat[user.uid]
+    : user.audio || user.video
+    ? 8
+    : 7;
 
   return (
     <View
@@ -42,8 +76,7 @@ export const NetworkQualityPill = ({
           opacity: networkTextVisible ? 1 : 0.8,
         },
         rootStyle,
-      ]}
-    >
+      ]}>
       <PlatformSpecificWrapper {...{networkTextVisible, setNetworkTextVisible}}>
         <View style={[style.networkIndicatorBackdrop]}>
           <Image
@@ -68,9 +101,8 @@ export const NetworkQualityPill = ({
             style={[
               style.networkPillText,
               {fontSize: small ? 14 : 15, userSelect: 'none'},
-            ]}
-          >
-            {networkIconsObject[networkStat].text}
+            ]}>
+            {getLabel(networkIconsObject[networkStat].text)}
           </Text>
         )}
       </PlatformSpecificWrapper>
@@ -83,7 +115,7 @@ const PlatformSpecificWrapper = ({
   setNetworkTextVisible,
   children,
 }: any) => {
-  return Platform.OS !== 'web' ? (
+  return !isWeb ? (
     <Pressable
       style={{
         height: '100%',
@@ -93,8 +125,7 @@ const PlatformSpecificWrapper = ({
       }}
       onPress={() => {
         setNetworkTextVisible((visible: boolean) => !visible);
-      }}
-    >
+      }}>
       {children}
     </Pressable>
   ) : (
@@ -114,8 +145,7 @@ const PlatformSpecificWrapper = ({
       }}
       onMouseLeave={() => {
         setNetworkTextVisible(false);
-      }}
-    >
+      }}>
       {children}
     </div>
   );

package/template/src/subComponents/OpenInNativeButton.tsx

@@ -10,7 +10,8 @@
 *********************************************
 */
 import React, {useContext} from 'react';
-import {View, TouchableOpacity, Text, Platform, StyleSheet} from 'react-native';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+import {isWeb} from '../utils/common';
 import ColorContext from '../components/ColorContext';
 
 /**
@@ -22,7 +23,7 @@ const OpenInNativeButton = () => {
   const {primaryColor} = useContext(ColorContext);
   const openInNative = () => {};
 
-  return Platform.OS === 'web' ? (
+  return isWeb ? (
     <View style={{position: 'absolute', right: 0}}>
       <TouchableOpacity
         style={[style.btn, {borderColor: primaryColor}]}