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

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

@@ -0,0 +1,44 @@
+import {I18nBaseType} from '../i18nTypes';
+
+export interface I18nShareLinkScreenLabelsInterface {
+  //commented for v1 release
+  // attendeeUrlLabel?: I18nBaseType; //
+  // hostUrlLabel?: I18nBaseType; //
+  // enterMeetingAfterCreateButton?: I18nBaseType; //
+  // copyInviteButton?: I18nBaseType; //
+  // pstnLabel?: I18nBaseType; //
+  // pstnNumberLabel?: I18nBaseType; //
+  // meetingUrlLabel?: I18nBaseType; //
+  // hostIdLabel?: I18nBaseType; //
+  // meetingIdLabel?: I18nBaseType; //
+  // attendeeIdLabel?: I18nBaseType; //
+  // copiedToClipboardNotificationLabel?: I18nBaseType; //
+  // PSTNNumber?: I18nBaseType;
+  // PSTNPin?: I18nBaseType;
+  // meeting?: I18nBaseType;
+  // URLForAttendee?: I18nBaseType;
+  // URLForHost?: I18nBaseType;
+  // attendeeMeetingID?: I18nBaseType;
+  // hostMeetingID?: I18nBaseType;
+}
+
+export const ShareLinkScreenLabels: I18nShareLinkScreenLabelsInterface = {
+  //commented for v1 release
+  // attendeeUrlLabel: 'Attendee URL',
+  // hostUrlLabel: 'Host URL',
+  // enterMeetingAfterCreateButton: 'Start Meeting (as host)',
+  // copyInviteButton: 'Copy invite to clipboard',
+  // pstnLabel: 'PSTN',
+  // pstnNumberLabel: 'Number',
+  // meetingUrlLabel: 'Meeting URL',
+  // hostIdLabel: 'Host ID',
+  // meetingIdLabel: 'Meeting 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',
+};

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

@@ -0,0 +1,189 @@
+import {I18nBaseType, I18nConditionalType, I18nDynamicType} from '../i18nTypes';
+interface NetworkQualityStatusInterface {
+  unknown?: 'Unknown';
+  excellent?: 'Excellent';
+  good?: 'Good';
+  bad?: 'Bad';
+  veryBad?: 'Very Bad';
+  unpublished?: 'Unpublished';
+  loading?: 'Loading';
+}
+export type NetworkQualities = keyof NetworkQualityStatusInterface;
+export interface MeetingInviteInterface {
+  meetingName?: string;
+  pstn?: {
+    number: string;
+    pin: string;
+  };
+  url?: {
+    host?: string;
+    attendee: string;
+  };
+  id?: {
+    host?: string;
+    attendee: string;
+  };
+}
+export interface I18nVideoCallScreenLabelsInterface {
+  //commented for v1 release
+  // toggleVideoButton?: I18nBaseType; //
+  // toggleAudioButton?: I18nBaseType; //
+  // screenShareButton?: I18nBaseType; //
+  // recordingNotificationLabel?: I18nConditionalType;
+  // endCallButton?: I18nBaseType; //
+  // participantsLabel?: I18nBaseType; //
+  // groupChatLabel?: I18nBaseType; //
+  // privateChatLabel?: I18nBaseType; //
+  // chatMessageInputPlaceholder?: I18nBaseType; //
+  // hostControlsLabel?: I18nBaseType; //
+  // muteAllVideoButton?: I18nBaseType; //
+  // muteAllAudioButton?: I18nBaseType; //
+  // switchCameraButton?: I18nBaseType; //
+  // localScreenshareDefaultLabel?: I18nBaseType; //
+  // localUserDefaultLabel?: I18nBaseType; //
+  // remoteUserDefaultLabel?: I18nBaseType; //
+  pstnUserLabel?: I18nBaseType; //
+  // commented for v1 release
+  // authenticationSuccessLabel?: I18nBaseType; //
+  // meetingCreatedNotificationLabel?: I18nBaseType; //
+  // joiningLoaderLabel?: I18nBaseType; //
+  // oauthLoginLabel?: I18nBaseType; //
+  // oauthProviderLabel?: I18nBaseType; //
+  // copyMeetingInviteButton?: I18nBaseType; //
+  // pin?: I18nBaseType;
+  // language?: I18nBaseType;
+  // screensharingActiveOverlayLabel?: I18nBaseType; //
+  // recordingButton?: I18nConditionalType; //
+  // screenshareUserName?: I18nDynamicType; //
+  // messageSenderNotificationLabel?: I18nDynamicType; //
+  // networkQualityLabel?: I18nBaseType<NetworkQualities>; //
+  // meetingInviteText?: I18nBaseType<MeetingInviteInterface>; //
+  // participantListPlaceholder?: I18nBaseType; //
+  // raisedHandsListPlaceholder?: I18nBaseType; //
+  // raisedHandsListTitleLabel?: I18nBaseType; //
+  // hostLabel?: I18nBaseType; //
+  // audienceLabel?: I18nBaseType; //
+  // raiseHandButton?: I18nConditionalType; //
+  // noUserFoundLabel?: I18nBaseType;
+  // userOfflineLabel?: I18nBaseType;
+  // raiseHandLocalNotification?: I18nBaseType; //
+  // raiseHandRemoteHostNotification?: I18nConditionalType; //
+  // raiseHandApprovedLocalNotification?: I18nBaseType; //
+  // raiseHandRejectedLocalNotification?: I18nBaseType; //
+  // lowerHandRemoteHostNotification?: I18nConditionalType; //
+  // lowerHandsLocalNotification?: I18nBaseType; //
+  // raiseHandRevokedLocalNotification?: I18nBaseType; //
+  // recordingLabel?: I18nBaseType;
+  // settingScreenInfoMessage?: I18nBaseType;
+  // chatLabel?: I18nBaseType;
+  // settingsLabel?: I18nBaseType;
+  // layoutLabel?: I18nBaseType;
+}
+
+export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
+  //need to check
+  //remoteScreenshareDefaultLabel - User's screenshare
+  //commented for v1 release
+  // toggleVideoButton: 'Video',
+  // toggleAudioButton: 'Audio',
+  // screenShareButton: 'Share',
+  // switchCameraButton: 'Switch',
+  // recordingLabel: 'Recording',
+  // recordingNotificationLabel: (active) =>
+  //   active ? 'Recording Started' : 'Recording Stopped',
+  // endCallButton: 'Hang Up',
+  // participantsLabel: 'Participants',
+  // groupChatLabel: 'Group',
+  // privateChatLabel: 'Private',
+  // chatMessageInputPlaceholder: 'Type your message..',
+  // localScreenshareDefaultLabel: 'Your screenshare',
+  // localUserDefaultLabel: 'You',
+  // remoteUserDefaultLabel: 'User',
+  pstnUserLabel: 'PSTN User',
+  //commented for v1 release
+  // authenticationSuccessLabel: 'Authenticated Successfully!',
+  // meetingCreatedNotificationLabel: 'Created',
+  // joiningLoaderLabel: 'Starting Call. Just a second.',
+  // oauthLoginLabel: 'Login using OAuth',
+  // oauthProviderLabel: 'Please select an OAuth provider to login.',
+  // copyMeetingInviteButton: 'Copy Meeting Invite',
+  // pin: 'Pin',
+  // language: 'Language',
+  // hostControlsLabel: 'Host Controls',
+  // muteAllAudioButton: 'Mute all audios',
+  // muteAllVideoButton: 'Mute all videos',
+  // screensharingActiveOverlayLabel: 'Your screen share is active.',
+  // participantListPlaceholder: 'No one has joined yet',
+  // raisedHandsListPlaceholder: 'No streaming request(s)',
+  // raisedHandsListTitleLabel: 'Streaming Request',
+  // hostLabel: 'Host',
+  // audienceLabel: 'Audience',
+  // noUserFoundLabel: 'User not found',
+  // userOfflineLabel: 'User is offline',
+  // chatLabel: 'Chat',
+  // settingsLabel: 'Settings',
+  // layoutLabel: 'Layouts',
+  // raiseHandLocalNotification:
+  //   'You have raised your hand. Request sent to host for approval',
+  // raiseHandRemoteHostNotification: (name) => `${name} has raised their hand`,
+  // raiseHandApprovedLocalNotification:
+  //   'Your request was approved, unmute to start talking',
+  // raiseHandRejectedLocalNotification: 'Your request was rejected by the host',
+  // lowerHandRemoteHostNotification: (name) => `${name} has lowered their hand`,
+  // lowerHandsLocalNotification: 'You have lowered your hand',
+  // raiseHandRevokedLocalNotification:
+  //   'The host has revoked streaming permissions',
+  // settingScreenInfoMessage:
+  //   'Video and Audio sharing is disabled for attendees. Raise hand to request permission to share.',
+  // screenshareUserName: (name) => `${name}'s screenshare`, //
+  // recordingButton: (recording) => (recording ? 'Recording' : 'Record'),
+  // raiseHandButton: (toggle) => (toggle ? 'Lower hand' : 'Raise Hand'),
+  // messageSenderNotificationLabel: (name) => `From : ${name}`,
+  // networkQualityLabel: (quality) => {
+  //   switch (quality) {
+  //     case 'unknown':
+  //       return 'Unknown';
+  //     case 'excellent':
+  //       return 'Excellent';
+  //     case 'good':
+  //       return 'Good';
+  //     case 'bad':
+  //       return 'Bad';
+  //     case 'veryBad':
+  //       return 'Very Bad';
+  //     case 'unpublished':
+  //       return 'Unpublished';
+  //     case 'loading':
+  //       return 'Loading';
+  //     default:
+  //       return 'Loading';
+  //   }
+  // },
+  // meetingInviteText: ({meetingName, id, url, pstn}) => {
+  //   let inviteContent = '';
+  //   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}`;
+  //     }
+  //     // if host data is not present then generate link for attendee alone
+  //     else {
+  //       inviteContent += `Meeting - ${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}`;
+  //     }
+  //     // if host data is not present then generate meeting ID for attendee alone
+  //     else {
+  //       inviteContent += `Meeting - ${meetingName}\nMeeting ID: ${id?.attendee}`;
+  //     }
+  //   }
+  //   // Adding pstn data into meeting data if present
+  //   if (pstn?.number && pstn?.pin) {
+  //     inviteContent += `\nPSTN Number: ${pstn.number}\nPSTN Pin: ${pstn.pin}`;
+  //   }
+  //   return inviteContent;
+  // },
+};

package/template/src/language/i18nTypes.ts

@@ -0,0 +1,10 @@
+import {TextDataInterface} from './default-labels/index';
+
+export type I18nBaseType<T = any> = string | ((template: T) => string);
+export type I18nDynamicType = I18nBaseType<string>;
+export type I18nConditionalType = I18nBaseType<boolean>;
+export interface i18nInterface {
+  locale: string;
+  label?: string;
+  data: TextDataInterface;
+}

package/template/src/language/index.ts

@@ -0,0 +1,18 @@
+/*
+********************************************
+ 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 {i18nInterface} from './i18nTypes';
+import {DEFAULT_LABELS} from './default-labels/index';
+export const DEFAULT_I18_DATA: i18nInterface = {
+  label: 'English US',
+  locale: 'en-us',
+  data: DEFAULT_LABELS,
+};

package/template/src/language/useLanguage.tsx

@@ -0,0 +1,92 @@
+/*
+********************************************
+ 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, useContext, useEffect, useState} from 'react';
+import {createHook} from 'fpe-implementation';
+import {useFpe} from 'fpe-api';
+import {DEFAULT_I18_DATA} from './index';
+import StorageContext from '../components/StorageContext';
+
+export interface LanguageContextInterface {
+  languageCode: string;
+  setLanguageCode: (code: string) => void;
+}
+
+export interface LanguagePropsInterface {
+  children: React.ReactNode;
+}
+
+const LanguageContext = createContext<LanguageContextInterface>({
+  languageCode: DEFAULT_I18_DATA.locale,
+  setLanguageCode: () => {},
+});
+
+const LanguageProvider = (props: LanguagePropsInterface) => {
+  const {store, setStore} = useContext(StorageContext);
+  const i18nData = useFpe((data) => data?.i18n);
+
+  //If language code is stored in the localstorage no longer available in fpe data
+  //then we will update the localstorage value to default value
+  let storedCode =
+    i18nData && Array.isArray(i18nData) && i18nData.length
+      ? i18nData?.find((item) => item.locale === store.selectedLanguageCode)
+        ? store.selectedLanguageCode
+        : undefined
+      : undefined;
+
+  const [languageCode, setLanguageCodeLocal] = useState(
+    storedCode ||
+      (i18nData && Array.isArray(i18nData) && i18nData.length
+        ? i18nData[0].locale
+        : false) ||
+      DEFAULT_I18_DATA.locale,
+  );
+
+  useEffect(() => {
+    if (setStore) {
+      setStore((prevState) => {
+        return {
+          ...prevState,
+          selectedLanguageCode: languageCode,
+        };
+      });
+    }
+  }, [languageCode]);
+
+  useEffect(() => {
+    let storedCode =
+      i18nData && Array.isArray(i18nData) && i18nData.length
+        ? i18nData?.find((item) => item.locale === store.selectedLanguageCode)
+          ? store.selectedLanguageCode
+          : undefined
+        : undefined;
+    setLanguageCodeLocal(
+      storedCode ||
+        (i18nData && Array.isArray(i18nData) && i18nData.length
+          ? i18nData[0].locale
+          : false) ||
+        DEFAULT_I18_DATA.locale,
+    );
+  }, [i18nData]);
+
+  const setLanguageCode = (langCode: string) => {
+    setLanguageCodeLocal(langCode);
+  };
+
+  return (
+    <LanguageContext.Provider value={{languageCode, setLanguageCode}}>
+      {props.children}
+    </LanguageContext.Provider>
+  );
+};
+const useLanguage = createHook(LanguageContext);
+
+export {LanguageProvider, useLanguage};

package/template/src/pages/Authenticate.tsx

@@ -9,28 +9,36 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState} from 'react';
+import React, {useContext, useState} from 'react';
 import {
   View,
   Text,
   ImageBackground,
   StyleSheet,
-  Dimensions,
+  LayoutChangeEvent,
 } from 'react-native';
 import Logo from '../subComponents/Logo';
 import OAuth from '../components/OAuth';
 import Illustration from '../subComponents/Illustration';
-import hasBrandLogo from '../utils/hasBrandLogo';
+import {hasBrandLogo} from '../utils/common';
+import DimensionContext from '../components/dimension/DimensionContext';
+import {useString} from '../utils/useString';
 
 const Authenticate = () => {
-  const [dim, setDim] = useState([
-    Dimensions.get('window').width,
-    Dimensions.get('window').height,
-    Dimensions.get('window').width > Dimensions.get('window').height,
-  ]);
-  let onLayout = (e: any) => {
-    setDim([e.nativeEvent.layout.width, e.nativeEvent.layout.height]);
+  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')();
+  const oauthLoginLabel = 'Login using OAuth';
+  const oauthProviderLabel = 'Please select an OAuth provider to login.';
   return (
     <ImageBackground
       onLayout={onLayout}
@@ -41,13 +49,11 @@ const Authenticate = () => {
         <View style={style.nav}>{hasBrandLogo && <Logo />}</View>
         <View style={style.content}>
           <View style={style.leftContent}>
-            <Text style={style.heading}>Login using OAuth</Text>
-            <Text style={style.headline}>
-              Please select an OAuth provider to login.
-            </Text>
+            <Text style={style.heading}>{oauthLoginLabel}</Text>
+            <Text style={style.headline}>{oauthProviderLabel}</Text>
             <OAuth />
           </View>
-          {dim[0] > dim[1] + 150 ? (
+          {isDesktop ? (
             <View style={style.full}>
               <Illustration />
             </View>