agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/utils/useFindActiveSpeaker.ts

@@ -0,0 +1,373 @@
+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';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
+
+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) => {
+    const timenow = Date.now();
+    if (uid !== activeSpeakerUid.current) {
+      activeSpeakerUid.current = uid;
+      uid
+        ? logger.log(
+            LogSource.Internals,
+            'ACTIVE_SPEAKER',
+            `${'Final Active speaker - '} ${uid}`,
+            {
+              timestamp: timenow,
+              uid: 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);
+      logger.log(
+        LogSource.Internals,
+        'ACTIVE_SPEAKER',
+        `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);
+      logger.log(
+        LogSource.Internals,
+        'ACTIVE_SPEAKER',
+        `local user speaking volume ${sender} = ${payload}`,
+      );
+    } else {
+      log(' remote user speaking volume ', sender, '=', payload);
+      logger.log(
+        LogSource.Internals,
+        'ACTIVE_SPEAKER',
+        `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);
+      logger.log(
+        LogSource.Internals,
+        'ACTIVE_SPEAKER',
+        `local user non speaking volume ${sender} = ${payload}`,
+      );
+    } else {
+      log(' remote user non speaking volume ', sender, '=', payload);
+      logger.log(
+        LogSource.Internals,
+        'ACTIVE_SPEAKER',
+        `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/useFocus.tsx

@@ -0,0 +1,51 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+
+import React, {SetStateAction, useState} from 'react';
+import {createHook} from 'customization-implementation';
+
+export interface currentFocus {
+  editName: boolean;
+}
+export interface FocusContextInterface {
+  currentFocus: currentFocus;
+  setFocus: React.Dispatch<SetStateAction<currentFocus>>;
+}
+
+const FocusContext = React.createContext<FocusContextInterface>({
+  currentFocus: {editName: false},
+  setFocus: () => {},
+});
+
+interface FocusProviderProps {
+  children: React.ReactNode;
+}
+const FocusProvider = (props: FocusProviderProps) => {
+  const [currentFocus, setFocus] = useState<currentFocus>({
+    editName: false,
+  });
+
+  const value = {currentFocus, setFocus};
+
+  return (
+    <FocusContext.Provider value={value}>
+      {props.children}
+    </FocusContext.Provider>
+  );
+};
+
+/**
+ * The Focus app state governs the chatinput and editname.
+ */
+const useFocus = createHook(FocusContext);
+
+export {FocusProvider, useFocus};

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

@@ -0,0 +1,12 @@
+export const useFullScreen = () => {
+  const requestFullscreen = async () => {
+    console.error('Full screen API not supported for native');
+    return Promise.reject(false);
+  };
+
+  const exitFullScreen = () => {
+    console.error('Full screen API not supported for native');
+  };
+
+  return {requestFullscreen, exitFullScreen};
+};

package/template/src/utils/useFullScreen.ts

@@ -0,0 +1,161 @@
+import {useEffect, useRef} from 'react';
+import {useContent, useLocalUserInfo} from 'customization-api';
+import {UidType} from '../../agora-rn-uikit';
+import {isWebInternal} from '../utils/common';
+import {logger, LogSource} from '../logger/AppBuilderLogger';
+
+export const useFullScreen = () => {
+  const {uid: localUid, screenUid: localScreenUid} = useLocalUserInfo();
+  const {defaultContent} = useContent();
+  const defaultContentRef = useRef(defaultContent);
+
+  useEffect(() => {
+    defaultContentRef.current = defaultContent;
+  }, [defaultContent]);
+
+  const onFullScreenChange = () => {
+    setTimeout(() => {
+      try {
+        if (
+          document.fullscreenElement &&
+          screen?.orientation?.type?.startsWith('portrait')
+        ) {
+          //@ts-ignore
+          screen?.orientation?.lock &&
+            //@ts-ignore
+            screen?.orientation?.lock('landscape')?.catch(e => {
+              console.error('debugging error on lock', e);
+            });
+        }
+      } catch (error) {
+        console.error('debugging error on onFullScreenChange', error);
+      }
+    }, 500);
+  };
+
+  useEffect(() => {
+    try {
+      document?.addEventListener('fullscreenchange', onFullScreenChange);
+    } catch (error) {}
+
+    return () => {
+      document?.removeEventListener('fullscreenchange', onFullScreenChange);
+    };
+  }, []);
+
+  const requestFullscreen = async (uid: UidType) => {
+    if (!document?.fullscreenEnabled) {
+      console.error('Full screen API - Not supported');
+      return Promise.reject(false);
+    }
+
+    if (!isWebInternal()) {
+      console.error('Full screen API - only available web platform');
+      return Promise.reject(false);
+    }
+
+    if (!uid) {
+      console.error("Full screen API - Uid can't be empty");
+      return Promise.reject(false);
+    }
+
+    let isVideoEnabled = defaultContentRef?.current[uid]?.video;
+
+    if (!isVideoEnabled) {
+      console.error(
+        `Full screen API - please enable video for uid - ${uid} before calling full screen api`,
+      );
+      return Promise.reject(false);
+    }
+
+    let fullScreenUid = uid === localUid ? 0 : uid === localScreenUid ? 1 : uid;
+
+    try {
+      /**
+       * Agora assign user uid in the video tag container element
+       * 0 - local user
+       * 1 - local screen
+       * actual user uid - for rest of remote stream
+       *
+       * agora assign uid to parent div of video element
+       * so that's reason we are access children element to get the video element
+       *
+       * we can requestFullScreen for parent div
+       * but it won't have auto rotate as soon fullscreen enabled and timer/exit full screen buttons
+       *
+       * Sample structure
+       * <div id="0" >
+       *   <div>
+       *    <video />
+       *   </div>
+       * </div>
+       *  */
+      const videoTag = document.getElementById(fullScreenUid?.toString())
+        ?.children[0]?.children[0];
+
+      if (!document?.fullscreenElement && videoTag?.requestFullscreen) {
+        videoTag
+          ?.requestFullscreen()
+          .then(() => {
+            logger.log(
+              LogSource.Internals,
+              'FULL_SCREEN',
+              'requestFullscreen success',
+            );
+            return Promise.resolve(true);
+          })
+          .catch(error => {
+            logger.error(
+              LogSource.Internals,
+              'FULL_SCREEN',
+              'requestFullscreen - error',
+              error,
+            );
+            return Promise.reject(false);
+          });
+      } else {
+        logger.error(
+          LogSource.Internals,
+          'FULL_SCREEN',
+          'requestFullscreen - error',
+        );
+        return Promise.reject(false);
+      }
+    } catch (error) {
+      logger.log(
+        LogSource.Internals,
+        'FULL_SCREEN',
+        'requestFullscreen error',
+        error,
+      );
+      return Promise.reject(false);
+    }
+  };
+
+  const exitFullScreen = () => {
+    try {
+      if (document?.fullscreenElement) {
+        document?.exitFullscreen();
+        logger.log(
+          LogSource.Internals,
+          'FULL_SCREEN',
+          'exitFullscreen success',
+        );
+        return true;
+      } else {
+        console.error('Full screen AI - there is no fullscreen element');
+        return false;
+      }
+    } catch (error) {
+      logger.error(
+        LogSource.Internals,
+        'FULL_SCREEN',
+        'exitFullscreen error',
+        error,
+      );
+      return false;
+    }
+  };
+
+  return {requestFullscreen, exitFullScreen};
+};