agora-appbuilder-core 4.0.0-beta.47 → 4.0.0-beta.49

package/package.json

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

package/template/customization-api/sub-components.ts

@@ -33,7 +33,8 @@ export {default as NetworkQualityPill} from '../src/subComponents/NetworkQuality
 //videocall screen
 export {default as VideocallScreen} from '../src/pages/video-call/VideoCallScreen';
 export {default as PrecallScreen} from '../src/components/Precall';
-//export {default as VBPanel} from '../src/components/virtual-background/VBPanel';
+export {default as VBPanel} from '../src/components/virtual-background/VBPanel';
+export {WhiteboardListener} from '../src/components/Controls';
 
 // commented for v1 release
 //Settings screen

package/template/customization-api/temp.ts

@@ -19,6 +19,7 @@ import useMuteToggleLocal, {
 import {RoomPhase} from 'white-web-sdk';
 import {useScreenContext} from '../src/components/contexts/ScreenShareContext';
 import {filterObject} from '../src/utils/index';
+import {useToggleWhiteboard} from '../src/components/Controls';
 export {
   VideoRenderer,
   DispatchContext,
@@ -36,4 +37,5 @@ export {
   RoomPhase,
   useScreenContext,
   filterObject,
+  useToggleWhiteboard,
 };

package/template/src/components/Controls.tsx

@@ -82,7 +82,46 @@ import LocalEventEmitter, {
 } from '../rtm-events-api/LocalEvents';
 import {useSetRoomInfo} from './room-info/useSetRoomInfo';
 
-const WhiteboardListener = () => {
+export const useToggleWhiteboard = () => {
+  const {
+    whiteboardActive,
+    joinWhiteboardRoom,
+    leaveWhiteboardRoom,
+    getWhiteboardUid,
+  } = useContext(whiteboardContext);
+  const {setCustomContent} = useContent();
+  const {setLayout} = useLayout();
+  const {dispatch} = useContext(DispatchContext);
+  return () => {
+    if ($config.ENABLE_WHITEBOARD) {
+      if (whiteboardActive) {
+        leaveWhiteboardRoom();
+        setCustomContent(getWhiteboardUid(), false);
+        setLayout('grid');
+        events.send(
+          EventNames.WHITEBOARD_ACTIVE,
+          JSON.stringify({status: false}),
+          PersistanceLevel.Session,
+        );
+      } else {
+        joinWhiteboardRoom();
+        setCustomContent(getWhiteboardUid(), WhiteboardWrapper, {}, true);
+        dispatch({
+          type: 'UserPin',
+          value: [getWhiteboardUid()],
+        });
+        setLayout('pinned');
+        events.send(
+          EventNames.WHITEBOARD_ACTIVE,
+          JSON.stringify({status: true}),
+          PersistanceLevel.Session,
+        );
+      }
+    }
+  };
+};
+
+export const WhiteboardListener = () => {
   const {dispatch} = useContext(DispatchContext);
   const {setCustomContent} = useContent();
   const {currentLayout, setLayout} = useLayout();
@@ -812,10 +851,16 @@ export const MoreButtonToolbarItem = () => {
     <WhiteboardListener />
   );
 };
-export const LocalEndcallToolbarItem = () => {
+export interface LocalEndcallToolbarItemProps {
+  customExit?: () => void;
+}
+export const LocalEndcallToolbarItem = (
+  props?: LocalEndcallToolbarItemProps,
+) => {
   return (
-    <ToolbarItem testID="endCall-btn">
-      <LocalEndcall />
+    <ToolbarItem
+      testID={props?.customExit ? 'endCall-btn-custom' : 'endCall-btn'}>
+      <LocalEndcall {...props} />
     </ToolbarItem>
   );
 };

package/template/src/components/whiteboard/WhiteboardView.tsx

@@ -18,7 +18,9 @@ import WhiteboardToolBox from './WhiteboardToolBox';
 import WhiteboardCanvas from './WhiteboardCanvas';
 import {useContent, useLayout} from 'customization-api';
 
-interface WhiteboardViewInterface {}
+interface WhiteboardViewInterface {
+  showToolbox: boolean;
+}
 
 const WhiteboardView: React.FC<WhiteboardViewInterface> = () => {
   const wbSurfaceRef = useRef();

package/template/src/components/whiteboard/WhiteboardWidget.tsx

@@ -74,6 +74,8 @@ const WhiteboardWidget = ({whiteboardRoom}) => {
       type: 'error',
       text1: 'Failed to export the whiteboard',
       visibilityTime: 3000,
+      primaryBtn: null,
+      secondaryBtn: null,
     });
   };
 
@@ -86,6 +88,8 @@ const WhiteboardWidget = ({whiteboardRoom}) => {
         text1:
           'Please wait few seconds to get the screenshot link of the whiteboard',
         visibilityTime: 3000,
+        primaryBtn: null,
+        secondaryBtn: null,
       });
       const myHeaders2 = new Headers();
       myHeaders2.append('Content-Type', 'application/json');
@@ -111,6 +115,8 @@ const WhiteboardWidget = ({whiteboardRoom}) => {
               text1:
                 'Whiteboard exported as an image. Link copied to your clipboard.',
               visibilityTime: 3000,
+              primaryBtn: null,
+              secondaryBtn: null,
             });
             Clipboard.setString(parsedUrl);
             setTimeout(() => {
@@ -226,7 +232,8 @@ const WhiteboardWidget = ({whiteboardRoom}) => {
               <></>
             )}
             <ScaleController room={whiteboardRoom.current} />
-            {whiteboardRoom.current?.isWritable ? (
+            {whiteboardRoom.current?.isWritable &&
+            $config.ENABLE_WHITEBOARD_FILE_UPLOAD ? (
               <>
                 <Seperator />
                 <TouchableOpacity

package/template/src/subComponents/LocalEndCall.tsx

@@ -18,6 +18,7 @@ import {ENABLE_AUTH} from '../../src/auth/config';
 
 export interface LocalEndcallProps {
   render?: (onPress: () => void) => JSX.Element;
+  customExit?: () => void;
 }
 
 /* For android only, bg audio */
@@ -76,11 +77,15 @@ const LocalEndcall = (props: LocalEndcallProps) => {
   }, [isScreenshareActive, endCallState]);
 
   const endCall = async () => {
-    if ((isAndroid() || isIOS()) && isScreenshareActive) {
-      stopUserScreenShare();
-      setEndCallState(true);
+    if (props?.customExit) {
+      props.customExit();
     } else {
-      executeEndCall();
+      if ((isAndroid() || isIOS()) && isScreenshareActive) {
+        stopUserScreenShare();
+        setEndCallState(true);
+      } else {
+        executeEndCall();
+      }
     }
   };
 

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

@@ -32,6 +32,7 @@ import {
   useRtc,
 } from 'customization-api';
 import {filterObject} from '../../utils';
+import Toast from '../../../react-native-toast-message';
 
 export const ScreenshareContextConsumer = ScreenshareContext.Consumer;
 
@@ -339,6 +340,15 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
     } catch (e) {
       console.error("can't start the screen share", e);
       executeNormalQuery();
+      Toast.show({
+        leadingIconName: 'alert',
+        type: 'error',
+        text1: 'Failed to start the screen sharing',
+        text2: 'Please allow the permission to start the screen sharing',
+        visibilityTime: 1000 * 10,
+        primaryBtn: null,
+        secondaryBtn: null
+      });
     }
   };