agora-appbuilder-core 2.0.1 → 2.0.3-rc2

package/template/src/subComponents/Checkbox.tsx

@@ -22,6 +22,7 @@ const Checkbox = (props: any) => {
   const setUrlCheckbox = props.onValueChange;
   return (
     <CheckBox
+      disabled={props?.disabled}
       value={urlCheckbox}
       onValueChange={setUrlCheckbox}
       //@ts-ignore Color prop exists on react-native-web but it not present in @react-native-community/checkbox

package/template/src/subComponents/Recording.tsx

@@ -9,9 +9,8 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useContext, useEffect} from 'react';
-import {Image, TouchableOpacity, StyleSheet, View, Text} from 'react-native';
-import icons from '../assets/icons';
+import React, {useContext, useEffect, useRef} from 'react';
+import {TouchableOpacity, StyleSheet, View, Text} from 'react-native';
 import ChatContext, {controlMessageEnum} from '../components/ChatContext';
 import ColorContext from '../components/ColorContext';
 import {gql, useMutation} from '@apollo/client';
@@ -37,6 +36,14 @@ const STOP_RECORDING = gql`
  * Sends a control message to all users in the channel over RTM to indicate that
  * Cloud recording has started/stopped.
  */
+function usePrevious(value: any) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
 const Recording = (props: any) => {
   const {rtcProps} = useContext(PropsContext);
   const {primaryColor} = useContext(ColorContext);
@@ -46,12 +53,19 @@ const Recording = (props: any) => {
   const [startRecordingQuery] = useMutation(START_RECORDING);
   const [stopRecordingQuery] = useMutation(STOP_RECORDING);
   const {sendControlMessage} = useContext(ChatContext);
+  const prevRecordingState = usePrevious({recordingActive});
 
   useEffect(() => {
-    if (recordingActive)
+    /**
+     * The below check makes sure the notification is triggered
+     * only once. In native apps, this componenet is mounted everytime
+     * when chat icon is toggle, as Controls component is hidden and
+     * shown
+     */
+    if (prevRecordingState && recordingActive) {
+      if (prevRecordingState?.recordingActive === recordingActive) return;
       Toast.show({text1: 'Recording Started', visibilityTime: 1000});
-    // else if(!recordingActive)
-    // Toast.show({text1: 'Recording Finished', visibilityTime: 1000})
+    }
   }, [recordingActive]);
 
   return (
@@ -103,7 +117,7 @@ const Recording = (props: any) => {
         <ImageIcon
           name={recordingActive ? 'recordingActiveIcon' : 'recordingIcon'}
           style={[style.buttonIcon]}
-          color={recordingActive ? '#FD0845': $config.PRIMARY_COLOR}
+          color={recordingActive ? '#FD0845' : $config.PRIMARY_COLOR}
         />
       </View>
       <Text
@@ -132,8 +146,8 @@ const style = StyleSheet.create({
     justifyContent: 'center',
   },
   buttonIcon: {
-    width: '100%',
-    height: '100%',
+    width: '90%',
+    height: '90%',
   },
 });
 

package/template/src/subComponents/RemoteVideoMute.tsx

@@ -24,9 +24,9 @@ const RemoteVideoMute = (props: {
   video: boolean;
   isHost: boolean;
 }) => {
-  const {primaryColor} = useContext(ColorContext);
   const {isHost = false} = props;
   const {sendControlMessageToUid} = useContext(ChatContext);
+
   return String(props.uid)[0] !== '1' ? (
     <BtnTemplate
       disabled={!isHost}
@@ -43,9 +43,8 @@ const RemoteVideoMute = (props: {
 
 const style = StyleSheet.create({
   buttonIconCam: {
-    width: 28,
+    width: 25,
     height: 25,
-    marginHorizontal: 2,
   },
 });
 

package/template/src/subComponents/SelectDevice.tsx

@@ -10,7 +10,8 @@
 *********************************************
 */
 import React, {useContext} from 'react';
-import {Picker, StyleSheet} from 'react-native';
+import {Picker, StyleSheet, View, Text} from 'react-native';
+import {PropsContext, ClientRole} from '../../agora-rn-uikit';
 import DeviceContext from '../components/DeviceContext';
 import ColorContext from '../components/ColorContext';
 // import {dropdown} from '../../theme.json';
@@ -19,45 +20,74 @@ import ColorContext from '../components/ColorContext';
  * It will add the selected device to the device context.
  */
 const SelectDevice = () => {
+  // Contexts
+  const {rtcProps} = useContext(PropsContext);
   const {primaryColor} = useContext(ColorContext);
   const {selectedCam, setSelectedCam, selectedMic, setSelectedMic, deviceList} =
     useContext(DeviceContext);
+  // States
+  const [isPickerDisabled, setPickerDisabled] = React.useState<boolean>(false);
+  const [btnTheme, setBtnTheme] = React.useState<string>(primaryColor);
+
+  React.useEffect(() => {
+    if ($config.EVENT_MODE && rtcProps.role === ClientRole.Audience) {
+      setPickerDisabled(true);
+      setBtnTheme('rgba(16, 16, 16, 0.3)');
+    } else {
+      setPickerDisabled(false);
+      setBtnTheme(primaryColor);
+    }
+  }, [rtcProps?.role]);
 
   return (
-    <>
-      <Picker
-        selectedValue={selectedCam}
-        style={[{borderColor: primaryColor}, style.popupPicker]}
-        onValueChange={(itemValue) => setSelectedCam(itemValue)}>
-        {deviceList.map((device: any) => {
-          if (device.kind === 'videoinput') {
-            return (
-              <Picker.Item
-                label={device.label}
-                value={device.deviceId}
-                key={device.deviceId}
-              />
-            );
-          }
-        })}
-      </Picker>
-      <Picker
-        selectedValue={selectedMic}
-        style={[{borderColor: primaryColor}, style.popupPicker]}
-        onValueChange={(itemValue) => setSelectedMic(itemValue)}>
-        {deviceList.map((device: any) => {
-          if (device.kind === 'audioinput') {
-            return (
-              <Picker.Item
-                label={device.label}
-                value={device.deviceId}
-                key={device.deviceId}
-              />
-            );
-          }
-        })}
-      </Picker>
-    </>
+    <View>
+      <View style={{marginTop: 15}}></View>
+      <View>
+        <Picker
+          enabled={!isPickerDisabled}
+          selectedValue={selectedCam}
+          style={[{borderColor: btnTheme}, style.popupPicker]}
+          onValueChange={(itemValue) => setSelectedCam(itemValue)}>
+          {deviceList.map((device: any) => {
+            if (device.kind === 'videoinput') {
+              return (
+                <Picker.Item
+                  label={device.label}
+                  value={device.deviceId}
+                  key={device.deviceId}
+                />
+              );
+            }
+          })}
+        </Picker>
+        <Picker
+          enabled={!isPickerDisabled}
+          selectedValue={selectedMic}
+          style={[{borderColor: btnTheme}, style.popupPicker]}
+          onValueChange={(itemValue) => setSelectedMic(itemValue)}>
+          {deviceList.map((device: any) => {
+            if (device.kind === 'audioinput') {
+              return (
+                <Picker.Item
+                  label={device.label}
+                  value={device.deviceId}
+                  key={device.deviceId}
+                />
+              );
+            }
+          })}
+        </Picker>
+      </View>
+      <View style={{marginTop: 15}}></View>
+      {$config.EVENT_MODE && isPickerDisabled && (
+        <View>
+          <Text style={style.infoTxt}>
+            Video and Audio sharing is disabled for attendees. Raise hand to
+            request permission to share
+          </Text>
+        </View>
+      )}
+    </View>
   );
 };
 
@@ -70,6 +100,11 @@ const style = StyleSheet.create({
     fontSize: 15,
     minHeight: 35,
   },
+  infoTxt: {
+    textAlign: 'center',
+    fontSize: 12,
+    color: '#FF0000',
+  },
 });
 
 export default SelectDevice;

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

@@ -0,0 +1,121 @@
+import React, {useContext} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+  useWindowDimensions,
+  StyleSheet,
+  Platform,
+} from 'react-native';
+import {RFValue} from 'react-native-responsive-fontsize';
+import {UserType} from '../../components/RTMConfigure';
+import TextWithTooltip from '../TextWithTooltip';
+import chatContext from '../../components/ChatContext';
+
+const ChatParticipants = (props: any) => {
+  const {
+    selectUser,
+    setPrivateMessageLastSeen,
+    privateMessageCountMap,
+    lastCheckedPrivateState,
+  } = props;
+  const {height, width} = useWindowDimensions();
+  const {userList, localUid} = useContext(chatContext);
+
+  const isChatUser = (userId: string, userInfo: any) => {
+    return (
+      userId !== localUid &&
+      parseInt(userId) !== 1 &&
+      userInfo?.type !== UserType.ScreenShare &&
+      !userInfo?.offline
+    );
+  };
+
+  return (
+    <ScrollView>
+      {Object.entries(userList).map(([uid, value]) => {
+        if (isChatUser(uid, value)) {
+          return (
+            <TouchableOpacity
+              style={style.participantContainer}
+              key={uid}
+              onPress={() => {
+                selectUser(uid);
+                setPrivateMessageLastSeen({
+                  userId: uid,
+                  lastSeenCount: privateMessageCountMap[uid],
+                });
+              }}>
+              {(privateMessageCountMap[uid] || 0) -
+                (lastCheckedPrivateState[uid] || 0) !==
+              0 ? (
+                <View style={style.chatNotificationPrivate}>
+                  <Text>
+                    {(privateMessageCountMap[uid] || 0) -
+                      (lastCheckedPrivateState[uid] || 0)}
+                  </Text>
+                </View>
+              ) : null}
+              <View style={{flex: 1}}>
+                <TextWithTooltip
+                  touchable={false}
+                  style={[
+                    style.participantText,
+                    {
+                      fontSize: RFValue(16, height > width ? height : width),
+                    },
+                  ]}
+                  value={userList[uid] ? userList[uid].name + ' ' : 'User '}
+                />
+              </View>
+              <View>
+                <Text
+                  style={{
+                    color: $config.PRIMARY_FONT_COLOR,
+                    fontSize: 18,
+                  }}>{`>`}</Text>
+              </View>
+            </TouchableOpacity>
+          );
+        }
+      })}
+    </ScrollView>
+  );
+};
+
+const style = StyleSheet.create({
+  participantContainer: {
+    flexDirection: 'row',
+    flex: 1,
+    height: 20,
+    marginTop: 10,
+    backgroundColor: $config.SECONDARY_FONT_COLOR,
+    overflow: 'hidden',
+    marginHorizontal: 10,
+  },
+  participantText: {
+    flex: 1,
+    fontWeight: Platform.OS === 'web' ? '500' : '700',
+    flexDirection: 'row',
+    color: $config.PRIMARY_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: Platform.OS === 'ios' ? 'Helvetica' : 'sans-serif',
+    borderRadius: 10,
+    position: 'absolute',
+    right: 20,
+    top: 0,
+  },
+});
+export default ChatParticipants;

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

@@ -0,0 +1,23 @@
+import React, {useContext} from 'react';
+import {View} from 'react-native';
+import RemoteLiveStreamApprovedRequestRecall from './controls/RemoteLiveStreamApprovedRequestRecall';
+import LiveStreamContext, {requestStatus} from '../../components/livestream';
+
+const ApprovedLiveStreamControlsView = (props: {
+  uid: number;
+  p_styles: any;
+}) => {
+  const {uid, p_styles} = props;
+  const {currLiveStreamRequest} = useContext(LiveStreamContext);
+
+  if (currLiveStreamRequest[uid]?.status === requestStatus.Approved) {
+    return (
+      <View style={[p_styles.actionBtnIcon, {marginRight: 10}]}>
+        <RemoteLiveStreamApprovedRequestRecall uid={uid} />
+      </View>
+    );
+  }
+  return <></>;
+};
+
+export default ApprovedLiveStreamControlsView;

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

@@ -0,0 +1,70 @@
+import React, {useContext, useEffect, useState} from 'react';
+import {View, Text} from 'react-native';
+import RemoteLiveStreamRequestApprove from './controls/RemoteLiveStreamRequestApprove';
+import RemoteLiveStreamRequestReject from './controls/RemoteLiveStreamRequestReject';
+import ParticipantName from '../../components/participants/ParticipantName';
+import LiveStreamContext, {requestStatus} from '../../components/livestream';
+import {filterObject} from '../../utils/index';
+import ParticipantSectionTitle from '../../components/participants/ParticipantSectionTitle';
+
+const CurrentLiveStreamRequestsView = (props: any) => {
+  const {userList, p_style} = props;
+  const {currLiveStreamRequest, setLastCheckedRequestTimestamp} =
+    useContext(LiveStreamContext);
+  const [activeLiveStreamRequests, setActiveLiveStreamRequests] =
+    React.useState({});
+
+  useEffect(() => {
+    setActiveLiveStreamRequests(
+      filterObject(
+        currLiveStreamRequest,
+        ([k, v]) => v?.status === requestStatus.AwaitingAction,
+      ),
+    );
+  }, [currLiveStreamRequest]);
+
+  React.useEffect(() => {
+    // On unmount update the timestamp, if the user was already active in this view
+    return () => {
+      setLastCheckedRequestTimestamp(new Date().getTime());
+    };
+  }, []);
+
+  return (
+    <>
+      <ParticipantSectionTitle
+        title="Streaming Request "
+        count={Object.keys(activeLiveStreamRequests).length}
+      />
+      <View style={p_style.participantContainer}>
+        {Object.keys(currLiveStreamRequest).length == 0 ||
+        Object.keys(activeLiveStreamRequests).length == 0 ? (
+          <Text style={p_style.infoText}>No streaming request(s)</Text>
+        ) : (
+          Object.keys(activeLiveStreamRequests).map(
+            (userUID: any, index: number) =>
+              userList[userUID] ? (
+                <View style={p_style.participantRow} key={index}>
+                  <ParticipantName value={userList[userUID]?.name || 'User'} />
+                  <View style={p_style.participantActionContainer}>
+                    <RemoteLiveStreamRequestApprove
+                      user={{...userList[userUID], uid: userUID}}
+                    />
+                    <RemoteLiveStreamRequestReject
+                      user={{...userList[userUID], uid: userUID}}
+                    />
+                  </View>
+                </View>
+              ) : (
+                <View style={p_style.participantRow} key={index}>
+                  <ParticipantName value={'User not found'} />
+                </View>
+              ),
+          )
+        )}
+      </View>
+    </>
+  );
+};
+
+export default CurrentLiveStreamRequestsView;

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

@@ -0,0 +1,57 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import React, {useContext} from 'react';
+import {StyleSheet} from 'react-native';
+import LiveStreamContext from '../../../components/livestream';
+import {PropsContext} from '../../../../agora-rn-uikit';
+import {BtnTemplate} from '../../../../agora-rn-uikit';
+import icons from '../../../assets/icons';
+
+const LocalRaiseHand = () => {
+  const {styleProps} = useContext(PropsContext);
+  const {audienceSendsRequest, audienceRecallsRequest, raiseHandRequestActive} =
+    useContext(LiveStreamContext);
+  const {localBtnStyles} = styleProps || {};
+  const {theme} = styleProps || {};
+  const {muteLocalAudio} = localBtnStyles || {};
+
+  return (
+    <BtnTemplate
+      icon={icons['raiseHandIcon']}
+      btnText={raiseHandRequestActive ? 'Lower hand' : 'Raise Hand'}
+      color={raiseHandRequestActive ? '#FD0845' : theme}
+      style={{
+        ...style.localBtn,
+        ...(localBtnStyles as object),
+        ...(muteLocalAudio as object),
+      }}
+      onPress={() => {
+        if (!raiseHandRequestActive) {
+          audienceSendsRequest();
+        } else {
+          audienceRecallsRequest();
+        }
+      }}
+    />
+  );
+};
+
+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

@@ -0,0 +1,24 @@
+import React, {useContext} from 'react';
+import ChatContext from '../../../components/ChatContext';
+import {BtnTemplate} from '../../../../agora-rn-uikit';
+import {LiveStreamControlMessageEnum} from '../../../components/livestream';
+import icons from '../../../assets/icons';
+
+const RemoteLiveStreamApprovedRequestRecall = (props: {uid: number}) => {
+  const {sendControlMessageToUid} = useContext(ChatContext);
+  return (
+    <BtnTemplate
+      style={{width: 24, height: 22}}
+      onPress={() => {
+        sendControlMessageToUid(
+          LiveStreamControlMessageEnum.raiseHandApprovedRequestRecall,
+          props.uid,
+        );
+      }}
+      color="#FD0845"
+      icon={icons['demoteIcon']}
+    />
+  );
+};
+
+export default RemoteLiveStreamApprovedRequestRecall;

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

@@ -0,0 +1,38 @@
+import React, {useContext} from 'react';
+import {View} from 'react-native';
+import {
+  BtnTemplate,
+  PropsContext,
+  UidInterface,
+} from '../../../../agora-rn-uikit';
+import LiveStreamContext from '../../../components/livestream';
+import icons from '../../../assets/icons';
+
+interface RemoteLiveStreamControlInterface {
+  user: UidInterface;
+}
+
+const RemoteLiveStreamRequestApprove: React.FC<RemoteLiveStreamControlInterface> =
+  (props) => {
+    const {user} = props;
+    const {hostApprovesRequestOfUID} = useContext(LiveStreamContext);
+    const {styleProps} = useContext(PropsContext);
+    const {remoteBtnStyles} = styleProps || {};
+
+    const {liveStreamHostControlBtns} = remoteBtnStyles || {};
+
+    return (
+      <View style={{...(liveStreamHostControlBtns as object), marginRight: 15}}>
+        <BtnTemplate
+          disabled={!user?.uid}
+          icon={icons['checkCircleIcon']}
+          style={{...(liveStreamHostControlBtns as object)}}
+          onPress={() => {
+            hostApprovesRequestOfUID(user?.uid);
+          }}
+        />
+      </View>
+    );
+  };
+
+export default RemoteLiveStreamRequestApprove;

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

@@ -0,0 +1,37 @@
+import React, {useContext} from 'react';
+import {View} from 'react-native';
+import {
+  BtnTemplate,
+  PropsContext,
+  UidInterface,
+} from '../../../../agora-rn-uikit';
+import LiveStreamContext from '../../../components/livestream';
+import icons from '../../../assets/icons';
+
+interface RemoteLiveStreamControlInterface {
+  user: UidInterface;
+}
+
+const RemoteLiveStreamRequestReject: React.FC<RemoteLiveStreamControlInterface> =
+  (props) => {
+    const {user} = props;
+    const {hostRejectsRequestOfUID} = useContext(LiveStreamContext);
+    const {styleProps} = useContext(PropsContext);
+    const {remoteBtnStyles} = styleProps || {};
+    const {liveStreamHostControlBtns} = remoteBtnStyles || {};
+
+    return (
+      <View style={{...(liveStreamHostControlBtns as object)}}>
+        <BtnTemplate
+          disabled={!user?.uid}
+          icon={icons['crossCircleIcon']}
+          style={{...(liveStreamHostControlBtns as object)}}
+          onPress={() => {
+            hostRejectsRequestOfUID(user.uid);
+          }}
+        />
+      </View>
+    );
+  };
+
+export default RemoteLiveStreamRequestReject;

package/template/src/subComponents/livestream/index.ts

@@ -0,0 +1,18 @@
+// Remote controls
+import RemoteLiveStreamApprovedRequestRecall from './controls/RemoteLiveStreamApprovedRequestRecall';
+import RemoteLiveStreamRequestApprove from './controls/RemoteLiveStreamRequestApprove';
+import RemoteLiveStreamRequestReject from './controls/RemoteLiveStreamRequestReject';
+// Local controls
+import LocalRaiseHand from './controls/LocalRaiseHand';
+// Views
+import CurrentLiveStreamRequestsView from './CurrentLiveStreamRequestsView';
+import ApprovedLiveStreamControlsView from './ApprovedLiveStreamControlsView';
+
+export {
+  RemoteLiveStreamApprovedRequestRecall,
+  RemoteLiveStreamRequestApprove,
+  RemoteLiveStreamRequestReject,
+  LocalRaiseHand,
+  CurrentLiveStreamRequestsView,
+  ApprovedLiveStreamControlsView,
+};