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

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

@@ -0,0 +1,38 @@
+import {StyleSheet, View} from 'react-native';
+import React from 'react';
+
+import {SidePanelType} from '../../subComponents/SidePanelEnum';
+
+import {ChatHeader, PeopleHeader, SettingsHeader} from './SidePanelHeader';
+
+const ActionSheetHandle = (props: {sidePanel: SidePanelType}) => {
+  const Header = null;
+
+  const {sidePanel} = props;
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.handleIndicatorStyle} />
+
+      {sidePanel === SidePanelType.Participants && <PeopleHeader />}
+      {sidePanel === SidePanelType.Chat && <ChatHeader />}
+      {sidePanel === SidePanelType.Settings && <SettingsHeader />}
+    </View>
+  );
+};
+
+export default ActionSheetHandle;
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 0,
+  },
+  handleIndicatorStyle: {
+    backgroundColor: $config.SEMANTIC_NEUTRAL,
+    width: 40,
+    height: 4,
+    alignSelf: 'center',
+    borderRadius: 4,
+    marginTop: 12,
+  },
+});

package/template/src/pages/video-call/ActionSheetStyles.css

@@ -0,0 +1,138 @@
+
+  :root {
+    --rsbs-backdrop-bg: rgba(0, 0, 0, 0.6);
+    --rsbs-bg: #fff;
+    --rsbs-handle-bg: hsla(0, 0%, 0%, 0.14);
+    --rsbs-max-w: auto;
+    --rsbs-ml: env(safe-area-inset-left);
+    --rsbs-mr: env(safe-area-inset-right);
+    --rsbs-overlay-rounded: 16px;
+    --handleColor: $config.PRIMARY_ACTION_BRAND_COLOR;
+  }
+
+ 
+  [data-rsbs-overlay] {
+    border-top-left-radius: var(--rsbs-overlay-rounded);
+    border-top-right-radius: var(--rsbs-overlay-rounded);
+    display: flex;
+    background: var(--sheet-background); /* var(--rsbs-bg);*/
+    flex-direction: column;
+    height: var(--rsbs-overlay-h);
+    transform: translate3d(0, var(--rsbs-overlay-translate-y), 0);
+    will-change: height;
+  }
+  
+  [data-rsbs-overlay]:focus {
+    outline: none;
+  }
+  [data-rsbs-is-blocking="false"] [data-rsbs-overlay] {
+    box-shadow: 0 -5px 60px 0 rgba(38, 89, 115, 0.11),
+      0 -1px 0 rgba(38, 89, 115, 0.05);
+  }
+  [data-rsbs-overlay],
+  [data-rsbs-root]:after {
+    max-width: var(--rsbs-max-w);
+    margin-left: var(--rsbs-ml);
+    margin-right: var(--rsbs-mr);
+  }
+  [data-rsbs-overlay],
+  [data-rsbs-backdrop],
+  [data-rsbs-root]:after {
+    z-index: 3;
+    overscroll-behavior: none;
+    touch-action: none;
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+  }
+  [data-rsbs-backdrop] {
+    top: -60px;
+    bottom: -60px;
+    background-color: var(--rsbs-backdrop-bg);
+    will-change: opacity;
+    cursor: pointer;
+    opacity: 1;
+  }
+  [data-rsbs-is-dismissable="false"] [data-rsbs-backdrop] {
+    cursor: ns-resize;
+  }
+  
+  [data-rsbs-root]:after {
+    content: "";
+    pointer-events: none;
+    background: var(--rsbs-bg);
+    height: 1px;
+    transform-origin: bottom;
+    transform: scale3d(1, var(--rsbs-antigap-scale-y), 1);
+    will-change: transform;
+  }
+  [data-rsbs-footer],
+  [data-rsbs-header] {
+    flex-shrink: 0;
+    cursor: ns-resize;
+   
+  }
+  [data-rsbs-header] {
+    text-align: center;
+    user-select: none;
+    box-shadow: 0 1px 0
+      rgba(46, 59, 66, calc(var(--rsbs-content-opacity) * 0.125));
+    z-index: 1;
+   /* padding-top: calc(20px + env(safe-area-inset-top));
+    padding-bottom: 16px; */
+  
+  }
+  [data-rsbs-header]:before {
+    /* position: absolute;
+    content: "";
+    display: block;
+    width: 36px;
+    height: 4px;
+    top: calc(8px + env(safe-area-inset-top));
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 2px; */
+    background-color: var(--handle-background); /*var(--rsbs-handle-bg); */
+  }
+  @media (min-resolution: 2dppx) {
+    [data-rsbs-header]:before {
+      transform: translateX(-50%) scaleY(0.75);
+    }
+  }
+  [data-rsbs-has-header="false"] [data-rsbs-header] {
+    box-shadow: none;
+    padding-top: calc(12px + env(safe-area-inset-top));
+  }
+  
+  [data-rsbs-scroll] {
+    flex-shrink: 1;
+    flex-grow: 1;
+    -webkit-tap-highlight-color: revert;
+    -webkit-touch-callout: revert;
+    -webkit-user-select: auto;
+    -ms-user-select: auto;
+    user-select: auto;
+    overflow: hidden;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  [data-rsbs-state="opening"] [data-rsbs-content="true"] {
+    height:100%;
+  }
+
+  [data-rsbs-state="open"] [data-rsbs-content="true"] {
+    height:100%;
+  }
+  [data-rsbs-state="dragging"] [data-rsbs-content="true"] {
+    height:100%;
+  }
+  [data-rsbs-state="snapping"] [data-rsbs-content="true"] {
+    height:100%;
+  }
+
+

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

@@ -1,20 +1,20 @@
-import {layoutObjectType} from 'customization-api';
+import {layoutItem} from 'customization-api';
 import GridVideo from '../../components/GridVideo';
 import PinnedVideo from '../../components/PinnedVideo';
 import useLayoutsData from './useLayoutsData';
 import {useLayout} from '../../utils/useLayout';
 
-export const DefaultLayouts: layoutObjectType[] = [
+export const DefaultLayouts: layoutItem[] = [
   {
     name: 'grid',
-    label: 'Grid Layout',
-    iconName: 'gridLayoutIcon',
+    label: 'Grid',
+    iconName: 'grid',
     component: GridVideo,
   },
   {
     name: 'pinned',
-    label: 'Pinned Layout',
-    iconName: 'pinnedLayoutIcon',
+    label: 'Pinned',
+    iconName: 'pinned',
     component: PinnedVideo,
   },
 ];

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

@@ -1,68 +1,112 @@
-import React, {useContext} from 'react';
-import {View, StyleSheet, useWindowDimensions} from 'react-native';
-import {RFValue} from 'react-native-responsive-fontsize';
-import {ImageIcon, RenderInterface} from '../../../agora-rn-uikit';
-import TextWithTooltip from '../../subComponents/TextWithTooltip';
-import ColorContext from '../../components/ColorContext';
-import {useString} from '../../utils/useString';
+import React from 'react';
+import {View, StyleSheet, Text} from 'react-native';
+import ThemeConfig from '../../theme';
+import ImageIcon from '../../atoms/ImageIcon';
+import {useLayout, useContent} from 'customization-api';
+import {isMobileUA, isWeb, useIsSmall} from '../../utils/common';
+import {getGridLayoutName} from './DefaultLayouts';
+import {useVideoContainer} from './VideoRenderer';
 
-interface NameWithMicIconProps {
-  user: RenderInterface;
+export interface NameWithMicIconProps {
+  name: string;
+  muted?: boolean;
 }
 
 const NameWithMicIcon = (props: NameWithMicIconProps) => {
-  const {user} = props;
-  const {primaryColor} = useContext(ColorContext);
-  const {height, width} = useWindowDimensions();
+  const {activeUids} = useContent();
+  const {videoTileWidth} = useVideoContainer();
+  const {currentLayout} = useLayout();
+  const reduceSpace =
+    isMobileUA() &&
+    activeUids.length > 4 &&
+    currentLayout === getGridLayoutName();
+  const {name, muted} = props;
+  //const isSpeaking = isActiveSpeaker(user.uid);
   //commented for v1 release
   //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
   const remoteUserDefaultLabel = 'User';
+  const isSmall = useIsSmall();
   return (
-    <>
-      <View style={[style.MicBackdrop]}>
+    <View
+      style={[
+        style.container,
+        {
+          maxWidth: videoTileWidth * 0.6 > 180 ? 180 : videoTileWidth * 0.6,
+        },
+        reduceSpace ? {left: 2, bottom: 2} : {},
+        reduceSpace && activeUids.length > 12 ? {padding: 2} : {},
+      ]}>
+      {muted !== undefined ? (
         <ImageIcon
-          name={user.audio ? 'mic' : 'micOff'}
-          color={user.audio ? primaryColor : 'red'}
-          style={style.MicIcon}
+          iconType="plain"
+          name={!muted ? 'mic-on' : 'mic-off'}
+          tintColor={
+            !muted ? $config.PRIMARY_ACTION_BRAND_COLOR : $config.SEMANTIC_ERROR
+          }
+          iconSize={20}
         />
-      </View>
-      <View style={{flex: 1}}>
-        <TextWithTooltip
-          value={user.name || remoteUserDefaultLabel}
-          style={[
-            style.name,
-            {
-              fontSize: RFValue(14, height > width ? height : width),
-            },
-          ]}
-        />
-      </View>
-    </>
+      ) : (
+        <></>
+      )}
+      {(isMobileUA() || (!isMobileUA() && isSmall())) &&
+      currentLayout === getGridLayoutName() &&
+      activeUids.length > 6 ? (
+        <></>
+      ) : (
+        <PlatformWrapper>
+          <Text
+            numberOfLines={1}
+            textBreakStrategy="simple"
+            ellipsizeMode="tail"
+            style={style.name}>
+            {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

@@ -1,7 +1,7 @@
 import React from 'react';
 import VideoRenderer from './VideoRenderer';
 import {UidType} from '../../../agora-rn-uikit';
-import {renderComponentObjectInterface, useRender} from 'customization-api';
+import {useContent} from 'customization-api';
 import {useCustomization} from 'customization-implementation';
 import {isValidReactComponent} from '../../utils/common';
 
@@ -13,37 +13,13 @@ const DefaultRenderComponent: RenderComponentType = {
 };
 interface RenderComponentProps {
   uid: UidType;
+  isMax?: boolean;
 }
-const RenderComponent = ({uid}: RenderComponentProps) => {
-  const {renderList} = useRender();
-  const FpeRenderComponent = useCustomization((config) =>
-    typeof config?.components?.videoCall === 'object' &&
-    typeof config?.components?.videoCall?.customContent === 'object'
-      ? config?.components?.videoCall?.customContent
-      : undefined,
-  );
+const RenderComponent = ({uid, isMax = false}: RenderComponentProps) => {
+  const {defaultContent} = useContent();
+  const RenderComp = DefaultRenderComponent['rtc'];
 
-  const getRenderComponent = (type: keyof renderComponentObjectInterface) => {
-    //checking FPE providing the render component and whether its valid react element
-    const FPEComp =
-      FpeRenderComponent &&
-      FpeRenderComponent[type] &&
-      isValidReactComponent(FpeRenderComponent[type])
-        ? FpeRenderComponent[type]
-        : false;
-    //if its valid element then return fpe comp other return the default component
-    if (FPEComp) {
-      return FPEComp;
-    } else {
-      return DefaultRenderComponent[type]
-        ? DefaultRenderComponent[type]
-        : DefaultRenderComponent['rtc'];
-    }
-  };
-
-  const RenderComp = getRenderComponent(renderList[uid]?.type);
-
-  return <RenderComp user={renderList[uid]} />;
+  return <RenderComp user={defaultContent[uid]} isMax={isMax} />;
 };
 
 export default RenderComponent;

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

@@ -0,0 +1,186 @@
+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 {
+  ChatType,
+  useChatUIControls,
+} from '../../components/chat-ui/useChatUIControls';
+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 {chatType, setChatType, setPrivateChatUser} = useChatUIControls();
+
+  const selectGroup = () => {
+    setChatType(ChatType.Group);
+    //move this logic into ChatContainer
+    //setUnreadGroupMessageCount(0);
+    setPrivateChatUser(0);
+  };
+  const selectPrivate = () => {
+    setPrivateChatUser(0);
+    setChatType(ChatType.MemberList);
+  };
+  const isPrivateActive = chatType === ChatType.Private;
+  const isGroupActive = chatType === ChatType.Group;
+  return (
+    <SidePanelHeader
+      isChat={true}
+      leadingIconName={isPrivateActive ? 'back-btn' : null}
+      leadingIconOnPress={
+        isPrivateActive
+          ? () => {
+              setPrivateChatUser(0);
+              setChatType(ChatType.MemberList);
+            }
+          : () => {}
+      }
+      centerComponent={
+        <View style={styles.buttonHolder}>
+          <TouchableOpacity
+            onPress={selectGroup}
+            style={
+              isGroupActive ? styles.activeContainer : styles.nonActiveContainer
+            }>
+            {unreadGroupMessageCount !== 0 ? (
+              <View style={styles.chatNotification} />
+            ) : null}
+            <Text
+              style={isGroupActive ? styles.activeText : styles.nonActiveText}>
+              {groupChatLabel}
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={selectPrivate}
+            style={
+              !isGroupActive
+                ? [styles.activeContainer]
+                : [styles.nonActiveContainer]
+            }>
+            {unreadPrivateMessageCount !== 0 ? (
+              <View style={styles.chatNotification} />
+            ) : null}
+            <Text
+              style={!isGroupActive ? 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,
+  },
+});