agora-appbuilder-core 4.0.0-beta.30 → 4.0.0-beta.31

package/package.json

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

package/template/src/components/Controls.tsx

@@ -9,7 +9,13 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState, useContext, useEffect, useRef} from 'react';
+import React, {
+  useState,
+  useContext,
+  useEffect,
+  useRef,
+  useReducer,
+} from 'react';
 import {View, StyleSheet, useWindowDimensions} from 'react-native';
 import {
   DispatchContext,
@@ -72,6 +78,77 @@ import {useVB} from './virtual-background/useVB';
 import WhiteboardWrapper from './whiteboard/WhiteboardWrapper';
 import isSDK from '../utils/isSDK';
 
+const WhiteboardListener = () => {
+  const {dispatch} = useContext(DispatchContext);
+  const {setCustomContent} = useContent();
+  const {currentLayout, setLayout} = useLayout();
+
+  const {isWhiteBoardOn} = useRoomInfo();
+
+  //whiteboard start
+
+  const {
+    whiteboardActive,
+    joinWhiteboardRoom,
+    leaveWhiteboardRoom,
+    whiteboardUid,
+  } = useContext(whiteboardContext);
+
+  const WhiteboardStoppedCallBack = () => {
+    toggleWhiteboard(true, false);
+  };
+
+  const WhiteboardStartedCallBack = () => {
+    toggleWhiteboard(false, false);
+  };
+
+  useEffect(() => {
+    whiteboardActive && currentLayout !== 'pinned' && setLayout('pinned');
+  }, []);
+
+  React.useEffect(() => {
+    if (isWhiteBoardOn) {
+      WhiteboardStartedCallBack();
+    } else {
+      WhiteboardStoppedCallBack();
+    }
+  }, [isWhiteBoardOn]);
+
+  const toggleWhiteboard = (
+    whiteboardActive: boolean,
+    triggerEvent: boolean,
+  ) => {
+    if ($config.ENABLE_WHITEBOARD) {
+      if (whiteboardActive) {
+        leaveWhiteboardRoom();
+        setCustomContent(whiteboardUid, false);
+        setLayout('grid');
+        triggerEvent &&
+          events.send(
+            'WhiteBoardStopped',
+            JSON.stringify({}),
+            PersistanceLevel.Session,
+          );
+      } else {
+        joinWhiteboardRoom();
+        setCustomContent(whiteboardUid, WhiteboardWrapper, {}, true);
+        dispatch({
+          type: 'UserPin',
+          value: [whiteboardUid],
+        });
+        setLayout('pinned');
+        triggerEvent &&
+          events.send(
+            'WhiteBoardStarted',
+            JSON.stringify({}),
+            PersistanceLevel.Session,
+          );
+      }
+    }
+  };
+  return null;
+};
+
 const MoreButton = () => {
   const {dispatch} = useContext(DispatchContext);
   const {rtcProps} = useContext(PropsContext);
@@ -656,16 +733,26 @@ export const RecordingToolbarItem = () => {
 
 export const MoreButtonToolbarItem = () => {
   const {width} = useWindowDimensions();
-  return (
-    (width < BREAKPOINTS.md ||
-      $config.ENABLE_STT ||
-      $config.ENABLE_NOISE_CANCELLATION ||
-      $config.ENABLE_VIRTUAL_BACKGROUND ||
-      $config.ENABLE_WHITEBOARD) && (
-      <ToolbarItem testID="more-btn">
-        <MoreButton />
-      </ToolbarItem>
-    )
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+  const {isSTTActive} = useCaption();
+  const [_, forceUpdate] = useReducer(x => x + 1, 0);
+
+  useEffect(() => {
+    forceUpdate();
+  }, [isHost]);
+
+  return width < BREAKPOINTS.md ||
+    ($config.ENABLE_STT && (isHost || (!isHost && isSTTActive))) ||
+    $config.ENABLE_NOISE_CANCELLATION ||
+    ($config.ENABLE_VIRTUAL_BACKGROUND && !$config.AUDIO_ROOM) ||
+    (isHost && $config.ENABLE_WHITEBOARD && (isWeb() || isSDK())) ? (
+    <ToolbarItem testID="more-btn">
+      <MoreButton />
+    </ToolbarItem>
+  ) : (
+    <WhiteboardListener />
   );
 };
 export const LocalEndcallToolbarItem = () => {

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

@@ -36,7 +36,6 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
     RoomPhase.Disconnected,
   );
   const whiteboardUidRef = useRef(Date.now());
-  console.log('debugging whiteboardUid', whiteboardUidRef.current);
   const whiteWebSdkClient = useRef({} as WhiteWebSdk);
   const whiteboardRoom = useRef({} as Room);
 

package/template/src/subComponents/chat/ChatParticipants.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useReducer, useState} from 'react';
 import {
   View,
   Text,
@@ -19,6 +19,8 @@ import UserAvatar from '../../atoms/UserAvatar';
 import ThemeConfig from '../../theme';
 import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
 import Spacer from '../../atoms/Spacer';
+import {useLiveStreamDataContext} from '../../components/contexts/LiveStreamDataContext';
+import {useWaitingRoomContext} from '../../components/contexts/WaitingRoomContext';
 
 const ChatIcon = () => (
   <View style={{alignSelf: 'center', marginRight: 20}}>
@@ -36,30 +38,61 @@ const ChatParticipants = (props: any) => {
   const remoteUserDefaultLabel = 'User';
   const {selectUser} = props;
   const {defaultContent, activeUids, customContent} = useContent();
-  const activeUidsLen = activeUids?.filter((i) => !customContent[i])?.length;
+  const activeUidsLen = activeUids?.filter(i => !customContent[i])?.length;
   const localUid = useLocalUid();
   const {unreadIndividualMessageCount} = useChatNotification();
   const isMobile = isMobileUA();
+  const {audienceUids, hostUids} = useLiveStreamDataContext();
+  const {waitingRoomUids} = useWaitingRoomContext();
+  const [_, forceUpdate] = useReducer(x => x + 1, 0);
+
+  useEffect(() => {
+    if ($config.ENABLE_WAITING_ROOM) {
+      forceUpdate();
+    }
+  }, [waitingRoomUids, activeUids]);
+
   return (
     <ScrollView>
-      {activeUids && activeUidsLen === 1 ? (
-        <View style={style.defaultMessageContainer}>
-          <Text style={style.defaultMessageText}>
-            No one else has joined yet.
-          </Text>
-        </View>
-      ) : (
-        <></>
-      )}
+      {
+        //video meeting vertical
+        (!$config.EVENT_MODE && activeUids && activeUidsLen === 1) ||
+        //livestreaming vertical
+        ($config.EVENT_MODE && hostUids.length + audienceUids.length === 1) ? (
+          <View style={style.defaultMessageContainer}>
+            <Text style={style.defaultMessageText}>
+              No one else has joined yet.
+            </Text>
+          </View>
+        ) : (
+          <></>
+        )
+      }
       {Object.keys(defaultContent)
-        .map((i) => parseInt(i))
-        .filter((i) => {
+        .map(i => parseInt(i))
+        .filter(i => {
           try {
             if (isNaN(i)) {
               return false;
             } else {
               const userId = i;
               const userInfo = defaultContent[userId];
+              //video meeting with waiting room
+              if (
+                $config.ENABLE_WAITING_ROOM &&
+                !$config.EVENT_MODE &&
+                activeUids?.indexOf(userId) === -1
+              ) {
+                return false;
+              }
+              //livestreaming with waiting room
+              if (
+                $config.ENABLE_WAITING_ROOM &&
+                $config.EVENT_MODE &&
+                hostUids?.concat(audienceUids)?.indexOf(userId) === -1
+              ) {
+                return false;
+              }
               return (
                 userId !== localUid && //user can't chat with own user
                 // @ts-ignore
@@ -78,7 +111,7 @@ const ChatParticipants = (props: any) => {
             defaultContent[a]?.lastMessageTimeStamp
           );
         })
-        .map((uid) => {
+        .map(uid => {
           const uidAsNumber = uid;
           const name = defaultContent[uidAsNumber]
             ? defaultContent[uidAsNumber].name + ''