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

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

@@ -0,0 +1,35 @@
+/*
+********************************************
+ 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, {useContext} from 'react';
+import {View} from 'react-native';
+import {MaxVideoView, RtcContext} from '../../../agora-rn-uikit';
+import useUserList from '../../utils/useUserList';
+
+const VideoPreview: React.FC = () => {
+  const rtc = useContext(RtcContext);
+  rtc?.RtcEngine?.startPreview();
+
+  const {renderList, renderPosition} = useUserList();
+  const [maxUid] = renderPosition;
+
+  if (!maxUid) {
+    return null;
+  }
+
+  return (
+    <View style={{borderRadius: 10, flex: 1}}>
+      <MaxVideoView user={renderList[maxUid]} key={maxUid} />
+    </View>
+  );
+};
+export default VideoPreview;

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

@@ -0,0 +1,33 @@
+/*
+********************************************
+ 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 from 'react';
+import {View} from 'react-native';
+import {MaxVideoView} from '../../../agora-rn-uikit';
+import useUserList from '../../utils/useUserList';
+
+const VideoPreview: React.FC = () => {
+  const {renderList, renderPosition} = useUserList();
+
+  const [maxUid] = renderPosition;
+
+  if (!maxUid) {
+    return null;
+  }
+
+  return (
+    <View style={{borderRadius: 10, flex: 1}}>
+      <MaxVideoView user={renderList[maxUid]} key={maxUid} />
+    </View>
+  );
+};
+export default VideoPreview;

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

@@ -0,0 +1,28 @@
+/*
+********************************************
+ 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 PreCallLocalMute, {PreCallLocalMuteComponentsArray} from './LocalMute';
+import PreCallVideoPreview from './VideoPreview';
+import PreCallSelectDevice from './selectDevice';
+import PreCallJoinBtn, {PreCallJoinCallBtnProps} from './joinCallBtn';
+import PreCallTextInput from './textInput';
+import PreCallMeetingTitle from './meetingTitle';
+export {
+  PreCallLocalMuteComponentsArray,
+  PreCallLocalMute,
+  PreCallVideoPreview,
+  PreCallSelectDevice,
+  PreCallJoinBtn,
+  PreCallTextInput,
+  PreCallMeetingTitle,
+};
+export type {PreCallJoinCallBtnProps};

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

@@ -0,0 +1,69 @@
+/*
+********************************************
+ 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, {useContext, useEffect} from 'react';
+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 {useMeetingInfo} from '../meeting-info/useMeetingInfo';
+import useGetName from '../../utils/useGetName';
+
+export interface PreCallJoinCallBtnProps {
+  render?: (
+    onPress: () => void,
+    title: string,
+    disabled: boolean,
+  ) => JSX.Element;
+}
+
+const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
+  const {rtcProps} = useContext(PropsContext);
+  const {setCallActive} = usePreCall();
+  const username = useGetName();
+  const {isJoinDataFetched} = useMeetingInfo();
+  const joinRoomButton =
+    useString<JoinRoomButtonTextInterface>('joinRoomButton');
+
+  const [buttonText, setButtonText] = React.useState(
+    joinRoomButton({
+      ready: isJoinDataFetched,
+      role: $config.EVENT_MODE ? rtcProps.role : undefined,
+    }),
+  );
+  useEffect(() => {
+    if (rtcProps?.role) {
+      setButtonText(
+        joinRoomButton({
+          ready: isJoinDataFetched,
+          role: $config.EVENT_MODE ? rtcProps.role : undefined,
+        }),
+      );
+    }
+  }, [rtcProps?.role]);
+
+  const onSubmit = () => {
+    setCallActive(true);
+  };
+
+  const title = buttonText;
+  const onPress = () => onSubmit();
+  const disabled = !isJoinDataFetched || username === '';
+  return props?.render ? (
+    props.render(onPress, title, disabled)
+  ) : (
+    <PrimaryButton onPress={onPress} disabled={disabled} text={title} />
+  );
+};
+
+export default JoinCallBtn;

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

@@ -0,0 +1,91 @@
+/*
+********************************************
+ 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, {useContext, useEffect} from 'react';
+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 {useMeetingInfo} from '../meeting-info/useMeetingInfo';
+import useGetName from '../../utils/useGetName';
+import {useWakeLock} from '../../components/useWakeLock';
+import isMobileOrTablet from '../../utils/isMobileOrTablet';
+import {isWeb} from '../../utils/common';
+
+const audio = new Audio(
+  'https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3',
+);
+
+export interface PreCallJoinCallBtnProps {
+  render?: (
+    onPress: () => void,
+    title: string,
+    disabled: boolean,
+  ) => JSX.Element;
+}
+
+const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
+  const {rtcProps} = useContext(PropsContext);
+  const {setCallActive} = usePreCall();
+  const username = useGetName();
+  const {isJoinDataFetched} = useMeetingInfo();
+  const {awake, request} = useWakeLock();
+  const joinRoomButton =
+    useString<JoinRoomButtonTextInterface>('joinRoomButton');
+
+  const [buttonText, setButtonText] = React.useState(
+    joinRoomButton({
+      ready: isJoinDataFetched,
+      role: $config.EVENT_MODE ? rtcProps.role : undefined,
+    }),
+  );
+
+  const onSubmit = () => {
+    setCallActive(true);
+    // Play a sound to avoid autoblocking in safari
+    if (isWeb || isMobileOrTablet()) {
+      audio.volume = 0;
+      audio.play().then(() => {
+        // pause directly once played
+        audio.pause();
+      });
+    }
+    // Avoid Sleep only on mobile browsers
+    if (isWeb && isMobileOrTablet() && !awake) {
+      // Request wake lock
+      request();
+    }
+  };
+
+  useEffect(() => {
+    if (rtcProps?.role) {
+      setButtonText(
+        joinRoomButton({
+          ready: isJoinDataFetched,
+          role: $config.EVENT_MODE ? rtcProps.role : undefined,
+        }),
+      );
+    }
+  }, [rtcProps?.role]);
+
+  const title = buttonText;
+  const onPress = () => onSubmit();
+  const disabled = !isJoinDataFetched || username === '';
+  return props?.render ? (
+    props.render(onPress, title, disabled)
+  ) : (
+    <PrimaryButton onPress={onPress} disabled={disabled} text={title} />
+  );
+};
+
+export default JoinCallBtn;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import {Text, StyleSheet, View} from 'react-native';
+import {useMeetingInfo} from '../meeting-info/useMeetingInfo';
+
+const MeetingTitle: React.FC = () => {
+  const {meetingTitle} = useMeetingInfo();
+  return (
+    <>
+      <Text style={[style.titleHeading, {color: $config.PRIMARY_COLOR}]}>
+        {meetingTitle}
+      </Text>
+      <View style={{height: 50}} />
+    </>
+  );
+};
+
+export default MeetingTitle;
+
+const style = StyleSheet.create({
+  titleHeading: {
+    fontSize: 28,
+    fontWeight: '700',
+    textAlign: 'center',
+    color: $config.SECONDARY_FONT_COLOR,
+  },
+});

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

@@ -0,0 +1,46 @@
+/*
+********************************************
+ 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 from 'react';
+import {View, StyleSheet, Text} from 'react-native';
+import {isWeb} from '../../utils/common';
+import SelectDevice from '../../subComponents/SelectDevice';
+import {useString} from '../../utils/useString';
+
+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: isWeb ? '25vw' : 'auto',
+          marginVertical: 30,
+        }}>
+        <SelectDevice />
+      </View>
+    </>
+  );
+};
+
+export default selectDevice;
+
+const style = StyleSheet.create({
+  subHeading: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: $config.PRIMARY_FONT_COLOR,
+  },
+});

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

@@ -0,0 +1,43 @@
+/*
+********************************************
+ 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 from 'react';
+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';
+
+const PreCallTextInput: React.FC = () => {
+  //commented for v1 release
+  // const userNamePlaceholder = useString('userNamePlaceholder')();
+  // const fetchingNamePlaceholder = useString('fetchingNamePlaceholder')();
+  const userNamePlaceholder = 'Display name*';
+  const fetchingNamePlaceholder = 'Getting name...';
+  const username = useGetName();
+  const setUsername = useSetName();
+  const {isJoinDataFetched} = useMeetingInfo();
+
+  return (
+    <TextInput
+      value={username}
+      onChangeText={(text) => setUsername(text ? text.trim() : '')}
+      onSubmitEditing={() => {}}
+      placeholder={
+        isJoinDataFetched ? userNamePlaceholder : fetchingNamePlaceholder
+      }
+      editable={isJoinDataFetched}
+    />
+  );
+};
+
+export default PreCallTextInput;

package/template/src/components/precall/usePreCall.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, {createContext} from 'react';
+import {createHook} from 'fpe-implementation';
+import {ApolloError} from '@apollo/client';
+
+export interface PreCallContextInterface {
+  callActive: boolean;
+  setCallActive: React.Dispatch<React.SetStateAction<boolean>>;
+  error?: ApolloError;
+}
+
+const PreCallContext = createContext<PreCallContextInterface>({
+  callActive: false,
+  setCallActive: () => {},
+});
+
+interface PreCallProviderProps {
+  value: PreCallContextInterface;
+  children: React.ReactNode;
+}
+
+const PreCallProvider = (props: PreCallProviderProps) => {
+  return (
+    <PreCallContext.Provider value={{...props.value}}>
+      {props.children}
+    </PreCallContext.Provider>
+  );
+};
+const usePreCall = createHook(PreCallContext);
+
+export {PreCallProvider, usePreCall};

package/template/src/components/styles.ts

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {Platform} from 'react-native';
+import {isWeb} from '../utils/common';
 
 const styles = {
   temp: {
@@ -19,8 +19,8 @@ const styles = {
     borderRadius: 15,
   },
   bottomBar: {
-    flex: Platform.OS === 'web' ? 1.3 : 1.6,
-    paddingHorizontal: Platform.OS === 'web' ? '20%' : '1%',
+    flex: isWeb ? 1.3 : 1.6,
+    paddingHorizontal: isWeb ? '20%' : '1%',
     backgroundColor: $config.SECONDARY_FONT_COLOR + 80,
     flexDirection: 'row',
     justifyContent: 'space-evenly',
@@ -41,6 +41,23 @@ const styles = {
     alignItems: 'center',
     justifyContent: 'center',
   },
+  localButtonWithoutBG: {
+    borderRadius: 23,
+    borderColor: $config.PRIMARY_COLOR,
+    borderWidth: 0,
+    width: 40,
+    height: 40,
+    padding: 3,
+    display: 'flex',
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  fullWidthButton: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'contain',
+  },
   endCall: {
     backgroundColor: $config.SECONDARY_FONT_COLOR, //'#fff',
     borderRadius: 23,