agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

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,46 +18,69 @@ 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 {useLayout, useRender, useRtc} from 'customization-api';
+import {
+  controlMessageEnum,
+  useLayout,
+  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';
+import {LogSource, logger} from '../../logger/AppBuilderLogger';
 
 export const ScreenshareContextConsumer = ScreenshareContext.Consumer;
 
-export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
+export const ScreenshareConfigure = (props: {
+  children: React.ReactNode;
+  isRecordingActive: boolean;
+}) => {
+  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} = 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();
   const currentLayoutRef = useRef({currentLayout: currentLayout});
 
+  const {executeNormalQuery, executePresenterQuery} = useRecordingLayoutQuery();
+
   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(() => {
+    secondaryPinnedUidRef.current.secondaryPinnedUid = secondaryPinnedUid;
+  }, [secondaryPinnedUid]);
 
   useEffect(() => {
-    renderListRef.current.renderList = renderList;
-  }, [renderList]);
+    defaultContentRef.current.defaultContent = defaultContent;
+  }, [defaultContent]);
 
   useEffect(() => {
     currentLayoutRef.current.currentLayout = currentLayout;
@@ -75,7 +98,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;
         });
@@ -85,21 +108,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;
@@ -109,120 +155,195 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   };
 
   useEffect(() => {
-    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
-          triggerChangeLayout(false);
-          break;
-        default:
-          break;
-      }
-    });
+        if (data?.sender) {
+          let screenUidOfUser =
+            defaultContentRef.current.defaultContent[data?.sender]?.screenUid;
+          if (!screenUidOfUser) {
+            screenUidOfUser = payload?.screenUidOfUser;
+          }
+          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);
+    logger.debug(LogSource.Internals, 'SCREENSHARE', 'screenshare stopped.');
+    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.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
-      triggerChangeLayout(false);
-    });
+    rtc.RtcEngineUnsafe.addListener(
+      'onScreenshareStopped',
+      ScreenshareStoppedCallback,
+    );
   }, []);
 
   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
+      // If recording is going on, set the presenter query
+      logger.log(
+        LogSource.Internals,
+        'SCREENSHARE',
+        'Recording is going on set presenter query',
+      );
       executePresenterQuery(screenShareUid);
     } else {
-      // If recording is already going on, stop the recording by executing the graphql query.
+      logger.log(
+        LogSource.Internals,
+        'SCREENSHARE',
+        'Recording is NOT going on set normal query',
+      );
+      // If no recording is going on, set the normal query
       executeNormalQuery();
     }
   };
 
-  const stopUserScreenShare = () => {
-    if (!isScreenshareActive) return;
+  const stopScreenshare = () => {
+    if (!isScreenshareActive) {
+      return;
+    }
     userScreenshare(false);
   };
-  const startUserScreenshare = () => {
-    if (isScreenshareActive) return;
+  const startScreenshare = () => {
+    if (isScreenshareActive) {
+      return;
+    }
     userScreenshare(true);
   };
 
   const userScreenshare = async (isActive: boolean) => {
-    if (isRecordingActive) {
-      executeRecordingQuery(isActive);
-    }
-    console.log('screenshare query executed');
+    logger.log(
+      LogSource.Internals,
+      'SCREENSHARE',
+      `${isActive ? 'starting' : 'stopping'}  screenshare`,
+      {
+        channel,
+        screenShareUid,
+        encryption,
+      },
+    );
     try {
+      if (props.isRecordingActive) {
+        executeRecordingQuery(isActive);
+      }
       // @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,
+        {encoderConfig: '1080p_2', optimizationMode: 'detail'},
       );
       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(),
             },
@@ -234,13 +355,27 @@ 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();
+      logger.error(
+        LogSource.Internals,
+        'SCREENSHARE',
+        'failed to start screen share',
+        e,
+      );
+      Toast.show({
+        leadingIconName: 'alert',
+        type: 'error',
+        text1: toastHeading,
+        text2: toastSubHeading,
+        visibilityTime: 1000 * 10,
+        primaryBtn: null,
+        secondaryBtn: null,
+      });
     }
   };
 
@@ -248,8 +383,10 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
     <ScreenshareContext.Provider
       value={{
         isScreenshareActive,
-        startUserScreenshare,
-        stopUserScreenShare,
+        startScreenshare,
+        stopScreenshare,
+        //@ts-ignore
+        ScreenshareStoppedCallback,
       }}>
       {props.children}
     </ScreenshareContext.Provider>

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

@@ -14,14 +14,16 @@ import {createHook} from 'customization-implementation';
 
 export interface ScreenshareContextInterface {
   isScreenshareActive: boolean;
-  startUserScreenshare: () => void;
-  stopUserScreenShare: () => void;
+  startScreenshare: () => void;
+  stopScreenshare: () => void;
 }
 
 export const ScreenshareContext = createContext<ScreenshareContextInterface>({
   isScreenshareActive: false,
-  startUserScreenshare: () => {},
-  stopUserScreenShare: () => {},
+  startScreenshare: () => {},
+  stopScreenshare: () => {},
+  //@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;