agora-appbuilder-core 4.0.0-api.4 → 4.0.0-api.6

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

@@ -1,5 +1,5 @@
-import {StyleSheet, Text, View, AppState} from 'react-native';
-import React, {useRef, useContext, useState, useEffect} from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import React, {useRef, useContext, useEffect} from 'react';
 import VideoComponent from './VideoComponent';
 import ActionSheet from './ActionSheet';
 import ThemeConfig from '../../theme';
@@ -7,105 +7,224 @@ import Spacer from '../../atoms/Spacer';
 import {useRoomInfo} from '../../components/room-info/useRoomInfo';
 
 import {useRecording} from '../../subComponents/recording/useRecording';
-import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
 import ParticipantsCount from '../../atoms/ParticipantsCount';
 import RecordingInfo from '../../atoms/RecordingInfo';
-import {isAndroid, isWebInternal, trimText} from '../../utils/common';
-import {ToggleState, useLocalUid} from '../../../agora-rn-uikit';
-import {useLocalUserInfo, useContent} from 'customization-api';
+import {
+  isAndroid,
+  isIOS,
+  isMobileUA,
+  isValidReactComponent,
+  isWebInternal,
+  trimText,
+} from '../../utils/common';
+import {DispatchContext, RtcContext} from '../../../agora-rn-uikit';
+import {
+  useLocalUserInfo,
+  useContent,
+  ToolbarCustomItem,
+} from 'customization-api';
+import CaptionContainer from '../../subComponents/caption/CaptionContainer';
+import {useScreenContext} from '../../components/contexts/ScreenShareContext';
+import VideoRenderer from './VideoRenderer';
+import {filterObject} from '../../utils';
+import {useScreenshare} from '../../subComponents/screenshare/useScreenshare';
+import useAppState from '../../utils/useAppState';
+import {ToolbarPosition, ToolbarProvider} from '../../utils/useToolbar';
+import {ActionSheetProvider} from '../../utils/useActionSheet';
+import {useCustomization} from 'customization-implementation';
+import NavbarMobile from '../../components/NavbarMobile';
+import {useVB} from '../../components/virtual-background/useVB';
+import VBPanel from '../../components/virtual-background/VBPanel';
+import {WhiteboardListener} from '../../components/Controls';
 
-const VideoCallMobileView = () => {
-  const {
-    data: {meetingTitle},
-  } = useRoomInfo();
-  const {isRecordingActive} = useRecording();
-  const recordingLabel = 'Recording';
+const VideoCallMobileView = props => {
+  const {native = true} = props;
+  const {isScreenShareOnFullView, screenShareData} = useScreenContext();
 
-  const appState = useRef(AppState.currentState);
-  const [appStateVisible, setAppStateVisible] = useState(appState.current);
+  const {RtcEngineUnsafe} = useContext(RtcContext);
+  const {dispatch} = useContext(DispatchContext);
   const local = useLocalUserInfo();
+  const {defaultContent} = useContent();
 
+  const maxScreenShareData = filterObject(
+    screenShareData,
+    ([k, v]) => v?.isExpanded === true,
+  );
+  const maxScreenShareUid = Object.keys(maxScreenShareData)?.length
+    ? Object.keys(maxScreenShareData)[0]
+    : null;
+
+  const {isScreenshareActive} = useScreenshare();
+  const appStateVisible = useAppState();
   const isCamON = useRef(local.video);
+  const isScreenShareOn = useRef(isScreenshareActive);
+  const {isVBActive, setIsVBActive} = useVB();
+  const isVBAvaialble =
+    $config.ENABLE_VIRTUAL_BACKGROUND && !$config.AUDIO_ROOM && isVBActive;
+
+  useEffect(() => {
+    // console.log(`Video State  ${local.video} in Mode  ${appStateVisible}`);
+    //native screenshare use local uid to publish the screenshare stream
+    //so when user minimize the app we shouldnot pause the local video
+    if ($config.AUDIO_ROOM || !isMobileUA()) {
+      return;
+    } else {
+      if (
+        appStateVisible === 'background' &&
+        isScreenshareActive &&
+        (isAndroid() || isIOS())
+      ) {
+        isScreenShareOn.current = true;
+      }
+      if (
+        appStateVisible === 'active' &&
+        !isScreenshareActive &&
+        (isAndroid() || isIOS())
+      ) {
+        isScreenShareOn.current = false;
+      }
+      if (!((isAndroid() || isIOS()) && isScreenshareActive)) {
+        if (appStateVisible === 'background') {
+          isCamON.current =
+            isAndroid() || isIOS()
+              ? local.video && !isScreenShareOn.current
+              : local.video;
+          if (isCamON.current) {
+            isWebInternal()
+              ? RtcEngineUnsafe.muteLocalVideoStream(true)
+              : //@ts-ignore
+                RtcEngineUnsafe.enableLocalVideo(false);
+            dispatch({
+              type: 'LocalMuteVideo',
+              value: [0],
+            });
+          }
+        }
+        if (appStateVisible === 'active' && isCamON.current) {
+          isWebInternal()
+            ? RtcEngineUnsafe.muteLocalVideoStream(false)
+            : //@ts-ignore
+              RtcEngineUnsafe.enableLocalVideo(true);
+          dispatch({
+            type: 'LocalMuteVideo',
+            value: [1],
+          });
+        }
+      }
+    }
+  }, [appStateVisible, isScreenshareActive]);
+
+  if (isVBAvaialble) {
+    return <VBPanel />;
+  }
+
+  return isScreenShareOnFullView &&
+    maxScreenShareUid &&
+    defaultContent[maxScreenShareUid] &&
+    defaultContent[maxScreenShareUid]?.video ? (
+    <>
+      {!native ? <WhiteboardListener /> : <></>}
+      <VideoRenderer user={defaultContent[maxScreenShareUid]} />
+    </>
+  ) : (
+    <>
+      {!native ? <WhiteboardListener /> : <></>}
+      <VideoCallView />
+    </>
+  );
+};
 
-  // moved below logic to useMuteToggleLocal
-  // useEffect(() => {
-  //   if ($config.AUDIO_ROOM) return;
-  //   const subscription = AppState.addEventListener(
-  //     'change',
-  //     async (nextAppState) => {
-  //       if (nextAppState === 'background') {
-  //         // check if cam was on before app goes to background
-  //         isCamON.current = isAndroid()
-  //           ? local.video === ToggleState.enabled
-  //           : RtcEngineUnsafe?.isVideoEnabled;
+const VideoCallView = React.memo(() => {
+  //toolbar changes
+  const {BottombarComponent, BottombarProps, TopbarComponent, TopbarProps} =
+    useCustomization(data => {
+      let components: {
+        BottombarComponent: React.ComponentType;
+        BottombarProps?: ToolbarCustomItem[];
+        TopbarComponent: React.ComponentType;
+        TopbarProps?: ToolbarCustomItem[];
+      } = {
+        BottombarComponent: ActionSheet,
+        BottombarProps: [],
+        //@ts-ignore
+        TopbarComponent: NavbarMobile,
+        TopbarProps: [],
+      };
+      if (
+        data?.components?.videoCall &&
+        typeof data?.components?.videoCall === 'object'
+      ) {
+        if (
+          data?.components?.videoCall.bottomToolBar &&
+          typeof data?.components?.videoCall.bottomToolBar !== 'object' &&
+          isValidReactComponent(data?.components?.videoCall.bottomToolBar)
+        ) {
+          components.BottombarComponent =
+            data?.components?.videoCall.bottomToolBar;
+        }
+        if (
+          data?.components?.videoCall.bottomToolBar &&
+          typeof data?.components?.videoCall.bottomToolBar === 'object' &&
+          data?.components?.videoCall.bottomToolBar.length
+        ) {
+          components.BottombarProps = data?.components?.videoCall.bottomToolBar;
+        }
 
-  //         if (isCamON.current || 1) {
-  //           isWebInternal()
-  //             ? await RtcEngineUnsafe.muteLocalVideoStream(true)
-  //             : await RtcEngineUnsafe.enableLocalVideo(false);
+        if (
+          data?.components?.videoCall.topToolBar &&
+          typeof data?.components?.videoCall.topToolBar !== 'object' &&
+          isValidReactComponent(data?.components?.videoCall.topToolBar)
+        ) {
+          components.TopbarComponent = data?.components?.videoCall.topToolBar;
+        }
 
-  //           // dispatch({
-  //           //   type: 'LocalMuteVideo',
-  //           //   value: [0],
-  //           // });
-  //         }
-  //       }
-  //       if (nextAppState === 'active') {
-  //         // enable cam only if cam was on before app goes to background
-  //         console.log('active state 111111 ==>', isCamON.current);
-  //         if (local.video) {
-  //           isWebInternal()
-  //             ? await RtcEngineUnsafe.muteLocalVideoStream(false)
-  //             : await RtcEngineUnsafe.enableLocalVideo(true);
-  //           dispatch({
-  //             type: 'LocalMuteVideo',
-  //             value: [1],
-  //           });
-  //         }
-  //       }
-  //       appState.current = nextAppState;
-  //     },
-  //   );
+        if (
+          data?.components?.videoCall.topToolBar &&
+          typeof data?.components?.videoCall.topToolBar === 'object' &&
+          data?.components?.videoCall.topToolBar.length
+        ) {
+          components.TopbarProps = data?.components?.videoCall.topToolBar;
+        }
+      }
 
-  //   return () => {
-  //     subscription?.remove();
-  //   };
-  // }, []);
+      return components;
+    });
 
   return (
     <View style={styles.container}>
-      <View style={styles.titleBar}>
-        <Text style={styles.title}>{trimText(meetingTitle)}</Text>
-        <Spacer size={8} horizontal={false} />
-        <View style={styles.countView}>
-          <View
-            style={{
-              width: 45,
-              height: 35,
-              justifyContent: 'center',
-              alignItems: 'center',
-              alignSelf: 'center',
-              zIndex: isWebInternal() ? 3 : 0,
-
-              //flex: 1,
-            }}>
-            <ParticipantsCount />
-          </View>
-          {isRecordingActive ? (
-            <RecordingInfo recordingLabel={recordingLabel} />
+      <>
+        <ToolbarProvider value={{position: ToolbarPosition.top}}>
+          {TopbarProps?.length ? (
+            <TopbarComponent
+              //@ts-ignore
+              customItems={TopbarProps}
+              includeDefaultItems={false}
+            />
           ) : (
-            <></>
+            <TopbarComponent />
           )}
+        </ToolbarProvider>
+        <View style={styles.videoView}>
+          <VideoComponent />
+          <CaptionContainer />
         </View>
-      </View>
-      <Spacer size={16} />
-      <View style={styles.videoView}>
-        <VideoComponent />
-      </View>
-      <ActionSheet />
+        <ToolbarProvider value={{position: ToolbarPosition.bottom}}>
+          <ActionSheetProvider>
+            {BottombarProps?.length ? (
+              <BottombarComponent
+                //@ts-ignore
+                customItems={BottombarProps}
+                includeDefaultItems={false}
+              />
+            ) : (
+              <BottombarComponent />
+            )}
+          </ActionSheetProvider>
+        </ToolbarProvider>
+      </>
     </View>
   );
-};
+});
 
 export default VideoCallMobileView;
 

package/template/src/pages/video-call/VideoCallScreen.native.tsx

@@ -17,7 +17,7 @@ const VideoCallleScreen = () => {
           delay: 1000,
           onLoop: true,
           taskId: 'taskid',
-          onError: (e) => console.log(`Error logging:`, e),
+          onError: e => console.log(`Error logging:`, e),
         },
       );
       ReactNativeForegroundService.start({
@@ -27,9 +27,10 @@ const VideoCallleScreen = () => {
       });
     }
   }, []);
+
   return (
     <GestureHandlerRootView style={{flex: 1}}>
-      <VideoCallMobileView />
+      <VideoCallMobileView native={true} />
     </GestureHandlerRootView>
   );
 };

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

@@ -18,6 +18,7 @@ import {
   isValidReactComponent,
   isWebInternal,
   useIsDesktop,
+  useIsSmall,
 } from '../../utils/common';
 import {useSidePanel} from '../../utils/useSidePanel';
 import VideoComponent from './VideoComponent';
@@ -32,10 +33,17 @@ import {
 } from 'customization-api';
 import events, {PersistanceLevel} from '../../rtm-events-api';
 import VideoCallMobileView from './VideoCallMobileView';
+import CaptionContainer from '../../subComponents/caption/CaptionContainer';
+import Transcript from '../../subComponents/caption/Transcript';
+
+import Spacer from '../../atoms/Spacer';
 import Leftbar, {LeftbarProps} from '../../components/Leftbar';
 import Rightbar, {RightbarProps} from '../../components/Rightbar';
+import useFindActiveSpeaker from '../../utils/useFindActiveSpeaker';
+import VBPanel from '../../components/virtual-background/VBPanel';
 
 const VideoCallScreen = () => {
+  useFindActiveSpeaker();
   const {sidePanel} = useSidePanel();
   const [name] = useUserName();
   const {
@@ -56,8 +64,10 @@ const VideoCallScreen = () => {
     TopbarProps,
     LeftbarProps,
     RightbarProps,
-  } = useCustomization((data) => {
+    VideocallWrapper,
+  } = useCustomization(data => {
     let components: {
+      VideocallWrapper: React.ComponentType;
       VideocallComponent?: React.ComponentType;
       ChatComponent: React.ComponentType<ChatProps>;
       BottombarComponent: React.ComponentType<ControlsProps>;
@@ -80,6 +90,7 @@ const VideoCallScreen = () => {
       SettingsComponent: SettingsView,
       VideocallAfterView: React.Fragment,
       VideocallBeforeView: React.Fragment,
+      VideocallWrapper: React.Fragment,
       LeftbarComponent: Leftbar,
       RightbarComponent: Rightbar,
       BottombarProps: [],
@@ -194,6 +205,15 @@ const VideoCallScreen = () => {
           data?.components?.videoCall.participantsPanel;
       }
 
+      //todo hari - need to remove wrapper
+      if (
+        data?.components?.videoCall.wrapper &&
+        typeof data?.components?.videoCall.wrapper !== 'object' &&
+        isValidReactComponent(data?.components?.videoCall.wrapper)
+      ) {
+        components.VideocallWrapper = data?.components?.videoCall.wrapper;
+      }
+
       // commented for v1 release
       // if (
       //   data?.components?.videoCall.settingsPanel &&
@@ -209,64 +229,112 @@ const VideoCallScreen = () => {
   });
 
   const isDesktop = useIsDesktop();
+  const isSmall = useIsSmall();
 
   return VideocallComponent ? (
     <VideocallComponent />
   ) : // ) : !isDesktop ? (
   isMobileUA() ? (
     // Mobile View
-    <VideoCallMobileView />
+    <VideoCallMobileView native={false} />
   ) : (
     // Desktop View
     <>
-      <VideocallBeforeView />
-      <View style={style.fullRow}>
-        <ToolbarProvider value={{position: ToolbarPosition.left}}>
-          <LeftbarComponent customItems={LeftbarProps} />
-        </ToolbarProvider>
-        <View style={style.full}>
-          <ToolbarProvider value={{position: ToolbarPosition.top}}>
-            <TopbarComponent customItems={TopbarProps} />
-          </ToolbarProvider>
-          <View
-            style={[
-              style.videoView,
-              {paddingHorizontal: isDesktop() ? 32 : 10, paddingVertical: 10},
-            ]}>
-            <VideoComponent />
-            {sidePanel === SidePanelType.Participants ? (
-              <ParticipantsComponent />
+      <VideocallWrapper>
+        <VideocallBeforeView />
+        <View
+          style={$config.ICON_TEXT ? style.fullRow : style.fullRowWithoutIcon}>
+          <ToolbarProvider value={{position: ToolbarPosition.left}}>
+            {LeftbarProps?.length ? (
+              <LeftbarComponent
+                customItems={LeftbarProps}
+                includeDefaultItems={false}
+              />
             ) : (
-              <></>
+              <LeftbarComponent />
             )}
-            {sidePanel === SidePanelType.Chat ? (
-              $config.CHAT ? (
-                <ChatComponent />
+          </ToolbarProvider>
+          <View style={style.full}>
+            <ToolbarProvider value={{position: ToolbarPosition.top}}>
+              {TopbarProps?.length ? (
+                <TopbarComponent
+                  customItems={TopbarProps}
+                  includeDefaultItems={false}
+                />
+              ) : (
+                <TopbarComponent />
+              )}
+            </ToolbarProvider>
+            <View
+              style={[
+                style.videoView,
+                $config.ICON_TEXT
+                  ? {
+                      paddingHorizontal: isDesktop() ? 32 : 10,
+                      paddingVertical: 10,
+                      paddingBottom: 0,
+                    }
+                  : {marginVertical: 20},
+              ]}>
+              <VideoComponent />
+              {sidePanel === SidePanelType.Participants ? (
+                <ParticipantsComponent />
               ) : (
                 <></>
-              )
-            ) : (
+              )}
+              {sidePanel === SidePanelType.Chat ? (
+                $config.CHAT ? (
+                  <ChatComponent />
+                ) : (
+                  <></>
+                )
+              ) : (
+                <></>
+              )}
+              {sidePanel === SidePanelType.Settings ? (
+                <SettingsComponent />
+              ) : (
+                <></>
+              )}
+              {sidePanel === SidePanelType.Transcript ? <Transcript /> : <></>}
+              {sidePanel === SidePanelType.VirtualBackground ? (
+                <VBPanel />
+              ) : (
+                <></>
+              )}
+            </View>
+            {!isWebInternal() && sidePanel === SidePanelType.Chat ? (
               <></>
-            )}
-            {sidePanel === SidePanelType.Settings ? (
-              <SettingsComponent />
             ) : (
-              <></>
+              <ToolbarProvider value={{position: ToolbarPosition.bottom}}>
+                {BottombarProps?.length ? (
+                  <BottombarComponent
+                    customItems={BottombarProps}
+                    includeDefaultItems={false}
+                  />
+                ) : (
+                  <>
+                    <CaptionContainer />
+                    <Spacer size={10} />
+                    <BottombarComponent />
+                  </>
+                )}
+              </ToolbarProvider>
             )}
           </View>
-          {!isWebInternal() && sidePanel === SidePanelType.Chat ? (
-            <></>
-          ) : (
-            <ToolbarProvider value={{position: ToolbarPosition.bottom}}>
-              <BottombarComponent customItems={BottombarProps} />
-            </ToolbarProvider>
-          )}
+          <ToolbarProvider value={{position: ToolbarPosition.right}}>
+            {RightbarProps?.length ? (
+              <RightbarComponent
+                customItems={RightbarProps}
+                includeDefaultItems={false}
+              />
+            ) : (
+              <RightbarComponent />
+            )}
+          </ToolbarProvider>
         </View>
-        <ToolbarProvider value={{position: ToolbarPosition.right}}>
-          <RightbarComponent customItems={RightbarProps} />
-        </ToolbarProvider>
-      </View>
-      <VideocallAfterView />
+        <VideocallAfterView />
+      </VideocallWrapper>
     </>
   );
 };
@@ -283,6 +351,13 @@ const style = StyleSheet.create({
     flexDirection: 'row',
     overflow: 'hidden',
   },
+  fullRowWithoutIcon: {
+    flex: 1,
+    flexDirection: 'row',
+    overflow: 'hidden',
+    paddingHorizontal: 32,
+    paddingVertical: 20,
+  },
   videoView: {
     flex: 12,
     flexDirection: 'row',

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

@@ -1,10 +1,15 @@
-import React, {useContext, useEffect, useState} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
+import {View} from 'react-native';
 import useLayoutsData from './useLayoutsData';
-import {isArray, isValidReactComponent} from '../../utils/common';
+import {isArray, useIsDesktop, isValidReactComponent} from '../../utils/common';
+import {PropsContext, ClientRole} from '../../../agora-rn-uikit';
 import {useLayout} from '../../utils/useLayout';
 import {useContent} from 'customization-api';
 import {getGridLayoutName} from './DefaultLayouts';
 import {DispatchContext} from '../../../agora-rn-uikit';
+import MeetingInfoGridTile from '../../components/meeting-info-invite/MeetingInfoGridTile';
+import Spacer from '../../atoms/Spacer';
+import {useLiveStreamDataContext} from '../../components/contexts/LiveStreamDataContext';
 
 const VideoComponent = () => {
   const {dispatch} = useContext(DispatchContext);
@@ -12,34 +17,77 @@ const VideoComponent = () => {
   const layoutsData = useLayoutsData();
   const {currentLayout, setLayout} = useLayout();
   const {activeUids, pinnedUid} = useContent();
+  const {rtcProps} = useContext(PropsContext);
+  const isDesktop = useIsDesktop();
+  const {audienceUids, hostUids} = useLiveStreamDataContext();
+  const [showNoUserInfo, setShowNoUserInfo] = useState(false);
 
+  useEffect(() => {
+    setTimeout(() => {
+      setShowNoUserInfo(true);
+    }, 2500);
+  }, []);
+
+  const currentLayoutRef = useRef(currentLayout);
+  const gridLayoutName = getGridLayoutName();
   useEffect(() => {
     if (activeUids && activeUids.length === 1) {
       if (pinnedUid) {
         dispatch({type: 'UserPin', value: [0]});
+        dispatch({type: 'UserSecondaryPin', value: [0]});
       }
-      const gridLayoutName = getGridLayoutName();
-      if (currentLayout !== gridLayoutName) {
+      if (currentLayoutRef.current != gridLayoutName) {
         setLayout(gridLayoutName);
       }
     }
   }, [activeUids]);
 
   useEffect(() => {
+    currentLayoutRef.current = currentLayout;
     if (isArray(layoutsData)) {
-      let index = layoutsData.findIndex((item) => item.name === currentLayout);
+      let index = layoutsData.findIndex(item => item.name === currentLayout);
       if (index >= 0) {
         setLayoutIndex(index);
       }
     }
   }, [currentLayout]);
 
+  const showInviteTile = () => {
+    if ($config.EVENT_MODE && rtcProps.role == ClientRole.Audience) {
+      return false;
+    }
+    if (activeUids.length == 1) return true;
+    return false;
+  };
+
   if (
     layoutsData &&
     layoutsData[layout] &&
     isValidReactComponent(layoutsData[layout].component)
   ) {
     const CurrentLayout = layoutsData[layout].component;
+    if (showInviteTile() && showNoUserInfo) {
+      return (
+        <View
+          style={{
+            flex: 1,
+            flexDirection: isDesktop() ? 'row' : 'column',
+            justifyContent: 'space-between',
+          }}>
+          <CurrentLayout renderData={activeUids} />
+          {(!$config.EVENT_MODE && activeUids.length === 1) ||
+          ($config.EVENT_MODE &&
+            hostUids.concat(audienceUids)?.length === 1) ? (
+            <>
+              <Spacer size={8} horizontal={isDesktop() ? true : false} />
+              <MeetingInfoGridTile />
+            </>
+          ) : (
+            <></>
+          )}
+        </View>
+      );
+    }
     return <CurrentLayout renderData={activeUids} />;
   } else {
     return <></>;