agora-appbuilder-core 3.0.8 → 4.0.0-api.0

package/template/src/components/RTMConfigure.tsx

@@ -12,14 +12,18 @@
 // @ts-nocheck
 import React, {useState, useContext, useEffect, useRef} from 'react';
 import RtmEngine from 'agora-react-native-rtm';
-import {PropsContext, useLocalUid} from '../../agora-rn-uikit';
+import {
+  ContentInterface,
+  DispatchContext,
+  PropsContext,
+  useLocalUid,
+} from '../../agora-rn-uikit';
 import ChatContext from './ChatContext';
-import {RtcContext} from '../../agora-rn-uikit';
 import {Platform} from 'react-native';
 import {backOff} from 'exponential-backoff';
 import {useString} from '../utils/useString';
-import {isAndroid, isWebInternal} from '../utils/common';
-import {useRender, useRtc} from 'customization-api';
+import {isAndroid, isWeb, isWebInternal} from '../utils/common';
+import {useContent} from 'customization-api';
 import {
   safeJsonParse,
   timeNow,
@@ -28,7 +32,7 @@ import {
   get32BitUid,
 } from '../rtm/utils';
 import {EventUtils, EventsQueue} from '../rtm-events';
-import {EventPersistLevel} from '../rtm-events-api';
+import {PersistanceLevel} from '../rtm-events-api';
 import RTMEngine from '../rtm/RTMEngine';
 import {filterObject} from '../utils';
 
@@ -37,12 +41,13 @@ export enum UserType {
 }
 
 const RtmConfigure = (props: any) => {
+  const rtmInitTimstamp = new Date().getTime();
   const localUid = useLocalUid();
   const {callActive} = props;
   const {rtcProps} = useContext(PropsContext);
-  const {RtcEngine, dispatch} = useRtc();
-  const {renderList, activeUids} = useRender();
-  const renderListRef = useRef({renderList: renderList});
+  const {dispatch} = useContext(DispatchContext);
+  const {defaultContent, activeUids} = useContent();
+  const defaultContentRef = useRef({defaultContent: defaultContent});
   const activeUidsRef = useRef({activeUids: activeUids});
 
   /**
@@ -54,8 +59,8 @@ const RtmConfigure = (props: any) => {
   }, [activeUids]);
 
   useEffect(() => {
-    renderListRef.current.renderList = renderList;
-  }, [renderList]);
+    defaultContentRef.current.defaultContent = defaultContent;
+  }, [defaultContent]);
 
   const [login, setLogin] = useState<boolean>(false);
 
@@ -76,21 +81,37 @@ const RtmConfigure = (props: any) => {
   React.useEffect(() => {
     setTotalOnlineUsers(
       Object.keys(
-        filterObject(renderList, ([k, v]) => v?.type === 'rtc' && !v.offline),
+        filterObject(
+          defaultContent,
+          ([k, v]) => v?.type === 'rtc' && !v.offline,
+        ),
       ).length,
     );
-  }, [renderList]);
+  }, [defaultContent]);
 
   React.useEffect(() => {
-    const handBrowserClose = () => {
+    const handBrowserClose = (ev) => {
+      // ev.preventDefault();
+      // return (ev.returnValue = 'Are you sure you want to exit?');
+    };
+    const logoutRtm = () => {
       engine.current.leaveChannel(rtcProps.channel);
     };
 
     if (!isWebInternal()) return;
-    window.addEventListener('beforeunload', handBrowserClose);
+    window.addEventListener(
+      'beforeunload',
+      isWeb() ? handBrowserClose : () => {},
+    );
+
+    window.addEventListener('pagehide', logoutRtm);
     // cleanup this component
     return () => {
-      window.removeEventListener('beforeunload', handBrowserClose);
+      window.removeEventListener(
+        'beforeunload',
+        isWeb() ? handBrowserClose : () => {},
+      );
+      window.removeEventListener('pagehide', logoutRtm);
     };
   }, []);
 
@@ -100,6 +121,7 @@ const RtmConfigure = (props: any) => {
         uid: localUid.toString(),
         token: rtcProps.rtm,
       });
+      RTMEngine.getInstance().setLocalUID(localUid.toString());
       timerValueRef.current = 5;
       setAttribute();
     } catch (error) {
@@ -130,7 +152,12 @@ const RtmConfigure = (props: any) => {
 
   const joinChannel = async () => {
     try {
-      await engine.current.joinChannel(rtcProps.channel);
+      if (RTMEngine.getInstance().channelUid !== rtcProps.channel) {
+        await engine.current.joinChannel(rtcProps.channel);
+        RTMEngine.getInstance().setChannelId(rtcProps.channel);
+      } else {
+        console.log('RTM already joined channel skipping');
+      }
       timerValueRef.current = 5;
       await getMembers();
     } catch (error) {
@@ -143,7 +170,7 @@ const RtmConfigure = (props: any) => {
 
   const updateRenderListState = (
     uid: number,
-    data: Partial<RenderInterface>,
+    data: Partial<ContentInterface>,
   ) => {
     dispatch({type: 'UpdateRenderList', value: [uid, data]});
   };
@@ -196,6 +223,9 @@ const RtmConfigure = (props: any) => {
                   screenUid: screenUid,
                   //below thing for livestreaming
                   type: 'rtc',
+                  uid,
+                  offline: false,
+                  lastMessageTimeStamp: 0,
                 };
                 updateRenderListState(uid, userData);
                 //end- updating user data in rtc
@@ -203,6 +233,7 @@ const RtmConfigure = (props: any) => {
                 //start - updating screenshare data in rtc
                 const screenShareUser = {
                   type: UserType.ScreenShare,
+                  parentUid: uid,
                 };
                 updateRenderListState(screenUid, screenShareUser);
                 //end - updating screenshare data in rtc
@@ -242,7 +273,7 @@ const RtmConfigure = (props: any) => {
 
   const init = async () => {
     engine.current = RTMEngine.getInstance().engine;
-    RTMEngine.getInstance().setLoginInfo(localUid.toString(), rtcProps.channel);
+    RTMEngine.getInstance();
 
     engine.current.on('connectionStateChanged', (evt: any) => {
       //console.log(evt);
@@ -286,6 +317,9 @@ const RtmConfigure = (props: any) => {
             screenUid: screenUid,
             //below thing for livestreaming
             type: 'rtc',
+            uid,
+            offline: false,
+            lastMessageTimeStamp: 0,
           };
           updateRenderListState(uid, userData);
           //end- updating user data in rtc
@@ -293,6 +327,7 @@ const RtmConfigure = (props: any) => {
           //start - updating screenshare data in rtc
           const screenShareUser = {
             type: UserType.ScreenShare,
+            parentUid: uid,
           };
           updateRenderListState(screenUid, screenShareUser);
           //end - updating screenshare data in rtc
@@ -383,7 +418,7 @@ const RtmConfigure = (props: any) => {
     console.log('CUSTOM_EVENT_API: inside eventDispatcher ', data);
     const {evt, value} = data;
     // Step 1: Set local attributes
-    if (value?.persistLevel === EventPersistLevel.LEVEL3) {
+    if (value?.persistLevel === PersistanceLevel.Session) {
       const rtmAttribute = {key: evt, value: value};
       await engine.current.addOrUpdateLocalUserAttributes([rtmAttribute]);
     }
@@ -392,6 +427,17 @@ const RtmConfigure = (props: any) => {
       const {payload, persistLevel, source} = JSON.parse(value);
       console.log('CUSTOM_EVENT_API:  emiting event..: ');
       EventUtils.emitEvent(evt, source, {payload, persistLevel, sender, ts});
+      // Because async gets evaluated in a different order when in an sdk
+      if (evt === 'name') {
+        setTimeout(() => {
+          EventUtils.emitEvent(evt, source, {
+            payload,
+            persistLevel,
+            sender,
+            ts,
+          });
+        }, 200);
+      }
     } catch (error) {
       console.log('CUSTOM_EVENT_API: error while emiting event: ', error);
     }
@@ -418,6 +464,7 @@ const RtmConfigure = (props: any) => {
   return (
     <ChatContext.Provider
       value={{
+        rtmInitTimstamp,
         hasUserJoinedRTM,
         engine: engine.current,
         localUid: localUid,

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

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

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

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

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

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

package/template/src/components/Router.ts

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

package/template/src/components/SdkApiContext.tsx

@@ -0,0 +1,161 @@
+import React, {createContext, useState, useEffect} 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 SdkApiContextInterface = {
+  join:
+    | {
+        initialized: true;
+        phrase: string;
+        meetingDetails?: Partial<RoomInfoContextInterface['data']>;
+        skipPrecall: boolean;
+        promise: {
+          res: Parameters<_InternalSDKMethodEventsMap['join']>[0];
+          rej: Parameters<_InternalSDKMethodEventsMap['join']>[1];
+        };
+      }
+    | {
+        initialized: false;
+      };
+  customize: {
+    customization?: CustomizationApiInterface;
+    promise?: {
+      res: Parameters<_InternalSDKMethodEventsMap['customize']>[0];
+      rej: Parameters<_InternalSDKMethodEventsMap['customize']>[1];
+    };
+  };
+  clearState: (key: keyof _InternalSDKMethodEventsMap) => void;
+};
+
+const SdkApiInitState: SdkApiContextInterface = {
+  join: {
+    initialized: false,
+  },
+  customize: {},
+  clearState: () => {},
+};
+
+export const SDK_MEETING_TAG = 'sdk-initiated-meeting';
+
+export const SdkApiContext = createContext(SdkApiInitState);
+
+let moduleEventsUnsub: any[] = [];
+
+type commonEventHandlers = {
+  [K in keyof _InternalSDKMethodEventsMap]?: (
+    setter: (p: SdkApiContextInterface[K]) => void,
+  ) => Unsubscribe;
+};
+
+const commonEventHandlers: commonEventHandlers = {
+  join: (setter) => {
+    return SDKMethodEventsManager.on(
+      'join',
+      (res, rej, roomDetail, skipPrecall) => {
+        if (typeof roomDetail === 'object') {
+          if (!validateMeetingInfoData(roomDetail)) {
+            rej(new Error('Invalid meeting details'));
+            return;
+          }
+          setter({
+            initialized: true,
+            phrase: SDK_MEETING_TAG,
+            meetingDetails: roomDetail,
+            skipPrecall,
+            promise: {res, rej},
+          });
+        } else if (
+          typeof roomDetail === 'string' &&
+          roomDetail.trim().length > 0
+        ) {
+          setter({
+            initialized: true,
+            phrase: roomDetail,
+            skipPrecall,
+            promise: {res, rej},
+          });
+        } else {
+          rej(new Error('Invalid room detail'));
+        }
+      },
+    );
+  },
+  customize: (setter) => {
+    return SDKMethodEventsManager.on('customize', (res, rej, customization) => {
+      setter({
+        customization: customization,
+      });
+      res();
+    });
+  },
+};
+
+const registerListener = () => {
+  moduleEventsUnsub = [
+    commonEventHandlers.customize((state) => {
+      SdkApiInitState.customize = state;
+    }),
+    commonEventHandlers.join((state) => {
+      SdkApiInitState.join = state;
+    }),
+  ];
+};
+
+const deRegisterListener = () => {
+  moduleEventsUnsub.forEach((v) => v());
+};
+
+const SdkApiContextProvider: React.FC = (props) => {
+  const [joinState, setJoinState] = useState(SdkApiInitState.join);
+  const [userCustomization, setUserCustomization] = useState(
+    SdkApiInitState.customize,
+  );
+
+  const clearState: SdkApiContextInterface['clearState'] = (key) => {
+    switch (key) {
+      case 'join':
+        setJoinState(SdkApiInitState.join);
+        return;
+      case 'customize':
+        setUserCustomization(SdkApiInitState.customize);
+    }
+  };
+
+  useEffect(() => {
+    deRegisterListener();
+    console.log('[SDKContext] join state is ', joinState);
+    const unsub = [
+      commonEventHandlers.customize((state) => {
+        setUserCustomization(state);
+      }),
+      commonEventHandlers.join((state) => {
+        setJoinState(state);
+      }),
+    ];
+
+    return () => {
+      unsub.forEach((v) => v());
+      registerListener();
+    };
+  }, []);
+
+  return (
+    <SdkApiContext.Provider
+      value={{
+        join: joinState,
+        customize: userCustomization,
+        clearState,
+      }}>
+      {props.children}
+    </SdkApiContext.Provider>
+  );
+};
+
+export default SdkApiContextProvider;

package/template/src/components/Settings.tsx

@@ -13,126 +13,62 @@ import React, {useContext} from 'react';
 import {StyleSheet, View} from 'react-native';
 import ColorContext from './ColorContext';
 import {SidePanelType} from '../subComponents/SidePanelEnum';
-import {BtnTemplate, BtnTemplateInterface} from '../../agora-rn-uikit';
 import {useSidePanel} from '../utils/useSidePanel';
-import {
-  ButtonTemplateName,
-  useButtonTemplate,
-} from '../utils/useButtonTemplate';
 import {useString} from '../utils/useString';
-import Styles from './styles';
+import IconButton, {IconButtonProps} from '../atoms/IconButton';
 
 export interface SettingsIconButtonProps {
-  buttonTemplateName?: ButtonTemplateName;
-  render?: (
-    onPress: () => void,
-    isPanelActive: boolean,
-    buttonTemplateName?: ButtonTemplateName,
-  ) => JSX.Element;
+  render?: (onPress: () => void, isPanelActive: boolean) => JSX.Element;
 }
 
 const Settings = (props: SettingsIconButtonProps) => {
-  const {primaryColor} = useContext(ColorContext);
   const {sidePanel, setSidePanel} = useSidePanel();
   //commented for v1 release
   //const settingsLabel = useString('settingsLabel')();
   const settingsLabel = 'Settings';
-  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
-  const {buttonTemplateName = defaultTemplateValue} = props;
   const isPanelActive = sidePanel === SidePanelType.Settings;
   const onPress = () => {
     isPanelActive
       ? setSidePanel(SidePanelType.None)
       : setSidePanel(SidePanelType.Settings);
   };
-  let btnTemplateProps: BtnTemplateInterface = {
+  let iconButtonProps: IconButtonProps = {
     onPress: onPress,
-    name: isPanelActive ? 'settingsFilled' : 'settings',
+
+    iconProps: {
+      name: 'settings',
+      tintColor: isPanelActive
+        ? $config.PRIMARY_ACTION_TEXT_COLOR
+        : $config.SECONDARY_ACTION_COLOR,
+      iconBackgroundColor: isPanelActive
+        ? $config.PRIMARY_ACTION_BRAND_COLOR
+        : '',
+    },
+    btnTextProps: {
+      text: $config.ICON_TEXT ? settingsLabel : '',
+      textColor: $config.FONT_COLOR,
+    },
   };
-  if (buttonTemplateName === ButtonTemplateName.bottomBar) {
-    btnTemplateProps.btnText = settingsLabel;
-    btnTemplateProps.style = Styles.localButtonWithoutBG as Object;
-  } else {
-    btnTemplateProps.style = [
-      style.localButtonWithMatchingStyle,
-      {borderColor: primaryColor},
-    ];
-  }
+
   return props?.render ? (
-    props.render(onPress, isPanelActive, buttonTemplateName)
+    props.render(onPress, isPanelActive)
   ) : (
-    <BtnTemplate {...btnTemplateProps} />
+    <>
+      <View>
+        <IconButton {...iconButtonProps} />
+      </View>
+    </>
   );
 };
 
 export const SettingsWithViewWrapper = (props: SettingsIconButtonProps) => {
-  return (
-    <View style={[style.navItem, style.navSmItem]}>
-      <Settings {...props} />
-    </View>
-  );
+  return <Settings {...props} />;
 };
 
 const style = StyleSheet.create({
-  navItem: {
-    height: '100%',
-    alignItems: 'center',
-    position: 'relative',
-  },
-  navSmItem: {
-    flexGrow: 0,
-    flexShrink: 0,
-    flexBasis: '15%',
-  },
-  main: {
-    width: '50%',
-    height: '80%',
-    left: '25%',
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    justifyContent: 'space-evenly',
-    alignContent: 'center',
-    paddingVertical: 5,
-    flexDirection: 'column',
-  },
-  popupPickerHolder: {
-    // height: '40%',
-    justifyContent: 'space-around',
-    paddingHorizontal: '8%',
-  },
-  buttonIcon: {
-    // width: 30,
-    // height: 30,
-    width: '100%',
-    height: '100%',
-    tintColor: $config.PRIMARY_COLOR,
-  },
-  heading: {
-    fontSize: 30,
-    fontWeight: '700',
-    color: $config.PRIMARY_FONT_COLOR,
-    // marginBottom: 20,
-    alignSelf: 'center',
-  },
-  primaryBtn: {
-    width: '60%',
-    alignSelf: 'center',
-    backgroundColor: $config.PRIMARY_COLOR,
-    maxWidth: 400,
-    minHeight: 45,
-  },
-  primaryBtnText: {
-    width: '100%',
-    height: 45,
-    lineHeight: 45,
-    fontSize: 16,
-    textAlign: 'center',
-    textAlignVertical: 'center',
-    color: $config.SECONDARY_FONT_COLOR,
-  },
   localButton: {
     borderRadius: 2,
-    borderColor: $config.PRIMARY_COLOR,
-    // borderWidth: 1,
+    borderColor: $config.PRIMARY_ACTION_BRAND_COLOR,
     width: 30,
     height: 30,
     display: 'flex',
@@ -141,11 +77,6 @@ const style = StyleSheet.create({
     justifyContent: 'center',
     resizeMode: 'contain',
   },
-  localButtonWithMatchingStyle: {
-    width: '100%',
-    height: '100%',
-    resizeMode: 'contain',
-  },
 });
 
 export default Settings;