agora-appbuilder-core 4.0.0 → 4.0.1

package/template/src/utils/useMuteToggleLocal.ts

@@ -10,11 +10,15 @@
 *********************************************
 */
 import {useLocalUserInfo, useRtc} from 'customization-api';
-import {useContext, useEffect, useRef, useState} from 'react';
-
-import {ToggleState} from '../../agora-rn-uikit/src/Contexts/PropsContext';
-import {isMobileUA, isWebInternal} from './common';
-import {AppState} from 'react-native';
+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,
@@ -24,52 +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 appState = useRef(AppState.currentState);
-  const [appStateVisible, setAppStateVisible] = useState(appState.current);
-  const isCamON = useRef(local.video);
-
-  useEffect(() => {
-    if ($config.AUDIO_ROOM || !isMobileUA()) return;
-    const subscription = AppState.addEventListener('change', (nextAppState) => {
-      appState.current = nextAppState;
-      setAppStateVisible(appState.current);
-    });
-
-    return () => {
-      subscription?.remove();
-    };
-  }, []);
+  const {videoMuteQueue, audioMuteQueue} = useContext(SdkMuteQueueContext);
 
-  useEffect(() => {
-    // console.log(`Video State  ${local.video} in Mode  ${appStateVisible}`);
-    if (appStateVisible === 'background') {
-      isCamON.current = local.video;
-      if (isCamON.current) {
-        isWebInternal()
-          ? RtcEngine.muteLocalVideoStream(true)
-          : RtcEngine.enableLocalVideo(false);
+  const toggleMute = async (
+    type: MUTE_LOCAL_TYPE,
+    _action?: ToggleState,
+    _fromSdk?: boolean,
+  ) => {
+    const queueRef =
+      type === MUTE_LOCAL_TYPE.video ? videoMuteQueue : audioMuteQueue;
 
-        dispatch({
-          type: 'LocalMuteVideo',
-          value: [0],
-        });
+    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);
+        }
       }
-    }
-    if (appStateVisible === 'active' && isCamON.current) {
-      isWebInternal()
-        ? RtcEngine.muteLocalVideoStream(false)
-        : RtcEngine.enableLocalVideo(true);
-      dispatch({
-        type: 'LocalMuteVideo',
-        value: [1],
-      });
-    }
-  }, [appStateVisible]);
+    };
 
-  return async (type: MUTE_LOCAL_TYPE) => {
     switch (type) {
       case MUTE_LOCAL_TYPE.audio:
         let localAudioState = local.audio;
@@ -78,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;
@@ -118,45 +120,68 @@ function useMuteToggleLocal() {
           localVideoState === ToggleState.disabled
         ) {
           // Disable UI
-          dispatch({
-            type: 'LocalMuteVideo',
-            value: [
-              localVideoState === ToggleState.enabled
-                ? ToggleState.disabling
-                : ToggleState.enabling,
-            ],
-          });
-
-          try {
-            //enableLocalVideo not available on web
-            isWebInternal()
-              ? await RtcEngine.muteLocalVideoStream(
-                  localVideoState === ToggleState.enabled ? true : false,
-                )
-              : await RtcEngine.enableLocalVideo(
-                  localVideoState === ToggleState.enabled ? false : true,
-                );
-
-            // 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/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

@@ -1,7 +1,7 @@
 import {controlMessageEnum} from '../components/ChatContext';
-import {useMeetingInfo} from '../components/meeting-info/useMeetingInfo';
+import {useRoomInfo} from '../components/room-info/useRoomInfo';
 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 screenshare for a remote user with the given uid.
@@ -9,13 +9,13 @@ import events, {EventPersistLevel} from '../rtm-events-api';
 const useRemoteEndScreenshare = () => {
   const {
     data: {isHost},
-  } = useMeetingInfo();
+  } = useRoomInfo();
   return (uid: UidType) => {
     if (isHost && uid) {
       events.send(
         controlMessageEnum.kickScreenshare,
         '',
-        EventPersistLevel.LEVEL1,
+        PersistanceLevel.None,
         uid,
       );
     } else {

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;

package/template/src/utils/useRemoteRequest.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 REQUEST_REMOTE_TYPE {
   audio,
@@ -26,7 +26,7 @@ export enum REQUEST_REMOTE_TYPE {
 function useRemoteRequest() {
   const {
     data: {isHost},
-  } = useMeetingInfo();
+  } = useRoomInfo();
   const isPSTN = useIsPSTN();
 
   return async (type: REQUEST_REMOTE_TYPE, uid?: UidType) => {
@@ -41,7 +41,7 @@ function useRemoteRequest() {
               events.send(
                 controlMessageEnum.requestAudio,
                 '',
-                EventPersistLevel.LEVEL1,
+                PersistanceLevel.None,
                 uid,
               );
             }
@@ -50,7 +50,7 @@ function useRemoteRequest() {
             events.send(
               controlMessageEnum.requestAudio,
               '',
-              EventPersistLevel.LEVEL1,
+              PersistanceLevel.None,
             );
           }
           break;
@@ -61,7 +61,7 @@ function useRemoteRequest() {
               events.send(
                 controlMessageEnum.requestVideo,
                 '',
-                EventPersistLevel.LEVEL1,
+                PersistanceLevel.None,
                 uid,
               );
             }
@@ -70,7 +70,7 @@ function useRemoteRequest() {
             events.send(
               controlMessageEnum.requestVideo,
               '',
-              EventPersistLevel.LEVEL1,
+              PersistanceLevel.None,
             );
           }
           break;

package/template/src/utils/useSearchParams.tsx

@@ -0,0 +1,18 @@
+import {useLocation} from '../components/Router';
+import {useMemo} from 'react';
+
+interface ReadOnlyURLSearchParams extends URLSearchParams {
+  append: never;
+  set: never;
+  delete: never;
+  sort: never;
+}
+
+export function useSearchParams() {
+  const {search} = useLocation();
+
+  return useMemo(
+    () => new URLSearchParams(search) as ReadOnlyURLSearchParams,
+    [search],
+  );
+}

package/template/src/utils/useString.ts

@@ -13,11 +13,12 @@ import {useCustomization} from 'customization-implementation';
 import {useLanguage} from '../language/useLanguage';
 import {DEFAULT_I18_DATA} from '../language';
 import {TextDataInterface} from '../language/default-labels/index';
+import {useEffect, useRef} from 'react';
 
 export function usei18nData(
   selectedLanguageCode: string = DEFAULT_I18_DATA.locale,
 ) {
-  const languageData = useCustomization((data) => data?.i18n);
+  const languageData = useCustomization(data => data?.i18n);
   if (
     !selectedLanguageCode ||
     !languageData ||
@@ -27,7 +28,7 @@ export function usei18nData(
     return DEFAULT_I18_DATA.data;
   } else {
     let selectedLanguageData = languageData.find(
-      (item) => item.locale === selectedLanguageCode,
+      item => item.locale === selectedLanguageCode,
     );
     if (selectedLanguageData && selectedLanguageData.data) {
       return {
@@ -43,7 +44,7 @@ export function usei18nData(
 export function useString<T = string>(
   keyName: keyof TextDataInterface,
 ): (input?: T) => string {
-  const lanCode = useLanguage((data) => data.languageCode);
+  const lanCode = useLanguage(data => data.languageCode);
   const textData = usei18nData(lanCode);
   const getString = (input?: T) => {
     let keyValue = textData ? textData[keyName] : undefined;
@@ -59,3 +60,12 @@ export function useString<T = string>(
   };
   return getString;
 }
+
+export const useStringRef = (key: keyof TextDataInterface) => {
+  const fn = useString(key);
+  const refFn = useRef(fn);
+  useEffect(() => {
+    refFn.current = fn;
+  }, [fn]);
+  return refFn;
+};

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

@@ -0,0 +1,25 @@
+/*
+********************************************
+ 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 {useRtc} from 'customization-api';
+
+function useSwitchCamera() {
+  const {RtcEngineUnsafe} = useRtc();
+  return () => {
+    try {
+      RtcEngineUnsafe.switchCamera();
+    } catch (error) {
+      console.error(error);
+    }
+  };
+}
+
+export default useSwitchCamera;

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

@@ -1,18 +1,19 @@
 /*
 ********************************************
  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. 
+ 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 from 'react';
 
-const ScreenshareButton = () => {
-  return <></>;
-};
+function useSwitchCamera() {
+  return () => {
+    console.warn('SwitchCamera only supported on native platforms');
+  };
+}
 
-export default ScreenshareButton;
+export default useSwitchCamera;

package/template/src/utils/useToolbar.tsx

@@ -0,0 +1,59 @@
+/*
+********************************************
+ 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, {useEffect, useState} from 'react';
+import {createHook} from 'customization-implementation';
+
+export enum ToolbarPosition {
+  top = 'TOP',
+  bottom = 'BOTTOM',
+  left = 'LEFT',
+  right = 'RIGHT',
+}
+
+export interface ToolbarInferface {
+  position?: ToolbarPosition;
+  isHorizontal?: boolean;
+}
+
+const ToolbarContext = React.createContext<ToolbarInferface>({
+  position: undefined,
+  isHorizontal: true,
+});
+
+interface ToolbarProviderProps {
+  value: ToolbarInferface;
+  children: React.ReactNode;
+}
+const ToolbarProvider = (props: ToolbarProviderProps) => {
+  const [isHorizontal, setIsHorizontal] = useState(true);
+  useEffect(() => {
+    if (
+      props?.value?.position === ToolbarPosition.left ||
+      props?.value?.position === ToolbarPosition.right
+    ) {
+      setIsHorizontal(false);
+    } else {
+      !isHorizontal && setIsHorizontal(true);
+    }
+  }, [props?.value?.position]);
+  return (
+    <ToolbarContext.Provider
+      value={{position: props?.value?.position, isHorizontal}}>
+      {props.children}
+    </ToolbarContext.Provider>
+  );
+};
+
+const useToolbar = createHook(ToolbarContext);
+
+export {ToolbarProvider, useToolbar};

package/template/static.d.ts

@@ -0,0 +1,42 @@
+declare module "src/SDKAppWrapper" {
+    import { CustomizationApiInterface, MeetingInfoContextInterface, customEvents } from "customization-api/index";
+    import { userEventsMapInterface } from "src/utils/SdkEvents";
+    import { Unsubscribe } from 'nanoevents';
+    import { deviceId } from "src/components/DeviceConfigure";
+    type meetingData = Partial<MeetingInfoContextInterface['data']>;
+    export interface AppBuilderSdkApiInterface {
+        customize: (customization: CustomizationApiInterface) => Promise<void>;
+        joinRoom: (roomDetails: string | meetingData, userName?: string) => Promise<meetingData>;
+        joinPrecall: (roomDetails: string | meetingData, userName?: string) => Promise<[meetingData, (userName?: string) => Promise<MeetingInfoContextInterface['data']>]>;
+        setMicrophone: (deviceId: deviceId) => Promise<void>;
+        setCamera: (deviceId: deviceId) => Promise<void>;
+        setSpeaker: (deviceId: deviceId) => Promise<void>;
+        muteAudio: (mute: boolean | ((currentMute: boolean) => boolean)) => Promise<void>;
+        muteVideo: (mute: boolean | ((currentMute: boolean) => boolean)) => Promise<void>;
+        createCustomization: (customization: CustomizationApiInterface) => CustomizationApiInterface;
+        login: (token: string) => Promise<void>;
+        logout: () => Promise<void>;
+        customEvents: typeof customEvents;
+        on: <T extends keyof userEventsMapInterface>(userEventName: T, cb: userEventsMapInterface[T]) => Unsubscribe;
+    }
+    export const AppBuilderSdkApi: AppBuilderSdkApiInterface;
+    const SDKAppWrapper: () => JSX.Element;
+    export default SDKAppWrapper;
+}
+declare module "index.rsdk" {
+    /**
+     * @format
+     */
+    import { AppBuilderSdkApiInterface } from "src/SDKAppWrapper";
+    import React from 'react';
+    import * as RN from 'react-native-web';
+    import './src/assets/font-styles.css';
+    export * from "customization-api/index";
+    export * from "customization-implementation/index";
+    interface AppBuilderReactSdkInterface extends AppBuilderSdkApiInterface {
+        View: React.FC;
+    }
+    const AppBuilderReactSdkApi: AppBuilderReactSdkInterface;
+    export { React, RN };
+    export default AppBuilderReactSdkApi;
+}