agora-appbuilder-core 4.0.0-test.2 → 4.0.1

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

@@ -1,40 +1,55 @@
-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';
 import Spacer from '../../atoms/Spacer';
-import {useMeetingInfo} from '../../components/meeting-info/useMeetingInfo';
+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,
   isIOS,
   isMobileUA,
+  isValidReactComponent,
   isWebInternal,
   trimText,
 } from '../../utils/common';
-import {RtcContext, ToggleState, useLocalUid} from '../../../agora-rn-uikit';
-import {useLocalUserInfo, useRender} from 'customization-api';
+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';
+import {useWhiteboard} from '../../components/whiteboard/WhiteboardConfigure';
+import WhiteboardView from '../../components/whiteboard/WhiteboardView';
 
-const VideoCallMobileView = () => {
-  const {
-    data: {meetingTitle},
-  } = useMeetingInfo();
-  const {isRecordingActive} = useRecording();
-  const recordingLabel = 'Recording';
+const VideoCallMobileView = props => {
+  const {native = true} = props;
+  const {customContent} = useContent();
   const {isScreenShareOnFullView, screenShareData} = useScreenContext();
+  const {getWhiteboardUid, isWhiteboardOnFullScreen} = useWhiteboard();
 
-  const {RtcEngine, dispatch} = useContext(RtcContext);
+  const {RtcEngineUnsafe} = useContext(RtcContext);
+  const {dispatch} = useContext(DispatchContext);
   const local = useLocalUserInfo();
-  const {renderList} = useRender();
+  const {defaultContent} = useContent();
+
   const maxScreenShareData = filterObject(
     screenShareData,
     ([k, v]) => v?.isExpanded === true,
@@ -43,113 +58,198 @@ const VideoCallMobileView = () => {
     ? Object.keys(maxScreenShareData)[0]
     : null;
 
-  const appState = useRef(AppState.currentState);
   const {isScreenshareActive} = useScreenshare();
-  const [appStateVisible, setAppStateVisible] = useState(appState.current);
+  const appStateVisible = useAppState();
   const isCamON = useRef(local.video);
   const isScreenShareOn = useRef(isScreenshareActive);
-
-  useEffect(() => {
-    if ($config.AUDIO_ROOM || !isMobileUA()) return;
-    const subscription = AppState.addEventListener('change', (nextAppState) => {
-      appState.current = nextAppState;
-      setAppStateVisible(appState.current);
-    });
-    return () => {
-      subscription?.remove();
-    };
-  }, []);
+  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 (
-      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) {
+    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()
-            ? RtcEngine.muteLocalVideoStream(true)
-            : RtcEngine.enableLocalVideo(false);
+            ? RtcEngineUnsafe.muteLocalVideoStream(false)
+            : //@ts-ignore
+              RtcEngineUnsafe.enableLocalVideo(true);
           dispatch({
             type: 'LocalMuteVideo',
-            value: [0],
+            value: [1],
           });
         }
       }
-      if (appStateVisible === 'active' && isCamON.current) {
-        isWebInternal()
-          ? RtcEngine.muteLocalVideoStream(false)
-          : RtcEngine.enableLocalVideo(true);
-        dispatch({
-          type: 'LocalMuteVideo',
-          value: [1],
-        });
-      }
     }
   }, [appStateVisible, isScreenshareActive]);
 
-  return (
+  if (isVBAvaialble) {
+    return <VBPanel />;
+  }
+
+  if (isWhiteboardOnFullScreen) {
+    return (
+      <>
+        {$config.ENABLE_WHITEBOARD ? <WhiteboardListener /> : <></>}
+        <VideoRenderer
+          user={{
+            uid: customContent[getWhiteboardUid()]?.uid,
+            type: 'whiteboard',
+            video: 0,
+            audio: 0,
+            parentUid: undefined,
+            name: 'Whiteboard',
+            muted: undefined,
+          }}
+          CustomChild={WhiteboardView}
+        />
+      </>
+    );
+  }
+
+  return isScreenShareOnFullView &&
+    maxScreenShareUid &&
+    defaultContent[maxScreenShareUid] &&
+    defaultContent[maxScreenShareUid]?.video ? (
     <>
-      {isScreenShareOnFullView &&
-      maxScreenShareUid &&
-      renderList[maxScreenShareUid] &&
-      renderList[maxScreenShareUid]?.video ? (
-        <VideoRenderer user={renderList[maxScreenShareUid]} />
-      ) : (
-        <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} />
-              ) : (
-                <></>
-              )}
-            </View>
-          </View>
-          <Spacer size={16} />
-          <View style={styles.videoView}>
-            <VideoComponent />
-          </View>
-          <ActionSheet />
-        </View>
-      )}
+      {$config.ENABLE_WHITEBOARD ? <WhiteboardListener /> : <></>}
+      <VideoRenderer user={defaultContent[maxScreenShareUid]} />
+    </>
+  ) : (
+    <>
+      {$config.ENABLE_WHITEBOARD ? <WhiteboardListener /> : <></>}
+      <VideoCallView />
     </>
   );
 };
 
+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 (
+          data?.components?.videoCall.topToolBar &&
+          typeof data?.components?.videoCall.topToolBar !== 'object' &&
+          isValidReactComponent(data?.components?.videoCall.topToolBar)
+        ) {
+          components.TopbarComponent = data?.components?.videoCall.topToolBar;
+        }
+
+        if (
+          data?.components?.videoCall.topToolBar &&
+          typeof data?.components?.videoCall.topToolBar === 'object' &&
+          data?.components?.videoCall.topToolBar.length
+        ) {
+          components.TopbarProps = data?.components?.videoCall.topToolBar;
+        }
+      }
+
+      return components;
+    });
+
+  return (
+    <View style={styles.container}>
+      <>
+        <ToolbarProvider value={{position: ToolbarPosition.top}}>
+          {TopbarProps?.length ? (
+            <TopbarComponent
+              //@ts-ignore
+              customItems={TopbarProps}
+              includeDefaultItems={false}
+            />
+          ) : (
+            <TopbarComponent />
+          )}
+        </ToolbarProvider>
+        <View style={styles.videoView}>
+          <VideoComponent />
+          <CaptionContainer />
+        </View>
+        <ToolbarProvider value={{position: ToolbarPosition.bottom}}>
+          <ActionSheetProvider>
+            {BottombarProps?.length ? (
+              <BottombarComponent
+                //@ts-ignore
+                customItems={BottombarProps}
+                includeDefaultItems={false}
+              />
+            ) : (
+              <BottombarComponent />
+            )}
+          </ActionSheetProvider>
+        </ToolbarProvider>
+      </>
+    </View>
+  );
+});
+
 export default VideoCallMobileView;
 
 const styles = StyleSheet.create({

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

@@ -3,9 +3,6 @@ import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import VideoCallMobileView from './VideoCallMobileView';
 import ReactNativeForegroundService from '@supersami/rn-foreground-service';
 import {AppRegistry, Platform} from 'react-native';
-// import {useRender} from 'customization-api';
-// import {filterObject} from '../../utils';
-// import {useScreenContext} from '../../components/contexts/ScreenShareContext';
 
 const VideoCallleScreen = () => {
   React.useEffect(() => {
@@ -20,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({
@@ -31,31 +28,11 @@ const VideoCallleScreen = () => {
     }
   }, []);
 
-  // const {isScreenShareOnFullView, screenShareData} = useScreenContext();
-  // const {renderList} = useRender();
-  // const maxScreenShareData = filterObject(
-  //   screenShareData,
-  //   ([k, v]) => v?.isExpanded === true,
-  // );
-  // const maxScreenShareUid = Object.keys(maxScreenShareData)?.length
-  //   ? Object.keys(maxScreenShareData)[0]
-  //   : null;
-
   return (
     <GestureHandlerRootView style={{flex: 1}}>
-      <VideoCallMobileView />
+      <VideoCallMobileView native={true} />
     </GestureHandlerRootView>
   );
-  // return isScreenShareOnFullView &&
-  //   maxScreenShareUid &&
-  //   renderList[maxScreenShareUid] &&
-  //   renderList[maxScreenShareUid]?.video ? (
-  //   <VideoCallMobileView />
-  // ) : (
-  //   <GestureHandlerRootView style={{flex: 1}}>
-  //     <VideoCallMobileView />
-  //   </GestureHandlerRootView>
-  // );
 };
 
 export default VideoCallleScreen;