agora-appbuilder-core 3.0.9 → 3.0.10

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

@@ -1,29 +1,36 @@
 import React, {useContext} from 'react';
 import {View} from 'react-native';
-import {BtnTemplate, PropsContext, UidType} from '../../../../agora-rn-uikit';
+import {PropsContext, UidType} from '../../../../agora-rn-uikit';
 import LiveStreamContext from '../../../components/livestream';
-import icons from '../../../assets/icons';
+import TertiaryButton from '../../../atoms/TertiaryButton';
+import Toast from '../../../../react-native-toast-message';
 
 interface RemoteLiveStreamControlProps {
   uid: UidType;
+  toastId: number;
 }
 
 const RemoteLiveStreamRequestReject = (props: RemoteLiveStreamControlProps) => {
-  const {uid} = props;
+  const {uid, toastId} = props;
   const {hostRejectsRequestOfUID} = useContext(LiveStreamContext);
-  const {styleProps} = useContext(PropsContext);
-  const {remoteBtnStyles} = styleProps || {};
-  const {liveStreamHostControlBtns} = remoteBtnStyles || {};
 
   return (
-    <View style={{...(liveStreamHostControlBtns as object)}}>
-      <BtnTemplate
+    <View style={{flex: 1}}>
+      <TertiaryButton
+        containerStyle={{
+          paddingHorizontal: 8,
+          paddingVertical: 8,
+          height: 38,
+        }}
         disabled={!uid}
-        icon={icons['crossCircleIcon']}
-        style={{...(liveStreamHostControlBtns as object)}}
         onPress={() => {
+          //Hiding the toast if its get rejected in the participant panel
+          if (Toast.getToastId() === toastId) {
+            Toast.hide();
+          }
           hostRejectsRequestOfUID(uid);
         }}
+        text={'DENY'}
       />
     </View>
   );

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

@@ -15,6 +15,7 @@ import React, {
   useContext,
   useEffect,
   useRef,
+  useState,
 } from 'react';
 import {gql, useMutation} from '@apollo/client';
 import {useParams} from '../../components/Router';
@@ -27,17 +28,21 @@ import events, {EventPersistLevel} from '../../rtm-events-api';
 import {EventActions, EventNames} from '../../rtm-events';
 import useRecordingLayoutQuery from './useRecordingLayoutQuery';
 import {useScreenContext} from '../../components/contexts/ScreenShareContext';
+import {useRender} from 'customization-api';
+import {trimText} from '../../utils/common';
 
 export interface RecordingContextInterface {
   startRecording: () => void;
   stopRecording: () => void;
   isRecordingActive: boolean;
+  inProgress: boolean;
 }
 
 const RecordingContext = createContext<RecordingContextInterface>({
   startRecording: () => {},
   stopRecording: () => {},
   isRecordingActive: false,
+  inProgress: false,
 });
 
 const START_RECORDING = gql`
@@ -82,6 +87,9 @@ interface RecordingProviderProps {
 const RecordingProvider = (props: RecordingProviderProps) => {
   const {rtcProps} = useContext(PropsContext);
   const {setRecordingActive, isRecordingActive} = props?.value;
+  const [inProgress, setInProgress] = useState(false);
+  const [uidWhoStarted, setUidWhoStarted] = useState(0);
+  const {renderList, activeUids} = useRender();
   const {phrase} = useParams<{phrase: string}>();
   const [startRecordingQuery] = useMutation(START_RECORDING);
   const [stopRecordingQuery] = useMutation(STOP_RECORDING);
@@ -101,14 +109,17 @@ const RecordingProvider = (props: RecordingProviderProps) => {
       const payload = JSON.parse(data.payload);
       const action = payload.action;
       const value = payload.value;
-
       switch (action) {
         case EventActions.RECORDING_STARTED:
+          setUidWhoStarted(parseInt(value));
           setRecordingActive(true);
           break;
         case EventActions.RECORDING_STOPPED:
           setRecordingActive(false);
           break;
+        case EventActions.RECORDING_STOP_REQUEST:
+          stopRecording();
+          break;
         default:
           break;
       }
@@ -128,14 +139,22 @@ const RecordingProvider = (props: RecordingProviderProps) => {
     if (prevRecordingState) {
       if (prevRecordingState?.isRecordingActive === isRecordingActive) return;
       Toast.show({
-        type: 'success',
+        type: 'info',
         text1: recordingStartedText(isRecordingActive),
-        visibilityTime: 1000,
+        text2: isRecordingActive
+          ? `This meeting is being recorded by ${
+              trimText(renderList[uidWhoStarted]?.name) || 'user'
+            }`
+          : '',
+        visibilityTime: 3000,
+        primaryBtn: null,
+        secondaryBtn: null,
       });
     }
   }, [isRecordingActive]);
 
   const startRecording = () => {
+    setInProgress(true);
     // If recording is not going on, start the recording by executing the graphql query
     startRecordingQuery({
       variables: {
@@ -148,6 +167,7 @@ const RecordingProvider = (props: RecordingProviderProps) => {
     })
       .then((res) => {
         console.log(res.data);
+        setInProgress(false);
         if (res.data.startRecordingSession === 'success') {
           /**
            * 1. Once the backend sucessfuly starts recording, send message
@@ -162,6 +182,7 @@ const RecordingProvider = (props: RecordingProviderProps) => {
             EventPersistLevel.LEVEL3,
           );
           // 2. set the local recording state to true to update the UI
+          setUidWhoStarted(localUid);
           setRecordingActive(true);
           // 3. set the presenter mode if screen share is active
           // 3.a Get the most recent screenshare uid
@@ -182,40 +203,71 @@ const RecordingProvider = (props: RecordingProviderProps) => {
         }
       })
       .catch((err) => {
+        setInProgress(false);
         console.log(err);
       });
   };
 
   const stopRecording = () => {
-    // If recording is already going on, stop the recording by executing the graphql query.
-    stopRecordingQuery({variables: {passphrase: phrase}})
-      .then((res) => {
-        console.log(res.data);
-        if (res.data.stopRecordingSession === 'success') {
-          /**
-           * 1. Once the backend sucessfuly starts recording, send message
-           * in the channel indicating that cloud recording is now inactive.
-           */
-          events.send(
-            EventNames.RECORDING_ATTRIBUTE,
-            JSON.stringify({
-              action: EventActions.RECORDING_STOPPED,
-              value: '',
-            }),
-            EventPersistLevel.LEVEL3,
-          );
-          // 2. set the local recording state to false to update the UI
-          setRecordingActive(false);
-        }
-      })
-      .catch((err) => {
-        console.log(err);
-      });
+    /**
+     * if condition added for below issue
+     *
+     * user 1 and user 2 in the call
+     * user 1 start the recording
+     * user 2 stops the recording
+     * user 2 join the call getting stop recording notification which is not needed
+     *
+     * solution
+     * case 1 - if recording is not started by the host then we will send level1 message to host who started the recording
+     * case 2 - if person who started the recording no longer available in the call then will stop the recording
+     */
+    if (
+      localUid === uidWhoStarted ||
+      activeUids.indexOf(uidWhoStarted) === -1
+    ) {
+      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);
+          setInProgress(false);
+          if (res.data.stopRecordingSession === 'success') {
+            /**
+             * 1. Once the backend sucessfuly starts recording, send message
+             * in the channel indicating that cloud recording is now inactive.
+             */
+            events.send(
+              EventNames.RECORDING_ATTRIBUTE,
+              JSON.stringify({
+                action: EventActions.RECORDING_STOPPED,
+                value: '',
+              }),
+              EventPersistLevel.LEVEL3,
+            );
+            // 2. set the local recording state to false to update the UI
+            setRecordingActive(false);
+          }
+        })
+        .catch((err) => {
+          setInProgress(false);
+          console.log(err);
+        });
+    } else {
+      events.send(
+        EventNames.RECORDING_ATTRIBUTE,
+        JSON.stringify({
+          action: EventActions.RECORDING_STOP_REQUEST,
+          value: '',
+        }),
+        EventPersistLevel.LEVEL1,
+      );
+    }
   };
 
   return (
     <RecordingContext.Provider
       value={{
+        inProgress,
         startRecording,
         stopRecording,
         isRecordingActive,

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

@@ -9,15 +9,16 @@
  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 ThemeConfig from '../../theme';
+import IconButton, {IconButtonProps} from '../../atoms/IconButton';
+import Styles from '../../components/styles';
 import {useString} from '../../utils/useString';
 import {useScreenshare} from './useScreenshare';
-import {
-  ButtonTemplateName,
-  useButtonTemplate,
-} from '../../utils/useButtonTemplate';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import {PropsContext, ClientRole} from '../../../agora-rn-uikit';
+import {useLocalUserInfo, useMeetingInfo} from 'customization-api';
+import useIsHandRaised from '../../utils/useIsHandRaised';
 /**
  * A component to start and stop screen sharing on web clients.
  * Screen sharing is not yet implemented on mobile platforms.
@@ -25,86 +26,67 @@ import {
  */
 
 export interface ScreenshareButtonProps {
-  buttonTemplateName?: ButtonTemplateName;
-  render?: (
-    onPress: () => void,
-    isScreenshareActive: boolean,
-    buttonTemplateName?: ButtonTemplateName,
-  ) => JSX.Element;
+  render?: (onPress: () => void, isScreenshareActive: boolean) => JSX.Element;
 }
 
 const ScreenshareButton = (props: ScreenshareButtonProps) => {
+  const {rtcProps} = useContext(PropsContext);
+  const {
+    data: {isHost},
+  } = useMeetingInfo();
+  const local = useLocalUserInfo();
+  const isHandRaised = useIsHandRaised();
   const {isScreenshareActive, startUserScreenshare, stopUserScreenShare} =
     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',
+  const screenShareButton = isScreenshareActive ? 'Stop Share' : 'Share';
+  let iconButtonProps: IconButtonProps = {
+    iconProps: {
+      name: isScreenshareActive ? 'stop-screen-share' : 'screen-share',
+      tintColor: isScreenshareActive
+        ? $config.SEMANTIC_ERROR
+        : $config.SECONDARY_ACTION_COLOR,
+    },
     onPress,
+    btnTextProps: {
+      text: $config.ICON_TEXT ? screenShareButton : '',
+      textColor: $config.FONT_COLOR,
+    },
   };
 
-  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;
+  if (
+    rtcProps.role == ClientRole.Audience &&
+    $config.EVENT_MODE &&
+    !$config.RAISE_HAND
+  ) {
+    return null;
+  }
+
+  if (
+    rtcProps.role == ClientRole.Audience &&
+    $config.EVENT_MODE &&
+    $config.RAISE_HAND &&
+    !isHost
+  ) {
+    iconButtonProps.iconProps = {
+      ...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.disabled = true;
   }
 
   return props?.render ? (
-    props.render(onPress, isScreenshareActive, buttonTemplateName)
+    props.render(onPress, isScreenshareActive)
   ) : (
-    <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;

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

@@ -27,7 +27,7 @@ import {filterObject} from '../../utils';
 
 export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   const {dispatch} = useRtc();
-  const {renderList, activeUids, lastJoinedUid} = useRender();
+  const {renderList, activeUids, lastJoinedUid, pinnedUid} = useRender();
   const isPinned = useRef(0);
   const {setScreenShareData, screenShareData} = useScreenContext();
   // commented for v1 release
@@ -41,6 +41,12 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   const renderListRef = useRef({renderList: renderList});
   const currentLayoutRef = useRef({currentLayout: currentLayout});
 
+  const pinnedUidRef = useRef({pinnedUid: pinnedUid});
+
+  useEffect(() => {
+    pinnedUidRef.current.pinnedUid = pinnedUid;
+  }, [pinnedUid]);
+
   useEffect(() => {
     renderListRef.current.renderList = renderList;
   }, [renderList]);
@@ -119,7 +125,10 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
             };
           });
           //if remote user started/stopped the screenshare then change the layout to pinned/grid
-          triggerChangeLayout(false);
+          //if user pinned somebody then don't triggerlayout change
+          if (!pinnedUidRef.current.pinnedUid) {
+            triggerChangeLayout(false);
+          }
           break;
         default:
           break;

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

@@ -26,7 +26,12 @@ 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,
+  useRender,
+  useRtc,
+} from 'customization-api';
 import {filterObject} from '../../utils';
 
 export const ScreenshareContextConsumer = ScreenshareContext.Consumer;
@@ -35,7 +40,7 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   const [isScreenshareActive, setScreenshareActive] = useState(false);
   const rtc = useRtc();
   const {dispatch} = rtc;
-  const {renderList, activeUids, lastJoinedUid} = useRender();
+  const {renderList, activeUids, lastJoinedUid, pinnedUid} = useRender();
   const isPinned = useRef(0);
   const {isRecordingActive} = useRecording();
   const {executeNormalQuery, executePresenterQuery} = useRecordingLayoutQuery();
@@ -54,6 +59,11 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
     useContext(PropsContext).rtcProps;
 
   const renderListRef = useRef({renderList: renderList});
+  const pinnedUidRef = useRef({pinnedUid: pinnedUid});
+
+  useEffect(() => {
+    pinnedUidRef.current.pinnedUid = pinnedUid;
+  }, [pinnedUid]);
 
   useEffect(() => {
     renderListRef.current.renderList = renderList;
@@ -109,6 +119,12 @@ 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;
@@ -141,7 +157,10 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
             };
           });
           //if remote user started/stopped the screenshare then change the layout to pinned/grid
-          triggerChangeLayout(false);
+          //if user pinned somebody then don't triggerlayout change
+          if (!pinnedUidRef.current.pinnedUid) {
+            triggerChangeLayout(false);
+          }
           break;
         default:
           break;
@@ -174,7 +193,10 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
         };
       });
       //if local user stopped the screenshare then change layout to grid
-      triggerChangeLayout(false);
+      //if user pinned somebody then don't triggerlayout change
+      if (!pinnedUidRef.current.pinnedUid) {
+        triggerChangeLayout(false);
+      }
     });
   }, []);
 

package/template/src/theme/index.ts

@@ -0,0 +1,46 @@
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+
+const EmphasisOpacity = {
+  high: 1,
+  medium: 0.85,
+  disabled: 0.4,
+};
+const EmphasisPlus = {
+  high: '',
+  medium: hexadecimalTransparency['85%'],
+  disabled: hexadecimalTransparency['40%'],
+};
+const FontSize: {
+  extraLarge: 32;
+  large: 20;
+  medium: 18;
+  normal: 16;
+  small: 14;
+  tiny: 12;
+} = {
+  extraLarge: 32,
+  large: 20,
+  medium: 18,
+  normal: 16,
+  small: 14,
+  tiny: 12,
+};
+const FontFamily = {
+  sansPro: 'Source Sans Pro',
+};
+
+const BorderRadius: {small: 4; medium: 8; large: 12; extraLarge: 20} = {
+  small: 4,
+  medium: 8,
+  large: 12,
+  extraLarge: 20,
+};
+
+const ThemeConfig = {
+  EmphasisOpacity,
+  EmphasisPlus,
+  FontSize,
+  FontFamily,
+  BorderRadius,
+};
+export default ThemeConfig;

package/template/src/utils/PlatformWrapper.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {useState} from 'react';
+import {isWebInternal} from './common';
+
+const PlatformWrapper = ({children}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  return isWebInternal() ? (
+    <div
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}>
+      {children(isHovered)}
+    </div>
+  ) : (
+    <>{children(false)}</>
+  );
+};
+export default PlatformWrapper;