agora-appbuilder-core 3.0.10 → 3.0.12

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

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

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

@@ -1,24 +1,13 @@
-import React, {useContext, useEffect, useState} from 'react';
-import {
-  View,
-  StyleSheet,
-  useWindowDimensions,
-  Text,
-  Platform,
-} from 'react-native';
+import React, {useContext, useEffect} from 'react';
+import {View, StyleSheet} 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, {ChatProps} from '../../components/Chat';
+import Chat from '../../components/Chat';
 import {SidePanelType} from '../../subComponents/SidePanelEnum';
-import {
-  isMobileUA,
-  isValidReactComponent,
-  isWebInternal,
-  useIsDesktop,
-} from '../../utils/common';
+import {isValidReactComponent, isWebInternal} from '../../utils/common';
 import {useSidePanel} from '../../utils/useSidePanel';
 import VideoComponent from './VideoComponent';
 import {videoView} from '../../../theme.json';
@@ -28,13 +17,10 @@ import {
 } from '../../utils/useButtonTemplate';
 import SDKEvents from '../../utils/SdkEvents';
 import {useMeetingInfo} from '../../components/meeting-info/useMeetingInfo';
-import {controlMessageEnum, useRtc, useUserName} from 'customization-api';
-import events, {EventPersistLevel} from '../../rtm-events-api';
-import VideoCallMobileView from './VideoCallMobileView';
+import {useRtc} from 'customization-api';
 
 const VideoCallScreen = () => {
   const {sidePanel} = useSidePanel();
-  const [name] = useUserName();
   const rtc = useRtc();
   const {
     data: {meetingTitle, isHost},
@@ -51,7 +37,7 @@ const VideoCallScreen = () => {
   } = useCustomization((data) => {
     let components: {
       VideocallComponent?: React.ComponentType;
-      ChatComponent: React.ComponentType<ChatProps>;
+      ChatComponent: React.ComponentType;
       BottombarComponent: React.ComponentType;
       ParticipantsComponent: React.ComponentType;
       SettingsComponent: React.ComponentType;
@@ -143,14 +129,6 @@ 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
@@ -158,7 +136,6 @@ const VideoCallScreen = () => {
      */
     if (isWebInternal()) {
       new Promise((res) =>
-        //@ts-ignore
         rtc.RtcEngine.getDevices(function (devices: MediaDeviceInfo[]) {
           res(devices);
         }),
@@ -169,16 +146,9 @@ const VideoCallScreen = () => {
     }
   }, []);
 
-  const isDesktop = useIsDesktop();
-
   return VideocallComponent ? (
     <VideocallComponent />
-  ) : // ) : !isDesktop ? (
-  isMobileUA() ? (
-    // Mobile View
-    <VideoCallMobileView />
   ) : (
-    // Desktop View
     <>
       <VideocallBeforeView />
       <View style={style.full}>
@@ -186,11 +156,7 @@ const VideoCallScreen = () => {
           value={{buttonTemplateName: ButtonTemplateName.topBar}}>
           <TopbarComponent />
         </ButtonTemplateProvider>
-        <View
-          style={[
-            style.videoView,
-            {paddingHorizontal: isDesktop() ? 32 : 10, paddingVertical: 10},
-          ]}>
+        <View style={[style.videoView, {backgroundColor: '#ffffff00'}]}>
           <VideoComponent />
           {sidePanel === SidePanelType.Participants ? (
             <ParticipantsComponent />
@@ -229,8 +195,6 @@ const style = StyleSheet.create({
     flexDirection: 'column',
     overflow: 'hidden',
   },
-  videoView: {
-    flex: 12,
-    flexDirection: 'row',
-  },
+  //@ts-ignore
+  videoView: videoView,
 });

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

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

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

@@ -1,243 +1,85 @@
-import React, {useState, useRef, useContext, useEffect} from 'react';
-import {View, StyleSheet, Platform} from 'react-native';
-import {PropsContext, RenderInterface, UidType} from '../../../agora-rn-uikit';
+import React, {useContext} from 'react';
+import {View, StyleSheet} from 'react-native';
+import {RenderInterface, UidType} from '../../../agora-rn-uikit';
 import ScreenShareNotice from '../../subComponents/ScreenShareNotice';
 import {MaxVideoView} from '../../../agora-rn-uikit';
 import FallbackLogo from '../../subComponents/FallbackLogo';
+import ColorContext from '../../components/ColorContext';
 import NetworkQualityPill from '../../subComponents/NetworkQualityPill';
 import NameWithMicIcon from './NameWithMicIcon';
-import useIsActiveSpeaker from '../../utils/useIsActiveSpeaker';
-import {useLayout, useRender, useRtc} from 'customization-api';
-import {getGridLayoutName, getPinnedLayoutName} from './DefaultLayouts';
-import IconButton from '../../atoms/IconButton';
-import UserActionMenuOptionsOptions from '../../components/participants/UserActionMenuOptions';
-import {isMobileUA, isWebInternal} from '../../utils/common';
-import ThemeConfig from '../../theme';
 
 interface VideoRendererProps {
   user: RenderInterface;
-  isMax?: boolean;
 }
-const VideoRenderer: React.FC<VideoRendererProps> = ({user, isMax = false}) => {
-  const {dispatch} = useRtc();
-  const isActiveSpeaker = useIsActiveSpeaker();
-  const {pinnedUid, activeUids} = useRender();
-  const activeSpeaker = isActiveSpeaker(user.uid);
-  const [isHovered, setIsHovered] = useState(false);
-  const {rtcProps} = useContext(PropsContext);
-  const {currentLayout} = useLayout();
-  const showReplacePin =
-    pinnedUid && !isMax && isHovered && currentLayout === getPinnedLayoutName();
-  const showPinForMe =
-    !pinnedUid &&
-    !isMax &&
-    isHovered &&
-    currentLayout === getPinnedLayoutName();
-  const [videoTileWidth, setVideoTileWidth] = useState(0);
-  const [avatarSize, setAvatarSize] = useState(100);
-  const videoMoreMenuRef = useRef(null);
-  const [actionMenuVisible, setActionMenuVisible] = React.useState(false);
+const VideoRenderer: React.FC<VideoRendererProps> = ({user}) => {
+  const {primaryColor} = useContext(ColorContext);
   return (
-    <>
-      <UserActionMenuOptionsOptions
-        actionMenuVisible={actionMenuVisible}
-        setActionMenuVisible={(flag) => {
-          //once user clicks action menu item -> hide the action menu and set parent isHovered false
-          if (!flag) {
-            setIsHovered(false);
-          }
-          setActionMenuVisible(flag);
+    <View style={maxStyle.container}>
+      <ScreenShareNotice uid={user.uid} />
+      <NetworkQualityPill
+        user={user}
+        primaryColor={primaryColor}
+        rootStyle={{
+          marginLeft: 25,
+          top: 8,
+          right: 10,
+        }}
+        small
+      />
+      <MaxVideoView
+        fallback={() => {
+          return FallbackLogo(user?.name);
         }}
         user={user}
-        btnRef={videoMoreMenuRef}
-        from={'video-tile'}
+        key={user.uid}
       />
-      <PlatformWrapper isHovered={isHovered} setIsHovered={setIsHovered}>
-        <View
-          onLayout={({
-            nativeEvent: {
-              layout: {x, y, width, height},
-            },
-          }) => {
-            setVideoTileWidth(width);
-            setAvatarSize(Math.floor(width * 0.35));
-          }}
-          style={[
-            maxStyle.container,
-            activeSpeaker
-              ? maxStyle.activeContainerStyle
-              : user.video
-              ? maxStyle.noVideoStyle
-              : maxStyle.nonActiveContainerStyle,
-          ]}>
-          {!showReplacePin && !showPinForMe && (
-            <ScreenShareNotice uid={user.uid} isMax={isMax} />
-          )}
-          <NetworkQualityPill user={user} />
-          <MaxVideoView
-            fallback={() => {
-              return FallbackLogo(
-                user?.name,
-                activeSpeaker,
-                (showReplacePin || showPinForMe) && !isMobileUA()
-                  ? true
-                  : false,
-                isMax,
-                avatarSize,
-              );
-            }}
-            user={user}
-            containerStyle={{
-              width: '100%',
-              height: '100%',
-            }}
-            key={user.uid}
-          />
-          <NameWithMicIcon
-            videoTileWidth={videoTileWidth}
-            user={user}
-            isMax={isMax}
-          />
-          {user.uid !== rtcProps?.screenShareUid &&
-          (isHovered || actionMenuVisible || isMobileUA()) ? (
-            <MoreMenu
-              videoMoreMenuRef={videoMoreMenuRef}
-              setActionMenuVisible={setActionMenuVisible}
-            />
-          ) : (
-            <></>
-          )}
-          {(showReplacePin || showPinForMe) && !isMobileUA() ? (
-            <IconButton
-              onPress={() => {
-                dispatch({type: 'UserPin', value: [user.uid]});
-              }}
-              containerStyle={maxStyle.replacePinContainer}
-              btnTextProps={{
-                text: showReplacePin ? 'Replace Pin' : 'Pin for me',
-                textColor: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
-                textStyle: {
-                  marginTop: 0,
-                  fontWeight: '700',
-                  marginLeft: 6,
-                },
-              }}
-              iconProps={{
-                name: 'pin-filled',
-                iconSize: 20,
-                iconType: 'plain',
-                tintColor: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
-              }}
-            />
-          ) : (
-            <></>
-          )}
-        </View>
-      </PlatformWrapper>
-    </>
-  );
-};
-
-interface MoreMenuProps {
-  setActionMenuVisible: (f: boolean) => void;
-  videoMoreMenuRef: any;
-}
-const MoreMenu = ({setActionMenuVisible, videoMoreMenuRef}: MoreMenuProps) => {
-  const {activeUids} = useRender();
-  const {currentLayout} = useLayout();
-  const reduceSpace =
-    isMobileUA() &&
-    activeUids.length > 4 &&
-    currentLayout === getGridLayoutName();
-  return (
-    <>
-      <View
-        ref={videoMoreMenuRef}
-        collapsable={false}
-        style={{
-          position: 'absolute',
-          right: reduceSpace ? 2 : 8,
-          bottom: reduceSpace ? 2 : 8,
-          zIndex: 999,
-        }}>
-        <IconButton
-          onPress={() => {
-            setActionMenuVisible(true);
-          }}
-          iconProps={{
-            iconContainerStyle: {
-              padding: reduceSpace && activeUids.length > 12 ? 2 : 8,
-              backgroundColor: $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR,
-            },
-            name: 'more-menu',
-            iconSize: 20,
-            tintColor: $config.SECONDARY_ACTION_COLOR,
-          }}
-        />
+      <View style={maxStyle.nameHolder}>
+        <NameWithMicIcon user={user} />
       </View>
-    </>
-  );
-};
-
-const PlatformWrapper = ({children, setIsHovered, isHovered}) => {
-  return isWebInternal() && !isMobileUA() ? (
-    <div
-      style={{width: '100%', height: '100%'}}
-      /**
-       * why onMouseOver is used instead of onMouseEnter
-       * when user clicks close icon the participant then video tile will expand and
-       * cursor will directly land on child elements. so onhover kabab menu icon is not displayed
-       *
-       * As per doc
-       * The mouseover event triggers when the mouse pointer enters the div element, and its child elements.
-       * The mouseenter event is only triggered when the mouse pointer enters the div element.
-       *  */
-      onMouseOver={() => {
-        !isHovered && setIsHovered(true);
-      }}
-      onMouseLeave={() => {
-        setIsHovered(false);
-      }}>
-      {children}
-    </div>
-  ) : (
-    <>{children}</>
+    </View>
   );
 };
 
 const maxStyle = StyleSheet.create({
-  replacePinContainer: {
-    zIndex: 999,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    backgroundColor: $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR,
-    borderRadius: 8,
+  container: {width: '100%', height: '100%'},
+  width80: {width: '80%'},
+  width100: {width: '100%'},
+  flex2: {flex: 2},
+  flex4: {flex: 4, backgroundColor: '#ffffff00'},
+  flex1: {flex: 1},
+  nameHolder: {
+    marginTop: -25,
+    backgroundColor: $config.SECONDARY_FONT_COLOR + 'aa',
+    alignSelf: 'flex-end',
+    paddingHorizontal: 8,
+    height: 25,
+    borderTopLeftRadius: 15,
+    borderBottomRightRadius: 15,
     flexDirection: 'row',
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    margin: 'auto',
-    maxWidth: 120,
-    maxHeight: 32,
-  },
-  container: {
-    width: '100%',
-    height: '100%',
-    position: 'relative',
-    overflow: 'hidden',
-    borderRadius: ThemeConfig.BorderRadius.small,
-    borderWidth: 2,
+    zIndex: 5,
+    maxWidth: '100%',
   },
-  activeContainerStyle: {
-    borderColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+  name: {
+    color: $config.PRIMARY_FONT_COLOR,
+    lineHeight: 25,
+    fontWeight: '700',
+    flexShrink: 1,
   },
-  nonActiveContainerStyle: {
-    borderColor: 'transparent',
+  MicBackdrop: {
+    width: 20,
+    height: 20,
+    borderRadius: 15,
+    marginHorizontal: 10,
+    backgroundColor: $config.SECONDARY_FONT_COLOR,
+    display: 'flex',
+    alignSelf: 'center',
+    justifyContent: 'center',
   },
-  noVideoStyle: {
-    borderColor: 'transparent',
+  MicIcon: {
+    width: '80%',
+    height: '80%',
+    alignSelf: 'center',
+    resizeMode: 'contain',
   },
 });
 

package/template/src/rtm-events/constants.ts

@@ -2,7 +2,6 @@
 //  1. RECORDING
 const RECORDING_STARTED = 'RECORDING_STARTED';
 const RECORDING_STOPPED = 'RECORDING_STOPPED';
-const RECORDING_STOP_REQUEST = 'RECORDING_STOP_REQUEST';
 // 2. SCREENSHARE
 const SCREENSHARE_STARTED = 'SCREENSHARE_STARTED';
 const SCREENSHARE_STOPPED = 'SCREENSHARE_STOPPED';
@@ -10,7 +9,6 @@ const SCREENSHARE_STOPPED = 'SCREENSHARE_STOPPED';
 const EventActions = {
   RECORDING_STARTED,
   RECORDING_STOPPED,
-  RECORDING_STOP_REQUEST,
   SCREENSHARE_STARTED,
   SCREENSHARE_STOPPED,
 };