agora-appbuilder-core 3.0.8 → 3.0.10

package/template/src/atoms/UserAvatar.tsx

@@ -0,0 +1,60 @@
+import {StyleSheet, Text, View} from 'react-native';
+import React from 'react';
+import ThemeConfig from '../theme';
+import {isWeb} from '../utils/common';
+
+function getInitials(name: string) {
+  if (name && name?.length) {
+    return name[0].toUpperCase();
+  }
+  return 'U';
+}
+
+const UserAvatar = ({name, containerStyle, textStyle}) => {
+  return (
+    <View
+      style={[
+        containerStyle,
+        {
+          alignSelf: 'center',
+          alignContent: 'center',
+          justifyContent: 'center',
+        },
+      ]}>
+      <PlatformWrapper>
+        <Text
+          style={[
+            textStyle,
+            {
+              fontFamily: ThemeConfig.FontFamily.sansPro,
+              alignSelf: 'center',
+              textAlign: 'center',
+            },
+          ]}>
+          {getInitials(name)}
+        </Text>
+      </PlatformWrapper>
+    </View>
+  );
+};
+
+const PlatformWrapper = ({children}) => {
+  return isWeb() ? (
+    <div
+      style={{
+        userSelect: 'none',
+        MozUserSelect: 'none',
+        WebkitUserSelect: 'none',
+        msUserSelect: 'none',
+        alignSelf: 'center',
+      }}>
+      {children}
+    </div>
+  ) : (
+    <>{children}</>
+  );
+};
+
+export default UserAvatar;
+
+const styles = StyleSheet.create({});

package/template/src/components/Chat.tsx

@@ -10,20 +10,20 @@
 *********************************************
 */
 import React, {useState, useContext} from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  Dimensions,
-} from 'react-native';
+import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
 import ChatContainer from '../subComponents/ChatContainer';
 import ChatInput from '../subComponents/ChatInput';
 import ChatParticipants from '../subComponents/chat/ChatParticipants';
 import ColorContext from './ColorContext';
 import {useChatNotification} from './chat-notification/useChatNotification';
 import {useString} from '../utils/useString';
-import {isIOS, isValidReactComponent, isWebInternal} from '../utils/common';
+import {
+  isIOS,
+  isMobileUA,
+  isValidReactComponent,
+  isWebInternal,
+  useIsSmall,
+} from '../utils/common';
 import {useChatUIControl} from './chat-ui/useChatUIControl';
 import {useCustomization} from 'customization-implementation';
 import {UidType} from '../../agora-rn-uikit';
@@ -32,25 +32,35 @@ import {
   ChatTextInputProps,
   ChatSendButtonProps,
 } from '../subComponents/ChatInput';
+import {useSidePanel} from '../utils/useSidePanel';
+import {SidePanelType} from '../subComponents/SidePanelEnum';
+import IconButton from '../atoms/IconButton';
+import ThemeConfig from '../theme';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import SidePanelHeader from '../subComponents/SidePanelHeader';
+import CommonStyles from './CommonStyles';
+import {useLayout} from '../utils/useLayout';
+import {getGridLayoutName} from '../pages/video-call/DefaultLayouts';
+import {ChatHeader} from '../pages/video-call/SidePanelHeader';
 
-interface ChatProps {
+export interface ChatProps {
   chatBubble?: React.ComponentType<ChatBubbleProps>;
   chatInput?: React.ComponentType<ChatTextInputProps>;
   chatSendButton?: React.ComponentType<ChatSendButtonProps>;
+  showHeader?: boolean;
 }
 
 const Chat = (props?: ChatProps) => {
   // commented for v1 release
   // const groupChatLabel = useString('groupChatLabel')();
   // const privateChatLabel = useString('privateChatLabel')();
+  const chatLabel = 'Chat';
   const groupChatLabel = 'Group';
   const privateChatLabel = 'Private';
-  const [dim, setDim] = useState([
-    Dimensions.get('window').width,
-    Dimensions.get('window').height,
-    Dimensions.get('window').width > Dimensions.get('window').height,
-  ]);
-  const isSmall = dim[0] < 700;
+
+  const isSmall = useIsSmall();
+  const {setSidePanel} = useSidePanel();
+  const {showHeader = true} = props;
 
   const {
     groupActive,
@@ -59,6 +69,7 @@ const Chat = (props?: ChatProps) => {
     setPrivateActive,
     setSelectedChatUserId: setSelectedUser,
   } = useChatUIControl();
+
   const {
     unreadGroupMessageCount,
     setUnreadGroupMessageCount,
@@ -79,29 +90,19 @@ const Chat = (props?: ChatProps) => {
     };
   }, []);
 
-  const selectGroup = () => {
-    setPrivateActive(false);
-    setGroupActive(true);
-    setUnreadGroupMessageCount(0);
-    setSelectedUser(0);
-  };
-  const selectPrivate = () => {
-    setGroupActive(false);
-    setSelectedUser(0);
-    setPrivateActive(false);
-  };
   const selectUser = (userUID: UidType) => {
     setSelectedUser(userUID);
     setPrivateActive(true);
-    setUnreadIndividualMessageCount((prevState) => {
-      return {
-        ...prevState,
-        [userUID]: 0,
-      };
-    });
-    setUnreadPrivateMessageCount(
-      unreadPrivateMessageCount - (unreadIndividualMessageCount[userUID] || 0),
-    );
+    //move this logic into ChatContainer
+    // setUnreadIndividualMessageCount((prevState) => {
+    //   return {
+    //     ...prevState,
+    //     [userUID]: 0,
+    //   };
+    // });
+    // setUnreadPrivateMessageCount(
+    //   unreadPrivateMessageCount - (unreadIndividualMessageCount[userUID] || 0),
+    // );
   };
 
   const {ChatAfterView, ChatBeforeView} = useCustomization((data) => {
@@ -137,77 +138,33 @@ const Chat = (props?: ChatProps) => {
     }
     return components;
   });
-
+  const {currentLayout} = useLayout();
   return (
     <>
       <View
-        style={
-          isWebInternal()
-            ? !isSmall
-              ? style.chatView
-              : style.chatViewNative
-            : style.chatViewNative
-        }>
+        style={[
+          isMobileUA()
+            ? //mobile and mobile web
+              CommonStyles.sidePanelContainerNative
+            : isSmall()
+            ? // desktop minimized
+              CommonStyles.sidePanelContainerWebMinimzed
+            : // desktop maximized
+              CommonStyles.sidePanelContainerWeb,
+          isWebInternal() && !isSmall() && currentLayout === getGridLayoutName()
+            ? {marginVertical: 4}
+            : {},
+        ]}>
         {/**
          * In Native device we are setting absolute view. so placed ChatBeforeView and ChatAfterView inside the main view
          */}
         <ChatBeforeView />
-        <View style={style.chatNav}>
-          <TouchableOpacity
-            onPress={selectGroup}
-            style={
-              groupActive
-                ? [style.groupActive, {borderColor: primaryColor}]
-                : [
-                    style.group,
-                    {
-                      borderColor: primaryColor,
-                      borderTopColor: primaryColor + '80',
-                    },
-                  ]
-            }>
-            {unreadGroupMessageCount !== 0 ? (
-              <View style={style.chatNotification}>
-                <Text>{unreadGroupMessageCount}</Text>
-              </View>
-            ) : null}
-            <Text style={groupActive ? style.groupTextActive : style.groupText}>
-              {groupChatLabel}
-            </Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            onPress={selectPrivate}
-            style={
-              !groupActive
-                ? [style.privateActive, {borderColor: primaryColor}]
-                : [
-                    style.private,
-                    {
-                      borderColor: primaryColor,
-                      borderTopColor: primaryColor + '80',
-                    },
-                  ]
-            }>
-            {unreadPrivateMessageCount !== 0 ? (
-              <View style={style.chatNotification}>
-                <Text>{unreadPrivateMessageCount}</Text>
-              </View>
-            ) : null}
-            <Text
-              style={!groupActive ? style.groupTextActive : style.groupText}>
-              {privateChatLabel}
-            </Text>
-          </TouchableOpacity>
-        </View>
+        {showHeader && <ChatHeader />}
         {groupActive ? (
           <>
             <ChatContainer {...props} />
-            <View style={[style.chatInputLineSeparator, {marginBottom: 0}]} />
-            <View>
-              <View style={style.chatInputContainer}>
-                <View style={[style.chatInputLineSeparator, {opacity: 0.3}]} />
-                <ChatInput {...props} />
-              </View>
+            <View style={style.chatInputContainer}>
+              <ChatInput {...props} />
             </View>
           </>
         ) : (
@@ -217,14 +174,8 @@ const Chat = (props?: ChatProps) => {
             ) : (
               <>
                 <ChatContainer {...props} />
-                <View
-                  style={[style.chatInputLineSeparator, {marginBottom: 0}]}
-                />
                 <View>
                   <View style={style.chatInputContainer}>
-                    <View
-                      style={[style.chatInputLineSeparator, {opacity: 0.3}]}
-                    />
                     <ChatInput {...props} />
                   </View>
                 </View>
@@ -239,137 +190,58 @@ const Chat = (props?: ChatProps) => {
 };
 
 const style = StyleSheet.create({
-  chatView: {
-    width: '20%',
-    minWidth: 200,
-    maxWidth: 300,
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    flex: 1,
-    shadowColor: $config.PRIMARY_FONT_COLOR + '80',
-    shadowOpacity: 0.5,
-    shadowOffset: {width: -2, height: 1},
-    shadowRadius: 3,
+  buttonHolder: {
+    backgroundColor:
+      $config.HARD_CODED_BLACK_COLOR + hexadecimalTransparency['30%'],
+    borderRadius: 12,
+    flexDirection: 'row',
   },
   chatViewNative: {
-    position: 'absolute',
     zIndex: 5,
     width: '100%',
     height: '100%',
     right: 0,
     bottom: 0,
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-  },
-  heading: {
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    width: 150,
-    height: '7%',
-    paddingLeft: 20,
-    flexDirection: 'row',
-  },
-  headingText: {
-    flex: 1,
-    paddingLeft: 5,
-    marginVertical: 'auto',
-    fontWeight: '700',
-    color: $config.PRIMARY_FONT_COLOR,
-    fontSize: 25,
-    alignSelf: 'center',
-    justifyContent: 'center',
-  },
-  chatNav: {
-    flexDirection: 'row',
-    height: '6%',
   },
   chatInputContainer: {
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    paddingBottom: 10,
-  },
-  chatInputLineSeparator: {
-    backgroundColor: $config.PRIMARY_FONT_COLOR + '80',
     width: '100%',
-    height: 1,
-    marginHorizontal: -20,
-    alignSelf: 'center',
-    opacity: 0.5,
-    marginBottom: 10,
-  },
-  groupActive: {
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    flex: 1,
-    height: '100%',
-    textAlign: 'center',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  group: {
-    backgroundColor: $config.PRIMARY_FONT_COLOR + 22,
-    flex: 1,
-    height: '100%',
-    textAlign: 'center',
-    borderBottomRightRadius: 10,
+    flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
   },
-  privateActive: {
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    flex: 1,
-    height: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
+  activeContainer: {
+    margin: 2,
+    backgroundColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+    borderRadius: 11,
+    alignSelf: 'center',
   },
-  private: {
-    backgroundColor: $config.PRIMARY_FONT_COLOR + 22,
-    flex: 1,
-    height: '100%',
-    borderBottomLeftRadius: 10,
-    alignItems: 'center',
-    justifyContent: 'center',
+  nonActiveContainer: {
+    alignSelf: 'center',
   },
-  groupTextActive: {
-    marginVertical: 'auto',
-    fontWeight: '700',
-    textAlign: 'center',
-    fontSize: 16,
-    color: $config.PRIMARY_FONT_COLOR,
-    justifyContent: 'center',
-    paddingVertical: 5,
+  activeText: {
+    paddingHorizontal: 24,
+    paddingVertical: 10,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 12,
+    color: $config.PRIMARY_ACTION_TEXT_COLOR,
   },
-  groupText: {
-    marginVertical: 'auto',
-    fontWeight: '700',
-    textAlign: 'center',
-    fontSize: 16,
-    paddingVertical: 5,
-    justifyContent: 'center',
-    color: $config.PRIMARY_FONT_COLOR + 50,
+  nonActiveText: {
+    paddingHorizontal: 24,
+    paddingVertical: 10,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 12,
+    color: $config.FONT_COLOR,
   },
   chatNotification: {
-    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',
-    left: 25,
-    top: -5,
-  },
-  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,
+    width: 8,
+    height: 8,
+    backgroundColor: $config.SEMANTIC_ERROR,
+    borderRadius: 30,
     position: 'absolute',
-    right: 20,
-    top: 0,
+    right: 8,
+    top: 4,
   },
 });
 

package/template/src/components/ChatContext.ts

@@ -21,6 +21,7 @@ export interface ChatBubbleProps {
   uid: UidType;
   msgId: string;
   isDeleted: boolean;
+  isSameUser: boolean;
   render?: (
     isLocal: boolean,
     message: string,
@@ -28,7 +29,8 @@ export interface ChatBubbleProps {
     uid: UidType,
     msgId: string,
     isDeleted: boolean,
-    updatedTimestamp?: string,
+    updatedTimestamp: string,
+    isSameUser: boolean,
   ) => JSX.Element;
 }
 
@@ -46,6 +48,7 @@ export enum messageActionType {
 
 export interface chatContext {
   hasUserJoinedRTM: boolean;
+  rtmInitTimstamp: number;
   engine: RtmEngine;
   localUid: UidType;
   onlineUsersCount: number;
@@ -57,6 +60,10 @@ export enum controlMessageEnum {
   muteSingleVideo = '3',
   muteSingleAudio = '4',
   kickUser = '5',
+  requestVideo = '6',
+  requestAudio = '7',
+  //newUserJoined = '8',
+  kickScreenshare = '9',
 }
 
 const ChatContext = createContext(null as unknown as chatContext);

package/template/src/components/ColorConfigure.tsx

@@ -13,7 +13,7 @@ import React from 'react';
 import ColorContext from './ColorContext';
 
 const ColorConfigure = (props: {children: React.ReactNode}) => {
-  const primaryColor = $config.PRIMARY_COLOR;
+  const primaryColor = $config.PRIMARY_ACTION_BRAND_COLOR;
   console.log(primaryColor);
   return (
     <ColorContext.Provider

package/template/src/components/ColorContext.ts

@@ -15,6 +15,6 @@ interface ColorContext {
   primaryColor: any;
 }
 
-const ColorContext = createContext((null as unknown) as ColorContext);
+const ColorContext = createContext({} as unknown as ColorContext);
 
 export default ColorContext;

package/template/src/components/CommonStyles.ts

@@ -0,0 +1,44 @@
+import {StyleSheet} from 'react-native';
+import ThemeConfig from '../theme';
+const CommonStyles = StyleSheet.create({
+  sidePanelContainerWeb: {
+    flex: 1,
+    maxWidth: '20%',
+    minWidth: 338,
+    borderRadius: ThemeConfig.BorderRadius.small,
+    marginLeft: 12,
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+    borderColor: $config.CARD_LAYER_3_COLOR,
+    borderWidth: 1,
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    shadowOpacity: 0.2,
+    shadowOffset: {width: 0, height: 0},
+    shadowRadius: 20,
+    overflow: 'hidden',
+  },
+  sidePanelContainerNative: {
+    zIndex: 5,
+    width: '100%',
+    height: '100%',
+  },
+  sidePanelContainerWebMinimzed: {
+    position: 'absolute',
+    zIndex: 5,
+    width: '96%',
+    height: '96%',
+    right: '2%',
+    left: '2%',
+    top: '2%',
+    bottom: '2%',
+    borderRadius: ThemeConfig.BorderRadius.small,
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+    borderColor: $config.CARD_LAYER_3_COLOR,
+    borderWidth: 1,
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    shadowOpacity: 0.2,
+    shadowOffset: {width: 0, height: 0},
+    shadowRadius: 20,
+    overflow: 'hidden',
+  },
+});
+export default CommonStyles;