agora-appbuilder-core 3.0.9 → 3.0.10

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

@@ -10,12 +10,92 @@
 *********************************************
 */
 
-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 {useRender} 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>
+  );
+};
 
-const VideoPreview: React.FC = () => {
+const VideoPreview = () => {
   const {renderList, activeUids} = useRender();
 
   const [maxUid] = activeUids;
@@ -23,11 +103,87 @@ const VideoPreview: React.FC = () => {
   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={renderList[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.tsx

@@ -21,6 +21,7 @@ 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,6 +39,7 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   const {rtcProps} = useContext(PropsContext);
   const {setCallActive} = usePreCall();
   const username = useGetName();
+  const setUsername = useSetName();
   const {isJoinDataFetched} = useMeetingInfo();
   const {awake, request} = useWakeLock();
   const 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 {Text, StyleSheet, View, TextStyle} from 'react-native';
+import {trimText} from '../../utils/common';
+import ThemeConfig from '../../theme';
 import {useMeetingInfo} from '../meeting-info/useMeetingInfo';
 
-const MeetingTitle: React.FC = () => {
+export interface MeetingTitleProps {
+  textStyle?: TextStyle;
+}
+const MeetingTitle = (props?: MeetingTitleProps) => {
   const {
     data: {meetingTitle},
   } = useMeetingInfo();
   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 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 {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

@@ -17,11 +17,27 @@ 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 {

package/template/src/components/styles.ts

@@ -9,19 +9,22 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import ThemeConfig from '../theme';
 import {isWebInternal} from '../utils/common';
 
 const styles = {
   temp: {
     width: '100%',
     height: '100%',
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    borderRadius: 15,
+    borderRadius: 0,
+    borderWidth: 0,
   },
   bottomBar: {
     flex: isWebInternal() ? 1.3 : 1.6,
     paddingHorizontal: isWebInternal() ? '20%' : '1%',
-    backgroundColor: $config.SECONDARY_FONT_COLOR + 80,
+    backgroundColor:
+      $config.SECONDARY_ACTION_COLOR + hexadecimalTransparency['80%'],
     flexDirection: 'row',
     justifyContent: 'space-evenly',
     position: 'relative',
@@ -29,21 +32,30 @@ const styles = {
     bottom: 0,
   },
   localButton: {
-    backgroundColor: $config.SECONDARY_FONT_COLOR, //'#fff',
-    borderRadius: 23,
-    borderColor: $config.PRIMARY_COLOR,
-    borderWidth: 0,
-    width: 40,
-    height: 40,
-    padding: 3,
     display: 'flex',
     alignSelf: 'center',
     alignItems: 'center',
     justifyContent: 'center',
   },
+  actionSheetButton: {
+    width: 25,
+    height: 25,
+  },
+  localButtonSmall: {
+    display: 'flex',
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  localButtonText: {
+    fontFamily: 'Source Sans Pro',
+    fontSize: 12,
+    marginTop: 4,
+    fontWeight: '400',
+  },
   localButtonWithoutBG: {
     borderRadius: 23,
-    borderColor: $config.PRIMARY_COLOR,
+    borderColor: $config.PRIMARY_ACTION_BRAND_COLOR,
     borderWidth: 0,
     width: 40,
     height: 40,
@@ -59,15 +71,24 @@ const styles = {
     resizeMode: 'contain',
   },
   endCall: {
-    backgroundColor: $config.SECONDARY_FONT_COLOR, //'#fff',
-    borderRadius: 23,
-    borderColor: $config.PRIMARY_COLOR,
-    borderWidth: 0,
-    width: 40,
-    height: 40,
-    alignSelf: 'center',
-    alignItems: 'center',
+    width: 20,
+    height: 20,
+  },
+  endCallContainer: {
+    flexDirection: 'row',
     justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    backgroundColor: $config.SEMANTIC_ERROR,
+    borderRadius: 8,
+  },
+  endCallText: {
+    color: $config.PRIMARY_ACTION_TEXT_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: 12,
+    marginLeft: 8,
+    fontWeight: '700',
   },
   remoteButton: {
     width: 25,
@@ -80,7 +101,7 @@ const styles = {
     borderRightWidth: 0,
     borderLeftWidth: 0,
     marginHorizontal: 0,
-    backgroundColor: $config.SECONDARY_FONT_COLOR, //'#fff',
+    backgroundColor: $config.SECONDARY_ACTION_COLOR, //'#fff',
   },
   liveStreamHostControlBtns: {
     width: 20,
@@ -93,7 +114,7 @@ const styles = {
     borderRightWidth: 0,
     borderLeftWidth: 0,
     marginHorizontal: 0,
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
+    backgroundColor: $config.SECONDARY_ACTION_COLOR,
   },
   minCloseBtn: {
     alignItems: 'center',

package/template/src/components/useShareLink.tsx

@@ -14,7 +14,6 @@ import {createHook} from 'customization-implementation';
 import React from 'react';
 import {useString} from '../utils/useString';
 import isSDKCheck from '../utils/isSDK';
-import Toast from '../../react-native-toast-message';
 import {useMeetingInfo} from './meeting-info/useMeetingInfo';
 import platform from '../subComponents/Platform';
 import {MeetingInviteInterface} from '../language/default-labels/videoCallScreenLabels';
@@ -124,31 +123,31 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
       if (isHost) {
         if (isSeparateHostLink) {
           //seperate link for host and attendee
-          inviteContent += `Meeting - ${meetingName}\nURL for Attendee: ${url?.attendee}\nURL for Host: ${url?.host}`;
+          inviteContent += `Meeting: ${meetingName}\n\nAttendee Link:\n${url?.attendee}\n\nHost Link:\n${url?.host}`;
         } else {
           //single link for everyone
-          inviteContent += `Meeting - ${meetingName}\nMeeting URL: ${url?.host}`;
+          inviteContent += `Meeting: ${meetingName}\n\nMeeting Link:\n${url?.host}`;
         }
       }
       //for attendee
       else {
-        inviteContent += `Meeting - ${meetingName}\nURL for Attendee: ${url?.attendee}`;
+        inviteContent += `Meeting: ${meetingName}\n\nAttendee Link:\n${url?.attendee}`;
       }
     } else {
       if (isHost) {
         if (isSeparateHostLink) {
-          inviteContent += `Meeting - ${meetingName}\nAttendee Meeting ID: ${id?.attendee}\nHost Meeting ID: ${id?.host}`;
+          inviteContent += `Meeting: ${meetingName}\n\nAttendee Meeting ID:\n${id?.attendee}\n\nHost Meeting ID:\n${id?.host}`;
         } else {
-          inviteContent += `Meeting - ${meetingName}\nMeeting ID: ${id?.host}`;
+          inviteContent += `Meeting: ${meetingName}\n\nMeeting ID:\n${id?.host}`;
         }
       } else {
         //copy this label on videocall screen
-        inviteContent += `Meeting - ${meetingName}\nAttendee Meeting ID: ${id?.attendee}`;
+        inviteContent += `Meeting: ${meetingName}\n\nAttendee Meeting ID:\n${id?.attendee}`;
       }
     }
     // Adding pstn data into meeting data if present
     if (pstn?.number && pstn?.pin) {
-      inviteContent += `\nPSTN Number: ${pstn.number}\nPSTN Pin: ${pstn.pin}`;
+      inviteContent += `\n\nPSTN Number:\n${pstn.number}\n\nPSTN Pin:\n${pstn.pin}`;
     }
     return inviteContent;
   };
@@ -240,7 +239,10 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
     return stringToCopy;
   };
 
-  const copyShareLinkToClipboard = (input: SHARE_LINK_CONTENT_TYPE) => {
+  const copyShareLinkToClipboard = (
+    input: SHARE_LINK_CONTENT_TYPE,
+    callbackFn?: () => void,
+  ) => {
     let stringToCopy = '';
     switch (input) {
       case SHARE_LINK_CONTENT_TYPE.MEETING_INVITE:
@@ -258,11 +260,7 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
         break;
     }
     Clipboard.setString(stringToCopy);
-    Toast.show({
-      type: 'success',
-      text1: copiedToClipboardText,
-      visibilityTime: 1000,
-    });
+    callbackFn && callbackFn();
   };
 
   return (

package/template/src/components/useToast.tsx

@@ -0,0 +1,41 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import React, {useState} from 'react';
+import {createHook} from 'customization-implementation';
+
+interface ToastContextInterface {
+  isActionSheetVisible: boolean;
+  setActionSheetVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const ToastContext = React.createContext<ToastContextInterface>({
+  isActionSheetVisible: false,
+  setActionSheetVisible: () => {},
+});
+
+const ToastProvider = (props: {children: React.ReactNode}) => {
+  const [isActionSheetVisible, setActionSheetVisible] = useState(false);
+
+  return (
+    <ToastContext.Provider
+      value={{
+        isActionSheetVisible,
+        setActionSheetVisible,
+      }}>
+      {props.children}
+    </ToastContext.Provider>
+  );
+};
+
+const useToast = createHook(ToastContext);
+
+export {useToast, ToastContext, ToastProvider};