agora-appbuilder-core 3.0.9 → 4.0.0-api.0

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

@@ -0,0 +1,138 @@
+import {StyleSheet, Text, View, AppState} from 'react-native';
+import React, {useRef, useContext, useState, useEffect} from 'react';
+import VideoComponent from './VideoComponent';
+import ActionSheet from './ActionSheet';
+import ThemeConfig from '../../theme';
+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';
+
+const VideoCallMobileView = () => {
+  const {
+    data: {meetingTitle},
+  } = useRoomInfo();
+  const {isRecordingActive} = useRecording();
+  const recordingLabel = 'Recording';
+
+  const appState = useRef(AppState.currentState);
+  const [appStateVisible, setAppStateVisible] = useState(appState.current);
+  const local = useLocalUserInfo();
+
+  const isCamON = useRef(local.video);
+
+  // 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;
+
+  //         if (isCamON.current || 1) {
+  //           isWebInternal()
+  //             ? await RtcEngineUnsafe.muteLocalVideoStream(true)
+  //             : await RtcEngineUnsafe.enableLocalVideo(false);
+
+  //           // 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;
+  //     },
+  //   );
+
+  //   return () => {
+  //     subscription?.remove();
+  //   };
+  // }, []);
+
+  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} />
+          ) : (
+            <></>
+          )}
+        </View>
+      </View>
+      <Spacer size={16} />
+      <View style={styles.videoView}>
+        <VideoComponent />
+      </View>
+      <ActionSheet />
+    </View>
+  );
+};
+
+export default VideoCallMobileView;
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 16,
+    paddingVertical: 20,
+    flex: 1,
+  },
+  title: {
+    fontSize: ThemeConfig.FontSize.normal,
+    lineHeight: ThemeConfig.FontSize.normal,
+    color: $config.FONT_COLOR,
+    fontWeight: '600',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    paddingVertical: 2,
+  },
+  videoView: {
+    flex: 0.85,
+    zIndex: 0,
+    elevation: 0,
+  },
+  titleBar: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+  },
+  countView: {
+    flexDirection: 'row',
+  },
+});

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import {GestureHandlerRootView} from 'react-native-gesture-handler';
+import VideoCallMobileView from './VideoCallMobileView';
+import ReactNativeForegroundService from '@supersami/rn-foreground-service';
+import {AppRegistry, Platform} from 'react-native';
+
+const VideoCallleScreen = () => {
+  React.useEffect(() => {
+    if (Platform.OS === 'android') {
+      ReactNativeForegroundService.register();
+      AppRegistry.registerComponent($config.APP_NAME, () => VideoCallleScreen);
+      ReactNativeForegroundService.add_task(
+        () => {
+          //console.log('App is active!')
+        },
+        {
+          delay: 1000,
+          onLoop: true,
+          taskId: 'taskid',
+          onError: (e) => console.log(`Error logging:`, e),
+        },
+      );
+      ReactNativeForegroundService.start({
+        id: 145,
+        title: $config.APP_NAME,
+        message: 'Call is active',
+      });
+    }
+  }, []);
+  return (
+    <GestureHandlerRootView style={{flex: 1}}>
+      <VideoCallMobileView />
+    </GestureHandlerRootView>
+  );
+};
+
+export default VideoCallleScreen;

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

@@ -1,30 +1,40 @@
-import React, {useContext, useEffect} from 'react';
-import {View, StyleSheet} from 'react-native';
+import React, {useContext, useEffect, useState} from 'react';
+import {
+  View,
+  StyleSheet,
+  useWindowDimensions,
+  Text,
+  Platform,
+} from 'react-native';
 import {useCustomization} from 'customization-implementation';
 import Navbar from '../../components/Navbar';
 import ParticipantsView from '../../components/ParticipantsView';
 import SettingsView from '../../components/SettingsView';
 import Controls from '../../components/Controls';
-import Chat from '../../components/Chat';
+import Chat, {ChatProps} from '../../components/Chat';
 import {SidePanelType} from '../../subComponents/SidePanelEnum';
-import {isValidReactComponent, isWebInternal} from '../../utils/common';
+import {
+  isMobileUA,
+  isValidReactComponent,
+  isWebInternal,
+  useIsDesktop,
+} from '../../utils/common';
 import {useSidePanel} from '../../utils/useSidePanel';
 import VideoComponent from './VideoComponent';
 import {videoView} from '../../../theme.json';
-import {
-  ButtonTemplateProvider,
-  ButtonTemplateName,
-} from '../../utils/useButtonTemplate';
+import {ToolbarProvider, ToolbarPosition} from '../../utils/useToolbar';
 import SDKEvents from '../../utils/SdkEvents';
-import {useMeetingInfo} from '../../components/meeting-info/useMeetingInfo';
-import {useRtc} from 'customization-api';
+import {useRoomInfo} from '../../components/room-info/useRoomInfo';
+import {controlMessageEnum, useUserName} from 'customization-api';
+import events, {PersistanceLevel} from '../../rtm-events-api';
+import VideoCallMobileView from './VideoCallMobileView';
 
 const VideoCallScreen = () => {
   const {sidePanel} = useSidePanel();
-  const rtc = useRtc();
+  const [name] = useUserName();
   const {
     data: {meetingTitle, isHost},
-  } = useMeetingInfo();
+  } = useRoomInfo();
   const {
     ChatComponent,
     VideocallComponent,
@@ -34,16 +44,20 @@ const VideoCallScreen = () => {
     TopbarComponent,
     VideocallBeforeView,
     VideocallAfterView,
+    LeftbarComponent,
+    RightbarComponent,
   } = useCustomization((data) => {
     let components: {
       VideocallComponent?: React.ComponentType;
-      ChatComponent: React.ComponentType;
+      ChatComponent: React.ComponentType<ChatProps>;
       BottombarComponent: React.ComponentType;
       ParticipantsComponent: React.ComponentType;
       SettingsComponent: React.ComponentType;
       TopbarComponent: React.ComponentType;
       VideocallBeforeView: React.ComponentType;
       VideocallAfterView: React.ComponentType;
+      LeftbarComponent: React.ComponentType;
+      RightbarComponent: React.ComponentType;
     } = {
       BottombarComponent: Controls,
       TopbarComponent: Navbar,
@@ -52,6 +66,8 @@ const VideoCallScreen = () => {
       SettingsComponent: SettingsView,
       VideocallAfterView: React.Fragment,
       VideocallBeforeView: React.Fragment,
+      LeftbarComponent: React.Fragment,
+      RightbarComponent: React.Fragment,
     };
     if (
       data?.components?.videoCall &&
@@ -90,19 +106,36 @@ const VideoCallScreen = () => {
       // }
 
       if (
-        data?.components?.videoCall.bottomBar &&
-        typeof data?.components?.videoCall.bottomBar !== 'object' &&
-        isValidReactComponent(data?.components?.videoCall.bottomBar)
+        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.topToolBar &&
+        typeof data?.components?.videoCall.topToolBar !== 'object' &&
+        isValidReactComponent(data?.components?.videoCall.topToolBar)
       ) {
-        components.BottombarComponent = data?.components?.videoCall.bottomBar;
+        components.TopbarComponent = data?.components?.videoCall.topToolBar;
       }
 
       if (
-        data?.components?.videoCall.topBar &&
-        typeof data?.components?.videoCall.topBar !== 'object' &&
-        isValidReactComponent(data?.components?.videoCall.topBar)
+        data?.components?.videoCall.leftToolBar &&
+        typeof data?.components?.videoCall.leftToolBar !== 'object' &&
+        isValidReactComponent(data?.components?.videoCall.leftToolBar)
       ) {
-        components.TopbarComponent = data?.components?.videoCall.topBar;
+        components.LeftbarComponent = data?.components?.videoCall.leftToolBar;
+      }
+
+      if (
+        data?.components?.videoCall.rightToolBar &&
+        typeof data?.components?.videoCall.rightToolBar !== 'object' &&
+        isValidReactComponent(data?.components?.videoCall.rightToolBar)
+      ) {
+        components.RightbarComponent = data?.components?.videoCall.rightToolBar;
       }
 
       if (
@@ -128,60 +161,63 @@ const VideoCallScreen = () => {
     return components;
   });
 
-  useEffect(() => {
-    /**
-     * OLD: Commenting this code as getDevices API is web only
-     * The below code fails on native app
-     * RESPONSE: Added isWebInternal check to restrict execution only on web.
-     */
-    if (isWebInternal()) {
-      new Promise((res) =>
-        rtc.RtcEngine.getDevices(function (devices: MediaDeviceInfo[]) {
-          res(devices);
-        }),
-      ).then((devices: MediaDeviceInfo[]) => {
-        SDKEvents.emit('join', meetingTitle, devices, isHost);
-        console.log('SDKEvents: Event Called join');
-      });
-    }
-  }, []);
+  const isDesktop = useIsDesktop();
 
   return VideocallComponent ? (
     <VideocallComponent />
+  ) : // ) : !isDesktop ? (
+  isMobileUA() ? (
+    // Mobile View
+    <VideoCallMobileView />
   ) : (
+    // Desktop View
     <>
       <VideocallBeforeView />
-      <View style={style.full}>
-        <ButtonTemplateProvider
-          value={{buttonTemplateName: ButtonTemplateName.topBar}}>
-          <TopbarComponent />
-        </ButtonTemplateProvider>
-        <View style={[style.videoView, {backgroundColor: '#ffffff00'}]}>
-          <VideoComponent />
-          {sidePanel === SidePanelType.Participants ? (
-            <ParticipantsComponent />
-          ) : (
-            <></>
-          )}
-          {sidePanel === SidePanelType.Chat ? (
-            $config.CHAT ? (
-              <ChatComponent />
+      <View style={style.fullRow}>
+        <ToolbarProvider value={{position: ToolbarPosition.left}}>
+          <LeftbarComponent />
+        </ToolbarProvider>
+        <View style={style.full}>
+          <ToolbarProvider value={{position: ToolbarPosition.top}}>
+            <TopbarComponent />
+          </ToolbarProvider>
+          <View
+            style={[
+              style.videoView,
+              {paddingHorizontal: isDesktop() ? 32 : 10, paddingVertical: 10},
+            ]}>
+            <VideoComponent />
+            {sidePanel === SidePanelType.Participants ? (
+              <ParticipantsComponent />
             ) : (
               <></>
-            )
-          ) : (
+            )}
+            {sidePanel === SidePanelType.Chat ? (
+              $config.CHAT ? (
+                <ChatComponent />
+              ) : (
+                <></>
+              )
+            ) : (
+              <></>
+            )}
+            {sidePanel === SidePanelType.Settings ? (
+              <SettingsComponent />
+            ) : (
+              <></>
+            )}
+          </View>
+          {!isWebInternal() && sidePanel === SidePanelType.Chat ? (
             <></>
+          ) : (
+            <ToolbarProvider value={{position: ToolbarPosition.bottom}}>
+              <BottombarComponent />
+            </ToolbarProvider>
           )}
-          {sidePanel === SidePanelType.Settings ? <SettingsComponent /> : <></>}
         </View>
-        {!isWebInternal() && sidePanel === SidePanelType.Chat ? (
-          <></>
-        ) : (
-          <ButtonTemplateProvider
-            value={{buttonTemplateName: ButtonTemplateName.bottomBar}}>
-            <BottombarComponent />
-          </ButtonTemplateProvider>
-        )}
+        <ToolbarProvider value={{position: ToolbarPosition.right}}>
+          <RightbarComponent />
+        </ToolbarProvider>
       </View>
       <VideocallAfterView />
     </>
@@ -195,6 +231,13 @@ const style = StyleSheet.create({
     flexDirection: 'column',
     overflow: 'hidden',
   },
-  //@ts-ignore
-  videoView: videoView,
+  fullRow: {
+    flex: 1,
+    flexDirection: 'row',
+    overflow: 'hidden',
+  },
+  videoView: {
+    flex: 12,
+    flexDirection: 'row',
+  },
 });

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

@@ -1,14 +1,30 @@
-import React, {useEffect, useState} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import useLayoutsData from './useLayoutsData';
 import {isArray, isValidReactComponent} from '../../utils/common';
 import {useLayout} from '../../utils/useLayout';
-import {useRender} from 'customization-api';
+import {useContent} from 'customization-api';
+import {getGridLayoutName} from './DefaultLayouts';
+import {DispatchContext} from '../../../agora-rn-uikit';
 
 const VideoComponent = () => {
+  const {dispatch} = useContext(DispatchContext);
   const [layout, setLayoutIndex] = useState(0);
   const layoutsData = useLayoutsData();
-  const {currentLayout} = useLayout();
-  const {activeUids} = useRender();
+  const {currentLayout, setLayout} = useLayout();
+  const {activeUids, pinnedUid} = useContent();
+
+  useEffect(() => {
+    if (activeUids && activeUids.length === 1) {
+      if (pinnedUid) {
+        dispatch({type: 'UserPin', value: [0]});
+      }
+      const gridLayoutName = getGridLayoutName();
+      if (currentLayout !== gridLayoutName) {
+        setLayout(gridLayoutName);
+      }
+    }
+  }, [activeUids]);
+
   useEffect(() => {
     if (isArray(layoutsData)) {
       let index = layoutsData.findIndex((item) => item.name === currentLayout);