agora-appbuilder-core 4.0.0-test.2 → 4.0.1

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

@@ -11,7 +11,7 @@
 */
 import React, {useContext} from 'react';
 import {View, StyleSheet} from 'react-native';
-import {PropsContext, ClientRole} from '../../agora-rn-uikit';
+import {PropsContext, ClientRoleType} from '../../agora-rn-uikit';
 import LocalAudioMute, {
   LocalAudioMuteProps,
 } from '../subComponents/LocalAudioMute';
@@ -22,7 +22,7 @@ import Recording, {RecordingButtonProps} from '../subComponents/Recording';
 import LiveStreamControls, {
   LiveStreamControlsProps,
 } from './livestream/views/LiveStreamControls';
-import {useMeetingInfo} from './meeting-info/useMeetingInfo';
+import {useRoomInfo} from './room-info/useRoomInfo';
 import ScreenshareButton, {
   ScreenshareButtonProps,
 } from '../subComponents/screenshare/ScreenshareButton';
@@ -35,12 +35,13 @@ import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 const Controls = () => {
   const {
     data: {isHost},
-  } = useMeetingInfo();
+  } = useRoomInfo();
   const {rtcProps} = useContext(PropsContext);
 
   return (
     <View style={style.bottomBar}>
-      {$config.EVENT_MODE && rtcProps.role == ClientRole.Audience ? (
+      {$config.EVENT_MODE &&
+      rtcProps.role == ClientRoleType.ClientRoleAudience ? (
         <LiveStreamControls showControls={true} />
       ) : (
         <>
@@ -51,7 +52,10 @@ const Controls = () => {
            */}
           {$config.EVENT_MODE && (
             <LiveStreamControls
-              showControls={rtcProps?.role == ClientRole.Broadcaster && !isHost}
+              showControls={
+                rtcProps?.role == ClientRoleType.ClientRoleBroadcaster &&
+                !isHost
+              }
             />
           )}
           <View style={{alignSelf: 'center'}}>

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

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

package/template/src/components/DeviceConfigure.tsx

@@ -17,7 +17,7 @@ import React, {
   useRef,
   useContext,
 } from 'react';
-import {ClientRole} from '../../agora-rn-uikit';
+import {ClientRoleType, RtcContext} from '../../agora-rn-uikit';
 import DeviceContext from './DeviceContext';
 import AgoraRTC, {DeviceInfo} from 'agora-rtc-sdk-ng';
 import {useRtc} from 'customization-api';
@@ -29,6 +29,18 @@ import type RtcEngine from '../../bridge/rtc/webNg/';
 import ColorContext from './ColorContext';
 import {SdkApiContext} from './SdkApiContext';
 import SDKEvents from '../utils/SdkEvents';
+import {getOS} from '../utils/common';
+import LocalEventEmitter, {
+  LocalEventsEnum,
+} from '../rtm-events-api/LocalEvents';
+import {useString} from '../utils/useString';
+import {
+  deviceDetectionSecondaryBtnText,
+  deviceDetectionCheckboxText,
+  deviceDetectionPrimaryBtnText,
+  deviceDetectionToastHeading,
+  deviceDetectionToastSubHeading,
+} from '../language/default-labels/videoCallScreenLabels';
 
 const log = (...args: any[]) => {
   console.log('[DeviceConfigure] ', ...args);
@@ -37,19 +49,27 @@ const log = (...args: any[]) => {
 type WebRtcEngineInstance = InstanceType<typeof RtcEngine>;
 
 interface Props {
-  userRole: ClientRole;
+  userRole: ClientRoleType;
 }
 export type deviceInfo = MediaDeviceInfo;
 export type deviceId = deviceInfo['deviceId'];
 export type deviceKind = deviceInfo['kind'];
 
 const DeviceConfigure: React.FC<Props> = (props: any) => {
-  const rtc = useRtc();
+  const rtc = useContext(RtcContext);
   const [uiSelectedCam, setUiSelectedCam] = useState('');
   const [uiSelectedMic, setUiSelectedMic] = useState('');
   const [uiSelectedSpeaker, setUiSelectedSpeaker] = useState('');
   const [deviceList, setDeviceList] = useState<deviceInfo[]>([]);
 
+  const toastHeading = useString(deviceDetectionToastHeading);
+  const toastSubHeading = useString<{name: string; label: string}>(
+    deviceDetectionToastSubHeading,
+  );
+  const toastPrimaryBtnText = useString(deviceDetectionPrimaryBtnText)();
+  const toastCancelBtnText = useString(deviceDetectionSecondaryBtnText)();
+  const toastCheckboxBtnText = useString(deviceDetectionCheckboxText)();
+
   const micSelectInProgress = useRef(false);
   const micSelectQueue = useRef([]);
 
@@ -82,7 +102,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
 
   const isChrome = useMemo(() => {
     return (
-      deviceList.filter((device) => device.deviceId === 'default').length > 0
+      deviceList.filter(device => device.deviceId === 'default').length > 0
     );
   }, [deviceList]);
 
@@ -100,7 +120,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
   ) => {
     // const {kind, deviceId} = device;
 
-    setStore((prevState) => ({
+    setStore(prevState => ({
       ...prevState,
       activeDeviceId: {
         ...activeDeviceId,
@@ -119,7 +139,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
     //   'rememberedDevicesList',
     //   JSON.stringify(rememberedDevicesList.current),
     // );
-    setStore((prevState) => ({
+    setStore(prevState => ({
       ...prevState,
       rememberedDevicesList: {
         ...prevState.rememberedDevicesList,
@@ -133,12 +153,14 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
     }));
   };
 
-  const {RtcEngine} = rtc as unknown as {RtcEngine: WebRtcEngineInstance};
-  const {localStream} = RtcEngine;
+  const {RtcEngineUnsafe} = rtc as unknown as {
+    RtcEngineUnsafe: WebRtcEngineInstance;
+  };
+  const {localStream} = RtcEngineUnsafe;
 
   const refreshDeviceList = useCallback(async (noEmitLog?: boolean) => {
     let updatedDeviceList: MediaDeviceInfo[];
-    await RtcEngine.getDevices(function (devices: deviceInfo[]) {
+    await RtcEngineUnsafe.getDevices(function (devices: deviceInfo[]) {
       !noEmitLog && log('Fetching all devices: ', devices);
       /**
        * Some browsers list the same microphone twice with different Id's,
@@ -173,14 +195,22 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
   const getAgoraTrackDeviceId = (type: 'audio' | 'video') => {
     const mutedState =
       //@ts-ignore
-      type === 'audio' ? !RtcEngine.isAudioEnabled : !RtcEngine.isVideoEnabled;
+      type === 'audio'
+        ? //@ts-ignore
+          !RtcEngineUnsafe.isAudioEnabled
+        : //@ts-ignore
+          !RtcEngineUnsafe.isVideoEnabled;
 
     let currentDevice: string;
 
     if (mutedState) {
       currentDevice =
         //@ts-ignore
-        type === 'audio' ? RtcEngine.audioDeviceId : RtcEngine.videoDeviceId;
+        type === 'audio'
+          ? //@ts-ignore
+            RtcEngineUnsafe.audioDeviceId
+          : //@ts-ignore
+            RtcEngineUnsafe.videoDeviceId;
       log(`Agora ${type} Engine is using`, currentDevice);
     } else {
       currentDevice = localStream[type]
@@ -212,7 +242,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
         break;
       case 'audiooutput':
         //@ts-ignore
-        let speakerId = RtcEngine.speakerDeviceId;
+        let speakerId = RtcEngineUnsafe.speakerDeviceId;
         speakerId &&
           SDKEvents.emit('devices-selected-speaker-changed', speakerId);
         setUiSelectedSpeaker(speakerId);
@@ -221,7 +251,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
         micId = getAgoraTrackDeviceId('audio');
         camId = getAgoraTrackDeviceId('video');
         //@ts-ignore
-        speakerId = RtcEngine.speakerDeviceId;
+        speakerId = RtcEngineUnsafe.speakerDeviceId;
 
         micId && SDKEvents.emit('devices-selected-microphone-changed', micId);
         setUiSelectedMic(micId);
@@ -249,7 +279,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
     switch (kind) {
       case 'audioinput':
         const audioInputFallbackDeviceId = deviceListLocal.find(
-          (device) =>
+          device =>
             device.kind === 'audioinput' &&
             (isChrome ? device.deviceId === 'default' : true),
         )?.deviceId;
@@ -257,13 +287,13 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
         break;
       case 'videoinput':
         const videoInputFallbackDeviceId = deviceListLocal.find(
-          (device) => device.kind === 'videoinput',
+          device => device.kind === 'videoinput',
         )?.deviceId;
         setSelectedCam(videoInputFallbackDeviceId);
         break;
       case 'audiooutput':
         const audioOutputFallbackDeviceId = deviceListLocal.find(
-          (device) =>
+          device =>
             device.kind === 'audiooutput' &&
             (isChrome ? device.deviceId === 'default' : true),
         )?.deviceId;
@@ -277,7 +307,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
     deviceId: deviceId,
     deviceList: MediaDeviceInfo[],
   ) => {
-    return deviceList.find((device) => device.deviceId === deviceId)
+    return deviceList.find(device => device.deviceId === deviceId)
       ? true
       : false;
   };
@@ -318,7 +348,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
       .then(() => {
         promise.res();
       })
-      .catch((e) => {
+      .catch(e => {
         promise.rej(e);
       })
       .finally(() => {
@@ -328,14 +358,16 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
 
   useEffect(() => {
     // Notify updated state every 20s
-    let count = 0;
-    const interval = setInterval(() => {
-      count = count + 1;
-      refreshDeviceList(count % 10 !== 0);
-    }, 2000);
-    return () => {
-      clearInterval(interval);
-    };
+    if (getOS() !== 'macos') {
+      let count = 0;
+      const interval = setInterval(() => {
+        count = count + 1;
+        refreshDeviceList(count % 10 !== 0);
+      }, 2000);
+      return () => {
+        clearInterval(interval);
+      };
+    }
   }, []);
 
   useEffect(() => {
@@ -374,12 +406,18 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
           },
         }[kind];
 
+        // non chrome, ignore speaker
+        if (!isChrome && kind === 'audiooutput') {
+          setUiSelectedSpeaker('');
+          return;
+        }
+
         if (uiSelectedState && uiSelectedState.trim().length != 0) {
           return;
         }
 
         const defaultSpeaker = deviceList.find(
-          (device) =>
+          device =>
             device.deviceId === 'default' &&
             (isChrome ? device.deviceId === 'default' : true),
         )?.deviceId;
@@ -440,7 +478,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
           checkDeviceExists(storedDevice, deviceList)
         ) {
           log(logTag, deviceLogTag, 'Setting to active id', storedDevice);
-          setDevice(storedDevice).catch((e:Error) => {
+          setDevice(storedDevice).catch((e: Error) => {
             log(
               logTag,
               deviceLogTag,
@@ -525,7 +563,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
     }
 
     const didChangeDeviceExistBefore = previousDeviceList.find(
-      (device) => device.deviceId === changedDevice.deviceId,
+      device => device.deviceId === changedDevice.deviceId,
     )
       ? true
       : false;
@@ -553,7 +591,10 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
   // Port this to useEffectEvent(https://beta.reactjs.org/reference/react/useEffectEvent) when
   // released
   useEffect(() => {
-    AgoraRTC.onMicrophoneChanged = commonOnChangedEvent;
+    AgoraRTC.onMicrophoneChanged = data => {
+      LocalEventEmitter.emit(LocalEventsEnum.MIC_CHANGED);
+      commonOnChangedEvent(data);
+    };
     return () => {
       AgoraRTC.onMicrophoneChanged = null;
     };
@@ -626,7 +667,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
           .then(() => {
             queueItem.resolveQueued();
           })
-          .catch((e) => queueItem.rejectQueued(e));
+          .catch(e => queueItem.rejectQueued(e));
       }
     };
     return new Promise<void>((res, rej) => {
@@ -637,7 +678,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
         return;
       }
       mutexRef.current = true;
-      RtcEngine[setMethod](
+      RtcEngineUnsafe[setMethod](
         deviceId,
         () => {
           syncSelectedDeviceUi(kind);
@@ -686,24 +727,27 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
 
     Toast.show({
       type: 'checked',
+      leadingIconName: 'mic-on',
       // leadingIcon: <CustomIcon name={'mic-on'} />,
-      text1: `New ${name} detected`,
+      text1: toastHeading(name),
+      text2: toastSubHeading({name, label: device?.label}),
       // @ts-ignore
-      text2: (
-        <Text>
-          <Text>New {name} named </Text>
-          <Text style={{fontWeight: 'bold'}}>{device.label}</Text>
-          <Text> detected. Do you want to switch?</Text>
-        </Text>
-      ),
+      // text2: (
+      //   <Text>
+      //     <Text>New {name} named </Text>
+      //     <Text style={{fontWeight: 'bold'}}>{device.label}</Text>
+      //     <Text> detected. Do you want to switch?</Text>
+      //   </Text>
+      // ),
       visibilityTime: 6000,
+      //@ts-ignore
       checkbox: {
         disabled: false,
         color: primaryColor,
-        text: 'Remember my choice',
+        text: toastCheckboxBtnText,
       },
       primaryBtn: {
-        text: 'SWITCH DEVICE',
+        text: toastPrimaryBtnText,
         onPress: (checked: boolean) => {
           setAction(device.deviceId);
           checked && updateRememberedDeviceList(device, true);
@@ -711,7 +755,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
         },
       },
       secondaryBtn: {
-        text: 'IGNORE',
+        text: toastCancelBtnText,
         onPress: (checked: boolean) => {
           checked && updateRememberedDeviceList(device, false);
           Toast.hide();
@@ -731,6 +775,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
         setSelectedSpeaker,
         deviceList,
         setDeviceList,
+        isChrome,
       }}>
       {props.children}
     </DeviceContext.Provider>

package/template/src/components/DeviceContext.tsx

@@ -20,6 +20,7 @@ interface DeviceContext {
   setSelectedSpeaker: (speaker: string) => Promise<any>;
   deviceList: MediaDeviceInfo[];
   setDeviceList: (devices: MediaDeviceInfo[]) => void;
+  isChrome: boolean;
 }
 
 const DeviceContext = createContext<DeviceContext>({
@@ -31,5 +32,6 @@ const DeviceContext = createContext<DeviceContext>({
   setSelectedMic: async () => {},
   setSelectedSpeaker: async () => {},
   setDeviceList: () => {},
+  isChrome: false,
 });
 export default DeviceContext;