agora-appbuilder-core 2.0.1 → 2.0.3-rc2

package/template/src/components/RTMConfigure.tsx

@@ -10,8 +10,11 @@
 *********************************************
 */
 import React, {useState, useContext, useEffect, useRef} from 'react';
-import RtmEngine from 'agora-react-native-rtm';
-import {PropsContext} from '../../agora-rn-uikit';
+import RtmEngine, {
+  RtmChannelAttribute,
+  RtmAttribute,
+} from 'agora-react-native-rtm';
+import {ClientRole, PropsContext} from '../../agora-rn-uikit';
 import ChatContext, {controlMessageEnum} from './ChatContext';
 import {RtcContext} from '../../agora-rn-uikit';
 import {
@@ -19,10 +22,12 @@ import {
   messageChannelType,
   messageSourceType,
   messageActionType,
+  attrRequestTypes,
 } from './ChatContext';
 import {Platform} from 'react-native';
 import {backOff} from 'exponential-backoff';
 import events from './RTMEvents';
+import {filterObject} from '../utils';
 
 export enum UserType {
   Normal,
@@ -52,6 +57,23 @@ const parsePayload = (data: string) => {
   return JSON.parse(data);
 };
 
+function hasJsonStructure(str: string) {
+  if (typeof str !== 'string') return false;
+  try {
+    const result = JSON.parse(str);
+    const type = Object.prototype.toString.call(result);
+    return type === '[object Object]' || type === '[object Array]';
+  } catch (err) {
+    return false;
+  }
+}
+function safeJsonParse(str: string) {
+  try {
+    return [null, JSON.parse(str)];
+  } catch (err) {
+    return [err];
+  }
+}
 const timeNow = () => new Date().getTime();
 
 const RtmConfigure = (props: any) => {
@@ -62,10 +84,36 @@ const RtmConfigure = (props: any) => {
   const [privateMessageStore, setPrivateMessageStore] = useState({});
   const [login, setLogin] = useState<boolean>(false);
   const [userList, setUserList] = useState<{[key: string]: any}>({});
+  const [onlineUsersCount, setTotalOnlineUsers] = useState<number>(0);
+
   let engine = useRef<RtmEngine>(null!);
   let localUid = useRef<string>('');
   const timerValueRef: any = useRef(5);
 
+  React.useEffect(() => {
+    const handBrowserClose = () => {
+      engine.current.leaveChannel(rtcProps.channel);
+    };
+
+    if (Platform.OS !== 'web') return;
+    window.addEventListener('beforeunload', handBrowserClose);
+    // cleanup this component
+    return () => {
+      window.removeEventListener('beforeunload', handBrowserClose);
+    };
+  }, []);
+
+  React.useEffect(() => {
+    setTotalOnlineUsers(
+      Object.keys(
+        filterObject(
+          userList,
+          ([k, v]) => v?.type === UserType.Normal && !v.offline,
+        ),
+      ).length,
+    );
+  }, [userList]);
+
   const addMessageToStore = (uid: string, msg: {body: string; ts: string}) => {
     setMessageStore((m: messageStoreInterface[]) => {
       return [...m, {ts: msg.ts, uid: uid, msg: msg.body}];
@@ -96,118 +144,136 @@ const RtmConfigure = (props: any) => {
       return {...newState};
     });
   };
-  
+
   const doLoginAndSetupRTM = async () => {
     try {
       await engine.current.login({
         uid: localUid.current,
         token: rtcProps.rtm,
       });
-      timerValueRef.current = 5
-      setAttribute();      
+      timerValueRef.current = 5;
+      setAttribute();
     } catch (error) {
-      setTimeout( async () => {
+      setTimeout(async () => {
         timerValueRef.current = timerValueRef.current + timerValueRef.current;
         doLoginAndSetupRTM();
-      }, timerValueRef.current * 1000 );
+      }, timerValueRef.current * 1000);
     }
-  }
+  };
 
-  const setAttribute = async () => {    
+  const setAttribute = async () => {
     try {
       await engine.current.setLocalUserAttributes([
         {key: 'name', value: name || 'User'},
         {key: 'screenUid', value: String(rtcProps.screenShareUid)},
+        {key: 'role', value: String(rtcProps?.role)},
+        {key: 'requests', value: attrRequestTypes.none}, // stores Uid who have raised a request
       ]);
-      timerValueRef.current = 5
-      joinChannel()            
+      timerValueRef.current = 5;
+      joinChannel();
     } catch (error) {
-      setTimeout( async () => {
+      setTimeout(async () => {
         timerValueRef.current = timerValueRef.current + timerValueRef.current;
         setAttribute();
-      }, timerValueRef.current * 1000 );
+      }, timerValueRef.current * 1000);
     }
-  }
+  };
+
+  const addOrUpdateLocalUserAttributes = async (attributes: RtmAttribute[]) => {
+    try {
+      await engine.current.addOrUpdateLocalUserAttributes(attributes);
+    } catch (error) {
+      console.log('error while local user addOrUpdateAttributes: ', error);
+    }
+  };
 
   const joinChannel = async () => {
     try {
-      await engine.current.joinChannel(rtcProps.channel);  
-      timerValueRef.current = 5
-      getMembers()      
+      await engine.current.joinChannel(rtcProps.channel);
+      timerValueRef.current = 5;
+      getMembers();
     } catch (error) {
-      setTimeout( async () => {
+      setTimeout(async () => {
         timerValueRef.current = timerValueRef.current + timerValueRef.current;
         joinChannel();
-      }, timerValueRef.current * 1000 );
-    }  
-  }
+      }, timerValueRef.current * 1000);
+    }
+  };
 
   const getMembers = async () => {
     try {
       await engine.current
-      .getChannelMembersBychannelId(rtcProps.channel)
-      .then((data) => {
-        data.members.map(async (member: any) => {
-          const backoffAttributes = backOff(
-            async () => {
-              const attr = await engine.current.getUserAttributesByUid(
-                member.uid,
-              );
-              if (attr?.attributes?.name && attr?.attributes?.screenUid) {
-                return attr;
-              } else {
-                throw attr;
-              }
-            },
-            {
-              retry: (e, idx) => {
-                console.log(
-                  `[retrying] Attempt ${idx}. Fetching ${member.uid}'s name`,
-                  e,
+        .getChannelMembersBychannelId(rtcProps.channel)
+        .then((data) => {
+          data.members.map(async (member: any) => {
+            const backoffAttributes = backOff(
+              async () => {
+                const attr = await engine.current.getUserAttributesByUid(
+                  member.uid,
                 );
-                return true;
+                if (
+                  attr?.attributes?.name &&
+                  attr?.attributes?.screenUid &&
+                  attr?.attributes?.role &&
+                  attr?.attributes?.requests
+                ) {
+                  return attr;
+                } else {
+                  throw attr;
+                }
               },
-            },
-          );
-          try {
-            const attr = await backoffAttributes;
-            console.log('[user attributes]:', {attr});
-            setUserList((prevState) => {
-              return {
-                ...prevState,
-                [member.uid]: {
-                  name: attr?.attributes?.name || 'User',
-                  type: UserType.Normal,
-                  screenUid: parseInt(attr?.attributes?.screenUid),
-                },
-                [parseInt(attr?.attributes?.screenUid)]: {
-                  name: `${attr?.attributes?.name || 'User'}'s screenshare`,
-                  type: UserType.ScreenShare,
+              {
+                retry: (e, idx) => {
+                  console.log(
+                    `[retrying] Attempt ${idx}. Fetching ${member.uid}'s name`,
+                    e,
+                  );
+                  return true;
                 },
-              };
-            });
-          } catch (e) {
-            console.error(`Could not retrieve name of ${member.uid}`, e);
-          }
+              },
+            );
+            try {
+              const attr = await backoffAttributes;
+              console.log('[user attributes]:', {attr});
+              setUserList((prevState) => {
+                return {
+                  ...prevState,
+                  [member.uid]: {
+                    name: attr?.attributes?.name || 'User',
+                    type: UserType.Normal,
+                    role: parseInt(attr?.attributes?.role),
+                    screenUid: parseInt(attr?.attributes?.screenUid),
+                    offline: false,
+                    requests: attr?.attributes?.requests,
+                  },
+                  [parseInt(attr?.attributes?.screenUid)]: {
+                    name: `${attr?.attributes?.name || 'User'}'s screenshare`,
+                    type: UserType.ScreenShare,
+                  },
+                };
+              });
+            } catch (e) {
+              console.error(`Could not retrieve name of ${member.uid}`, e);
+            }
+          });
+          setLogin(true);
+          console.log('RTM init done');
         });
-        setLogin(true);
-        console.log('RTM init done');
-      });
-      timerValueRef.current = 5
+      timerValueRef.current = 5;
     } catch (error) {
-      setTimeout( async () => {
+      setTimeout(async () => {
         timerValueRef.current = timerValueRef.current + timerValueRef.current;
         getMembers();
-      }, timerValueRef.current * 1000 );
-    } 
-  }
+      }, timerValueRef.current * 1000);
+    }
+  };
   const init = async () => {
     engine.current = new RtmEngine();
     rtcProps.uid
       ? (localUid.current = rtcProps.uid + '')
       : (localUid.current = '' + timeNow());
     engine.current.on('connectionStateChanged', (evt: any) => {
-       //console.log(evt);
+      //console.log(evt);
     });
     engine.current.on('error', (evt: any) => {
       // console.log(evt);
@@ -216,7 +282,12 @@ const RtmConfigure = (props: any) => {
       const backoffAttributes = backOff(
         async () => {
           const attr = await engine.current.getUserAttributesByUid(data.uid);
-          if (attr?.attributes?.name && attr?.attributes?.screenUid) {
+          if (
+            attr?.attributes?.name &&
+            attr?.attributes?.screenUid &&
+            attr?.attributes?.role &&
+            attr?.attributes?.requests
+          ) {
             return attr;
           } else {
             throw attr;
@@ -242,7 +313,10 @@ const RtmConfigure = (props: any) => {
               [data.uid]: {
                 name: attr?.attributes?.name || 'User',
                 type: UserType.Normal,
+                role: parseInt(attr?.attributes?.role),
                 screenUid: parseInt(attr?.attributes?.screenUid),
+                offline: false,
+                requests: attr?.attributes?.requests,
               },
               [parseInt(attr?.attributes?.screenUid)]: {
                 name: `${attr?.attributes?.name || 'User'}'s screenshare`,
@@ -256,10 +330,24 @@ const RtmConfigure = (props: any) => {
       }
       getname();
     });
+
     engine.current.on('channelMemberLeft', (data: any) => {
       console.log('user left', data);
       // Chat of left user becomes undefined. So don't cleanup
+      const {uid} = data;
+      if (!uid) return;
+      setUserList((prevState) => {
+        return {
+          ...prevState,
+          [uid]: {
+            ...prevState[uid],
+            requests: attrRequestTypes.none,
+            offline: true,
+          },
+        };
+      });
     });
+
     engine.current.on('messageReceived', (evt: any) => {
       const {peerId, ts, text} = evt;
       const textObj = parsePayload(text);
@@ -296,7 +384,8 @@ const RtmConfigure = (props: any) => {
               });
               break;
             default:
-              throw new Error('Unsupported message type');
+              break;
+            //   throw new Error('Unsupported message type');
           }
         } catch (e) {
           events.emit(messageChannelType.Private, null, {
@@ -334,18 +423,26 @@ const RtmConfigure = (props: any) => {
       const {uid, channelId, text, ts} = evt;
       const textObj = parsePayload(text);
       const {type, msg} = textObj;
-
       let arr = new Int32Array(1);
       arr[0] = parseInt(uid);
 
       const userUID = Platform.OS ? arr[0] : uid;
-      console.log('userId', userUID);
       const timestamp = ts === 0 ? timeNow() : ts;
 
       if (channelId === rtcProps.channel) {
         if (type === messageActionType.Control) {
+          let actionMsg = '';
+          if (hasJsonStructure(msg)) {
+            const [err, result] = safeJsonParse(msg);
+            if (!err) {
+              const {action} = result;
+              actionMsg = action;
+            }
+          } else {
+            actionMsg = msg;
+          }
           try {
-            switch (msg) {
+            switch (actionMsg) {
               case controlMessageEnum.muteVideo:
                 RtcEngine.muteLocalVideoStream(true);
                 dispatch({
@@ -366,8 +463,28 @@ const RtmConfigure = (props: any) => {
               case controlMessageEnum.cloudRecordingUnactive:
                 setRecordingActive(false);
                 break;
+              case controlMessageEnum.clientRoleChanged:
+                const {payload} = JSON.parse(msg);
+                if (payload && payload?.role) {
+                  if (
+                    payload.role.trim() !== '' &&
+                    payload.role in ClientRole
+                  ) {
+                    setUserList((prevState) => {
+                      return {
+                        ...prevState,
+                        [uid]: {
+                          ...prevState[uid],
+                          role: parseInt(payload.role),
+                        },
+                      };
+                    });
+                  }
+                }
+                break;
               default:
-                throw new Error('Unsupported message type');
+                break;
+              //   throw new Error('Unsupported message type');
             }
           } catch (e) {
             events.emit(messageChannelType.Public, null, {
@@ -395,9 +512,20 @@ const RtmConfigure = (props: any) => {
       });
     });
 
+    engine.current.addListener(
+      'ChannelAttributesUpdated',
+      (attributes: RtmChannelAttribute[]) => {
+        /**
+         * a) The following piece of code is commented for future reference.
+         * b) To be used in future implementations of channel attributes
+         * c) Kindly note the agora-react-native-rtm does not return the attributes with
+         *    additional lastUpdateUserId and lastUpdateTs as mentioned in RtmChannelAttribute type
+         */
+      },
+    );
+
     await engine.current.createClient(rtcProps.appId);
     doLoginAndSetupRTM();
-    
   };
 
   const sendMessage = async (msg: string) => {
@@ -416,6 +544,7 @@ const RtmConfigure = (props: any) => {
       ts: timeNow(),
     });
   };
+
   const sendMessageToUid = async (msg: string, uid: number) => {
     if (msg.trim() === '') return;
     let adjustedUID = uid;
@@ -479,6 +608,24 @@ const RtmConfigure = (props: any) => {
       : {};
   };
 
+  const updateChannelAttributes = async (attributes: RtmChannelAttribute[]) => {
+    /**
+     * a) The following piece of code is commented for future reference.
+     * b) To be used in future implementations of channel attributes
+     * c) attributes should be an array of key value [{key:"keyTobeUsed", value; 'valueToBeUsed}]
+     *    following the type RtmChannelAttribute
+     */
+    // try {
+    //   await (engine.current as RtmEngine).addOrUpdateChannelAttributes(
+    //     rtcProps.channel,
+    //     [...attributes],
+    //     {enableNotificationToChannelMembers: true},
+    //   );
+    // } catch (error) {
+    //   console.log('AttributesUpdated error', error);
+    // }
+  };
+
   useEffect(() => {
     callActive ? init() : (console.log('waiting to init RTM'), setLogin(true));
     return () => {
@@ -487,6 +634,42 @@ const RtmConfigure = (props: any) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [rtcProps.channel, rtcProps.appId, callActive]);
 
+  const broadcastUserAttributes = async (
+    attributes: RtmAttribute[],
+    ctrlMsg: controlMessageEnum,
+  ) => {
+    // 1. Update my attributes in attribute-list
+    await addOrUpdateLocalUserAttributes(attributes);
+
+    let formattedAttributes: any = {};
+    // Transform the array into object of key value pair
+    attributes.map((attribute) => {
+      let key = Object.values(attribute)[0];
+      let value = Object.values(attribute)[1];
+      formattedAttributes[key] = value;
+    });
+    // 2. Update my attributes in user-list
+    setUserList((prevState) => {
+      return {
+        ...prevState,
+        [localUid.current]: {
+          ...prevState[localUid.current],
+          ...formattedAttributes,
+        },
+      };
+    });
+
+    /**
+     * 3. Broadcast my updated attributes to everyone
+     * send payload and control message as string
+     */
+    const msgAsString = JSON.stringify({
+      action: ctrlMsg,
+      payload: {...formattedAttributes},
+    });
+    sendControlMessage(msgAsString);
+  };
+
   return (
     <ChatContext.Provider
       value={{
@@ -496,9 +679,12 @@ const RtmConfigure = (props: any) => {
         sendControlMessageToUid,
         sendMessage,
         sendMessageToUid,
+        broadcastUserAttributes,
+        addOrUpdateLocalUserAttributes,
         engine: engine.current,
         localUid: localUid.current,
         userList: userList,
+        onlineUsersCount,
         events,
       }}>
       {login ? props.children : <></>}

package/template/src/components/SettingsView.tsx

@@ -9,19 +9,10 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useContext} from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  Platform,
-  TouchableOpacity,
-  Image,
-} from 'react-native';
+import React from 'react';
+import {View, Text, StyleSheet, Platform} from 'react-native';
 import SelectDevice from '../subComponents/SelectDevice';
 import HostControlView from './HostControlView';
-import ColorContext from './ColorContext';
-import {SidePanelType} from '../subComponents/SidePanelEnum';
 
 const SettingsView = (props: any) => {
   const {isHost} = props;
@@ -31,9 +22,11 @@ const SettingsView = (props: any) => {
         Platform.OS === 'web' ? style.settingsView : style.settingsViewNative
       }>
       <View style={style.main}>
-        <Text style={style.heading}>Select Input Device</Text>
-        <View style={style.popupPickerHolder}>
-          <SelectDevice />
+        <View>
+          <Text style={style.heading}>Select Input Device</Text>
+          <View style={style.popupPickerHolder}>
+            <SelectDevice />
+          </View>
         </View>
         {isHost ? <HostControlView /> : <></>}
       </View>
@@ -49,21 +42,18 @@ const style = StyleSheet.create({
     paddingVertical: 5,
     flexGrow: 1,
     shadowColor: $config.PRIMARY_FONT_COLOR + '80',
-    shadowOpacity: .5,
-    shadowOffset: {width:-2, height: 0},
+    shadowOpacity: 0.5,
+    shadowOffset: {width: -2, height: 0},
     shadowRadius: 3,
     paddingHorizontal: 20,
   },
   popupPickerHolder: {
-    // height: '40%',
     justifyContent: 'space-around',
-    // paddingHorizontal: '8%',
   },
   heading: {
     fontSize: 20,
     fontWeight: '700',
     color: $config.PRIMARY_FONT_COLOR,
-    // marginBottom: 20,
     alignSelf: 'center',
   },
   settingsView: {