agora-appbuilder-core 2.0.1 → 2.0.3-rc2

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

@@ -0,0 +1,80 @@
+/*
+********************************************
+ 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, {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';
+/**
+ * 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>
+  );
+};
+
+const style = StyleSheet.create({
+  localButton: {
+    backgroundColor: $config.SECONDARY_FONT_COLOR,
+    borderRadius: 20,
+    borderColor: $config.PRIMARY_COLOR,
+    width: 40,
+    height: 40,
+    display: 'flex',
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  greenLocalButton: {
+    backgroundColor: '#4BEB5B',
+    borderRadius: 20,
+    borderColor: '#F86051',
+    width: 40,
+    height: 40,
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonIcon: {
+    width: '90%',
+    height: '90%',
+  },
+});
+
+export default ScreenshareButton;

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

@@ -0,0 +1,24 @@
+/*
+********************************************
+ 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 KeepAwake from 'react-native-keep-awake';
+
+export const ScreenshareConfigure: React.FC = (props: any) => {
+  return (
+    <>
+      {props.children}
+      <KeepAwake />
+    </>
+  );
+};
+
+export default ScreenshareConfigure;

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

@@ -0,0 +1,200 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import {useParams} from '../../components/Router';
+import ChatContext from '../../components/ChatContext';
+import {
+  RtcContext,
+  PropsContext,
+  MinUidContext,
+  MaxUidContext,
+} from '../../../agora-rn-uikit/src';
+import Layout from '../LayoutEnum';
+import {gql, useMutation} from '@apollo/client';
+import ScreenshareContext from './ScreenshareContext';
+
+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();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
+export const ScreenshareContextConsumer = ScreenshareContext.Consumer;
+
+export const ScreenshareConfigure = (props: any) => {
+  const {userList} = useContext(ChatContext);
+  const [screenshareActive, 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 {channel, appId, screenShareUid, screenShareToken, encryption} =
+    useContext(PropsContext).rtcProps;
+
+  const [setPresenterQuery] = useMutation(SET_PRESENTER);
+  const [setNormalQuery] = useMutation(SET_NORMAL);
+
+  useEffect(() => {
+    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);
+        });
+    });
+  }, []);
+
+  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;
+        if (userList[newUserUid] && userList[newUserUid].type === 1) {
+          dispatch({
+            type: 'SwapVideo',
+            value: [joinedUser[0]],
+          });
+          setLayout(Layout.Pinned);
+        } else if (newUserUid === 1) {
+          if (newUserUid !== users[0].uid) {
+            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);
+        });
+    } 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);
+        });
+    }
+  };
+
+  const stopUserScreenShare = () => {
+    if (screenshareActive) {
+      startUserScreenshare();
+    }
+  };
+
+  const startUserScreenshare = async () => {
+    const isScreenActive = screenshareActive;
+    if (recordingActive) {
+      executeRecordingQuery(isScreenActive);
+    }
+    try {
+      await rtc.RtcEngine.startScreenshare(
+        screenShareToken,
+        channel,
+        null,
+        screenShareUid,
+        appId,
+        rtc.RtcEngine,
+        encryption,
+      );
+      !isScreenActive && 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);
+        });
+    }
+  };
+
+  return (
+    <ScreenshareContext.Provider
+      value={{
+        screenshareActive,
+        startUserScreenshare,
+        stopUserScreenShare,
+      }}>
+      {props.children}
+    </ScreenshareContext.Provider>
+  );
+};
+
+export default ScreenshareConfigure;

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

@@ -0,0 +1,21 @@
+/*
+********************************************
+ 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';
+
+interface ScreenshareContext {
+  screenshareActive: boolean;
+  startUserScreenshare: () => void;
+  stopUserScreenShare: () => void;
+}
+
+const ScreenshareContext = createContext(null as unknown as ScreenshareContext);
+export default ScreenshareContext;

package/template/src/utils/index.tsx

@@ -0,0 +1,48 @@
+type Entry<T> = {
+  [K in keyof T]: [K, T[K]];
+}[keyof T];
+
+export function filterObject<T extends object>(
+  obj: T,
+  fn: (entry: Entry<T>, i: number, arr: Entry<T>[]) => boolean,
+) {
+  return Object.fromEntries(
+    (Object.entries(obj) as Entry<T>[]).filter(fn),
+  ) as Partial<T>;
+}
+
+export function kFormatter(num: number) {
+  return Math.abs(num) > 999
+    ? Math.sign(num) * (Math.round(Math.abs(num) / 100) / 10) + 'k'
+    : Math.sign(num) * Math.abs(num);
+}
+
+export function numFormatter(num: number) {
+  if (num === null || num === 0) {
+    return '0';
+  }
+  const value = Math.abs(num);
+  const sign = Math.sign(num);
+  let newValue = value;
+  if (value >= 1000) {
+    var suffixes = ['', 'k', 'm', 'b', 't', 't+'];
+    var suffixNum = Math.floor(('' + value).length / 3);
+    var shortValue = '';
+    for (var precision = 2; precision >= 1; precision--) {
+      shortValue = parseFloat(
+        (suffixNum != 0
+          ? value / Math.pow(1000, suffixNum)
+          : value
+        ).toPrecision(precision),
+      );
+      var dotLessShortValue = (shortValue + '').replace(/[^a-zA-Z 0-9]+/g, '');
+      if (dotLessShortValue.length <= 2) {
+        break;
+      }
+    }
+    if (shortValue % 1 != 0) shortValue = shortValue.toFixed(1);
+    newValue = shortValue + suffixes[suffixNum];
+  }
+  newValue = sign === -1 ? `-${newValue}` : `${newValue}`;
+  return newValue;
+}