agora-appbuilder-core 4.0.0 → 4.0.2

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';
@@ -36,8 +36,21 @@ import LinkButton from '../atoms/LinkButton';
 import ImageIcon from '../atoms/ImageIcon';
 import ThemeConfig from '../theme';
 import Tooltip from '../atoms/Tooltip';
-
-const isLiveStream = $config.EVENT_MODE;
+import IDPLogoutComponent from '../auth/IDPLogoutComponent';
+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;
@@ -45,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 (
@@ -120,7 +105,7 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
               <Spacer size={8} horizontal={true} />
             </>
           }
-          toolTipMessage="Copied to clipboard"
+          toolTipMessage={copiedToClipboard}
           renderContent={(isToolTipVisible, setToolTipVisible) => {
             return (
               <TouchableOpacity
@@ -169,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>
             </>
           )}
@@ -203,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>
             </>
           )}
@@ -212,9 +197,9 @@ export const CopyMeetingInfo = (props?: CopyMeetingInfoProps) => {
       ) : (
         <></>
       )}
-      {pstn ? (
+      {$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]}>
@@ -225,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>
@@ -236,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} /> */}
@@ -250,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;
     } = {};
@@ -272,30 +333,47 @@ const Share = () => {
   const {copyShareLinkToClipboard} = useShareLink();
   const {
     data: {roomId, meetingTitle},
-  } = useMeetingInfo();
+  } = useRoomInfo();
+
+  const shareRoomStartBtnTextLocal = useString<any>(shareRoomStartBtnText)({
+    eventMode: $config.EVENT_MODE,
+  });
 
-  const enterMeetingAfterCreateButton = isLiveStream
-    ? 'Start Stream (as host)'
-    : 'Start Meeting (as host)';
-  const copyInviteButton = 'Copy invite to clipboard';
+  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 />
   ) : (
     <View style={style.root}>
+      {!isMobileUA() ? (
+        <IDPLogoutComponent containerStyle={{marginBottom: -100}} />
+      ) : (
+        <></>
+      )}
       <ScrollView contentContainerStyle={style.scrollMain}>
         <Card>
           <View>
-            <Logo />
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}>
+              <Logo />
+              {isMobileUA() ? (
+                <IDPLogoutComponent
+                  containerStyle={{marginTop: 0, marginRight: 0}}
+                />
+              ) : (
+                <></>
+              )}
+            </View>
             <Spacer size={20} />
             <Text style={style.heading} numberOfLines={1}>
               {trimText(meetingTitle)}
@@ -309,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

@@ -10,8 +10,9 @@
 *********************************************
 */
 import React, {createContext, ReactChildren, useEffect, useState} from 'react';
-import AsyncStorage from '@react-native-async-storage/async-storage'; // '@react-native-community/async-storage';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import useMount from './useMount';
+import {ENABLE_AUTH} from '../auth/config';
 
 type rememberedDevicesListEntries = Record<
   string,
@@ -27,6 +28,7 @@ export interface StoreInterface {
     rememberedDevicesListEntries
   >;
   activeDeviceId: Record<MediaDeviceInfo['kind'], string>;
+  whiteboardNativeInfoToast?: boolean;
 }
 
 export interface StorageContextInterface {
@@ -35,6 +37,7 @@ export interface StorageContextInterface {
 }
 
 export const initStoreValue: StoreInterface = {
+  whiteboardNativeInfoToast: false,
   token: null,
   displayName: '',
   selectedLanguageCode: '',
@@ -77,14 +80,19 @@ export const StorageProvider = (props: {children: React.ReactNode}) => {
           setReady(true);
         } else {
           const storeFromStorage = JSON.parse(storeString);
-          Object.keys(initStoreValue).forEach((key) => {
-            if (!storeFromStorage[key])
+          Object.keys(initStoreValue).forEach(key => {
+            if (!storeFromStorage[key]) {
               storeFromStorage[key] = initStoreValue[key];
+            }
           });
+          // 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);
@@ -97,14 +105,23 @@ export const StorageProvider = (props: {children: React.ReactNode}) => {
   useEffect(() => {
     const syncStore = async () => {
       try {
-        await AsyncStorage.setItem('store', JSON.stringify(store));
-        console.log('store synced with value', store);
+        /**
+         * if authentication is not enabled then store react state will have the token
+         * but it won't be saved in the localstorage
+         * Fix: if we duplicate browser tab and join the same meeting, we will create new session
+         */
+        let tempStore = JSON.parse(JSON.stringify(store));
+        if (!ENABLE_AUTH) {
+          tempStore['token'] = null;
+        }
+        await AsyncStorage.setItem('store', JSON.stringify(tempStore));
       } catch (e) {
         console.log('problem syncing the store', e);
       }
     };
     ready && syncStore();
   }, [store, ready]);
+
   return (
     <StorageContext.Provider value={{store, setStore}}>
       {ready ? props.children : <></>}

package/template/src/components/ToastComponent.tsx

@@ -1,8 +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 = () => {
-  return <Toast ref={(ref) => Toast.setRef(ref)} config={ToastConfig} />;
+  const {isRecordingBot} = useIsRecordingBot();
+
+  // if ($config.TOAST_NOTIFICATIONS) {
+  //   return <Toast ref={(ref) => Toast.setRef(ref)} config={ToastConfig} />;
+  // } else return <></>;
+  if (isRecordingBot) {
+    return <></>;
+  }
+  return <Toast ref={ref => Toast.setRef(ref)} config={ToastConfig} />;
 };
 export default ToastComponent;