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

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

@@ -1,86 +1,252 @@
-import React, {useContext} from 'react';
-import {View, StyleSheet} from 'react-native';
-import {RenderInterface, UidType} from '../../../agora-rn-uikit';
+import React, {useState, useRef, useContext, useEffect} from 'react';
+import {View, StyleSheet, Platform} from 'react-native';
+import {
+  DispatchContext,
+  PropsContext,
+  ContentInterface,
+  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 useActiveSpeaker from '../../utils/useActiveSpeaker';
+import {useLayout, useContent} 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';
+import {createHook} from 'customization-implementation';
 
 interface VideoRendererProps {
-  user: RenderInterface;
+  user: ContentInterface;
+  isMax?: boolean;
 }
-const VideoRenderer: React.FC<VideoRendererProps> = ({user}) => {
-  const {primaryColor} = useContext(ColorContext);
+const VideoRenderer: React.FC<VideoRendererProps> = ({user, isMax = false}) => {
+  const {dispatch} = useContext(DispatchContext);
+  const activeSpeaker = useActiveSpeaker();
+  const {pinnedUid, activeUids} = useContent();
+  const isActiveSpeaker = activeSpeaker === 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);
   return (
-    <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);
+    <>
+      <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);
         }}
         user={user}
-        key={user.uid}
+        btnRef={videoMoreMenuRef}
+        from={'video-tile'}
       />
-      <View style={maxStyle.nameHolder}>
-        <NameWithMicIcon user={user} />
+      <PlatformWrapper isHovered={isHovered} setIsHovered={setIsHovered}>
+        <View
+          onLayout={({
+            nativeEvent: {
+              layout: {x, y, width, height},
+            },
+          }) => {
+            setVideoTileWidth(width);
+            setAvatarSize(Math.floor(width * 0.35));
+          }}
+          style={[
+            maxStyle.container,
+            isActiveSpeaker
+              ? maxStyle.activeContainerStyle
+              : user.video
+              ? maxStyle.noVideoStyle
+              : maxStyle.nonActiveContainerStyle,
+          ]}>
+          {!showReplacePin && !showPinForMe && (
+            <ScreenShareNotice uid={user.uid} isMax={isMax} />
+          )}
+          <NetworkQualityPill uid={user.uid} />
+          <MaxVideoView
+            fallback={() => {
+              return FallbackLogo(
+                user?.name,
+                isActiveSpeaker,
+                (showReplacePin || showPinForMe) && !isMobileUA()
+                  ? true
+                  : false,
+                isMax,
+                avatarSize,
+              );
+            }}
+            user={user}
+            containerStyle={{
+              width: '100%',
+              height: '100%',
+            }}
+            key={user.uid}
+          />
+          <VideoContainerProvider value={{videoTileWidth}}>
+            <NameWithMicIcon name={user.name} muted={!user.audio} />
+          </VideoContainerProvider>
+          {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} = useContent();
+  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>
-    </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}</>
   );
 };
 
 const maxStyle = StyleSheet.create({
-  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,
+  replacePinContainer: {
+    zIndex: 999,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    backgroundColor: $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR,
+    borderRadius: 8,
     flexDirection: 'row',
-    zIndex: 5,
-    maxWidth: '100%',
+    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,
   },
-  name: {
-    color: $config.PRIMARY_FONT_COLOR,
-    lineHeight: 25,
-    fontWeight: '700',
-    flexShrink: 1,
+  activeContainerStyle: {
+    borderColor: $config.PRIMARY_ACTION_BRAND_COLOR,
   },
-  MicBackdrop: {
-    width: 20,
-    height: 20,
-    borderRadius: 15,
-    marginHorizontal: 10,
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    display: 'flex',
-    alignSelf: 'center',
-    justifyContent: 'center',
+  nonActiveContainerStyle: {
+    borderColor: 'transparent',
   },
-  MicIcon: {
-    width: '80%',
-    height: '80%',
-    alignSelf: 'center',
-    resizeMode: 'contain',
+  noVideoStyle: {
+    borderColor: 'transparent',
   },
 });
 
+const VideoContainerContext = React.createContext({videoTileWidth: 0});
+const VideoContainerProvider = VideoContainerContext.Provider;
+export const useVideoContainer = createHook(VideoContainerContext);
+
 export default VideoRenderer;

package/template/src/pages/video-call/index.ts

@@ -1,20 +1,48 @@
 import ParticipantsView from '../../components/ParticipantsView';
 import Chat from '../../components/Chat';
-import Navbar, {NavBarComponentsArray} from '../../components/Navbar';
+import Navbar, {
+  ParticipantsCountView,
+  ParticipantsIconButton,
+  ChatIconButton,
+  SettingsIconButton,
+} from '../../components/Navbar';
+import CopyJoinInfo from '../../subComponents/CopyJoinInfo';
+import LayoutIconButton from '../../subComponents/LayoutIconButton';
 import SettingsView from '../../components/SettingsView';
-import Controls, {ControlsComponentsArray} from '../../components/Controls';
+import Controls from '../../components/Controls';
+import LiveStreamControls from '../../components/livestream/views/LiveStreamControls';
+import LocalEndcall from '../../subComponents/LocalEndCall';
+import LocalAudioMute from '../../subComponents/LocalAudioMute';
+import LocalVideoMute from '../../subComponents/LocalVideoMute';
+import Recording from '../../subComponents/Recording';
+import LocalSwitchCamera from '../../subComponents/LocalSwitchCamera';
+import ScreenshareButton from '../../subComponents/screenshare/ScreenshareButton';
+
 import ChatBubble from '../../subComponents/ChatBubble';
-import {ChatTextInput, ChatSendButton} from '../../subComponents/ChatInput';
+import {ChatInput} from '../../subComponents/ChatInput';
 
+const ToolbarComponents = {
+  CopyJoinInfo,
+  ParticipantsCountView,
+  ParticipantsIconButton,
+  ChatIconButton,
+  LayoutIconButton,
+  SettingsIconButton,
+  LocalAudioMute,
+  LocalVideoMute,
+  LocalSwitchCamera,
+  ScreenshareButton,
+  Recording,
+  LocalEndcall,
+  LiveStreamControls,
+};
 export {
   ParticipantsView,
   Chat,
   Navbar,
-  NavBarComponentsArray,
   SettingsView,
   Controls,
-  ControlsComponentsArray,
   ChatBubble,
-  ChatTextInput,
-  ChatSendButton,
+  ChatInput,
+  ToolbarComponents,
 };

package/template/src/rtm/RTMEngine.ts

@@ -47,6 +47,12 @@ class RTMEngine {
 
     return RTMEngine._instance;
   }
+  setLocalUID(localUID: string) {
+    this.localUID = localUID;
+  }
+  setChannelId(channelID: string) {
+    this.channelId = channelID;
+  }
 
   setLoginInfo(localUID: string, channelID: string) {
     this.localUID = localUID;
@@ -62,6 +68,8 @@ class RTMEngine {
     try {
       this.destroyClientInstance();
       RTMEngine._instance = null;
+      this.localUID = '';
+      this.channelId = '';
     } catch (error) {
       console.log('Error destroying instance error: ', error);
     }

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

@@ -2,6 +2,7 @@
 //  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';
@@ -9,6 +10,7 @@ const SCREENSHARE_STOPPED = 'SCREENSHARE_STOPPED';
 const EventActions = {
   RECORDING_STARTED,
   RECORDING_STOPPED,
+  RECORDING_STOP_REQUEST,
   SCREENSHARE_STARTED,
   SCREENSHARE_STOPPED,
 };
@@ -28,7 +30,7 @@ const PUBLIC_CHAT_MESSAGE = 'PUBLIC_CHAT_MESSAGE';
 const PRIVATE_CHAT_MESSAGE = 'PRIVATE_CHAT_MESSAGE';
 // 4. NAME ATTRIBUTE
 const NAME_ATTRIBUTE = 'name';
-// 5. VIDEO MEETING ROLE
+// 5. VIDEO ROOM ROLE
 const VIDEO_MEETING_HOST = 'VIDEO_MEETING_HOST';
 const VIDEO_MEETING_ATTENDEE = 'VIDEO_MEETING_ATTENDEE';
 const EventNames = {

package/template/src/rtm-events-api/Events.ts

@@ -18,7 +18,7 @@ import {
   ReceiverUid,
   EventCallback,
   EventSource,
-  EventPersistLevel,
+  PersistanceLevel,
 } from './types';
 import {adjustUID} from '../rtm/utils';
 
@@ -165,6 +165,7 @@ class Events {
       if (!this._validateEvt(eventName) || !this._validateListener(listener))
         return;
       EventUtils.addListener(eventName, listener, this.source);
+      console.log('CUSTOM_EVENT_API event listener registered', eventName);
       return () => {
         EventUtils.removeListener(eventName, listener, this.source);
       };
@@ -218,7 +219,7 @@ class Events {
   send = async (
     eventName: string = '',
     payload: string = '',
-    persistLevel: EventPersistLevel = EventPersistLevel.LEVEL1,
+    persistLevel: PersistanceLevel = PersistanceLevel.None,
     receiver: ReceiverUid = -1,
   ) => {
     if (!this._validateEvt(eventName)) return;
@@ -235,8 +236,8 @@ class Events {
     };
 
     if (
-      persistLevel === EventPersistLevel.LEVEL2 ||
-      persistLevel === EventPersistLevel.LEVEL3
+      persistLevel === PersistanceLevel.Sender ||
+      persistLevel === PersistanceLevel.Session
     ) {
       try {
         await this._persist(eventName, persistValue);

package/template/src/rtm-events-api/LocalEvents.ts

@@ -0,0 +1,6 @@
+import {EventEmitter} from 'events';
+export enum LocalEventsEnum {
+  ACTIVE_SPEAKER = 'ACTIVE_SPEAKER',
+}
+const LocalEventEmitter = new EventEmitter();
+export default LocalEventEmitter;

package/template/src/rtm-events-api/types.ts

@@ -8,14 +8,14 @@ export enum EventSource {
   core = 'core',
   fpe = 'fpe',
 }
-export enum EventPersistLevel {
-  'LEVEL1' = 1,
-  'LEVEL2',
-  'LEVEL3',
+export enum PersistanceLevel {
+  'None' = 1,
+  'Sender',
+  'Session',
 }
 interface EventCallbackPayload {
   payload: string;
-  persistLevel: EventPersistLevel;
+  persistLevel: PersistanceLevel;
   sender: UidType;
   ts: number;
 }