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

package/template/src/subComponents/livestream/controls/LocalRaiseHand.tsx

@@ -24,10 +24,10 @@ import {isMobileUA} from '../../../utils/common';
 import {IconButtonProps} from '../../../atoms/IconButton';
 import {useToolbarMenu} from '../../../utils/useMenu';
 import ToolbarMenuItem from '../../../atoms/ToolbarMenuItem';
+import {useActionSheet} from '../../../utils/useActionSheet';
+import {toolbarItemRaiseHandText} from '../../../language/default-labels/videoCallScreenLabels';
 
-interface LocalRaiseHandProps {
-  showLabel?: boolean;
-}
+interface LocalRaiseHandProps {}
 const LocalRaiseHand = (props: LocalRaiseHandProps) => {
   const {isToolbarMenuItem} = useToolbarMenu();
   const {audienceSendsRequest, audienceRecallsRequest, raiseHandList} =
@@ -35,11 +35,9 @@ const LocalRaiseHand = (props: LocalRaiseHandProps) => {
   const {rtcProps} = useContext(PropsContext);
   const {localUid} = useContext(ChatContext);
   const {activeUids} = useContent();
-  const {showLabel = $config.ICON_TEXT} = props;
-  //commented for v1 release
-  //const handStatusText = useString<boolean>('raiseHandButton');
-  const handStatusText = (toggle: boolean) =>
-    toggle ? 'Lower hand' : 'Raise Hand';
+  const {isOnActionSheet, showLabel} = useActionSheet();
+
+  const handStatusText = useString<boolean>(toolbarItemRaiseHandText);
   const isHandRasied = raiseHandList[localUid]?.raised === RaiseHandValue.TRUE;
   const iconButtonProps: IconButtonProps = {
     iconProps: {
@@ -53,8 +51,14 @@ const LocalRaiseHand = (props: LocalRaiseHandProps) => {
       base64: isMobileUA() ? true : false,
     },
     btnTextProps: {
-      text: showLabel ? handStatusText(isHandRasied) : '',
+      text: showLabel
+        ? handStatusText(isHandRasied)?.replace(
+            ' ',
+            isOnActionSheet ? '\n' : ' ',
+          )
+        : '',
       textColor: $config.FONT_COLOR,
+      numberOfLines: 2,
     },
     onPress: () => {
       if (isHandRasied) {
@@ -64,6 +68,26 @@ const LocalRaiseHand = (props: LocalRaiseHandProps) => {
       }
     },
   };
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
+  if (isOnActionSheet) {
+    // iconButtonProps.containerStyle = {
+    //   backgroundColor: $config.CARD_LAYER_2_COLOR,
+    //   width: 52,
+    //   height: 52,
+    //   borderRadius: 26,
+    //   justifyContent: 'center',
+    //   alignItems: 'center',
+    // };
+
+    iconButtonProps.btnTextProps.textStyle = {
+      color: $config.FONT_COLOR,
+      marginTop: 8,
+      fontSize: 12,
+      fontWeight: '400',
+      fontFamily: 'Source Sans Pro',
+      textAlign: 'center',
+    };
+  }
   return isToolbarMenuItem ? (
     <ToolbarMenuItem {...iconButtonProps} />
   ) : (

package/template/src/subComponents/livestream/controls/RemoteLiveStreamApprovedRequestRecall.tsx

@@ -11,6 +11,7 @@ const RemoteLiveStreamApprovedRequestRecall = (
   props: RemoteLiveStreamApprovedRequestRecallProps,
 ) => {
   return (
+    //@ts-ignore
     <IconButton
       onPress={() => {
         events.send(

package/template/src/subComponents/livestream/controls/RemoteLiveStreamRequestApprove.tsx

@@ -5,6 +5,8 @@ import LiveStreamContext from '../../../components/livestream';
 import PrimaryButton from '../../../atoms/PrimaryButton';
 import ThemeConfig from '../../../theme';
 import Toast from '../../../../react-native-toast-message';
+import {useString} from '../../../utils/useString';
+import {peoplePanelLivestreamingApprovalBtnText} from '../../../language/default-labels/videoCallScreenLabels';
 
 export interface RemoteLiveStreamControlProps {
   uid: UidType;
@@ -16,23 +18,25 @@ const RemoteLiveStreamRequestApprove = (
 ) => {
   const {uid, toastId} = props;
   const {hostApprovesRequestOfUID} = useContext(LiveStreamContext);
-
+  const btnText = useString(peoplePanelLivestreamingApprovalBtnText)();
   return (
-    <View style={{flex: 1}}>
+    <View>
       <PrimaryButton
         containerStyle={{
           minWidth: 'auto',
-          borderRadius: ThemeConfig.BorderRadius.small,
-          height: 38,
-          paddingHorizontal: 8,
+          paddingHorizontal: 13,
           paddingVertical: 8,
+          borderRadius: 4,
         }}
         textStyle={{
           fontWeight: '600',
           fontSize: 12,
+          lineHeight: 12,
+          fontFamily: ThemeConfig.FontFamily.sansPro,
+          textTransform: 'capitalize',
         }}
         disabled={!uid}
-        text={'Accept'}
+        text={btnText}
         onPress={() => {
           //Hiding the toast if its get approved in the participant panel
           if (Toast.getToastId() === toastId) {

package/template/src/subComponents/livestream/controls/RemoteLiveStreamRequestReject.tsx

@@ -4,6 +4,9 @@ import {PropsContext, UidType} from '../../../../agora-rn-uikit';
 import LiveStreamContext from '../../../components/livestream';
 import TertiaryButton from '../../../atoms/TertiaryButton';
 import Toast from '../../../../react-native-toast-message';
+import ThemeConfig from '../../../theme';
+import {useString} from '../../../utils/useString';
+import {peoplePanelLivestreamingDenyBtnText} from '../../../language/default-labels/videoCallScreenLabels';
 
 interface RemoteLiveStreamControlProps {
   uid: UidType;
@@ -13,26 +16,32 @@ interface RemoteLiveStreamControlProps {
 const RemoteLiveStreamRequestReject = (props: RemoteLiveStreamControlProps) => {
   const {uid, toastId} = props;
   const {hostRejectsRequestOfUID} = useContext(LiveStreamContext);
-
+  const denyBtntext = useString(peoplePanelLivestreamingDenyBtnText)();
   return (
-    <View style={{flex: 1}}>
-      <TertiaryButton
-        containerStyle={{
-          paddingHorizontal: 8,
-          paddingVertical: 8,
-          height: 38,
-        }}
-        disabled={!uid}
-        onPress={() => {
-          //Hiding the toast if its get rejected in the participant panel
-          if (Toast.getToastId() === toastId) {
-            Toast.hide();
-          }
-          hostRejectsRequestOfUID(uid);
-        }}
-        text={'DENY'}
-      />
-    </View>
+    <TertiaryButton
+      containerStyle={{
+        minWidth: 'auto',
+        paddingHorizontal: 13,
+        paddingVertical: 7,
+        borderRadius: 4,
+      }}
+      textStyle={{
+        fontWeight: '600',
+        fontSize: 12,
+        lineHeight: 12,
+        fontFamily: ThemeConfig.FontFamily.sansPro,
+        textTransform: 'capitalize',
+      }}
+      disabled={!uid}
+      onPress={() => {
+        //Hiding the toast if its get rejected in the participant panel
+        if (Toast.getToastId() === toastId) {
+          Toast.hide();
+        }
+        hostRejectsRequestOfUID(uid);
+      }}
+      text={denyBtntext}
+    />
   );
 };
 

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

@@ -30,6 +30,12 @@ import useRecordingLayoutQuery from './useRecordingLayoutQuery';
 import {useScreenContext} from '../../components/contexts/ScreenShareContext';
 import {useContent} from 'customization-api';
 import {trimText} from '../../utils/common';
+import {useRoomInfo} from 'customization-api';
+import {
+  videoRoomRecordingToastHeading,
+  videoRoomRecordingToastSubHeading,
+  videoRoomUserFallbackText,
+} from '../../language/default-labels/videoCallScreenLabels';
 
 export interface RecordingContextInterface {
   startRecording: () => void;
@@ -46,8 +52,16 @@ const RecordingContext = createContext<RecordingContextInterface>({
 });
 
 const START_RECORDING = gql`
-  mutation startRecordingSession($passphrase: String!, $secret: String) {
-    startRecordingSession(passphrase: $passphrase, secret: $secret)
+  mutation startRecordingSession(
+    $passphrase: String!
+    $secret: String
+    $config: recordingConfig!
+  ) {
+    startRecordingSession(
+      passphrase: $passphrase
+      secret: $secret
+      config: $config
+    )
   }
 `;
 
@@ -75,6 +89,7 @@ interface RecordingProviderProps {
   value: {
     setRecordingActive: React.Dispatch<SetStateAction<boolean>>;
     isRecordingActive: boolean;
+    callActive: boolean;
   };
 }
 
@@ -86,7 +101,10 @@ interface RecordingProviderProps {
 
 const RecordingProvider = (props: RecordingProviderProps) => {
   const {rtcProps} = useContext(PropsContext);
-  const {setRecordingActive, isRecordingActive} = props?.value;
+  const {setRecordingActive, isRecordingActive, callActive} = props?.value;
+  const {
+    data: {isHost},
+  } = useRoomInfo();
   const [inProgress, setInProgress] = useState(false);
   const [uidWhoStarted, setUidWhoStarted] = useState(0);
   const {defaultContent, activeUids} = useContent();
@@ -96,16 +114,18 @@ const RecordingProvider = (props: RecordingProviderProps) => {
   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 recordingStartedText = useString<boolean>(
+    videoRoomRecordingToastHeading,
+  );
+  const subheading = useString(videoRoomRecordingToastSubHeading);
+  const userlabel = useString(videoRoomUserFallbackText)();
+
   const {executePresenterQuery, executeNormalQuery} = useRecordingLayoutQuery();
   const {localUid} = useContext(ChatContext);
   const {screenShareData} = useScreenContext();
 
   React.useEffect(() => {
-    events.on(EventNames.RECORDING_ATTRIBUTE, (data) => {
+    events.on(EventNames.RECORDING_ATTRIBUTE, data => {
       const payload = JSON.parse(data.payload);
       const action = payload.action;
       const value = payload.value;
@@ -124,7 +144,7 @@ const RecordingProvider = (props: RecordingProviderProps) => {
           break;
       }
     });
-    () => {
+    return () => {
       events.off(EventNames.RECORDING_ATTRIBUTE);
     };
   }, []);
@@ -138,20 +158,27 @@ const RecordingProvider = (props: RecordingProviderProps) => {
      */
     if (prevRecordingState) {
       if (prevRecordingState?.isRecordingActive === isRecordingActive) return;
+
+      if ($config.ENABLE_WAITING_ROOM && !isHost && !callActive) {
+        return;
+      }
+
       Toast.show({
+        leadingIconName: 'recording',
         type: 'info',
         text1: recordingStartedText(isRecordingActive),
         text2: isRecordingActive
-          ? `This room is being recorded by ${
-              trimText(defaultContent[uidWhoStarted]?.name) || 'user'
-            }`
+          ? subheading(
+              trimText(defaultContent[uidWhoStarted]?.name) || userlabel,
+            )
           : '',
         visibilityTime: 3000,
         primaryBtn: null,
         secondaryBtn: null,
+        leadingIcon: null,
       });
     }
-  }, [isRecordingActive]);
+  }, [isRecordingActive, callActive, isHost]);
 
   const startRecording = () => {
     setInProgress(true);
@@ -163,10 +190,13 @@ const RecordingProvider = (props: RecordingProviderProps) => {
           rtcProps.encryption && rtcProps.encryption.key
             ? rtcProps.encryption.key
             : '',
+        config: {
+          resolution: 'SD360p',
+          trigger: 'AUTO',
+        },
       },
     })
-      .then((res) => {
-        console.log(res.data);
+      .then(res => {
         setInProgress(false);
         if (res.data.startRecordingSession === 'success') {
           /**
@@ -187,7 +217,7 @@ const RecordingProvider = (props: RecordingProviderProps) => {
           // 3. set the presenter mode if screen share is active
           // 3.a Get the most recent screenshare uid
           const sorted = Object.entries(screenShareData)
-            .filter((el) => el[1]?.ts && el[1].ts > 0 && el[1]?.isActive)
+            .filter(el => el[1]?.ts && el[1].ts > 0 && el[1]?.isActive)
             .sort((a, b) => b[1].ts - a[1].ts);
 
           const activeScreenshareUid = sorted.length > 0 ? sorted[0][0] : 0;
@@ -202,7 +232,7 @@ const RecordingProvider = (props: RecordingProviderProps) => {
           }
         }
       })
-      .catch((err) => {
+      .catch(err => {
         setInProgress(false);
         console.log(err);
       });
@@ -228,8 +258,7 @@ const RecordingProvider = (props: RecordingProviderProps) => {
       setInProgress(true);
       // If recording is already going on, stop the recording by executing the graphql query.
       stopRecordingQuery({variables: {passphrase: phrase}})
-        .then((res) => {
-          console.log(res.data);
+        .then(res => {
           setInProgress(false);
           if (res.data.stopRecordingSession === 'success') {
             /**
@@ -248,7 +277,7 @@ const RecordingProvider = (props: RecordingProviderProps) => {
             setRecordingActive(false);
           }
         })
-        .catch((err) => {
+        .catch(err => {
           setInProgress(false);
           console.log(err);
         });

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

@@ -47,7 +47,6 @@ function useRecordingLayoutQuery() {
   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.

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

@@ -19,8 +19,14 @@ import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
 import {PropsContext, ClientRole} from '../../../agora-rn-uikit';
 import {useLocalUserInfo, useRoomInfo} from 'customization-api';
 import useIsHandRaised from '../../utils/useIsHandRaised';
+import {isAndroid, isIOS} from '../../utils/common';
+import {useVideoCall} from '../../components/useVideoCall';
 import {useToolbarMenu} from '../../utils/useMenu';
 import ToolbarMenuItem from '../../atoms/ToolbarMenuItem';
+import {
+  livestreamingShareTooltipText,
+  toolbarItemShareText,
+} from '../../language/default-labels/videoCallScreenLabels';
 /**
  * A component to start and stop screen sharing on web clients.
  * Screen sharing is not yet implemented on mobile platforms.
@@ -29,11 +35,15 @@ import ToolbarMenuItem from '../../atoms/ToolbarMenuItem';
 
 export interface ScreenshareButtonProps {
   render?: (onPress: () => void, isScreenshareActive: boolean) => JSX.Element;
+  showLabel?: boolean;
+  isOnActionSheet?: boolean;
 }
 
 const ScreenshareButton = (props: ScreenshareButtonProps) => {
   const {isToolbarMenuItem} = useToolbarMenu();
   const {rtcProps} = useContext(PropsContext);
+  const {showLabel = $config.ICON_TEXT || false, isOnActionSheet = false} =
+    props;
   const {
     data: {isHost},
   } = useRoomInfo();
@@ -41,12 +51,23 @@ const ScreenshareButton = (props: ScreenshareButtonProps) => {
   const isHandRaised = useIsHandRaised();
   const {isScreenshareActive, startUserScreenshare, stopUserScreenShare} =
     useScreenshare();
-  //commented for v1 release
-  //const screenShareButton = useString('screenShareButton')();
+  const {setShowStartScreenSharePopup} = useVideoCall();
+  const screenShareButtonLabel = useString<boolean>(toolbarItemShareText);
+  const lstooltip = useString<boolean>(livestreamingShareTooltipText);
+  const onPress = () => {
+    if (isScreenshareActive) {
+      stopUserScreenShare();
+    } else {
+      if (isAndroid() || isIOS()) {
+        //native screen we need to stop user video before proceeding the screenshare
+        //so showing confirm popup to stop camera(if cam on ) and option to share audio
+        setShowStartScreenSharePopup(true);
+      } else {
+        startUserScreenshare();
+      }
+    }
+  };
 
-  const onPress = () =>
-    isScreenshareActive ? stopUserScreenShare() : startUserScreenshare();
-  const screenShareButton = isScreenshareActive ? 'Stop Share' : 'Share';
   let iconButtonProps: IconButtonProps = {
     iconProps: {
       name: isScreenshareActive ? 'stop-screen-share' : 'screen-share',
@@ -56,11 +77,11 @@ const ScreenshareButton = (props: ScreenshareButtonProps) => {
     },
     onPress,
     btnTextProps: {
-      text: $config.ICON_TEXT ? screenShareButton : '',
+      text: showLabel ? screenShareButtonLabel(isScreenshareActive) : '',
       textColor: $config.FONT_COLOR,
     },
   };
-
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
   if (
     rtcProps.role == ClientRole.Audience &&
     $config.EVENT_MODE &&
@@ -79,9 +100,7 @@ const ScreenshareButton = (props: ScreenshareButtonProps) => {
       ...iconButtonProps.iconProps,
       tintColor: $config.SEMANTIC_NEUTRAL,
     };
-    iconButtonProps.toolTipMessage = isHandRaised(local.uid)
-      ? 'Waiting for host to appove the request'
-      : 'Raise Hand in order to present';
+    iconButtonProps.toolTipMessage = lstooltip(isHandRaised(local.uid));
     iconButtonProps.disabled = true;
   }