agora-appbuilder-core 3.0.10 → 3.0.12

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

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

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

@@ -20,7 +20,27 @@ const selectDevice: React.FC = () => {
   //commented for v1 release
   //const selectInputDeviceLabel = useString('selectInputDeviceLabel')();
   const selectInputDeviceLabel = 'Select Input Device';
-  return <SelectDevice />;
+  return (
+    <>
+      <Text style={style.subHeading}>{selectInputDeviceLabel}</Text>
+      <View
+        style={{
+          flex: 1,
+          maxWidth: isWebInternal() ? '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

@@ -11,57 +11,29 @@
 */
 
 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';
 
-export interface PreCallTextInputProps {
-  labelStyle?: TextStyle;
-  textInputStyle?: TextStyle;
-  isDesktop?: boolean;
-}
-const PreCallTextInput: React.FC = (props?: PreCallTextInputProps) => {
+const PreCallTextInput: React.FC = () => {
   //commented for v1 release
   // const userNamePlaceholder = useString('userNamePlaceholder')();
   // const fetchingNamePlaceholder = useString('fetchingNamePlaceholder')();
-  const userNamePlaceholder = 'Enter Your Name';
+  const userNamePlaceholder = 'Display name*';
   const fetchingNamePlaceholder = 'Getting name...';
   const username = useGetName();
   const setUsername = useSetName();
   const {isJoinDataFetched} = useMeetingInfo();
-  const {isDesktop = false} = props;
 
   return (
-    <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,
-            }
-      }
+    <TextInput
       value={username}
-      autoFocus
       onChangeText={(text) => setUsername(text ? text : '')}
       onSubmitEditing={() => {}}
       placeholder={
-        isJoinDataFetched
-          ? $config.EVENT_MODE
-            ? 'Luke Skywalker'
-            : userNamePlaceholder
-          : fetchingNamePlaceholder
+        isJoinDataFetched ? userNamePlaceholder : fetchingNamePlaceholder
       }
       editable={isJoinDataFetched}
     />

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

@@ -17,27 +17,11 @@ 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,22 +9,19 @@
  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%',
-    borderRadius: 0,
-    borderWidth: 0,
+    backgroundColor: $config.SECONDARY_FONT_COLOR,
+    borderRadius: 15,
   },
   bottomBar: {
     flex: isWebInternal() ? 1.3 : 1.6,
     paddingHorizontal: isWebInternal() ? '20%' : '1%',
-    backgroundColor:
-      $config.SECONDARY_ACTION_COLOR + hexadecimalTransparency['80%'],
+    backgroundColor: $config.SECONDARY_FONT_COLOR + 80,
     flexDirection: 'row',
     justifyContent: 'space-evenly',
     position: 'relative',
@@ -32,30 +29,21 @@ 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_ACTION_BRAND_COLOR,
+    borderColor: $config.PRIMARY_COLOR,
     borderWidth: 0,
     width: 40,
     height: 40,
@@ -71,24 +59,15 @@ const styles = {
     resizeMode: 'contain',
   },
   endCall: {
-    width: 20,
-    height: 20,
-  },
-  endCallContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
+    backgroundColor: $config.SECONDARY_FONT_COLOR, //'#fff',
+    borderRadius: 23,
+    borderColor: $config.PRIMARY_COLOR,
+    borderWidth: 0,
+    width: 40,
+    height: 40,
+    alignSelf: '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',
+    justifyContent: 'center',
   },
   remoteButton: {
     width: 25,
@@ -101,7 +80,7 @@ const styles = {
     borderRightWidth: 0,
     borderLeftWidth: 0,
     marginHorizontal: 0,
-    backgroundColor: $config.SECONDARY_ACTION_COLOR, //'#fff',
+    backgroundColor: $config.SECONDARY_FONT_COLOR, //'#fff',
   },
   liveStreamHostControlBtns: {
     width: 20,
@@ -114,7 +93,7 @@ const styles = {
     borderRightWidth: 0,
     borderLeftWidth: 0,
     marginHorizontal: 0,
-    backgroundColor: $config.SECONDARY_ACTION_COLOR,
+    backgroundColor: $config.SECONDARY_FONT_COLOR,
   },
   minCloseBtn: {
     alignItems: 'center',

package/template/src/components/useShareLink.tsx

@@ -14,6 +14,7 @@ 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';
@@ -123,31 +124,31 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
       if (isHost) {
         if (isSeparateHostLink) {
           //seperate link for host and attendee
-          inviteContent += `Meeting: ${meetingName}\n\nAttendee Link:\n${url?.attendee}\n\nHost Link:\n${url?.host}`;
+          inviteContent += `Meeting - ${meetingName}\nURL for Attendee: ${url?.attendee}\nURL for Host: ${url?.host}`;
         } else {
           //single link for everyone
-          inviteContent += `Meeting: ${meetingName}\n\nMeeting Link:\n${url?.host}`;
+          inviteContent += `Meeting - ${meetingName}\nMeeting URL: ${url?.host}`;
         }
       }
       //for attendee
       else {
-        inviteContent += `Meeting: ${meetingName}\n\nAttendee Link:\n${url?.attendee}`;
+        inviteContent += `Meeting - ${meetingName}\nURL for Attendee: ${url?.attendee}`;
       }
     } else {
       if (isHost) {
         if (isSeparateHostLink) {
-          inviteContent += `Meeting: ${meetingName}\n\nAttendee Meeting ID:\n${id?.attendee}\n\nHost Meeting ID:\n${id?.host}`;
+          inviteContent += `Meeting - ${meetingName}\nAttendee Meeting ID: ${id?.attendee}\nHost Meeting ID: ${id?.host}`;
         } else {
-          inviteContent += `Meeting: ${meetingName}\n\nMeeting ID:\n${id?.host}`;
+          inviteContent += `Meeting - ${meetingName}\nMeeting ID: ${id?.host}`;
         }
       } else {
         //copy this label on videocall screen
-        inviteContent += `Meeting: ${meetingName}\n\nAttendee Meeting ID:\n${id?.attendee}`;
+        inviteContent += `Meeting - ${meetingName}\nAttendee Meeting ID: ${id?.attendee}`;
       }
     }
     // Adding pstn data into meeting data if present
     if (pstn?.number && pstn?.pin) {
-      inviteContent += `\n\nPSTN Number:\n${pstn.number}\n\nPSTN Pin:\n${pstn.pin}`;
+      inviteContent += `\nPSTN Number: ${pstn.number}\nPSTN Pin: ${pstn.pin}`;
     }
     return inviteContent;
   };
@@ -239,10 +240,7 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
     return stringToCopy;
   };
 
-  const copyShareLinkToClipboard = (
-    input: SHARE_LINK_CONTENT_TYPE,
-    callbackFn?: () => void,
-  ) => {
+  const copyShareLinkToClipboard = (input: SHARE_LINK_CONTENT_TYPE) => {
     let stringToCopy = '';
     switch (input) {
       case SHARE_LINK_CONTENT_TYPE.MEETING_INVITE:
@@ -260,7 +258,11 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
         break;
     }
     Clipboard.setString(stringToCopy);
-    callbackFn && callbackFn();
+    Toast.show({
+      type: 'success',
+      text1: copiedToClipboardText,
+      visibilityTime: 1000,
+    });
   };
 
   return (

package/template/src/language/default-labels/precallScreenLabels.ts

@@ -25,9 +25,9 @@ export const PrecallScreenLabels: I18nPrecallScreenLabelsInterface = {
   joinRoomButton: ({ready, role}) =>
     ready
       ? !role
-        ? 'JOIN MEETING'
-        : `JOIN MEETING AS ${
-            role === ClientRole.Broadcaster ? 'HOST' : 'AUDIENCE'
+        ? 'Join Room'
+        : `Join Room as ${
+            role === ClientRole.Broadcaster ? 'Host' : 'Audience'
           }`
       : `Loading...`,
 };

package/template/src/pages/Authenticate.tsx

@@ -20,12 +20,21 @@ import {
 import Logo from '../subComponents/Logo';
 import OAuth from '../components/OAuth';
 import Illustration from '../subComponents/Illustration';
-import {useHasBrandLogo, useIsDesktop} from '../utils/common';
+import {useHasBrandLogo} from '../utils/common';
+import DimensionContext from '../components/dimension/DimensionContext';
 import {useString} from '../utils/useString';
 
 const Authenticate = () => {
   const hasBrandLogo = useHasBrandLogo();
-  const isDesktop = useIsDesktop();
+  const {getDimensionData} = useContext(DimensionContext);
+  const [isDesktop, setIsDesktop] = useState(false);
+  let onLayout = (e: LayoutChangeEvent) => {
+    const {isDesktop} = getDimensionData(
+      e.nativeEvent.layout.width,
+      e.nativeEvent.layout.height,
+    );
+    setIsDesktop(isDesktop);
+  };
   //commented for v1 release
   // const oauthLoginLabel = useString('oauthLoginLabel')();
   // const oauthProviderLabel = useString('oauthProviderLabel')();
@@ -33,6 +42,7 @@ const Authenticate = () => {
   const oauthProviderLabel = 'Please select an OAuth provider to login.';
   return (
     <ImageBackground
+      onLayout={onLayout}
       source={{uri: $config.BG}}
       style={style.full}
       resizeMode={'cover'}>
@@ -44,7 +54,7 @@ const Authenticate = () => {
             <Text style={style.headline}>{oauthProviderLabel}</Text>
             <OAuth />
           </View>
-          {isDesktop() ? (
+          {isDesktop ? (
             <View style={style.full}>
               <Illustration />
             </View>
@@ -83,14 +93,14 @@ const style = StyleSheet.create({
   heading: {
     fontSize: 40,
     fontWeight: '700',
-    color: $config.FONT_COLOR,
+    color: $config.PRIMARY_FONT_COLOR,
     marginBottom: 20,
   },
   headline: {
     fontSize: 20,
     letterSpacing: 2,
     fontWeight: '400',
-    color: $config.FONT_COLOR,
+    color: $config.PRIMARY_FONT_COLOR,
     marginTop: -50,
     marginBottom: 20,
   },