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

package/template/src/subComponents/recording/useRecording.tsx

@@ -0,0 +1,209 @@
+/*
+********************************************
+ 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, {
+  createContext,
+  SetStateAction,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react';
+import {gql, useMutation} from '@apollo/client';
+import {useParams} from '../../components/Router';
+import {PropsContext} from '../../../agora-rn-uikit';
+import Toast from '../../../react-native-toast-message';
+import {createHook} from 'fpe-implementation';
+import {useString} from '../../utils/useString';
+import ChatContext from '../../components/ChatContext';
+import CustomEvents, {EventLevel} from '../../custom-events';
+import {EventActions, EventNames} from '../../rtm-events';
+import useRecordingLayoutQuery from './useRecordingLayoutQuery';
+import {useScreenContext} from '../../components/contexts/ScreenShareContext';
+
+export interface RecordingContextInterface {
+  startRecording: () => void;
+  stopRecording: () => void;
+  setRecordingActive: React.Dispatch<SetStateAction<boolean>>;
+  isRecordingActive: boolean;
+}
+
+const RecordingContext = createContext<RecordingContextInterface>({
+  startRecording: () => {},
+  stopRecording: () => {},
+  setRecordingActive: () => {},
+  isRecordingActive: false,
+});
+
+const START_RECORDING = gql`
+  mutation startRecordingSession($passphrase: String!, $secret: String) {
+    startRecordingSession(passphrase: $passphrase, secret: $secret)
+  }
+`;
+
+const STOP_RECORDING = gql`
+  mutation stopRecordingSession($passphrase: String!) {
+    stopRecordingSession(passphrase: $passphrase)
+  }
+`;
+
+/**
+ * Component to start / stop Agora cloud recording.
+ * Sends a control message to all users in the channel over RTM to indicate that
+ * Cloud recording has started/stopped.
+ */
+function usePrevious<T = any>(value: any) {
+  const ref = useRef<T>();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
+interface RecordingProviderProps {
+  children: React.ReactNode;
+  value: Omit<RecordingContextInterface, 'startRecording' | 'stopRecording'>;
+}
+
+/**
+ * Component to start / stop Agora cloud recording.
+ * Sends a control message to all users in the channel over RTM to indicate that
+ * Cloud recording has started/stopped.
+ */
+
+const RecordingProvider = (props: RecordingProviderProps) => {
+  const {rtcProps} = useContext(PropsContext);
+  const {setRecordingActive, isRecordingActive} = props?.value;
+  const {phrase} = useParams<{phrase: string}>();
+  const [startRecordingQuery] = useMutation(START_RECORDING);
+  const [stopRecordingQuery] = useMutation(STOP_RECORDING);
+  const prevRecordingState = usePrevious<{isRecordingActive: boolean}>({
+    isRecordingActive,
+  });
+  //commented for v1 release
+  //const recordingStartedText = useString<boolean>('recordingNotificationLabel');
+  const recordingStartedText = (active: boolean) =>
+    active ? 'Recording Started' : 'Recording Stopped';
+  const {executePresenterQuery} = useRecordingLayoutQuery();
+  const {localUid} = useContext(ChatContext);
+  const {screenShareData} = useScreenContext();
+
+  React.useEffect(() => {
+    CustomEvents.on(EventNames.RECORDING_ATTRIBUTE, (data) => {
+      switch (data?.payload?.action) {
+        case EventActions.RECORDING_STARTED:
+          setRecordingActive(true);
+          break;
+        case EventActions.RECORDING_STOPPED:
+          setRecordingActive(false);
+          break;
+        default:
+          break;
+      }
+    });
+    () => {
+      CustomEvents.off(EventNames.RECORDING_ATTRIBUTE);
+    };
+  }, []);
+
+  useEffect(() => {
+    /**
+     * The below check makes sure the notification is triggered
+     * only once. In native apps, this componenet is mounted everytime
+     * when chat icon is toggle, as Controls component is hidden and
+     * shown
+     */
+    if (prevRecordingState) {
+      if (prevRecordingState?.isRecordingActive === isRecordingActive) return;
+      Toast.show({
+        type: 'success',
+        text1: recordingStartedText(isRecordingActive),
+        visibilityTime: 1000,
+      });
+    }
+  }, [isRecordingActive]);
+
+  const startRecording = () => {
+    // If recording is not going on, start the recording by executing the graphql query
+    startRecordingQuery({
+      variables: {
+        passphrase: phrase,
+        secret:
+          rtcProps.encryption && rtcProps.encryption.key
+            ? rtcProps.encryption.key
+            : '',
+      },
+    })
+      .then((res) => {
+        console.log(res.data);
+        if (res.data.startRecordingSession === 'success') {
+          /**
+           * 1. Once the backend sucessfuly starts recording, send message
+           * in the channel indicating that cloud recording is now active.
+           */
+          CustomEvents.send(EventNames.RECORDING_ATTRIBUTE, {
+            action: EventActions.RECORDING_STARTED,
+            value: `${localUid}`,
+            level: EventLevel.LEVEL3,
+          });
+          // 2. set the local recording state to true to update the UI
+          setRecordingActive(true);
+          // 3. set the presenter mode if screen share is active
+          if (Object.values(screenShareData).some((item) => item.isActive)) {
+            console.log('Executing presenter query');
+            executePresenterQuery();
+          }
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const stopRecording = () => {
+    // If recording is already going on, stop the recording by executing the graphql query.
+    stopRecordingQuery({variables: {passphrase: phrase}})
+      .then((res) => {
+        console.log(res.data);
+        if (res.data.stopRecordingSession === 'success') {
+          /**
+           * 1. Once the backend sucessfuly starts recording, send message
+           * in the channel indicating that cloud recording is now inactive.
+           */
+          CustomEvents.send(EventNames.RECORDING_ATTRIBUTE, {
+            action: EventActions.RECORDING_STOPPED,
+            value: '',
+            level: EventLevel.LEVEL3,
+          });
+          // 2. set the local recording state to false to update the UI
+          setRecordingActive(false);
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  return (
+    <RecordingContext.Provider
+      value={{
+        startRecording,
+        stopRecording,
+        isRecordingActive,
+        setRecordingActive,
+      }}>
+      {props.children}
+    </RecordingContext.Provider>
+  );
+};
+
+const useRecording = createHook(RecordingContext);
+
+export {RecordingProvider, useRecording};

package/template/src/subComponents/recording/useRecordingLayoutQuery.tsx

@@ -0,0 +1,64 @@
+import React, {useContext} from 'react';
+import {useParams} from '../../components/Router';
+
+import {gql, useMutation} from '@apollo/client';
+import {PropsContext} from '../../../agora-rn-uikit';
+
+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 useRecordingLayoutQuery() {
+  const [setPresenterQuery] = useMutation(SET_PRESENTER);
+  const [setNormalQuery] = useMutation(SET_NORMAL);
+  const {screenShareUid} = useContext(PropsContext).rtcProps;
+  const {phrase} = useParams<any>();
+
+  const executePresenterQuery = () => {
+    setPresenterQuery({
+      variables: {
+        uid: screenShareUid,
+        passphrase: phrase,
+      },
+    })
+      .then((res) => {
+        if (res.data.setPresenter === 'success') {
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const executeNormalQuery = () => {
+    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);
+      });
+  };
+
+  return {
+    executeNormalQuery,
+    executePresenterQuery,
+  };
+}
+
+export default useRecordingLayoutQuery;

package/template/src/subComponents/screenshare/ScreenshareButton.native.tsx

@@ -0,0 +1,18 @@
+/*
+********************************************
+ 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';
+
+const ScreenshareButton = () => {
+  return <></>;
+};
+
+export default ScreenshareButton;

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

@@ -9,43 +9,60 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useContext} from 'react';
-import {TouchableOpacity, StyleSheet, View, Text} from 'react-native';
-import ColorContext from '../../components/ColorContext';
-import {ImageIcon} from '../../../agora-rn-uikit';
-import ScreenshareContext from './ScreenshareContext';
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {BtnTemplate, BtnTemplateInterface} from '../../../agora-rn-uikit';
+import {useString} from '../../utils/useString';
+import {useScreenshare} from './useScreenshare';
+import {
+  ButtonTemplateName,
+  useButtonTemplate,
+} from '../../utils/useButtonTemplate';
 /**
  * A component to start and stop screen sharing on web clients.
  * Screen sharing is not yet implemented on mobile platforms.
  * Electron has it's own screen sharing component
  */
-const ScreenshareButton = () => {
-  const {screenshareActive, startUserScreenshare} =
-    useContext(ScreenshareContext);
-  const {primaryColor} = useContext(ColorContext);
 
-  return (
-    <TouchableOpacity onPress={() => startUserScreenshare()}>
-      <View
-        style={
-          screenshareActive
-            ? style.greenLocalButton
-            : [style.localButton, {borderColor: primaryColor}]
-        }>
-        <ImageIcon
-          name={screenshareActive ? 'screenshareOffIcon' : 'screenshareIcon'}
-          style={[style.buttonIcon]}
-        />
-      </View>
-      <Text
-        style={{
-          textAlign: 'center',
-          marginTop: 5,
-          color: $config.PRIMARY_COLOR,
-        }}>
-        Share
-      </Text>
-    </TouchableOpacity>
+export interface ScreenshareButtonProps {
+  buttonTemplateName?: ButtonTemplateName;
+  render?: (
+    onPress: () => void,
+    isScreenshareActive: boolean,
+    buttonTemplateName?: ButtonTemplateName,
+  ) => JSX.Element;
+}
+
+const ScreenshareButton = (props: ScreenshareButtonProps) => {
+  const {isScreenshareActive, startUserScreenshare, stopUserScreenShare} =
+    useScreenshare();
+  //commented for v1 release
+  //const screenShareButton = useString('screenShareButton')();
+  const screenShareButton = 'Share';
+  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
+  const {buttonTemplateName = defaultTemplateValue} = props;
+  const onPress = () =>
+    isScreenshareActive ? stopUserScreenShare() : startUserScreenshare();
+  let btnTemplateProps: BtnTemplateInterface = {
+    name: isScreenshareActive ? 'screenshareOffIcon' : 'screenshareIcon',
+    onPress,
+  };
+
+  if (buttonTemplateName === ButtonTemplateName.topBar) {
+    btnTemplateProps.style = isScreenshareActive
+      ? (style.activeBtn as Object)
+      : (style.nonActiveBtn as Object);
+  } else {
+    btnTemplateProps.btnText = screenShareButton;
+    btnTemplateProps.style = isScreenshareActive
+      ? style.greenLocalButton
+      : style.localButton;
+  }
+
+  return props?.render ? (
+    props.render(onPress, isScreenshareActive, buttonTemplateName)
+  ) : (
+    <BtnTemplate {...btnTemplateProps} />
   );
 };
 
@@ -61,6 +78,19 @@ const style = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  activeBtn: {
+    backgroundColor: '#4BEB5B',
+    borderRadius: 20,
+    borderColor: '#F86051',
+    width: '100%',
+    height: '100%',
+    resizeMode: 'contain',
+  },
+  nonActiveBtn: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'contain',
+  },
   greenLocalButton: {
     backgroundColor: '#4BEB5B',
     borderRadius: 20,

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

@@ -11,13 +11,16 @@
 */
 import React, {useEffect, useContext, useRef} from 'react';
 import KeepAwake from 'react-native-keep-awake';
-import Layout from '../LayoutEnum';
-import ChatContext from '../../components/ChatContext';
+import {RtcContext, UidType} from '../../../agora-rn-uikit';
 import {
-  RtcContext,
-  MinUidContext,
-  MaxUidContext,
-} from '../../../agora-rn-uikit/src';
+  useChangeDefaultLayout,
+  useSetPinnedLayout,
+} from '../../pages/video-call/DefaultLayouts';
+import useUserList from '../../utils/useUserList';
+import {useScreenContext} from '../../components/contexts/ScreenShareContext';
+import {useString} from '../../utils/useString';
+import CustomEvents from '../../custom-events';
+import {EventNames} from '../../rtm-events';
 
 function usePrevious(value: any) {
   const ref = useRef();
@@ -27,58 +30,60 @@ function usePrevious(value: any) {
   return ref.current;
 }
 
-export const ScreenshareConfigure: React.FC = (props: any) => {
-  const {userList} = useContext(ChatContext);
+export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   const rtc = useContext(RtcContext);
   const {dispatch} = rtc;
-  const max = useContext(MaxUidContext);
-  const min = useContext(MinUidContext);
-  const users = [...max, ...min];
-  const prevUsers = usePrevious({users});
-  const {setLayout} = props;
+  const {renderList, renderPosition} = useUserList();
+  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 prevRenderPosition = usePrevious({renderPosition});
+  const setPinnedLayout = useSetPinnedLayout();
+  const changeLayout = useChangeDefaultLayout();
 
-  useEffect(() => {
-    // determine start and stop of screen share using new user left/join state and their type
-    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)),
-      );
+  const renderListRef = useRef({renderList: renderList});
 
-      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);
-        }
-      }
+  useEffect(() => {
+    renderListRef.current.renderList = renderList;
+  }, [renderList]);
 
-      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,
-          );
-        }
-      }
+  const triggerChangeLayout = (pinned: boolean, screenShareUid?: UidType) => {
+    //screenshare is started set the layout to Pinned View
+    if (pinned && screenShareUid) {
+      dispatch({
+        type: 'SwapVideo',
+        value: [screenShareUid],
+      });
+      setPinnedLayout();
+    }
+    //screenshare is stopped set the layout Grid View
+    else {
+      changeLayout();
     }
-  }, [users, userList]);
+  };
+
+  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);
+    });
+  }, []);
 
   return (
     <>