agora-appbuilder-core 3.0.8 → 4.0.0-api.0

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

@@ -1,120 +1,229 @@
-import React, {useContext} from 'react';
+import React, {useState} 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, isWebInternal} from '../../utils/common';
+import {isIOS, isMobileUA, isWebInternal} from '../../utils/common';
 import {useChatNotification} from '../../components/chat-notification/useChatNotification';
 import {UidType, useLocalUid} from '../../../agora-rn-uikit';
-import {useRender} from 'customization-api';
+import ImageIcon from '../../atoms/ImageIcon';
+import {useContent} 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 {height, width} = useWindowDimensions();
-  const {renderList} = useRender();
+  const {defaultContent, activeUids} = useContent();
   const localUid = useLocalUid();
   const {unreadIndividualMessageCount} = useChatNotification();
-  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
-    );
-  };
-
+  const isMobile = isMobileUA();
   return (
     <ScrollView>
-      {Object.entries(renderList).map(([uid, value]) => {
-        const uidAsNumber = parseInt(uid);
-        if (isChatUser(uidAsNumber, value)) {
+      {activeUids && activeUids.length === 1 ? (
+        <View style={style.defaultMessageContainer}>
+          <Text style={style.defaultMessageText}>
+            No one else has joined yet.
+          </Text>
+        </View>
+      ) : (
+        <></>
+      )}
+      {Object.keys(defaultContent)
+        .map((i) => parseInt(i))
+        .filter((i) => {
+          try {
+            if (isNaN(i)) {
+              return false;
+            } else {
+              const userId = i;
+              const userInfo = defaultContent[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) => {
           return (
-            <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>
+            defaultContent[b]?.lastMessageTimeStamp -
+            defaultContent[a]?.lastMessageTimeStamp
           );
-        }
-      })}
+        })
+        .map((uid) => {
+          const uidAsNumber = uid;
+          const name = defaultContent[uidAsNumber]
+            ? defaultContent[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,
-    height: 20,
-    marginTop: 10,
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
+    //  flex: 1,
     overflow: 'hidden',
-    marginHorizontal: 10,
+    justifyContent: 'space-between',
+    alignItems: 'center',
   },
-  participantText: {
+  participantTextContainer: {
     flex: 1,
-    fontWeight: isWebInternal() ? '500' : '700',
-    flexDirection: 'row',
-    color: $config.PRIMARY_FONT_COLOR,
+    alignSelf: 'center',
+  },
+  participantText: {
+    //flex: 1,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: 14,
+    lineHeight: 14,
+    color: $config.FONT_COLOR,
     textAlign: 'left',
     flexShrink: 1,
-    marginRight: 30,
   },
   chatNotificationPrivate: {
-    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,
+    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,
   },
 });
 

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

@@ -1,14 +1,15 @@
 import React, {useContext, useEffect, useState} from 'react';
-import {View, Text} from 'react-native';
+import {View, Text, StyleSheet} 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 {useContent} from 'customization-api';
+import UserAvatar from '../../atoms/UserAvatar';
+import Spacer from '../../atoms/Spacer';
 
 const CurrentLiveStreamRequestsView = (props: any) => {
   //commented for v1 release
@@ -22,8 +23,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 {defaultContent} = useContent();
   const {raiseHandList, setLastCheckedRequestTimestamp} =
     useContext(LiveStreamContext);
   const [activeLiveStreamRequests, setActiveLiveStreamRequests] =
@@ -45,40 +45,103 @@ 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 (
     <>
-      <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} />
+      {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) =>
+                defaultContent[userUID] ? (
+                  <View style={styles.container}>
+                    <View style={styles.userInfoContainer}>
+                      <UserAvatar
+                        name={defaultContent[userUID].name}
+                        containerStyle={containerStyle}
+                        textStyle={textStyle}
+                      />
+                      <View style={{alignSelf: 'center', flex: 1}}>
+                        <Text
+                          style={styles.participantNameText}
+                          numberOfLines={1}>
+                          {defaultContent[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>
                   </View>
-                </View>
-              ) : (
-                <View style={p_style.participantRow} key={index}>
-                  <ParticipantName value={noUserFoundLabel} />
-                </View>
-              ),
-          )
-        )}
-      </View>
+                ),
+            )
+          ) : (
+            <Spacer size={1} />
+          )}
+        </>
+      )}
     </>
   );
 };
+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;

package/template/src/subComponents/livestream/controls/LocalRaiseHand.tsx

@@ -10,46 +10,51 @@
 *********************************************
 */
 import React, {useContext} from 'react';
-import {StyleSheet} from 'react-native';
 import LiveStreamContext, {
   RaiseHandValue,
 } from '../../../components/livestream';
-import {PropsContext} from '../../../../agora-rn-uikit';
-import {BtnTemplate} from '../../../../agora-rn-uikit';
-import icons from '../../../assets/icons';
 import {useString} from '../../../utils/useString';
+import Styles from '../../../components/styles';
 import ChatContext from '../../../components/ChatContext';
+import IconButton from '../../../atoms/IconButton';
+import ThemeConfig from '../../../theme';
+import {ClientRole, PropsContext} from '../../../../agora-rn-uikit';
+import {useContent} from 'customization-api';
+import {isMobileUA} from '../../../utils/common';
 
-const LocalRaiseHand = () => {
-  const {styleProps} = useContext(PropsContext);
+interface LocalRaiseHandProps {
+  showLabel?: boolean;
+}
+const LocalRaiseHand = (props: LocalRaiseHandProps) => {
   const {audienceSendsRequest, audienceRecallsRequest, raiseHandList} =
     useContext(LiveStreamContext);
+  const {rtcProps} = useContext(PropsContext);
   const {localUid} = useContext(ChatContext);
-  const {localBtnStyles} = styleProps || {};
-  const {theme} = styleProps || {};
-  const {muteLocalAudio} = localBtnStyles || {};
+  const {activeUids} = useContent();
+  const {showLabel = $config.ICON_TEXT} = props;
   //commented for v1 release
   //const handStatusText = useString<boolean>('raiseHandButton');
   const handStatusText = (toggle: boolean) =>
     toggle ? 'Lower hand' : 'Raise Hand';
+  const isHandRasied = raiseHandList[localUid]?.raised === RaiseHandValue.TRUE;
   return (
-    <BtnTemplate
-      icon={icons['raiseHandIcon']}
-      btnText={handStatusText(
-        raiseHandList[localUid]?.raised === RaiseHandValue.TRUE,
-      )}
-      color={
-        raiseHandList[localUid]?.raised === RaiseHandValue.TRUE
-          ? '#FD0845'
-          : theme
-      }
-      style={{
-        ...style.localBtn,
-        ...(localBtnStyles as object),
-        ...(muteLocalAudio as object),
+    <IconButton
+      iconProps={{
+        name: isHandRasied ? 'lower-hand' : 'raise-hand',
+        tintColor: isHandRasied
+          ? $config.PRIMARY_ACTION_TEXT_COLOR
+          : $config.SECONDARY_ACTION_COLOR,
+        iconBackgroundColor: isHandRasied
+          ? $config.PRIMARY_ACTION_BRAND_COLOR
+          : '',
+        base64: isMobileUA() ? true : false,
+      }}
+      btnTextProps={{
+        text: showLabel ? handStatusText(isHandRasied) : '',
+        textColor: $config.FONT_COLOR,
       }}
       onPress={() => {
-        if (raiseHandList[localUid]?.raised === RaiseHandValue.TRUE) {
+        if (isHandRasied) {
           audienceRecallsRequest();
         } else {
           audienceSendsRequest();
@@ -59,13 +64,4 @@ const LocalRaiseHand = () => {
   );
 };
 
-const style = StyleSheet.create({
-  localBtn: {
-    borderRadius: 23,
-    borderWidth: 4 * StyleSheet.hairlineWidth,
-    borderColor: '#007aff',
-    backgroundColor: '#007aff',
-  },
-});
-
 export default LocalRaiseHand;

package/template/src/subComponents/livestream/controls/RemoteLiveStreamApprovedRequestRecall.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import {BtnTemplate, UidType} from '../../../../agora-rn-uikit';
+import IconButton from '../../../atoms/IconButton';
+import {UidType} from '../../../../agora-rn-uikit';
 import {LiveStreamControlMessageEnum} from '../../../components/livestream';
-import icons from '../../../assets/icons';
-import events, {EventPersistLevel} from '../../../rtm-events-api';
+import events, {PersistanceLevel} from '../../../rtm-events-api';
 
 export interface RemoteLiveStreamApprovedRequestRecallProps {
   uid: UidType;
@@ -11,18 +11,18 @@ const RemoteLiveStreamApprovedRequestRecall = (
   props: RemoteLiveStreamApprovedRequestRecallProps,
 ) => {
   return (
-    <BtnTemplate
-      style={{width: 24, height: 22}}
+    <IconButton
       onPress={() => {
         events.send(
           LiveStreamControlMessageEnum.raiseHandRequestRejected,
           '',
-          EventPersistLevel.LEVEL1,
+          PersistanceLevel.None,
           props.uid,
         );
       }}
-      color="#FD0845"
-      icon={icons['demoteIcon']}
+      // color="#FD0845"
+      //todo hari
+      //icon={Icons['demoteIcon']}
     />
   );
 };

package/template/src/subComponents/livestream/controls/RemoteLiveStreamRequestApprove.tsx

@@ -1,30 +1,43 @@
 import React, {useContext} from 'react';
 import {View} from 'react-native';
-import {BtnTemplate, PropsContext, UidType} from '../../../../agora-rn-uikit';
+import {PropsContext, UidType} from '../../../../agora-rn-uikit';
 import LiveStreamContext from '../../../components/livestream';
-import icons from '../../../assets/icons';
+import PrimaryButton from '../../../atoms/PrimaryButton';
+import ThemeConfig from '../../../theme';
+import Toast from '../../../../react-native-toast-message';
 
 export interface RemoteLiveStreamControlProps {
   uid: UidType;
+  toastId: number;
 }
 
 const RemoteLiveStreamRequestApprove = (
   props: RemoteLiveStreamControlProps,
 ) => {
-  const {uid} = props;
+  const {uid, toastId} = props;
   const {hostApprovesRequestOfUID} = useContext(LiveStreamContext);
-  const {styleProps} = useContext(PropsContext);
-  const {remoteBtnStyles} = styleProps || {};
-
-  const {liveStreamHostControlBtns} = remoteBtnStyles || {};
 
   return (
-    <View style={{...(liveStreamHostControlBtns as object), marginRight: 15}}>
-      <BtnTemplate
+    <View style={{flex: 1}}>
+      <PrimaryButton
+        containerStyle={{
+          minWidth: 'auto',
+          borderRadius: ThemeConfig.BorderRadius.small,
+          height: 38,
+          paddingHorizontal: 8,
+          paddingVertical: 8,
+        }}
+        textStyle={{
+          fontWeight: '600',
+          fontSize: 12,
+        }}
         disabled={!uid}
-        icon={icons['checkCircleIcon']}
-        style={{...(liveStreamHostControlBtns as object)}}
+        text={'Accept'}
         onPress={() => {
+          //Hiding the toast if its get approved in the participant panel
+          if (Toast.getToastId() === toastId) {
+            Toast.hide();
+          }
           hostApprovesRequestOfUID(uid);
         }}
       />