agora-appbuilder-core 4.0.0 → 4.0.1

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

@@ -1,16 +1,16 @@
 /*
 ********************************************
  Copyright © 2022 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. 
+ 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, useEffect, useRef, useState} from 'react';
-import {PropsContext, UidType} from '../../../agora-rn-uikit';
+import {DispatchContext, PropsContext, UidType} from '../../../agora-rn-uikit';
 import {ScreenshareContext} from './useScreenshare';
 import {
   getGridLayoutName,
@@ -18,38 +18,37 @@ import {
   useChangeDefaultLayout,
   useSetPinnedLayout,
 } from '../../pages/video-call/DefaultLayouts';
-import {useRecording} from '../recording/useRecording';
 import {useScreenContext} from '../../components/contexts/ScreenShareContext';
-import events, {EventPersistLevel} from '../../rtm-events-api';
+import events, {PersistanceLevel} from '../../rtm-events-api';
 import {EventActions, EventNames} from '../../rtm-events';
 import {IAgoraRTC} from 'agora-rtc-sdk-ng';
-import useRecordingLayoutQuery from '../recording/useRecordingLayoutQuery';
-import {useString} from '../../utils/useString';
 import {timeNow} from '../../rtm/utils';
 import {
   controlMessageEnum,
   useLayout,
-  useRender,
+  useContent,
   useRtc,
 } from 'customization-api';
 import {filterObject} from '../../utils';
+import Toast from '../../../react-native-toast-message';
+import {useString} from '../../utils/useString';
+import {
+  videoRoomScreenShareErrorToastHeading,
+  videoRoomScreenShareErrorToastSubHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
 
 export const ScreenshareContextConsumer = ScreenshareContext.Consumer;
 
 export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
+  const toastHeading = useString(videoRoomScreenShareErrorToastHeading)();
+  const toastSubHeading = useString(videoRoomScreenShareErrorToastSubHeading)();
   const [isScreenshareActive, setScreenshareActive] = useState(false);
+  const {dispatch} = useContext(DispatchContext);
   const rtc = useRtc();
-  const {dispatch} = rtc;
-  const {renderList, activeUids, lastJoinedUid, pinnedUid} = useRender();
+  const {defaultContent, activeUids, pinnedUid, secondaryPinnedUid} =
+    useContent();
   const isPinned = useRef(0);
-  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 {currentLayout} = useLayout();
@@ -58,16 +57,23 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   const {channel, appId, screenShareUid, screenShareToken, encryption} =
     useContext(PropsContext).rtcProps;
 
-  const renderListRef = useRef({renderList: renderList});
+  const defaultContentRef = useRef({defaultContent: defaultContent});
   const pinnedUidRef = useRef({pinnedUid: pinnedUid});
+  const secondaryPinnedUidRef = useRef({
+    secondaryPinnedUid: secondaryPinnedUid,
+  });
 
   useEffect(() => {
     pinnedUidRef.current.pinnedUid = pinnedUid;
   }, [pinnedUid]);
 
   useEffect(() => {
-    renderListRef.current.renderList = renderList;
-  }, [renderList]);
+    secondaryPinnedUidRef.current.secondaryPinnedUid = secondaryPinnedUid;
+  }, [secondaryPinnedUid]);
+
+  useEffect(() => {
+    defaultContentRef.current.defaultContent = defaultContent;
+  }, [defaultContent]);
 
   useEffect(() => {
     currentLayoutRef.current.currentLayout = currentLayout;
@@ -85,7 +91,7 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
     const data = filterObject(screenShareData, ([k, v]) => v?.isActive);
     if (data) {
       const recentScreenshare = Object.keys(data)
-        .map((i) => parseInt(i))
+        .map(i => parseInt(i))
         .sort((a, b) => {
           return data[a].ts - data[b].ts;
         });
@@ -95,21 +101,44 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
           isPinned.current !== recentScreenshare[0] &&
           activeUids.indexOf(recentScreenshare[0]) !== -1
         ) {
-          triggerChangeLayout(true, recentScreenshare[0]);
+          triggerChangeLayout(
+            true,
+            recentScreenshare[0],
+            defaultContentRef.current.defaultContent[recentScreenshare[0]]
+              ?.parentUid,
+          );
         }
       }
     }
   }, [activeUids, screenShareData]);
 
-  const triggerChangeLayout = (pinned: boolean, screenShareUid?: UidType) => {
+  const triggerChangeLayout = (
+    pinned: boolean,
+    screenShareUid?: UidType,
+    parentUid?: UidType,
+  ) => {
     let layout = currentLayoutRef.current.currentLayout;
     //screenshare is started set the layout to Pinned View
     if (pinned && screenShareUid) {
       isPinned.current = screenShareUid;
       dispatch({
-        type: 'SwapVideo',
+        type: 'UserPin',
         value: [screenShareUid],
       });
+      if (parentUid && !secondaryPinnedUidRef.current.secondaryPinnedUid) {
+        dispatch({
+          type: 'UserSecondaryPin',
+          value: [parentUid],
+        });
+      } else if (
+        parentUid &&
+        secondaryPinnedUidRef.current.secondaryPinnedUid
+      ) {
+        dispatch({
+          type: 'ActiveSpeaker',
+          value: [parentUid],
+        });
+      }
       layout !== getPinnedLayoutName() && setPinnedLayout();
     } else {
       isPinned.current = 0;
@@ -119,132 +148,161 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   };
 
   useEffect(() => {
-    events.on(controlMessageEnum.kickScreenshare, () => {
-      //if screenscreen already active. then below method will stop the screen share
-      // @ts-ignore
-      rtc.RtcEngine.startScreenshare();
-    });
-
-    events.on(EventNames.SCREENSHARE_ATTRIBUTE, (data) => {
-      const payload = JSON.parse(data.payload);
-      const action = payload.action;
-      const value = payload.value;
+    const unsubKickScreenshare = events.on(
+      controlMessageEnum.kickScreenshare,
+      () => {
+        //if screenscreen already active. then below method will stop the screen share
+        // @ts-ignore
+        rtc.RtcEngineUnsafe.startScreenshare();
+      },
+    );
+    const unsubScreenshareAttribute = events.on(
+      EventNames.SCREENSHARE_ATTRIBUTE,
+      data => {
+        const payload = JSON.parse(data.payload);
+        const action = payload.action;
+        const value = payload.value;
 
-      const screenUidOfUser =
-        renderListRef.current.renderList[data.sender].screenUid;
-      switch (action) {
-        case EventActions.SCREENSHARE_STARTED:
-          setScreenShareData((prevState) => {
-            return {
-              ...prevState,
-              [screenUidOfUser]: {
-                name: renderListRef.current.renderList[screenUidOfUser]?.name,
-                isActive: true,
-                ts: value || 0,
-              },
-            };
-          });
-          break;
-        case EventActions.SCREENSHARE_STOPPED:
-          setScreenShareData((prevState) => {
-            return {
-              ...prevState,
-              [screenUidOfUser]: {
-                name: renderListRef.current.renderList[screenUidOfUser]?.name,
-                isActive: false,
-                ts: value || 0,
-              },
-            };
-          });
-          //if remote user started/stopped the screenshare then change the layout to pinned/grid
-          //if user pinned somebody then don't triggerlayout change
-          if (!pinnedUidRef.current.pinnedUid) {
-            triggerChangeLayout(false);
+        if (data?.sender) {
+          let screenUidOfUser =
+            defaultContentRef.current.defaultContent[data?.sender]?.screenUid;
+          if (!screenUidOfUser) {
+            screenUidOfUser = payload?.screenUidOfUser;
           }
-          break;
-        default:
-          break;
-      }
-    });
-  }, []);
+          if (screenUidOfUser) {
+            switch (action) {
+              case EventActions.SCREENSHARE_STARTED:
+                setScreenShareData(prevState => {
+                  return {
+                    ...prevState,
+                    [screenUidOfUser]: {
+                      name: defaultContentRef.current.defaultContent[
+                        screenUidOfUser
+                      ]?.name,
+                      isActive: true,
+                      ts: value || 0,
+                    },
+                  };
+                });
+                break;
+              case EventActions.SCREENSHARE_STOPPED:
+                setScreenShareData(prevState => {
+                  return {
+                    ...prevState,
+                    [screenUidOfUser]: {
+                      name: defaultContentRef.current.defaultContent[
+                        screenUidOfUser
+                      ]?.name,
+                      isActive: false,
+                      ts: value || 0,
+                    },
+                  };
+                });
+                //if remote user started/stopped the screenshare then change the layout to pinned/grid
+                //if user pinned somebody then don't triggerlayout change
+                if (!pinnedUidRef.current.pinnedUid) {
+                  triggerChangeLayout(false);
+                }
+                if (screenUidOfUser === pinnedUidRef.current.pinnedUid) {
+                  triggerChangeLayout(false);
+                  dispatch({
+                    type: 'UserPin',
+                    value: [0],
+                  });
+                }
+                break;
+              default:
+                break;
+            }
+          }
+        }
+      },
+    );
 
-  useEffect(() => {
-    // @ts-ignore
-    rtc.RtcEngine.addListener('ScreenshareStopped', () => {
-      setScreenshareActive(false);
-      console.log('STOPPED SHARING');
-      executeNormalQuery();
-      events.send(
-        EventNames.SCREENSHARE_ATTRIBUTE,
-        JSON.stringify({
-          action: EventActions.SCREENSHARE_STOPPED,
-          value: 0,
-        }),
-        EventPersistLevel.LEVEL2,
-      );
-      setScreenShareData((prevState) => {
-        return {
-          ...prevState,
-          [screenShareUid]: {
-            ...prevState[screenShareUid],
-            isActive: false,
-            ts: 0,
-          },
-        };
-      });
-      //if local user stopped the screenshare then change layout to grid
-      //if user pinned somebody then don't triggerlayout change
-      if (!pinnedUidRef.current.pinnedUid) {
-        triggerChangeLayout(false);
-      }
-    });
+    return () => {
+      unsubKickScreenshare();
+      unsubScreenshareAttribute();
+    };
   }, []);
 
-  const executeRecordingQuery = (isScreenActive: boolean) => {
-    if (isScreenActive) {
-      console.log('screenshare: Executing presenter query');
-      // If screen share is not going on, start the screen share by executing the graphql query
-      executePresenterQuery(screenShareUid);
-    } else {
-      // If recording is already going on, stop the recording by executing the graphql query.
-      executeNormalQuery();
+  const ScreenshareStoppedCallback = () => {
+    setScreenshareActive(false);
+    console.log('STOPPED SHARING');
+    events.send(
+      EventNames.SCREENSHARE_ATTRIBUTE,
+      JSON.stringify({
+        action: EventActions.SCREENSHARE_STOPPED,
+        value: 0,
+      }),
+      PersistanceLevel.Sender,
+    );
+    setScreenShareData(prevState => {
+      return {
+        ...prevState,
+        [screenShareUid]: {
+          ...prevState[screenShareUid],
+          isActive: false,
+          ts: 0,
+        },
+      };
+    });
+    //if local user stopped the screenshare then change layout to grid
+    //if user pinned somebody then don't triggerlayout change
+    if (!pinnedUidRef.current.pinnedUid) {
+      triggerChangeLayout(false);
+    }
+    if (screenShareUid === pinnedUidRef.current.pinnedUid) {
+      triggerChangeLayout(false);
+      dispatch({
+        type: 'UserPin',
+        value: [0],
+      });
     }
   };
 
+  useEffect(() => {
+    // @ts-ignore
+    rtc.RtcEngineUnsafe.addListener(
+      'onScreenshareStopped',
+      ScreenshareStoppedCallback,
+    );
+  }, []);
+
   const stopUserScreenShare = () => {
-    if (!isScreenshareActive) return;
+    if (!isScreenshareActive) {
+      return;
+    }
     userScreenshare(false);
   };
   const startUserScreenshare = () => {
-    if (isScreenshareActive) return;
+    if (isScreenshareActive) {
+      return;
+    }
     userScreenshare(true);
   };
 
   const userScreenshare = async (isActive: boolean) => {
-    if (isRecordingActive) {
-      executeRecordingQuery(isActive);
-    }
-    console.log('screenshare query executed');
     try {
       // @ts-ignore
-      await rtc.RtcEngine.startScreenshare(
+      await rtc.RtcEngineUnsafe.startScreenshare(
         screenShareToken,
         channel,
         null,
         screenShareUid,
         appId,
-        rtc.RtcEngine as unknown as IAgoraRTC,
+        rtc.RtcEngineUnsafe as unknown as IAgoraRTC,
         encryption as unknown as any,
       );
       isActive && setScreenshareActive(true);
 
       if (isActive) {
         // 1. Set local state
-        setScreenShareData((prevState) => {
+        setScreenShareData(prevState => {
           return {
             ...prevState,
             [screenShareUid]: {
-              name: renderListRef.current.renderList[screenShareUid]?.name,
+              name: defaultContentRef.current.defaultContent[screenShareUid]
+                ?.name,
               isActive: true,
               ts: timeNow(),
             },
@@ -256,13 +314,22 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
           JSON.stringify({
             action: EventActions.SCREENSHARE_STARTED,
             value: timeNow(),
+            screenUidOfUser: screenShareUid,
           }),
-          EventPersistLevel.LEVEL2,
+          PersistanceLevel.Sender,
         );
       }
     } catch (e) {
       console.error("can't start the screen share", e);
-      executeNormalQuery();
+      Toast.show({
+        leadingIconName: 'alert',
+        type: 'error',
+        text1: toastHeading,
+        text2: toastSubHeading,
+        visibilityTime: 1000 * 10,
+        primaryBtn: null,
+        secondaryBtn: null,
+      });
     }
   };
 
@@ -272,6 +339,8 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
         isScreenshareActive,
         startUserScreenshare,
         stopUserScreenShare,
+        //@ts-ignore
+        ScreenshareStoppedCallback,
       }}>
       {props.children}
     </ScreenshareContext.Provider>

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

@@ -22,6 +22,8 @@ export const ScreenshareContext = createContext<ScreenshareContextInterface>({
   isScreenshareActive: false,
   startUserScreenshare: () => {},
   stopUserScreenShare: () => {},
+  //@ts-ignore
+  ScreenshareStoppedCallback: () => {},
 });
 
 const useScreenshare = createHook(ScreenshareContext);

package/template/src/subComponents/waiting-rooms/WaitingRoomControls.tsx

@@ -0,0 +1,85 @@
+import {StyleSheet, Text, View, ViewStyle} from 'react-native';
+import React, {useContext} from 'react';
+import TertiaryButton from '../../atoms/TertiaryButton';
+import PrimaryButton from '../../atoms/PrimaryButton';
+import ThemeConfig from '../../theme';
+import useWaitingRoomAPI from './useWaitingRoomAPI';
+import {DispatchContext, useLocalUid} from '../../../agora-rn-uikit';
+import events, {PersistanceLevel} from '../../rtm-events-api';
+import {EventNames} from '../../rtm-events';
+import Toast from '../../../react-native-toast-message';
+import {useWaitingRoomContext} from '../../../src/components/contexts/WaitingRoomContext';
+import {useString} from '../../../src/utils/useString';
+import {
+  peoplePanelWaitingRoomRequestApprovalBtnTxt,
+  peoplePanelWaitingRoomRequestDenyBtnTxt,
+} from '../../../src/language/default-labels/videoCallScreenLabels';
+
+const WaitingRoomButton = props => {
+  const {uid, screenUid, isAccept} = props;
+  const {approval} = useWaitingRoomAPI();
+  const localUid = useLocalUid();
+  const {dispatch} = useContext(DispatchContext);
+  const {waitingRoomRef} = useWaitingRoomContext();
+  const admintext = useString(peoplePanelWaitingRoomRequestApprovalBtnTxt)();
+  const denytext = useString(peoplePanelWaitingRoomRequestDenyBtnTxt)();
+  const buttonText = isAccept ? admintext : denytext;
+
+  const handleButtonClick = () => {
+    const approved = isAccept ? true : false;
+
+    const res = approval({
+      host_uid: localUid,
+      attendee_uid: uid,
+      attendee_screenshare_uid: screenUid,
+      approved: approved,
+    });
+
+    // hide Toast if approve/reject from panel
+    if (Toast.getToastId() === uid) {
+      Toast.hide();
+    }
+
+    dispatch({
+      type: 'UpdateRenderList',
+      value: [uid, {isInWaitingRoom: false}],
+    });
+
+    if (waitingRoomRef.current) {
+      waitingRoomRef.current[uid] = approved ? 'APPROVED' : 'REJECTED';
+    }
+
+    events.send(
+      EventNames.WAITING_ROOM_STATUS_UPDATE,
+      JSON.stringify({attendee_uid: uid, approved: isAccept}),
+      PersistanceLevel.None,
+    );
+  };
+
+  const ButtonComponent = isAccept ? PrimaryButton : TertiaryButton;
+  const buttonStyles = {
+    minWidth: 'auto',
+    borderRadius: ThemeConfig.BorderRadius.small,
+    paddingHorizontal: 13,
+    paddingVertical: isAccept ? 8 : 7,
+  };
+
+  return (
+    <View style={{flex: 1}}>
+      <ButtonComponent
+        containerStyle={buttonStyles as ViewStyle}
+        textStyle={{
+          fontWeight: '600',
+          fontSize: 12,
+          lineHeight: 12,
+          fontFamily: ThemeConfig.FontFamily.sansPro,
+          textTransform: 'capitalize',
+        }}
+        text={buttonText}
+        onPress={handleButtonClick}
+      />
+    </View>
+  );
+};
+
+export default WaitingRoomButton;

package/template/src/subComponents/waiting-rooms/useWaitingRoomAPI.ts

@@ -0,0 +1,75 @@
+import React from 'react';
+import StorageContext from '../../components/StorageContext';
+import {useRoomInfo} from '../../components/room-info/useRoomInfo';
+
+import events, {PersistanceLevel} from '../../rtm-events-api';
+import {EventNames} from '../../rtm-events';
+import useGetName from '../../utils/useGetName';
+import {useLocalUid} from '../../../agora-rn-uikit';
+import {useParams} from '../../components/Router';
+
+interface IuseWaitingRoomAPI {
+  request: (params: {
+    meetingPhrase?: string;
+    send_event: boolean;
+  }) => Promise<void>;
+  approval: (params: {
+    host_uid: number;
+    attendee_uid: number;
+    attendee_screenshare_uid?: number;
+    approved: boolean;
+  }) => Promise<void>;
+}
+
+const WAITING_ROOM_URL = `${$config.BACKEND_ENDPOINT}/v1/channel/join`;
+
+const useWaitingRoomAPI = (): IuseWaitingRoomAPI => {
+  const {store} = React.useContext(StorageContext);
+  const {phrase} = useParams<{phrase: string}>();
+  const {
+    data: {roomId, isHost},
+  } = useRoomInfo();
+
+  const apiCall = async (method: 'request' | 'approval', payload: string) => {
+    const response = await fetch(`${WAITING_ROOM_URL}/${method}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        authorization: store.token ? `Bearer ${store.token}` : '',
+      },
+      body: payload,
+    });
+    const res = await response.json();
+    return res;
+  };
+
+  const request = async ({meetingPhrase, send_event}) => {
+    const payload = JSON.stringify({
+      passphrase: meetingPhrase || phrase,
+      send_event: send_event,
+    });
+    const res = await apiCall('request', payload);
+    return res;
+  };
+
+  const approval = async ({
+    host_uid,
+    attendee_uid,
+    approved,
+    attendee_screenshare_uid,
+  }) => {
+    const payload = JSON.stringify({
+      passphrase: phrase,
+      host_uid: host_uid, //host id of approver,
+      attendee_uid: attendee_uid, //uid of whose request was approved,
+      attendee_screenshare_uid: attendee_screenshare_uid, // screenshare uid of attendee
+      approved: approved, //approval status,
+    });
+    const res = await apiCall('approval', payload);
+    return res;
+  };
+
+  return {request, approval};
+};
+
+export default useWaitingRoomAPI;

package/template/src/theme/index.ts

@@ -3,15 +3,26 @@ import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 const EmphasisOpacity = {
   high: 1,
   medium: 0.85,
+  low: 0.4,
   disabled: 0.4,
 };
 const EmphasisPlus = {
   high: '',
   medium: hexadecimalTransparency['85%'],
+  low: hexadecimalTransparency['40%'],
   disabled: hexadecimalTransparency['40%'],
 };
+export interface FontSizes {
+  extraLarge: number;
+  large: number;
+  medium: number;
+  normal: number;
+  small: number;
+  tiny: number;
+}
 const FontSize: {
   extraLarge: 32;
+  xLarge: 24;
   large: 20;
   medium: 18;
   normal: 16;
@@ -19,12 +30,14 @@ const FontSize: {
   tiny: 12;
 } = {
   extraLarge: 32,
+  xLarge: 24,
   large: 20,
   medium: 18,
   normal: 16,
   small: 14,
   tiny: 12,
 };
+
 const FontFamily = {
   sansPro: 'Source Sans Pro',
 };