agora-appbuilder-core 2.2.0 → 2.3.0-beta.2

package/template/src/subComponents/screenshare/ScreenshareConfigure.tsx

@@ -1,36 +1,21 @@
-import React, {
-  createContext,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import {useParams} from '../../components/Router';
-import ChatContext from '../../components/ChatContext';
+import React, {useContext, useEffect, useRef, useState} from 'react';
+import {RtcContext, PropsContext, UidType} from '../../../agora-rn-uikit';
+import {ScreenshareContext} from './useScreenshare';
 import {
-  RtcContext,
-  PropsContext,
-  MinUidContext,
-  MaxUidContext,
-} from '../../../agora-rn-uikit/src';
-import Layout from '../LayoutEnum';
-import {gql, useMutation} from '@apollo/client';
-import ScreenshareContext from './ScreenshareContext';
+  useChangeDefaultLayout,
+  useSetPinnedLayout,
+} from '../../pages/video-call/DefaultLayouts';
+import {useRecording} from '../recording/useRecording';
+import {useScreenContext} from '../../components/contexts/ScreenShareContext';
+import useUserList from '../../utils/useUserList';
+import CustomEvents, {EventLevel} from '../../custom-events';
+import {EventNames} from '../../rtm-events';
+import {IAgoraRTC} from 'agora-rtc-sdk-ng';
+import useRecordingLayoutQuery from '../recording/useRecordingLayoutQuery';
+import {useString} from '../../utils/useString';
 
-const SET_PRESENTER = gql`
-  mutation setPresenter($uid: Int!, $passphrase: String!) {
-    setPresenter(uid: $uid, passphrase: $passphrase)
-  }
-`;
-
-const SET_NORMAL = gql`
-  mutation setNormal($passphrase: String!) {
-    setNormal(passphrase: $passphrase)
-  }
-`;
-
-function usePrevious(value: any) {
-  const ref = useRef();
+function usePrevious<T = any>(value: any) {
+  const ref = useRef<T>();
   useEffect(() => {
     ref.current = value;
   });
@@ -39,159 +24,133 @@ function usePrevious(value: any) {
 
 export const ScreenshareContextConsumer = ScreenshareContext.Consumer;
 
-export const ScreenshareConfigure = (props: any) => {
-  const {userList} = useContext(ChatContext);
-  const [screenshareActive, setScreenshareActive] = useState(false);
+export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
+  const [isScreenshareActive, setScreenshareActive] = useState(false);
   const rtc = useContext(RtcContext);
   const {dispatch} = rtc;
-  const max = useContext(MaxUidContext);
-  const min = useContext(MinUidContext);
-  const users = [...max, ...min];
-  const prevUsers = usePrevious({users});
-  const {phrase} = useParams<any>();
-  const {setLayout, recordingActive} = props;
+  const {renderList, renderPosition} = useUserList();
+  const {isRecordingActive} = useRecording();
+  const {executeNormalQuery, executePresenterQuery} = useRecordingLayoutQuery();
+  const {setScreenShareData, screenShareData} = useScreenContext();
+  // commented for v1 release
+  // const getScreenShareName = useString('screenshareUserName');
+  // const userText = useString('remoteUserDefaultLabel')();
+  const getScreenShareName = (name: string) => `${name}'s screenshare`;
+  const userText = 'User';
+  const setPinnedLayout = useSetPinnedLayout();
+  const changeLayout = useChangeDefaultLayout();
+
   const {channel, appId, screenShareUid, screenShareToken, encryption} =
     useContext(PropsContext).rtcProps;
 
-  const [setPresenterQuery] = useMutation(SET_PRESENTER);
-  const [setNormalQuery] = useMutation(SET_NORMAL);
+  const renderListRef = useRef({renderList: renderList});
+
+  useEffect(() => {
+    renderListRef.current.renderList = renderList;
+  }, [renderList]);
+
+  const triggerChangeLayout = (pinned: boolean, screenShareUid?: UidType) => {
+    //screenshare is started set the layout to Pinned View
+    if (pinned && screenShareUid) {
+      dispatch({
+        type: 'SwapVideo',
+        value: [screenShareUid],
+      });
+      setPinnedLayout();
+    } else {
+      //screenshare is stopped set the layout Grid View
+      changeLayout();
+    }
+  };
+
+  useEffect(() => {
+    CustomEvents.on(EventNames.SCREENSHARE_ATTRIBUTE, (data) => {
+      const screenUidOfUser =
+        renderListRef.current.renderList[data.sender].screenUid;
+      setScreenShareData((prevState) => {
+        return {
+          ...prevState,
+          [screenUidOfUser]: {
+            name: renderListRef.current.renderList[screenUidOfUser]?.name,
+            isActive: data.payload.value === 'true' ? true : false,
+          },
+        };
+      });
+      //if remote user started/stopped the screenshare then change the layout to pinned/grid
+      data.payload.value === 'true'
+        ? triggerChangeLayout(true, screenUidOfUser)
+        : triggerChangeLayout(false);
+    });
+  }, []);
 
   useEffect(() => {
+    // @ts-ignore
     rtc.RtcEngine.addListener('ScreenshareStopped', () => {
       setScreenshareActive(false);
       console.log('STOPPED SHARING');
-      setLayout((l: Layout) =>
-        l === Layout.Pinned ? Layout.Grid : Layout.Pinned,
-      );
-      setNormalQuery({variables: {passphrase: phrase}})
-        .then((res) => {
-          console.log(res.data);
-          if (res.data.stopRecordingSession === 'success') {
-          }
-        })
-        .catch((err) => {
-          console.log(err);
-        });
+      executeNormalQuery();
+      CustomEvents.send(EventNames.SCREENSHARE_ATTRIBUTE, {
+        value: `${false}`,
+        level: EventLevel.LEVEL2,
+      });
+      //if local user stopped the screenshare then change layout to grid
+      triggerChangeLayout(false);
     });
   }, []);
 
-  useEffect(() => {
-    if (prevUsers !== undefined) {
-      let joinedUser = users.filter((person) =>
-        prevUsers?.users.every((person2) => !(person2.uid === person.uid)),
-      );
-      let leftUser = prevUsers?.users.filter((person) =>
-        users.every((person2) => !(person2.uid === person.uid)),
-      );
-
-      if (joinedUser.length === 1) {
-        const newUserUid = joinedUser[0].uid;
-        // identify remote user screen type, if screen share, swap to PIN
-        if (userList[newUserUid] && userList[newUserUid].type === 1) {
-          dispatch({
-            type: 'SwapVideo',
-            value: [joinedUser[0]],
-          });
-          setLayout(Layout.Pinned);
-        } else if (newUserUid === 1) {
-          // identify local user screen type
-          if (newUserUid !== users[0].uid) {
-            // if not already maximized
-            dispatch({
-              type: 'SwapVideo',
-              value: [joinedUser[0]],
-            });
-          }
-          setLayout(Layout.Pinned);
-        }
-      }
-
-      if (leftUser.length === 1) {
-        const leftUserUid = leftUser[0].uid;
-        if (userList[leftUserUid] && userList[leftUserUid].type === 1) {
-          setLayout((l: Layout) =>
-            l === Layout.Pinned ? Layout.Grid : Layout.Pinned,
-          );
-        }
-      }
-    }
-  }, [users, userList]);
-
   const executeRecordingQuery = (isScreenActive: boolean) => {
     if (!isScreenActive) {
       // If screen share is not going on, start the screen share by executing the graphql query
-      setPresenterQuery({
-        variables: {
-          uid: screenShareUid,
-          passphrase: phrase,
-        },
-      })
-        .then((res) => {
-          if (res.data.setPresenter === 'success') {
-          }
-        })
-        .catch((err) => {
-          console.log(err);
-        });
+      executePresenterQuery();
     } else {
       // If recording is already going on, stop the recording by executing the graphql query.
-      setNormalQuery({variables: {passphrase: phrase}})
-        .then((res) => {
-          console.log(res.data);
-          if (res.data.stopRecordingSession === 'success') {
-          }
-        })
-        .catch((err) => {
-          console.log(err);
-        });
+      executeNormalQuery();
     }
   };
 
   const stopUserScreenShare = () => {
-    if (screenshareActive) {
-      startUserScreenshare();
-    }
+    if (!isScreenshareActive) return;
+    userScreenshare(false);
+  };
+  const startUserScreenshare = () => {
+    if (isScreenshareActive) return;
+    userScreenshare(true);
   };
 
-  const startUserScreenshare = async () => {
-    const isScreenActive = screenshareActive;
-    if (recordingActive) {
-      executeRecordingQuery(isScreenActive);
+  const userScreenshare = async (isActive: boolean) => {
+    if (isRecordingActive) {
+      executeRecordingQuery(isActive);
     }
     try {
+      // @ts-ignore
       await rtc.RtcEngine.startScreenshare(
         screenShareToken,
         channel,
         null,
         screenShareUid,
         appId,
-        rtc.RtcEngine,
-        encryption,
+        rtc.RtcEngine as unknown as IAgoraRTC,
+        encryption as unknown as any,
       );
-      !isScreenActive && setScreenshareActive(true);
+      isActive && setScreenshareActive(true);
     } catch (e) {
       console.error("can't start the screen share", e);
-      setNormalQuery({variables: {passphrase: phrase}})
-        .then((res) => {
-          console.log(res.data);
-          if (res.data.stopRecordingSession === 'success') {
-            // Once the backend sucessfuly stops recording,
-            // send a control message to everbody in the channel indicating that cloud recording is now inactive.
-            // sendControlMessage(controlMessageEnum.cloudRecordingUnactive);
-            // set the local recording state to false to update the UI
-            // setScreenshareActive(false);
-          }
-        })
-        .catch((err) => {
-          console.log(err);
-        });
+      executeNormalQuery();
+    }
+    if (isActive) {
+      CustomEvents.send(EventNames.SCREENSHARE_ATTRIBUTE, {
+        value: `${true}`,
+        level: EventLevel.LEVEL2,
+      });
+      //if local user started the screenshare then change layout to pinned
+      triggerChangeLayout(true, screenShareUid);
     }
   };
 
   return (
     <ScreenshareContext.Provider
       value={{
-        screenshareActive,
+        isScreenshareActive,
         startUserScreenshare,
         stopUserScreenShare,
       }}>

package/template/src/subComponents/screenshare/useScreenshare.tsx

@@ -0,0 +1,29 @@
+/*
+********************************************
+ 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 {createContext} from 'react';
+import {createHook} from 'fpe-implementation';
+
+export interface ScreenshareContextInterface {
+  isScreenshareActive: boolean;
+  startUserScreenshare: () => void;
+  stopUserScreenShare: () => void;
+}
+
+export const ScreenshareContext = createContext<ScreenshareContextInterface>({
+  isScreenshareActive: false,
+  startUserScreenshare: () => {},
+  stopUserScreenShare: () => {},
+});
+
+const useScreenshare = createHook(ScreenshareContext);
+
+export {useScreenshare};

package/template/src/subComponents/toastConfig.tsx

@@ -9,32 +9,37 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
+// @ts-nocheck
 import React from 'react';
 import {Platform} from 'react-native';
-import Toast, { BaseToast }  from '../../react-native-toast-message';
-import mobileAndTabletCheck from '../utils/mobileWebTest';
+import Toast, {BaseToast} from '../../react-native-toast-message';
+import isMobileOrTablet from '../utils/isMobileOrTablet';
 
 const toastConfig = {
-    /* 
+  /* 
       overwrite 'success' type, 
       modifying the existing `BaseToast` component
     */
-    success: ({ text1, text2, props, ...rest }) => (
-        <BaseToast
-            {...rest}
-            //BaseToast is modified to have zIndex: 100
-            style={{ borderLeftColor: $config.PRIMARY_COLOR, backgroundColor: $config.SECONDARY_FONT_COLOR, width: !mobileAndTabletCheck() ? '40%' : '95%'}}
-            contentContainerStyle={{ paddingHorizontal: 15, overflow: 'hidden'}}
-            text1Style={{
-                fontSize: 15,
-                fontWeight: '400',
-                color: $config.PRIMARY_FONT_COLOR                
-            }}
-            text1={text1}
-            text2={text2}
-            // text2={props.uuid}
-        />
-    ),
+  success: ({text1, text2, props, ...rest}) => (
+    <BaseToast
+      {...rest}
+      //BaseToast is modified to have zIndex: 100
+      style={{
+        borderLeftColor: $config.PRIMARY_COLOR,
+        backgroundColor: $config.SECONDARY_FONT_COLOR,
+        width: !isMobileOrTablet() ? '40%' : '95%',
+      }}
+      contentContainerStyle={{paddingHorizontal: 15, overflow: 'hidden'}}
+      text1Style={{
+        fontSize: 15,
+        fontWeight: '400',
+        color: $config.PRIMARY_FONT_COLOR,
+      }}
+      text1={text1}
+      text2={text2}
+      // text2={props.uuid}
+    />
+  ),
 };
 
-export default toastConfig;
+export default toastConfig;

package/template/src/utils/IsAttendeeUser.ts

@@ -0,0 +1,34 @@
+/*
+********************************************
+ 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 {useMeetingInfo} from '../components/meeting-info/useMeetingInfo';
+import {useLiveStreamDataContext} from '../components/contexts/LiveStreamDataContext';
+import {UidType} from '../../agora-rn-uikit';
+
+function useIsAttendee() {
+  if ($config.EVENT_MODE) {
+    const {audienceUids} = useLiveStreamDataContext();
+    const isAttendee = (uid: UidType) => {
+      return audienceUids.filter((audienceUid) => audienceUid === uid).length
+        ? true
+        : false;
+    };
+    return isAttendee;
+  } else {
+    const {isHost} = useMeetingInfo();
+    const isAttendee = (uid: UidType) => {
+      return !isHost ? true : false;
+    };
+    return isAttendee;
+  }
+}
+
+export default useIsAttendee;

package/template/src/utils/SdkEvents.ts

@@ -0,0 +1,68 @@
+/*
+********************************************
+ 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. 
+*********************************************
+*/
+/**
+ * @format
+ */
+type callBackType = (...args: any[]) => void;
+import {userEventsMapInterface} from '../SDKAppWrapper';
+
+interface eventsMapInterface extends userEventsMapInterface {
+  addFpe: callBackType;
+  joinMeetingWithPhrase: (phrase: string) => void;
+}
+interface SDKEventsInterface {
+  eventsMap: eventsMapInterface;
+  eventSubs: {[key in keyof eventsMapInterface]: any};
+  emit: (eventName: keyof eventsMapInterface, ...args: any) => void;
+  on: (eventName: keyof eventsMapInterface, cb: callBackType) => void;
+  off: (eventName: keyof eventsMapInterface) => void;
+}
+
+const SDKEvents: SDKEventsInterface = {
+  eventsMap: {
+    addFpe: () => {},
+    joinMeetingWithPhrase: (p) => {},
+    leave: () => {},
+    create: () => {},
+    preJoin: () => {},
+    join: () => {},
+  },
+  eventSubs: {
+    addFpe: null,
+    joinMeetingWithPhrase: null,
+    leave: null,
+    create: null,
+    preJoin: null,
+    join: null,
+  },
+  on: function (eventName, cb) {
+    console.log(
+      'DEBUG(aditya)-SDKEvents: event registered:',
+      eventName,
+    );
+    this.eventsMap[eventName] = cb;
+    if (this.eventSubs[eventName]) {
+      cb(...this.eventSubs[eventName]);
+    }
+  },
+  emit: function (eventName, ...args) {
+    console.log('DEBUG(aditya)-SDKEvents: emit called:', eventName, ...args);
+    this.eventsMap[eventName](...args);
+    this.eventSubs[eventName] = args;
+  },
+  off: function (eventName) {
+    console.log('DEBUG(aditya)-SDKEvents: event deregistered:', eventName);
+    this.eventSubs[eventName] = null;
+  },
+};
+
+export default SDKEvents;

package/template/src/utils/common.tsx

@@ -0,0 +1,40 @@
+/*
+********************************************
+ 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 {Platform} from 'react-native';
+import * as ReactIs from 'react-is';
+
+const isValidReactComponent = <T,>(Component?: React.ComponentType<T>) =>
+  Component && ReactIs.isValidElementType(Component) ? true : false;
+
+const hasBrandLogo: boolean = !!$config.LOGO;
+
+const shouldAuthenticate: boolean =
+  $config.ENABLE_APPLE_OAUTH ||
+  $config.ENABLE_GOOGLE_OAUTH ||
+  $config.ENABLE_MICROSOFT_OAUTH ||
+  $config.ENABLE_SLACK_OAUTH;
+
+const isWeb = Platform.OS === 'web';
+const isAndroid = Platform.OS === 'android';
+const isIOS = Platform.OS === 'ios';
+const isArray = (data: any[]) =>
+  data && Array.isArray(data) && data.length ? true : false ? true : false;
+export {
+  hasBrandLogo,
+  shouldAuthenticate,
+  isWeb,
+  isIOS,
+  isAndroid,
+  isArray,
+  isValidReactComponent,
+};

package/template/src/utils/eventEmitter.ts

@@ -0,0 +1,29 @@
+function EventEmitter(this: any) {
+  // key: eventName,
+  // value: An array of callback functions with the same eventName
+  this.events = new Map();
+
+  return {
+    on: (eventName: string, callback: Function) => {
+      if (this.events.has(eventName)) {
+        throw new Error(`Event with ${eventName} is already registered`);
+      }
+      //if eventName does not exist, add
+      console.log('on', eventName, callback);
+      this.events.set(eventName, callback);
+    },
+    emit: (eventName: string, args: any) => {
+      console.log('emit', args, eventName);
+
+      if (this.events.has(eventName)) {
+        //if eventName exists, call the callback in events accordingly
+        const registeredCallback = this.events.get(eventName);
+        // handle for this context
+        registeredCallback(args);
+      }
+    },
+  };
+}
+
+const SDKEvents = new (EventEmitter as any)();
+export {SDKEvents};

package/template/src/utils/getMeetingInvite.ts

@@ -0,0 +1,30 @@
+const GetMeetingInviteURL = (
+  baseUrl: string,
+  attendee: string,
+  host?: string,
+) => {
+  if (host) {
+    return {
+      host: `${baseUrl}/${host}`,
+      attendee: `${baseUrl}/${attendee}`,
+    };
+  } else {
+    return {
+      attendee: `${baseUrl}/${attendee}`,
+    };
+  }
+};
+const GetMeetingInviteID = (attendee: string, host?: string) => {
+  if (host) {
+    return {
+      host: `${host}`,
+      attendee: `${attendee}`,
+    };
+  } else {
+    return {
+      attendee: `${attendee}`,
+    };
+  }
+};
+
+export {GetMeetingInviteURL, GetMeetingInviteID};

package/template/src/utils/index.tsx

@@ -23,11 +23,11 @@ export function numFormatter(num: number) {
   }
   const value = Math.abs(num);
   const sign = Math.sign(num);
-  let newValue = value;
+  let newValue: string | number = value;
   if (value >= 1000) {
     var suffixes = ['', 'k', 'm', 'b', 't', 't+'];
     var suffixNum = Math.floor(('' + value).length / 3);
-    var shortValue = '';
+    var shortValue;
     for (var precision = 2; precision >= 1; precision--) {
       shortValue = parseFloat(
         (suffixNum != 0
@@ -46,3 +46,12 @@ export function numFormatter(num: number) {
   newValue = sign === -1 ? `-${newValue}` : `${newValue}`;
   return newValue;
 }
+
+export function isEmptyObject(obj: object) {
+  if (obj == null) return true;
+  if (typeof obj !== 'object') return true;
+  for (const key in obj) {
+    return false;
+  }
+  return true;
+}

package/template/src/utils/isAudioEnabled.ts

@@ -0,0 +1,29 @@
+/*
+********************************************
+ 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 {UidType} from '../../agora-rn-uikit';
+import {ToggleState} from '../../agora-rn-uikit/src/Contexts/PropsContext';
+import useUserList from './useUserList';
+
+function useIsAudioEnabled() {
+  const {renderList} = useUserList();
+  /**
+   *
+   * @param uid UidType
+   * @returns boolean
+   */
+  const audioEnabled = (uid: UidType): boolean =>
+    renderList[uid]?.audio === ToggleState.enabled;
+
+  return audioEnabled;
+}
+
+export default useIsAudioEnabled;