agora-appbuilder-core 4.0.0 → 4.0.2

package/template/src/components/SdkApiContext.tsx

@@ -0,0 +1,313 @@
+import React, {createContext, useState, useEffect, useRef} from 'react';
+import SDKMethodEventsManager, {
+  _InternalSDKMethodEventsMap,
+} from '../utils/SdkMethodEvents';
+import {
+  validateMeetingInfoData,
+  RoomInfoContextInterface,
+} from './room-info/useRoomInfo';
+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: extractPromises<_InternalSDKMethodEventsMap['join']>;
+      }
+    | {
+        initialized: false;
+      };
+  customize: {
+    customization?: CustomizationApiInterface;
+    promise?: extractPromises<_InternalSDKMethodEventsMap['customize']>;
+  };
+  microphoneDevice: {
+    deviceId?: string;
+    promise?: extractPromises<_InternalSDKMethodEventsMap['microphoneDevice']>;
+  };
+  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<SdkApiContextInterface>(SdkApiInitState);
+
+let moduleEventsUnsub: any[] = [];
+
+type commonEventHandlers = {
+  [K in keyof Omit<
+    _InternalSDKMethodEventsMap,
+    'muteVideo' | 'muteAudio' | 'login' | 'logout'
+  >]?: (setter: (p: SdkApiContextInterface[K]) => void) => Unsubscribe;
+};
+
+const commonEventHandlers: commonEventHandlers = {
+  join: setter => {
+    return SDKMethodEventsManager.on(
+      'join',
+      (res, rej, roomDetail, skipPrecall, userName) => {
+        if (typeof roomDetail === 'object') {
+          if (!validateMeetingInfoData(roomDetail)) {
+            rej(new Error('Invalid meeting details'));
+            return;
+          }
+          setter({
+            initialized: true,
+            phrase: SDK_MEETING_TAG,
+            meetingDetails: roomDetail,
+            skipPrecall,
+            userName,
+            promise: {res, rej},
+          });
+        } else if (
+          typeof roomDetail === 'string' &&
+          roomDetail.trim().length > 0
+        ) {
+          setter({
+            initialized: true,
+            phrase: roomDetail,
+            skipPrecall,
+            userName,
+            promise: {res, rej},
+          });
+        } else {
+          rej(new Error('Invalid room detail'));
+        }
+      },
+    );
+  },
+  customize: setter => {
+    return SDKMethodEventsManager.on('customize', (res, rej, customization) => {
+      setter({
+        customization: customization,
+      });
+      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 => {
+      SdkApiInitState.customize = 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());
+};
+
+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 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);
+        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();
+
+    const unsub = [
+      commonEventHandlers.customize(state => {
+        setUserCustomization(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());
+      registerListener();
+    };
+  }, []);
+
+  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}
+    </SdkApiContext.Provider>
+  );
+};
+
+export default SdkApiContextProvider;

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

@@ -16,6 +16,10 @@ import {SidePanelType} from '../subComponents/SidePanelEnum';
 import {useSidePanel} from '../utils/useSidePanel';
 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;
@@ -23,15 +27,17 @@ export interface SettingsIconButtonProps {
 
 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,
 
@@ -45,17 +51,40 @@ 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)
   ) : (
     <>
       <View>
-        <IconButton {...iconButtonProps} />
+        {isToolbarMenuItem ? (
+          <ToolbarMenuItem {...iconButtonProps} />
+        ) : (
+          <IconButton {...iconButtonProps} />
+        )}
       </View>
     </>
   );

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}>