agora-appbuilder-core 3.0.9 → 3.0.10

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

@@ -2,13 +2,28 @@ import React, {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 {useRender, useRtc} from 'customization-api';
+import {getGridLayoutName} from './DefaultLayouts';
 
 const VideoComponent = () => {
+  const {dispatch} = useRtc();
   const [layout, setLayoutIndex] = useState(0);
   const layoutsData = useLayoutsData();
-  const {currentLayout} = useLayout();
-  const {activeUids} = useRender();
+  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]);
+
   useEffect(() => {
     if (isArray(layoutsData)) {
       let index = layoutsData.findIndex((item) => item.name === currentLayout);

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

@@ -1,85 +1,243 @@
-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 {PropsContext, 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}) => {
-  const {primaryColor} = useContext(ColorContext);
+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);
   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,
+            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>
-    </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',
   },
 });
 

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,
 };

package/template/src/subComponents/ChatBubble.tsx

@@ -16,13 +16,19 @@ import {useString} from '../utils/useString';
 import {ChatBubbleProps} from '../components/ChatContext';
 import ColorContext from '../components/ColorContext';
 import {isWebInternal} from '../utils/common';
-import {useRender} from 'customization-api';
+import {useChatUIControl, useRender} from 'customization-api';
+import ThemeConfig from '../theme';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import Spacer from '../atoms/Spacer';
+import {formatAMPM} from '../utils';
 
 const ChatBubble = (props: ChatBubbleProps) => {
   const {renderList} = useRender();
   const {primaryColor} = useContext(ColorContext);
+  const {privateActive, selectedChatUserId} = useChatUIControl();
   let {
     isLocal,
+    isSameUser,
     message,
     createdTimestamp,
     uid,
@@ -30,10 +36,8 @@ const ChatBubble = (props: ChatBubbleProps) => {
     msgId,
     updatedTimestamp,
   } = props;
-  let time =
-    new Date(parseInt(createdTimestamp)).getHours() +
-    ':' +
-    new Date(parseInt(createdTimestamp)).getMinutes();
+  let time = formatAMPM(new Date(parseInt(createdTimestamp)));
+
   const handleUrl = (url: string) => {
     if (isWebInternal()) {
       window.open(url, '_blank');
@@ -44,6 +48,7 @@ const ChatBubble = (props: ChatBubbleProps) => {
   //commented for v1 release
   //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
   const remoteUserDefaultLabel = 'User';
+
   return props?.render ? (
     props.render(
       isLocal,
@@ -53,106 +58,141 @@ const ChatBubble = (props: ChatBubbleProps) => {
       msgId,
       isDeleted,
       updatedTimestamp,
+      isSameUser,
     )
   ) : (
-    <View>
-      <View style={isLocal ? style.chatSenderViewLocal : style.chatSenderView}>
-        <Text style={isLocal ? style.timestampTextLocal : style.timestampText}>
-          {renderList[uid] ? renderList[uid].name : remoteUserDefaultLabel} |{' '}
-          {time + ' '}
+    <>
+      {!isSameUser && !(privateActive && selectedChatUserId) ? (
+        <Text
+          style={
+            isLocal ? style.localUsernameStyle : style.remoteUsernameStyle
+          }>
+          {isLocal
+            ? 'You'
+            : renderList[uid]
+            ? renderList[uid].name
+            : remoteUserDefaultLabel}
         </Text>
-      </View>
+      ) : (
+        <></>
+      )}
       <View
         style={
-          isLocal
-            ? [style.chatBubbleLocal, {backgroundColor: primaryColor}]
-            : style.chatBubble
+          isLocal ? style.chatBubbleLocalView : style.chatBubbleRemoteView
         }>
-        <Hyperlink
-          onPress={handleUrl}
-          linkStyle={{
-            color: !isLocal
-              ? $config.PRIMARY_FONT_COLOR
-              : $config.SECONDARY_FONT_COLOR,
-            textDecorationLine: 'underline',
-          }}>
-          <Text
-            style={isLocal ? style.whiteText : style.blackText}
-            selectable={true}>
-            {message}
-          </Text>
-        </Hyperlink>
+        <View
+          style={
+            isLocal
+              ? style.chatBubbleLocalViewLayer2
+              : style.chatBubbleRemoteViewLayer2
+          }>
+          <Hyperlink
+            onPress={handleUrl}
+            linkStyle={{
+              color: $config.FONT_COLOR,
+              textDecorationLine: 'underline',
+            }}>
+            <Text style={style.messageStyle} selectable={true}>
+              {message}
+            </Text>
+          </Hyperlink>
+          {/* <Spacer size={5} /> */}
+          <Text style={style.timestampStyle}>{time}</Text>
+        </View>
       </View>
-    </View>
+    </>
   );
 };
 
 const style = StyleSheet.create({
-  full: {
-    flex: 1,
-  },
-  chatSenderViewLocal: {
-    // flex: 2,
-    marginVertical: 2,
-    flexDirection: 'row',
-    marginRight: 15,
-    // marginLeft: 30,
-    justifyContent: 'flex-end',
-  },
-  chatSenderView: {
-    // flex: 2,
-    marginVertical: 2,
-    flexDirection: 'row',
-    marginRight: 30,
-    marginLeft: 15,
+  remoteUsernameStyle: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: ThemeConfig.FontSize.small,
+    textAlign: 'left',
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
+    alignSelf: 'flex-start',
+    marginTop: 20,
+    marginBottom: 8,
+    marginHorizontal: 20,
   },
-  timestampText: {
-    color: $config.PRIMARY_FONT_COLOR + '60',
-    fontWeight: '500',
-    fontSize: 12,
-    flex: 1,
+  localUsernameStyle: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: ThemeConfig.FontSize.small,
     textAlign: 'left',
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
+    alignSelf: 'flex-end',
+    marginTop: 20,
+    marginBottom: 8,
+    marginHorizontal: 20,
   },
-  timestampTextLocal: {
-    color: $config.PRIMARY_FONT_COLOR + '60',
-    fontWeight: '500',
-    fontSize: 12,
-    flex: 1,
+  timestampStyle: {
+    // position: 'absolute',
+    // bottom: 0,
+    // right: 12,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.tiny,
     textAlign: 'right',
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled,
+    marginTop: 4,
+    marginBottom: 6,
   },
-  chatBubble: {
-    backgroundColor: $config.PRIMARY_FONT_COLOR + '20',
-    flex: 1,
-    // width: 'max-content',
+  chatBubbleRemoteView: {
+    backgroundColor: $config.CARD_LAYER_2_COLOR,
+    minWidth: '30%',
     maxWidth: '80%',
     alignSelf: 'flex-start',
-    display: 'flex',
-    marginVertical: 5,
-    padding: 8,
-    marginRight: 30,
-    marginLeft: 15,
-    borderRadius: 10,
+    marginVertical: 2,
+    marginHorizontal: 20,
+    borderBottomLeftRadius: 12,
+    borderBottomRightRadius: 12,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 12,
+  },
+  chatBubbleRemoteViewLayer2: {
+    backgroundColor: 'transparent',
+    //  width: '100%',
+    // height: '100%',
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderBottomLeftRadius: 12,
+    borderBottomRightRadius: 12,
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 0,
   },
-  chatBubbleLocal: {
-    backgroundColor: $config.PRIMARY_COLOR,
+  chatBubbleLocalViewLayer2: {
+    //width: '100%',
+    //height: '100%',
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderBottomLeftRadius: 12,
+    borderBottomRightRadius: 12,
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 0,
+    backgroundColor:
+      $config.PRIMARY_ACTION_BRAND_COLOR + hexadecimalTransparency['10%'],
+  },
+  chatBubbleLocalView: {
+    backgroundColor:
+      $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['20%'],
+    minWidth: '30%',
     maxWidth: '80%',
-    flex: 1,
-    display: 'flex',
     alignSelf: 'flex-end',
-    marginVertical: 5,
-    padding: 8,
-    marginRight: 15,
-    marginLeft: 30,
-    borderRadius: 10,
-  },
-  whiteText: {
-    color: $config.SECONDARY_FONT_COLOR,
-    fontWeight: '500',
+    marginVertical: 2,
+    marginHorizontal: 20,
+    borderBottomLeftRadius: 12,
+    borderBottomRightRadius: 12,
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 0,
   },
-  blackText: {
-    color: $config.PRIMARY_FONT_COLOR,
-    opacity: 1,
-    fontWeight: '500',
+  messageStyle: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.small,
+    lineHeight: ThemeConfig.FontSize.small * 1.4,
+    color: $config.FONT_COLOR,
   },
 });