agora-appbuilder-core 4.0.0 → 4.0.1

package/template/src/components/popups/WhiteboardClearAllPopup.tsx

@@ -0,0 +1,123 @@
+import React, {useContext} from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import Spacer from '../../atoms/Spacer';
+import Popup from '../../atoms/Popup';
+import TertiaryButton from '../../atoms/TertiaryButton';
+import PrimaryButton from '../../atoms/PrimaryButton';
+import ThemeConfig from '../../theme';
+import {useIsDesktop} from '../../utils/common';
+import {useVideoCall} from '../useVideoCall';
+import LocalEventEmitter, {
+  LocalEventsEnum,
+} from '../../rtm-events-api/LocalEvents';
+import {useString} from '../../utils/useString';
+import {
+  clearAllWhiteboardPopupHeading,
+  clearAllWhiteboardPopupPrimaryBtnText,
+  clearAllWhiteboardPopupSubHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
+import {cancelText} from '../../language/default-labels/commonLabels';
+
+const WhiteboardClearAllPopup = () => {
+  const {showWhiteboardClearAllPopup, setShowWhiteboardClearAllPopup} =
+    useVideoCall();
+  const isDesktop = useIsDesktop()('popup');
+  const recordingLabelHeading = useString(clearAllWhiteboardPopupHeading)();
+  const recordingLabelSubHeading = useString(
+    clearAllWhiteboardPopupSubHeading,
+  )();
+
+  const cancelBtnLabel = useString(cancelText)();
+  const whiteboardClearAllLabel = useString(
+    clearAllWhiteboardPopupPrimaryBtnText,
+  )();
+
+  const clearWhiteboard = () => {
+    LocalEventEmitter.emit(LocalEventsEnum.CLEAR_WHITEBOARD);
+  };
+  return (
+    <Popup
+      modalVisible={showWhiteboardClearAllPopup}
+      setModalVisible={setShowWhiteboardClearAllPopup}
+      showCloseIcon={false}
+      contentContainerStyle={styles.contentContainer}>
+      <Text style={styles.heading}>{recordingLabelHeading}</Text>
+      <Spacer size={8} />
+      <Text style={styles.subHeading}>{recordingLabelSubHeading}</Text>
+      <Spacer size={32} />
+      <View style={isDesktop ? styles.btnContainer : styles.btnContainerMobile}>
+        <View style={isDesktop && {flex: 1}}>
+          <TertiaryButton
+            containerStyle={{
+              minWidth: 'auto',
+              width: isDesktop ? 90 : '100%',
+              height: 48,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+              borderRadius: ThemeConfig.BorderRadius.medium,
+            }}
+            textStyle={styles.btnText}
+            text={cancelBtnLabel}
+            onPress={() => setShowWhiteboardClearAllPopup(false)}
+          />
+        </View>
+        <Spacer
+          size={isDesktop ? 10 : 20}
+          horizontal={isDesktop ? true : false}
+        />
+        <View style={isDesktop && {flex: 2}}>
+          <PrimaryButton
+            containerStyle={{
+              minWidth: 'auto',
+              width: '100%',
+              borderRadius: ThemeConfig.BorderRadius.medium,
+              height: 48,
+              backgroundColor: $config.SEMANTIC_ERROR,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+            }}
+            textStyle={styles.btnText}
+            text={whiteboardClearAllLabel}
+            onPress={clearWhiteboard}
+          />
+        </View>
+      </View>
+    </Popup>
+  );
+};
+
+export default WhiteboardClearAllPopup;
+
+const styles = StyleSheet.create({
+  btnContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  btnText: {
+    fontWeight: '600',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+
+  btnContainerMobile: {
+    flexDirection: 'column-reverse',
+  },
+  contentContainer: {
+    padding: 24,
+    maxWidth: 342,
+  },
+  heading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 22,
+    color: $config.SEMANTIC_ERROR,
+  },
+  subHeading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.small,
+    color: $config.FONT_COLOR,
+  },
+});

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

@@ -24,14 +24,23 @@ import LocalVideoMute, {
 import LocalAudioMute, {
   LocalAudioMuteProps,
 } from '../../subComponents/LocalAudioMute';
-import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
-import PreCallSettings from './PreCallSettings';
-import Spacer from '../../atoms/Spacer';
+
 import {usePreCall} from './usePreCall';
 import DeviceContext from '../DeviceContext';
+import VBButton from '../virtual-background/VBButton';
+import {ToolbarItem} from 'customization-api';
+import IconButton from '../../atoms/IconButton';
+
+interface PreCallProps {
+  isMobileView?: boolean;
+  isSettingsOpen?: boolean;
+  setIsSettingsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+  isVBOpen?: boolean;
+  setIsVBOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+}
 
-const PreCallLocalMute = (props: {isMobileView?: boolean}) => {
-  const {VideoMute, AudioMute} = useCustomization((data) => {
+const PreCallLocalMute = (props: PreCallProps) => {
+  const {VideoMute, AudioMute} = useCustomization(data => {
     let components: {
       VideoMute: React.ComponentType<LocalAudioMuteProps>;
       AudioMute: React.ComponentType<LocalVideoMuteProps>;
@@ -70,18 +79,25 @@ const PreCallLocalMute = (props: {isMobileView?: boolean}) => {
     // }
     return components;
   });
-  const {isMobileView = false} = props;
+  const {
+    isMobileView = false,
+    isSettingsOpen,
+    setIsSettingsOpen,
+    isVBOpen,
+    setIsVBOpen,
+  } = props;
   const isNative = isAndroid() || isIOS();
   // for mweb check for camera * mic availablity for desktop it happens in settings panel
   // refactor later to set mic/camera availablity oustside settings panel <selectDevice>
   const {deviceList} = useContext(DeviceContext);
   const {setCameraAvailable, setMicAvailable} = usePreCall();
-  const audioDevices = deviceList.filter((device) => {
+
+  const audioDevices = deviceList.filter(device => {
     if (device.kind === 'audioinput') {
       return true;
     }
   });
-  const videoDevices = deviceList.filter((device) => {
+  const videoDevices = deviceList.filter(device => {
     if (device.kind === 'videoinput') {
       return true;
     }
@@ -99,49 +115,59 @@ const PreCallLocalMute = (props: {isMobileView?: boolean}) => {
   }, [videoDevices]);
   return (
     <View
-      style={[style.precallControls, isMobileView && {paddingVertical: 10}]}
+      style={[
+        style.precallControls,
+        isMobileView && {
+          paddingVertical: 10,
+          borderBottomLeftRadius: 12,
+          borderBottomRightRadius: 12,
+          flex: 1,
+        },
+      ]}
       testID="precall-controls">
-      <View style={{width: 52, height: 52}}>
-        <AudioMute
-          isMobileView={isMobileView}
-          showLabel={isMobileUA() ? !isMobileView : $config.ICON_TEXT}
-          showToolTip={true}
-        />
-      </View>
+      <AudioMute showToolTip={true} />
 
       {!$config.AUDIO_ROOM && (
-        <>
-          <Spacer size={isMobileView ? 24 : 16} horizontal={true} />
-          <View
-            style={{
-              width: 52,
-              height: 52,
-            }}>
-            <VideoMute
-              isMobileView={isMobileView}
-              showLabel={isMobileUA() ? !isMobileView : $config.ICON_TEXT}
-              showToolTip={true}
-            />
-          </View>
-        </>
+        <View style={{marginLeft: isMobileView ? 24 : 16}}>
+          <VideoMute showToolTip={true} />
+        </View>
       )}
 
-      {/* Settings View in Mobile */}
-      {isMobileView && !isNative && (
-        <>
-          <Spacer size={isMobileView ? 24 : 16} horizontal={true} />
-          <View
-            style={{
-              width: 52,
-              height: 52,
-            }}>
-            <PreCallSettings />
+      {$config.ENABLE_VIRTUAL_BACKGROUND &&
+        !$config.AUDIO_ROOM &&
+        isMobileView && (
+          <View style={{marginLeft: isMobileView ? 24 : 16}}>
+            <VBButton isVBOpen={isVBOpen} setIsVBOpen={setIsVBOpen} />
           </View>
-        </>
-      )}
+        )}
     </View>
   );
 };
+
+const SettingsButton = ({isSettingsOpen, setIsSettingsOpen}) => {
+  return (
+    <ToolbarItem>
+      <IconButton
+        hoverEffect={true}
+        iconProps={{
+          iconBackgroundColor: isSettingsOpen
+            ? $config.PRIMARY_ACTION_BRAND_COLOR
+            : '',
+          tintColor: $config.SECONDARY_ACTION_COLOR,
+          name: 'settings',
+          iconSize: 26,
+        }}
+        btnTextProps={{
+          textColor: $config.FONT_COLOR,
+          text: isSettingsOpen ? 'Hide Settings' : 'Show Settings',
+        }}
+        onPress={() => {
+          setIsSettingsOpen(prev => !prev);
+        }}
+      />
+    </ToolbarItem>
+  );
+};
 export const PreCallLocalMuteComponentsArray: [
   (props: LocalAudioMuteProps) => JSX.Element,
   (props: LocalVideoMuteProps) => JSX.Element,
@@ -152,11 +178,9 @@ export default PreCallLocalMute;
 const style = StyleSheet.create({
   precallControls: {
     flexDirection: 'row',
-    paddingVertical: 32,
+    padding: 8,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: $config.CARD_LAYER_1_COLOR,
-    // borderBottomLeftRadius: 4,
-    // borderBottomRightRadius: 4,
   },
 });

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

@@ -1,21 +1,28 @@
-import {useLocalUserInfo, useRender, useRtc} from 'customization-api';
-import React, {useEffect, useState} from 'react';
-import {
-  View,
-  Image,
-  Modal,
-  TouchableOpacity,
-  StyleSheet,
-  Text,
-} from 'react-native';
+import {useLocalUserInfo} from 'customization-api';
+import React, {useContext, useEffect, useState} from 'react';
+import {View, Image, TouchableOpacity, StyleSheet, Text} from 'react-native';
 import Popup from '../../atoms/Popup';
 import ThemeConfig from '../../theme';
 //@ts-ignore
 import permissionHelper from '../../assets/permission.png';
-import {PermissionState} from '../../../agora-rn-uikit';
+import {DispatchContext, PermissionState} from '../../../agora-rn-uikit';
+import {useString} from '../../utils/useString';
+import {
+  permissionPopupDismissBtnText,
+  permissionPopupHeading,
+  permissionPopupSubHeading,
+} from '../../language/default-labels/precallScreenLabels';
 
 const PermissionHelper = () => {
-  const {dispatch} = useRtc();
+  const heading = useString<any>(permissionPopupHeading)({
+    audioRoom: $config.AUDIO_ROOM,
+  });
+  const subheading = useString<any>(permissionPopupSubHeading)({
+    audioRoom: $config.AUDIO_ROOM,
+  });
+  const dismiss = useString(permissionPopupDismissBtnText)();
+
+  const {dispatch} = useContext(DispatchContext);
   const {permissionStatus} = useLocalUserInfo();
   const [showPopup, setShowPopup] = useState(false);
 
@@ -26,10 +33,41 @@ const PermissionHelper = () => {
     });
   };
   useEffect(() => {
+    Promise.all([
+      navigator.permissions.query(
+        //@ts-ignore
+        {name: 'camera'},
+      ),
+      navigator.permissions.query(
+        //@ts-ignore
+        {name: 'microphone'},
+      ),
+    ])
+      .then(([cameraResult, micResult]) => {
+        // Chrome
+        if (cameraResult.state !== 'granted' || micResult.state !== 'granted') {
+          setShowPopup(true);
+          const onChangeFunc = () => {
+            if (
+              cameraResult.state === 'granted' &&
+              micResult.state === 'granted'
+            )
+              setShowPopup(false);
+          };
+          micResult.onchange = onChangeFunc;
+          cameraResult.onchange = onChangeFunc;
+        }
+      })
+      .catch(e => {
+        // Firefox
+        setTimeout(() => {
+          setShowPopup(true);
+        }, 1000);
+      });
     //If permission already given it will take few milliseconds to resolve the promise. it will show the popup which not required. so added timeout
-    setTimeout(() => {
-      setShowPopup(true);
-    }, 500);
+    // setTimeout(() => {
+    //   setShowPopup(true);
+    // }, 1000);
   }, []);
   //todo hari update the modal message based the veritical
   return (
@@ -47,23 +85,13 @@ const PermissionHelper = () => {
           />
         </View>
         <View style={styles.modalContent}>
-          <Text style={styles.infoMessage1}>
-            {$config.AUDIO_ROOM
-              ? 'Allow access to microphone'
-              : 'Allow access to camera and microphone'}
-          </Text>
-          <Text style={styles.infoMessage2}>
-            Select
-            <Text style={styles.infoMessage2Highlight}>{` “Allow” `}</Text>
-            {$config.AUDIO_ROOM
-              ? 'for others to hear you'
-              : 'for others to see and hear you'}
-          </Text>
+          <Text style={styles.infoMessage1}>{heading}</Text>
+          <Text style={styles.infoMessage2}>{subheading}</Text>
           <TouchableOpacity
             onPress={() => {
               closePopup();
             }}>
-            <Text style={styles.dismissBtn}>Dismiss</Text>
+            <Text style={styles.dismissBtn}>{dismiss}</Text>
           </TouchableOpacity>
         </View>
       </Popup>

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

@@ -47,6 +47,7 @@ const styles = StyleSheet.create({
     borderRadius: 4,
     padding: 0,
     width: '100%',
+    height: '95%',
   },
   containerStyle: {},
 });

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

@@ -0,0 +1,173 @@
+import {StyleSheet, Text, View, Linking, TouchableOpacity} from 'react-native';
+import React, {useEffect, useRef, useContext} from 'react';
+import {
+  isAndroid,
+  isIOS,
+  isWebInternal,
+  useResponsive,
+} from '../../utils/common';
+import {
+  LocalContext,
+  PermissionState,
+  ImageIcon as UiKitImageIcon,
+} from '../../../agora-rn-uikit';
+import ThemeConfig from '../../theme';
+import {useContent} from 'customization-api';
+import {usePreCall} from './usePreCall';
+import ImageIcon from '../../atoms/ImageIcon';
+import Spacer from '../../atoms/Spacer';
+import Toast from '../../../react-native-toast-message';
+import {useString} from '../../utils/useString';
+import {
+  permissionPopupErrorToastHeading,
+  permissionPopupErrorToastSubHeading,
+} from '../../language/default-labels/precallScreenLabels';
+
+const VideoFallback = () => {
+  const toastHeading = useString<boolean>(permissionPopupErrorToastHeading);
+  const toastSubHeading = useString<boolean>(
+    permissionPopupErrorToastSubHeading,
+  );
+
+  const {isCameraAvailable, isMicAvailable} = usePreCall();
+  const toastRef = useRef({isShown: false});
+  const local = useContext(LocalContext);
+  const requestCameraAndAudioPermission = () => {
+    try {
+      const URL =
+        'https://support.google.com/chrome/answer/2693767?hl=en&co=GENIE.Platform%3DDesktop';
+      if (isWebInternal()) {
+        window.open(URL, '_blank');
+      } else {
+        Linking.openURL(URL);
+      }
+    } catch (error) {
+      console.error(`Couldn't open the support url`);
+    }
+  };
+
+  const styles = useStyles();
+  useEffect(() => {
+    // camera not avaialble popup is not shown for native devices
+    if (isAndroid() || isIOS()) return;
+    if (
+      !(
+        isCameraAvailable ||
+        ($config.AUDIO_ROOM && isMicAvailable) ||
+        local.permissionStatus === PermissionState.NOT_REQUESTED ||
+        local.permissionStatus === PermissionState.REQUESTED
+      ) &&
+      toastRef.current.isShown === false
+    ) {
+      toastRef.current.isShown = true;
+      Toast.show({
+        type: 'warn',
+        text1: toastHeading($config.AUDIO_ROOM),
+        text2: toastSubHeading($config.AUDIO_ROOM),
+        visibilityTime: 10000,
+      });
+    }
+  }, [local, isCameraAvailable, isMicAvailable]);
+
+  return (
+    <View style={styles.fallbackRootContainer}>
+      {
+        // isCameraAvailable ||
+        // ($config.AUDIO_ROOM && isMicAvailable) ||
+        // local.permissionStatus === PermissionState.NOT_REQUESTED ||
+        // local.permissionStatus === PermissionState.REQUESTED
+        true ? (
+          <View style={styles.avatar}>
+            <UiKitImageIcon name={'profile'} />
+          </View>
+        ) : (
+          <View style={styles.fallbackContainer}>
+            <Text style={styles.infoText1}>
+              Can’t Find Your{$config.AUDIO_ROOM ? ' Microphone' : ' Camera'}
+            </Text>
+            <Text style={styles.infoText2}>
+              Check your system settings to make sure that a
+              {$config.AUDIO_ROOM ? ' microphone' : ' camera'} is available. If
+              not, plug one in and restart your browser.
+            </Text>
+            <Spacer size={33} />
+            <TouchableOpacity
+              style={{
+                flexDirection: 'row',
+                alignSelf: 'center',
+              }}
+              onPress={() => {
+                requestCameraAndAudioPermission();
+              }}>
+              <Text style={styles.retryBtn}>Learn More</Text>
+              <Spacer horizontal={true} size={4} />
+              <View style={{alignSelf: 'center'}}>
+                <ImageIcon
+                  iconType="plain"
+                  name={'link-share'}
+                  tintColor={$config.PRIMARY_ACTION_BRAND_COLOR}
+                />
+              </View>
+            </TouchableOpacity>
+            <Spacer size={23} />
+          </View>
+        )
+      }
+    </View>
+  );
+};
+
+export default VideoFallback;
+
+const useStyles = () => {
+  const getResponsiveValue = useResponsive();
+  return StyleSheet.create({
+    infoText1: {
+      fontFamily: ThemeConfig.FontFamily.sansPro,
+      fontWeight: '700',
+      fontSize: 20,
+      textAlign: 'center',
+      color: $config.FONT_COLOR,
+      paddingTop: 24,
+      paddingBottom: 12,
+      paddingHorizontal: 10,
+    },
+    infoText2: {
+      fontFamily: ThemeConfig.FontFamily.sansPro,
+      fontWeight: '400',
+      fontSize: ThemeConfig.FontSize.small,
+      textAlign: 'center',
+      color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled,
+      paddingHorizontal: getResponsiveValue(48),
+    },
+    fallbackRootContainer: {
+      flex: 1,
+      backgroundColor: $config.VIDEO_AUDIO_TILE_COLOR,
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderTopLeftRadius: 8,
+      borderTopRightRadius: 8,
+    },
+    fallbackContainer: {
+      minHeight: 200,
+      maxWidth: 440,
+      backgroundColor: $config.CARD_LAYER_4_COLOR,
+      borderRadius: ThemeConfig.BorderRadius.large,
+      justifyContent: 'center',
+      alignItems: 'center',
+      margin: 40,
+    },
+    retryBtn: {
+      fontFamily: ThemeConfig.FontFamily.sansPro,
+      fontWeight: '600',
+      fontSize: ThemeConfig.FontSize.normal,
+      color: $config.PRIMARY_ACTION_BRAND_COLOR,
+      alignSelf: 'center',
+    },
+    avatar: {
+      width: 100,
+      height: 100,
+      margin: 40,
+    },
+  });
+};

package/template/src/components/precall/VideoPreview.native.tsx

@@ -10,18 +10,16 @@
 *********************************************
 */
 
-import {useRender, useRtc} from 'customization-api';
+import {useContent, useRtc} from 'customization-api';
 import React from 'react';
-import {View, StyleSheet} from 'react-native';
 import {MaxVideoView} from '../../../agora-rn-uikit';
-import PreCallLocalMute from './LocalMute';
-import {ImageIcon as UiKitImageIcon} from '../../../agora-rn-uikit';
+import VideoFallback from './VideoFallback';
 
-const VideoPreview: React.FC = () => {
+const VideoPreview = () => {
   const rtc = useRtc();
-  rtc?.RtcEngine?.startPreview();
+  rtc?.RtcEngineUnsafe?.startPreview();
 
-  const {renderList, activeUids} = useRender();
+  const {defaultContent, activeUids} = useContent();
   const [maxUid] = activeUids;
 
   if (!maxUid) {
@@ -29,52 +27,20 @@ const VideoPreview: React.FC = () => {
   }
 
   return (
-    <View style={styles.container}>
-      <View style={{flex: 1}}>
-        <MaxVideoView
-          user={renderList[maxUid]}
-          key={maxUid}
-          fallback={Fallback}
-          containerStyle={{
-            width: '100%',
-            height: '100%',
-            borderBottomLeftRadius: 8,
-            borderBottomRightRadius: 8,
-          }}
-        />
-      </View>
-      <PreCallLocalMute isMobileView={true} />
-    </View>
-  );
-};
-export default VideoPreview;
-
-const Fallback = () => {
-  return (
-    <View style={styles.fallbackRootContainer}>
-      <View style={styles.avatar}>
-        {/*TODO fix ttf file <ImageIcon name="profile" customSize={{width: 100, height: 100}} /> */}
-        <UiKitImageIcon name={'profile'} />
-      </View>
-    </View>
+    <MaxVideoView
+      user={defaultContent[maxUid]}
+      key={maxUid}
+      fallback={VideoFallback}
+      containerStyle={{
+        width: '100%',
+        height: '100%',
+        borderTopLeftRadius: 12,
+        borderTopRightRadius: 12,
+        overflow: 'hidden',
+      }}
+      isFullView={true}
+    />
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    position: 'relative',
-    justifyContent: 'space-between',
-  },
-  avatar: {
-    height: 100,
-    width: 100,
-  },
-  fallbackRootContainer: {
-    flex: 1,
-    backgroundColor: $config.VIDEO_AUDIO_TILE_COLOR,
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'relative',
-  },
-});
+export default VideoPreview;