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

package/template/src/components/precall/PermissionHelper.tsx

@@ -1,20 +1,27 @@
 import {useLocalUserInfo} from 'customization-api';
 import React, {useContext, useEffect, useState} from 'react';
-import {
-  View,
-  Image,
-  Modal,
-  TouchableOpacity,
-  StyleSheet,
-  Text,
-} from 'react-native';
+import {View, Image, TouchableOpacity, StyleSheet, Text} from 'react-native';
 import Popup from '../../atoms/Popup';
 import ThemeConfig from '../../theme';
 //@ts-ignore
 import permissionHelper from '../../assets/permission.png';
 import {DispatchContext, PermissionState} from '../../../agora-rn-uikit';
+import {useString} from '../../utils/useString';
+import {
+  permissionPopupDismissBtnText,
+  permissionPopupHeading,
+  permissionPopupSubHeading,
+} from '../../language/default-labels/precallScreenLabels';
 
 const PermissionHelper = () => {
+  const heading = useString<any>(permissionPopupHeading)({
+    audioRoom: $config.AUDIO_ROOM,
+  });
+  const subheading = useString<any>(permissionPopupSubHeading)({
+    audioRoom: $config.AUDIO_ROOM,
+  });
+  const dismiss = useString(permissionPopupDismissBtnText)();
+
   const {dispatch} = useContext(DispatchContext);
   const {permissionStatus} = useLocalUserInfo();
   const [showPopup, setShowPopup] = useState(false);
@@ -26,10 +33,41 @@ const PermissionHelper = () => {
     });
   };
   useEffect(() => {
+    Promise.all([
+      navigator.permissions.query(
+        //@ts-ignore
+        {name: 'camera'},
+      ),
+      navigator.permissions.query(
+        //@ts-ignore
+        {name: 'microphone'},
+      ),
+    ])
+      .then(([cameraResult, micResult]) => {
+        // Chrome
+        if (cameraResult.state !== 'granted' || micResult.state !== 'granted') {
+          setShowPopup(true);
+          const onChangeFunc = () => {
+            if (
+              cameraResult.state === 'granted' &&
+              micResult.state === 'granted'
+            )
+              setShowPopup(false);
+          };
+          micResult.onchange = onChangeFunc;
+          cameraResult.onchange = onChangeFunc;
+        }
+      })
+      .catch(e => {
+        // Firefox
+        setTimeout(() => {
+          setShowPopup(true);
+        }, 1000);
+      });
     //If permission already given it will take few milliseconds to resolve the promise. it will show the popup which not required. so added timeout
-    setTimeout(() => {
-      setShowPopup(true);
-    }, 500);
+    // setTimeout(() => {
+    //   setShowPopup(true);
+    // }, 1000);
   }, []);
   //todo hari update the modal message based the veritical
   return (
@@ -47,23 +85,13 @@ const PermissionHelper = () => {
           />
         </View>
         <View style={styles.modalContent}>
-          <Text style={styles.infoMessage1}>
-            {$config.AUDIO_ROOM
-              ? 'Allow access to microphone'
-              : 'Allow access to camera and microphone'}
-          </Text>
-          <Text style={styles.infoMessage2}>
-            Select
-            <Text style={styles.infoMessage2Highlight}>{` “Allow” `}</Text>
-            {$config.AUDIO_ROOM
-              ? 'for others to hear you'
-              : 'for others to see and hear you'}
-          </Text>
+          <Text style={styles.infoMessage1}>{heading}</Text>
+          <Text style={styles.infoMessage2}>{subheading}</Text>
           <TouchableOpacity
             onPress={() => {
               closePopup();
             }}>
-            <Text style={styles.dismissBtn}>Dismiss</Text>
+            <Text style={styles.dismissBtn}>{dismiss}</Text>
           </TouchableOpacity>
         </View>
       </Popup>

package/template/src/components/precall/PreCallSettings.tsx

@@ -47,6 +47,7 @@ const styles = StyleSheet.create({
     borderRadius: 4,
     padding: 0,
     width: '100%',
+    height: '95%',
   },
   containerStyle: {},
 });

package/template/src/components/precall/VideoFallback.tsx

@@ -0,0 +1,173 @@
+import {StyleSheet, Text, View, Linking, TouchableOpacity} from 'react-native';
+import React, {useEffect, useRef, useContext} from 'react';
+import {
+  isAndroid,
+  isIOS,
+  isWebInternal,
+  useResponsive,
+} from '../../utils/common';
+import {
+  LocalContext,
+  PermissionState,
+  ImageIcon as UiKitImageIcon,
+} from '../../../agora-rn-uikit';
+import ThemeConfig from '../../theme';
+import {useContent} from 'customization-api';
+import {usePreCall} from './usePreCall';
+import ImageIcon from '../../atoms/ImageIcon';
+import Spacer from '../../atoms/Spacer';
+import Toast from '../../../react-native-toast-message';
+import {useString} from '../../utils/useString';
+import {
+  permissionPopupErrorToastHeading,
+  permissionPopupErrorToastSubHeading,
+} from '../../language/default-labels/precallScreenLabels';
+
+const VideoFallback = () => {
+  const toastHeading = useString<boolean>(permissionPopupErrorToastHeading);
+  const toastSubHeading = useString<boolean>(
+    permissionPopupErrorToastSubHeading,
+  );
+
+  const {isCameraAvailable, isMicAvailable} = usePreCall();
+  const toastRef = useRef({isShown: false});
+  const local = useContext(LocalContext);
+  const requestCameraAndAudioPermission = () => {
+    try {
+      const URL =
+        'https://support.google.com/chrome/answer/2693767?hl=en&co=GENIE.Platform%3DDesktop';
+      if (isWebInternal()) {
+        window.open(URL, '_blank');
+      } else {
+        Linking.openURL(URL);
+      }
+    } catch (error) {
+      console.error(`Couldn't open the support url`);
+    }
+  };
+
+  const styles = useStyles();
+  useEffect(() => {
+    // camera not avaialble popup is not shown for native devices
+    if (isAndroid() || isIOS()) return;
+    if (
+      !(
+        isCameraAvailable ||
+        ($config.AUDIO_ROOM && isMicAvailable) ||
+        local.permissionStatus === PermissionState.NOT_REQUESTED ||
+        local.permissionStatus === PermissionState.REQUESTED
+      ) &&
+      toastRef.current.isShown === false
+    ) {
+      toastRef.current.isShown = true;
+      Toast.show({
+        type: 'warn',
+        text1: toastHeading($config.AUDIO_ROOM),
+        text2: toastSubHeading($config.AUDIO_ROOM),
+        visibilityTime: 10000,
+      });
+    }
+  }, [local, isCameraAvailable, isMicAvailable]);
+
+  return (
+    <View style={styles.fallbackRootContainer}>
+      {
+        // isCameraAvailable ||
+        // ($config.AUDIO_ROOM && isMicAvailable) ||
+        // local.permissionStatus === PermissionState.NOT_REQUESTED ||
+        // local.permissionStatus === PermissionState.REQUESTED
+        true ? (
+          <View style={styles.avatar}>
+            <UiKitImageIcon name={'profile'} />
+          </View>
+        ) : (
+          <View style={styles.fallbackContainer}>
+            <Text style={styles.infoText1}>
+              Can’t Find Your{$config.AUDIO_ROOM ? ' Microphone' : ' Camera'}
+            </Text>
+            <Text style={styles.infoText2}>
+              Check your system settings to make sure that a
+              {$config.AUDIO_ROOM ? ' microphone' : ' camera'} is available. If
+              not, plug one in and restart your browser.
+            </Text>
+            <Spacer size={33} />
+            <TouchableOpacity
+              style={{
+                flexDirection: 'row',
+                alignSelf: 'center',
+              }}
+              onPress={() => {
+                requestCameraAndAudioPermission();
+              }}>
+              <Text style={styles.retryBtn}>Learn More</Text>
+              <Spacer horizontal={true} size={4} />
+              <View style={{alignSelf: 'center'}}>
+                <ImageIcon
+                  iconType="plain"
+                  name={'link-share'}
+                  tintColor={$config.PRIMARY_ACTION_BRAND_COLOR}
+                />
+              </View>
+            </TouchableOpacity>
+            <Spacer size={23} />
+          </View>
+        )
+      }
+    </View>
+  );
+};
+
+export default VideoFallback;
+
+const useStyles = () => {
+  const getResponsiveValue = useResponsive();
+  return StyleSheet.create({
+    infoText1: {
+      fontFamily: ThemeConfig.FontFamily.sansPro,
+      fontWeight: '700',
+      fontSize: 20,
+      textAlign: 'center',
+      color: $config.FONT_COLOR,
+      paddingTop: 24,
+      paddingBottom: 12,
+      paddingHorizontal: 10,
+    },
+    infoText2: {
+      fontFamily: ThemeConfig.FontFamily.sansPro,
+      fontWeight: '400',
+      fontSize: ThemeConfig.FontSize.small,
+      textAlign: 'center',
+      color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled,
+      paddingHorizontal: getResponsiveValue(48),
+    },
+    fallbackRootContainer: {
+      flex: 1,
+      backgroundColor: $config.VIDEO_AUDIO_TILE_COLOR,
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderTopLeftRadius: 8,
+      borderTopRightRadius: 8,
+    },
+    fallbackContainer: {
+      minHeight: 200,
+      maxWidth: 440,
+      backgroundColor: $config.CARD_LAYER_4_COLOR,
+      borderRadius: ThemeConfig.BorderRadius.large,
+      justifyContent: 'center',
+      alignItems: 'center',
+      margin: 40,
+    },
+    retryBtn: {
+      fontFamily: ThemeConfig.FontFamily.sansPro,
+      fontWeight: '600',
+      fontSize: ThemeConfig.FontSize.normal,
+      color: $config.PRIMARY_ACTION_BRAND_COLOR,
+      alignSelf: 'center',
+    },
+    avatar: {
+      width: 100,
+      height: 100,
+      margin: 40,
+    },
+  });
+};

package/template/src/components/precall/VideoPreview.native.tsx

@@ -12,12 +12,10 @@
 
 import {useContent, useRtc} from 'customization-api';
 import React from 'react';
-import {View, StyleSheet} from 'react-native';
 import {MaxVideoView} from '../../../agora-rn-uikit';
-import PreCallLocalMute from './LocalMute';
-import {ImageIcon as UiKitImageIcon} from '../../../agora-rn-uikit';
+import VideoFallback from './VideoFallback';
 
-const VideoPreview: React.FC = () => {
+const VideoPreview = () => {
   const rtc = useRtc();
   rtc?.RtcEngineUnsafe?.startPreview();
 
@@ -29,52 +27,20 @@ const VideoPreview: React.FC = () => {
   }
 
   return (
-    <View style={styles.container}>
-      <View style={{flex: 1}}>
-        <MaxVideoView
-          user={defaultContent[maxUid]}
-          key={maxUid}
-          fallback={Fallback}
-          containerStyle={{
-            width: '100%',
-            height: '100%',
-            borderBottomLeftRadius: 8,
-            borderBottomRightRadius: 8,
-          }}
-        />
-      </View>
-      <PreCallLocalMute isMobileView={true} />
-    </View>
-  );
-};
-export default VideoPreview;
-
-const Fallback = () => {
-  return (
-    <View style={styles.fallbackRootContainer}>
-      <View style={styles.avatar}>
-        {/*TODO fix ttf file <ImageIcon name="profile" customSize={{width: 100, height: 100}} /> */}
-        <UiKitImageIcon name={'profile'} />
-      </View>
-    </View>
+    <MaxVideoView
+      user={defaultContent[maxUid]}
+      key={maxUid}
+      fallback={VideoFallback}
+      containerStyle={{
+        width: '100%',
+        height: '100%',
+        borderTopLeftRadius: 12,
+        borderTopRightRadius: 12,
+        overflow: 'hidden',
+      }}
+      isFullView={true}
+    />
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    position: 'relative',
-    justifyContent: 'space-between',
-  },
-  avatar: {
-    height: 100,
-    width: 100,
-  },
-  fallbackRootContainer: {
-    flex: 1,
-    backgroundColor: $config.VIDEO_AUDIO_TILE_COLOR,
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'relative',
-  },
-});
+export default VideoPreview;

package/template/src/components/precall/VideoPreview.tsx

@@ -10,180 +10,45 @@
 *********************************************
 */
 
-import React, {useContext, useState} from 'react';
-import {
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  TouchableOpacity,
-  Linking,
-} from 'react-native';
+import React from 'react';
+
 import {MaxVideoView} from '../../../agora-rn-uikit';
-import PreCallLocalMute from './LocalMute';
-import {
-  LocalContext,
-  PermissionState,
-  ImageIcon as UiKitImageIcon,
-} from '../../../agora-rn-uikit';
+
 import {useContent} from 'customization-api';
-import {usePreCall} from './usePreCall';
-import ImageIcon from '../../atoms/ImageIcon';
-import ThemeConfig from '../../theme';
-import Spacer from '../../atoms/Spacer';
-import {isMobileUA, isWebInternal, useResponsive} from '../../utils/common';
 
-const Fallback = () => {
-  const {isCameraAvailable, isMicAvailable} = usePreCall();
-  const local = useContext(LocalContext);
-  const requestCameraAndAudioPermission = () => {
-    try {
-      const URL =
-        'https://support.google.com/chrome/answer/2693767?hl=en&co=GENIE.Platform%3DDesktop';
-      if (isWebInternal()) {
-        window.open(URL, '_blank');
-      } else {
-        Linking.openURL(URL);
-      }
-    } catch (error) {
-      console.error(`Couldn't open the support url`);
-    }
-  };
-  const styles = useStyles();
-  return (
-    <View style={styles.fallbackRootContainer}>
-      {isCameraAvailable ||
-      ($config.AUDIO_ROOM && isMicAvailable) ||
-      local.permissionStatus === PermissionState.NOT_REQUESTED ||
-      local.permissionStatus === PermissionState.REQUESTED ? (
-        <View style={styles.avatar}>
-          <UiKitImageIcon name={'profile'} />
-        </View>
-      ) : (
-        <View style={styles.fallbackContainer}>
-          <Text style={styles.infoText1}>
-            Can’t Find Your{$config.AUDIO_ROOM ? ' Microphone' : ' Camera'}
-          </Text>
-          <Text style={styles.infoText2}>
-            Check your system settings to make sure that a
-            {$config.AUDIO_ROOM ? ' microphone' : ' camera'} is available. If
-            not, plug one in and restart your browser.
-          </Text>
-          <Spacer size={33} />
-          <TouchableOpacity
-            style={{
-              flexDirection: 'row',
-              alignSelf: 'center',
-            }}
-            onPress={() => {
-              requestCameraAndAudioPermission();
-            }}>
-            <Text style={styles.retryBtn}>Learn More</Text>
-            <Spacer horizontal={true} size={4} />
-            <View style={{alignSelf: 'center'}}>
-              <ImageIcon
-                iconType="plain"
-                name={'link-share'}
-                tintColor={$config.PRIMARY_ACTION_BRAND_COLOR}
-              />
-            </View>
-          </TouchableOpacity>
-          <Spacer size={23} />
-        </View>
-      )}
-    </View>
-  );
-};
+import VideoFallback from './VideoFallback';
+import {isMobileUA} from '../../utils/common';
 
 const VideoPreview = () => {
   const {defaultContent, activeUids} = useContent();
-
   const [maxUid] = activeUids;
+  const isMobileView = isMobileUA();
+
+  const mobileContainerStyle = {
+    borderRadius: 0,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+  };
 
   if (!maxUid) {
     return null;
   }
-  const styles = useStyles();
+
   return (
-    <View style={[styles.container]}>
-      <View
-        style={{
-          flex: 1,
-        }}>
-        <MaxVideoView
-          user={defaultContent[maxUid]}
-          key={maxUid}
-          fallback={Fallback}
-          containerStyle={{
-            minHeight: 200,
-            width: '100%',
-            height: '100%',
-            // borderTopLeftRadius: 4,
-            // borderTopRightRadius: 4,
-          }}
-        />
-      </View>
-      <PreCallLocalMute isMobileView={isMobileUA() ? true : false} />
-    </View>
+    <MaxVideoView
+      user={defaultContent[maxUid]}
+      key={maxUid}
+      fallback={VideoFallback}
+      containerStyle={{
+        minHeight: 200,
+        width: '100%',
+        height: '100%',
+        borderRadius: 8,
+        ...(isMobileView ? mobileContainerStyle : {}),
+      }}
+      isFullView={true}
+    />
   );
 };
-export default VideoPreview;
 
-const useStyles = () => {
-  const getResponsiveValue = useResponsive();
-  return StyleSheet.create({
-    infoText1: {
-      fontFamily: ThemeConfig.FontFamily.sansPro,
-      fontWeight: '700',
-      fontSize: 20,
-      textAlign: 'center',
-      color: $config.FONT_COLOR,
-      paddingTop: 24,
-      paddingBottom: 12,
-      paddingHorizontal: 10,
-    },
-    infoText2: {
-      fontFamily: ThemeConfig.FontFamily.sansPro,
-      fontWeight: '400',
-      fontSize: ThemeConfig.FontSize.small,
-      textAlign: 'center',
-      color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled,
-      paddingHorizontal: getResponsiveValue(48),
-    },
-    fallbackRootContainer: {
-      flex: 1,
-      backgroundColor: $config.VIDEO_AUDIO_TILE_COLOR,
-      justifyContent: 'center',
-      alignItems: 'center',
-      // borderTopLeftRadius: 4,
-      // borderTopRightRadius: 4,
-    },
-    fallbackContainer: {
-      minHeight: 200,
-      maxWidth: 440,
-      backgroundColor: $config.CARD_LAYER_4_COLOR,
-      borderRadius: ThemeConfig.BorderRadius.large,
-      justifyContent: 'center',
-      alignItems: 'center',
-      margin: 40,
-    },
-    retryBtn: {
-      fontFamily: ThemeConfig.FontFamily.sansPro,
-      fontWeight: '600',
-      fontSize: ThemeConfig.FontSize.normal,
-      color: $config.PRIMARY_ACTION_BRAND_COLOR,
-      alignSelf: 'center',
-    },
-    container: {
-      flex: 1,
-      position: 'relative',
-      justifyContent: 'space-between',
-      overflow: 'hidden',
-    },
-    avatar: {
-      width: 100,
-      height: 100,
-      margin: 40,
-    },
-  });
-};
+export default VideoPreview;

package/template/src/components/precall/index.tsx

@@ -16,6 +16,7 @@ import PreCallSelectDevice from './selectDevice';
 import PreCallJoinBtn, {PreCallJoinCallBtnProps} from './joinCallBtn';
 import PreCallTextInput from './textInput';
 import PreCallMeetingTitle from './meetingTitle';
+import JoinWaitingRoomBtn from './joinWaitingRoomBtn';
 export {
   PreCallLocalMuteComponentsArray,
   PreCallLocalMute,
@@ -24,5 +25,6 @@ export {
   PreCallJoinBtn,
   PreCallTextInput,
   PreCallMeetingTitle,
+  JoinWaitingRoomBtn,
 };
 export type {PreCallJoinCallBtnProps};

package/template/src/components/precall/joinCallBtn.native.tsx

@@ -15,9 +15,13 @@ import PrimaryButton from '../../atoms/PrimaryButton';
 import {usePreCall} from '../../components/precall/usePreCall';
 import {useString} from '../../utils/useString';
 import {ChannelProfile, PropsContext} from '../../../agora-rn-uikit';
-import {JoinRoomButtonTextInterface} from '../../language/default-labels/precallScreenLabels';
+import {
+  PrecallJoinBtnTextInterface,
+  precallJoinBtnText,
+} from '../../language/default-labels/precallScreenLabels';
 import {useRoomInfo} from '../room-info/useRoomInfo';
 import useGetName from '../../utils/useGetName';
+import {useUserPreference} from '../useUserPreference';
 
 export interface PreCallJoinCallBtnProps {
   render?: (
@@ -33,10 +37,11 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   const username = useGetName();
   const {isJoinDataFetched} = useRoomInfo();
   const joinRoomButton =
-    useString<JoinRoomButtonTextInterface>('joinRoomButton');
-
+    useString<PrecallJoinBtnTextInterface>(precallJoinBtnText);
+  const {saveName} = useUserPreference();
   const [buttonText, setButtonText] = React.useState(
     joinRoomButton({
+      waitingRoom: false,
       ready: isJoinDataFetched,
       role: $config.EVENT_MODE ? rtcProps.role : undefined,
     }),
@@ -45,6 +50,7 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
     if (rtcProps?.role) {
       setButtonText(
         joinRoomButton({
+          waitingRoom: false,
           ready: isJoinDataFetched,
           role: $config.EVENT_MODE ? rtcProps.role : undefined,
         }),
@@ -53,6 +59,7 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   }, [rtcProps?.role]);
 
   const onSubmit = () => {
+    saveName(username?.trim());
     setCallActive(true);
   };
 

package/template/src/components/precall/joinCallBtn.tsx

@@ -15,13 +15,17 @@ import PrimaryButton from '../../atoms/PrimaryButton';
 import {usePreCall} from '../../components/precall/usePreCall';
 import {useString} from '../../utils/useString';
 import {ChannelProfile, PropsContext} from '../../../agora-rn-uikit';
-import {JoinRoomButtonTextInterface} from '../../language/default-labels/precallScreenLabels';
+import {
+  PrecallJoinBtnTextInterface,
+  precallJoinBtnText,
+} from '../../language/default-labels/precallScreenLabels';
 import {useRoomInfo} from '../room-info/useRoomInfo';
 import useGetName from '../../utils/useGetName';
 import {useWakeLock} from '../../components/useWakeLock';
 import isMobileOrTablet from '../../utils/isMobileOrTablet';
 import {isWebInternal} from '../../utils/common';
 import useSetName from '../../utils/useSetName';
+import {useUserPreference} from '../useUserPreference';
 
 const audio = new Audio(
   'https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3',
@@ -42,11 +46,13 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   const setUsername = useSetName();
   const {isJoinDataFetched} = useRoomInfo();
   const {awake, request} = useWakeLock();
+  const {saveName} = useUserPreference();
   const joinRoomButton =
-    useString<JoinRoomButtonTextInterface>('joinRoomButton');
+    useString<PrecallJoinBtnTextInterface>(precallJoinBtnText);
 
   const [buttonText, setButtonText] = React.useState(
     joinRoomButton({
+      waitingRoom: false,
       ready: isJoinDataFetched,
       role: $config.EVENT_MODE ? rtcProps.role : undefined,
     }),
@@ -55,6 +61,8 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   const onSubmit = () => {
     setUsername(username.trim());
     setCallActive(true);
+    //updating name in the backend
+    saveName(username.trim());
     // Play a sound to avoid autoblocking in safari
     if (isWebInternal() || isMobileOrTablet()) {
       audio.volume = 0;
@@ -74,6 +82,7 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
     if (rtcProps?.role) {
       setButtonText(
         joinRoomButton({
+          waitingRoom: false,
           ready: isJoinDataFetched,
           role: $config.EVENT_MODE ? rtcProps.role : undefined,
         }),