agora-appbuilder-core 2.0.1 → 2.0.3-rc2

package/template/src/components/Controls.tsx

@@ -9,31 +9,26 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState, useContext, useEffect} from 'react';
-import {
-  View,
-  Dimensions,
-  Platform,
-  StyleSheet,
-  Text,
-} from 'react-native';
+import React, {useState, useContext} from 'react';
+import {View, Dimensions, Platform, StyleSheet} from 'react-native';
 import {LocalUserContext} from '../../agora-rn-uikit';
 import {
   LocalAudioMute,
   LocalVideoMute,
   Endcall,
+  PropsContext,
 } from '../../agora-rn-uikit';
 import Recording from '../subComponents/Recording';
 import SwitchCamera from '../subComponents/SwitchCamera';
-// import icons from '../assets/icons';
-import ScreenshareButton from '../subComponents/ScreenshareButton';
-// import ColorContext from './ColorContext';
-// import ChatContext from '../components/ChatContext';
-// import {SidePanelType} from '../subComponents/SidePanelEnum';
+import ScreenshareButton from '../subComponents/screenshare/ScreenshareButton';
 import {controlsHolder} from '../../theme.json';
 import mobileAndTabletCheck from '../utils/mobileWebTest';
+import {ClientRole} from '../../agora-rn-uikit';
+import LiveStreamControls from './livestream/views/LiveStreamControls';
 
 const Controls = (props: any) => {
+  const {rtcProps} = useContext(PropsContext);
+
   let onLayout = (e: any) => {
     setDim([e.nativeEvent.layout.width, e.nativeEvent.layout.height]);
   };
@@ -43,164 +38,63 @@ const Controls = (props: any) => {
     Dimensions.get('window').width > Dimensions.get('window').height,
   ]);
   const isDesktop = dim[0] > 1224;
-  // const {primaryColor} = useContext(ColorContext);
-  // const {messageStore} = useContext(ChatContext);
-  const [screenshareActive, setScreenshareActive] = useState(false);
-  const {
-    // participantsView,
-    // setParticipantsView,
-    setRecordingActive,
-    recordingActive,
-    // setChatDisplayed,
-    // chatDisplayed,
-    // sidePanel,
-    // setSidePanel,
-    isHost,
-    // pendingMessageLength,
-    // setLastCheckedPublicState,
-    setLayout,
-  } = props;
+  const {setRecordingActive, recordingActive, isHost} = props;
 
   return (
     <LocalUserContext>
       <View
         style={[
           style.controlsHolder,
-          {paddingHorizontal: isDesktop ? '25%' : '1%', backgroundColor: $config.SECONDARY_FONT_COLOR + 80},
+          {
+            paddingHorizontal: isDesktop ? '25%' : '1%',
+            backgroundColor: $config.SECONDARY_FONT_COLOR + 80,
+          },
         ]}
         onLayout={onLayout}>
-        <View style={{alignSelf: 'center'}}>
-          <LocalAudioMute />
-          {/* <Text
-            style={{
-              textAlign: 'center',
-              marginTop: 5,
-              color: $config.PRIMARY_COLOR,
-            }}>
-            Audio
-          </Text> */}
-        </View>
-        <View style={{alignSelf: 'center'}}>
-          <LocalVideoMute />
-          {/* <Text
-            style={{
-              textAlign: 'center',
-              marginTop: 5,
-              color: $config.PRIMARY_COLOR,
-            }}>
-            Video
-          </Text> */}
-        </View>
-        {mobileAndTabletCheck() ? (
-        <View style={{alignSelf: 'center'}}>
-          <SwitchCamera />
-          {/* <Text
-            style={{
-              textAlign: 'center',
-              marginTop: 5,
-              color: $config.PRIMARY_COLOR,
-            }}>
-            Switch
-          </Text> */}
-        </View>
-        ) : (<></>)}
-        {$config.SCREEN_SHARING ? (
-          !mobileAndTabletCheck() ? (
-            <View style={{alignSelf: 'center'}}>
-              <ScreenshareButton
-                screenshareActive={screenshareActive}
-                setScreenshareActive={setScreenshareActive}
-                setLayout={setLayout}
-                recordingActive={recordingActive}
+        {$config.EVENT_MODE && rtcProps.role == ClientRole.Audience ? (
+          <LiveStreamControls showControls={true} />
+        ) : (
+          <>
+            {/**
+             * In event mode when raise hand feature is active
+             * and audience is promoted to host, the audience can also
+             * demote himself
+             */}
+            {$config.EVENT_MODE && (
+              <LiveStreamControls
+                showControls={
+                  rtcProps?.role == ClientRole.Broadcaster && !isHost
+                }
               />
-              {/* <Text style={{color: '#fff'}}>{(dim[0] +":"+ dim[1]) + ''}</Text> */}
-              {/* <Text
-                style={{
-                  textAlign: 'center',
-                  marginTop: 5,
-                  color: $config.PRIMARY_COLOR,
-                }}>
-                Share
-              </Text> */}
+            )}
+            <View style={{alignSelf: 'center'}}>
+              <LocalAudioMute />
             </View>
-          ) : (
-            <></>
-          )
-        ) : (
-          <></>
-        )}
-        {isHost ? (
-          $config.CLOUD_RECORDING ? (
             <View style={{alignSelf: 'center'}}>
-              <Recording
-                recordingActive={recordingActive}
-                setRecordingActive={setRecordingActive}
-              />
-              {/* <Text
-                style={{
-                  textAlign: 'center',
-                  marginTop: 5,
-                  color: recordingActive ? '#FD0845' : $config.PRIMARY_COLOR,
-                }}>
-                {recordingActive ? 'Recording' : 'Record'}
-              </Text> */}
+              <LocalVideoMute />
             </View>
-          ) : (
-            <></>
-          )
-        ) : (
-          <></>
+            {mobileAndTabletCheck() && (
+              <View style={{alignSelf: 'center'}}>
+                <SwitchCamera />
+              </View>
+            )}
+            {$config.SCREEN_SHARING && !mobileAndTabletCheck() && (
+              <View style={{alignSelf: 'center'}}>
+                <ScreenshareButton />
+              </View>
+            )}
+            {isHost && $config.CLOUD_RECORDING && (
+              <View style={{alignSelf: 'center'}}>
+                <Recording
+                  recordingActive={recordingActive}
+                  setRecordingActive={setRecordingActive}
+                />
+              </View>
+            )}
+          </>
         )}
-        {/* {$config.CHAT ? (
-          <View style={{alignSelf: 'center'}}>
-            <TouchableOpacity
-              style={[style.localButton, {borderColor: primaryColor}]}
-              onPress={() => {
-                setLastCheckedPublicState(messageStore.length);
-                sidePanel === SidePanelType.Chat
-                  ? setSidePanel(SidePanelType.None)
-                  : setSidePanel(SidePanelType.Chat);
-              }}>
-              {sidePanel !== SidePanelType.Chat &&
-              pendingMessageLength !== 0 ? (
-                <View style={style.chatNotification}>
-                  {pendingMessageLength}
-                </View>
-              ) : (
-                <></>
-              )}
-              <Image
-                source={{uri: icons.chatIcon}}
-                style={[style.buttonIcon, {tintColor: primaryColor}]}
-              />
-            </TouchableOpacity>
-            <Text
-              style={{
-                textAlign: 'center',
-                marginTop: 5,
-                color: $config.PRIMARY_COLOR,
-              }}>
-              Chat
-            </Text>
-          </View>
-        ) : (
-          <></>
-        )} */}
-        {/* {isDesktop ? <View
-          style={{
-            backgroundColor: $config.PRIMARY_FONT_COLOR + '80',
-            width: 1,
-            height: '70%',
-            marginHorizontal: -20,
-            alignSelf: 'center',
-            opacity: 0.8,
-          }}
-        />:<></>} */}
         <View style={{alignSelf: 'center'}}>
           <Endcall />
-          {/* <Text style={{textAlign: 'center', marginTop: 5, color: '#FD0845'}}>
-            Hang Up
-          </Text> */}
         </View>
       </View>
     </LocalUserContext>
@@ -226,8 +120,6 @@ const style = StyleSheet.create({
     left: 25,
     top: -10,
   },
-  // localButton: localButton,
-  // buttonIcon: buttonIcon,
 });
 
 export default Controls;

package/template/src/components/DeviceConfigure.native.tsx

@@ -11,8 +11,12 @@
 */
 import React from 'react';
 import KeepAwake from 'react-native-keep-awake';
+import {ClientRole} from '../../agora-rn-uikit';
 
-const DeviceConfigure: React.FC = (props: any) => {
+interface Props {
+  userRole: ClientRole;
+}
+const DeviceConfigure: React.FC<Props> = (props: any) => {
   return (
     <>
       {props.children}

package/template/src/components/DeviceConfigure.tsx

@@ -9,35 +9,38 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState, useContext, useEffect} from 'react';
-import {RtcContext} from '../../agora-rn-uikit';
+import React, {useState, useContext, useEffect, useCallback} from 'react';
+import {RtcContext, ClientRole} from '../../agora-rn-uikit';
 import DeviceContext from './DeviceContext';
 
-const DeviceConfigure: React.FC = (props: any) => {
+interface Props {
+  userRole: ClientRole;
+}
+
+const DeviceConfigure: React.FC<Props> = (props: any) => {
   const [selectedCam, setSelectedCam] = useState('');
   const [selectedMic, setSelectedMic] = useState('');
   const [deviceList, setDeviceList] = useState([]);
   const rtc = useContext(RtcContext);
 
-  useEffect(() => {
-    if (deviceList.length === 0) {
-      rtc.RtcEngine.getDevices(function (devices: any) {
-        setDeviceList(devices);
-        for (const i in devices) {
-          if (devices[i].kind === 'videoinput') {
-            setSelectedCam(devices[i].deviceId);
-            break;
-          }
+  const refreshDevices = useCallback(async () => {
+    rtc.RtcEngine.getDevices(function (devices: any) {
+      console.log('set devices');
+      setDeviceList(devices);
+      for (const i in devices) {
+        if (devices[i].kind === 'videoinput') {
+          setSelectedCam(devices[i].deviceId);
+          break;
         }
-        for (const i in devices) {
-          if (devices[i].kind === 'audioinput') {
-            setSelectedMic(devices[i].deviceId);
-            break;
-          }
+      }
+      for (const i in devices) {
+        if (devices[i].kind === 'audioinput') {
+          setSelectedMic(devices[i].deviceId);
+          break;
         }
-      });
-    }
-  });
+      }
+    });
+  }, []);
 
   useEffect(() => {
     if (selectedCam.length !== 0) {
@@ -61,6 +64,21 @@ const DeviceConfigure: React.FC = (props: any) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedMic]);
 
+  useEffect(() => {
+    // See if device is empty
+    const deviceIdIsEmpty = deviceList.find(
+      (device) => device?.deviceId === '',
+    );
+    // If stream exists and deviceIds are empty, check for devices again
+    if (
+      rtc?.RtcEngine?.localStream &&
+      Object.keys(rtc?.RtcEngine?.localStream).length !== 0 &&
+      (deviceIdIsEmpty || deviceList.length === 0)
+    ) {
+      refreshDevices();
+    }
+  }, [rtc]);
+
   return (
     <DeviceContext.Provider
       value={{