agora-appbuilder-core 4.0.25 → 4.0.26-beta-2

package/template/src/atoms/ActionMenu.tsx

@@ -8,6 +8,7 @@ import {
   Image,
   TouchableOpacity,
   ViewStyle,
+  useWindowDimensions,
 } from 'react-native';
 import React, {SetStateAction, useState} from 'react';
 
@@ -17,8 +18,12 @@ import ThemeConfig from '../theme';
 import {isWebInternal} from '../utils/common';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 import Toggle from './Toggle';
+import {Either} from '../../agora-rn-uikit/src/Controls/types';
+import {ToolbarItemHide, ToolbarMoreMenuCustomItem} from './ToolbarPreset';
 
 export interface ActionMenuItem {
+  componentName?: string;
+  order?: number;
   isExternalIcon?: boolean;
   externalIconString?: string;
   isBase64Icon?: boolean;
@@ -33,6 +38,7 @@ export interface ActionMenuItem {
   onHoverContent?: JSX.Element;
   disabled?: boolean;
   iconSize?: number;
+  hide?: ToolbarItemHide;
 }
 export interface ActionMenuProps {
   from: string;
@@ -44,7 +50,7 @@ export interface ActionMenuProps {
     left?: number;
     bottom?: number;
   };
-  items: ActionMenuItem[];
+  items: Either<ActionMenuItem[], ToolbarMoreMenuCustomItem[]>;
   hoverMode?: boolean;
   onHover?: (hover: boolean) => void;
   containerStyle?: ViewStyle;
@@ -58,28 +64,87 @@ const ActionMenu = (props: ActionMenuProps) => {
     items,
     hoverMode = false,
   } = props;
+  const {width, height} = useWindowDimensions();
 
   const renderItems = () => {
-    return items?.map(
-      (
-        {
-          icon = '',
-          onHoverIcon,
-          isBase64Icon = false,
-          isExternalIcon = false,
-          externalIconString = '',
-          title,
-          toggleStatus,
-          callback,
-          iconColor,
-          textColor,
-          disabled = false,
-          onHoverCallback = undefined,
-          onHoverContent = undefined,
-          iconSize = 20,
-        },
-        index,
-      ) => (
+    return items?.map((item, index) => {
+      //rendering the custom item with default UI
+      const {title, onPress, iconBase64, componentName, hide = false} = item;
+
+      if (typeof hide === 'boolean' && hide) {
+        return null;
+      }
+
+      try {
+        if (typeof hide === 'function' && hide && hide(width, height)) {
+          return null;
+        }
+      } catch (error) {}
+
+      if (title && onPress) {
+        return (
+          <PlatformWrapper key={props.from + '_' + componentName + index}>
+            {(isHovered: boolean) => (
+              <>
+                <TouchableOpacity
+                  disabled={false}
+                  style={[
+                    styles.row,
+                    isHovered && !false
+                      ? //first item should have border-radius on top left and top right
+                        index === 0
+                        ? styles.rowHoveredFirstChild
+                        : //last item should have border-radius on bottom left and top right
+                        items?.length - 1 === index
+                        ? styles.rowHoveredLastChild
+                        : //middle items don't need any border-radius
+                          styles.rowHoveredMiddleItems
+                      : {},
+                    false ? {opacity: 0.4} : {},
+                    items?.length - 1 === index
+                      ? {borderBottomColor: 'transparent'}
+                      : {},
+                  ]}
+                  onPress={onPress}
+                  key={componentName + index}>
+                  {iconBase64 ? (
+                    <View style={styles.iconContainer}>
+                      <ImageIcon
+                        base64={false}
+                        base64TintColor={$config.SECONDARY_ACTION_COLOR}
+                        iconType="plain"
+                        iconSize={24}
+                        icon={iconBase64}
+                        tintColor={$config.SECONDARY_ACTION_COLOR}
+                      />
+                    </View>
+                  ) : (
+                    <></>
+                  )}
+                  <Text style={[styles.text]}>{title}</Text>
+                </TouchableOpacity>
+              </>
+            )}
+          </PlatformWrapper>
+        );
+      }
+
+      const {
+        icon = '',
+        onHoverIcon,
+        isBase64Icon = false,
+        isExternalIcon = false,
+        externalIconString = '',
+        toggleStatus,
+        callback,
+        iconColor,
+        textColor,
+        disabled = false,
+        onHoverCallback = undefined,
+        onHoverContent = undefined,
+        iconSize = 20,
+      } = item;
+      return (
         <PlatformWrapper key={props.from + '_' + title + index}>
           {(isHovered: boolean) => (
             <>
@@ -150,8 +215,8 @@ const ActionMenu = (props: ActionMenuProps) => {
             </>
           )}
         </PlatformWrapper>
-      ),
-    );
+      );
+    });
   };
 
   return (

package/template/src/atoms/Carousel.tsx

@@ -10,9 +10,10 @@ interface CarouselItem {
 
 interface CarouselProps {
   data: CarouselItem[];
+  isPaginationRequired?: boolean;
 }
 
-const Carousel: React.FC<CarouselProps> = ({data}) => {
+const Carousel: React.FC<CarouselProps> = ({data, isPaginationRequired}) => {
   const [activeIndex, setActiveIndex] = useState(0);
 
   const flatListRef = React.useRef<FlatList | null>(null);
@@ -36,7 +37,8 @@ const Carousel: React.FC<CarouselProps> = ({data}) => {
   };
 
   return (
-    <View style={styles.container}>
+    <View
+      style={[styles.container, !isPaginationRequired ? {paddingTop: 24} : {}]}>
       <FlatList
         ref={flatListRef}
         data={data}
@@ -47,28 +49,32 @@ const Carousel: React.FC<CarouselProps> = ({data}) => {
         keyExtractor={(_, index) => index.toString()}
         onScroll={handleScroll}
       />
-      <View style={styles.indicatorContainer}>
-        {data.map((_, index) => (
-          <Pressable
-            key={index}
-            onPress={() => {
-              scrollToIndex(index);
-              setActiveIndex(index);
-            }}
-            hitSlop={5} // to increase clickable area
-          >
-            {({pressed}) => (
-              <View
-                style={[
-                  styles.dot,
-                  index === activeIndex && styles.activeDot,
-                  pressed && styles.pressedDot,
-                ]}
-              />
-            )}
-          </Pressable>
-        ))}
-      </View>
+      {isPaginationRequired ? (
+        <View style={styles.indicatorContainer}>
+          {data.map((_, index) => (
+            <Pressable
+              key={index}
+              onPress={() => {
+                scrollToIndex(index);
+                setActiveIndex(index);
+              }}
+              hitSlop={5} // to increase clickable area
+            >
+              {({pressed}) => (
+                <View
+                  style={[
+                    styles.dot,
+                    index === activeIndex && styles.activeDot,
+                    pressed && styles.pressedDot,
+                  ]}
+                />
+              )}
+            </Pressable>
+          ))}
+        </View>
+      ) : (
+        <></>
+      )}
     </View>
   );
 };

package/template/src/atoms/CustomIcon.tsx

@@ -148,4 +148,5 @@ export interface IconsInterface {
   block_user: string;
   'play-circle': string;
   'copy-link': string;
+  'recording-status': string;
 }

package/template/src/atoms/ParticipantsCount.tsx

@@ -71,15 +71,8 @@ export default ParticipantsCount;
 const styles = StyleSheet.create({
   participantCountView: {
     flexDirection: 'row',
-    padding: 12,
-    paddingVertical: isMobileUA() ? 5 : 8,
-    backgroundColor: $config.ICON_BG_COLOR,
-    borderRadius: 25,
-    borderWidth: 1,
-    borderColor: $config.CARD_LAYER_3_COLOR,
-    shadowColor: $config.HARD_CODED_BLACK_COLOR,
-    shadowOffset: {width: 0, height: 4},
-    shadowOpacity: 0.1,
-    shadowRadius: 20,
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'center',
   },
 });

package/template/src/atoms/RecordingInfo.tsx

@@ -2,16 +2,35 @@ import {StyleSheet, Text, View} from 'react-native';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 import React from 'react';
 import {isMobileUA} from '../utils/common';
+import IconButton from '../atoms/IconButton';
 
 const RecordingInfo = ({recordingLabel = ''}) => {
   return (
     <View style={[styles.recordingView]}>
-      <View style={[styles.recordingStatus]} />
-      {recordingLabel ? (
-        <Text style={styles.recordingText}>{recordingLabel}</Text>
-      ) : (
-        <></>
-      )}
+      <IconButton
+        placement="right"
+        isClickable={false}
+        containerStyle={styles.recordingView}
+        disabled={true}
+        iconProps={{
+          name: 'recording-status',
+          iconType: 'plain',
+          iconSize: 20,
+          tintColor: $config.SEMANTIC_ERROR,
+        }}
+        btnTextProps={{
+          text: recordingLabel,
+          textColor: $config.SEMANTIC_ERROR,
+          textStyle: {
+            fontFamily: 'Source Sans Pro',
+            fontWeight: '600',
+            fontSize: 12,
+            lineHeight: 12,
+            marginTop: 0,
+            marginLeft: 4,
+          },
+        }}
+      />
     </View>
   );
 };
@@ -20,33 +39,9 @@ export default RecordingInfo;
 
 const styles = StyleSheet.create({
   recordingView: {
-    padding: 12,
-    paddingVertical: isMobileUA() ? 10 : 12,
     flexDirection: 'row',
     alignItems: 'center',
     alignContent: 'center',
     justifyContent: 'center',
-    borderRadius: 24,
-    backgroundColor: $config.ICON_BG_COLOR,
-    borderWidth: 1,
-    borderColor: $config.CARD_LAYER_3_COLOR,
-    shadowColor: $config.HARD_CODED_BLACK_COLOR,
-    shadowOffset: {width: 0, height: 4},
-    shadowOpacity: 0.1,
-    shadowRadius: 20,
-  },
-  recordingText: {
-    fontSize: 12,
-    lineHeight: 12,
-    fontWeight: '600',
-    fontFamily: 'Source Sans Pro',
-    color: $config.FONT_COLOR + hexadecimalTransparency['50%'],
-    marginLeft: 4,
-  },
-  recordingStatus: {
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-    backgroundColor: $config.SEMANTIC_ERROR,
   },
 });

package/template/src/atoms/Toolbar.tsx

@@ -2,16 +2,8 @@ import React from 'react';
 import {View, StyleSheet} from 'react-native';
 import {useToolbar, ToolbarPosition} from '../utils/useToolbar';
 import {isMobileUA, isWebInternal, useIsDesktop} from '../utils/common';
-import hexadecimalTransparency from '../utils/hexadecimalTransparency';
-import {ToolbarCustomItem} from './ToolbarPreset';
 import ActionSheet from '../pages/video-call/ActionSheet';
 
-// export interface ToolbarProps {
-//   children: React.ReactNode;
-//   bottomSheetOnMobile?: boolean;
-//   customItems?: ToolbarCustomItem[];
-// }
-
 export interface ToolbarPropsBase {
   children: React.ReactNode;
 }

package/template/src/atoms/ToolbarPreset.tsx

@@ -7,9 +7,22 @@ import {isMobileUA} from '../utils/common';
 import NavbarMobile from '../components/NavbarMobile';
 import ActionSheet from '../pages/video-call/ActionSheet';
 
-export type ToolbarDefaultItemName =
-  //bottom bar
+export type MoreButtonDefaultKeys =
+  | 'virtual-background'
+  | 'noise-cancellation'
+  | 'caption'
+  | 'transcript'
+  | 'view-recordings'
+  | 'whiteboard'
+  | 'chat'
+  | 'participant'
+  | 'settings'
+  | 'layout'
+  | 'invite'
+  | 'screenshare'
+  | 'recording';
 
+export type BottomToolbarDefaultKeys =
   //left
   | 'layout'
   | 'invite'
@@ -21,8 +34,9 @@ export type ToolbarDefaultItemName =
   | 'switch-camera'
   | 'end-call'
   | 'raise-hand'
-  | 'more'
+  | 'more';
 
+export type TopToolbarDefaultKeys =
   //topbar
   | 'meeting-title'
   | 'participant-count'
@@ -31,12 +45,16 @@ export type ToolbarDefaultItemName =
   | 'participant'
   | 'settings';
 
-export type ToolbarDefaultItemConfig = {
-  [key in ToolbarDefaultItemName]?: ToolbarDefaultItem;
+export type ToolbarMoreButtonFields = {
+  [key in MoreButtonDefaultKeys]?: {
+    hide?: ToolbarItemHide;
+    order?: number;
+  };
 };
 
 export type ToolbarItemAlign = 'start' | 'center' | 'end';
-export type ToolbarItemHide = 'yes' | 'no';
+export type ToolbarHideCallback = (width: number, height: number) => boolean;
+export type ToolbarItemHide = boolean | ToolbarHideCallback;
 
 export interface ToolbarDefaultItem {
   component?: () => JSX.Element;
@@ -44,31 +62,62 @@ export interface ToolbarDefaultItem {
   hide?: ToolbarItemHide;
   order?: number;
 }
-
-export interface ToolbarCustomItem {
-  component: () => JSX.Element;
-  align: ToolbarItemAlign;
-  hide: ToolbarItemHide;
-  order?: number;
+export interface ToolbarMoreDefaultItem extends ToolbarDefaultItem {
+  fields?: ToolbarMoreButtonFields;
 }
+
 export type ToolbarPresetAlign = 'top' | 'bottom' | 'right' | 'left';
 
+export interface ToolbarMoreMenuCustomItem {
+  componentName: string;
+  title: string;
+  onPress: () => void;
+  iconBase64?: string;
+  hide?: ToolbarItemHide;
+  order?: number;
+}
 export interface ToolbarBottomPresetProps {
-  align: ToolbarPresetAlign;
-  customItems?: Array<ToolbarCustomItem>;
-  defaultItemsConfig?: ToolbarDefaultItemConfig;
-  snapPointsMinMax: [number, number];
+  align: 'bottom';
+  items?:
+    | {
+        [key: string]: ToolbarDefaultItem;
+      }
+    | {
+        ['more']?: ToolbarMoreDefaultItem;
+      }
+    | {
+        [key in BottomToolbarDefaultKeys]?: ToolbarDefaultItem;
+      };
+  snapPointsMinMax?: [number, number];
 }
-export interface ToolbarOtherPresetProps {
-  align: ToolbarPresetAlign;
-  customItems?: Array<ToolbarCustomItem>;
-  defaultItemsConfig?: ToolbarDefaultItemConfig;
-  snapPointsMinMax?: never;
+export interface ToolbarTopPresetProps {
+  align: 'top';
+  items?:
+    | {
+        [key in TopToolbarDefaultKeys]?: ToolbarDefaultItem;
+      }
+    | {
+        [key: string]: ToolbarDefaultItem;
+      };
+}
+export interface ToolbarRightPresetProps {
+  align: 'right';
+  items?: {
+    [key in TopToolbarDefaultKeys]?: ToolbarDefaultItem;
+  };
+}
+export interface ToolbarLeftPresetProps {
+  align: 'left';
+  items?: {
+    [key in TopToolbarDefaultKeys]?: ToolbarDefaultItem;
+  };
 }
 
 export type ToolbarPresetProps =
   | ToolbarBottomPresetProps
-  | ToolbarOtherPresetProps;
+  | ToolbarTopPresetProps
+  | ToolbarLeftPresetProps
+  | ToolbarRightPresetProps;
 
 const ToolbarPreset = (props: ToolbarPresetProps) => {
   const {align} = props;
@@ -79,41 +128,24 @@ const ToolbarPreset = (props: ToolbarPresetProps) => {
     return null;
   }
   if (align === 'left') {
-    return (
-      <Leftbar customItems={props?.customItems} includeDefaultItems={true} />
-    );
+    return <Leftbar items={props?.items} includeDefaultItems={true} />;
   } else if (align === 'right') {
-    return (
-      <Rightbar customItems={props?.customItems} includeDefaultItems={true} />
-    );
+    return <Rightbar items={props?.items} includeDefaultItems={true} />;
   } else if (align === 'top') {
     return isMobileUA() ? (
-      <NavbarMobile
-        customItems={props?.customItems}
-        includeDefaultItems={true}
-        defaultItemsConfig={props?.defaultItemsConfig}
-      />
+      <NavbarMobile items={props?.items} includeDefaultItems={true} />
     ) : (
-      <Navbar
-        customItems={props?.customItems}
-        includeDefaultItems={true}
-        defaultItemsConfig={props?.defaultItemsConfig}
-      />
+      <Navbar items={props?.items} includeDefaultItems={true} />
     );
   } else if (align === 'bottom') {
     return isMobileUA() ? (
       <ActionSheet
-        customItems={props?.customItems}
+        items={props?.items}
         includeDefaultItems={true}
         snapPointsMinMax={props?.snapPointsMinMax}
-        defaultItemsConfig={props?.defaultItemsConfig}
       />
     ) : (
-      <Controls
-        customItems={props?.customItems}
-        includeDefaultItems={true}
-        defaultItemsConfig={props?.defaultItemsConfig}
-      />
+      <Controls items={props?.items} includeDefaultItems={true} />
     );
   } else {
     return null;