agora-appbuilder-core 4.0.0-test.2 → 4.0.1

package/template/src/components/Settings.tsx

@@ -16,6 +16,10 @@ import {SidePanelType} from '../subComponents/SidePanelEnum';
 import {useSidePanel} from '../utils/useSidePanel';
 import {useString} from '../utils/useString';
 import IconButton, {IconButtonProps} from '../atoms/IconButton';
+import {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
+import {useActionSheet} from '../utils/useActionSheet';
+import {toolbarItemSettingText} from '../language/default-labels/videoCallScreenLabels';
 
 export interface SettingsIconButtonProps {
   render?: (onPress: () => void, isPanelActive: boolean) => JSX.Element;
@@ -23,15 +27,17 @@ export interface SettingsIconButtonProps {
 
 const Settings = (props: SettingsIconButtonProps) => {
   const {sidePanel, setSidePanel} = useSidePanel();
+  const {isToolbarMenuItem} = useToolbarMenu();
   //commented for v1 release
-  //const settingsLabel = useString('settingsLabel')();
-  const settingsLabel = 'Settings';
+  const settingsLabel = useString(toolbarItemSettingText)();
+
   const isPanelActive = sidePanel === SidePanelType.Settings;
   const onPress = () => {
     isPanelActive
       ? setSidePanel(SidePanelType.None)
       : setSidePanel(SidePanelType.Settings);
   };
+  const {isOnActionSheet, showLabel} = useActionSheet();
   let iconButtonProps: IconButtonProps = {
     onPress: onPress,
 
@@ -45,17 +51,40 @@ const Settings = (props: SettingsIconButtonProps) => {
         : '',
     },
     btnTextProps: {
-      text: $config.ICON_TEXT ? settingsLabel : '',
+      text: showLabel ? settingsLabel : '',
       textColor: $config.FONT_COLOR,
     },
   };
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
+  if (isOnActionSheet) {
+    // iconButtonProps.containerStyle = {
+    //   backgroundColor: $config.CARD_LAYER_2_COLOR,
+    //   width: 52,
+    //   height: 52,
+    //   borderRadius: 26,
+    //   justifyContent: 'center',
+    //   alignItems: 'center',
+    // };
 
+    iconButtonProps.btnTextProps.textStyle = {
+      color: $config.FONT_COLOR,
+      marginTop: 8,
+      fontSize: 12,
+      fontWeight: '400',
+      fontFamily: 'Source Sans Pro',
+      textAlign: 'center',
+    };
+  }
   return props?.render ? (
     props.render(onPress, isPanelActive)
   ) : (
     <>
       <View>
-        <IconButton {...iconButtonProps} />
+        {isToolbarMenuItem ? (
+          <ToolbarMenuItem {...iconButtonProps} />
+        ) : (
+          <IconButton {...iconButtonProps} />
+        )}
       </View>
     </>
   );

package/template/src/components/SettingsView.tsx

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {
   View,
   Text,
@@ -44,9 +44,25 @@ import {getGridLayoutName} from '../pages/video-call/DefaultLayouts';
 import {useFocus} from '../utils/useFocus';
 import {SettingsHeader} from '../pages/video-call/SidePanelHeader';
 import {useUserPreference} from './useUserPreference';
+import useCaptionWidth from '../../src/subComponents/caption/useCaptionWidth';
+import {whiteboardContext} from './whiteboard/WhiteboardConfigure';
+import InlineNotification from '../../src/atoms/InlineNotification';
+import {useRoomInfo} from './room-info/useRoomInfo';
+import {useString} from '../../src/utils/useString';
+import {
+  settingPanelNameCantbeChangedInfo,
+  settingPanelNameInputLabel,
+} from '../../src/language/default-labels/videoCallScreenLabels';
+
 interface EditNameProps {}
 const EditName: React.FC = (props?: EditNameProps) => {
+  const yournameLabel = useString(settingPanelNameInputLabel)();
+  const nameCantbeChangedInfo = useString(settingPanelNameCantbeChangedInfo)();
+  const {
+    data: {isHost},
+  } = useRoomInfo();
   const {saveName} = useUserPreference();
+  const {whiteboardActive} = useContext(whiteboardContext);
   const [saved, setSaved] = useState(false);
   const username = useGetName();
   const [newName, setNewName] = useState(username);
@@ -98,7 +114,7 @@ const EditName: React.FC = (props?: EditNameProps) => {
       setEditable(true);
       setTimeout(() => {
         inputRef.current.focus();
-        setFocus((prevState) => {
+        setFocus(prevState => {
           return {
             ...prevState,
             editName: false,
@@ -110,8 +126,23 @@ const EditName: React.FC = (props?: EditNameProps) => {
 
   return (
     <>
-      <Text style={editNameStyle.yournameText}>Your name</Text>
+      <Text style={editNameStyle.yournameText}>{yournameLabel}</Text>
       <Spacer size={12} />
+      {whiteboardActive && isHost ? (
+        <>
+          <InlineNotification
+            text={nameCantbeChangedInfo}
+            customStyle={{
+              alignItems: 'center',
+              backgroundColor: 'rgba(255, 171, 0, 0.15)',
+            }}
+            warning={true}
+          />
+          <Spacer size={12} />
+        </>
+      ) : (
+        <></>
+      )}
       <View style={editNameStyle.container}>
         <View style={editNameStyle.nameContainer}>
           <ImageIcon
@@ -126,7 +157,8 @@ const EditName: React.FC = (props?: EditNameProps) => {
             style={[
               editNameStyle.inputStyle,
               //true -> previously editable variable
-              !true
+              //!true
+              whiteboardActive && isHost
                 ? {
                     color:
                       $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled,
@@ -136,8 +168,8 @@ const EditName: React.FC = (props?: EditNameProps) => {
             onBlur={onPress}
             placeholder={username}
             value={newName}
-            editable={true}
-            onChangeText={(text) => setNewName(text)}
+            editable={whiteboardActive && isHost ? false : true}
+            onChangeText={text => setNewName(text)}
             onSubmitEditing={onPress}
             placeholderTextColor={
               $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled
@@ -242,12 +274,11 @@ const editNameStyle = StyleSheet.create({
     color: $config.FONT_COLOR,
   },
 });
-const SettingsView = (props) => {
+const SettingsView = props => {
   const {hideName = false, showHeader = true} = props;
   const isSmall = useIsSmall();
-  const settingsLabel = 'Settings';
-  const {setSidePanel} = useSidePanel();
   const {currentLayout} = useLayout();
+  const {transcriptHeight} = useCaptionWidth();
 
   return (
     <View
@@ -263,6 +294,8 @@ const SettingsView = (props) => {
         isWebInternal() && !isSmall() && currentLayout === getGridLayoutName()
           ? {marginVertical: 4}
           : {},
+        //@ts-ignore
+        transcriptHeight && !isMobileUA() && {height: transcriptHeight},
       ]}>
       {showHeader && <SettingsHeader {...props} />}
       <ScrollView style={style.contentContainer}>

package/template/src/components/Share.tsx

@@ -26,7 +26,7 @@ import {SHARE_LINK_CONTENT_TYPE, useShareLink} from './useShareLink';
 import {useString} from '../utils/useString';
 import isSDKCheck from '../utils/isSDK';
 import Logo from '../components/common/Logo';
-import {useMeetingInfo} from './meeting-info/useMeetingInfo';
+import {useRoomInfo} from './room-info/useRoomInfo';
 import {useHistory} from '../components/Router';
 import {useCustomization} from 'customization-implementation';
 import {isMobileUA, isValidReactComponent, trimText} from '../utils/common';
@@ -37,8 +37,20 @@ import ImageIcon from '../atoms/ImageIcon';
 import ThemeConfig from '../theme';
 import Tooltip from '../atoms/Tooltip';
 import IDPLogoutComponent from '../auth/IDPLogoutComponent';
-
-const isLiveStream = $config.EVENT_MODE;
+import Clipboard from '../subComponents/Clipboard';
+import {
+  shareRoomAttendeeLinkLabel,
+  shareRoomAttendeeLinkSubText,
+  shareRoomCopyBtnText,
+  shareRoomCopyBtnTooltipText,
+  shareRoomHostLinkLabel,
+  shareRoomHostLinkSubText,
+  shareRoomPSTNLabel,
+  shareRoomPSTNNumberLabel,
+  shareRoomPSTNPinLabel,
+  shareRoomPSTNSubText,
+  shareRoomStartBtnText,
+} from '../language/default-labels/shareLinkScreenLabels';
 
 export interface CopyMeetingInfoProps {
   showSubLabel?: boolean;
@@ -46,62 +58,34 @@ export interface CopyMeetingInfoProps {
 export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
   const {copyShareLinkToClipboard, getShareLink} = useShareLink();
   const {
-    data: {roomId, isHost, pstn, isSeparateHostLink, meetingTitle},
-  } = useMeetingInfo();
+    data: {roomId, isHost, pstn, isSeparateHostLink},
+  } = useRoomInfo();
   const {showSubLabel = true} = props;
-  //commented for v1 release
-  // const meetingUrlText = useString('meetingUrlLabel')();
-  // const meetingIdText = useString('meetingIdLabel')();
-  // const hostIdText = useString('hostIdLabel')();
-  // const attendeeUrlLabel = useString('attendeeUrlLabel')();
-  // const attendeeIdLabel = useString('attendeeIdLabel')();
-  // const hostUrlLabel = useString('hostUrlLabel')();
-  // const pstnLabel = useString('pstnLabel')();
-  // const pstnNumberLabel = useString('pstnNumberLabel')();
-  // const pinLabel = useString('pin')();
-  // const enterMeetingAfterCreateButton = useString(
-  //   'enterMeetingAfterCreateButton',
-  // )();
-  // const copyInviteButton = useString('copyInviteButton')();
-  const meetingUrlText = 'Meeting Link';
-  const meetingIdText = 'Meeting ID';
-  const hostIdText = 'Host ID';
-  const attendeeUrlLabel = 'Attendee Link';
-  const attendeeIdLabel = 'Attendee ID';
-  const hostUrlLabel = 'Host Link';
-  const pstnLabel = 'PSTN';
-  const pstnNumberLabel = 'Number';
-  const pinLabel = 'Pin';
-  const enterMeetingAfterCreateButton = isLiveStream
-    ? 'Start Stream (as host)'
-    : 'Start Meeting (as host)';
-  const copyInviteButton = 'Copy invite to clipboard';
-  const history = useHistory();
-  const enterMeeting = () => {
-    if (roomId?.host) {
-      history.push(roomId.host);
-    }
-  };
+
   const isSDK = isSDKCheck();
   const isWebCheck =
     $config.FRONTEND_ENDPOINT || (platform === 'web' && !isSDK);
 
-  const getAttendeeLabel = () =>
-    isWebCheck ? attendeeUrlLabel : attendeeIdLabel;
+  const shareRoomHostLink = useString<any>(shareRoomHostLinkLabel)(isWebCheck);
+  const shareRoomHostLinkSubTextLocal = useString<any>(
+    shareRoomHostLinkSubText,
+  )();
+  const shareRoomAttendeeLink = useString<any>(shareRoomAttendeeLinkLabel)(
+    isWebCheck,
+  );
+  const shareRoomAttendeeLinkSubTextLocal = useString<any>(
+    shareRoomAttendeeLinkSubText,
+  )();
+  const shareRoomPSTN = useString<any>(shareRoomPSTNLabel)();
+  const shareRoomPSTNNumber = useString<any>(shareRoomPSTNNumberLabel)();
+  const shareRoomPSTNPin = useString<any>(shareRoomPSTNPinLabel)();
+  const shareRoomPSTNSubTextLocal = useString<any>(shareRoomPSTNSubText)();
 
-  const getHostLabel = () => {
-    if (isSeparateHostLink) {
-      if (isWebCheck) {
-        return hostUrlLabel;
-      }
-      return hostIdText;
-    } else {
-      if (isWebCheck) {
-        return meetingUrlText;
-      }
-      return meetingIdText;
-    }
-  };
+  const copiedToClipboard = useString(shareRoomCopyBtnTooltipText)();
+
+  const getAttendeeLabel = () => shareRoomAttendeeLink;
+
+  const getHostLabel = () => shareRoomHostLink;
 
   const clipboardIconButton = (type: SHARE_LINK_CONTENT_TYPE) => {
     return (
@@ -121,7 +105,7 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
               <Spacer size={8} horizontal={true} />
             </>
           }
-          toolTipMessage="Copied to clipboard"
+          toolTipMessage={copiedToClipboard}
           renderContent={(isToolTipVisible, setToolTipVisible) => {
             return (
               <TouchableOpacity
@@ -170,7 +154,7 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
             <>
               <Spacer size={14} />
               <Text style={style.helpText}>
-                Share this with attendees you want to invite.
+                {shareRoomAttendeeLinkSubTextLocal}
               </Text>
             </>
           )}
@@ -204,7 +188,7 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
             <>
               <Spacer size={14} />
               <Text style={style.helpText}>
-                Share this with other co-hosts you want to invite.
+                {shareRoomHostLinkSubTextLocal}
               </Text>
             </>
           )}
@@ -215,7 +199,7 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
       )}
       {$config.PSTN && pstn && pstn?.number && pstn?.pin ? (
         <>
-          <Text style={style.urlTitle}>{pstnLabel}</Text>
+          <Text style={style.urlTitle}>{shareRoomPSTN}</Text>
           <Spacer size={11} />
           <View style={style.container}>
             <View style={[style.urlContainer, style.urlPadding]}>
@@ -226,8 +210,8 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
                     //@ts-ignore
                     isWebCheck ? urlWeb : {opacity: 1},
                   ]}>
-                  {pstnNumberLabel} - {pstn?.number} {' | '} {pinLabel} -{' '}
-                  {pstn?.pin}
+                  {shareRoomPSTNNumber} - {pstn?.number} {' | '}{' '}
+                  {shareRoomPSTNPin} - {pstn?.pin}
                 </Text>
               </View>
             </View>
@@ -237,9 +221,7 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
           {showSubLabel && (
             <>
               <Spacer size={14} />
-              <Text style={style.helpText}>
-                Share this phone number and pin to dial from phone.
-              </Text>
+              <Text style={style.helpText}>{shareRoomPSTNSubTextLocal}</Text>
             </>
           )}
           {/* <Spacer size={25} /> */}
@@ -251,8 +233,86 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
   );
 };
 
+const ClipboardIconButtonURL = ({url}) => {
+  const copiedToClipboard = useString(shareRoomCopyBtnTooltipText)();
+  return (
+    <View style={style.iconContainer}>
+      <Tooltip
+        isClickable
+        onPress={() => {
+          Clipboard.setString(url);
+        }}
+        toolTipIcon={
+          <>
+            <ImageIcon
+              iconType="plain"
+              name="tick-fill"
+              tintColor={$config.SEMANTIC_SUCCESS}
+            />
+            <Spacer size={8} horizontal={true} />
+          </>
+        }
+        toolTipMessage={copiedToClipboard}
+        renderContent={(isToolTipVisible, setToolTipVisible) => {
+          return (
+            <TouchableOpacity
+              onPress={() => {
+                Clipboard.setString(url);
+                setToolTipVisible(true);
+              }}>
+              <ImageIcon
+                iconType="plain"
+                name="clipboard"
+                tintColor={$config.PRIMARY_ACTION_BRAND_COLOR}
+              />
+            </TouchableOpacity>
+          );
+        }}
+      />
+    </View>
+  );
+};
+export interface ShowInputURLProps {
+  label: string;
+  url: string;
+}
+export const ShowInputURL = (props: ShowInputURLProps) => {
+  const {label, url} = props;
+  if (!url) {
+    return null;
+  }
+  return (
+    <>
+      {label ? (
+        <>
+          <Text style={style.urlTitle}>{label}</Text>
+          <Spacer size={11} />
+        </>
+      ) : (
+        <></>
+      )}
+      <View style={style.container}>
+        <View style={style.urlContainer}>
+          <Text
+            numberOfLines={1}
+            ellipsizeMode="tail"
+            style={[
+              style.url,
+              style.urlPadding,
+              //@ts-ignore
+              urlWeb,
+            ]}>
+            {url}
+          </Text>
+        </View>
+        <ClipboardIconButtonURL url={url} />
+      </View>
+    </>
+  );
+};
+
 const Share = () => {
-  const {FpeShareComponent} = useCustomization((data) => {
+  const {FpeShareComponent} = useCustomization(data => {
     let components: {
       FpeShareComponent?: React.ElementType;
     } = {};
@@ -273,21 +333,19 @@ const Share = () => {
   const {copyShareLinkToClipboard} = useShareLink();
   const {
     data: {roomId, meetingTitle},
-  } = useMeetingInfo();
+  } = useRoomInfo();
 
-  const enterMeetingAfterCreateButton = isLiveStream
-    ? 'Start Stream (as host)'
-    : 'Start Meeting (as host)';
-  const copyInviteButton = 'Copy invite to clipboard';
+  const shareRoomStartBtnTextLocal = useString<any>(shareRoomStartBtnText)({
+    eventMode: $config.EVENT_MODE,
+  });
+
+  const copyInviteButton = useString(shareRoomCopyBtnText)();
   const history = useHistory();
   const enterMeeting = () => {
     if (roomId?.host) {
       history.push(roomId.host);
     }
   };
-  const isSDK = isSDKCheck();
-  const isWebCheck =
-    $config.FRONTEND_ENDPOINT || (platform === 'web' && !isSDK);
 
   return FpeShareComponent ? (
     <FpeShareComponent />
@@ -329,7 +387,7 @@ const Share = () => {
               iconName="video-on"
               onPress={() => enterMeeting()}
               containerStyle={isMobileUA() && {width: '100%'}}
-              text={enterMeetingAfterCreateButton.toUpperCase()}
+              text={shareRoomStartBtnTextLocal}
             />
             <Spacer size={16} />
             <LinkButton

package/template/src/components/StorageContext.tsx

@@ -28,6 +28,7 @@ export interface StoreInterface {
     rememberedDevicesListEntries
   >;
   activeDeviceId: Record<MediaDeviceInfo['kind'], string>;
+  whiteboardNativeInfoToast?: boolean;
 }
 
 export interface StorageContextInterface {
@@ -36,6 +37,7 @@ export interface StorageContextInterface {
 }
 
 export const initStoreValue: StoreInterface = {
+  whiteboardNativeInfoToast: false,
   token: null,
   displayName: '',
   selectedLanguageCode: '',
@@ -78,19 +80,19 @@ export const StorageProvider = (props: {children: React.ReactNode}) => {
           setReady(true);
         } else {
           const storeFromStorage = JSON.parse(storeString);
-          Object.keys(initStoreValue).forEach((key) => {
+          Object.keys(initStoreValue).forEach(key => {
             if (!storeFromStorage[key]) {
               storeFromStorage[key] = initStoreValue[key];
             }
           });
-          //unauth flow delete token from the localstoage if any
+          // unauth flow delete token from the localstoage if any
           if (!ENABLE_AUTH) {
             storeFromStorage['token'] = null;
           }
+          storeFromStorage['whiteboardNativeInfoToast'] = false;
           setStore(storeFromStorage);
           setReady(true);
         }
-        console.log('store hydrated', storeString);
         setReady(true);
       } catch (e) {
         console.error('problem hydrating store', e);
@@ -113,7 +115,6 @@ export const StorageProvider = (props: {children: React.ReactNode}) => {
           tempStore['token'] = null;
         }
         await AsyncStorage.setItem('store', JSON.stringify(tempStore));
-        console.log('store synced with value', tempStore);
       } catch (e) {
         console.log('problem syncing the store', e);
       }

package/template/src/components/ToastComponent.tsx

@@ -1,11 +1,17 @@
 import React from 'react';
 import Toast from '../../react-native-toast-message';
 import ToastConfig from '../subComponents/ToastConfig';
+import {useIsRecordingBot} from '../subComponents/recording/useIsRecordingBot';
 
 const ToastComponent = () => {
+  const {isRecordingBot} = useIsRecordingBot();
+
   // if ($config.TOAST_NOTIFICATIONS) {
   //   return <Toast ref={(ref) => Toast.setRef(ref)} config={ToastConfig} />;
   // } else return <></>;
-  return <Toast ref={(ref) => Toast.setRef(ref)} config={ToastConfig} />;
+  if (isRecordingBot) {
+    return <></>;
+  }
+  return <Toast ref={ref => Toast.setRef(ref)} config={ToastConfig} />;
 };
 export default ToastComponent;