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

package/template/src/utils/useLocalAudio.ts

@@ -0,0 +1,69 @@
+/*
+********************************************
+ 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 {DispatchContext, RtcContext} from '../../agora-rn-uikit';
+import {useContext} from 'react';
+import {isWeb} from './common';
+
+function useLocalAudio() {
+  const {dispatch} = useContext(DispatchContext);
+  const {RtcEngineUnsafe} = useContext(RtcContext);
+
+  const disableAudioButton = () => {
+    RtcEngineUnsafe.muteLocalAudioStream(true);
+    dispatch({
+      type: 'LocalMuteAudio',
+      value: [0, true],
+    });
+  };
+
+  const enableAudioButton = () => {
+    dispatch({
+      type: 'LocalMuteAudio',
+      value: [0, false],
+    });
+  };
+
+  const getLocalAudioStream = () => {
+    try {
+      return isWeb() ? window?.engine?.localStream?.audio : null;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const getRemoteAudioStream = (uid: number) => {
+    try {
+      return isWeb() ? window?.engine?.remoteStreams?.get(uid)?.audio : null;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const getLocalScreenshareAudioStream = () => {
+    try {
+      return isWeb() ? window?.engine?.screenStream?.audio : null;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  return {
+    enableAudioButton,
+    disableAudioButton,
+    getLocalAudioStream,
+    getRemoteAudioStream,
+    getLocalScreenshareAudioStream,
+  };
+}
+
+export default useLocalAudio;

package/template/src/utils/useLocalVideo.ts

@@ -0,0 +1,69 @@
+/*
+********************************************
+ 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 {DispatchContext, RtcContext} from '../../agora-rn-uikit';
+import {useContext} from 'react';
+import {isWeb} from './common';
+
+function useLocalVideo() {
+  const {dispatch} = useContext(DispatchContext);
+  const {RtcEngineUnsafe} = useContext(RtcContext);
+
+  const disableVideoButton = () => {
+    RtcEngineUnsafe.muteLocalVideoStream(true);
+    dispatch({
+      type: 'LocalMuteVideo',
+      value: [0, true],
+    });
+  };
+
+  const enableVideoButton = () => {
+    dispatch({
+      type: 'LocalMuteVideo',
+      value: [0, false],
+    });
+  };
+
+  const getLocalVideoStream = () => {
+    try {
+      return isWeb() ? window?.engine?.localStream?.video : null;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const getRemoteVideoStream = (uid: number) => {
+    try {
+      return isWeb() ? window?.engine?.remoteStreams?.get(uid)?.video : null;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const getLocalScreenshareVideoStream = () => {
+    try {
+      return isWeb() ? window?.engine?.screenStream?.video : null;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  return {
+    enableVideoButton,
+    disableVideoButton,
+    getLocalVideoStream,
+    getRemoteVideoStream,
+    getLocalScreenshareVideoStream,
+  };
+}
+
+export default useLocalVideo;

package/template/src/{subComponents/screenshare/ScreenshareButton.native.tsx → utils/useMenu.tsx}

@@ -9,10 +9,23 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
+
 import React from 'react';
+import {createHook} from 'customization-implementation';
+
+const ToolbarMenuContext = React.createContext({isToolbarMenuItem: false});
 
-const ScreenshareButton = () => {
-  return <></>;
+export interface ToolbarMenuProviderProps {
+  children: React.ReactNode;
+}
+const ToolbarMenuProvider = (props: ToolbarMenuProviderProps) => {
+  return (
+    <ToolbarMenuContext.Provider value={{isToolbarMenuItem: true}}>
+      {props.children}
+    </ToolbarMenuContext.Provider>
+  );
 };
 
-export default ScreenshareButton;
+const useToolbarMenu = createHook(ToolbarMenuContext);
+
+export {ToolbarMenuProvider, useToolbarMenu};

package/template/src/utils/useModal.tsx

@@ -0,0 +1,8 @@
+import {useState} from 'react';
+
+export function useModal(initialMode = false) {
+  const [modalOpen, setModalOpen] = useState(initialMode);
+  const toggle = () => setModalOpen(!modalOpen);
+
+  return {modalOpen, setModalOpen, toggle};
+}

package/template/src/utils/useMutePSTN.ts

@@ -1,7 +1,9 @@
 import {gql, useMutation} from '@apollo/client';
 import {UidType} from '../../agora-rn-uikit';
-import {useMeetingInfo} from '../components/meeting-info/useMeetingInfo';
+import {useRoomInfo} from '../components/room-info/useRoomInfo';
 import useIsPSTN from './useIsPSTN';
+import getUniqueID from './getUniqueID';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 const MUTE_PSTN = gql`
   mutation mutePSTN($uid: Int!, $passphrase: String!, $mute: Boolean!) {
     mutePSTN(uid: $uid, passphrase: $passphrase, mute: $mute) {
@@ -15,12 +17,26 @@ const useMutePSTN = () => {
   const [mutePSTN, {data, loading, error}] = useMutation(MUTE_PSTN);
   const {
     data: {isHost, roomId},
-  } = useMeetingInfo();
+  } = useRoomInfo();
   const isPSTN = useIsPSTN();
   return async (uid: UidType) => {
+    const startReqTs = Date.now();
+    const requestId = getUniqueID();
     if (isHost) {
       if (isPSTN(uid)) {
+        logger.log(
+          LogSource.Internals,
+          'MUTE_PSTN',
+          'Mutation try to call MUTE_PSTN ',
+          {startReqTs, requestId},
+        );
         await mutePSTN({
+          context: {
+            headers: {
+              'X-Request-Id': requestId,
+              'X-Session-Id': logger.getSessionId(),
+            },
+          },
           variables: {
             uid: uid,
             passphrase: roomId?.host,
@@ -32,8 +48,35 @@ const useMutePSTN = () => {
         console.error('UID does not belong to the PSTN user.');
       }
       if (!loading && error) {
+        const endReqTs = Date.now();
+        logger.error(
+          LogSource.Internals,
+          'MUTE_PSTN',
+          'Mutation MUTE_PSTN success',
+          error,
+          {
+            networkError: {
+              name: error?.networkError?.name,
+              //@ts-ignore
+              code: error?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: error?.networkError?.result?.error?.message,
+            },
+            startReqTs,
+            endReqTs,
+            latency: endReqTs - startReqTs,
+            requestId,
+          },
+        );
         throw error;
       } else {
+        const endReqTs = Date.now();
+        logger.log(
+          LogSource.Internals,
+          'MUTE_PSTN',
+          'Mutation MUTE_PSTN success',
+          {startReqTs, endReqTs, latency: endReqTs - startReqTs, requestId},
+        );
         return data;
       }
     } else {

package/template/src/utils/useMuteToggleLocal.ts

@@ -10,7 +10,15 @@
 *********************************************
 */
 import {useLocalUserInfo, useRtc} from 'customization-api';
-import {ToggleState} from '../../agora-rn-uikit/src/Contexts/PropsContext';
+import {useContext} from 'react';
+import {
+  PropsContext,
+  ClientRoleType,
+  ToggleState,
+  DispatchContext,
+} from '../../agora-rn-uikit';
+import {isAndroid, isIOS, isWebInternal} from './common';
+import {SdkMuteQueueContext} from '../components/SdkMuteToggleListener';
 
 export enum MUTE_LOCAL_TYPE {
   audio,
@@ -20,10 +28,35 @@ export enum MUTE_LOCAL_TYPE {
  * Returns an asynchronous function to toggle muted state of the given track type for the local user.
  */
 function useMuteToggleLocal() {
-  const {RtcEngine, dispatch} = useRtc();
+  const {RtcEngineUnsafe} = useRtc();
+  const {dispatch} = useContext(DispatchContext);
   const local = useLocalUserInfo();
+  const isLiveStream = $config.EVENT_MODE;
+  const {rtcProps} = useContext(PropsContext);
+  const isBroadCasting = rtcProps?.role == ClientRoleType.ClientRoleBroadcaster;
+
+  const {videoMuteQueue, audioMuteQueue} = useContext(SdkMuteQueueContext);
+
+  const toggleMute = async (
+    type: MUTE_LOCAL_TYPE,
+    _action?: ToggleState,
+    _fromSdk?: boolean,
+  ) => {
+    const queueRef =
+      type === MUTE_LOCAL_TYPE.video ? videoMuteQueue : audioMuteQueue;
+
+    const handleQueue = async () => {
+      if (queueRef.current.length > 0) {
+        const queueItem = queueRef.current.shift();
+        try {
+          await toggleMute(type, queueItem.action, true);
+          queueItem.resolveQueued();
+        } catch (e) {
+          queueItem.rejectQueued(e);
+        }
+      }
+    };
 
-  return async (type: MUTE_LOCAL_TYPE) => {
     switch (type) {
       case MUTE_LOCAL_TYPE.audio:
         let localAudioState = local.audio;
@@ -32,35 +65,50 @@ function useMuteToggleLocal() {
           localAudioState === ToggleState.enabled ||
           localAudioState === ToggleState.disabled
         ) {
-          // Disable UI
-          dispatch({
-            type: 'LocalMuteAudio',
-            value: [
-              localAudioState === ToggleState.enabled
-                ? ToggleState.disabling
-                : ToggleState.enabling,
-            ],
-          });
-
-          try {
-            await RtcEngine.muteLocalAudioStream(
-              localAudioState === ToggleState.enabled,
-            );
-            // Enable UI
+          if (localAudioState !== _action) {
+            // Disable UI
             dispatch({
               type: 'LocalMuteAudio',
               value: [
                 localAudioState === ToggleState.enabled
-                  ? ToggleState.disabled
-                  : ToggleState.enabled,
+                  ? ToggleState.disabling
+                  : ToggleState.enabling,
               ],
             });
-          } catch (e) {
-            console.error(e);
-            dispatch({
-              type: 'LocalMuteAudio',
-              value: [localAudioState],
-            });
+
+            try {
+              isWebInternal()
+                ? await RtcEngineUnsafe.muteLocalAudioStream(
+                    localAudioState === ToggleState.enabled,
+                  ) //@ts-ignore
+                : await RtcEngineUnsafe.enableLocalAudio(
+                    localAudioState === ToggleState.enabled ? false : true,
+                  );
+
+              // Enable UI
+              dispatch({
+                type: 'LocalMuteAudio',
+                value: [
+                  localAudioState === ToggleState.enabled
+                    ? ToggleState.disabled
+                    : ToggleState.enabled,
+                ],
+              });
+              handleQueue();
+            } catch (e) {
+              dispatch({
+                type: 'LocalMuteAudio',
+                value: [localAudioState],
+              });
+              handleQueue();
+              if (_fromSdk) {
+                throw e;
+              } else {
+                console.error('Error toggling audio', e);
+              }
+            }
+          } else {
+            handleQueue();
           }
         }
         break;
@@ -72,40 +120,68 @@ function useMuteToggleLocal() {
           localVideoState === ToggleState.disabled
         ) {
           // Disable UI
-          dispatch({
-            type: 'LocalMuteVideo',
-            value: [
-              localVideoState === ToggleState.enabled
-                ? ToggleState.disabling
-                : ToggleState.enabling,
-            ],
-          });
-
-          try {
-            await RtcEngine.muteLocalVideoStream(
-              localVideoState === ToggleState.enabled ? true : false,
-            );
-
-            // Enable UI
+          if (localVideoState !== _action) {
             dispatch({
               type: 'LocalMuteVideo',
               value: [
                 localVideoState === ToggleState.enabled
-                  ? ToggleState.disabled
-                  : ToggleState.enabled,
+                  ? ToggleState.disabling
+                  : ToggleState.enabling,
               ],
             });
-          } catch (e) {
-            console.log('error while dispatching');
-            dispatch({
-              type: 'LocalMuteVideo',
-              value: [localVideoState],
-            });
+
+            try {
+              //enableLocalVideo not available on web
+              isWebInternal()
+                ? await RtcEngineUnsafe.muteLocalVideoStream(
+                    localVideoState === ToggleState.enabled ? true : false,
+                  )
+                : //@ts-ignore
+                  await RtcEngineUnsafe.enableLocalVideo(
+                    localVideoState === ToggleState.enabled ? false : true,
+                  );
+              /**
+               * In native only
+               * hotfix for livestream co-presenter video publishing
+               * enableLocalVideo -> only enabled local video not publishing video stream
+               * enable publishing for livestreaming presenter(who raised hand and approved by host)
+               */
+              if ((isAndroid() || isIOS()) && isLiveStream && isBroadCasting) {
+                await RtcEngineUnsafe.muteLocalVideoStream(
+                  localVideoState === ToggleState.enabled ? true : false,
+                );
+              }
+              // Enable UI
+              dispatch({
+                type: 'LocalMuteVideo',
+                value: [
+                  localVideoState === ToggleState.enabled
+                    ? ToggleState.disabled
+                    : ToggleState.enabled,
+                ],
+              });
+              handleQueue();
+            } catch (e) {
+              dispatch({
+                type: 'LocalMuteVideo',
+                value: [localVideoState],
+              });
+              handleQueue();
+              if (_fromSdk) {
+                throw e;
+              } else {
+                console.error('Error toggling video', e);
+              }
+            }
+          } else {
+            handleQueue();
           }
         }
         break;
     }
   };
+
+  return toggleMute;
 }
 
 export default useMuteToggleLocal;

package/template/src/utils/useOrientation.native.tsx

@@ -0,0 +1,3 @@
+export function useOrientation() {
+  return 'PORTRAIT';
+}

package/template/src/utils/useOrientation.tsx

@@ -0,0 +1,59 @@
+import {useState, useEffect} from 'react';
+import {Keyboard, Platform} from 'react-native';
+
+export function useOrientation() {
+  const [orientation, setOrientation] = useState<'PORTRAIT' | 'LANDSCAPE'>(
+    window.matchMedia('(orientation: portrait)').matches
+      ? 'PORTRAIT'
+      : 'LANDSCAPE',
+  );
+  const [keyboardVisible, setKeyboardVisible] = useState(false);
+
+  useEffect(() => {
+    console.log('screen orientation changed', orientation);
+  }, [orientation]);
+
+  useEffect(() => {
+    const handleOrientationChange = () => {
+      if (keyboardVisible && Platform.OS === 'ios') {
+        return; // Avoid changing orientation if the keyboard is visible on iOS
+      }
+      setOrientation(
+        window.matchMedia('(orientation: portrait)').matches
+          ? 'PORTRAIT'
+          : 'LANDSCAPE',
+      );
+    };
+
+    const handleResize = () => {
+      if (!keyboardVisible) {
+        handleOrientationChange();
+      }
+    };
+
+    const keyboardDidShowListener = Keyboard.addListener(
+      'keyboardDidShow',
+      () => {
+        setKeyboardVisible(true);
+      },
+    );
+
+    const keyboardDidHideListener = Keyboard.addListener(
+      'keyboardDidHide',
+      () => {
+        setKeyboardVisible(false);
+        handleOrientationChange(); // Recheck orientation after the keyboard is hidden
+      },
+    );
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      keyboardDidShowListener.remove();
+      keyboardDidHideListener.remove();
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [keyboardVisible]);
+
+  return orientation;
+}

package/template/src/utils/useRemoteEndCall.ts

@@ -1,8 +1,8 @@
 import {controlMessageEnum} from '../components/ChatContext';
-import {useMeetingInfo} from '../components/meeting-info/useMeetingInfo';
+import {useRoomInfo} from '../components/room-info/useRoomInfo';
 import useIsPSTN from './useIsPSTN';
 import {UidType} from '../../agora-rn-uikit';
-import events, {EventPersistLevel} from '../rtm-events-api';
+import events, {PersistanceLevel} from '../rtm-events-api';
 
 /**
  * Returns a function to end the call for a remote user with the given uid.
@@ -10,7 +10,7 @@ import events, {EventPersistLevel} from '../rtm-events-api';
 const useRemoteEndCall = () => {
   const {
     data: {isHost},
-  } = useMeetingInfo();
+  } = useRoomInfo();
   const isPSTN = useIsPSTN();
 
   return (uid: UidType) => {
@@ -19,7 +19,7 @@ const useRemoteEndCall = () => {
         events.send(
           controlMessageEnum.kickUser,
           '',
-          EventPersistLevel.LEVEL1,
+          PersistanceLevel.None,
           uid,
         );
       }

package/template/src/utils/useRemoteEndScreenshare.ts

@@ -0,0 +1,26 @@
+import {controlMessageEnum} from '../components/ChatContext';
+import {useRoomInfo} from '../components/room-info/useRoomInfo';
+import {UidType} from '../../agora-rn-uikit';
+import events, {PersistanceLevel} from '../rtm-events-api';
+
+/**
+ * Returns a function to end the screenshare for a remote user with the given uid.
+ */
+const useRemoteEndScreenshare = () => {
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+  return (uid: UidType) => {
+    if (isHost && uid) {
+      events.send(
+        controlMessageEnum.kickScreenshare,
+        '',
+        PersistanceLevel.None,
+        uid,
+      );
+    } else {
+      console.error('A host can only remove the screenshare from the call.');
+    }
+  };
+};
+export default useRemoteEndScreenshare;

package/template/src/utils/useRemoteMute.ts

@@ -9,12 +9,12 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {useMeetingInfo} from '../components/meeting-info/useMeetingInfo';
+import {useRoomInfo} from '../components/room-info/useRoomInfo';
 import {controlMessageEnum} from '../components/ChatContext';
 import useIsPSTN from './useIsPSTN';
 import useMutePSTN from './useMutePSTN';
 import {UidType} from '../../agora-rn-uikit';
-import events, {EventPersistLevel} from '../rtm-events-api';
+import events, {PersistanceLevel} from '../rtm-events-api';
 
 export enum MUTE_REMOTE_TYPE {
   audio,
@@ -26,7 +26,7 @@ export enum MUTE_REMOTE_TYPE {
 function useRemoteMute() {
   const {
     data: {isHost},
-  } = useMeetingInfo();
+  } = useRoomInfo();
   const isPSTN = useIsPSTN();
   const mutePSTN = useMutePSTN();
 
@@ -46,7 +46,7 @@ function useRemoteMute() {
               events.send(
                 controlMessageEnum.muteAudio,
                 '',
-                EventPersistLevel.LEVEL1,
+                PersistanceLevel.None,
                 uid,
               );
             }
@@ -55,7 +55,7 @@ function useRemoteMute() {
             events.send(
               controlMessageEnum.muteAudio,
               '',
-              EventPersistLevel.LEVEL1,
+              PersistanceLevel.None,
             );
           }
           break;
@@ -66,7 +66,7 @@ function useRemoteMute() {
               events.send(
                 controlMessageEnum.muteVideo,
                 '',
-                EventPersistLevel.LEVEL1,
+                PersistanceLevel.None,
                 uid,
               );
             }
@@ -75,7 +75,7 @@ function useRemoteMute() {
             events.send(
               controlMessageEnum.muteVideo,
               '',
-              EventPersistLevel.LEVEL1,
+              PersistanceLevel.None,
             );
           }
           break;