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

package/template/src/utils/useFindActiveSpeaker.ts

@@ -0,0 +1,335 @@
+import {
+  useLocalUid,
+  useLocalUserInfo,
+  useContent,
+  useRtc,
+  UidType,
+} from 'customization-api';
+import {useContext, useEffect, useRef} from 'react';
+import events, {PersistanceLevel} from '../rtm-events-api';
+import useIsLocalUserSpeaking from './useIsLocalUserSpeaking';
+import {filterObject} from '../utils/index';
+import ChatContext from '../components/ChatContext';
+import LocalEventEmitter, {
+  LocalEventsEnum,
+} from '../rtm-events-api/LocalEvents';
+
+enum volumeEnum {
+  IS_SPEAKING = 'IS_SPEAKING',
+  SPEAKING_VOLUME = 'SPEAKING_VOLUME',
+  NON_SPEAKING_VOLUME = 'NON_SPEAKING_VOLUME',
+}
+const useFindActiveSpeaker = () => {
+  const localUid = useLocalUid();
+  const isLocalUserSpeaking = useIsLocalUserSpeaking();
+  const {hasUserJoinedRTM} = useContext(ChatContext);
+  const {RtcEngineUnsafe} = useRtc();
+  const {defaultContent} = useContent();
+  const {uid} = useLocalUserInfo();
+  const defaultContentRef = useRef(defaultContent);
+  const maxSpeakingVolumeRef = useRef(0);
+  const minNonSpeakingVolumeRef = useRef(100);
+  const usersVolume = useRef({});
+  const activeSpeakerUid = useRef(undefined);
+
+  const emitActiveSpeaker = (uid: UidType) => {
+    if (uid !== activeSpeakerUid.current) {
+      activeSpeakerUid.current = uid;
+      LocalEventEmitter.emit(LocalEventsEnum.ACTIVE_SPEAKER, uid);
+    }
+  };
+
+  useEffect(() => {
+    defaultContentRef.current = defaultContent;
+  }, [defaultContent]);
+
+  const normalize = (value, min, max) => {
+    return (value - min) / (max - min);
+  };
+
+  const log: (arg1: string, ...args: any[]) => void = (arg1, ...args) => {
+    console.log('[ActiveSpeaker]' + arg1, ...args);
+  };
+
+  useEffect(() => {
+    if ($config.ACTIVE_SPEAKER) {
+      isLocalUserSpeaking
+        ? log(' %cLocal user started speaking', 'color:green')
+        : log(' %cLocal user stopped speaking', 'color:red');
+
+      //sending local user speaking and non speaking volume to remote users
+      let volume = 0;
+      //@ts-ignore
+      const volumes = RtcEngineUnsafe?.getUsersVolumeLevel();
+
+      const localUserData = volumes.find(i => i.uid == uid);
+      if (localUserData && localUserData.level) {
+        volume = Math.round(localUserData.level * 100) / 100;
+      }
+      if (volume) {
+        if (isLocalUserSpeaking && volume > maxSpeakingVolumeRef.current) {
+          //for remote users
+          maxSpeakingVolumeRef.current = volume;
+          hasUserJoinedRTM &&
+            events.send(
+              volumeEnum.SPEAKING_VOLUME,
+              volume.toString(),
+              PersistanceLevel.Sender,
+            );
+          //for local user
+          speakingVolumeEventCallBack({
+            payload: volume.toString(),
+            sender: uid,
+          });
+        } else if (
+          !isLocalUserSpeaking &&
+          volume < minNonSpeakingVolumeRef.current
+        ) {
+          //for remote users
+          minNonSpeakingVolumeRef.current = volume;
+          hasUserJoinedRTM &&
+            events.send(
+              volumeEnum.NON_SPEAKING_VOLUME,
+              volume.toString(),
+              PersistanceLevel.Sender,
+            );
+          //for local user
+          nonSpeakingVolumeEventCallback({
+            payload: volume.toString(),
+            sender: uid,
+          });
+        }
+      }
+
+      //inform local user is speaking
+      if (isLocalUserSpeaking) {
+        //inform remote users
+        hasUserJoinedRTM &&
+          events.send(volumeEnum.IS_SPEAKING, 'true', PersistanceLevel.Sender);
+        //for local usage
+        isSpeakingEventCallback({payload: 'true', sender: uid});
+      } else {
+        //inform remote users
+        hasUserJoinedRTM &&
+          events.send(volumeEnum.IS_SPEAKING, 'false', PersistanceLevel.Sender);
+        //for local usage
+        isSpeakingEventCallback({payload: 'false', sender: uid});
+      }
+    }
+  }, [isLocalUserSpeaking, hasUserJoinedRTM]);
+
+  //findout who is active speaker using usersVolume(speaking and non speaking volume) and current user volume
+  const findActiveSpeaker = () => {
+    //filter the user id who are all speaking
+    const speakingUids = Object.keys(
+      //@ts-ignore
+      filterObject(usersVolume.current, ([k, v]) => {
+        //@ts-ignore
+        return v?.isSpeaking && defaultContentRef.current[k]?.audio;
+      }),
+    );
+    if (!speakingUids || speakingUids?.length == 0) {
+      log(' %cFinal No Active speaker', 'color:red');
+      emitActiveSpeaker(0);
+    } else {
+      if (speakingUids?.length === 1) {
+        log(
+          ' %cFinal Active Speaker - Only one user is speaking',
+          'color:green',
+          defaultContentRef.current[speakingUids[0]]?.name,
+        );
+        emitActiveSpeaker(parseInt(speakingUids[0]));
+      } else {
+        //for logging
+        let speakerNames = '';
+
+        //get current volume levels for users
+        //@ts-ignore
+        const currentUsersVolume = RtcEngineUnsafe?.getUsersVolumeLevel();
+
+        const normalizedValues = {};
+        speakingUids?.forEach(speakerUid => {
+          //for logging
+          speakerNames =
+            speakerNames + ' ' + defaultContentRef.current[speakerUid]?.name;
+
+          const uuid = parseInt(speakerUid);
+          const data = currentUsersVolume?.find(i => i.uid === uuid);
+          const returnVal = normalize(
+            data?.level || usersVolume.current[uuid]?.speakingVolume, //current level
+            usersVolume.current[uuid]?.nonSpeakingVolume || 0,
+            usersVolume.current[uuid]?.speakingVolume || 100,
+          );
+          normalizedValues[uuid] = returnVal;
+        });
+
+        log(
+          ' %cFinal Multiple users are speaking',
+          'color:green',
+          speakerNames,
+        );
+
+        const sorted = Object.keys(normalizedValues).sort((a, b) => {
+          return normalizedValues[b] - normalizedValues[a];
+        });
+
+        log(
+          ' %cFinal Active Speaker',
+          'color:green',
+          defaultContentRef.current[sorted[0]]?.name,
+        );
+
+        emitActiveSpeaker(parseInt(sorted[0]));
+
+        //for logging purpose
+        let obj = {};
+        sorted.map(i => {
+          let id = parseInt(i);
+          const curtdata = currentUsersVolume.find(i => i.uid === id);
+          const cl =
+            curtdata && curtdata?.level
+              ? Math.round(curtdata?.level * 100) / 100
+              : 0;
+          obj[id] = {
+            name: defaultContentRef.current[id]?.name,
+            normalizedVolume: normalizedValues[id],
+            currentVolume: cl || usersVolume.current[id]?.speakingVolume,
+            minNonSpeakingVolume: usersVolume.current[id]?.nonSpeakingVolume,
+            speakingVolume: usersVolume.current[id]?.speakingVolume,
+            isSpeaking: usersVolume.current[id]?.isSpeaking,
+          };
+        });
+        log(' %cFinal Active speaker data', 'color:green', JSON.stringify(obj));
+        //for logging purpose
+      }
+    }
+
+    /*
+    //get current volume levels for users
+    //@ts-ignore
+    const currentUsersVolume = RtcEngineUnsafe?.getUsersVolumeLevel();
+
+    const normalizedValues = {};
+
+    currentUsersVolume.forEach((i) => {
+      //validation
+      if (
+        defaultContentRef.current[i.uid]?.audio &&
+        usersVolume.current[i.uid]?.isSpeaking
+      ) {
+        const returnVal = normalize(
+          i.level, //current level
+          usersVolume.current[i.uid]?.nonSpeakingVolume || 0,
+          usersVolume.current[i.uid]?.speakingVolume || 100,
+        );
+        normalizedValues[i.uid] = returnVal;
+      }
+    });
+
+    const sorted = Object.keys(normalizedValues).sort((a, b) => {
+      return normalizedValues[b] - normalizedValues[a];
+    });
+
+    if (!sorted || !sorted?.length) {
+      console.log('debugging no active speaker');
+      setActiveSpeaker(0);
+    } else if (
+      sorted &&
+      sorted.length &&
+      parseInt(sorted[0]) !== activeSpeaker
+    ) {
+      setActiveSpeaker(parseInt(sorted[0]));
+
+      //for logging purpose
+      let obj = {};
+      sorted.map((i) => {
+        let id = parseInt(i);
+        const curtdata = currentUsersVolume.find((i) => i.uid === id);
+        const cl =
+          curtdata && curtdata?.level
+            ? Math.round(curtdata?.level * 100) / 100
+            : 'no vol';
+        obj[id] = {
+          name: defaultContentRef.current[id]?.name,
+          normalizedVolume: normalizedValues[id],
+          currentVolume: cl,
+          minNonSpeakingVolume: usersVolume.current[id]?.nonSpeakingVolume,
+          speakingVolume: usersVolume.current[id]?.speakingVolume,
+          isSpeaking: usersVolume.current[id]?.isSpeaking,
+        };
+      });
+      console.log('debugging active speaker data', JSON.stringify(obj));
+      //for logging purpose
+    }*/
+  };
+
+  const isSpeakingEventCallback = ({payload, sender}) => {
+    if (sender == localUid) {
+      // log(' local user speaking stauts', sender, '=', payload);
+    } else {
+      log(' remote user speaking status ', sender, '=', payload);
+    }
+
+    usersVolume.current = {
+      ...usersVolume.current,
+      [sender]: {
+        ...usersVolume.current[sender],
+        isSpeaking: payload === 'true' ? true : false,
+      },
+    };
+    findActiveSpeaker();
+  };
+
+  const speakingVolumeEventCallBack = ({payload, sender}) => {
+    if (sender == localUid) {
+      log(' local user speaking volume ', sender, '=', payload);
+    } else {
+      log(' remote user speaking volume ', sender, '=', payload);
+    }
+
+    usersVolume.current = {
+      ...usersVolume.current,
+      [sender]: {
+        ...usersVolume.current[sender],
+        speakingVolume: parseFloat(payload),
+      },
+    };
+  };
+
+  const nonSpeakingVolumeEventCallback = ({payload, sender}) => {
+    if (sender == localUid) {
+      log(' local user non speaking volume ', sender, '=', payload);
+    } else {
+      log(' remote user non speaking volume ', sender, '=', payload);
+    }
+
+    usersVolume.current = {
+      ...usersVolume.current,
+      [sender]: {
+        ...usersVolume.current[sender],
+        nonSpeakingVolume: parseFloat(payload),
+      },
+    };
+  };
+  useEffect(() => {
+    if ($config.ACTIVE_SPEAKER) {
+      events.on(volumeEnum.SPEAKING_VOLUME, speakingVolumeEventCallBack);
+      events.on(volumeEnum.NON_SPEAKING_VOLUME, nonSpeakingVolumeEventCallback);
+      events.on(volumeEnum.IS_SPEAKING, isSpeakingEventCallback);
+    }
+
+    return () => {
+      if ($config.ACTIVE_SPEAKER) {
+        events.off(volumeEnum.SPEAKING_VOLUME, speakingVolumeEventCallBack);
+        events.off(
+          volumeEnum.NON_SPEAKING_VOLUME,
+          nonSpeakingVolumeEventCallback,
+        );
+        events.off(volumeEnum.IS_SPEAKING, isSpeakingEventCallback);
+      }
+    };
+  }, []);
+
+  return null;
+};
+export default useFindActiveSpeaker;

package/template/src/utils/useGetMeetingPhrase.ts

@@ -1,7 +1,7 @@
 import {useContext} from 'react';
 import {gql} from '@apollo/client';
-import {MeetingInfoContextInterface} from '../components/meeting-info/useMeetingInfo';
-import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
+import {RoomInfoContextInterface} from '../components/room-info/useRoomInfo';
+import {useSetRoomInfo} from '../components/room-info/useSetRoomInfo';
 import {GraphQLContext} from '../components/GraphQLProvider';
 
 const SHARE = gql`
@@ -22,7 +22,7 @@ const SHARE = gql`
 `;
 
 export default function useGetMeetingPhrase() {
-  const {setMeetingInfo} = useSetMeetingInfo();
+  const {setRoomInfo} = useSetRoomInfo();
   const {client} = useContext(GraphQLContext);
   return async (phrase: string) => {
     const response = await client.query({
@@ -37,28 +37,28 @@ export default function useGetMeetingPhrase() {
       try {
         if (response && response.data) {
           let data = response.data;
-          let meetingInfo: Partial<MeetingInfoContextInterface['data']> = {
+          let roomInfo: Partial<RoomInfoContextInterface['data']> = {
             roomId: {attendee: ''},
           };
           if (data?.share?.passphrase?.view) {
-            meetingInfo.roomId.attendee = data.share.passphrase.view;
+            roomInfo.roomId.attendee = data.share.passphrase.view;
           }
           if (data?.share?.passphrase?.host) {
-            meetingInfo.roomId.host = data.share.passphrase.host;
+            roomInfo.roomId.host = data.share.passphrase.host;
           }
           if (data?.share?.pstn) {
-            meetingInfo.pstn = {
+            roomInfo.pstn = {
               number: data.share.pstn.number,
               pin: data.share.pstn.dtmf,
             };
           }
-          setMeetingInfo((prevState) => {
+          setRoomInfo((prevState) => {
             return {
               ...prevState,
               data: {
                 ...prevState.data,
-                roomId: meetingInfo.roomId,
-                pstn: meetingInfo?.pstn,
+                roomId: roomInfo.roomId,
+                pstn: roomInfo?.pstn,
               },
             };
           });

package/template/src/utils/useIsAudioEnabled.ts

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {useRender} from 'customization-api';
+import {useContent} from 'customization-api';
 import {UidType} from '../../agora-rn-uikit';
 import {ToggleState} from '../../agora-rn-uikit/src/Contexts/PropsContext';
 
@@ -18,14 +18,14 @@ import {ToggleState} from '../../agora-rn-uikit/src/Contexts/PropsContext';
  * @returns function
  */
 function useIsAudioEnabled() {
-  const {renderList} = useRender();
+  const {defaultContent} = useContent();
   /**
    *
    * @param uid UidType
    * @returns boolean
    */
   const isAudioEnabled = (uid: UidType): boolean =>
-    renderList[uid]?.audio === ToggleState.enabled;
+    defaultContent[uid]?.audio === ToggleState.enabled;
 
   return isAudioEnabled;
 }

package/template/src/utils/useIsLocalUserSpeaking.native.ts

@@ -0,0 +1,4 @@
+const useIsLocalUserSpeaking = () => {
+  return false;
+};
+export default useIsLocalUserSpeaking;

package/template/src/utils/useIsLocalUserSpeaking.ts

@@ -0,0 +1,103 @@
+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';
+import {useIsRecordingBot} from '../subComponents/recording/useIsRecordingBot';
+
+const useIsLocalUserSpeaking = () => {
+  const log: (arg1: string, ...args: any[]) => void = (arg1, ...args) => {
+    console.log('[ActiveSpeaker]' + arg1, ...args);
+  };
+  const [isSpeaking, setIsSpeaking] = useState(false);
+  const {audio} = useLocalUserInfo();
+  const speechRef = useRef(null);
+  const audioRef = useRef(audio);
+  const audioTrackRef = useRef(null);
+  const {isRecordingBot} = useIsRecordingBot();
+
+  useEffect(() => {
+    audioRef.current = audio;
+    /**
+     * if user mute the mic while speaking then stoppedSpeakingCallBack won't be executed because of if (audioRef.current) condition
+     * so if audio is muted then set speaking as false
+     */
+    if (!audio) {
+      setIsSpeaking(false);
+    }
+  }, [audio]);
+
+  const speakingCallBack = () => {
+    if (audioRef.current) {
+      setIsSpeaking(true);
+    }
+  };
+  const stoppedSpeakingCallBack = () => {
+    if (audioRef.current) {
+      setIsSpeaking(false);
+    }
+  };
+
+  useEffect(() => {
+    LocalEventEmitter.on(LocalEventsEnum.MIC_CHANGED, () => {
+      if (isRecordingBot) {
+        return;
+      }
+      listenForSpeaker();
+    });
+  }, []);
+
+  const listenForSpeaker = async () => {
+    try {
+      if (speechRef.current) {
+        speechRef.current?.stop && speechRef.current?.stop();
+      }
+      if (audioTrackRef?.current) {
+        audioTrackRef.current?.length &&
+          audioTrackRef.current[0]?.stop &&
+          audioTrackRef.current[0]?.stop();
+      }
+    } catch (error) {
+      log(' Error on stopping the hark', error);
+    }
+    try {
+      //detect local user speaking or not
+      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);
+    }
+  };
+
+  useAsyncEffect(async () => {
+    if ($config.ACTIVE_SPEAKER && !isRecordingBot) {
+      await listenForSpeaker();
+      return () => {
+        try {
+          speechRef.current &&
+            speechRef.current.stop &&
+            speechRef.current.stop();
+          audioTrackRef.current &&
+            audioTrackRef.current?.length &&
+            audioTrackRef.current[0]?.stop &&
+            audioTrackRef.current[0]?.stop();
+        } catch (error) {
+          console.log('error couldnt stop the track');
+        }
+      };
+    }
+  }, []);
+
+  return isSpeaking;
+};
+export default useIsLocalUserSpeaking;

package/template/src/utils/useIsPSTN.ts

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {useRender} from 'customization-api';
+import {useContent} from 'customization-api';
 import {UidType} from '../../agora-rn-uikit';
 
 /**
@@ -17,14 +17,14 @@ import {UidType} from '../../agora-rn-uikit';
  * @returns function
  */
 function useIsPSTN() {
-  const {renderList} = useRender();
+  const {defaultContent} = useContent();
   /**
    *
    * @param uid number
    * @returns boolean
    */
   const isPSTN = (uid: UidType) =>
-    !renderList[uid] && String(uid)[0] === '1' ? true : false;
+    !defaultContent[uid] && String(uid)[0] === '1' ? true : false;
   return isPSTN;
 }
 

package/template/src/utils/useIsVideoEnabled.ts

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {useRender} from 'customization-api';
+import {useContent} from 'customization-api';
 import {UidType, ToggleState} from '../../agora-rn-uikit';
 
 /**
@@ -17,7 +17,7 @@ import {UidType, ToggleState} from '../../agora-rn-uikit';
  * @returns function
  */
 function useIsVideoEnabled() {
-  const {renderList} = useRender();
+  const {defaultContent} = useContent();
 
   /**
    *
@@ -25,7 +25,7 @@ function useIsVideoEnabled() {
    * @returns boolean
    */
   const isVideoEnabled = (uid: UidType): boolean =>
-    renderList[uid]?.video === ToggleState.enabled;
+    defaultContent[uid]?.video === ToggleState.enabled;
 
   return isVideoEnabled;
 }