agora-appbuilder-core 4.0.0-beta.46 → 4.0.0-beta.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-beta.46",
+  "version": "4.0.0-beta.48",
   "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/EventsConfigure.tsx

@@ -303,22 +303,20 @@ const EventsConfigure: React.FC<Props> = props => {
 
     events.on(EventNames.WHITEBOARD_LAST_IMAGE_UPLOAD_POSITION, ({payload}) => {
       const data = JSON.parse(payload);
-      if (data?.height) {
-        if ($config.ENABLE_WAITING_ROOM && !isHostRef.current) {
-          setRoomInfo(prev => {
-            return {
-              ...prev,
-              whiteboardLastImageUploadPosition: {height: data?.height},
-            };
-          });
-        } else {
-          LocalEventEmitter.emit(
-            LocalEventsEnum.WHITEBOARD_LAST_IMAGE_UPLOAD_POSITION_LOCAL,
-            {
-              height: data?.height,
-            },
-          );
-        }
+      if ($config.ENABLE_WAITING_ROOM && !isHostRef.current) {
+        setRoomInfo(prev => {
+          return {
+            ...prev,
+            whiteboardLastImageUploadPosition: {height: data?.height || 0},
+          };
+        });
+      } else {
+        LocalEventEmitter.emit(
+          LocalEventsEnum.WHITEBOARD_LAST_IMAGE_UPLOAD_POSITION_LOCAL,
+          {
+            height: data?.height || 0,
+          },
+        );
       }
     });
 

package/template/src/components/whiteboard/WhiteboardConfigure.native.tsx

@@ -76,6 +76,7 @@ export interface whiteboardContextInterface {
   insertImageIntoWhiteboard: (url: string) => void;
   getWhiteboardUid: () => number;
   whiteboardStartedFirst?: boolean;
+  clearAllCallback: () => void;
 }
 
 export interface WhiteboardPropsInterface {
@@ -124,6 +125,7 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
     return whiteboardUidRef?.current;
   };
 
+  const clearAllCallback = () => {};
   return (
     <whiteboardContext.Provider
       value={{
@@ -139,6 +141,7 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
         setUploadRef,
         insertImageIntoWhiteboard,
         whiteboardStartedFirst,
+        clearAllCallback,
       }}>
       {props.children}
     </whiteboardContext.Provider>

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

@@ -85,6 +85,7 @@ export interface whiteboardContextInterface {
   insertImageIntoWhiteboard: (url: string) => void;
   getWhiteboardUid: () => number;
   whiteboardStartedFirst?: boolean;
+  clearAllCallback?: () => void;
 }
 
 export interface WhiteboardPropsInterface {
@@ -166,7 +167,7 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
   React.useEffect(() => {
     if ($config.ENABLE_WAITING_ROOM && !isHost) {
       SetLastImageUploadHeightCallBack({
-        height: whiteboardLastImageUploadPositionRemote?.height,
+        height: whiteboardLastImageUploadPositionRemote?.height || 0,
       });
     }
   }, [whiteboardLastImageUploadPositionRemote, isHost]);
@@ -288,7 +289,7 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
      */
     events.send(
       EventNames.WHITEBOARD_LAST_IMAGE_UPLOAD_POSITION,
-      JSON.stringify({height: height}),
+      JSON.stringify({height: height || 0}),
       PersistanceLevel.Session,
     );
   };
@@ -397,6 +398,11 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
     return whiteboardUidRef?.current;
   };
 
+  const clearAllCallback = () => {
+    prevImageUploadHeightRef.current = 0;
+    sendLastImageUploadPositionToRemoteUsers(0);
+  };
+
   return (
     <whiteboardContext.Provider
       value={{
@@ -412,6 +418,7 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
         setUploadRef,
         insertImageIntoWhiteboard,
         whiteboardStartedFirst,
+        clearAllCallback,
       }}>
       {props.children}
     </whiteboardContext.Provider>

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

@@ -212,6 +212,7 @@ const WhiteboardToolBox = ({whiteboardRoom}) => {
     insertImageIntoWhiteboard,
     boardColor,
     getWhiteboardUid,
+    clearAllCallback,
   } = useContext(whiteboardContext);
   const [isShapeBtnHovered, setShapeBtnHovered] = useState(false);
   const [isShapeContainerHovered, setShapeContainerHovered] = useState(false);
@@ -239,6 +240,7 @@ const WhiteboardToolBox = ({whiteboardRoom}) => {
     LocalEventEmitter.on(LocalEventsEnum.CLEAR_WHITEBOARD, () => {
       whiteboardRoom.current?.cleanCurrentScene();
       setShowWhiteboardClearAllPopup(false);
+      clearAllCallback();
     });
   }, []);
 

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,10 +115,13 @@ const WhiteboardWidget = ({whiteboardRoom}) => {
               text1:
                 'Whiteboard exported as an image. Link copied to your clipboard.',
               visibilityTime: 3000,
+              primaryBtn: null,
+              secondaryBtn: null,
             });
             Clipboard.setString(parsedUrl);
-            window.open(parsedUrl, '_blank');
-            window.focus();
+            setTimeout(() => {
+              window.open(parsedUrl, '_blank');
+            });
             setIsInProgress(false);
           } else {
             showWhiteboardError();
@@ -225,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,13 @@ 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,
+      });
     }
   };