agora-appbuilder-core 3.0.9 → 4.0.0-api.1

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

@@ -10,24 +10,180 @@
 *********************************************
 */
 
-import {useRender} from 'customization-api';
-import React from 'react';
-import {View} from 'react-native';
+import React, {useContext, useState} from 'react';
+import {
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  TouchableOpacity,
+  Linking,
+} from 'react-native';
 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 VideoPreview: React.FC = () => {
-  const {renderList, activeUids} = useRender();
+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>
+  );
+};
+
+const VideoPreview = () => {
+  const {defaultContent, activeUids} = useContent();
 
   const [maxUid] = activeUids;
 
   if (!maxUid) {
     return null;
   }
-
+  const styles = useStyles();
   return (
-    <View style={{borderRadius: 10, flex: 1}}>
-      <MaxVideoView user={renderList[maxUid]} key={maxUid} />
+    <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>
   );
 };
 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,
+    },
+  });
+};

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

@@ -16,7 +16,7 @@ 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 {useMeetingInfo} from '../meeting-info/useMeetingInfo';
+import {useRoomInfo} from '../room-info/useRoomInfo';
 import useGetName from '../../utils/useGetName';
 
 export interface PreCallJoinCallBtnProps {
@@ -31,7 +31,7 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   const {rtcProps} = useContext(PropsContext);
   const {setCallActive} = usePreCall();
   const username = useGetName();
-  const {isJoinDataFetched} = useMeetingInfo();
+  const {isJoinDataFetched} = useRoomInfo();
   const joinRoomButton =
     useString<JoinRoomButtonTextInterface>('joinRoomButton');
 

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

@@ -16,11 +16,12 @@ 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 {useMeetingInfo} from '../meeting-info/useMeetingInfo';
+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';
 
 const audio = new Audio(
   'https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3',
@@ -38,7 +39,8 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   const {rtcProps} = useContext(PropsContext);
   const {setCallActive} = usePreCall();
   const username = useGetName();
-  const {isJoinDataFetched} = useMeetingInfo();
+  const setUsername = useSetName();
+  const {isJoinDataFetched} = useRoomInfo();
   const {awake, request} = useWakeLock();
   const joinRoomButton =
     useString<JoinRoomButtonTextInterface>('joinRoomButton');
@@ -51,6 +53,7 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   );
 
   const onSubmit = () => {
+    setUsername(username.trim());
     setCallActive(true);
     // Play a sound to avoid autoblocking in safari
     if (isWebInternal() || isMobileOrTablet()) {
@@ -80,11 +83,21 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
 
   const title = buttonText;
   const onPress = () => onSubmit();
-  const disabled = !isJoinDataFetched || username === '';
+  const disabled = !isJoinDataFetched || username?.trim() === '';
   return props?.render ? (
     props.render(onPress, title, disabled)
   ) : (
-    <PrimaryButton onPress={onPress} disabled={disabled} text={title} />
+    <PrimaryButton
+      // iconName={'video-on'}
+      onPress={onPress}
+      disabled={disabled}
+      text={title}
+      containerStyle={{
+        minWidth: '100%',
+        paddingHorizontal: 10,
+      }}
+      textStyle={{textAlign: 'center'}}
+    />
   );
 };
 

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

@@ -1,18 +1,20 @@
 import React from 'react';
-import {Text, StyleSheet, View} from 'react-native';
-import {useMeetingInfo} from '../meeting-info/useMeetingInfo';
+import {Text, StyleSheet, View, TextStyle} from 'react-native';
+import {trimText} from '../../utils/common';
+import ThemeConfig from '../../theme';
+import {useRoomInfo} from '../room-info/useRoomInfo';
 
-const MeetingTitle: React.FC = () => {
+export interface MeetingTitleProps {
+  textStyle?: TextStyle;
+}
+const MeetingTitle = (props?: MeetingTitleProps) => {
   const {
     data: {meetingTitle},
-  } = useMeetingInfo();
+  } = useRoomInfo();
   return (
-    <>
-      <Text style={[style.titleHeading, {color: $config.PRIMARY_COLOR}]}>
-        {meetingTitle}
-      </Text>
-      <View style={{height: 50}} />
-    </>
+    <Text style={[style.titleHeading, props?.textStyle ? props.textStyle : {}]}>
+      {trimText(meetingTitle)}
+    </Text>
   );
 };
 
@@ -20,9 +22,10 @@ export default MeetingTitle;
 
 const style = StyleSheet.create({
   titleHeading: {
-    fontSize: 28,
-    fontWeight: '700',
-    textAlign: 'center',
-    color: $config.SECONDARY_FONT_COLOR,
+    fontSize: ThemeConfig.FontSize.normal,
+    lineHeight: ThemeConfig.FontSize.normal,
+    fontWeight: '600',
+    color: $config.FONT_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
   },
 });

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

@@ -20,27 +20,7 @@ const selectDevice: React.FC = () => {
   //commented for v1 release
   //const selectInputDeviceLabel = useString('selectInputDeviceLabel')();
   const selectInputDeviceLabel = 'Select Input Device';
-  return (
-    <>
-      <Text style={style.subHeading}>{selectInputDeviceLabel}</Text>
-      <View
-        style={{
-          flex: 1,
-          maxWidth: isWebInternal() ? '25vw' : 'auto',
-          marginVertical: 30,
-        }}>
-        <SelectDevice />
-      </View>
-    </>
-  );
+  return <SelectDevice />;
 };
 
 export default selectDevice;
-
-const style = StyleSheet.create({
-  subHeading: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: $config.PRIMARY_FONT_COLOR,
-  },
-});

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

@@ -11,29 +11,57 @@
 */
 
 import React from 'react';
+import {TextStyle} from 'react-native';
 import TextInput from '../../atoms/TextInput';
 import {useString} from '../../utils/useString';
-import {useMeetingInfo} from '../meeting-info/useMeetingInfo';
+import {useRoomInfo} from '../room-info/useRoomInfo';
 import useSetName from '../../utils/useSetName';
 import useGetName from '../../utils/useGetName';
+import Input from '../../atoms/Input';
+import ThemeConfig from '../../theme';
+import {maxInputLimit} from '../../utils/common';
 
-const PreCallTextInput: React.FC = () => {
+export interface PreCallTextInputProps {
+  labelStyle?: TextStyle;
+  textInputStyle?: TextStyle;
+  isDesktop?: boolean;
+}
+const PreCallTextInput: React.FC = (props?: PreCallTextInputProps) => {
   //commented for v1 release
   // const userNamePlaceholder = useString('userNamePlaceholder')();
   // const fetchingNamePlaceholder = useString('fetchingNamePlaceholder')();
-  const userNamePlaceholder = 'Display name*';
+  const userNamePlaceholder = 'Enter Your Name';
   const fetchingNamePlaceholder = 'Getting name...';
   const username = useGetName();
   const setUsername = useSetName();
-  const {isJoinDataFetched} = useMeetingInfo();
+  const {isJoinDataFetched} = useRoomInfo();
+  const {isDesktop = false} = props;
 
   return (
-    <TextInput
+    <Input
+      maxLength={maxInputLimit}
+      label={isDesktop ? ($config.EVENT_MODE ? 'Your Name' : 'Joining as') : ''}
+      labelStyle={
+        props?.labelStyle
+          ? props.labelStyle
+          : {
+              fontFamily: ThemeConfig.FontFamily.sansPro,
+              fontWeight: '400',
+              fontSize: ThemeConfig.FontSize.small,
+              lineHeight: ThemeConfig.FontSize.small,
+              color: $config.FONT_COLOR,
+            }
+      }
       value={username}
+      autoFocus
       onChangeText={(text) => setUsername(text ? text : '')}
       onSubmitEditing={() => {}}
       placeholder={
-        isJoinDataFetched ? userNamePlaceholder : fetchingNamePlaceholder
+        isJoinDataFetched
+          ? $config.EVENT_MODE
+            ? 'Luke Skywalker'
+            : userNamePlaceholder
+          : fetchingNamePlaceholder
       }
       editable={isJoinDataFetched}
     />

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

@@ -9,19 +9,39 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {createContext} from 'react';
+import React, {createContext, useContext, useEffect} from 'react';
 import {createHook} from 'customization-implementation';
 import {ApolloError} from '@apollo/client';
+import {SdkApiContext} from '../SdkApiContext';
+import {useRoomInfo} from '../room-info/useRoomInfo';
+import SDKEvents from '../../utils/SdkEvents';
+import DeviceContext from '../DeviceContext';
 
 export interface PreCallContextInterface {
   callActive: boolean;
   setCallActive: React.Dispatch<React.SetStateAction<boolean>>;
   error?: ApolloError;
+  isCameraAvailable?: boolean;
+  setCameraAvailable: React.Dispatch<React.SetStateAction<boolean>>;
+  isMicAvailable?: boolean;
+  setMicAvailable: React.Dispatch<React.SetStateAction<boolean>>;
+  isSpeakerAvailable?: boolean;
+  setSpeakerAvailable: React.Dispatch<React.SetStateAction<boolean>>;
+  isPermissionRequested: boolean;
+  setIsPermissionRequested: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const PreCallContext = createContext<PreCallContextInterface>({
   callActive: false,
   setCallActive: () => {},
+  isCameraAvailable: false,
+  isMicAvailable: false,
+  isSpeakerAvailable: false,
+  setCameraAvailable: () => {},
+  setMicAvailable: () => {},
+  setSpeakerAvailable: () => {},
+  isPermissionRequested: false,
+  setIsPermissionRequested: () => {},
 });
 
 interface PreCallProviderProps {
@@ -30,6 +50,24 @@ interface PreCallProviderProps {
 }
 
 const PreCallProvider = (props: PreCallProviderProps) => {
+  const {join} = useContext(SdkApiContext);
+  const roomInfo = useRoomInfo();
+  const {deviceList} = useContext(DeviceContext);
+
+  useEffect(() => {
+    if (join.phrase) {
+      //@ts-ignore
+      join?.promise?.res([
+        roomInfo.data,
+        () => {
+          props.value.setCallActive(true);
+        },
+      ]);
+    }
+
+    SDKEvents.emit('ready-to-join', roomInfo.data.meetingTitle, deviceList);
+  }, []);
+
   return (
     <PreCallContext.Provider value={{...props.value}}>
       {props.children}

package/template/src/components/{meeting-info/useMeetingInfo.tsx → room-info/useRoomInfo.tsx}

@@ -12,7 +12,7 @@
 import React, {createContext} from 'react';
 import {createHook} from 'customization-implementation';
 import {UidType} from '../../../agora-rn-uikit';
-export interface MeetingInfoContextInterface {
+export interface RoomInfoContextInterface {
   isJoinDataFetched?: boolean;
   data?: {
     isHost: boolean;
@@ -36,7 +36,31 @@ export interface MeetingInfoContextInterface {
   };
 }
 
-export const MeetingInfoDefaultValue: MeetingInfoContextInterface = {
+export const validateMeetingInfoData = (
+  roomInfo: Partial<RoomInfoContextInterface['data']>,
+) => {
+  const {
+    channel,
+    encryptionSecret,
+    rtmToken,
+    screenShareToken,
+    screenShareUid,
+    token,
+    uid,
+  } = roomInfo;
+  if ($config.ENCRYPTION_ENABLED && !encryptionSecret) {
+    return false;
+  }
+  if ($config.SCREEN_SHARING && (!screenShareToken || !screenShareUid)) {
+    return false;
+  }
+  if (!channel || !rtmToken || !token || !uid) {
+    return false;
+  }
+  return true;
+};
+
+export const RoomInfoDefaultValue: RoomInfoContextInterface = {
   isJoinDataFetched: false,
   data: {
     isHost: false,
@@ -48,23 +72,23 @@ export const MeetingInfoDefaultValue: MeetingInfoContextInterface = {
   },
 };
 
-const MeetingInfoContext = createContext(MeetingInfoDefaultValue);
+const RoomInfoContext = createContext(RoomInfoDefaultValue);
 
-interface MeetingInfoProviderProps {
+interface RoomInfoProviderProps {
   children: React.ReactNode;
-  value: MeetingInfoContextInterface;
+  value: RoomInfoContextInterface;
 }
 
-const MeetingInfoProvider = (props: MeetingInfoProviderProps) => {
+const RoomInfoProvider = (props: RoomInfoProviderProps) => {
   return (
-    <MeetingInfoContext.Provider value={{...props.value}}>
+    <RoomInfoContext.Provider value={{...props.value}}>
       {props.children}
-    </MeetingInfoContext.Provider>
+    </RoomInfoContext.Provider>
   );
 };
 /**
  * The MeetingInfo app state contains information about the active meeting.
  */
-const useMeetingInfo = createHook(MeetingInfoContext);
+const useRoomInfo = createHook(RoomInfoContext);
 
-export {MeetingInfoProvider, useMeetingInfo};
+export {RoomInfoProvider, useRoomInfo};

package/template/src/components/{meeting-info/useSetMeetingInfo.tsx → room-info/useSetRoomInfo.tsx}

@@ -11,28 +11,28 @@
 */
 import React, {createContext, SetStateAction} from 'react';
 import {createHook} from 'customization-implementation';
-import {MeetingInfoContextInterface} from './useMeetingInfo';
+import {RoomInfoContextInterface} from './useRoomInfo';
 
-export interface SetMeetingInfoContextInterface {
-  setMeetingInfo: React.Dispatch<SetStateAction<MeetingInfoContextInterface>>;
+export interface SetRoomInfoContextInterface {
+  setRoomInfo: React.Dispatch<SetStateAction<RoomInfoContextInterface>>;
 }
 
-const SetMeetingInfoContext = createContext<SetMeetingInfoContextInterface>({
-  setMeetingInfo: () => {},
+const SetRoomInfoContext = createContext<SetRoomInfoContextInterface>({
+  setRoomInfo: () => {},
 });
 
-interface SetMeetingInfoProviderProps {
+interface SetRoomInfoProviderProps {
   children: React.ReactNode;
-  value: SetMeetingInfoContextInterface;
+  value: SetRoomInfoContextInterface;
 }
 
-const SetMeetingInfoProvider = (props: SetMeetingInfoProviderProps) => {
+const SetRoomInfoProvider = (props: SetRoomInfoProviderProps) => {
   return (
-    <SetMeetingInfoContext.Provider value={{...props.value}}>
+    <SetRoomInfoContext.Provider value={{...props.value}}>
       {props.children}
-    </SetMeetingInfoContext.Provider>
+    </SetRoomInfoContext.Provider>
   );
 };
-const useSetMeetingInfo = createHook(SetMeetingInfoContext);
+const useSetRoomInfo = createHook(SetRoomInfoContext);
 
-export {SetMeetingInfoProvider, useSetMeetingInfo};
+export {SetRoomInfoProvider, useSetRoomInfo};