agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/atoms/Toolbar.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import {View, StyleSheet} from 'react-native';
+import {useToolbar, ToolbarPosition} from '../utils/useToolbar';
+import {isMobileUA, isWebInternal, useIsDesktop} from '../utils/common';
+import ActionSheet from '../pages/video-call/ActionSheet';
+
+export interface ToolbarPropsBase {
+  children: React.ReactNode;
+}
+
+export interface ToolbarPropsDesktop extends ToolbarPropsBase {
+  bottomSheetOnMobile?: never;
+  snapPointsMinMax?: never;
+}
+export interface ToolbarPropsMobile extends ToolbarPropsBase {
+  bottomSheetOnMobile: boolean;
+  snapPointsMinMax: [number, number];
+}
+export type ToolbarProps = ToolbarPropsDesktop | ToolbarPropsMobile;
+
+const Toolbar = (props: ToolbarProps) => {
+  const {position} = useToolbar();
+  const {children, bottomSheetOnMobile = false, snapPointsMinMax} = props;
+  const isDesktop = useIsDesktop();
+  const paddingHorizontal = $config.ICON_TEXT
+    ? isDesktop('toolbar')
+      ? 32
+      : 10
+    : 0;
+
+  if (isMobileUA() && bottomSheetOnMobile) {
+    return (
+      <ActionSheet
+        displayCustomBottomSheetContent={true}
+        customBottomSheetContent={children}
+        snapPointsMinMax={snapPointsMinMax}
+      />
+    );
+  } else {
+    return (
+      <View
+        style={[
+          position === ToolbarPosition.left ||
+          position === ToolbarPosition.right
+            ? {
+                flexDirection: 'column',
+                justifyContent: 'space-between',
+                paddingVertical: paddingHorizontal,
+              }
+            : position === ToolbarPosition.top
+            ? isWebInternal()
+              ? toolBarStyles.topBarNonNativeStyle
+              : toolBarStyles.topBarNativeStyle
+            : position === ToolbarPosition.bottom
+            ? toolBarStyles.bottomBarStyle
+            : {},
+          position === ToolbarPosition.top ||
+          position === ToolbarPosition.bottom
+            ? {paddingHorizontal}
+            : {},
+        ]}>
+        {children}
+      </View>
+    );
+  }
+};
+
+export default Toolbar;
+
+const toolBarStyles = StyleSheet.create({
+  topBarNonNativeStyle: {
+    width: '100%',
+    zIndex: 999,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: $config.TOOLBAR_COLOR,
+  },
+  topBarNativeStyle: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    position: 'relative',
+    height: '8%',
+    backgroundColor: $config.TOOLBAR_COLOR,
+    //$config.SECONDARY_ACTION_COLOR + hexadecimalTransparency['80%'],
+  },
+  bottomBarStyle: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    backgroundColor: $config.TOOLBAR_COLOR,
+  },
+});

package/template/src/atoms/ToolbarItem.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import {View, ViewProps, ViewStyle, StyleSheet} from 'react-native';
+import {ToolbarPosition, useToolbar} from '../utils/useToolbar';
+import {isMobileUA, isWebInternal} from '../utils/common';
+import {createHook} from 'customization-implementation';
+
+export interface ToolbarItemProps extends ViewProps {
+  style?: ViewStyle;
+  children: React.ReactNode;
+  toolbarProps?: {
+    [key: string]: any;
+  };
+}
+
+export const ToolbarPropsContext = React.createContext<
+  ToolbarItemProps['toolbarProps']
+>({});
+export const useToolbarProps = createHook(ToolbarPropsContext);
+
+const ToolbarItem = (props: ToolbarItemProps) => {
+  const {isHorizontal, position} = useToolbar();
+  //isHorizontal true -> top/bottom bar
+  //isHorizontal false -> left/right bar
+  // todo hari - first item shouldnot contain the margin right
+  // todo hari - last item shouldnot contain the margin right
+
+  //action sheet
+  if (isMobileUA() && position === ToolbarPosition.bottom) {
+    return (
+      <ToolbarPropsContext.Provider value={props?.toolbarProps || {}}>
+        <View {...props} style={[props?.style, toolbarItemStyles.iconWithText]}>
+          {props?.children}
+        </View>
+      </ToolbarPropsContext.Provider>
+    );
+  } else {
+    return (
+      <ToolbarPropsContext.Provider value={props?.toolbarProps || {}}>
+        <View
+          {...props}
+          style={[
+            props?.style,
+            // isHorizontal ? {flexDirection: 'column'} : {flexDirection: 'row'},
+            position === ToolbarPosition.left
+              ? toolbarItemStyles.leftBarItemStyle
+              : position === ToolbarPosition.right
+              ? toolbarItemStyles.rightBarItemStyle
+              : position === ToolbarPosition.bottom
+              ? toolbarItemStyles.bottomBarItemStyle
+              : isWebInternal() && position === ToolbarPosition.top
+              ? toolbarItemStyles.topBarItemNonNativeStyle
+              : !isWebInternal() && position === ToolbarPosition.top
+              ? toolbarItemStyles.topBarItemNativeStyle
+              : {},
+          ]}>
+          {props?.children}
+        </View>
+      </ToolbarPropsContext.Provider>
+    );
+  }
+};
+export default ToolbarItem;
+
+const toolbarItemStyles = StyleSheet.create({
+  iconWithText: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    // alignSelf: 'center',
+    flexBasis: '25%',
+    paddingBottom: 24,
+  },
+  topBarItemNativeStyle: {
+    marginTop: 8,
+    marginBottom: 10,
+    marginHorizontal: 10,
+    justifyContent: 'center',
+  },
+  topBarItemNonNativeStyle: {
+    marginTop: $config.ICON_TEXT ? 8 : 0,
+    marginBottom: $config.ICON_TEXT ? 10 : 0,
+    marginHorizontal: 10,
+    justifyContent: 'center',
+  },
+  bottomBarItemStyle: {
+    marginTop: $config.ICON_TEXT ? 10 : 0,
+    marginBottom: $config.ICON_TEXT ? 16 : 0,
+    marginHorizontal: 10,
+  },
+  leftBarItemStyle: {
+    marginLeft: 16,
+    marginRight: 10,
+    marginVertical: 10,
+  },
+  rightBarItemStyle: {
+    marginRight: 16,
+    marginLeft: 10,
+    marginVertical: 10,
+  },
+});

package/template/src/atoms/ToolbarMenu.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import {View, StyleSheet, ViewStyle} from 'react-native';
+import {ToolbarMenuProvider} from '../utils/useMenu';
+
+export interface ToolbarMenuProps {
+  children: React.ReactNode;
+  containerStyle?: ViewStyle;
+}
+const ToolbarMenu = (props: ToolbarMenuProps) => {
+  const {children, containerStyle} = props;
+  if (!children) {
+    return null;
+  }
+  return (
+    <ToolbarMenuProvider>
+      <View style={[ToolbarMenuStyle.containerStyle, containerStyle]}>
+        {children}
+      </View>
+    </ToolbarMenuProvider>
+  );
+};
+export default ToolbarMenu;
+
+const ToolbarMenuStyle = StyleSheet.create({
+  containerStyle: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    backgroundColor: $config.CARD_LAYER_4_COLOR,
+    borderRadius: 4,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    zIndex: 1,
+    elevation: 1,
+  },
+});

package/template/src/atoms/ToolbarMenuItem.tsx

@@ -0,0 +1,104 @@
+import React, {useState} from 'react';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacityProps,
+  TouchableOpacity,
+  Text,
+} from 'react-native';
+import ThemeConfig from '../theme';
+import ImageIcon from './ImageIcon';
+import {IconButtonProps} from './IconButton';
+import {isWebInternal} from '../utils/common';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+
+export interface ToolbarMenuItemProps extends IconButtonProps {
+  // disabled?: boolean;
+  // onPress: TouchableOpacityProps['onPress'];
+  // isHovered?: boolean;
+  // menuIcon?: string;
+  // menuText?: string;
+  // menuIconColor?: string;
+}
+const ToolbarMenuItem = (props: ToolbarMenuItemProps) => {
+  return (
+    <PlatformWrapper>
+      {(isHovered: boolean) => (
+        <>
+          <TouchableOpacity
+            disabled={props.disabled}
+            style={[
+              props.disabled ? {opacity: 0.4} : {},
+              isHovered
+                ? {
+                    backgroundColor:
+                      $config.CARD_LAYER_5_COLOR +
+                      hexadecimalTransparency['15%'],
+                  }
+                : {},
+              ToolbarMenuItemStyles.container,
+            ]}
+            onPress={props.onPress}>
+            <View style={ToolbarMenuItemStyles.iconContainer}>
+              <ImageIcon
+                base64={false}
+                iconType="plain"
+                iconSize={20}
+                name={props?.iconProps?.name}
+                tintColor={props?.iconProps?.tintColor}
+              />
+            </View>
+            <Text
+              style={[
+                ToolbarMenuItemStyles.textStyle,
+                props?.btnTextProps?.textStyle,
+                props?.btnTextProps?.textColor
+                  ? {color: props?.btnTextProps?.textColor}
+                  : {},
+              ]}>
+              {props?.btnTextProps?.text}
+            </Text>
+          </TouchableOpacity>
+        </>
+      )}
+    </PlatformWrapper>
+  );
+};
+export default ToolbarMenuItem;
+const PlatformWrapper = ({children}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  return isWebInternal() ? (
+    <div
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}>
+      {children(isHovered)}
+    </div>
+  ) : (
+    <>{children(false)}</>
+  );
+};
+const ToolbarMenuItemStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: $config.CARD_LAYER_3_COLOR,
+  },
+  iconContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 8,
+    marginVertical: 12,
+    marginLeft: 12,
+  },
+  textStyle: {
+    paddingVertical: 14,
+    color: $config.SECONDARY_ACTION_COLOR,
+    fontSize: ThemeConfig.FontSize.normal,
+    fontWeight: '400',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+  },
+});

package/template/src/atoms/ToolbarPreset.tsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import Navbar from '../components/Navbar';
+import Controls from '../components/Controls';
+import Leftbar from '../components/Leftbar';
+import Rightbar from '../components/Rightbar';
+import {isMobileUA} from '../utils/common';
+import NavbarMobile from '../components/NavbarMobile';
+import ActionSheet from '../pages/video-call/ActionSheet';
+
+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'
+  //center
+  | 'local-audio'
+  | 'local-video'
+  | 'screenshare'
+  | 'recording'
+  | 'switch-camera'
+  | 'end-call'
+  | 'raise-hand'
+  | 'more';
+
+export type TopToolbarDefaultKeys =
+  //topbar
+  | 'meeting-title'
+  | 'participant-count'
+  | 'recording-status'
+  | 'chat'
+  | 'participant'
+  | 'settings';
+
+export type ToolbarMoreButtonDefaultFields = {
+  [key in MoreButtonDefaultKeys]?: {
+    hide?: ToolbarItemHide;
+    order?: number;
+    component?: React.ComponentType;
+    label?: ToolbarItemLabel;
+    onPress?: () => void;
+  };
+};
+export type ToolbarMoreButtonCustomFields = {
+  [key: string]: {
+    hide?: ToolbarItemHide;
+    order?: number;
+    component?: React.ComponentType;
+    onPress?: () => void;
+  };
+};
+
+export type ToolbarItemAlign = 'start' | 'center' | 'end';
+export type ToolbarHideCallback = (width: number, height: number) => boolean;
+export type ToolbarItemHide = boolean | ToolbarHideCallback;
+
+export type ToolbarItemLabelCallback = (languageCode: string) => string;
+export type ToolbarItemLabel = string | ToolbarItemLabelCallback;
+export interface ToolbarDefaultItem {
+  component?: (props?: any) => JSX.Element;
+  align?: ToolbarItemAlign;
+  hide?: ToolbarItemHide;
+  order?: number;
+  label?: ToolbarItemLabel;
+  onPress?: () => void;
+}
+export interface ToolbarMoreDefaultItem extends ToolbarDefaultItem {
+  fields?: ToolbarMoreButtonDefaultFields | ToolbarMoreButtonCustomFields;
+}
+
+export type ToolbarPresetAlign = 'top' | 'bottom' | 'right' | 'left';
+
+export type ToolbarDefaultItemsConfig = {
+  [key: string]: ToolbarDefaultItem;
+};
+
+export type TopToolbarItemsConfig =
+  | {
+      [key in TopToolbarDefaultKeys]?: ToolbarDefaultItem;
+    };
+
+export type BottomToolbarItemsConfig =
+  | {
+      [key in BottomToolbarDefaultKeys]?: ToolbarDefaultItem;
+    }
+  | {
+      ['more']?: ToolbarMoreDefaultItem;
+    };
+
+export type ToolbarItemsConfig =
+  | TopToolbarItemsConfig
+  | BottomToolbarItemsConfig
+  | ToolbarDefaultItemsConfig;
+
+export type ToolbarPresetProps = {
+  align: 'top' | 'bottom' | 'left' | 'right';
+  items?: ToolbarItemsConfig;
+  //applicable only for bottom bar
+  snapPointsMinMax?: [number, number];
+};
+
+const ToolbarPreset = (props: ToolbarPresetProps) => {
+  const {align} = props;
+  if (!align) {
+    console.log(
+      'ToolbarPreset align prop is empty. please provide align prop to get the corresponding toolbar preset',
+    );
+    return null;
+  }
+  if (align === 'left') {
+    return <Leftbar items={props?.items} includeDefaultItems={true} />;
+  } else if (align === 'right') {
+    return <Rightbar items={props?.items} includeDefaultItems={true} />;
+  } else if (align === 'top') {
+    return isMobileUA() ? (
+      <NavbarMobile items={props?.items} includeDefaultItems={true} />
+    ) : (
+      <Navbar items={props?.items} includeDefaultItems={true} />
+    );
+  } else if (align === 'bottom') {
+    return isMobileUA() ? (
+      <ActionSheet
+        items={props?.items}
+        includeDefaultItems={true}
+        snapPointsMinMax={props?.snapPointsMinMax}
+      />
+    ) : (
+      <Controls items={props?.items} includeDefaultItems={true} />
+    );
+  } else {
+    return null;
+  }
+};
+export default ToolbarPreset;

package/template/src/atoms/Tooltip.native.tsx

@@ -0,0 +1,65 @@
+import RNTooltip from 'react-native-walkthrough-tooltip';
+import React, {useState} from 'react';
+import {Pressable, Text, TouchableOpacity, View, ViewStyle} from 'react-native';
+import ThemeConfig from '../theme';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+
+interface TooltipProps {
+  activeBgStyle?: ViewStyle;
+  defaultBgStyle?: ViewStyle;
+  renderContent: (
+    isToolTipVisible: boolean,
+    setToolTipVisible: React.Dispatch<React.SetStateAction<boolean>>,
+  ) => React.ReactNode;
+  toolTipMessage: string;
+  toolTipIcon?: React.ReactNode;
+  placement?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+}
+const Tooltip = (props: TooltipProps) => {
+  const [isToolTipVisible, setToolTipVisible] = useState(false);
+  const {placement = 'top'} = props;
+  return (
+    <RNTooltip
+      arrowSize={{width: 25, height: 15}}
+      contentStyle={{
+        borderRadius: 8,
+        padding: 12,
+        backgroundColor: $config.CARD_LAYER_3_COLOR,
+      }}
+      tooltipStyle={{
+        shadowColor: $config.HARD_CODED_BLACK_COLOR,
+        shadowOffset: {
+          height: 4,
+          width: 0,
+        },
+        shadowOpacity: 0.1,
+        elevation: 5,
+        shadowRadius: 2,
+      }}
+      backgroundColor={'transparent'}
+      isVisible={isToolTipVisible}
+      content={
+        <View style={{flex: 1, flexDirection: 'row'}}>
+          {props?.toolTipIcon ? props.toolTipIcon : <></>}
+          <Text
+            style={{
+              color: $config.FONT_COLOR,
+              fontFamily: ThemeConfig.FontFamily.sansPro,
+              fontSize: 16,
+              fontWeight: '400',
+            }}>
+            {props.toolTipMessage}
+          </Text>
+        </View>
+      }
+      placement={placement}
+      onClose={() => setToolTipVisible(false)}>
+      <Pressable
+        style={isToolTipVisible ? props?.activeBgStyle : props?.defaultBgStyle}
+        onPress={() => setToolTipVisible(true)}>
+        {props.renderContent(isToolTipVisible, setToolTipVisible)}
+      </Pressable>
+    </RNTooltip>
+  );
+};
+export default Tooltip;

package/template/src/atoms/Tooltip.tsx

@@ -0,0 +1,111 @@
+import ReactTooltip from 'react-tooltip';
+import React, {useState} from 'react';
+import {Text, View, ViewStyle} from 'react-native';
+
+interface TooltipProps {
+  activeBgStyle?: ViewStyle;
+  defaultBgStyle?: ViewStyle;
+  renderContent: (
+    isToolTipVisible: boolean,
+    setToolTipVisible: React.Dispatch<React.SetStateAction<boolean>>,
+  ) => React.ReactNode;
+  toolTipMessage: string;
+  toolTipIcon?: React.ReactNode;
+  isClickable?: boolean;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  showTooltipArrow?: boolean;
+  fontSize?: number;
+  onPress?: () => void;
+}
+const Tooltip = (props: TooltipProps) => {
+  const [isToolTipVisible, setToolTipVisible] = useState(false);
+  const {
+    isClickable = false,
+    placement = 'top',
+    showTooltipArrow = true,
+  } = props;
+  const css = showTooltipArrow
+    ? `
+  .custom-tool-tip{
+    padding:8px;
+    border-radius: 8px;
+  }
+  .custom-tool-tip div{
+    font-family: "Source Sans Pro";
+    font-weight: 400;
+    font-size: ${props.fontSize ? props.fontSize : 16}px;
+  }
+  .__react_component_tooltip.show{
+    opacity:1;
+  }
+ `
+    : `.custom-tool-tip {
+        padding:8px;
+        border-radius: 8px;
+      }
+  .custom-tool-tip div{
+    font-family: "Source Sans Pro";
+    font-weight: 400;
+    font-size: ${props.fontSize ? props.fontSize : 16}px;
+  }
+  .__react_component_tooltip.show{
+    opacity:1;
+  }
+  .custom-tool-tip::after{
+    display:none
+  }
+`;
+  const randomString = (
+    length = 5,
+    chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
+  ) => {
+    var result = '';
+    for (var i = length; i > 0; --i)
+      result += chars[Math.floor(Math.random() * chars.length)];
+    return result;
+  };
+
+  const toolTipId = randomString();
+
+  return (
+    <>
+      <div
+        style={{cursor: isClickable ? 'pointer' : 'auto'}}
+        data-tip
+        data-event={isClickable ? 'click focus' : 'mouseenter'}
+        data-event-off={isClickable ? '' : 'mouseleave'}
+        data-for={toolTipId}
+        onMouseEnter={() => setToolTipVisible(true)}
+        onMouseLeave={() => {
+          setToolTipVisible(false);
+        }}>
+        <View
+          style={
+            isToolTipVisible ? props?.activeBgStyle : props?.defaultBgStyle
+          }>
+          {props.renderContent(isToolTipVisible, setToolTipVisible)}
+        </View>
+      </div>
+      <ReactTooltip
+        afterShow={() => {
+          isClickable && props?.onPress && props.onPress();
+        }}
+        globalEventOff="click"
+        id={toolTipId}
+        backgroundColor={$config.CARD_LAYER_3_COLOR}
+        className="custom-tool-tip"
+        place={placement}
+        type="dark"
+        effect="solid">
+        <style type="text/css">{css}</style>
+        <View style={{flex: 1, flexDirection: 'row', alignItems: 'center'}}>
+          {props?.toolTipIcon ? props.toolTipIcon : null}
+          <Text style={{color: $config.FONT_COLOR}}>
+            {props.toolTipMessage}
+          </Text>
+        </View>
+      </ReactTooltip>
+    </>
+  );
+};
+export default Tooltip;