agora-appbuilder-core 3.0.8 → 4.0.0-api.0

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,8 +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 {useRoomInfo} from './room-info/useRoomInfo';
 import platform from '../subComponents/Platform';
 import {MeetingInviteInterface} from '../language/default-labels/videoCallScreenLabels';
 import Clipboard from '../subComponents/Clipboard';
@@ -95,7 +94,7 @@ interface ShareLinkProvideProps {
 const ShareLinkProvider = (props: ShareLinkProvideProps) => {
   const {
     data: {meetingTitle, roomId, pstn, isSeparateHostLink, isHost},
-  } = useMeetingInfo();
+  } = useRoomInfo();
 
   //commmented for v1 release
   // const copiedToClipboardText = useString(
@@ -107,7 +106,7 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
   // const meetingInviteText =
   //   useString<MeetingInviteInterface>('meetingInviteText');
   const copiedToClipboardText = 'Copied to Clipboard';
-  const meetingIdText = 'Meeting ID';
+  const meetingIdText = 'Room ID';
   const PSTNNumberText = 'PSTN Number';
   const PSTNPinText = 'PSTN Pin';
   const meetingInviteText = ({
@@ -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 += `Room: ${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 += `Room: ${meetingName}\n\nMeeting Link:\n${url?.host}`;
         }
       }
       //for attendee
       else {
-        inviteContent += `Meeting - ${meetingName}\nURL for Attendee: ${url?.attendee}`;
+        inviteContent += `Room: ${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 += `Room: ${meetingName}\n\nAttendee Room ID:\n${id?.attendee}\n\nHost Room ID:\n${id?.host}`;
         } else {
-          inviteContent += `Meeting - ${meetingName}\nMeeting ID: ${id?.host}`;
+          inviteContent += `Room: ${meetingName}\n\nRoom ID:\n${id?.host}`;
         }
       } else {
         //copy this label on videocall screen
-        inviteContent += `Meeting - ${meetingName}\nAttendee Meeting ID: ${id?.attendee}`;
+        inviteContent += `Room: ${meetingName}\n\nAttendee Room 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;
   };
@@ -178,10 +177,10 @@ const ShareLinkProvider = (props: ShareLinkProvideProps) => {
   };
 
   const getBaseURL = () => {
-    let baseURL =
-      platform === 'web' && !isSDK
-        ? $config.FRONTEND_ENDPOINT || window.location.origin
-        : undefined;
+    let baseURL = !isSDK
+      ? $config.FRONTEND_ENDPOINT ||
+        (platform === 'web' && window.location.origin)
+      : undefined;
     return baseURL;
   };
 
@@ -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};

package/template/src/components/useUserPreference.tsx

@@ -10,15 +10,18 @@
 *********************************************
 */
 import React, {useState, useContext, useEffect} from 'react';
-import {RenderInterface, useLocalUid} from '../../agora-rn-uikit';
+import {
+  DispatchContext,
+  ContentInterface,
+  useLocalUid,
+} from '../../agora-rn-uikit';
 import {useString} from '../utils/useString';
 import StorageContext from './StorageContext';
-import events, {EventPersistLevel} from '../rtm-events-api';
+import events, {PersistanceLevel} from '../rtm-events-api';
 import {EventNames} from '../rtm-events';
 import useLocalScreenShareUid from '../utils/useLocalShareScreenUid';
 import {createHook} from 'customization-implementation';
 import ChatContext from './ChatContext';
-import {useRtc} from 'customization-api';
 
 interface UserPreferenceContextInterface {
   displayName: string;
@@ -34,7 +37,7 @@ const UserPreferenceContext =
 const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
   const localUid = useLocalUid();
   const screenShareUid = useLocalScreenShareUid();
-  const {dispatch} = useRtc();
+  const {dispatch} = useContext(DispatchContext);
 
   const {store, setStore} = useContext(StorageContext);
   const {hasUserJoinedRTM} = useContext(ChatContext);
@@ -98,14 +101,14 @@ const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
           screenShareUid: screenShareUid,
           name: displayName || userText,
         }),
-        EventPersistLevel.LEVEL2,
+        PersistanceLevel.Sender,
       );
     }
   }, [displayName, hasUserJoinedRTM]);
 
   const updateRenderListState = (
     uid: number,
-    data: Partial<RenderInterface>,
+    data: Partial<ContentInterface>,
   ) => {
     dispatch({type: 'UpdateRenderList', value: [uid, data]});
   };

package/template/src/components/useVideoCall.tsx

@@ -0,0 +1,84 @@
+/*
+********************************************
+ 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, {SetStateAction, useState, useContext, useEffect} from 'react';
+import {createHook} from 'customization-implementation';
+import InvitePopup from './popups/InvitePopup';
+import StopRecordingPopup from './popups/StopRecordingPopup';
+import {SdkApiContext} from './SdkApiContext';
+import {useRoomInfo} from 'customization-api';
+import SDKEvents from '../utils/SdkEvents';
+import DeviceContext from './DeviceContext';
+
+export interface VideoCallContextInterface {
+  showInvitePopup: boolean;
+  setShowInvitePopup: React.Dispatch<SetStateAction<boolean>>;
+  showStopRecordingPopup: boolean;
+  setShowStopRecordingPopup: React.Dispatch<SetStateAction<boolean>>;
+  showLayoutOption: boolean;
+  setShowLayoutOption: React.Dispatch<SetStateAction<boolean>>;
+}
+
+const VideoCallContext = React.createContext<VideoCallContextInterface>({
+  showInvitePopup: false,
+  setShowInvitePopup: () => {},
+  showStopRecordingPopup: false,
+  setShowStopRecordingPopup: () => {},
+  showLayoutOption: false,
+  setShowLayoutOption: () => {},
+});
+
+interface VideoCallProviderProps {
+  children: React.ReactNode;
+}
+const VideoCallProvider = (props: VideoCallProviderProps) => {
+  const [showLayoutOption, setShowLayoutOption] = useState(false);
+  const [showInvitePopup, setShowInvitePopup] = useState(false);
+  const [showStopRecordingPopup, setShowStopRecordingPopup] = useState(false);
+  const {join} = useContext(SdkApiContext);
+  const roomInfo = useRoomInfo();
+  const {deviceList} = useContext(DeviceContext);
+
+  useEffect(() => {
+    if (join.initialized && join.phrase) {
+      join.promise.res(roomInfo.data);
+    }
+    SDKEvents.emit(
+      'join',
+      roomInfo.data.meetingTitle,
+      deviceList,
+      roomInfo.data.isHost,
+    );
+  }, []);
+  return (
+    <VideoCallContext.Provider
+      value={{
+        showInvitePopup,
+        setShowInvitePopup,
+        showStopRecordingPopup,
+        setShowStopRecordingPopup,
+        showLayoutOption,
+        setShowLayoutOption,
+      }}>
+      <StopRecordingPopup />
+      <InvitePopup />
+      {props.children}
+    </VideoCallContext.Provider>
+  );
+};
+
+/**
+ *
+ */
+const useVideoCall = createHook(VideoCallContext);
+
+export {VideoCallProvider, useVideoCall};

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

@@ -10,10 +10,10 @@ export interface I18nCreateScreenLabelsInterface {
 }
 
 export const CreateScreenLabels: I18nCreateScreenLabelsInterface = {
-  meetingNameInputPlaceholder: 'Name your Meeting',
+  meetingNameInputPlaceholder: 'Name your Room',
   //commented for v1 release
-  // createMeetingButton: 'Create Meeting',
-  // haveMeetingID: 'Have a Meeting ID?',
+  // createMeetingButton: 'Create Room',
+  // haveMeetingID: 'Have a Room ID?',
   // pstnToggle: 'Use PSTN (Join by dialing a number)',
   // hostControlsToggle: (toggle) =>
   //   toggle

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

@@ -8,6 +8,6 @@ export interface I18nJoinScreenLabelsInterface {
 
 export const JoinScreenLabels: I18nJoinScreenLabelsInterface = {
   //commented for v1 release
-  // meetingIdInputPlaceholder: 'Enter Meeting ID',
-  // enterMeetingButton: 'Enter Meeting',
+  // meetingIdInputPlaceholder: 'Enter Room ID',
+  // enterMeetingButton: 'Enter Room',
 };

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

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

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

@@ -26,19 +26,19 @@ export const ShareLinkScreenLabels: I18nShareLinkScreenLabelsInterface = {
   //commented for v1 release
   // attendeeUrlLabel: 'Attendee URL',
   // hostUrlLabel: 'Host URL',
-  // enterMeetingAfterCreateButton: 'Start Meeting (as host)',
+  // enterMeetingAfterCreateButton: 'Start Room (as host)',
   // copyInviteButton: 'Copy invite to clipboard',
   // pstnLabel: 'PSTN',
   // pstnNumberLabel: 'Number',
-  // meetingUrlLabel: 'Meeting URL',
+  // meetingUrlLabel: 'Room URL',
   // hostIdLabel: 'Host ID',
-  // meetingIdLabel: 'Meeting ID',
+  // meetingIdLabel: 'Room ID',
   // attendeeIdLabel: 'Attendee ID',
   // copiedToClipboardNotificationLabel: 'Copied to Clipboard',
   // PSTNNumber: 'PSTN Number',
   // PSTNPin: 'PSTN Pin',
   // URLForAttendee: 'URL for Attendee',
   // URLForHost: 'URL for Host',
-  // attendeeMeetingID: 'Attendee Meeting ID',
-  // hostMeetingID: 'Host Meeting ID',
+  // attendeeMeetingID: 'Attendee Room ID',
+  // hostMeetingID: 'Host Room ID',
 };

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

@@ -108,7 +108,7 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
   // joiningLoaderLabel: 'Starting Call. Just a second.',
   // oauthLoginLabel: 'Login using OAuth',
   // oauthProviderLabel: 'Please select an OAuth provider to login.',
-  // copyMeetingInviteButton: 'Copy Meeting Invite',
+  // copyMeetingInviteButton: 'Copy Room Invite',
   // pin: 'Pin',
   // language: 'Language',
   // hostControlsLabel: 'Host Controls',
@@ -166,20 +166,20 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
   //   if (url) {
   //     // if host data is present generate links for both host and attendee
   //     if (url?.host) {
-  //       inviteContent += `Meeting - ${meetingName}\nURL for Attendee: ${url?.attendee}\nURL for Host: ${url?.host}`;
+  //       inviteContent += `Room - ${meetingName}\nURL for Attendee: ${url?.attendee}\nURL for Host: ${url?.host}`;
   //     }
   //     // if host data is not present then generate link for attendee alone
   //     else {
-  //       inviteContent += `Meeting - ${meetingName}\nMeeting URL: ${url?.attendee}`;
+  //       inviteContent += `Room - ${meetingName}\nMeeting URL: ${url?.attendee}`;
   //     }
   //   } else {
   //     // if host data is present generate meeting ID for both host and attendee
   //     if (id?.host) {
-  //       inviteContent += `Meeting - ${meetingName}\nAttendee Meeting ID: ${id?.attendee}\nHost Meeting ID: ${id?.host}`;
+  //       inviteContent += `Room - ${meetingName}\nAttendee Room ID: ${id?.attendee}\nHost Room ID: ${id?.host}`;
   //     }
   //     // if host data is not present then generate meeting ID for attendee alone
   //     else {
-  //       inviteContent += `Meeting - ${meetingName}\nMeeting ID: ${id?.attendee}`;
+  //       inviteContent += `Room - ${meetingName}\nMeeting ID: ${id?.attendee}`;
   //     }
   //   }
   //   // Adding pstn data into meeting data if present

package/template/src/pages/Authenticate.tsx

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