agora-appbuilder-core 3.0.9 → 3.0.10

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

@@ -1,68 +1,144 @@
-import React, {useContext} from 'react';
-import {View, StyleSheet, useWindowDimensions} from 'react-native';
+import React, {useContext, useEffect} from 'react';
+import {View, StyleSheet, useWindowDimensions, Text} from 'react-native';
 import {RFValue} from 'react-native-responsive-fontsize';
-import {ImageIcon, RenderInterface} from '../../../agora-rn-uikit';
+import ThemeConfig from '../../theme';
+import {RenderInterface} from '../../../agora-rn-uikit';
+import ImageIcon from '../../atoms/ImageIcon';
 import TextWithTooltip from '../../subComponents/TextWithTooltip';
-import ColorContext from '../../components/ColorContext';
 import {useString} from '../../utils/useString';
+import {useLayout, useRender} from 'customization-api';
+import useIsActiveSpeaker from '../../utils/useIsActiveSpeaker';
+import {isMobileUA, isWeb, isWebInternal, useIsSmall} from '../../utils/common';
+import AnimatedActiveSpeaker from '../../atoms/AnimatedActiveSpeaker';
+import {getGridLayoutName, getPinnedLayoutName} from './DefaultLayouts';
 
 interface NameWithMicIconProps {
   user: RenderInterface;
+  isMax: boolean;
+  videoTileWidth: number;
 }
 
 const NameWithMicIcon = (props: NameWithMicIconProps) => {
+  const {activeUids} = useRender();
+  const {currentLayout} = useLayout();
+  const reduceSpace =
+    isMobileUA() &&
+    activeUids.length > 4 &&
+    currentLayout === getGridLayoutName();
   const {user} = props;
-  const {primaryColor} = useContext(ColorContext);
   const {height, width} = useWindowDimensions();
+  const isActiveSpeaker = useIsActiveSpeaker();
+  const isSpeaking = isActiveSpeaker(user.uid);
   //commented for v1 release
   //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
   const remoteUserDefaultLabel = 'User';
+  const isSmall = useIsSmall();
   return (
-    <>
-      <View style={[style.MicBackdrop]}>
-        <ImageIcon
-          name={user.audio ? 'mic' : 'micOff'}
-          color={user.audio ? primaryColor : 'red'}
-          style={style.MicIcon}
-        />
-      </View>
-      <View style={{flex: 1}}>
-        <TextWithTooltip
-          value={user.name || remoteUserDefaultLabel}
-          style={[
-            style.name,
-            {
-              fontSize: RFValue(14, height > width ? height : width),
-            },
-          ]}
-        />
-      </View>
-    </>
+    <View
+      style={[
+        style.container,
+        {
+          maxWidth:
+            props.videoTileWidth * 0.6 > 180 ? 180 : props.videoTileWidth * 0.6,
+        },
+        reduceSpace ? {left: 2, bottom: 2} : {},
+        reduceSpace && activeUids.length > 12 ? {padding: 2} : {},
+      ]}>
+      {/* {user.audio ? (
+          <AnimatedActiveSpeaker isSpeaking={isSpeaking} />
+        ) : ( */}
+      <ImageIcon
+        iconType="plain"
+        name={
+          user.audio && isSpeaking
+            ? 'active-speaker'
+            : user.audio
+            ? 'mic-on'
+            : 'mic-off'
+        }
+        tintColor={
+          user.audio
+            ? $config.PRIMARY_ACTION_BRAND_COLOR
+            : $config.SEMANTIC_ERROR
+        }
+        iconSize={20}
+      />
+      {/* )} */}
+      {/* <ImageIcon
+          name={
+            isSpeaking ? 'active-speaker' : user.audio ? 'mic-on' : 'mic-off'
+          }
+          tintColor={
+            isSpeaking
+              ? $config.PRIMARY_ACTION_BRAND_COLOR
+              : user.audio
+              ? $config.PRIMARY_ACTION_BRAND_COLOR
+              : $config.SEMANTIC_ERROR
+          }
+          iconSize={'small'}
+        /> */}
+      {(isMobileUA() || (!isMobileUA() && isSmall())) &&
+      currentLayout === getGridLayoutName() &&
+      activeUids.length > 6 ? (
+        //  ||  (isMobileUA() &&
+        //     currentLayout !== getPinnedLayoutName() &&
+        //     !props?.isMax)
+        <></>
+      ) : (
+        <PlatformWrapper>
+          <Text
+            numberOfLines={1}
+            textBreakStrategy="simple"
+            ellipsizeMode="tail"
+            style={style.name}>
+            {user.name || remoteUserDefaultLabel}
+          </Text>
+        </PlatformWrapper>
+      )}
+    </View>
+  );
+};
+const PlatformWrapper = ({children}) => {
+  return isWeb() ? (
+    <div
+      style={{
+        userSelect: 'none',
+        MozUserSelect: 'none',
+        WebkitUserSelect: 'none',
+        msUserSelect: 'none',
+        alignSelf: 'center',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        color: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
+      }}>
+      {children}
+    </div>
+  ) : (
+    <>{children}</>
   );
 };
 
 const style = StyleSheet.create({
+  container: {
+    backgroundColor: $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR,
+    position: 'absolute',
+    alignItems: 'center',
+    padding: 8,
+    // height: 34,
+    left: 8,
+    bottom: 8,
+    borderRadius: 4,
+    flexDirection: 'row',
+    zIndex: 5,
+  },
   name: {
-    color: $config.PRIMARY_FONT_COLOR,
-    lineHeight: 25,
-    fontWeight: '700',
+    color: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
+    fontSize: ThemeConfig.FontSize.small,
+    fontWeight: '600',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
     flexShrink: 1,
-  },
-  MicBackdrop: {
-    width: 20,
-    height: 20,
-    borderRadius: 15,
-    marginHorizontal: 10,
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    display: 'flex',
-    alignSelf: 'center',
-    justifyContent: 'center',
-  },
-  MicIcon: {
-    width: '80%',
-    height: '80%',
-    alignSelf: 'center',
-    resizeMode: 'contain',
+    marginLeft: 4,
+    marginRight: 2,
   },
 });
 

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

@@ -13,8 +13,9 @@ const DefaultRenderComponent: RenderComponentType = {
 };
 interface RenderComponentProps {
   uid: UidType;
+  isMax?: boolean;
 }
-const RenderComponent = ({uid}: RenderComponentProps) => {
+const RenderComponent = ({uid, isMax = false}: RenderComponentProps) => {
   const {renderList} = useRender();
   const FpeRenderComponent = useCustomization((config) =>
     typeof config?.components?.videoCall === 'object' &&
@@ -43,7 +44,7 @@ const RenderComponent = ({uid}: RenderComponentProps) => {
 
   const RenderComp = getRenderComponent(renderList[uid]?.type);
 
-  return <RenderComp user={renderList[uid]} />;
+  return <RenderComp user={renderList[uid]} isMax={isMax} />;
 };
 
 export default RenderComponent;

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

@@ -0,0 +1,190 @@
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import React, {useContext} from 'react';
+import SidePanelHeader, {
+  SidePanelStyles,
+} from '../../subComponents/SidePanelHeader';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import ThemeConfig from '../../theme';
+import {useChatNotification} from '../../components/chat-notification/useChatNotification';
+import {useSidePanel} from '../../utils/useSidePanel';
+import {SidePanelType} from '../../subComponents/SidePanelEnum';
+import {useChatUIControl} from '../../components/chat-ui/useChatUIControl';
+import {numFormatter} from '../../utils';
+import ChatContext from '../../components/ChatContext';
+
+export const SettingsHeader = (props) => {
+  const {setSidePanel} = useSidePanel();
+  const settingsLabel = 'Settings';
+  return (
+    <SidePanelHeader
+      centerComponent={
+        <Text style={SidePanelStyles.heading}>{settingsLabel}</Text>
+      }
+      trailingIconName="close"
+      trailingIconOnPress={() => {
+        props.handleClose && props.handleClose();
+        setSidePanel(SidePanelType.None);
+      }}
+    />
+  );
+};
+
+export const PeopleHeader = () => {
+  const {onlineUsersCount} = useContext(ChatContext);
+  const participantsLabel = `People (${numFormatter(onlineUsersCount)})`;
+  const {setSidePanel} = useSidePanel();
+  return (
+    <SidePanelHeader
+      centerComponent={
+        <Text style={SidePanelStyles.heading}>{participantsLabel}</Text>
+      }
+      trailingIconName="close"
+      trailingIconOnPress={() => {
+        setSidePanel(SidePanelType.None);
+      }}
+    />
+  );
+};
+
+export const ChatHeader = () => {
+  const {
+    unreadGroupMessageCount,
+    setUnreadGroupMessageCount,
+    unreadPrivateMessageCount,
+    setUnreadPrivateMessageCount,
+    setUnreadIndividualMessageCount,
+    unreadIndividualMessageCount,
+  } = useChatNotification();
+
+  const {setSidePanel} = useSidePanel();
+  const groupChatLabel = 'Group';
+  const privateChatLabel = 'Private';
+
+  const {
+    groupActive,
+    setGroupActive,
+    privateActive,
+    setPrivateActive,
+    setSelectedChatUserId: setSelectedUser,
+  } = useChatUIControl();
+
+  const selectGroup = () => {
+    setPrivateActive(false);
+    setGroupActive(true);
+    //move this logic into ChatContainer
+    //setUnreadGroupMessageCount(0);
+    setSelectedUser(0);
+  };
+  const selectPrivate = () => {
+    setGroupActive(false);
+    setSelectedUser(0);
+    setPrivateActive(false);
+  };
+
+  return (
+    <SidePanelHeader
+      isChat={true}
+      leadingIconName={privateActive ? 'back-btn' : null}
+      leadingIconOnPress={
+        privateActive
+          ? () => {
+              setSelectedUser(0);
+              setPrivateActive(false);
+            }
+          : () => {}
+      }
+      centerComponent={
+        <View style={styles.buttonHolder}>
+          <TouchableOpacity
+            onPress={selectGroup}
+            style={
+              groupActive ? styles.activeContainer : styles.nonActiveContainer
+            }>
+            {unreadGroupMessageCount !== 0 ? (
+              <View style={styles.chatNotification} />
+            ) : null}
+            <Text
+              style={groupActive ? styles.activeText : styles.nonActiveText}>
+              {groupChatLabel}
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={selectPrivate}
+            style={
+              !groupActive
+                ? [styles.activeContainer]
+                : [styles.nonActiveContainer]
+            }>
+            {unreadPrivateMessageCount !== 0 ? (
+              <View style={styles.chatNotification} />
+            ) : null}
+            <Text
+              style={!groupActive ? styles.activeText : styles.nonActiveText}>
+              {privateChatLabel}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      }
+      trailingIconName="close"
+      trailingIconOnPress={() => {
+        setSidePanel(SidePanelType.None);
+      }}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  buttonHolder: {
+    backgroundColor:
+      $config.HARD_CODED_BLACK_COLOR + hexadecimalTransparency['30%'],
+    borderRadius: 12,
+    flexDirection: 'row',
+  },
+  chatViewNative: {
+    zIndex: 5,
+    width: '100%',
+    height: '100%',
+    right: 0,
+    bottom: 0,
+  },
+  chatInputContainer: {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  activeContainer: {
+    margin: 2,
+    backgroundColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+    borderRadius: 11,
+    alignSelf: 'center',
+  },
+  nonActiveContainer: {
+    alignSelf: 'center',
+  },
+  activeText: {
+    paddingHorizontal: 24,
+    paddingVertical: 10,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 12,
+    color: $config.PRIMARY_ACTION_TEXT_COLOR,
+  },
+  nonActiveText: {
+    paddingHorizontal: 24,
+    paddingVertical: 10,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 12,
+    color: $config.FONT_COLOR,
+  },
+  chatNotification: {
+    width: 8,
+    height: 8,
+    backgroundColor: $config.SEMANTIC_ERROR,
+    borderRadius: 30,
+    position: 'absolute',
+    right: 8,
+    top: 4,
+  },
+});

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

@@ -0,0 +1,139 @@
+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 {useMeetingInfo} from '../../components/meeting-info/useMeetingInfo';
+
+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 {RtcContext, ToggleState, useLocalUid} from '../../../agora-rn-uikit';
+import {useLocalUserInfo, useRender} from 'customization-api';
+
+const VideoCallMobileView = () => {
+  const {
+    data: {meetingTitle},
+  } = useMeetingInfo();
+  const {isRecordingActive} = useRecording();
+  const recordingLabel = 'Recording';
+
+  const appState = useRef(AppState.currentState);
+  const [appStateVisible, setAppStateVisible] = useState(appState.current);
+  const {RtcEngine, dispatch} = useContext(RtcContext);
+  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
+  //           : RtcEngine?.isVideoEnabled;
+
+  //         if (isCamON.current || 1) {
+  //           isWebInternal()
+  //             ? await RtcEngine.muteLocalVideoStream(true)
+  //             : await RtcEngine.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 RtcEngine.muteLocalVideoStream(false)
+  //             : await RtcEngine.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,13 +1,24 @@
-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';
@@ -17,10 +28,13 @@ import {
 } from '../../utils/useButtonTemplate';
 import SDKEvents from '../../utils/SdkEvents';
 import {useMeetingInfo} from '../../components/meeting-info/useMeetingInfo';
-import {useRtc} from 'customization-api';
+import {controlMessageEnum, useRtc, useUserName} from 'customization-api';
+import events, {EventPersistLevel} from '../../rtm-events-api';
+import VideoCallMobileView from './VideoCallMobileView';
 
 const VideoCallScreen = () => {
   const {sidePanel} = useSidePanel();
+  const [name] = useUserName();
   const rtc = useRtc();
   const {
     data: {meetingTitle, isHost},
@@ -37,7 +51,7 @@ const VideoCallScreen = () => {
   } = useCustomization((data) => {
     let components: {
       VideocallComponent?: React.ComponentType;
-      ChatComponent: React.ComponentType;
+      ChatComponent: React.ComponentType<ChatProps>;
       BottombarComponent: React.ComponentType;
       ParticipantsComponent: React.ComponentType;
       SettingsComponent: React.ComponentType;
@@ -129,6 +143,14 @@ const VideoCallScreen = () => {
   });
 
   useEffect(() => {
+    // setTimeout(() => {
+    //   events.send(
+    //     controlMessageEnum.newUserJoined,
+    //     JSON.stringify({name}),
+    //     EventPersistLevel.LEVEL1,
+    //   );
+    // }, 1000);
+
     /**
      * OLD: Commenting this code as getDevices API is web only
      * The below code fails on native app
@@ -136,6 +158,7 @@ const VideoCallScreen = () => {
      */
     if (isWebInternal()) {
       new Promise((res) =>
+        //@ts-ignore
         rtc.RtcEngine.getDevices(function (devices: MediaDeviceInfo[]) {
           res(devices);
         }),
@@ -146,9 +169,16 @@ const VideoCallScreen = () => {
     }
   }, []);
 
+  const isDesktop = useIsDesktop();
+
   return VideocallComponent ? (
     <VideocallComponent />
+  ) : // ) : !isDesktop ? (
+  isMobileUA() ? (
+    // Mobile View
+    <VideoCallMobileView />
   ) : (
+    // Desktop View
     <>
       <VideocallBeforeView />
       <View style={style.full}>
@@ -156,7 +186,11 @@ const VideoCallScreen = () => {
           value={{buttonTemplateName: ButtonTemplateName.topBar}}>
           <TopbarComponent />
         </ButtonTemplateProvider>
-        <View style={[style.videoView, {backgroundColor: '#ffffff00'}]}>
+        <View
+          style={[
+            style.videoView,
+            {paddingHorizontal: isDesktop() ? 32 : 10, paddingVertical: 10},
+          ]}>
           <VideoComponent />
           {sidePanel === SidePanelType.Participants ? (
             <ParticipantsComponent />
@@ -195,6 +229,8 @@ const style = StyleSheet.create({
     flexDirection: 'column',
     overflow: 'hidden',
   },
-  //@ts-ignore
-  videoView: videoView,
+  videoView: {
+    flex: 12,
+    flexDirection: 'row',
+  },
 });