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

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

@@ -3,6 +3,8 @@ import {useParams} from '../../components/Router';
 
 import {gql, useMutation} from '@apollo/client';
 import {UidType} from '../../../agora-rn-uikit';
+import {logger, LogSource} from '../../logger/AppBuilderLogger';
+import getUniqueID from '../../utils/getUniqueID';
 
 const SET_PRESENTER = gql`
   mutation setPresenter($uid: Int!, $passphrase: String!) {
@@ -29,25 +31,88 @@ function useRecordingLayoutQuery() {
    * https://docs.agora.io/en/cloud-recording/cloud_recording_layout?platform=RESTful
    */
   const executePresenterQuery = (screenShareUid: UidType) => {
+    const requestId = getUniqueID();
+    const startReqTs = Date.now();
     setPresenterQuery({
       variables: {
         uid: screenShareUid,
         passphrase: phrase,
       },
+      context: {
+        headers: {
+          'X-Request-Id': requestId,
+          'X-Session-Id': logger.getSessionId(),
+        },
+      },
     })
-      .then((res) => {
-        if (res.data.setPresenter === 'success') {
+      .then(res => {
+        if (res?.data?.setPresenter === 'success') {
+          const endReqTs = Date.now();
+          logger.log(
+            LogSource.Internals,
+            'RECORDING',
+            'setPresenterQuery success',
+            {
+              responseData: res,
+              startReqTs,
+              endReqTs,
+              latency: endReqTs - startReqTs,
+              requestId,
+            },
+          );
         }
       })
-      .catch((err) => {
-        console.log(err);
+      .catch(error => {
+        const endReqTs = Date.now();
+        logger.error(
+          LogSource.Internals,
+          'RECORDING',
+          'setPresenterQuery failure',
+          error,
+          {
+            networkError: {
+              name: error?.networkError?.name,
+              //@ts-ignore
+              code: error?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: error?.networkError?.result?.error?.message,
+            },
+            startReqTs,
+            endReqTs,
+            latency: endReqTs - startReqTs,
+            requestId,
+          },
+        );
       });
   };
 
   const executeNormalQuery = () => {
-    setNormalQuery({variables: {passphrase: phrase}})
-      .then((res) => {
-        if (res.data.stopRecordingSession === 'success') {
+    const requestId = getUniqueID();
+    const startReqTs = Date.now();
+    setNormalQuery({
+      variables: {passphrase: phrase},
+      context: {
+        headers: {
+          'X-Request-Id': requestId,
+          'X-Session-Id': logger.getSessionId(),
+        },
+      },
+    })
+      .then(res => {
+        if (res?.data?.stopRecordingSession === 'success') {
+          const endReqTs = Date.now();
+          logger.log(
+            LogSource.Internals,
+            'RECORDING',
+            'executeNormalQuery success',
+            {
+              responseData: res,
+              startReqTs,
+              endReqTs,
+              latency: endReqTs - startReqTs,
+              requestId,
+            },
+          );
           // 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);
@@ -55,8 +120,27 @@ function useRecordingLayoutQuery() {
           // setScreenshareActive(false);
         }
       })
-      .catch((err) => {
-        console.log(err);
+      .catch(error => {
+        const endReqTs = Date.now();
+        logger.error(
+          LogSource.Internals,
+          'RECORDING',
+          'executeNormalQuery failure',
+          error,
+          {
+            networkError: {
+              name: error?.networkError?.name,
+              //@ts-ignore
+              code: error?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: error?.networkError?.result?.error?.message,
+            },
+            startReqTs,
+            endReqTs,
+            latency: endReqTs - startReqTs,
+            requestId,
+          },
+        );
       });
   };
 

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

@@ -9,15 +9,22 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React from 'react';
-import {StyleSheet} from 'react-native';
-import {BtnTemplate, BtnTemplateInterface} from '../../../agora-rn-uikit';
+import React, {useContext} from 'react';
+import IconButton, {IconButtonProps} from '../../atoms/IconButton';
 import {useString} from '../../utils/useString';
 import {useScreenshare} from './useScreenshare';
+import {PropsContext, ClientRoleType} 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 {
-  ButtonTemplateName,
-  useButtonTemplate,
-} from '../../utils/useButtonTemplate';
+  livestreamingShareTooltipText,
+  toolbarItemShareText,
+} from '../../language/default-labels/videoCallScreenLabels';
+import {useToolbarProps} from '../../atoms/ToolbarItem';
 /**
  * A component to start and stop screen sharing on web clients.
  * Screen sharing is not yet implemented on mobile platforms.
@@ -25,86 +32,86 @@ import {
  */
 
 export interface ScreenshareButtonProps {
-  buttonTemplateName?: ButtonTemplateName;
-  render?: (
-    onPress: () => void,
-    isScreenshareActive: boolean,
-    buttonTemplateName?: ButtonTemplateName,
-  ) => JSX.Element;
+  render?: (onPress: () => void, isScreenshareActive: boolean) => JSX.Element;
+  showLabel?: boolean;
+  isOnActionSheet?: boolean;
 }
 
 const ScreenshareButton = (props: ScreenshareButtonProps) => {
-  const {isScreenshareActive, startUserScreenshare, stopUserScreenShare} =
+  const {label = null, onPress: onPressCustom = null} = useToolbarProps();
+  const {isToolbarMenuItem} = useToolbarMenu();
+  const {rtcProps} = useContext(PropsContext);
+  const {showLabel = $config.ICON_TEXT || false, isOnActionSheet = false} =
+    props;
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+  const local = useLocalUserInfo();
+  const isHandRaised = useIsHandRaised();
+  const {isScreenshareActive, startScreenshare, stopScreenshare} =
     useScreenshare();
-  //commented for v1 release
-  //const screenShareButton = useString('screenShareButton')();
-  const screenShareButton = 'Share';
-  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
-  const {buttonTemplateName = defaultTemplateValue} = props;
-  const onPress = () =>
-    isScreenshareActive ? stopUserScreenShare() : startUserScreenshare();
-  let btnTemplateProps: BtnTemplateInterface = {
-    name: isScreenshareActive ? 'screenshareOffIcon' : 'screenshareIcon',
-    onPress,
+  const {setShowStartScreenSharePopup} = useVideoCall();
+  const screenShareButtonLabel = useString<boolean>(toolbarItemShareText);
+  const lstooltip = useString<boolean>(livestreamingShareTooltipText);
+  const onPress = () => {
+    if (isScreenshareActive) {
+      stopScreenshare();
+    } else {
+      if (isAndroid() || isIOS()) {
+        //native screen we need to ask user to stop all coming video before proceeding the screenshare
+        //so showing confirm popup to stop incoming video and option to share audio
+        setShowStartScreenSharePopup(true);
+      } else {
+        startScreenshare();
+      }
+    }
   };
 
-  if (buttonTemplateName === ButtonTemplateName.topBar) {
-    btnTemplateProps.style = isScreenshareActive
-      ? (style.activeBtn as Object)
-      : (style.nonActiveBtn as Object);
-  } else {
-    btnTemplateProps.btnText = screenShareButton;
-    btnTemplateProps.style = isScreenshareActive
-      ? style.greenLocalButton
-      : style.localButton;
+  let iconButtonProps: IconButtonProps = {
+    iconProps: {
+      name: isScreenshareActive ? 'stop-screen-share' : 'screen-share',
+      tintColor: isScreenshareActive
+        ? $config.SEMANTIC_ERROR
+        : $config.SECONDARY_ACTION_COLOR,
+    },
+    onPress: onPressCustom || onPress,
+    btnTextProps: {
+      text: showLabel
+        ? label || screenShareButtonLabel(isScreenshareActive)
+        : '',
+      textColor: $config.FONT_COLOR,
+    },
+  };
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
+  if (
+    rtcProps.role == ClientRoleType.ClientRoleAudience &&
+    $config.EVENT_MODE &&
+    !$config.RAISE_HAND
+  ) {
+    return null;
+  }
+
+  if (
+    rtcProps.role == ClientRoleType.ClientRoleAudience &&
+    $config.EVENT_MODE &&
+    $config.RAISE_HAND &&
+    !isHost
+  ) {
+    iconButtonProps.iconProps = {
+      ...iconButtonProps.iconProps,
+      tintColor: $config.SEMANTIC_NEUTRAL,
+    };
+    iconButtonProps.toolTipMessage = lstooltip(isHandRaised(local.uid));
+    iconButtonProps.disabled = true;
   }
 
   return props?.render ? (
-    props.render(onPress, isScreenshareActive, buttonTemplateName)
+    props.render(onPress, isScreenshareActive)
+  ) : isToolbarMenuItem ? (
+    <ToolbarMenuItem {...iconButtonProps} />
   ) : (
-    <BtnTemplate {...btnTemplateProps} />
+    <IconButton {...iconButtonProps} />
   );
 };
 
-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',
-  },
-  activeBtn: {
-    backgroundColor: '#4BEB5B',
-    borderRadius: 20,
-    borderColor: '#F86051',
-    width: '100%',
-    height: '100%',
-    resizeMode: 'contain',
-  },
-  nonActiveBtn: {
-    width: '100%',
-    height: '100%',
-    resizeMode: 'contain',
-  },
-  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;