agora-appbuilder-core 4.0.0-beta.33 → 4.0.0-beta.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-beta.33",
+  "version": "4.0.0-beta.35",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/src/components/DeviceConfigure.tsx

@@ -29,6 +29,10 @@ 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';
 
 const log = (...args: any[]) => {
   console.log('[DeviceConfigure] ', ...args);
@@ -334,14 +338,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(() => {
@@ -565,7 +571,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;
     };

package/template/src/rtm-events-api/LocalEvents.ts

@@ -3,6 +3,7 @@ export enum LocalEventsEnum {
   ACTIVE_SPEAKER = 'ACTIVE_SPEAKER',
   WHITEBOARD_ON = 'WHITEBOARD_ON',
   WHITEBOARD_OFF = 'WHITEBOARD_OFF',
+  MIC_CHANGED = 'MIC_CHANGED',
 }
 const LocalEventEmitter = new EventEmitter();
 export default LocalEventEmitter;

package/template/src/subComponents/LayoutIconButton.tsx

@@ -25,7 +25,7 @@ const LayoutIconButton = (props: LayoutIconButtonInterface) => {
   const [isHoveredOnModal, setIsHoveredOnModal] = useState(false);
   const isMobileView = isMobileUA();
   const {isOnActionSheet} = useActionSheet();
-  const showLabel = $config.ICON_TEXT || isOnActionSheet ? true : false;
+  const showLabel = $config.ICON_TEXT ? true : false;
   const setIsHovered = (hovered: boolean) => {
     if (layoutBtnRef && layoutBtnRef.current) {
       layoutBtnRef?.current?.measure((_fx, _fy, _w, h, _px, _py) => {
@@ -46,7 +46,7 @@ const LayoutIconButton = (props: LayoutIconButtonInterface) => {
   const changeLayout = useChangeDefaultLayout();
   const {currentLayout, setLayout} = useLayout();
 
-  const layout = layouts.findIndex((item) => item.name === currentLayout);
+  const layout = layouts.findIndex(item => item.name === currentLayout);
   const renderLayoutIcon = (showDropdown?: boolean) => {
     let onPress = () => {};
     let renderContent = [];
@@ -116,7 +116,7 @@ const LayoutIconButton = (props: LayoutIconButtonInterface) => {
             containerStyle={{
               opacity: !activeUids || activeUids.length === 0 ? 0.6 : 1,
             }}
-            setRef={(ref) => {
+            setRef={ref => {
               layoutBtnRef.current = ref;
             }}
             key={'defaultLayoutIconWithName'}

package/template/src/utils/common.tsx

@@ -260,6 +260,28 @@ const CustomToolbarSort = (a, b) =>
   (a.hasOwnProperty('order') ? a.order : 999999) -
   (b.hasOwnProperty('order') ? b.order : 999999);
 
+function getOS() {
+  let userAgent = window.navigator.userAgent.toLowerCase(),
+    macosPlatforms = /(macintosh|macintel|macppc|mac68k|macos)/i,
+    windowsPlatforms = /(win32|win64|windows|wince)/i,
+    iosPlatforms = /(iphone|ipad|ipod)/i,
+    os = null;
+
+  if (macosPlatforms.test(userAgent)) {
+    os = 'macos';
+  } else if (iosPlatforms.test(userAgent)) {
+    os = 'ios';
+  } else if (windowsPlatforms.test(userAgent)) {
+    os = 'windows';
+  } else if (/android/.test(userAgent)) {
+    os = 'android';
+  } else if (!os && /linux/.test(userAgent)) {
+    os = 'linux';
+  }
+
+  return os;
+}
+
 export {
   useIsDesktop,
   useIsSmall,
@@ -284,4 +306,5 @@ export {
   debounceFn,
   capitalizeFirstLetter,
   CustomToolbarSort,
+  getOS,
 };

package/template/src/utils/useIsLocalUserSpeaking.ts

@@ -1,6 +1,10 @@
 import {useLocalUserInfo} from 'customization-api';
 import hark from 'hark';
 import {useEffect, useRef, useState} from 'react';
+import {useAsyncEffect} from './useAsyncEffect';
+import LocalEventEmitter, {
+  LocalEventsEnum,
+} from '../rtm-events-api/LocalEvents';
 
 const useIsLocalUserSpeaking = () => {
   const log: (arg1: string, ...args: any[]) => void = (arg1, ...args) => {
@@ -34,48 +38,48 @@ const useIsLocalUserSpeaking = () => {
     }
   };
 
-  const listenForSpeaker = () => {
+  useEffect(() => {
+    LocalEventEmitter.on(LocalEventsEnum.MIC_CHANGED, () => {
+      listenForSpeaker();
+    });
+  }, []);
+
+  const listenForSpeaker = async () => {
     try {
       if (speechRef.current) {
         speechRef.current?.stop && speechRef.current?.stop();
       }
+      if (audioTrackRef?.current) {
+        audioTrackRef.current?.length && audioTrackRef.current[0].stop();
+      }
     } catch (error) {
       log(' Error on stopping the hark', error);
     }
-
     try {
       //detect local user speaking or not
-      navigator.mediaDevices
-        .getUserMedia({
-          audio: true,
-        })
-        .then(audioStream => {
-          audioTrackRef.current = audioStream.getAudioTracks();
-          speechRef.current = null;
-          speechRef.current = hark(audioStream, {
-            interval: 100,
-          });
-          speechRef.current.on('speaking', speakingCallBack);
-          speechRef.current.on('stopped_speaking', stoppedSpeakingCallBack);
-        });
+      const audioStream = await navigator.mediaDevices.getUserMedia({
+        audio: true,
+      });
+      audioTrackRef.current = audioStream.getAudioTracks();
+      speechRef.current = null;
+      speechRef.current = hark(audioStream, {
+        interval: 100,
+      });
+      speechRef.current.on('speaking', speakingCallBack);
+      speechRef.current.on('stopped_speaking', stoppedSpeakingCallBack);
     } catch (error) {
       log(' Error on starting the hark', error);
     }
   };
 
-  useEffect(() => {
+  useAsyncEffect(async () => {
     if ($config.ACTIVE_SPEAKER) {
-      navigator.mediaDevices.ondevicechange = () => {
-        log(' ondevicechange called');
-        listenForSpeaker();
-      };
-      listenForSpeaker();
+      await listenForSpeaker();
       return () => {
         speechRef.current && speechRef.current.stop();
         audioTrackRef.current &&
           audioTrackRef.current?.length &&
           audioTrackRef.current[0].stop();
-        navigator.mediaDevices.ondevicechange = () => {};
       };
     }
   }, []);