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

package/template/src/components/Rightbar.tsx

@@ -0,0 +1,129 @@
+/*
+********************************************
+ 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 from 'react';
+import {View, StyleSheet, useWindowDimensions} from 'react-native';
+import Toolbar from '../atoms/Toolbar';
+import {CustomToolbarMerge, CustomToolbarSorting} from '../utils/common';
+import {ToolbarItemHide, ToolbarRightPresetProps} from '../atoms/ToolbarPreset';
+import {filterObject} from '../utils';
+
+const defaultItems: ToolbarRightPresetProps['items'] = {};
+
+export interface RightbarProps {
+  items?: ToolbarRightPresetProps['items'];
+  includeDefaultItems?: boolean;
+}
+const Rightbar = (props: RightbarProps) => {
+  const {includeDefaultItems = true, items = {}} = props;
+  const {width, height} = useWindowDimensions();
+
+  const isHidden = (hide: ToolbarItemHide = false) => {
+    try {
+      return typeof hide === 'boolean'
+        ? hide
+        : typeof hide === 'function'
+        ? hide(width, height)
+        : false;
+    } catch (error) {
+      console.log('debugging isHidden error', error);
+      return false;
+    }
+  };
+
+  const mergedItems = CustomToolbarMerge(
+    includeDefaultItems ? defaultItems : {},
+    items,
+  );
+
+  const startItems = filterObject(
+    mergedItems,
+    ([_, v]) => v?.align === 'start' && !isHidden(v?.hide),
+  );
+  const centerItems = filterObject(
+    mergedItems,
+    ([_, v]) => v?.align === 'center' && !isHidden(v?.hide),
+  );
+  const endItems = filterObject(
+    mergedItems,
+    ([_, v]) => v?.align === 'end' && !isHidden(v?.hide),
+  );
+
+  const startItemsOrdered = CustomToolbarSorting(startItems);
+  const centerItemsOrdered = CustomToolbarSorting(centerItems);
+  const endItemsOrdered = CustomToolbarSorting(endItems);
+
+  const renderContent = (
+    orderedKeys: string[],
+    type: 'start' | 'center' | 'end',
+  ) => {
+    const renderContentItem = [];
+    let index = 0;
+    orderedKeys.forEach(keyName => {
+      index = index + 1;
+      let ToolbarComponent = null;
+      if (type === 'start') {
+        ToolbarComponent = startItems[keyName]?.component;
+      } else if (type === 'center') {
+        ToolbarComponent = centerItems[keyName]?.component;
+      } else {
+        ToolbarComponent = endItems[keyName]?.component;
+      }
+      if (ToolbarComponent) {
+        renderContentItem.push(
+          <ToolbarComponent key={`top-toolbar-${type}` + index} />,
+        );
+      }
+    });
+
+    return renderContentItem;
+  };
+
+  return (
+    <Toolbar>
+      <View style={style.startContent}>
+        {renderContent(startItemsOrdered, 'start')}
+      </View>
+      <View style={style.centerContent}>
+        {renderContent(centerItemsOrdered, 'center')}
+      </View>
+      <View style={style.endContent}>
+        {renderContent(endItemsOrdered, 'end')}
+      </View>
+    </Toolbar>
+  );
+};
+
+const style = StyleSheet.create({
+  startContent: {
+    flex: 1,
+    zIndex: 2,
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  centerContent: {
+    flex: 1,
+    zIndex: 2,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  endContent: {
+    flex: 1,
+    zIndex: 2,
+    flexDirection: 'column',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+});
+
+export default Rightbar;

package/template/src/components/Router.electron.ts

@@ -17,4 +17,6 @@ export {
   Redirect,
   useHistory,
   useParams,
+  useLocation,
+  Prompt,
 } from 'react-router-dom';

package/template/src/components/Router.native.ts

@@ -18,4 +18,6 @@ export {
   useHistory,
   useParams,
   BackButton,
+  useLocation,
+  Prompt,
 } from 'react-router-native';

package/template/src/components/Router.sdk.ts

@@ -17,4 +17,6 @@ export {
   Redirect,
   useHistory,
   useParams,
+  useLocation,
+  Prompt,
 } from 'react-router-dom';

package/template/src/components/Router.ts

@@ -17,4 +17,6 @@ export {
   Redirect,
   useHistory,
   useParams,
+  useLocation,
+  Prompt,
 } from 'react-router-dom';

package/template/src/components/SdkApiContext.tsx

@@ -0,0 +1,319 @@
+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;
+        preference: {
+          disableShareTile: boolean;
+          disableVideoProcessors: 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, preference) => {
+        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,
+            preference,
+            promise: {res, rej},
+          });
+        } else if (
+          typeof roomDetail === 'string' &&
+          roomDetail.trim().length > 0
+        ) {
+          setter({
+            initialized: true,
+            phrase: roomDetail,
+            skipPrecall,
+            userName,
+            preference,
+            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 (