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

package/package.json

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

package/template/agora-rn-uikit/src/Controls/Icons.ts

@@ -18,9 +18,12 @@ export interface IconsInterface {
   'turn-off-stt': string;
   'live-caption-mode': string;
   done: string;
+  warning: string;
 }
 
 const icons: IconsInterface = {
+  warning:
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAM1SURBVHgB7Zo9TBNhGMefUoUiPT+iEXAgDshGtAEXbWKiJCVxAxZd2sWpLrrIYuLA4Ohg4qiTUxlNWNy6oQnRTZ1Y0EGl9IDWD/B9Ds9ctPd+Pu+LXO+XvM2lfZvev89zz9dd5srE8C50ET3QZaSCk04qOOmkgpNOKtgF+b7dYO0Hh8AxlWKTLT84flbPs+WBS5xaeHp8649YBI8vjHwDlzgVHBUbcu/6ulP3diYYXXno2M9/3h9m781d9MEVTgSj0LnJzdjPZye2nFnZiWC0bj4XL8jr34HqVANcYF0wWnd6fFu4D/e4CGDWBT+6+VlqX4atMvME21gVjGmoU6CKo8AsjN+xiTXBKLRTGhJRvdq0GsCsCVa1bggGMJtpyopgXeuGzE7q/VkyWBFcMQw+Xm4nqMBsQC4YXVkmDYnAFGUjTZELNnHlKJimbFiZVDCWjzLXXv1dLlgi9ursTaCErB8ekjy5xy+PQm15IDhGlxUVJuVLPiy9OQJ+OwMUkFk4rhv6Gzz5kJXVXuF+TFOUFRiJYNl6GdGxFHoOVQAjEbww8wVsQllnGwvGNDQ6+ANsgxYunmuBKcaCqdKQCLRydWrDuM42EiwbqKigGAdpCzatl3UxrbO1BVccNOudwDr79rUN0EVL8Ojgd5J6WZfLYy3tNKUleGHmK+gSPVFd18QAputhyoJ1G/uQedYQFEbawTL943Tq7IzKUzwoFGtfl5GZR7PVAzeenFaq3pQsLNsNyUAxtcIAppqmpAXLdkMi1hpZePjiONxfPBEcm1JmqVHFCNKCqdLQnecnYeltP9Tf5+DW01Pgt8zaPvz2vMKgQEow1dgG+Rixqs+uQb9t3r+cVxgHSf0aZUVViJwYlooUMUFlHJQ9e8Z7wNuArlwcawMV6CkoEi1yt9SAXqKZi/f7Zt3Kah93H/fnVBp7FWxVaVhn15bz3DTFdWnX3ZApQZ0tuO0aK9iWdW1TEtx2jRXMu2P/P4POXOLcgYwVTDUW3Q/87fgrNfaT2quBoBLC2HdgFntZW8/C4uu9uXcnhM2D6+eoTECv/PDpMHePMAvKDMsPEunDpUknFZx0UsFJp+sE/wKxVEJyoyLawQAAAABJRU5ErkJggg==',
   vb: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEfSURBVHgB7VNbEcIwELwwCCgOkIADggMcgAQcVAI4KBJAARLAQeugdXBc6KVzpE2a5Ls7szNtsrebywNgQSoQsSWe+XtLrIlvYsFjJ+xhNQXPD5q5gJD5kfgKmZsFxISMzD26cqq7LHNe7YVYmQ6Mzo5Lc9tdKGDK3IZK1CIkzpzFsmVrUOE0Xjx/k+cyF2DNS1HkQ+vU/A4dIroo2UDzfxsKkOazAcL8LMbunoDKNY/ZosGcCwth8Lf/YmuyHpo1vYg5jf0V1W4NJj40e+c1JAAnHpqaKTCrOhL3xB1xSzRjHbEhfohPpdSD9dpo6P8OER2UgdvjojZ6SGi1wjxcXS/lCUDIQ0fbs5EDK58Q8jC6pmuP8AD9oaaigQWp+AKsAoDF7uWeIAAAAABJRU5ErkJggg==',
   'vb-image':
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAB20lEQVRIie2UPWsUURSGn2siwcRsdgU/EkjnT5BgsZVgxCaNCiqIIi4WRrD1F6RQxMKAgTRWahkIikktRtzSD1IpCIIEsfAjCQQei5zRyZDdmVjnheHcc+5733fuzLkXdrFTqJ/UEzE+pLbVp+reqF1Rv6rjkTfUl+ozdV8Vg4mIh9W36kK2UG2qi+qZnHhbfaXWona5iskR9V1evANvqiiurlcRf18UV/vVlno3Yr/aow7kxdULZQYfthEfVpfdxK+Iy+pwzF+qJB7k/DcfjPhE/aE2I29G/jjyO5m42igzyMSvqedjvKJOF3jT6kr2+SLW1Td53p6iQUppVW0BD4CPUV4DagVqDViNNb/VOrAAWLaDlrqWtWvU7qsb6g31aMQN9V7MD6mv46mXGfwVjz4/qA6o827FfNR74qAtqUNdxUM0L95WJ3NzY9ExY4U1FzNx9VwVk/3qLePKqAr1bPGgpQ7ElFIyOuo0cAo4BowAfcA68AVoAy+A59EcJ4GRlNKjMoM+4DZwEzgAfAeWgM8xbgCjwPEYf2Oz66ZSSt2vijCYiR85p06ovR14vTE/F/yHRU6nHfwEFoGrpW/zD7PAeEppsIpB98PSBSmlLZrbbh24/r8Gu9gx/gBohhCCgI16xQAAAABJRU5ErkJggg==',

package/template/global.d.ts

@@ -103,11 +103,10 @@ interface ConfigInterface {
   ENABLE_IDP_AUTH: boolean;
   PROJECT_ID: string;
   ENABLE_STT: boolean;
-  ENABLE_AINS: boolean;
+  ENABLE_NOISE_CANCELLATION: boolean;
   ENABLE_VIRTUAL_BACKGROUND: boolean;
   ENABLE_WHITEBOARD: boolean;
-  ENABLE_CHAT_NOTIFICATION: boolean;
-  WAITING_ROOM: boolean;
+  ENABLE_WAITING_ROOM: boolean;
   WHITEBOARD_APPIDENTIFIER: string;
   WHITEBOARD_REGION: string;
 }

package/template/src/app-state/useNoiseSupression.native.tsx

@@ -21,7 +21,7 @@ export function NoiseSupressionProvider(props) {
   );
 
   useEffect(() => {
-    if ($config.ENABLE_AINS) {
+    if ($config.ENABLE_NOISE_CANCELLATION) {
     }
   }, []);
 

package/template/src/app-state/useNoiseSupression.tsx

@@ -33,7 +33,7 @@ export function NoiseSupressionProvider(props) {
   let processor = useRef(null);
 
   useEffect(() => {
-    if ($config.ENABLE_AINS) {
+    if ($config.ENABLE_NOISE_CANCELLATION) {
       const denoiserExtension = new AIDenoiserExtension({assetsPath: 'wasm'});
       AgoraRTC.registerExtensions([denoiserExtension]);
       processor.current = denoiserExtension.createProcessor();
@@ -42,7 +42,7 @@ export function NoiseSupressionProvider(props) {
   }, []);
 
   const enableNoiseSuppression = async () => {
-    if (!$config.ENABLE_AINS) {
+    if (!$config.ENABLE_NOISE_CANCELLATION) {
       throw new Error('AINS disabled in config');
     }
     //@ts-ignore

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);
@@ -116,7 +193,7 @@ const MoreButton = () => {
   const {isNoiseSupressionEnabled, setNoiseSupression} = useNoiseSupression();
 
   //AINS
-  if ($config.ENABLE_AINS) {
+  if ($config.ENABLE_NOISE_CANCELLATION) {
     actionMenuitems.push({
       toggleStatus: isNoiseSupressionEnabled === ToggleState.enabled,
       disabled:
@@ -148,7 +225,7 @@ const MoreButton = () => {
     }
     setIsVBActive(prev => !prev);
   };
-  if ($config.ENABLE_VIRTUAL_BACKGROUND) {
+  if ($config.ENABLE_VIRTUAL_BACKGROUND && !$config.AUDIO_ROOM) {
     actionMenuitems.push({
       isBase64Icon: true,
       //@ts-ignore
@@ -185,13 +262,13 @@ const MoreButton = () => {
   useEffect(() => {
     whiteboardActive && currentLayout !== 'pinned' && setLayout('pinned');
 
-    // if (!$config.WAITING_ROOM) {
+    // if (!$config.ENABLE_WAITING_ROOM) {
     //   events.on('WhiteBoardStopped', WhiteboardStoppedCallBack);
     //   events.on('WhiteBoardStarted', WhiteboardStartedCallBack);
     // }
 
     // return () => {
-    //   if (!$config.WAITING_ROOM) {
+    //   if (!$config.ENABLE_WAITING_ROOM) {
     //     events.off('WhiteBoardStopped', WhiteboardStoppedCallBack);
     //     events.off('WhiteBoardStarted', WhiteboardStartedCallBack);
     //   }
@@ -656,16 +733,26 @@ export const RecordingToolbarItem = () => {
 
 export const MoreButtonToolbarItem = () => {
   const {width} = useWindowDimensions();
-  return (
-    (width < BREAKPOINTS.md ||
-      $config.ENABLE_STT ||
-      $config.ENABLE_AINS ||
-      $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/ParticipantsView.tsx

@@ -117,7 +117,11 @@ const ParticipantView = props => {
                    */
                   <>
                     {/* c) Waiting Room View */}
-                    {$config.WAITING_ROOM ? <WaitingRoomParticipants /> : <></>}
+                    {$config.ENABLE_WAITING_ROOM ? (
+                      <WaitingRoomParticipants />
+                    ) : (
+                      <></>
+                    )}
                     {/* a) Live streaming view */}
 
                     <CurrentLiveStreamRequestsView userList={liveStreamData} />
@@ -218,7 +222,7 @@ const ParticipantView = props => {
           </>
         ) : (
           <>
-            {$config.WAITING_ROOM && isHost ? (
+            {$config.ENABLE_WAITING_ROOM && isHost ? (
               <WaitingRoomParticipants />
             ) : (
               <></>

package/template/src/components/Precall.native.tsx

@@ -109,7 +109,8 @@ const JoinRoomInputView = ({isDesktop}) => {
               ? style.btnContainerStyle
               : {width: '100%'}
           }>
-          {$config.WAITING_ROOM && rtcProps.role === ClientRole.Audience ? (
+          {$config.ENABLE_WAITING_ROOM &&
+          rtcProps.role === ClientRole.Audience ? (
             <JoinWaitingRoomBtn />
           ) : (
             <JoinButton />

package/template/src/components/Precall.tsx

@@ -114,7 +114,8 @@ const JoinRoomInputView = ({isDesktop}) => {
               ? style.btnContainerStyle
               : {width: '100%'}
           }>
-          {$config.WAITING_ROOM && rtcProps.role === ClientRole.Audience ? (
+          {$config.ENABLE_WAITING_ROOM &&
+          rtcProps.role === ClientRole.Audience ? (
             <JoinWaitingRoomBtn />
           ) : (
             <JoinButton />
@@ -201,7 +202,8 @@ const JoinRoomButton = () => {
     return components;
   });
 
-  return $config.WAITING_ROOM && rtcProps.role === ClientRole.Audience ? (
+  return $config.ENABLE_WAITING_ROOM &&
+    rtcProps.role === ClientRole.Audience ? (
     <JoinWaitingRoomBtn />
   ) : (
     <JoinButton />

package/template/src/components/RTMConfigure.tsx

@@ -503,7 +503,7 @@ const RtmConfigure = (props: any) => {
 
   useAsyncEffect(async () => {
     //waiting room attendee -> rtm login will happen on page load
-    if ($config.WAITING_ROOM) {
+    if ($config.ENABLE_WAITING_ROOM) {
       //attendee
       if (!isHost && !callActive) {
         await init();
@@ -513,7 +513,7 @@ const RtmConfigure = (props: any) => {
         await init();
       }
     }
-    if (!$config.WAITING_ROOM) {
+    if (!$config.ENABLE_WAITING_ROOM) {
       //host and attendee
       if (callActive) {
         await init();

package/template/src/components/chat-messages/useChatMessages.tsx

@@ -156,9 +156,6 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
       isPrivateMessage: boolean = false,
       forceStop: boolean = false,
     ) => {
-      if (!$config.ENABLE_CHAT_NOTIFICATION) {
-        return;
-      }
       //don't show group message notification if group chat is open
       if (!isPrivateMessage && groupActiveRef.current) {
         return;
@@ -209,7 +206,7 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
       EventNames.PUBLIC_CHAT_MESSAGE,
       data => {
         const forceStop =
-          $config.WAITING_ROOM &&
+          $config.ENABLE_WAITING_ROOM &&
           !isHostRef.current.isHost &&
           !callActiveRef.current.callActive;
         const payload = JSON.parse(data.payload);

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

@@ -187,46 +187,6 @@ export default function UserActionMenuOptionsOptions(
           },
         });
       }
-
-      if ($config.DISABLE_CHAT_OPTION) {
-        console.log('disable chat uids', disableChatUids);
-        const isDisableChat = disableChatUids[user.uid]?.disableChat || false;
-        items.push({
-          icon: 'chat-outlined',
-          onHoverIcon: 'chat-filled',
-          iconColor: $config.SECONDARY_ACTION_COLOR,
-          textColor: $config.SECONDARY_ACTION_COLOR,
-          title: `${isDisableChat ? 'Enable' : 'Disable'} Chat`,
-          callback: () => {
-            // send l2 custom events
-            console.warn('sending1 custom events for disable-chat');
-            //    setDisableChat(prev => !prev); // for local user
-
-            setDisableChatUids(prevState => {
-              // upate disable uids
-              const isDisabled = prevState[user.uid]
-                ? prevState[user.uid].disableChat
-                : false;
-              return {
-                ...prevState,
-                [user.uid]: {
-                  disableChat: !isDisableChat,
-                },
-              };
-            });
-            setActionMenuVisible(false);
-            customEvents.send(
-              'DisableChat',
-              JSON.stringify({
-                disableChatUid: user.uid,
-                disableChat: !isDisableChat,
-              }), // uid for chat disabled user
-              PersistanceLevel.Session,
-            );
-          },
-        });
-      }
-
       /**
        * Only host can see this menu item - request/mute - video/audio, promote to co host,demote to audience,remove form meeting
        */

package/template/src/components/precall/LocalMute.tsx

@@ -135,21 +135,26 @@ const PreCallLocalMute = (props: PreCallProps) => {
           <PreCallSettings />
         </>
       )}
-      {$config.ENABLE_VIRTUAL_BACKGROUND && !isMobileUA() && (
-        <>
-          <Spacer size={isMobileView ? 24 : 16} horizontal={true} />{' '}
-          <VBButton isVBOpen={isVBOpen} setIsVBOpen={setIsVBOpen} />
-        </>
-      )}
-      {$config.ENABLE_VIRTUAL_BACKGROUND && !isMobileView && !isNative && (
-        <>
-          <Spacer size={isMobileView ? 24 : 16} horizontal={true} />{' '}
-          <SettingsButton
-            isSettingsOpen={isSettingsOpen}
-            setIsSettingsOpen={setIsSettingsOpen}
-          />
-        </>
-      )}
+      {$config.ENABLE_VIRTUAL_BACKGROUND &&
+        !isMobileUA() &&
+        !$config.AUDIO_ROOM && (
+          <>
+            <Spacer size={isMobileView ? 24 : 16} horizontal={true} />{' '}
+            <VBButton isVBOpen={isVBOpen} setIsVBOpen={setIsVBOpen} />
+          </>
+        )}
+      {$config.ENABLE_VIRTUAL_BACKGROUND &&
+        !$config.AUDIO_ROOM &&
+        !isMobileView &&
+        !isNative && (
+          <>
+            <Spacer size={isMobileView ? 24 : 16} horizontal={true} />{' '}
+            <SettingsButton
+              isSettingsOpen={isSettingsOpen}
+              setIsSettingsOpen={setIsSettingsOpen}
+            />
+          </>
+        )}
     </View>
   );
 };

package/template/src/components/precall/joinWaitingRoomBtn.native.tsx

@@ -72,7 +72,7 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   } = useRoomInfo();
 
   useEffect(() => {
-    if ($config.WAITING_ROOM && !isHost && token) {
+    if ($config.ENABLE_WAITING_ROOM && !isHost && token) {
       setCallActive(true);
     }
   }, [token]);

package/template/src/components/precall/joinWaitingRoomBtn.tsx

@@ -85,7 +85,7 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   } = useRoomInfo();
 
   useEffect(() => {
-    if ($config.WAITING_ROOM && !isHost && token) {
+    if ($config.ENABLE_WAITING_ROOM && !isHost && token) {
       setCallActive(true);
     }
   }, [token]);

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 + ''

package/template/src/subComponents/recording/useRecording.tsx

@@ -152,7 +152,7 @@ const RecordingProvider = (props: RecordingProviderProps) => {
     if (prevRecordingState) {
       if (prevRecordingState?.isRecordingActive === isRecordingActive) return;
 
-      if ($config.WAITING_ROOM && !isHost && !callActive) {
+      if ($config.ENABLE_WAITING_ROOM && !isHost && !callActive) {
         return;
       }
 

package/template/src/utils/useJoinRoom.ts

@@ -70,7 +70,7 @@ export default function useJoinRoom() {
   const {client} = useContext(GraphQLContext);
   const username = useGetName();
   const {request: requestToJoin} = useWaitingRoomAPI();
-  const isWaitingRoomEnabled = $config.WAITING_ROOM;
+  const isWaitingRoomEnabled = $config.ENABLE_WAITING_ROOM;
 
   return async (phrase: string) => {
     setRoomInfo(prevState => {