agora-appbuilder-core 3.0.10 → 3.0.12

package/template/src/components/participants/ScreenshareParticipants.tsx

@@ -9,152 +9,20 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useRef, useState} from 'react';
-import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
-import ThemeConfig from '../../theme';
-import UserAvatar from '../../atoms/UserAvatar';
-import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
-import {RenderInterface} from 'customization-api';
-import {isWebInternal, isMobileUA} from '../../utils/common';
-import IconButton from '../../atoms/IconButton';
-import UserActionMenuOptionsOptions from './UserActionMenuOptions';
+import React from 'react';
+import {View, Text} from 'react-native';
+import ParticipantName from './ParticipantName';
 
-const ScreenshareParticipants = (props: {user: RenderInterface}) => {
-  const screenshareRef = useRef();
-  const [isHovered, setIsHovered] = useState(false);
-  const [actionMenuVisible, setActionMenuVisible] = useState(false);
-
-  const showModal = () => {
-    setActionMenuVisible((state) => !state);
-  };
+const ScreenshareParticipants = (props: any) => {
+  const {p_styles, name} = props;
   return (
-    <>
-      {/* {renderActionMenu()} */}
-      <UserActionMenuOptionsOptions
-        actionMenuVisible={actionMenuVisible}
-        setActionMenuVisible={setActionMenuVisible}
-        user={props.user}
-        btnRef={screenshareRef}
-        from={'screenshare-participant'}
-      />
-      <PlatformWrapper showModal={showModal} setIsHovered={setIsHovered}>
-        <View style={styles.container}>
-          <View style={styles.userInfoContainer}>
-            <View style={styles.bgContainerStyle}>
-              <UserAvatar
-                name={props.user.name}
-                containerStyle={styles.containerStyle}
-                textStyle={styles.textStyle}
-              />
-            </View>
-            <View style={{alignSelf: 'center'}}>
-              <Text style={styles.participantNameText}>{props.user.name}</Text>
-            </View>
-          </View>
-          {true ? (
-            <View
-              style={styles.iconContainer}
-              ref={screenshareRef}
-              collapsable={false}>
-              {isHovered || actionMenuVisible || isMobileUA() ? (
-                //todo mobile by default it should show
-                <View
-                  style={{
-                    width: 24,
-                    height: 24,
-                    alignSelf: 'center',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    borderRadius: 20,
-                  }}>
-                  <IconButton
-                    hoverEffect={true}
-                    hoverEffectStyle={{
-                      backgroundColor:
-                        $config.CARD_LAYER_5_COLOR +
-                        hexadecimalTransparency['20%'],
-                      borderRadius: 20,
-                      padding: 5,
-                    }}
-                    iconProps={{
-                      iconType: 'plain',
-                      name: 'more-menu',
-                      iconSize: 20,
-                      tintColor: $config.SECONDARY_ACTION_COLOR,
-                    }}
-                    onPress={() => {
-                      showModal();
-                    }}
-                  />
-                </View>
-              ) : (
-                <></>
-              )}
-            </View>
-          ) : (
-            <></>
-          )}
-        </View>
-      </PlatformWrapper>
-    </>
+    <View style={p_styles.participantRow}>
+      <ParticipantName value={name} />
+      <View style={p_styles.dummyView}>
+        {/** its just the placeholder to adjust the UI. if no icon option to be shown */}
+        <Text>local screen sharing</Text>
+      </View>
+    </View>
   );
 };
 export default ScreenshareParticipants;
-
-const PlatformWrapper = ({children, showModal, setIsHovered}) => {
-  return isWebInternal() ? (
-    <div
-      onMouseEnter={() => {
-        setIsHovered(true);
-      }}
-      onMouseLeave={() => {
-        setIsHovered(false);
-      }}>
-      {children}
-    </div>
-  ) : (
-    <>{children}</>
-  );
-};
-
-const styles = StyleSheet.create({
-  bgContainerStyle: {
-    backgroundColor: $config.VIDEO_AUDIO_TILE_AVATAR_COLOR,
-    width: 36,
-    height: 36,
-    borderRadius: 18,
-    marginRight: 8,
-  },
-  containerStyle: {
-    width: 36,
-    height: 36,
-    borderRadius: 18,
-  },
-  textStyle: {
-    fontSize: ThemeConfig.FontSize.tiny,
-    lineHeight: 10,
-    fontWeight: '400',
-    color: $config.CARD_LAYER_1_COLOR,
-  },
-  participantNameText: {
-    fontWeight: '400',
-    fontSize: 12,
-    lineHeight: 15,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    flexDirection: 'row',
-    color: $config.FONT_COLOR,
-    textAlign: 'left',
-  },
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingHorizontal: 20,
-    paddingVertical: 8,
-  },
-  userInfoContainer: {
-    flexDirection: 'row',
-  },
-  iconContainer: {
-    flexDirection: 'row',
-  },
-});

package/template/src/components/precall/{LocalMute1.native.tsx → LocalMute.native.tsx}

@@ -10,7 +10,7 @@
 *********************************************
 */
 import React from 'react';
-import {View, StyleSheet, Text} from 'react-native';
+import {View, StyleSheet} from 'react-native';
 import {useCustomization} from 'customization-implementation';
 import {isValidReactComponent} from '../../utils/common';
 import LocalAudioMute, {
@@ -22,7 +22,6 @@ import LocalVideoMute, {
 import LocalSwitchCamera, {
   LocalSwitchCameraProps,
 } from '../../subComponents/LocalSwitchCamera';
-import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
 
 const PreCallLocalMute: React.FC = () => {
   const {VideoMute, AudioMute} = useCustomization((data) => {
@@ -64,18 +63,9 @@ const PreCallLocalMute: React.FC = () => {
     // }
     return components;
   });
-
   return (
-    <View style={style.precallControls} testID="precall-controls">
-      {!$config.AUDIO_ROOM && (
-        <View style={{alignSelf: 'center', marginRight: 30}}>
-          <VideoMute />
-        </View>
-      )}
-      <View style={{alignSelf: 'center'}}>
-        <AudioMute />
-      </View>
-      {/* <View style={style.width50}>
+    <>
+      <View style={style.width50}>
         <AudioMute />
       </View>
       {!$config.AUDIO_ROOM && (
@@ -89,8 +79,8 @@ const PreCallLocalMute: React.FC = () => {
             <LocalSwitchCamera />
           </View>
         </>
-      )} */}
-    </View>
+      )}
+    </>
   );
 };
 export const PreCallLocalMuteComponentsArray: [
@@ -102,10 +92,4 @@ export default PreCallLocalMute;
 
 const style = StyleSheet.create({
   width50: {width: 50},
-  precallControls: {
-    flexDirection: 'row',
-    paddingVertical: 10,
-    justifyContent: 'center',
-    backgroundColor: $config.CARD_LAYER_1_COLOR,
-  },
 });

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

@@ -9,28 +9,18 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState, useEffect, useContext} from 'react';
+import React from 'react';
 import {View, StyleSheet} from 'react-native';
 import {useCustomization} from 'customization-implementation';
-import {
-  isAndroid,
-  isIOS,
-  isMobileUA,
-  isValidReactComponent,
-} from '../../utils/common';
+import {isValidReactComponent} from '../../utils/common';
 import LocalVideoMute, {
   LocalVideoMuteProps,
 } from '../../subComponents/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';
 
-const PreCallLocalMute = (props: {isMobileView?: boolean}) => {
+const PreCallLocalMute: React.FC = () => {
   const {VideoMute, AudioMute} = useCustomization((data) => {
     let components: {
       VideoMute: React.ComponentType<LocalAudioMuteProps>;
@@ -70,74 +60,15 @@ const PreCallLocalMute = (props: {isMobileView?: boolean}) => {
     // }
     return components;
   });
-  const {isMobileView = false} = 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) => {
-    if (device.kind === 'audioinput') {
-      return true;
-    }
-  });
-  const videoDevices = deviceList.filter((device) => {
-    if (device.kind === 'videoinput') {
-      return true;
-    }
-  });
-  useEffect(() => {
-    if (audioDevices && audioDevices.length) {
-      isMobileView && !isNative && setMicAvailable(true);
-    }
-  }, [audioDevices]);
-
-  useEffect(() => {
-    if (videoDevices && videoDevices.length) {
-      isMobileView && !isNative && setCameraAvailable(true);
-    }
-  }, [videoDevices]);
   return (
-    <View
-      style={[style.precallControls, isMobileView && {paddingVertical: 10}]}
-      testID="precall-controls">
-      <View style={{width: 52, height: 52}}>
-        <AudioMute
-          isMobileView={isMobileView}
-          showLabel={isMobileUA() ? !isMobileView : $config.ICON_TEXT}
-          showToolTip={true}
-        />
+    <View style={style.precallControls}>
+      <View style={{alignSelf: 'center'}}>
+        <AudioMute />
       </View>
-
       {!$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>
-        </>
-      )}
-
-      {/* Settings View in Mobile */}
-      {isMobileView && !isNative && (
-        <>
-          <Spacer size={isMobileView ? 24 : 16} horizontal={true} />
-          <View
-            style={{
-              width: 52,
-              height: 52,
-            }}>
-            <PreCallSettings />
-          </View>
-        </>
+        <View style={{alignSelf: 'center'}}>
+          <VideoMute />
+        </View>
       )}
     </View>
   );
@@ -152,11 +83,10 @@ export default PreCallLocalMute;
 const style = StyleSheet.create({
   precallControls: {
     flexDirection: 'row',
-    paddingVertical: 32,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: $config.CARD_LAYER_1_COLOR,
-    // borderBottomLeftRadius: 4,
-    // borderBottomRightRadius: 4,
+    alignSelf: 'center',
+    padding: 10,
+    width: '40%',
+    justifyContent: 'space-around',
+    marginVertical: '5%',
   },
 });

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

@@ -12,10 +12,8 @@
 
 import {useRender, useRtc} from 'customization-api';
 import React from 'react';
-import {View, StyleSheet} from 'react-native';
+import {View} from 'react-native';
 import {MaxVideoView} from '../../../agora-rn-uikit';
-import PreCallLocalMute from './LocalMute';
-import {ImageIcon as UiKitImageIcon} from '../../../agora-rn-uikit';
 
 const VideoPreview: React.FC = () => {
   const rtc = useRtc();
@@ -29,52 +27,9 @@ 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 style={{borderRadius: 10, flex: 1}}>
+      <MaxVideoView user={renderList[maxUid]} key={maxUid} />
     </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>
-  );
-};
-
-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',
-  },
-});

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

@@ -10,92 +10,12 @@
 *********************************************
 */
 
-import React, {useContext, useState} from 'react';
-import {
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  TouchableOpacity,
-  Linking,
-} from 'react-native';
-import {MaxVideoView} from '../../../agora-rn-uikit';
-import PreCallLocalMute from './LocalMute';
-import {
-  LocalContext,
-  PermissionState,
-  ImageIcon as UiKitImageIcon,
-} from '../../../agora-rn-uikit';
 import {useRender} from 'customization-api';
-import {usePreCall} from './usePreCall';
-import ImageIcon from '../../atoms/ImageIcon';
-import ThemeConfig from '../../theme';
-import Spacer from '../../atoms/Spacer';
-import {isMobileUA, isWebInternal, useResponsive} from '../../utils/common';
-
-const Fallback = () => {
-  const {isCameraAvailable, isMicAvailable} = usePreCall();
-  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();
-  return (
-    <View style={styles.fallbackRootContainer}>
-      {isCameraAvailable ||
-      ($config.AUDIO_ROOM && isMicAvailable) ||
-      local.permissionStatus === PermissionState.NOT_REQUESTED ||
-      local.permissionStatus === PermissionState.REQUESTED ? (
-        <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>
-  );
-};
+import React from 'react';
+import {View} from 'react-native';
+import {MaxVideoView} from '../../../agora-rn-uikit';
 
-const VideoPreview = () => {
+const VideoPreview: React.FC = () => {
   const {renderList, activeUids} = useRender();
 
   const [maxUid] = activeUids;
@@ -103,87 +23,11 @@ const VideoPreview = () => {
   if (!maxUid) {
     return null;
   }
-  const styles = useStyles();
+
   return (
-    <View style={[styles.container]}>
-      <View
-        style={{
-          flex: 1,
-        }}>
-        <MaxVideoView
-          user={renderList[maxUid]}
-          key={maxUid}
-          fallback={Fallback}
-          containerStyle={{
-            minHeight: 200,
-            width: '100%',
-            height: '100%',
-            // borderTopLeftRadius: 4,
-            // borderTopRightRadius: 4,
-          }}
-        />
-      </View>
-      <PreCallLocalMute isMobileView={isMobileUA() ? true : false} />
+    <View style={{borderRadius: 10, flex: 1}}>
+      <MaxVideoView user={renderList[maxUid]} key={maxUid} />
     </View>
   );
 };
 export default VideoPreview;
-
-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: 4,
-      // borderTopRightRadius: 4,
-    },
-    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',
-    },
-    container: {
-      flex: 1,
-      position: 'relative',
-      justifyContent: 'space-between',
-      overflow: 'hidden',
-    },
-    avatar: {
-      width: 100,
-      height: 100,
-      margin: 40,
-    },
-  });
-};

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

@@ -21,7 +21,6 @@ import useGetName from '../../utils/useGetName';
 import {useWakeLock} from '../../components/useWakeLock';
 import isMobileOrTablet from '../../utils/isMobileOrTablet';
 import {isWebInternal} from '../../utils/common';
-import useSetName from '../../utils/useSetName';
 
 const audio = new Audio(
   'https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3',
@@ -39,7 +38,6 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   const {rtcProps} = useContext(PropsContext);
   const {setCallActive} = usePreCall();
   const username = useGetName();
-  const setUsername = useSetName();
   const {isJoinDataFetched} = useMeetingInfo();
   const {awake, request} = useWakeLock();
   const joinRoomButton =
@@ -53,7 +51,6 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   );
 
   const onSubmit = () => {
-    setUsername(username.trim());
     setCallActive(true);
     // Play a sound to avoid autoblocking in safari
     if (isWebInternal() || isMobileOrTablet()) {
@@ -83,21 +80,11 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
 
   const title = buttonText;
   const onPress = () => onSubmit();
-  const disabled = !isJoinDataFetched || username?.trim() === '';
+  const disabled = !isJoinDataFetched || username === '';
   return props?.render ? (
     props.render(onPress, title, disabled)
   ) : (
-    <PrimaryButton
-      // iconName={'video-on'}
-      onPress={onPress}
-      disabled={disabled}
-      text={title}
-      containerStyle={{
-        minWidth: '100%',
-        paddingHorizontal: 10,
-      }}
-      textStyle={{textAlign: 'center'}}
-    />
+    <PrimaryButton onPress={onPress} disabled={disabled} text={title} />
   );
 };