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

package/template/src/components/SdkApiContext.tsx

@@ -1,4 +1,4 @@
-import React, {createContext, useState, useEffect} from 'react';
+import React, {createContext, useState, useEffect, useRef} from 'react';
 import SDKMethodEventsManager, {
   _InternalSDKMethodEventsMap,
 } from '../utils/SdkMethodEvents';
@@ -9,56 +9,97 @@ import {
 import {CustomizationApiInterface} from 'customization-api';
 import {Unsubscribe} from 'nanoevents';
 
+type extractPromises<T extends (...p: any) => any> = {
+  res: Parameters<T>[0];
+  rej: Parameters<T>[1];
+};
+
+// Should correspond to the same SdkMethodEvent name
 type SdkApiContextInterface = {
+  enterRoom: {
+    set: (p: extractPromises<_InternalSDKMethodEventsMap['join']>) => void;
+    promise?: extractPromises<_InternalSDKMethodEventsMap['join']>;
+  };
   join:
     | {
         initialized: true;
         phrase: string;
         meetingDetails?: Partial<RoomInfoContextInterface['data']>;
+        userName: string;
         skipPrecall: boolean;
-        promise: {
-          res: Parameters<_InternalSDKMethodEventsMap['join']>[0];
-          rej: Parameters<_InternalSDKMethodEventsMap['join']>[1];
-        };
+        promise: extractPromises<_InternalSDKMethodEventsMap['join']>;
       }
     | {
         initialized: false;
       };
   customize: {
     customization?: CustomizationApiInterface;
-    promise?: {
-      res: Parameters<_InternalSDKMethodEventsMap['customize']>[0];
-      rej: Parameters<_InternalSDKMethodEventsMap['customize']>[1];
-    };
+    promise?: extractPromises<_InternalSDKMethodEventsMap['customize']>;
+  };
+  microphoneDevice: {
+    deviceId?: string;
+    promise?: extractPromises<_InternalSDKMethodEventsMap['microphoneDevice']>;
   };
-  clearState: (key: keyof _InternalSDKMethodEventsMap) => void;
+  speakerDevice: {
+    deviceId?: string;
+    promise?: extractPromises<_InternalSDKMethodEventsMap['speakerDevice']>;
+  };
+  cameraDevice: {
+    deviceId?: string;
+    promise?: extractPromises<_InternalSDKMethodEventsMap['cameraDevice']>;
+  };
+  onMuteAudio: (callback: _InternalSDKMethodEventsMap['muteAudio']) => void;
+  onMuteVideo: (callback: _InternalSDKMethodEventsMap['muteVideo']) => void;
+  clearState: (
+    key: keyof _InternalSDKMethodEventsMap | 'enterRoom',
+    param?: any,
+  ) => void;
 };
 
+const defaultMuteListener = ((_, rej) => {
+  rej(
+    new Error(
+      "Video call not initialized, call this method on 'join' or 'ready-to-join' event listener callback",
+    ),
+  );
+}) as _InternalSDKMethodEventsMap['muteVideo'];
+
 const SdkApiInitState: SdkApiContextInterface = {
+  enterRoom: {
+    set: () => {},
+  },
   join: {
     initialized: false,
   },
   customize: {},
+  // mediaDevice: {},
+  microphoneDevice: {},
+  speakerDevice: {},
+  cameraDevice: {},
+  onMuteVideo: _ => {},
+  onMuteAudio: _ => {},
   clearState: () => {},
 };
 
 export const SDK_MEETING_TAG = 'sdk-initiated-meeting';
 
-export const SdkApiContext = createContext(SdkApiInitState);
+export const SdkApiContext =
+  createContext<SdkApiContextInterface>(SdkApiInitState);
 
 let moduleEventsUnsub: any[] = [];
 
 type commonEventHandlers = {
-  [K in keyof _InternalSDKMethodEventsMap]?: (
-    setter: (p: SdkApiContextInterface[K]) => void,
-  ) => Unsubscribe;
+  [K in keyof Omit<
+    _InternalSDKMethodEventsMap,
+    'muteVideo' | 'muteAudio' | 'login' | 'logout'
+  >]?: (setter: (p: SdkApiContextInterface[K]) => void) => Unsubscribe;
 };
 
 const commonEventHandlers: commonEventHandlers = {
-  join: (setter) => {
+  join: setter => {
     return SDKMethodEventsManager.on(
       'join',
-      (res, rej, roomDetail, skipPrecall) => {
+      (res, rej, roomDetail, skipPrecall, userName) => {
         if (typeof roomDetail === 'object') {
           if (!validateMeetingInfoData(roomDetail)) {
             rej(new Error('Invalid meeting details'));
@@ -69,6 +110,7 @@ const commonEventHandlers: commonEventHandlers = {
             phrase: SDK_MEETING_TAG,
             meetingDetails: roomDetail,
             skipPrecall,
+            userName,
             promise: {res, rej},
           });
         } else if (
@@ -79,6 +121,7 @@ const commonEventHandlers: commonEventHandlers = {
             initialized: true,
             phrase: roomDetail,
             skipPrecall,
+            userName,
             promise: {res, rej},
           });
         } else {
@@ -87,7 +130,7 @@ const commonEventHandlers: commonEventHandlers = {
       },
     );
   },
-  customize: (setter) => {
+  customize: setter => {
     return SDKMethodEventsManager.on('customize', (res, rej, customization) => {
       setter({
         customization: customization,
@@ -95,53 +138,153 @@ const commonEventHandlers: commonEventHandlers = {
       res();
     });
   },
+  microphoneDevice: setter => {
+    return SDKMethodEventsManager.on(
+      'microphoneDevice',
+      (res, rej, deviceId) => {
+        setter({
+          deviceId,
+          promise: {res, rej},
+        });
+      },
+    );
+  },
+  speakerDevice: setter => {
+    return SDKMethodEventsManager.on('speakerDevice', (res, rej, deviceId) => {
+      setter({
+        deviceId,
+        promise: {res, rej},
+      });
+    });
+  },
+  cameraDevice: setter => {
+    return SDKMethodEventsManager.on('cameraDevice', (res, rej, deviceId) => {
+      setter({
+        deviceId,
+        promise: {res, rej},
+      });
+    });
+  },
 };
 
 const registerListener = () => {
   moduleEventsUnsub = [
-    commonEventHandlers.customize((state) => {
+    commonEventHandlers.customize(state => {
       SdkApiInitState.customize = state;
     }),
-    commonEventHandlers.join((state) => {
+    commonEventHandlers.join(state => {
       SdkApiInitState.join = state;
     }),
+    commonEventHandlers.microphoneDevice(state => {
+      SdkApiInitState.microphoneDevice = state;
+    }),
+    commonEventHandlers.speakerDevice(state => {
+      SdkApiInitState.speakerDevice = state;
+    }),
+    commonEventHandlers.cameraDevice(state => {
+      SdkApiInitState.cameraDevice = state;
+    }),
+    SDKMethodEventsManager.on('muteVideo', defaultMuteListener),
+    SDKMethodEventsManager.on('muteAudio', defaultMuteListener),
   ];
 };
 
+registerListener();
+
 const deRegisterListener = () => {
-  moduleEventsUnsub.forEach((v) => v());
+  moduleEventsUnsub.forEach(v => v());
 };
 
-const SdkApiContextProvider: React.FC = (props) => {
+const SdkApiContextProvider: React.FC = props => {
   const [joinState, setJoinState] = useState(SdkApiInitState.join);
+  const [enterRoom, setEnterRoom] =
+    useState<extractPromises<_InternalSDKMethodEventsMap['join']>>();
   const [userCustomization, setUserCustomization] = useState(
     SdkApiInitState.customize,
   );
+  const [microphoneDeviceState, setMicrophoneDeviceState] = useState(
+    SdkApiInitState.microphoneDevice,
+  );
+  const [speakerDeviceState, setSpeakerDeviceState] = useState(
+    SdkApiInitState.speakerDevice,
+  );
+  const [cameraDeviceState, setCameraDeviceState] = useState(
+    SdkApiInitState.cameraDevice,
+  );
+
+  const muteVideoListener = useRef(defaultMuteListener);
+  const muteAudioListener = useRef(defaultMuteListener);
 
-  const clearState: SdkApiContextInterface['clearState'] = (key) => {
+  const setMuteVideoListener = (
+    value: _InternalSDKMethodEventsMap['muteVideo'],
+  ) => {
+    muteVideoListener.current = value;
+  };
+
+  const setMuteAudioListener = (
+    value: _InternalSDKMethodEventsMap['muteAudio'],
+  ) => {
+    muteAudioListener.current = value;
+  };
+
+  const clearState: SdkApiContextInterface['clearState'] = key => {
     switch (key) {
       case 'join':
         setJoinState(SdkApiInitState.join);
-        return;
+        break;
+      case 'enterRoom':
+        setEnterRoom(null);
+        break;
       case 'customize':
         setUserCustomization(SdkApiInitState.customize);
+        break;
+      case 'microphoneDevice':
+        setMicrophoneDeviceState({});
+        break;
+      case 'speakerDevice':
+        setSpeakerDeviceState({});
+        break;
+      case 'cameraDevice':
+        setCameraDeviceState({});
+        break;
+      case 'muteVideo':
+        setMuteVideoListener(defaultMuteListener);
+        break;
+      case 'muteAudio':
+        setMuteVideoListener(defaultMuteListener);
+        break;
     }
   };
 
   useEffect(() => {
     deRegisterListener();
-    console.log('[SDKContext] join state is ', joinState);
+
     const unsub = [
-      commonEventHandlers.customize((state) => {
+      commonEventHandlers.customize(state => {
         setUserCustomization(state);
       }),
-      commonEventHandlers.join((state) => {
+      commonEventHandlers.join(state => {
         setJoinState(state);
       }),
+      commonEventHandlers.microphoneDevice(state => {
+        setMicrophoneDeviceState(state);
+      }),
+      commonEventHandlers.speakerDevice(state => {
+        setSpeakerDeviceState(state);
+      }),
+      commonEventHandlers.cameraDevice(state => {
+        setCameraDeviceState(state);
+      }),
+      SDKMethodEventsManager.on('muteVideo', (...args) => {
+        muteVideoListener.current(...args);
+      }),
+      SDKMethodEventsManager.on('muteAudio', (...args) => {
+        muteAudioListener.current(...args);
+      }),
     ];
 
     return () => {
-      unsub.forEach((v) => v());
+      unsub.forEach(v => v());
       registerListener();
     };
   }, []);
@@ -149,8 +292,17 @@ const SdkApiContextProvider: React.FC = (props) => {
   return (
     <SdkApiContext.Provider
       value={{
+        enterRoom: {
+          set: setEnterRoom,
+          promise: enterRoom,
+        },
         join: joinState,
         customize: userCustomization,
+        microphoneDevice: microphoneDeviceState,
+        speakerDevice: speakerDeviceState,
+        cameraDevice: cameraDeviceState,
+        onMuteAudio: setMuteAudioListener,
+        onMuteVideo: setMuteVideoListener,
         clearState,
       }}>
       {props.children}

package/template/src/components/SdkMuteToggleListener.tsx

@@ -0,0 +1,88 @@
+import React, {useContext, useEffect, createContext, useRef} from 'react';
+import {SdkApiContext} from './SdkApiContext';
+import {useLocalUserInfo, ToggleState} from 'customization-api';
+import useMuteToggleLocal, {MUTE_LOCAL_TYPE} from '../utils/useMuteToggleLocal';
+
+export const SdkMuteQueueContext = createContext({
+  videoMuteQueue: {current: []},
+  audioMuteQueue: {current: []},
+});
+
+const SdkMuteToggleListener = props => {
+  const videoMuteQueue = useRef([]);
+  const audioMuteQueue = useRef([]);
+
+  const {
+    onMuteVideo: onSdkMuteVideo,
+    onMuteAudio: onSdkMuteAudio,
+    clearState,
+  } = useContext(SdkApiContext);
+  const local = useLocalUserInfo();
+  const toggleMute = useMuteToggleLocal();
+
+  const queuedToggleMute = (type, status) => {
+    const localstatus =
+      local[type === MUTE_LOCAL_TYPE.video ? 'video' : 'audio'];
+
+    // if ([ToggleState.enabling, ToggleState.disabling].includes(localstatus)) {
+    // if ({[ToggleState.enabling]: true, [ToggleState.disabling]: true}[localstatus]) {
+    if (
+      ToggleState.enabling === localstatus ||
+      ToggleState.disabling === localstatus
+    ) {
+      return new Promise((res, rej) => {
+        if (type === MUTE_LOCAL_TYPE.video) {
+          videoMuteQueue.current.push({
+            resolveQueued: res,
+            rejectQueued: rej,
+            action: status ? ToggleState.disabled : ToggleState.enabled,
+          });
+        } else {
+          audioMuteQueue.current.push({
+            resolveQueued: res,
+            rejectQueued: rej,
+            action: status ? ToggleState.disabled : ToggleState.enabled,
+          });
+        }
+      });
+    } else
+      return toggleMute(
+        type,
+        status ? ToggleState.disabled : ToggleState.enabled,
+      );
+  };
+
+  useEffect(() => {
+    onSdkMuteVideo(async (res, rej, mute) => {
+      const status = typeof mute === 'function' ? mute(!local.video) : mute;
+      try {
+        await queuedToggleMute(MUTE_LOCAL_TYPE.video, status);
+        res();
+      } catch (e) {
+        rej(e);
+      }
+    });
+    onSdkMuteAudio(async (res, rej, mute) => {
+      const status = typeof mute === 'function' ? mute(!local.audio) : mute;
+      try {
+        await queuedToggleMute(MUTE_LOCAL_TYPE.audio, status);
+        res();
+      } catch (e) {
+        rej(e);
+      }
+    });
+
+    return () => {
+      clearState('muteVideo');
+      clearState('muteAudio');
+    };
+  }, [local]);
+
+  return (
+    <SdkMuteQueueContext.Provider value={{videoMuteQueue, audioMuteQueue}}>
+      {props.children}
+    </SdkMuteQueueContext.Provider>
+  );
+};
+
+export default SdkMuteToggleListener;

package/template/src/components/SessionContext.tsx

@@ -74,7 +74,6 @@ export const SessionProvider = (props: {children: React.ReactNode}) => {
     useState<joinSessionInterface>(initJoinStoreValue);
   const joinSession = (data: joinSessionInterface) => {
     setJoinStore(data);
-    // console.log({data});
     history.push(`/${data.phrase}`);
   };
   return (

package/template/src/components/Settings.tsx

@@ -18,6 +18,8 @@ import {useString} from '../utils/useString';
 import IconButton, {IconButtonProps} from '../atoms/IconButton';
 import {useToolbarMenu} from '../utils/useMenu';
 import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
+import {useActionSheet} from '../utils/useActionSheet';
+import {toolbarItemSettingText} from '../language/default-labels/videoCallScreenLabels';
 
 export interface SettingsIconButtonProps {
   render?: (onPress: () => void, isPanelActive: boolean) => JSX.Element;
@@ -27,14 +29,15 @@ const Settings = (props: SettingsIconButtonProps) => {
   const {sidePanel, setSidePanel} = useSidePanel();
   const {isToolbarMenuItem} = useToolbarMenu();
   //commented for v1 release
-  //const settingsLabel = useString('settingsLabel')();
-  const settingsLabel = 'Settings';
+  const settingsLabel = useString(toolbarItemSettingText)();
+
   const isPanelActive = sidePanel === SidePanelType.Settings;
   const onPress = () => {
     isPanelActive
       ? setSidePanel(SidePanelType.None)
       : setSidePanel(SidePanelType.Settings);
   };
+  const {isOnActionSheet, showLabel} = useActionSheet();
   let iconButtonProps: IconButtonProps = {
     onPress: onPress,
 
@@ -48,11 +51,30 @@ const Settings = (props: SettingsIconButtonProps) => {
         : '',
     },
     btnTextProps: {
-      text: $config.ICON_TEXT ? settingsLabel : '',
+      text: showLabel ? settingsLabel : '',
       textColor: $config.FONT_COLOR,
     },
   };
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
+  if (isOnActionSheet) {
+    // iconButtonProps.containerStyle = {
+    //   backgroundColor: $config.CARD_LAYER_2_COLOR,
+    //   width: 52,
+    //   height: 52,
+    //   borderRadius: 26,
+    //   justifyContent: 'center',
+    //   alignItems: 'center',
+    // };
 
+    iconButtonProps.btnTextProps.textStyle = {
+      color: $config.FONT_COLOR,
+      marginTop: 8,
+      fontSize: 12,
+      fontWeight: '400',
+      fontFamily: 'Source Sans Pro',
+      textAlign: 'center',
+    };
+  }
   return props?.render ? (
     props.render(onPress, isPanelActive)
   ) : (

package/template/src/components/SettingsView.tsx

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {
   View,
   Text,
@@ -43,9 +43,26 @@ import {useLayout} from '../utils/useLayout';
 import {getGridLayoutName} from '../pages/video-call/DefaultLayouts';
 import {useFocus} from '../utils/useFocus';
 import {SettingsHeader} from '../pages/video-call/SidePanelHeader';
+import {useUserPreference} from './useUserPreference';
+import useCaptionWidth from '../../src/subComponents/caption/useCaptionWidth';
+import {whiteboardContext} from './whiteboard/WhiteboardConfigure';
+import InlineNotification from '../../src/atoms/InlineNotification';
+import {useRoomInfo} from './room-info/useRoomInfo';
+import {useString} from '../../src/utils/useString';
+import {
+  settingPanelNameCantbeChangedInfo,
+  settingPanelNameInputLabel,
+} from '../../src/language/default-labels/videoCallScreenLabels';
 
 interface EditNameProps {}
 const EditName: React.FC = (props?: EditNameProps) => {
+  const yournameLabel = useString(settingPanelNameInputLabel)();
+  const nameCantbeChangedInfo = useString(settingPanelNameCantbeChangedInfo)();
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+  const {saveName} = useUserPreference();
+  const {whiteboardActive} = useContext(whiteboardContext);
   const [saved, setSaved] = useState(false);
   const username = useGetName();
   const [newName, setNewName] = useState(username);
@@ -83,6 +100,7 @@ const EditName: React.FC = (props?: EditNameProps) => {
         setSaved(false);
       }, 2000);
       setEditable(false);
+      saveName(trimmedText ? trimmedText : username);
     } else {
       setEditable(true);
       inputRef.current.focus();
@@ -96,7 +114,7 @@ const EditName: React.FC = (props?: EditNameProps) => {
       setEditable(true);
       setTimeout(() => {
         inputRef.current.focus();
-        setFocus((prevState) => {
+        setFocus(prevState => {
           return {
             ...prevState,
             editName: false,
@@ -108,8 +126,23 @@ const EditName: React.FC = (props?: EditNameProps) => {
 
   return (
     <>
-      <Text style={editNameStyle.yournameText}>Your name</Text>
+      <Text style={editNameStyle.yournameText}>{yournameLabel}</Text>
       <Spacer size={12} />
+      {whiteboardActive && isHost ? (
+        <>
+          <InlineNotification
+            text={nameCantbeChangedInfo}
+            customStyle={{
+              alignItems: 'center',
+              backgroundColor: 'rgba(255, 171, 0, 0.15)',
+            }}
+            warning={true}
+          />
+          <Spacer size={12} />
+        </>
+      ) : (
+        <></>
+      )}
       <View style={editNameStyle.container}>
         <View style={editNameStyle.nameContainer}>
           <ImageIcon
@@ -124,7 +157,8 @@ const EditName: React.FC = (props?: EditNameProps) => {
             style={[
               editNameStyle.inputStyle,
               //true -> previously editable variable
-              !true
+              //!true
+              whiteboardActive && isHost
                 ? {
                     color:
                       $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled,
@@ -134,8 +168,8 @@ const EditName: React.FC = (props?: EditNameProps) => {
             onBlur={onPress}
             placeholder={username}
             value={newName}
-            editable={true}
-            onChangeText={(text) => setNewName(text)}
+            editable={whiteboardActive && isHost ? false : true}
+            onChangeText={text => setNewName(text)}
             onSubmitEditing={onPress}
             placeholderTextColor={
               $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled
@@ -240,12 +274,11 @@ const editNameStyle = StyleSheet.create({
     color: $config.FONT_COLOR,
   },
 });
-const SettingsView = (props) => {
+const SettingsView = props => {
   const {hideName = false, showHeader = true} = props;
   const isSmall = useIsSmall();
-  const settingsLabel = 'Settings';
-  const {setSidePanel} = useSidePanel();
   const {currentLayout} = useLayout();
+  const {transcriptHeight} = useCaptionWidth();
 
   return (
     <View
@@ -261,6 +294,8 @@ const SettingsView = (props) => {
         isWebInternal() && !isSmall() && currentLayout === getGridLayoutName()
           ? {marginVertical: 4}
           : {},
+        //@ts-ignore
+        transcriptHeight && !isMobileUA() && {height: transcriptHeight},
       ]}>
       {showHeader && <SettingsHeader {...props} />}
       <ScrollView style={style.contentContainer}>