agora-appbuilder-core 3.0.9 → 4.0.0-api.1

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';
@@ -23,21 +24,25 @@ import Toast from '../../../react-native-toast-message';
 import {createHook} from 'customization-implementation';
 import {useString} from '../../utils/useString';
 import ChatContext from '../../components/ChatContext';
-import events, {EventPersistLevel} from '../../rtm-events-api';
+import events, {PersistanceLevel} from '../../rtm-events-api';
 import {EventActions, EventNames} from '../../rtm-events';
 import useRecordingLayoutQuery from './useRecordingLayoutQuery';
 import {useScreenContext} from '../../components/contexts/ScreenShareContext';
+import {useContent} 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 {defaultContent, activeUids} = useContent();
   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 room is being recorded by ${
+              trimText(defaultContent[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
@@ -159,9 +179,10 @@ const RecordingProvider = (props: RecordingProviderProps) => {
               action: EventActions.RECORDING_STARTED,
               value: `${localUid}`,
             }),
-            EventPersistLevel.LEVEL3,
+            PersistanceLevel.Session,
           );
           // 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: '',
+              }),
+              PersistanceLevel.Session,
+            );
+            // 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: '',
+        }),
+        PersistanceLevel.None,
+      );
+    }
   };
 
   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, useRoomInfo} 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},
+  } = useRoomInfo();
+  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

@@ -9,9 +9,9 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useEffect, useRef} from 'react';
+import React, {useContext, useEffect, useRef} from 'react';
 import KeepAwake from 'react-native-keep-awake';
-import {UidType} from '../../../agora-rn-uikit';
+import {DispatchContext, UidType} from '../../../agora-rn-uikit';
 import {
   getGridLayoutName,
   getPinnedLayoutName,
@@ -22,12 +22,12 @@ import {useScreenContext} from '../../components/contexts/ScreenShareContext';
 import {useString} from '../../utils/useString';
 import events from '../../rtm-events-api';
 import {EventNames, EventActions} from '../../rtm-events';
-import {useLayout, useRender, useRtc} from 'customization-api';
+import {useLayout, useContent} from 'customization-api';
 import {filterObject} from '../../utils';
 
 export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
-  const {dispatch} = useRtc();
-  const {renderList, activeUids, lastJoinedUid} = useRender();
+  const {dispatch} = useContext(DispatchContext);
+  const {defaultContent, activeUids, lastJoinedUid, pinnedUid} = useContent();
   const isPinned = useRef(0);
   const {setScreenShareData, screenShareData} = useScreenContext();
   // commented for v1 release
@@ -38,12 +38,18 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   const setPinnedLayout = useSetPinnedLayout();
   const changeLayout = useChangeDefaultLayout();
   const {currentLayout} = useLayout();
-  const renderListRef = useRef({renderList: renderList});
+  const defaultContentRef = useRef({defaultContent: defaultContent});
   const currentLayoutRef = useRef({currentLayout: currentLayout});
 
+  const pinnedUidRef = useRef({pinnedUid: pinnedUid});
+
+  useEffect(() => {
+    pinnedUidRef.current.pinnedUid = pinnedUid;
+  }, [pinnedUid]);
+
   useEffect(() => {
-    renderListRef.current.renderList = renderList;
-  }, [renderList]);
+    defaultContentRef.current.defaultContent = defaultContent;
+  }, [defaultContent]);
 
   useEffect(() => {
     currentLayoutRef.current.currentLayout = currentLayout;
@@ -93,14 +99,15 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
       const value = payload.value;
 
       const screenUidOfUser =
-        renderListRef.current.renderList[data.sender].screenUid;
+        defaultContentRef.current.defaultContent[data.sender].screenUid;
       switch (action) {
         case EventActions.SCREENSHARE_STARTED:
           setScreenShareData((prevState) => {
             return {
               ...prevState,
               [screenUidOfUser]: {
-                name: renderListRef.current.renderList[screenUidOfUser]?.name,
+                name: defaultContentRef.current.defaultContent[screenUidOfUser]
+                  ?.name,
                 isActive: true,
                 ts: value || 0,
               },
@@ -112,14 +119,18 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
             return {
               ...prevState,
               [screenUidOfUser]: {
-                name: renderListRef.current.renderList[screenUidOfUser]?.name,
+                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
-          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

@@ -10,7 +10,7 @@
 *********************************************
 */
 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,
@@ -20,22 +20,27 @@ import {
 } 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';
 
 export const ScreenshareContextConsumer = ScreenshareContext.Consumer;
 
 export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   const [isScreenshareActive, setScreenshareActive] = useState(false);
+  const {dispatch} = useContext(DispatchContext);
   const rtc = useRtc();
-  const {dispatch} = rtc;
-  const {renderList, activeUids, lastJoinedUid} = useRender();
+  const {defaultContent, activeUids, lastJoinedUid, pinnedUid} = useContent();
   const isPinned = useRef(0);
   const {isRecordingActive} = useRecording();
   const {executeNormalQuery, executePresenterQuery} = useRecordingLayoutQuery();
@@ -53,11 +58,16 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   const {channel, appId, screenShareUid, screenShareToken, encryption} =
     useContext(PropsContext).rtcProps;
 
-  const renderListRef = useRef({renderList: renderList});
+  const defaultContentRef = useRef({defaultContent: defaultContent});
+  const pinnedUidRef = useRef({pinnedUid: pinnedUid});
+
+  useEffect(() => {
+    pinnedUidRef.current.pinnedUid = pinnedUid;
+  }, [pinnedUid]);
 
   useEffect(() => {
-    renderListRef.current.renderList = renderList;
-  }, [renderList]);
+    defaultContentRef.current.defaultContent = defaultContent;
+  }, [defaultContent]);
 
   useEffect(() => {
     currentLayoutRef.current.currentLayout = currentLayout;
@@ -109,20 +119,27 @@ 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();
+    });
+
     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;
+        defaultContentRef.current.defaultContent[data.sender].screenUid;
       switch (action) {
         case EventActions.SCREENSHARE_STARTED:
           setScreenShareData((prevState) => {
             return {
               ...prevState,
               [screenUidOfUser]: {
-                name: renderListRef.current.renderList[screenUidOfUser]?.name,
+                name: defaultContentRef.current.defaultContent[screenUidOfUser]
+                  ?.name,
                 isActive: true,
                 ts: value || 0,
               },
@@ -134,14 +151,18 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
             return {
               ...prevState,
               [screenUidOfUser]: {
-                name: renderListRef.current.renderList[screenUidOfUser]?.name,
+                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
-          triggerChangeLayout(false);
+          //if user pinned somebody then don't triggerlayout change
+          if (!pinnedUidRef.current.pinnedUid) {
+            triggerChangeLayout(false);
+          }
           break;
         default:
           break;
@@ -151,7 +172,7 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
 
   useEffect(() => {
     // @ts-ignore
-    rtc.RtcEngine.addListener('ScreenshareStopped', () => {
+    rtc.RtcEngineUnsafe.addListener('ScreenshareStopped', () => {
       setScreenshareActive(false);
       console.log('STOPPED SHARING');
       executeNormalQuery();
@@ -161,7 +182,7 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
           action: EventActions.SCREENSHARE_STOPPED,
           value: 0,
         }),
-        EventPersistLevel.LEVEL2,
+        PersistanceLevel.Sender,
       );
       setScreenShareData((prevState) => {
         return {
@@ -174,7 +195,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);
+      }
     });
   }, []);
 
@@ -205,13 +229,13 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
     console.log('screenshare query executed');
     try {
       // @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,
       );
       isActive && setScreenshareActive(true);
@@ -222,7 +246,8 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
           return {
             ...prevState,
             [screenShareUid]: {
-              name: renderListRef.current.renderList[screenShareUid]?.name,
+              name: defaultContentRef.current.defaultContent[screenShareUid]
+                ?.name,
               isActive: true,
               ts: timeNow(),
             },
@@ -235,7 +260,7 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
             action: EventActions.SCREENSHARE_STARTED,
             value: timeNow(),
           }),
-          EventPersistLevel.LEVEL2,
+          PersistanceLevel.Sender,
         );
       }
     } catch (e) {