agora-appbuilder-core 3.0.10 → 3.0.12

package/template/src/components/Chat.tsx

@@ -10,20 +10,20 @@
 *********************************************
 */
 import React, {useState, useContext} from 'react';
-import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Dimensions,
+} 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,
-  isMobileUA,
-  isValidReactComponent,
-  isWebInternal,
-  useIsSmall,
-} from '../utils/common';
+import {isIOS, isValidReactComponent, isWebInternal} from '../utils/common';
 import {useChatUIControl} from './chat-ui/useChatUIControl';
 import {useCustomization} from 'customization-implementation';
 import {UidType} from '../../agora-rn-uikit';
@@ -32,35 +32,25 @@ 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';
 
-export interface ChatProps {
+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 isSmall = useIsSmall();
-  const {setSidePanel} = useSidePanel();
-  const {showHeader = true} = props;
+  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 {
     groupActive,
@@ -69,7 +59,6 @@ const Chat = (props?: ChatProps) => {
     setPrivateActive,
     setSelectedChatUserId: setSelectedUser,
   } = useChatUIControl();
-
   const {
     unreadGroupMessageCount,
     setUnreadGroupMessageCount,
@@ -90,19 +79,29 @@ 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);
-    //move this logic into ChatContainer
-    // setUnreadIndividualMessageCount((prevState) => {
-    //   return {
-    //     ...prevState,
-    //     [userUID]: 0,
-    //   };
-    // });
-    // setUnreadPrivateMessageCount(
-    //   unreadPrivateMessageCount - (unreadIndividualMessageCount[userUID] || 0),
-    // );
+    setUnreadIndividualMessageCount((prevState) => {
+      return {
+        ...prevState,
+        [userUID]: 0,
+      };
+    });
+    setUnreadPrivateMessageCount(
+      unreadPrivateMessageCount - (unreadIndividualMessageCount[userUID] || 0),
+    );
   };
 
   const {ChatAfterView, ChatBeforeView} = useCustomization((data) => {
@@ -138,33 +137,77 @@ const Chat = (props?: ChatProps) => {
     }
     return components;
   });
-  const {currentLayout} = useLayout();
+
   return (
     <>
       <View
-        style={[
-          isMobileUA()
-            ? //mobile and mobile web
-              CommonStyles.sidePanelContainerNative
-            : isSmall()
-            ? // desktop minimized
-              CommonStyles.sidePanelContainerWebMinimzed
-            : // desktop maximized
-              CommonStyles.sidePanelContainerWeb,
-          isWebInternal() && !isSmall() && currentLayout === getGridLayoutName()
-            ? {marginVertical: 4}
-            : {},
-        ]}>
+        style={
+          isWebInternal()
+            ? !isSmall
+              ? style.chatView
+              : style.chatViewNative
+            : style.chatViewNative
+        }>
         {/**
          * In Native device we are setting absolute view. so placed ChatBeforeView and ChatAfterView inside the main view
          */}
         <ChatBeforeView />
-        {showHeader && <ChatHeader />}
+        <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>
         {groupActive ? (
           <>
             <ChatContainer {...props} />
-            <View style={style.chatInputContainer}>
-              <ChatInput {...props} />
+            <View style={[style.chatInputLineSeparator, {marginBottom: 0}]} />
+            <View>
+              <View style={style.chatInputContainer}>
+                <View style={[style.chatInputLineSeparator, {opacity: 0.3}]} />
+                <ChatInput {...props} />
+              </View>
             </View>
           </>
         ) : (
@@ -174,8 +217,14 @@ 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>
@@ -190,58 +239,137 @@ const Chat = (props?: ChatProps) => {
 };
 
 const style = StyleSheet.create({
-  buttonHolder: {
-    backgroundColor:
-      $config.HARD_CODED_BLACK_COLOR + hexadecimalTransparency['30%'],
-    borderRadius: 12,
-    flexDirection: 'row',
+  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,
   },
   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%',
-    flexDirection: 'row',
+    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',
   },
-  activeContainer: {
-    margin: 2,
-    backgroundColor: $config.PRIMARY_ACTION_BRAND_COLOR,
-    borderRadius: 11,
-    alignSelf: 'center',
+  group: {
+    backgroundColor: $config.PRIMARY_FONT_COLOR + 22,
+    flex: 1,
+    height: '100%',
+    textAlign: 'center',
+    borderBottomRightRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
-  nonActiveContainer: {
-    alignSelf: 'center',
+  privateActive: {
+    backgroundColor: $config.SECONDARY_FONT_COLOR,
+    flex: 1,
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  private: {
+    backgroundColor: $config.PRIMARY_FONT_COLOR + 22,
+    flex: 1,
+    height: '100%',
+    borderBottomLeftRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
-  activeText: {
-    paddingHorizontal: 24,
-    paddingVertical: 10,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '600',
-    fontSize: 12,
-    color: $config.PRIMARY_ACTION_TEXT_COLOR,
+  groupTextActive: {
+    marginVertical: 'auto',
+    fontWeight: '700',
+    textAlign: 'center',
+    fontSize: 16,
+    color: $config.PRIMARY_FONT_COLOR,
+    justifyContent: 'center',
+    paddingVertical: 5,
   },
-  nonActiveText: {
-    paddingHorizontal: 24,
-    paddingVertical: 10,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '600',
-    fontSize: 12,
-    color: $config.FONT_COLOR,
+  groupText: {
+    marginVertical: 'auto',
+    fontWeight: '700',
+    textAlign: 'center',
+    fontSize: 16,
+    paddingVertical: 5,
+    justifyContent: 'center',
+    color: $config.PRIMARY_FONT_COLOR + 50,
   },
   chatNotification: {
-    width: 8,
-    height: 8,
-    backgroundColor: $config.SEMANTIC_ERROR,
-    borderRadius: 30,
+    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,
     position: 'absolute',
-    right: 8,
-    top: 4,
+    right: 20,
+    top: 0,
   },
 });
 

package/template/src/components/ChatContext.ts

@@ -21,7 +21,6 @@ export interface ChatBubbleProps {
   uid: UidType;
   msgId: string;
   isDeleted: boolean;
-  isSameUser: boolean;
   render?: (
     isLocal: boolean,
     message: string,
@@ -29,8 +28,7 @@ export interface ChatBubbleProps {
     uid: UidType,
     msgId: string,
     isDeleted: boolean,
-    updatedTimestamp: string,
-    isSameUser: boolean,
+    updatedTimestamp?: string,
   ) => JSX.Element;
 }
 
@@ -48,7 +46,6 @@ export enum messageActionType {
 
 export interface chatContext {
   hasUserJoinedRTM: boolean;
-  rtmInitTimstamp: number;
   engine: RtmEngine;
   localUid: UidType;
   onlineUsersCount: number;
@@ -60,10 +57,6 @@ 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_ACTION_BRAND_COLOR;
+  const primaryColor = $config.PRIMARY_COLOR;
   console.log(primaryColor);
   return (
     <ColorContext.Provider

package/template/src/components/ColorContext.ts

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

package/template/src/components/{Controls1.native.tsx → Controls.native.tsx}

@@ -30,7 +30,6 @@ import LocalEndcall, {LocalEndcallProps} from '../subComponents/LocalEndCall';
 import LocalSwitchCamera, {
   LocalSwitchCameraProps,
 } from '../subComponents/LocalSwitchCamera';
-import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 
 const Controls = () => {
   const {
@@ -101,8 +100,7 @@ const style = StyleSheet.create({
   bottomBar: {
     flex: 1,
     paddingHorizontal: '1%',
-    backgroundColor:
-      $config.SECONDARY_ACTION_COLOR + hexadecimalTransparency['80%'],
+    backgroundColor: $config.SECONDARY_FONT_COLOR + '80',
     flexDirection: 'row',
     justifyContent: 'space-evenly',
     position: 'relative',
@@ -111,9 +109,9 @@ const style = StyleSheet.create({
     bottom: 0,
   },
   localButton: {
-    backgroundColor: $config.SECONDARY_ACTION_COLOR,
+    backgroundColor: $config.SECONDARY_FONT_COLOR,
     borderRadius: 2,
-    borderColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+    borderColor: $config.PRIMARY_COLOR,
     width: 40,
     height: 40,
     display: 'flex',
@@ -124,7 +122,7 @@ const style = StyleSheet.create({
   buttonIcon: {
     width: 35,
     height: 35,
-    tintColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+    tintColor: $config.PRIMARY_COLOR,
   },
 });