agora-appbuilder-core 4.0.0-beta.42 → 4.0.0-beta.44

package/package.json

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

package/template/src/components/PinnedVideo.tsx

@@ -44,7 +44,7 @@ const PinnedVideo = ({renderData}) => {
   const activeSpeaker = useActiveSpeaker();
   const {dispatch} = useContext(DispatchContext);
   const {videoTileInViewPortState} = useVideoCall();
-  const {getWhiteboardUid} = useWhiteboard();
+  const {getWhiteboardUid = () => 0} = useWhiteboard();
   useEffect(() => {
     if (activeSpeaker && !videoTileInViewPortState[activeSpeaker] && isOnTop) {
       dispatch({

package/template/src/components/participants/UserActionMenuOptions.tsx

@@ -82,7 +82,7 @@ export default function UserActionMenuOptionsOptions(
     useState(false);
   const {enablePinForMe} = useVideoCall();
   const {setDisableChatUids, disableChatUids} = useDisableChat();
-  const {getWhiteboardUid} = useWhiteboard();
+  const {getWhiteboardUid = () => 0} = useWhiteboard();
 
   useEffect(() => {
     customEvents.on('DisableChat', data => {

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

@@ -135,7 +135,7 @@ const VBPanel = (props?: {isOnPrecall?: boolean}) => {
               <></>
             )}
 
-            <VideoPreview />
+            <VideoPreview isLocalVideoON={isLocalVideoON} />
           </View>
         ) : (
           <></>

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

@@ -3,7 +3,11 @@ import {MaxVideoView} from '../../../agora-rn-uikit';
 import {useContent, usePreCall, useRtc} from 'customization-api';
 import InlineNotification from '../../atoms/InlineNotification';
 
-const VideoPreview = () => {
+interface VideoPreviewProps {
+  isLocalVideoON?: boolean;
+}
+
+const VideoPreview = ({isLocalVideoON = false}: VideoPreviewProps) => {
   const {defaultContent, activeUids} = useContent();
   const [maxUid] = activeUids;
   const {isCameraAvailable} = usePreCall();
@@ -15,6 +19,10 @@ as your camera turns on.`
     : `Your camera is switched off. Save a background to apply once it’s turned on.`;
   rtc?.RtcEngineUnsafe?.startPreview();
 
+  if (!isLocalVideoON) {
+    return <InlineNotification text={fallbackText} />;
+  }
+
   return (
     <MaxVideoView
       user={defaultContent[maxUid]}

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

@@ -8,15 +8,17 @@ import {useVB} from './useVB';
 import ThemeConfig from '../../../src/theme';
 import {isMobileUA} from '../../utils/common';
 import InlineNotification from '../../atoms/InlineNotification';
+interface VideoPreviewProps {
+  isLocalVideoON?: boolean;
+}
 
-const VideoPreview = () => {
+const VideoPreview = ({isLocalVideoON}: VideoPreviewProps) => {
   const {setPreviewVideoTrack, setSaveVB, previewVideoTrack} = useVB();
   const rtc = useContext(RtcContext);
   const vContainerRef = React.useRef(null);
   const {video: localVideoStatus} = useLocalUserInfo();
   const {isCameraAvailable} = usePreCall();
 
-  const isLocalVideoON = localVideoStatus === ToggleState.enabled;
   const isMobileWeb = isMobileUA();
   const {defaultContent, activeUids} = useContent();
   const [maxUid] = activeUids;

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

@@ -1,12 +1,68 @@
-import {UidType, useRoomInfo} from 'customization-api';
+import {UidType, useContent, useLayout, useRoomInfo} from 'customization-api';
 import {createHook} from 'customization-implementation';
 import React, {useState, useRef, useEffect} from 'react';
 import {createContext} from 'react';
+import {isWeb, randomIntFromInterval, randomString} from '../../utils/common';
+
+export const whiteboardPaper = isWeb() ? document.createElement('div') : null;
+if (whiteboardPaper) {
+  whiteboardPaper.className = 'whiteboardPaper';
+  whiteboardPaper.setAttribute('style', 'height:100%');
+}
+
+const dummyHeight = 409;
+const dummyWidth = 317;
+
+export const CursorColor = [
+  {
+    cursorColor: '#EAC443',
+    textColor: '#000000',
+  },
+  {
+    cursorColor: '#EB42B9',
+    textColor: '#000000',
+  },
+  {
+    cursorColor: '#FF5733',
+    textColor: '#000000',
+  },
+  {
+    cursorColor: '#C70039',
+    textColor: '#FFFFFF',
+  },
+  {
+    cursorColor: '#196F3D',
+    textColor: '#FFFFFF',
+  },
+  {
+    cursorColor: '#2E86C1',
+    textColor: '#000000',
+  },
+  {
+    cursorColor: '#A569BD',
+    textColor: '#000000',
+  },
+  {
+    cursorColor: '#AED6F1',
+    textColor: '#000000',
+  },
+  {
+    cursorColor: '#581845',
+    textColor: '#FFFFFF',
+  },
+  {
+    cursorColor: '#1B4F72',
+    textColor: '#FFFFFF',
+  },
+];
 
 export const whiteboardContext = createContext(
   {} as whiteboardContextInterface,
 );
-
+export enum BoardColor {
+  Black = 1,
+  White = 2,
+}
 export interface whiteboardContextInterface {
   whiteboardUid: UidType;
   whiteboardActive: boolean;
@@ -14,6 +70,12 @@ export interface whiteboardContextInterface {
   joinWhiteboardRoom: () => void;
   leaveWhiteboardRoom: () => void;
   whiteboardRoom: React.Ref<any>;
+  boardColor: BoardColor;
+  setBoardColor: React.Dispatch<React.SetStateAction<BoardColor>>;
+  setUploadRef: () => void;
+  insertImageIntoWhiteboard: (url: string) => void;
+  getWhiteboardUid: () => number;
+  whiteboardStartedFirst?: boolean;
 }
 
 export interface WhiteboardPropsInterface {
@@ -23,21 +85,44 @@ export interface WhiteboardPropsInterface {
 const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
   // Defines intent, whether whiteboard should be active or not
   const [whiteboardActive, setWhiteboardActive] = useState(false);
+  const [whiteboardStartedFirst, setWhiteboardStartedFirst] = useState(false);
+  const [boardColor, setBoardColor] = useState<BoardColor>(BoardColor.White);
   // Defines whiteboard room state, whether disconnected, Connected, Connecting etc.
   const [whiteboardRoomState, setWhiteboardRoomState] = useState();
   const whiteboardUidRef = useRef(Date.now());
-
+  const whiteWebSdkClient = useRef({});
   const whiteboardRoom = useRef({});
+  const {pinnedUid, activeUids} = useContent();
+  const prevImageUploadHeightRef = useRef(0);
+
+  const uploadPendingRef = useRef(false);
 
   const {
     data: {isHost, whiteboard: {room_token, room_uuid} = {}},
+    boardColor: boardColorRemote,
+    whiteboardLastImageUploadPosition: whiteboardLastImageUploadPositionRemote,
   } = useRoomInfo();
+  const {currentLayout} = useLayout();
+
+  const setUploadRef = () => {
+    uploadPendingRef.current = true;
+  };
+
+  const insertImageIntoWhiteboard = url => {};
+
+  const sendLastImageUploadPositionToRemoteUsers = (height: number) => {};
+
+  const join = () => {};
+
+  const leave = () => {};
 
   const joinWhiteboardRoom = () => {};
 
   const leaveWhiteboardRoom = () => {};
 
-  useEffect(() => {}, []);
+  const getWhiteboardUid = () => {
+    return whiteboardUidRef?.current;
+  };
 
   return (
     <whiteboardContext.Provider
@@ -48,6 +133,12 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
         leaveWhiteboardRoom,
         whiteboardRoom,
         whiteboardUid: whiteboardUidRef.current,
+        getWhiteboardUid,
+        boardColor,
+        setBoardColor,
+        setUploadRef,
+        insertImageIntoWhiteboard,
+        whiteboardStartedFirst,
       }}>
       {props.children}
     </whiteboardContext.Provider>

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

@@ -971,6 +971,13 @@ const WhiteboardToolBox = ({whiteboardRoom}) => {
               />
               <IconButton
                 onPress={() => {
+                  try {
+                    //to clear prev selected file
+                    //@ts-ignore
+                    document.getElementById('docpicker').value = null;
+                  } catch (error) {
+                    console.log('debugging error on setting null');
+                  }
                   document.getElementById('docpicker').click();
                 }}
                 toolTipMessage="Upload Document or Image"

package/template/src/pages/video-call/VideoRenderer.tsx

@@ -63,7 +63,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
   const videoMoreMenuRef = useRef(null);
   const [actionMenuVisible, setActionMenuVisible] = React.useState(false);
   const {setVideoTileInViewPortState} = useVideoCall();
-  const {getWhiteboardUid} = useWhiteboard();
+  const {getWhiteboardUid = () => 0} = useWhiteboard();
   const [landscapeMode, setLandscapeMode] = useState(
     isAndroid() || isIOS() ? true : false,
   );