agora-appbuilder-core 3.0.10 → 3.0.12

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

@@ -10,51 +10,46 @@
 *********************************************
 */
 import React, {useContext} from 'react';
+import {StyleSheet} from 'react-native';
 import LiveStreamContext, {
   RaiseHandValue,
 } from '../../../components/livestream';
+import {PropsContext} from '../../../../agora-rn-uikit';
+import {BtnTemplate} from '../../../../agora-rn-uikit';
+import icons from '../../../assets/icons';
 import {useString} from '../../../utils/useString';
-import Styles from '../../../components/styles';
 import ChatContext from '../../../components/ChatContext';
-import IconButton from '../../../atoms/IconButton';
-import ThemeConfig from '../../../theme';
-import {ClientRole, PropsContext} from '../../../../agora-rn-uikit';
-import {useRender} from 'customization-api';
-import {isMobileUA} from '../../../utils/common';
 
-interface LocalRaiseHandProps {
-  showLabel?: boolean;
-}
-const LocalRaiseHand = (props: LocalRaiseHandProps) => {
+const LocalRaiseHand = () => {
+  const {styleProps} = useContext(PropsContext);
   const {audienceSendsRequest, audienceRecallsRequest, raiseHandList} =
     useContext(LiveStreamContext);
-  const {rtcProps} = useContext(PropsContext);
   const {localUid} = useContext(ChatContext);
-  const {activeUids} = useRender();
-  const {showLabel = $config.ICON_TEXT} = props;
+  const {localBtnStyles} = styleProps || {};
+  const {theme} = styleProps || {};
+  const {muteLocalAudio} = localBtnStyles || {};
   //commented for v1 release
   //const handStatusText = useString<boolean>('raiseHandButton');
   const handStatusText = (toggle: boolean) =>
     toggle ? 'Lower hand' : 'Raise Hand';
-  const isHandRasied = raiseHandList[localUid]?.raised === RaiseHandValue.TRUE;
   return (
-    <IconButton
-      iconProps={{
-        name: isHandRasied ? 'lower-hand' : 'raise-hand',
-        tintColor: isHandRasied
-          ? $config.PRIMARY_ACTION_TEXT_COLOR
-          : $config.SECONDARY_ACTION_COLOR,
-        iconBackgroundColor: isHandRasied
-          ? $config.PRIMARY_ACTION_BRAND_COLOR
-          : '',
-        base64: isMobileUA() ? true : false,
-      }}
-      btnTextProps={{
-        text: showLabel ? handStatusText(isHandRasied) : '',
-        textColor: $config.FONT_COLOR,
+    <BtnTemplate
+      icon={icons['raiseHandIcon']}
+      btnText={handStatusText(
+        raiseHandList[localUid]?.raised === RaiseHandValue.TRUE,
+      )}
+      color={
+        raiseHandList[localUid]?.raised === RaiseHandValue.TRUE
+          ? '#FD0845'
+          : theme
+      }
+      style={{
+        ...style.localBtn,
+        ...(localBtnStyles as object),
+        ...(muteLocalAudio as object),
       }}
       onPress={() => {
-        if (isHandRasied) {
+        if (raiseHandList[localUid]?.raised === RaiseHandValue.TRUE) {
           audienceRecallsRequest();
         } else {
           audienceSendsRequest();
@@ -64,4 +59,13 @@ const LocalRaiseHand = (props: LocalRaiseHandProps) => {
   );
 };
 
+const style = StyleSheet.create({
+  localBtn: {
+    borderRadius: 23,
+    borderWidth: 4 * StyleSheet.hairlineWidth,
+    borderColor: '#007aff',
+    backgroundColor: '#007aff',
+  },
+});
+
 export default LocalRaiseHand;

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import IconButton from '../../../atoms/IconButton';
-import {UidType} from '../../../../agora-rn-uikit';
+import {BtnTemplate, UidType} from '../../../../agora-rn-uikit';
 import {LiveStreamControlMessageEnum} from '../../../components/livestream';
+import icons from '../../../assets/icons';
 import events, {EventPersistLevel} from '../../../rtm-events-api';
 
 export interface RemoteLiveStreamApprovedRequestRecallProps {
@@ -11,7 +11,8 @@ const RemoteLiveStreamApprovedRequestRecall = (
   props: RemoteLiveStreamApprovedRequestRecallProps,
 ) => {
   return (
-    <IconButton
+    <BtnTemplate
+      style={{width: 24, height: 22}}
       onPress={() => {
         events.send(
           LiveStreamControlMessageEnum.raiseHandRequestRejected,
@@ -20,9 +21,8 @@ const RemoteLiveStreamApprovedRequestRecall = (
           props.uid,
         );
       }}
-      // color="#FD0845"
-      //todo hari
-      //icon={Icons['demoteIcon']}
+      color="#FD0845"
+      icon={icons['demoteIcon']}
     />
   );
 };

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

@@ -1,43 +1,30 @@
 import React, {useContext} from 'react';
 import {View} from 'react-native';
-import {PropsContext, UidType} from '../../../../agora-rn-uikit';
+import {BtnTemplate, PropsContext, UidType} from '../../../../agora-rn-uikit';
 import LiveStreamContext from '../../../components/livestream';
-import PrimaryButton from '../../../atoms/PrimaryButton';
-import ThemeConfig from '../../../theme';
-import Toast from '../../../../react-native-toast-message';
+import icons from '../../../assets/icons';
 
 export interface RemoteLiveStreamControlProps {
   uid: UidType;
-  toastId: number;
 }
 
 const RemoteLiveStreamRequestApprove = (
   props: RemoteLiveStreamControlProps,
 ) => {
-  const {uid, toastId} = props;
+  const {uid} = props;
   const {hostApprovesRequestOfUID} = useContext(LiveStreamContext);
+  const {styleProps} = useContext(PropsContext);
+  const {remoteBtnStyles} = styleProps || {};
+
+  const {liveStreamHostControlBtns} = remoteBtnStyles || {};
 
   return (
-    <View style={{flex: 1}}>
-      <PrimaryButton
-        containerStyle={{
-          minWidth: 'auto',
-          borderRadius: ThemeConfig.BorderRadius.small,
-          height: 38,
-          paddingHorizontal: 8,
-          paddingVertical: 8,
-        }}
-        textStyle={{
-          fontWeight: '600',
-          fontSize: 12,
-        }}
+    <View style={{...(liveStreamHostControlBtns as object), marginRight: 15}}>
+      <BtnTemplate
         disabled={!uid}
-        text={'Accept'}
+        icon={icons['checkCircleIcon']}
+        style={{...(liveStreamHostControlBtns as object)}}
         onPress={() => {
-          //Hiding the toast if its get approved in the participant panel
-          if (Toast.getToastId() === toastId) {
-            Toast.hide();
-          }
           hostApprovesRequestOfUID(uid);
         }}
       />

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

@@ -1,36 +1,29 @@
 import React, {useContext} from 'react';
 import {View} from 'react-native';
-import {PropsContext, UidType} from '../../../../agora-rn-uikit';
+import {BtnTemplate, PropsContext, UidType} from '../../../../agora-rn-uikit';
 import LiveStreamContext from '../../../components/livestream';
-import TertiaryButton from '../../../atoms/TertiaryButton';
-import Toast from '../../../../react-native-toast-message';
+import icons from '../../../assets/icons';
 
 interface RemoteLiveStreamControlProps {
   uid: UidType;
-  toastId: number;
 }
 
 const RemoteLiveStreamRequestReject = (props: RemoteLiveStreamControlProps) => {
-  const {uid, toastId} = props;
+  const {uid} = props;
   const {hostRejectsRequestOfUID} = useContext(LiveStreamContext);
+  const {styleProps} = useContext(PropsContext);
+  const {remoteBtnStyles} = styleProps || {};
+  const {liveStreamHostControlBtns} = remoteBtnStyles || {};
 
   return (
-    <View style={{flex: 1}}>
-      <TertiaryButton
-        containerStyle={{
-          paddingHorizontal: 8,
-          paddingVertical: 8,
-          height: 38,
-        }}
+    <View style={{...(liveStreamHostControlBtns as object)}}>
+      <BtnTemplate
         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,7 +15,6 @@ import React, {
   useContext,
   useEffect,
   useRef,
-  useState,
 } from 'react';
 import {gql, useMutation} from '@apollo/client';
 import {useParams} from '../../components/Router';
@@ -28,21 +27,17 @@ 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`
@@ -87,9 +82,6 @@ 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);
@@ -109,17 +101,14 @@ 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;
       }
@@ -139,22 +128,14 @@ const RecordingProvider = (props: RecordingProviderProps) => {
     if (prevRecordingState) {
       if (prevRecordingState?.isRecordingActive === isRecordingActive) return;
       Toast.show({
-        type: 'info',
+        type: 'success',
         text1: recordingStartedText(isRecordingActive),
-        text2: isRecordingActive
-          ? `This meeting is being recorded by ${
-              trimText(renderList[uidWhoStarted]?.name) || 'user'
-            }`
-          : '',
-        visibilityTime: 3000,
-        primaryBtn: null,
-        secondaryBtn: null,
+        visibilityTime: 1000,
       });
     }
   }, [isRecordingActive]);
 
   const startRecording = () => {
-    setInProgress(true);
     // If recording is not going on, start the recording by executing the graphql query
     startRecordingQuery({
       variables: {
@@ -167,7 +148,6 @@ 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
@@ -182,7 +162,6 @@ 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
@@ -203,71 +182,40 @@ const RecordingProvider = (props: RecordingProviderProps) => {
         }
       })
       .catch((err) => {
-        setInProgress(false);
         console.log(err);
       });
   };
 
   const stopRecording = () => {
-    /**
-     * 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,
-      );
-    }
+    // 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);
+      });
   };
 
   return (
     <RecordingContext.Provider
       value={{
-        inProgress,
         startRecording,
         stopRecording,
         isRecordingActive,

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

@@ -9,16 +9,15 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useContext} from 'react';
-import ThemeConfig from '../../theme';
-import IconButton, {IconButtonProps} from '../../atoms/IconButton';
-import Styles from '../../components/styles';
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {BtnTemplate, BtnTemplateInterface} from '../../../agora-rn-uikit';
 import {useString} from '../../utils/useString';
 import {useScreenshare} from './useScreenshare';
-import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
-import {PropsContext, ClientRole} from '../../../agora-rn-uikit';
-import {useLocalUserInfo, useMeetingInfo} from 'customization-api';
-import useIsHandRaised from '../../utils/useIsHandRaised';
+import {
+  ButtonTemplateName,
+  useButtonTemplate,
+} from '../../utils/useButtonTemplate';
 /**
  * A component to start and stop screen sharing on web clients.
  * Screen sharing is not yet implemented on mobile platforms.
@@ -26,67 +25,86 @@ import useIsHandRaised from '../../utils/useIsHandRaised';
  */
 
 export interface ScreenshareButtonProps {
-  render?: (onPress: () => void, isScreenshareActive: boolean) => JSX.Element;
+  buttonTemplateName?: ButtonTemplateName;
+  render?: (
+    onPress: () => void,
+    isScreenshareActive: boolean,
+    buttonTemplateName?: ButtonTemplateName,
+  ) => 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();
-  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,
-    },
+  let btnTemplateProps: BtnTemplateInterface = {
+    name: isScreenshareActive ? 'screenshareOffIcon' : 'screenshareIcon',
     onPress,
-    btnTextProps: {
-      text: $config.ICON_TEXT ? screenShareButton : '',
-      textColor: $config.FONT_COLOR,
-    },
   };
 
-  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;
+  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;
   }
 
   return props?.render ? (
-    props.render(onPress, isScreenshareActive)
+    props.render(onPress, isScreenshareActive, buttonTemplateName)
   ) : (
-    <IconButton {...iconButtonProps} />
+    <BtnTemplate {...btnTemplateProps} />
   );
 };
 
+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, pinnedUid} = useRender();
+  const {renderList, activeUids, lastJoinedUid} = useRender();
   const isPinned = useRef(0);
   const {setScreenShareData, screenShareData} = useScreenContext();
   // commented for v1 release
@@ -41,12 +41,6 @@ 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]);
@@ -125,10 +119,7 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
             };
           });
           //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);
-          }
+          triggerChangeLayout(false);
           break;
         default:
           break;

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

@@ -26,12 +26,7 @@ import {IAgoraRTC} from 'agora-rtc-sdk-ng';
 import useRecordingLayoutQuery from '../recording/useRecordingLayoutQuery';
 import {useString} from '../../utils/useString';
 import {timeNow} from '../../rtm/utils';
-import {
-  controlMessageEnum,
-  useLayout,
-  useRender,
-  useRtc,
-} from 'customization-api';
+import {useLayout, useRender, useRtc} from 'customization-api';
 import {filterObject} from '../../utils';
 
 export const ScreenshareContextConsumer = ScreenshareContext.Consumer;
@@ -40,7 +35,7 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   const [isScreenshareActive, setScreenshareActive] = useState(false);
   const rtc = useRtc();
   const {dispatch} = rtc;
-  const {renderList, activeUids, lastJoinedUid, pinnedUid} = useRender();
+  const {renderList, activeUids, lastJoinedUid} = useRender();
   const isPinned = useRef(0);
   const {isRecordingActive} = useRecording();
   const {executeNormalQuery, executePresenterQuery} = useRecordingLayoutQuery();
@@ -59,11 +54,6 @@ 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;
@@ -119,12 +109,6 @@ 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;
@@ -157,10 +141,7 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
             };
           });
           //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);
-          }
+          triggerChangeLayout(false);
           break;
         default:
           break;
@@ -193,10 +174,7 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
         };
       });
       //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);
-      }
+      triggerChangeLayout(false);
     });
   }, []);