agora-appbuilder-core 4.0.0-api.5 → 4.0.0-api.6

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

@@ -1,12 +1,12 @@
 /*
 ********************************************
  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';
@@ -24,7 +24,6 @@ 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,
@@ -33,23 +32,27 @@ import {
   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 {defaultContent, activeUids, lastJoinedUid, pinnedUid} = useContent();
+  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();
@@ -60,11 +63,18 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
 
   const defaultContentRef = useRef({defaultContent: defaultContent});
   const pinnedUidRef = useRef({pinnedUid: pinnedUid});
+  const secondaryPinnedUidRef = useRef({
+    secondaryPinnedUid: secondaryPinnedUid,
+  });
 
   useEffect(() => {
     pinnedUidRef.current.pinnedUid = pinnedUid;
   }, [pinnedUid]);
 
+  useEffect(() => {
+    secondaryPinnedUidRef.current.secondaryPinnedUid = secondaryPinnedUid;
+  }, [secondaryPinnedUid]);
+
   useEffect(() => {
     defaultContentRef.current.defaultContent = defaultContent;
   }, [defaultContent]);
@@ -85,7 +95,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 +105,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,87 +152,125 @@ 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.RtcEngineUnsafe.startScreenshare();
-    });
+    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;
 
-    events.on(EventNames.SCREENSHARE_ATTRIBUTE, (data) => {
-      const payload = JSON.parse(data.payload);
-      const action = payload.action;
-      const value = payload.value;
-
-      const screenUidOfUser =
-        defaultContentRef.current.defaultContent[data.sender].screenUid;
-      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 (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;
+            }
+          }
+        }
+      },
+    );
+
+    return () => {
+      unsubKickScreenshare();
+      unsubScreenshareAttribute();
+    };
   }, []);
 
+  const ScreenshareStoppedCallback = () => {
+    setScreenshareActive(false);
+    console.log('STOPPED SHARING');
+    executeNormalQuery();
+    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('ScreenshareStopped', () => {
-      setScreenshareActive(false);
-      console.log('STOPPED SHARING');
-      executeNormalQuery();
-      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);
-      }
-    });
+    rtc.RtcEngineUnsafe.addListener(
+      'ScreenshareStopped',
+      ScreenshareStoppedCallback,
+    );
   }, []);
 
   const executeRecordingQuery = (isScreenActive: boolean) => {
@@ -214,11 +285,15 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   };
 
   const stopUserScreenShare = () => {
-    if (!isScreenshareActive) return;
+    if (!isScreenshareActive) {
+      return;
+    }
     userScreenshare(false);
   };
   const startUserScreenshare = () => {
-    if (isScreenshareActive) return;
+    if (isScreenshareActive) {
+      return;
+    }
     userScreenshare(true);
   };
 
@@ -242,7 +317,7 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
 
       if (isActive) {
         // 1. Set local state
-        setScreenShareData((prevState) => {
+        setScreenShareData(prevState => {
           return {
             ...prevState,
             [screenShareUid]: {
@@ -259,6 +334,7 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
           JSON.stringify({
             action: EventActions.SCREENSHARE_STARTED,
             value: timeNow(),
+            screenUidOfUser: screenShareUid,
           }),
           PersistanceLevel.Sender,
         );
@@ -266,6 +342,15 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
     } 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,
+      });
     }
   };
 
@@ -275,6 +360,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

@@ -10,6 +10,14 @@ const EmphasisPlus = {
   medium: hexadecimalTransparency['85%'],
   disabled: hexadecimalTransparency['40%'],
 };
+export interface FontSizes {
+  extraLarge: number;
+  large: number;
+  medium: number;
+  normal: number;
+  small: number;
+  tiny: number;
+}
 const FontSize: {
   extraLarge: 32;
   large: 20;
@@ -25,6 +33,7 @@ const FontSize: {
   small: 14,
   tiny: 12,
 };
+
 const FontFamily = {
   sansPro: 'Source Sans Pro',
 };

package/template/src/utils/SdkEvents.ts

@@ -34,6 +34,20 @@ export interface userEventsMapInterface {
   'rtc-user-unpublished': (uid: UidType, trackType: 'audio' | 'video') => void;
   'rtc-user-joined': (uid: UidType) => void;
   'rtc-user-left': (uid: UidType) => void;
+  '_rtm-joined': (uid: UidType) => void;
+  'devices-selected-microphone-changed': (
+    deviceId: MediaDeviceInfo['deviceId'],
+  ) => void;
+  'devices-selected-camera-changed': (
+    deviceId: MediaDeviceInfo['deviceId'],
+  ) => void;
+  'devices-selected-speaker-changed': (
+    deviceId: MediaDeviceInfo['deviceId'],
+  ) => void;
+  'token-not-found': () => void;
+  'will-token-expire': () => void;
+  'did-token-expire': () => void;
+  'token-refreshed': () => void;
 }
 
 const SDKEvents = createNanoEvents<userEventsMapInterface>();

package/template/src/utils/SdkMethodEvents.ts

@@ -1,5 +1,25 @@
-import {SdkMethodEvents} from '../SDKAppWrapper';
 import {createNanoEvents, Emitter} from 'nanoevents';
+import {
+  CustomizationApiInterface,
+  RoomInfoContextInterface,
+} from 'customization-api';
+import {deviceId} from '../components/DeviceConfigure';
+
+export interface SdkMethodEvents {
+  customize: (customization: CustomizationApiInterface) => void;
+  join(
+    roomid: string | Partial<RoomInfoContextInterface['data']>,
+    skipPrecall?: boolean,
+    username?: string,
+  ): RoomInfoContextInterface['data'];
+  microphoneDevice: (deviceId: deviceId) => void;
+  speakerDevice: (deviceId: deviceId) => void;
+  cameraDevice: (deviceId: deviceId) => void;
+  muteAudio: (mute: boolean | ((currentMute: boolean) => boolean)) => void;
+  muteVideo: (mute: boolean | ((currentMute: boolean) => boolean)) => void;
+  login: (token: string) => void;
+  logout: () => void;
+}
 
 type EventParameterHelper<T extends keyof SdkMethodEvents> = Parameters<
   SdkMethodEvents[T]
@@ -51,11 +71,11 @@ class SDKMethodEvents {
       this.emitCache[event] = [res, rej, ...params] as any;
       this.emitter.emit(event, res, rej, ...params);
     })
-      .then((res) => {
+      .then(res => {
         delete this.emitCache[event];
         return res;
       })
-      .catch((e) => {
+      .catch(e => {
         delete this.emitCache[event];
         throw e;
       });