agora-appbuilder-core 4.0.0-beta.51 → 4.0.0-beta.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-beta.51",
+  "version": "4.0.0-beta.52",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/src/components/virtual-background/VideoPreview.native.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {MaxVideoView} from '../../../agora-rn-uikit';
+import {MaxVideoView, useLocalUid} from '../../../agora-rn-uikit';
 import {useContent, usePreCall, useRtc} from 'customization-api';
 import InlineNotification from '../../atoms/InlineNotification';
 
@@ -8,9 +8,9 @@ interface VideoPreviewProps {
 }
 
 const VideoPreview = ({isLocalVideoON = false}: VideoPreviewProps) => {
-  const {defaultContent, activeUids} = useContent();
-  const [maxUid] = activeUids;
+  const {defaultContent} = useContent();
   const {isCameraAvailable} = usePreCall();
+  const localUid = useLocalUid();
 
   const rtc = useRtc();
   const fallbackText = isCameraAvailable
@@ -25,8 +25,8 @@ as your camera turns on.`
 
   return (
     <MaxVideoView
-      user={defaultContent[maxUid]}
-      key={maxUid}
+      user={defaultContent[localUid]}
+      key={localUid}
       fallback={() => <InlineNotification text={fallbackText} />}
       isFullView={true}
       containerStyle={{

package/template/src/components/virtual-background/VideoPreview.tsx

@@ -1,7 +1,7 @@
 import {StyleSheet, View} from 'react-native';
 import React, {useContext} from 'react';
 import {useContent, useLocalUserInfo, usePreCall} from 'customization-api';
-import {MaxVideoView, RtcContext} from '../../../agora-rn-uikit';
+import {MaxVideoView, RtcContext, useLocalUid} from '../../../agora-rn-uikit';
 import {ToggleState} from '../../../agora-rn-uikit/src/Contexts/PropsContext';
 import AgoraRTC from 'agora-rtc-sdk-ng';
 import {useVB} from './useVB';
@@ -18,6 +18,7 @@ const VideoPreview = ({isLocalVideoON}: VideoPreviewProps) => {
   const vContainerRef = React.useRef(null);
   const {video: localVideoStatus} = useLocalUserInfo();
   const {isCameraAvailable} = usePreCall();
+  const localUid = useLocalUid();
 
   const isMobileWeb = isMobileUA();
   const {defaultContent, activeUids} = useContent();
@@ -66,8 +67,8 @@ const VideoPreview = ({isLocalVideoON}: VideoPreviewProps) => {
       }>
       {isMobileWeb ? (
         <MaxVideoView
-          user={defaultContent[maxUid]}
-          key={maxUid}
+          user={defaultContent[localUid]}
+          key={localUid}
           fallback={() => (
             <InlineNotification
               text="Camera is currently off. Selected background will be applied as soon

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

@@ -343,8 +343,8 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
       Toast.show({
         leadingIconName: 'alert',
         type: 'error',
-        text1: 'Failed to start the screen sharing',
-        text2: 'Please allow the permission to start the screen sharing',
+        text1: 'Failed to initiate screen sharing',
+        text2: 'Permission denied',
         visibilityTime: 1000 * 10,
         primaryBtn: null,
         secondaryBtn: null