agora-appbuilder-core 3.0.10 → 3.0.12

package/template/src/subComponents/ToastConfig.tsx

@@ -11,37 +11,9 @@
 */
 // @ts-nocheck
 import React from 'react';
-import {Platform, TouchableOpacity, View, StyleSheet} from 'react-native';
-import ThemeConfig from '../theme';
+import {Platform} from 'react-native';
 import Toast, {BaseToast} from '../../react-native-toast-message';
-import CheckBoxBaseToast from '../../react-native-toast-message/src/components/checkbox';
 import isMobileOrTablet from '../utils/isMobileOrTablet';
-import ImageIcon from '../atoms/ImageIcon';
-import {IconsInterface} from 'src/atoms/CustomIcon';
-import {autoUpdater} from 'electron';
-
-const trailingIcon = (
-  <TouchableOpacity
-    onPress={() => Toast.hide()}
-    style={{alignSelf: 'flex-end'}}>
-    <View style={{width: 26, height: 26}}>
-      <ImageIcon
-        iconType="plain"
-        tintColor={$config.SECONDARY_ACTION_COLOR}
-        name="close"
-        iconSize={26}
-      />
-    </View>
-  </TouchableOpacity>
-);
-
-const leadingIcon = (iconName: keyof IconsInterface, color: string) => {
-  return (
-    <View style={{marginRight: 4, alignSelf: 'center', width: 26, height: 26}}>
-      <ImageIcon iconType="plain" tintColor={color} name={iconName} />
-    </View>
-  );
-};
 
 const ToastConfig = {
   /* 
@@ -52,134 +24,22 @@ const ToastConfig = {
     <BaseToast
       {...rest}
       //BaseToast is modified to have zIndex: 100
-      leadingIcon={leadingIcon('tick-fill', $config.SEMANTIC_SUCCESS)}
-      trailingIcon={trailingIcon}
       style={{
-        borderRadius: 4,
-        borderTopWidth: 6,
-        backgroundColor: $config.CARD_LAYER_4_COLOR,
-        //width: !isMobileOrTablet() ? '40%' : '95%',
-        width: '100%',
-        borderTopColor: $config.SEMANTIC_SUCCESS,
+        borderLeftColor: $config.PRIMARY_COLOR,
+        backgroundColor: $config.SECONDARY_FONT_COLOR,
+        width: !isMobileOrTablet() ? '40%' : '95%',
       }}
-      contentContainerStyle={styles.contentContainerStyle}
-      text1Style={styles.text1Style}
-      text2Style={styles.text2Style}
-      text1={text1}
-      text2={text2}
-      primaryBtn={null}
-      secondaryBtn={null}
-    />
-  ),
-  error: ({text1, text2, props, ...rest}) => (
-    <BaseToast
-      {...rest}
-      //BaseToast is modified to have zIndex: 100
-      leadingIcon={leadingIcon('alert', $config.SEMANTIC_ERROR)}
-      trailingIcon={trailingIcon}
-      style={{
-        borderRadius: 4,
-        borderTopWidth: 6,
-        backgroundColor: $config.CARD_LAYER_4_COLOR,
-        //width: !isMobileOrTablet() ? '40%' : '95%',
-        width: '100%',
-        borderTopColor: $config.SEMANTIC_ERROR,
+      contentContainerStyle={{paddingHorizontal: 15, overflow: 'hidden'}}
+      text1Style={{
+        fontSize: 15,
+        fontWeight: '400',
+        color: $config.PRIMARY_FONT_COLOR,
       }}
-      contentContainerStyle={styles.contentContainerStyle}
-      text1Style={styles.text1Style}
-      text2Style={styles.text2Style}
       text1={text1}
       text2={text2}
-      primaryBtn={null}
-      secondaryBtn={null}
-    />
-  ),
-  info: ({text1, text2, props, primaryBtn, secondaryBtn, ...rest}) => (
-    <BaseToast
-      {...rest}
-      //BaseToast is modified to have zIndex: 100
-      trailingIcon={trailingIcon}
-      style={{
-        height: 'auto', //primaryBtn || secondaryBtn ? 185 : text1 && text2 ? 105 : 70,
-        borderRadius: ThemeConfig.BorderRadius.small,
-        borderTopWidth: 6,
-        backgroundColor: $config.CARD_LAYER_4_COLOR,
-        width: '100%',
-        borderTopColor: $config.PRIMARY_ACTION_BRAND_COLOR,
-      }}
-      contentContainerStyle={styles.contentContainerStyle}
-      text1Style={styles.text1Style}
-      text2Style={styles.text2Style}
-      text1={text1}
-      text2={text2}
-      primaryBtn={primaryBtn ? primaryBtn : null}
-      secondaryBtn={secondaryBtn ? secondaryBtn : null}
-    />
-  ),
-  checked: ({
-    text1,
-    text2,
-    props,
-    primaryBtn,
-    secondaryBtn,
-    checkbox,
-    ...rest
-  }) => (
-    <CheckBoxBaseToast
-      {...rest}
-      //BaseToast is modified to have zIndex: 100
-      trailingIcon={trailingIcon}
-      style={{
-        height: primaryBtn || secondaryBtn ? 185 : text1 && text2 ? 105 : 70,
-        borderRadius: 4,
-        borderTopWidth: 6,
-        backgroundColor: $config.CARD_LAYER_4_COLOR,
-        width: '100%',
-        borderTopColor: $config.PRIMARY_ACTION_BRAND_COLOR,
-      }}
-      contentContainerStyle={styles.contentContainerStyle}
-      text1Style={styles.text1Style}
-      text2Style={styles.text2Style}
-      subTextStyle={styles.subTextStyle}
-      text1={text1}
-      text2={text2}
-      primaryBtn={primaryBtn ? primaryBtn : null}
-      secondaryBtn={secondaryBtn ? secondaryBtn : null}
-      checkbox={checkbox}
+      // text2={props.uuid}
     />
   ),
 };
 
 export default ToastConfig;
-
-const styles = StyleSheet.create({
-  text1Style: {
-    fontSize: ThemeConfig.FontSize.normal,
-    lineHeight: 22,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '600',
-    color: $config.FONT_COLOR,
-    alignSelf: 'center',
-  },
-  text2Style: {
-    fontSize: ThemeConfig.FontSize.normal,
-    lineHeight: 22,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '400',
-    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
-    marginTop: 11,
-    alignSelf: 'center',
-  },
-  subTextStyle: {
-    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
-  },
-  contentContainerStyle: {
-    paddingHorizontal: 15,
-    paddingTop: 20,
-    paddingBottom: 25,
-    overflow: 'hidden',
-    flexDirection: 'column',
-    justifyContent: 'flex-start',
-  },
-  containerStyle: {},
-});

package/template/src/subComponents/chat/ChatParticipants.tsx

@@ -1,229 +1,120 @@
-import React, {useState} from 'react';
+import React, {useContext} from 'react';
 import {
   View,
   Text,
+  TouchableOpacity,
   ScrollView,
   useWindowDimensions,
   StyleSheet,
-  Pressable,
 } from 'react-native';
 import {RFValue} from 'react-native-responsive-fontsize';
 import TextWithTooltip from '../TextWithTooltip';
 import {useString} from '../../utils/useString';
-import {isIOS, isMobileUA, isWebInternal} from '../../utils/common';
+import {isIOS, isWebInternal} from '../../utils/common';
 import {useChatNotification} from '../../components/chat-notification/useChatNotification';
 import {UidType, useLocalUid} from '../../../agora-rn-uikit';
-import ImageIcon from '../../atoms/ImageIcon';
 import {useRender} from 'customization-api';
-import UserAvatar from '../../atoms/UserAvatar';
-import ThemeConfig from '../../theme';
-import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
-import Spacer from '../../atoms/Spacer';
-
-const ChatIcon = () => (
-  <View style={{alignSelf: 'center', marginRight: 20}}>
-    <ImageIcon
-      iconType="plain"
-      name="chat-nav"
-      tintColor={$config.SECONDARY_ACTION_COLOR}
-    />
-  </View>
-);
 
 const ChatParticipants = (props: any) => {
   //commented for v1 release
   //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
   const remoteUserDefaultLabel = 'User';
   const {selectUser} = props;
-  const {renderList, activeUids} = useRender();
+  const {height, width} = useWindowDimensions();
+  const {renderList} = useRender();
   const localUid = useLocalUid();
   const {unreadIndividualMessageCount} = useChatNotification();
-  const isMobile = isMobileUA();
+  const isChatUser = (userId: UidType, userInfo: any) => {
+    return (
+      userId !== localUid && //user can't chat with own user
+      // @ts-ignore
+      userId !== '1' && //user can't chat with pstn user
+      userInfo?.type === 'rtc' &&
+      !userInfo?.offline
+    );
+  };
+
   return (
     <ScrollView>
-      {activeUids && activeUids.length === 1 ? (
-        <View style={style.defaultMessageContainer}>
-          <Text style={style.defaultMessageText}>
-            No one else has joined yet.
-          </Text>
-        </View>
-      ) : (
-        <></>
-      )}
-      {Object.keys(renderList)
-        .map((i) => parseInt(i))
-        .filter((i) => {
-          try {
-            if (isNaN(i)) {
-              return false;
-            } else {
-              const userId = i;
-              const userInfo = renderList[userId];
-              return (
-                userId !== localUid && //user can't chat with own user
-                // @ts-ignore
-                userId !== '1' && //user can't chat with pstn user
-                userInfo?.type === 'rtc' &&
-                !userInfo?.offline
-              );
-            }
-          } catch (error) {
-            return false;
-          }
-        })
-        .sort((a, b) => {
+      {Object.entries(renderList).map(([uid, value]) => {
+        const uidAsNumber = parseInt(uid);
+        if (isChatUser(uidAsNumber, value)) {
           return (
-            renderList[b]?.lastMessageTimeStamp -
-            renderList[a]?.lastMessageTimeStamp
+            <TouchableOpacity
+              style={style.participantContainer}
+              key={uid}
+              onPress={() => {
+                selectUser(uidAsNumber);
+              }}>
+              {unreadIndividualMessageCount &&
+              unreadIndividualMessageCount[uidAsNumber] ? (
+                <View style={style.chatNotificationPrivate}>
+                  <Text>{unreadIndividualMessageCount[uidAsNumber]}</Text>
+                </View>
+              ) : null}
+              <View style={{flex: 1}}>
+                <TextWithTooltip
+                  touchable={false}
+                  style={[
+                    style.participantText,
+                    {
+                      fontSize: RFValue(16, height > width ? height : width),
+                    },
+                  ]}
+                  value={
+                    renderList[uidAsNumber]
+                      ? renderList[uidAsNumber].name + ''
+                      : remoteUserDefaultLabel
+                  }
+                />
+              </View>
+              <View>
+                <Text
+                  style={{
+                    color: $config.PRIMARY_FONT_COLOR,
+                    fontSize: 18,
+                  }}>{`>`}</Text>
+              </View>
+            </TouchableOpacity>
           );
-        })
-        .map((uid) => {
-          const uidAsNumber = uid;
-          const name = renderList[uidAsNumber]
-            ? renderList[uidAsNumber].name + ''
-            : remoteUserDefaultLabel;
-          return (
-            <PlatformWrapper key={'chat-participant' + uid}>
-              {(isHovered: boolean) => {
-                return (
-                  <Pressable
-                    onPress={() => {
-                      selectUser(uidAsNumber);
-                    }}>
-                    <View style={style.participantContainer}>
-                      <View style={style.bgContainerStyle}>
-                        <UserAvatar
-                          name={name}
-                          containerStyle={style.userAvatarContainer}
-                          textStyle={style.userAvatarText}
-                        />
-                      </View>
-                      <View style={style.participantTextContainer}>
-                        <Text numberOfLines={1} style={[style.participantText]}>
-                          {name}
-                        </Text>
-                      </View>
-                      {unreadIndividualMessageCount &&
-                      unreadIndividualMessageCount[uidAsNumber] &&
-                      !isHovered ? (
-                        <>
-                          <View style={style.chatNotificationPrivate}>
-                            <Text style={style.chatNotificationCountText}>
-                              {unreadIndividualMessageCount[uidAsNumber]}
-                            </Text>
-                          </View>
-                          <Spacer size={20} horizontal={true} />
-                        </>
-                      ) : isMobile || isHovered ? (
-                        <ChatIcon />
-                      ) : (
-                        <></>
-                      )}
-                    </View>
-                  </Pressable>
-                );
-              }}
-            </PlatformWrapper>
-          );
-        })}
+        }
+      })}
     </ScrollView>
   );
 };
 
-const PlatformWrapper = ({children}) => {
-  const [isHovered, setIsHovered] = useState(false);
-  return isWebInternal() && !isMobileUA() ? (
-    <div
-      style={{
-        backgroundColor: isHovered
-          ? $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['10%']
-          : 'transparent',
-        cursor: isHovered ? 'pointer' : 'auto',
-      }}
-      onMouseEnter={() => {
-        setIsHovered(true);
-      }}
-      onMouseLeave={() => {
-        setIsHovered(false);
-      }}>
-      {children(isHovered)}
-    </div>
-  ) : (
-    <>{children(false)}</>
-  );
-};
-
 const style = StyleSheet.create({
-  defaultMessageContainer: {
-    backgroundColor: $config.CARD_LAYER_2_COLOR,
-    borderRadius: 8,
-    padding: 12,
-    marginTop: 20,
-    marginHorizontal: 20,
-    marginBottom: 0,
-  },
-  defaultMessageText: {
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '400',
-    fontSize: 12,
-    color: $config.FONT_COLOR + hexadecimalTransparency['40%'],
-  },
-  bgContainerStyle: {
-    backgroundColor: $config.VIDEO_AUDIO_TILE_AVATAR_COLOR,
-    width: 36,
-    height: 36,
-    borderRadius: 18,
-    marginRight: 8,
-    marginLeft: 20,
-    marginVertical: 8,
-  },
-  userAvatarContainer: {
-    width: 36,
-    height: 36,
-    borderRadius: 18,
-  },
-  userAvatarText: {
-    fontSize: ThemeConfig.FontSize.tiny,
-    lineHeight: 12,
-    fontWeight: '400',
-    color: $config.CARD_LAYER_1_COLOR,
-  },
   participantContainer: {
     flexDirection: 'row',
-    //  flex: 1,
-    overflow: 'hidden',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  participantTextContainer: {
     flex: 1,
-    alignSelf: 'center',
+    height: 20,
+    marginTop: 10,
+    backgroundColor: $config.SECONDARY_FONT_COLOR,
+    overflow: 'hidden',
+    marginHorizontal: 10,
   },
   participantText: {
-    //flex: 1,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '400',
-    fontSize: 14,
-    lineHeight: 14,
-    color: $config.FONT_COLOR,
+    flex: 1,
+    fontWeight: isWebInternal() ? '500' : '700',
+    flexDirection: 'row',
+    color: $config.PRIMARY_FONT_COLOR,
     textAlign: 'left',
     flexShrink: 1,
+    marginRight: 30,
   },
   chatNotificationPrivate: {
-    backgroundColor: $config.SEMANTIC_NEUTRAL,
-    borderRadius: 8,
-    alignSelf: 'center',
-  },
-  chatNotificationCountText: {
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '600',
-    fontSize: 12,
-    lineHeight: 12,
-    textAlign: 'center',
-    color: $config.FONT_COLOR,
-    paddingVertical: 2,
-    paddingLeft: 8,
-    paddingRight: 9,
+    width: 20,
+    height: 20,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: $config.PRIMARY_COLOR,
+    color: $config.SECONDARY_FONT_COLOR,
+    fontFamily: isIOS() ? 'Helvetica' : 'sans-serif',
+    borderRadius: 10,
+    position: 'absolute',
+    right: 20,
+    top: 0,
   },
 });
 

package/template/src/subComponents/livestream/CurrentLiveStreamRequestsView.tsx

@@ -1,15 +1,14 @@
 import React, {useContext, useEffect, useState} from 'react';
-import {View, Text, StyleSheet} from 'react-native';
+import {View, Text} from 'react-native';
 import RemoteLiveStreamRequestApprove from './controls/RemoteLiveStreamRequestApprove';
 import RemoteLiveStreamRequestReject from './controls/RemoteLiveStreamRequestReject';
+import ParticipantName from '../../components/participants/ParticipantName';
 import LiveStreamContext, {RaiseHandValue} from '../../components/livestream';
 import {filterObject} from '../../utils/index';
 import ParticipantSectionTitle from '../../components/participants/ParticipantSectionTitle';
 import {useString} from '../../utils/useString';
 import {ClientRole} from '../../../agora-rn-uikit';
 import {useRender} from 'customization-api';
-import UserAvatar from '../../atoms/UserAvatar';
-import Spacer from '../../atoms/Spacer';
 
 const CurrentLiveStreamRequestsView = (props: any) => {
   //commented for v1 release
@@ -23,6 +22,7 @@ const CurrentLiveStreamRequestsView = (props: any) => {
   const remoteUserDefaultLabel = 'User';
   const noUserFoundLabel = 'User not found';
   const raisedHandsListTitleLabel = 'Streaming Request';
+  const {p_style} = props;
   const {renderList} = useRender();
   const {raiseHandList, setLastCheckedRequestTimestamp} =
     useContext(LiveStreamContext);
@@ -45,103 +45,40 @@ const CurrentLiveStreamRequestsView = (props: any) => {
       setLastCheckedRequestTimestamp(new Date().getTime());
     };
   }, []);
-  const containerStyle = {
-    backgroundColor: $config.VIDEO_AUDIO_TILE_AVATAR_COLOR,
-    width: 36,
-    height: 36,
-    borderRadius: 18,
-  };
-  const textStyle = {
-    fontSize: 12,
-    fontWeight: '400',
-    color: $config.CARD_LAYER_1_COLOR,
-  };
-  const [showRequestSection, setShowRequestSection] = useState(true);
+
   return (
     <>
-      {Object.keys(raiseHandList).length == 0 ||
-      Object.keys(activeLiveStreamRequests).length == 0 ? (
-        <></>
-      ) : (
-        <>
-          <ParticipantSectionTitle
-            title={raisedHandsListTitleLabel + ' '}
-            count={Object.keys(activeLiveStreamRequests).length}
-            isOpen={showRequestSection}
-            onPress={() => setShowRequestSection(!showRequestSection)}
-          />
-          {showRequestSection ? (
-            Object.keys(activeLiveStreamRequests).map(
-              (userUID: any, index: number) =>
-                renderList[userUID] ? (
-                  <View style={styles.container}>
-                    <View style={styles.userInfoContainer}>
-                      <UserAvatar
-                        name={renderList[userUID].name}
-                        containerStyle={containerStyle}
-                        textStyle={textStyle}
-                      />
-                      <View style={{alignSelf: 'center', flex: 1}}>
-                        <Text
-                          style={styles.participantNameText}
-                          numberOfLines={1}>
-                          {renderList[userUID].name}
-                        </Text>
-                      </View>
-                    </View>
-                    <View style={styles.btnContainer}>
-                      <RemoteLiveStreamRequestReject
-                        uid={userUID}
-                        toastId={raiseHandList[userUID].ts}
-                      />
-                      <Spacer size={8} horizontal={true} />
-                      <RemoteLiveStreamRequestApprove
-                        uid={userUID}
-                        toastId={raiseHandList[userUID].ts}
-                      />
-                    </View>
-                  </View>
-                ) : (
-                  <View style={{alignSelf: 'center'}} key={index}>
-                    <Text>{noUserFoundLabel}</Text>
+      <ParticipantSectionTitle
+        title={raisedHandsListTitleLabel + ' '}
+        count={Object.keys(activeLiveStreamRequests).length}
+      />
+      <View style={p_style.participantContainer}>
+        {Object.keys(raiseHandList).length == 0 ||
+        Object.keys(activeLiveStreamRequests).length == 0 ? (
+          <Text style={p_style.infoText}>{noLiveStreamingRequestsLabel}</Text>
+        ) : (
+          Object.keys(activeLiveStreamRequests).map(
+            (userUID: any, index: number) =>
+              renderList[userUID] ? (
+                <View style={p_style.participantRow} key={index}>
+                  <ParticipantName
+                    value={renderList[userUID]?.name || remoteUserDefaultLabel}
+                  />
+                  <View style={p_style.participantActionContainer}>
+                    <RemoteLiveStreamRequestApprove uid={userUID} />
+                    <RemoteLiveStreamRequestReject uid={userUID} />
                   </View>
-                ),
-            )
-          ) : (
-            <Spacer size={1} />
-          )}
-        </>
-      )}
+                </View>
+              ) : (
+                <View style={p_style.participantRow} key={index}>
+                  <ParticipantName value={noUserFoundLabel} />
+                </View>
+              ),
+          )
+        )}
+      </View>
     </>
   );
 };
-const styles = StyleSheet.create({
-  btnContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  container: {
-    flex: 1,
-    flexDirection: 'row',
-    paddingHorizontal: 20,
-    paddingVertical: 16,
-    justifyContent: 'space-between',
-  },
-  userInfoContainer: {
-    flex: 0.7,
-    flexDirection: 'row',
-  },
-  participantNameText: {
-    fontWeight: '400',
-    fontSize: 12,
-    fontFamily: 'Source Sans Pro',
-    flexDirection: 'row',
-    color: $config.FONT_COLOR,
-    textAlign: 'left',
-    marginHorizontal: 8,
-  },
-});
 
 export default CurrentLiveStreamRequestsView;