agora-appbuilder-core 4.0.0-api.5 → 4.0.0-api.6

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/useIsLocalUserSpeaking.native.ts

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

package/template/src/utils/useIsLocalUserSpeaking.ts

@@ -0,0 +1,98 @@
+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) => {
+    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);
+
+  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, () => {
+      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) {
+      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/useJoinRoom.ts

@@ -4,6 +4,9 @@ import StorageContext from '../components/StorageContext';
 import {RoomInfoContextInterface} from '../components/room-info/useRoomInfo';
 import {useSetRoomInfo} from '../components/room-info/useSetRoomInfo';
 import {GraphQLContext} from '../components/GraphQLProvider';
+import useGetName from './useGetName';
+import useWaitingRoomAPI from '../subComponents/waiting-rooms/useWaitingRoomAPI';
+import {base64ToUint8Array} from '../utils';
 
 const JOIN_CHANNEL_PHRASE_AND_GET_USER = gql`
   query JoinChannel($passphrase: String!) {
@@ -12,11 +15,16 @@ const JOIN_CHANNEL_PHRASE_AND_GET_USER = gql`
       title
       isHost
       secret
+      secretSalt
       mainUser {
         rtc
         rtm
         uid
       }
+      whiteboard {
+        room_uuid
+        room_token
+      }
       screenShare {
         rtc
         rtm
@@ -37,11 +45,16 @@ const JOIN_CHANNEL_PHRASE = gql`
       title
       isHost
       secret
+      secretSalt
       mainUser {
         rtc
         rtm
         uid
       }
+      whiteboard {
+        room_uuid
+        room_token
+      }
       screenShare {
         rtc
         rtm
@@ -56,66 +69,114 @@ const JOIN_CHANNEL_PHRASE = gql`
 export default function useJoinRoom() {
   const {store} = useContext(StorageContext);
   const {setRoomInfo} = useSetRoomInfo();
+
   const {client} = useContext(GraphQLContext);
+  const username = useGetName();
+  const {request: requestToJoin} = useWaitingRoomAPI();
+  const isWaitingRoomEnabled = $config.ENABLE_WAITING_ROOM;
+
   return async (phrase: string) => {
-    setRoomInfo((prevState) => {
+    setRoomInfo(prevState => {
       return {
         ...prevState,
         isJoinDataFetched: false,
       };
     });
     try {
-      const response = await client.query({
-        query:
-          store.token === null
-            ? JOIN_CHANNEL_PHRASE
-            : JOIN_CHANNEL_PHRASE_AND_GET_USER,
-        variables: {
-          passphrase: phrase,
-        },
-      });
-      if (response.error) {
+      let response = null;
+      if (isWaitingRoomEnabled) {
+        response = await requestToJoin({
+          meetingPhrase: phrase,
+          send_event: false,
+        });
+      } else {
+        response = await client.query({
+          query:
+            store.token === null
+              ? JOIN_CHANNEL_PHRASE
+              : JOIN_CHANNEL_PHRASE_AND_GET_USER,
+          variables: {
+            passphrase: phrase,
+            //userName: username,
+          },
+        });
+      }
+      if (response?.error) {
         throw response.error;
       } else {
-        if (response && response.data) {
-          let data = response.data;
+        if ((response && response.data) || isWaitingRoomEnabled) {
+          let data = isWaitingRoomEnabled ? response : response.data;
           let roomInfo: Partial<RoomInfoContextInterface['data']> = {};
-          if (data?.joinChannel?.channel) {
-            roomInfo.channel = data.joinChannel.channel;
+
+          if (data?.joinChannel?.channel || data?.channel) {
+            roomInfo.channel = isWaitingRoomEnabled
+              ? data.channel
+              : data.joinChannel.channel;
           }
-          if (data?.joinChannel?.mainUser?.uid) {
-            roomInfo.uid = data.joinChannel.mainUser.uid;
+          if (data?.joinChannel?.mainUser?.uid || data?.mainUser?.uid) {
+            roomInfo.uid = isWaitingRoomEnabled
+              ? data.mainUser.uid
+              : data.joinChannel.mainUser.uid;
           }
-          if (data?.joinChannel?.mainUser?.rtc) {
-            roomInfo.token = data.joinChannel.mainUser.rtc;
+          if (data?.joinChannel?.mainUser?.rtc || data?.mainUser?.rtc) {
+            roomInfo.token = isWaitingRoomEnabled
+              ? data.mainUser.rtc
+              : data.joinChannel.mainUser.rtc;
           }
-          if (data?.joinChannel?.mainUser?.rtm) {
-            roomInfo.rtmToken = data.joinChannel.mainUser.rtm;
+          if (data?.joinChannel?.mainUser?.rtm || data?.mainUser?.rtm) {
+            roomInfo.rtmToken = isWaitingRoomEnabled
+              ? data.mainUser.rtm
+              : data.joinChannel.mainUser.rtm;
           }
-          if (data?.joinChannel?.secret) {
-            roomInfo.encryptionSecret = data.joinChannel.secret;
+          if (data?.joinChannel?.secret || data?.secret) {
+            roomInfo.encryptionSecret = isWaitingRoomEnabled
+              ? data.secret
+              : data.joinChannel.secret;
           }
-          if (data?.joinChannel?.screenShare?.uid) {
-            roomInfo.screenShareUid = data.joinChannel.screenShare.uid;
+          if (data?.joinChannel?.secretSalt || data?.secretSalt) {
+            roomInfo.encryptionSecretSalt = base64ToUint8Array(
+              isWaitingRoomEnabled
+                ? data.secretSalt
+                : data.joinChannel.secretSalt,
+            );
           }
-          if (data?.joinChannel?.screenShare?.rtc) {
-            roomInfo.screenShareToken = data.joinChannel.screenShare.rtc;
+          if (data?.joinChannel?.screenShare?.uid || data?.screenShare?.uid) {
+            roomInfo.screenShareUid = isWaitingRoomEnabled
+              ? data.screenShare.uid
+              : data.joinChannel.screenShare.uid;
           }
-          if (data?.joinChannel?.isHost) {
-            roomInfo.isHost = data.joinChannel.isHost;
+          if (data?.joinChannel?.screenShare?.rtc || data?.screenShare?.rtc) {
+            roomInfo.screenShareToken = isWaitingRoomEnabled
+              ? data.screenShare.rtc
+              : data.joinChannel.screenShare.rtc;
           }
-          if (data?.joinChannel?.title) {
-            roomInfo.meetingTitle = data.joinChannel.title;
+          roomInfo.isHost = isWaitingRoomEnabled
+            ? data.isHost
+            : data.joinChannel.isHost;
+
+          if (data?.joinChannel?.title || data?.title) {
+            roomInfo.meetingTitle = isWaitingRoomEnabled
+              ? data.title
+              : data.joinChannel.title;
+          }
+          if (data?.joinChannel?.whiteboard || data?.whiteboard) {
+            const whiteboard: RoomInfoContextInterface['data']['whiteboard'] = {
+              room_token: isWaitingRoomEnabled
+                ? data.whiteboard.room_token
+                : data?.joinChannel?.whiteboard?.room_token,
+              room_uuid: isWaitingRoomEnabled
+                ? data.whiteboard.room_uuid
+                : data?.joinChannel?.whiteboard?.room_uuid,
+            };
+            if (whiteboard?.room_token && whiteboard?.room_uuid) {
+              roomInfo.whiteboard = whiteboard;
+            }
           }
           //getUser is not available from backend
           // if (data?.getUser?.name) {
           //   roomInfo.username = data.getUser.name;
           // }
-          console.log('!!!!!Meetinginfo', {
-            roomInfo,
-            response: response.data,
-          });
-          setRoomInfo((prevState) => {
+          setRoomInfo(prevState => {
             let compiledMeetingInfo = {
               ...prevState.data,
               ...roomInfo,